Challenge Overview
We are creating a web solution which layout fits smoothly from desktop-tablet-mobile (fluid width). This tool has for goal to view, detect, analyze and act over plant production lines through a dashboard page to help the managers take corrective actions in quick time.
Please take a look at this MarvelApp: https://marvelapp.com/106j5j46 (desktop) and https://marvelapp.com/a39d064 (phone)
You can download the design from: https://drive.google.com/drive/folders/0B1hQWnfwpYvrcU91MjN6alh0akk
To reviewers and competitors, the phase duration is shorter than normal contest. Please pay attention to the deadline.
Page Requirements:
Plant Map View:
* 1_a_Dashboard_Plant-Map.png - the entry screen
* it's the selection page user gets to see before jumping into the actual dashboard page
* The plants are shown on the map, based upon the plant's yield value, the plant is either displayed in green (good yield) or red (bad yield).
* Hover on the plant icon, the popup like 1_d_Dashboard_Plant-Map_Hover.png is displayed
* Click on the plant icon, the popup like 1_e_Dashboard_Plant-Map_Equipment.png is displayed, and more details are displayed on the left sidebar as well.
* 1_e_Dashboard_Plant-Map_Equipment.png / 1_f_Dashboard_Plant-Map_Product.png / 1_g_Dashboard_Plant-Map_Batch.png - The equipment section following this structure: equipment (or vessel) -> product -> batch, user can select any batch, and click Submit button to go to the MIQ-View Dashboard page.
* Click the +/- to zoom out/in the map.
* 1_c_Dashboard_Plant-Map_Search.png - type in the search textbox, and a dropdown with matched plants are displayed, click on any one highlights the plant like: 1_d_Dashboard_Plant-Map_Hover.png
Plant List View
* 1_b_Dashboard_Plant-List.png
* User can click the Map/List icon to switch between the Map view and list view
* The table supports paging and sorting
* 1_h_Dashboard_Plant-List_Hover.png & 1_i_Dashboard_Plant-List_Details.png are not needed (these have been removed from MarvelApp, in case they are still in design documents, it's kept here).
MIQ-View Dashboard page:
* 2_a - 2_f - it's the MIQ-View dashboard page.
* It will show dialy, weekly, monthly graph for the selected batch.
* The yield value on the Y-axis is shown in blue (good yield) or red (bad yield)
* Click on the left or right arrow on the X-axis will move the graph to earlier or later dates.
* The Top-5 products and Drop history are shown on the right sidebar
* Click the down arrow on the Drop History widget will earlier data points, and a up arrow should be displayed to move to latest data points.
* Both line-graph and bar-graph are required, and it's default to line-graph.
* Hover on any point or bar on the graph will show the yield value.
* Click any point or bar on the graph will go to the Quadrant Dashboard page, the transition popup is like: 2_f_Dashboard_Monthly_Loading.png.
* updates: http://take.ms/6AEqb
** Remove the breadcrumb, and replace it with "MIQ View Dashboard" text like the entry screen.
** Replace the Plant/Product/Batch/Vessel tabs with breadcrumb with format: Plant > Equipment > Product > Batch, and you should use the actual selected values from the incoming screen
* updates: http://take.ms/Dk5B1
** The "Top 5 Product Drop" popup is not needed. Just show the yield value when user hovers over it.
* updates: http://take.ms/gFbvn
** The year should be a dropdown list
Quadrant Dashboard page:
* 2_g
* It has 4 widgets: MIQ View, Process Mining, Decision Tree, and Alerts and Notifications.
* Again the breadcrumb should be replaced with "Dashboard" text. And the "Plaint/product/Batch/Vessel" tabs should be replaced with the breadcrumb in MIQ View.
* Click on the zoom in/out icon, it works like: 2_w_Dashboard_Zoom.png, it should work for all widgets.
* updates: http://take.ms/1M0NH
** Need to add one more item, to go back to the 4-quadrant dashboard
MIQ View inside Quadrant Dashboard page:
* 2_g - 2_i
* It should work like the MIQ-View dashboard above (with no right sidebar)
Process Mining
* 2_k
* It shows the process steps contributing to performance drop with context information of product, shift, line
* Hover on the process step, the popup like 2_x is displayed
* The RankList table has the following columns: Product ID, Step ID, Vessel ID, Case ID, Parameter Name, Parameter Rank, Parameter Value. (The last two are not shown in design, and that's why it has horizontal scroll bar, and they are both integer values). And note that the Vessel ID is empty in the UI.
* Click the backward/play/forward buttons will move along the process line.
Decision Tree
* 2_m - 2_p
* The first 3 ranks of Variable Ranks and Rules tables should be highlighted
* The rules table has following columns: Failure rule ranking, Rule, Probability of Failure If TRUE, Number of Failed Samples Violating Rule, Number of Good Samples Violating Rule, % of Failured Samples Violating Rule, % of Good Samples Violating Rule. (The last 4 are not shown in design, and that's why it has horizontal scroll bar).
* Click on the Rule in rules table, popup like 2_o is displayed to show the variable trend over the time.
* In decision tree, the Eles should be Else.
Alerts and Notifications
* 2_r - 2_u
* It shows the alerts and notifications
* User is able to send the message
* updates: http://take.ms/S99zv
** Remove the sort button, and add a search textbox to filter the alerts and notifications.
The mobile version is also in scope. The UI design doesn't provide all mobile screens, but the UI prototype should cover all the pages as Desktop.
Note that not all screens are mentioned above, but they are should be easy to understand.
Prototype Requirements
- The data to be displayed must come from local JSON files and cannot be hardcoded (this includes the data on the graph as well)
- The options for the checkboxes should come from local JSON files instead of hardcoded on the pages.
- Must use Angular 4 and Material Design components
- The pages should clearly indicate invalid input data to users, for example: on login screen if users hit login without entering username, the textbox should be highlighted in red with an error message too
- Must follow Angular best coding practices
- Create README.md file that explains your UI prototype structure
- Your submission must follow the Responsive UI best practice
HTML Requirements
- HTML should be valid HTML5 compliant.
- Provide comments on the page elements to give 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.
- Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e.. "main-content", or "mainContent)
- Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- No inline CSS styles- all styles must be placed in an external stylesheet.
- Validate your code- reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard.
CSS Requirements
- Use CSS3 Media Queries to load different styles for each page and don't build different page for different device/layout.
- Provide comments on the CSS code. We need CSS 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 CSS so developers can follow the code.
- All CSS naming should not have any conflicts.
- As possible use CSS3 style when create all styling.
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page.
- Only use table tags for tables of data/information and not for page layout.
- Use SCSS / SASS for styling
Javascript Requirements
- All JavaScript must not have a copyright by a third party. 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.
- Use typescript and linter for code quality
- For charts library, our client recommends this one: https://www.amcharts.com/, but you are free to choose the other *open source* options.
Licenses & Attribution
- Third-party assets used to build your item must be properly licensed or free for commercial use. MIT, some modified BSD, Apache 2 licenses are ok, but if a library is not commercial friendly you need to get our approval first.
- Sufficient information regarding third-party assets must be present in your documentation. This includes the author, license info and a direct link to the asset online.
Screen Specifications
- Must support desktop, tablet and phone. The UI is the same for Desktop and Tablet, and the Mobile version is for Phone.
- Must support retina display.
- Layout width should be fluid.
Browser Requirements
- Desktop: IE11+, Latest Firefox, Latest Safari & Chrome Browsers (Mac & Windows).
- Tablet/Phone: Latest Android and Safari Browsers.
Please take a look at this MarvelApp: https://marvelapp.com/106j5j46 (desktop) and https://marvelapp.com/a39d064 (phone)
You can download the design from: https://drive.google.com/drive/folders/0B1hQWnfwpYvrcU91MjN6alh0akk
To reviewers and competitors, the phase duration is shorter than normal contest. Please pay attention to the deadline.
Page Requirements:
Plant Map View:
* 1_a_Dashboard_Plant-Map.png - the entry screen
* it's the selection page user gets to see before jumping into the actual dashboard page
* The plants are shown on the map, based upon the plant's yield value, the plant is either displayed in green (good yield) or red (bad yield).
* Hover on the plant icon, the popup like 1_d_Dashboard_Plant-Map_Hover.png is displayed
* Click on the plant icon, the popup like 1_e_Dashboard_Plant-Map_Equipment.png is displayed, and more details are displayed on the left sidebar as well.
* 1_e_Dashboard_Plant-Map_Equipment.png / 1_f_Dashboard_Plant-Map_Product.png / 1_g_Dashboard_Plant-Map_Batch.png - The equipment section following this structure: equipment (or vessel) -> product -> batch, user can select any batch, and click Submit button to go to the MIQ-View Dashboard page.
* Click the +/- to zoom out/in the map.
* 1_c_Dashboard_Plant-Map_Search.png - type in the search textbox, and a dropdown with matched plants are displayed, click on any one highlights the plant like: 1_d_Dashboard_Plant-Map_Hover.png
Plant List View
* 1_b_Dashboard_Plant-List.png
* User can click the Map/List icon to switch between the Map view and list view
* The table supports paging and sorting
* 1_h_Dashboard_Plant-List_Hover.png & 1_i_Dashboard_Plant-List_Details.png are not needed (these have been removed from MarvelApp, in case they are still in design documents, it's kept here).
MIQ-View Dashboard page:
* 2_a - 2_f - it's the MIQ-View dashboard page.
* It will show dialy, weekly, monthly graph for the selected batch.
* The yield value on the Y-axis is shown in blue (good yield) or red (bad yield)
* Click on the left or right arrow on the X-axis will move the graph to earlier or later dates.
* The Top-5 products and Drop history are shown on the right sidebar
* Click the down arrow on the Drop History widget will earlier data points, and a up arrow should be displayed to move to latest data points.
* Both line-graph and bar-graph are required, and it's default to line-graph.
* Hover on any point or bar on the graph will show the yield value.
* Click any point or bar on the graph will go to the Quadrant Dashboard page, the transition popup is like: 2_f_Dashboard_Monthly_Loading.png.
* updates: http://take.ms/6AEqb
** Remove the breadcrumb, and replace it with "MIQ View Dashboard" text like the entry screen.
** Replace the Plant/Product/Batch/Vessel tabs with breadcrumb with format: Plant > Equipment > Product > Batch, and you should use the actual selected values from the incoming screen
* updates: http://take.ms/Dk5B1
** The "Top 5 Product Drop" popup is not needed. Just show the yield value when user hovers over it.
* updates: http://take.ms/gFbvn
** The year should be a dropdown list
Quadrant Dashboard page:
* 2_g
* It has 4 widgets: MIQ View, Process Mining, Decision Tree, and Alerts and Notifications.
* Again the breadcrumb should be replaced with "Dashboard" text. And the "Plaint/product/Batch/Vessel" tabs should be replaced with the breadcrumb in MIQ View.
* Click on the zoom in/out icon, it works like: 2_w_Dashboard_Zoom.png, it should work for all widgets.
* updates: http://take.ms/1M0NH
** Need to add one more item, to go back to the 4-quadrant dashboard
MIQ View inside Quadrant Dashboard page:
* 2_g - 2_i
* It should work like the MIQ-View dashboard above (with no right sidebar)
Process Mining
* 2_k
* It shows the process steps contributing to performance drop with context information of product, shift, line
* Hover on the process step, the popup like 2_x is displayed
* The RankList table has the following columns: Product ID, Step ID, Vessel ID, Case ID, Parameter Name, Parameter Rank, Parameter Value. (The last two are not shown in design, and that's why it has horizontal scroll bar, and they are both integer values). And note that the Vessel ID is empty in the UI.
* Click the backward/play/forward buttons will move along the process line.
Decision Tree
* 2_m - 2_p
* The first 3 ranks of Variable Ranks and Rules tables should be highlighted
* The rules table has following columns: Failure rule ranking, Rule, Probability of Failure If TRUE, Number of Failed Samples Violating Rule, Number of Good Samples Violating Rule, % of Failured Samples Violating Rule, % of Good Samples Violating Rule. (The last 4 are not shown in design, and that's why it has horizontal scroll bar).
* Click on the Rule in rules table, popup like 2_o is displayed to show the variable trend over the time.
* In decision tree, the Eles should be Else.
Alerts and Notifications
* 2_r - 2_u
* It shows the alerts and notifications
* User is able to send the message
* updates: http://take.ms/S99zv
** Remove the sort button, and add a search textbox to filter the alerts and notifications.
The mobile version is also in scope. The UI design doesn't provide all mobile screens, but the UI prototype should cover all the pages as Desktop.
Note that not all screens are mentioned above, but they are should be easy to understand.
Prototype Requirements
- The data to be displayed must come from local JSON files and cannot be hardcoded (this includes the data on the graph as well)
- The options for the checkboxes should come from local JSON files instead of hardcoded on the pages.
- Must use Angular 4 and Material Design components
- The pages should clearly indicate invalid input data to users, for example: on login screen if users hit login without entering username, the textbox should be highlighted in red with an error message too
- Must follow Angular best coding practices
- Create README.md file that explains your UI prototype structure
- Your submission must follow the Responsive UI best practice
HTML Requirements
- HTML should be valid HTML5 compliant.
- Provide comments on the page elements to give 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.
- Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e.. "main-content", or "mainContent)
- Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- No inline CSS styles- all styles must be placed in an external stylesheet.
- Validate your code- reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard.
CSS Requirements
- Use CSS3 Media Queries to load different styles for each page and don't build different page for different device/layout.
- Provide comments on the CSS code. We need CSS 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 CSS so developers can follow the code.
- All CSS naming should not have any conflicts.
- As possible use CSS3 style when create all styling.
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page.
- Only use table tags for tables of data/information and not for page layout.
- Use SCSS / SASS for styling
Javascript Requirements
- All JavaScript must not have a copyright by a third party. 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.
- Use typescript and linter for code quality
- For charts library, our client recommends this one: https://www.amcharts.com/, but you are free to choose the other *open source* options.
Licenses & Attribution
- Third-party assets used to build your item must be properly licensed or free for commercial use. MIT, some modified BSD, Apache 2 licenses are ok, but if a library is not commercial friendly you need to get our approval first.
- Sufficient information regarding third-party assets must be present in your documentation. This includes the author, license info and a direct link to the asset online.
Screen Specifications
- Must support desktop, tablet and phone. The UI is the same for Desktop and Tablet, and the Mobile version is for Phone.
- Must support retina display.
- Layout width should be fluid.
Browser Requirements
- Desktop: IE11+, Latest Firefox, Latest Safari & Chrome Browsers (Mac & Windows).
- Tablet/Phone: Latest Android and Safari Browsers.