Challenge Overview
Hepius Control Charts - POC is dashboard with graphs to show. As part of Part 1 of this challenge we built a small PoC with only a couple of filters - Resource Name and Time Interval
Requirements:
As part of this PoC we will be extending the features of the application and also build the application as per the UI/UX design.
Machine / Resource filters - This will help in zeroing down on the machine or resources.
1. Department
- Department.sheet
- DEPARTMENT column
2. Resource Group
- Resource_Group sheet
- GROUP column
3. Resource Family
- Resource_Group sheet
- RESOURCETYPE column
4. Machines / Resource Name (existing) - Multiselect Dropdown
- ScrapChart sheet
- RESOURCENAME column
- Use label name ‘Machine’ like design
Scrap Details filters (ScrapChart sheet)
5. Crew
- CREW column
6. Scrap Reason
- SCRAPREASONCODE column
7. From Date and To Date
- TRANSACTIONTIME column
8. Time Interval (existing)
- TIME_INTERVAL column
9. Sigma
- Selecting Sigma value will reflect a different column
- If Sigma = 1 (UCL1SGMA_S and LCL1SGMA_S columns)
- If Sigma = 2 (UCL2SGMA_S and LCL2SGMA_S columns)
- If Sigma = 3 (UCL3SGMA_S and LCL3SGMA_S columns)
10. Rule - Multiselect Dropdown
- SR1 to SR10 columns
- Like existing, if SR is 1 show colored dot, if SR is 0 or NULL ignore
- We need to change how multiple SRs are represented in the graph, current we show a circle with the number of SR’s inside. Need change to show the right colored dots as per the design in a straight vertical line with proper tooltip.
- Tooltip - This missing in design, please update existing tooltip to match with the provided design.
Graph representation
X
- TRANSACTIONTIME (HH:MM format)
Y
- SCRAPQUANTITY if quantity is selected in toggle button or SCRAPQUANTITY_PC if percentage is selected.
- Mean, SD and Sigmas put a different scale together. There needs be a center line as shown in the old design (check forum) and + Sigma to be plotted on Positive scale and - Sigma to be plotted on Negative scale from the Center line.
Note: For 1 particular machine/resource + Interval + Scrap reason code combination, the mean is a straight line. Similar is for SD.
The special graph
The graph is special here. You need to code in such a way that it follows the design exactly here. The problem we are trying to solve here is how to display more than one data points at a single point. We need to plot SR1 to SR10 as needed and in some cases it might intersect to one single point. So in that case we need to show the right colored dots as per the design in a straight vertical line with proper tooltip.
Other features to be considered
1. Pagination for more than 4 graphs (existing code)
2. The page must fit in 1980x1080 without any scrollbar.
Resources Sheet / Data and Design
Please check forum
Important:
- You must use Angular7 as a base framework for this submission challenge
- To responsive please use Bootstrap4
- To charts, you need to use D3.js
- Focus on Desktop screen size only.
- Angular Components must re-usable. The component should be derived based on the configuration. Configuration file to contain the required configurations required to render the page
- Use Linter, Jest and other best practice library to maintain your code quality.
- Your submission must follow Angular Coding guidelines: https://angular.io/guide/styleguide
- Put clear comment/documentation for all Angular components
- All table data need to be loaded by JSON.
- Create HTTP Services to pull all data from JSON.
- Create Routes that use proper naming with existing pages
- Create README.txt file that explains how to deploy your submission, structure, and commands
- Create clear documentation to set up your submission locally
CODE REQUIREMENTS:
HTML5
- Provide comments on the page elements to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all HTML code so future developers can follow the code.
- All HTML code naming should not have any conflicts or errors.
CSS3
- Provide comments on the CSS code. We need comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all code so developers can follow.
- All CSS naming should not have any conflicts.
- As possible use CSS3 style when creating all styling.
Javascript
- You must use Typescript (.ts) file format
- Use Linter, Jest and other best practice library to maintain your code quality.
- Your submission must follow Angular Coding guidelines: https://angular.io/guide/styleguide
- Put clear comment/documentation for all Angular components
- All JavaScript must not have copyright by a third party.
- It is fine to use GPL/MIT/Open Source code.
- You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code.
Images/SVG
- Images should be properly compressed while still having good visual quality.
- Please use best practice repetition usage of background based image.
- Please use sprites when using icons for your submission.
- If any icons are required, ask and they will be provided
Web Browsers Requirements
- IE11
- Microsoft Edge
- Firefox latest version
- Safari latest version
- Chrome latest version
Please send a MR to dev branch with your changes.
Requirements:
As part of this PoC we will be extending the features of the application and also build the application as per the UI/UX design.
Machine / Resource filters - This will help in zeroing down on the machine or resources.
1. Department
- Department.sheet
- DEPARTMENT column
2. Resource Group
- Resource_Group sheet
- GROUP column
3. Resource Family
- Resource_Group sheet
- RESOURCETYPE column
4. Machines / Resource Name (existing) - Multiselect Dropdown
- ScrapChart sheet
- RESOURCENAME column
- Use label name ‘Machine’ like design
Scrap Details filters (ScrapChart sheet)
5. Crew
- CREW column
6. Scrap Reason
- SCRAPREASONCODE column
7. From Date and To Date
- TRANSACTIONTIME column
8. Time Interval (existing)
- TIME_INTERVAL column
9. Sigma
- Selecting Sigma value will reflect a different column
- If Sigma = 1 (UCL1SGMA_S and LCL1SGMA_S columns)
- If Sigma = 2 (UCL2SGMA_S and LCL2SGMA_S columns)
- If Sigma = 3 (UCL3SGMA_S and LCL3SGMA_S columns)
10. Rule - Multiselect Dropdown
- SR1 to SR10 columns
- Like existing, if SR is 1 show colored dot, if SR is 0 or NULL ignore
- We need to change how multiple SRs are represented in the graph, current we show a circle with the number of SR’s inside. Need change to show the right colored dots as per the design in a straight vertical line with proper tooltip.
- Tooltip - This missing in design, please update existing tooltip to match with the provided design.
Graph representation
X
- TRANSACTIONTIME (HH:MM format)
Y
- SCRAPQUANTITY if quantity is selected in toggle button or SCRAPQUANTITY_PC if percentage is selected.
- Mean, SD and Sigmas put a different scale together. There needs be a center line as shown in the old design (check forum) and + Sigma to be plotted on Positive scale and - Sigma to be plotted on Negative scale from the Center line.
Note: For 1 particular machine/resource + Interval + Scrap reason code combination, the mean is a straight line. Similar is for SD.
The special graph
The graph is special here. You need to code in such a way that it follows the design exactly here. The problem we are trying to solve here is how to display more than one data points at a single point. We need to plot SR1 to SR10 as needed and in some cases it might intersect to one single point. So in that case we need to show the right colored dots as per the design in a straight vertical line with proper tooltip.
Other features to be considered
1. Pagination for more than 4 graphs (existing code)
2. The page must fit in 1980x1080 without any scrollbar.
Resources Sheet / Data and Design
Please check forum
Important:
- You must use Angular7 as a base framework for this submission challenge
- To responsive please use Bootstrap4
- To charts, you need to use D3.js
- Focus on Desktop screen size only.
- Angular Components must re-usable. The component should be derived based on the configuration. Configuration file to contain the required configurations required to render the page
- Use Linter, Jest and other best practice library to maintain your code quality.
- Your submission must follow Angular Coding guidelines: https://angular.io/guide/styleguide
- Put clear comment/documentation for all Angular components
- All table data need to be loaded by JSON.
- Create HTTP Services to pull all data from JSON.
- Create Routes that use proper naming with existing pages
- Create README.txt file that explains how to deploy your submission, structure, and commands
- Create clear documentation to set up your submission locally
CODE REQUIREMENTS:
HTML5
- Provide comments on the page elements to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all HTML code so future developers can follow the code.
- All HTML code naming should not have any conflicts or errors.
CSS3
- Provide comments on the CSS code. We need comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all code so developers can follow.
- All CSS naming should not have any conflicts.
- As possible use CSS3 style when creating all styling.
Javascript
- You must use Typescript (.ts) file format
- Use Linter, Jest and other best practice library to maintain your code quality.
- Your submission must follow Angular Coding guidelines: https://angular.io/guide/styleguide
- Put clear comment/documentation for all Angular components
- All JavaScript must not have copyright by a third party.
- It is fine to use GPL/MIT/Open Source code.
- You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code.
Images/SVG
- Images should be properly compressed while still having good visual quality.
- Please use best practice repetition usage of background based image.
- Please use sprites when using icons for your submission.
- If any icons are required, ask and they will be provided
Web Browsers Requirements
- IE11
- Microsoft Edge
- Firefox latest version
- Safari latest version
- Chrome latest version
Final Submission Guidelines
Please submit the zip with a proper readme.Please send a MR to dev branch with your changes.