Customize web template -- 4
Budget: $30 – $250 USD
Hi,
I have very basic experience in frontend development and I need help for the following 2 tasks which are basically some customizations for Apache EChart (https://echarts.apache.org/) and Datatables Editor (https://editor.datatables.net/):
1. Customize the graphs shown in "ss Task 1.jpg" by:
1.1 Creating an example of user defined colors
1.2 Add some buttons like the ones present in first two graphs (Month, Week, Day). The graph should be updated when the user will press those buttons. On the X axe labels for first two graphs if Days button is press Month/Day/Year format should be used, for example 04/20/2022, if the Week button is pressed Week/Year format should be used, for example 14/2022, if the Month button is pressed Month/Year format should be used for example 04/2022
1.3 Cut from margins arround description labels (Min, Max, Preorder, Sale, Deal), there is too much empty space
2. Customize Datatables and Editor CRUD (https://editor.datatables.net/) and integrate it in the previous template
2.1 Edit & Delete button (pen and recicle box icons) in the last column of all rows. There should no new/create item functionality
2.2 Toggle Column function
Ex: http://live.datatables.net/sarepehu/1/edit <- a better design for the toggle functionality
2.3 The fact that a particular column is used to order the table should be visible
2.4 Search on all columns/particular columns
2.5 Toggle button for enum fields with yes/no, True/False as possible values in both Table and Edit views
https://jsfiddle.net/hg2my4vr/
2.6 Fixed number of character will be shown in the cell followed be periods if the content is longer. When the user click, the row will be expanded in height.
2.7 If a picture is detected to be in the cell (let's say only .jpg file, I will update myself for other picture formats) an icon is displayed and when the user click the icon pop up a window like the one of editing the item and display that picture
The final design should be like the present one showed in "ss Task 2.jpg"
3. Customize colors of Basic Angular Gauge and add it as it is shown in "ss Task 3.jpg"
Data used in the graphs and table should be imported from MySQL using PHP, you can put it then in a JSON doesn't matter
For tables please use a generous amount of columns, arround 30. Create two examples, one for a normal table and one for joined tables. A very thin and good looking scroll bar is recomanded to scroll the tables.
SQL files for creating and populating the table should be delivered for test purposes.
Also some small improvements are requested:
- Remove search option on the top of Action column
- Fix the search on Enum column
- Action column should be in a fixed position in the right edge of the table
- Save and Close buttons should be in a fixed position in the bottom of the Edit modal
The project is using Apache EChart (https://echarts.apache.org/) and Datatables Editor (https://editor.datatables.net/).
The link to the project is:
https://smartwebbers.com/myworks/flatkit113/html/datatable.html
I supposed 1-2 days is enought for an experienced front-end developer. I need it quick. It is only some customizations in fact.
I am waiting for your proposals!
Thank you!
I have very basic experience in frontend development and I need help for the following 2 tasks which are basically some customizations for Apache EChart (https://echarts.apache.org/) and Datatables Editor (https://editor.datatables.net/):
1. Customize the graphs shown in "ss Task 1.jpg" by:
1.1 Creating an example of user defined colors
1.2 Add some buttons like the ones present in first two graphs (Month, Week, Day). The graph should be updated when the user will press those buttons. On the X axe labels for first two graphs if Days button is press Month/Day/Year format should be used, for example 04/20/2022, if the Week button is pressed Week/Year format should be used, for example 14/2022, if the Month button is pressed Month/Year format should be used for example 04/2022
1.3 Cut from margins arround description labels (Min, Max, Preorder, Sale, Deal), there is too much empty space
2. Customize Datatables and Editor CRUD (https://editor.datatables.net/) and integrate it in the previous template
2.1 Edit & Delete button (pen and recicle box icons) in the last column of all rows. There should no new/create item functionality
2.2 Toggle Column function
Ex: http://live.datatables.net/sarepehu/1/edit <- a better design for the toggle functionality
2.3 The fact that a particular column is used to order the table should be visible
2.4 Search on all columns/particular columns
2.5 Toggle button for enum fields with yes/no, True/False as possible values in both Table and Edit views
https://jsfiddle.net/hg2my4vr/
2.6 Fixed number of character will be shown in the cell followed be periods if the content is longer. When the user click, the row will be expanded in height.
2.7 If a picture is detected to be in the cell (let's say only .jpg file, I will update myself for other picture formats) an icon is displayed and when the user click the icon pop up a window like the one of editing the item and display that picture
The final design should be like the present one showed in "ss Task 2.jpg"
3. Customize colors of Basic Angular Gauge and add it as it is shown in "ss Task 3.jpg"
Data used in the graphs and table should be imported from MySQL using PHP, you can put it then in a JSON doesn't matter
For tables please use a generous amount of columns, arround 30. Create two examples, one for a normal table and one for joined tables. A very thin and good looking scroll bar is recomanded to scroll the tables.
SQL files for creating and populating the table should be delivered for test purposes.
Also some small improvements are requested:
- Remove search option on the top of Action column
- Fix the search on Enum column
- Action column should be in a fixed position in the right edge of the table
- Save and Close buttons should be in a fixed position in the bottom of the Edit modal
The project is using Apache EChart (https://echarts.apache.org/) and Datatables Editor (https://editor.datatables.net/).
The link to the project is:
https://smartwebbers.com/myworks/flatkit113/html/datatable.html
I supposed 1-2 days is enought for an experienced front-end developer. I need it quick. It is only some customizations in fact.
I am waiting for your proposals!
Thank you!