ABB RCS Angular Prototype - Widgets 1

CHALLENGE OBJECTIVES

• Build the widgets pages as shown in the design.

 
PROJECT BACKGROUND

• RCS is an Asset Reliability Centered Business Performance Tool, specifically designed for Power Grids and Substations asset reliability management. For this project, we are going to run a series of prototype challenges to build a web based UI for the tool.

 
TECHNOLOGY STACK

• Angular 7
• Bootstrap
• HTML5
• Javascript
• CSS

 
SCREEN REQUIREMENTS
The following screens are all in scope of this challenge, and we’ll provide sketch file which contains full design. Please follow the UI section for design, the UX section are only for your reference to better understand the workflow and some user interactions.
 
*** Note: All screens listed / mentioned below are in scope, which should include the following:

1. 19.1.0 - 19.4.3
2. 19.6.1 (just add the button)
3. 19.7.1 and 19.7.2
4. 19.12 (this type of chart needs to be implemented)
5. 19.15 (this type of chart needs to be implemented)
6. 19.16 (this type of chart needs to be implemented)
7. Combo Chart (bar + line chart combo)

 
There are 3 entry points to widgets dashboard:

1. When we login to system and go to settings, currently we don't have “Performance widget” tab in system and it needs to be developed:
   1. https://app.zeplin.io/project/5d03512ca33a5e15deabb064/screen/5d0353a31f236d1614c9eefa
   2. https://app.zeplin.io/project/5d03512ca33a5e15deabb064/screen/5d0353a32d682519ca22e674
2. Or if we go to edit role and click on Edit Dashboard button, the widget dashboard will show up. Note this edit role page is already there, only the Edit Dashboard button needs to be added:
   1. https://app.zeplin.io/project/5d03512ca33a5e15deabb064/screen/5d0353a257f37f5de0fd91f3
3. If we login as Project Manager, the project manager dashboard page will show up:
   1. When clicking on the Manage button in the bottom area, widget dashboard will be opened.
   2. This entry point is NOT IN SCOPE since the page is under development

 
Widget Dashboard
https://app.zeplin.io/project/5d03512ca33a5e15deabb064/screen/5d03519c628fd215c7638339
 
There are 9 types of charts (check 19.11 to 19.18 for samples but only 4 of them are in sope of this challenge):

1. Column: actual chart is not in scope of this challenge
2. Cluster Column: this needs to be functioning in this prototype, this one is new implementation
3. Stack Column: actual chart is not in scope of this challenge
4. Bar: actual chart is not in scope of this challenge
5. Line: this needs to be functioning in this prototype, you can copy existing implementation
6. Pie: this needs to be functioning in this prototype, you can copy existing implementation
7. Gauge: actual chart is not in scope of this challenge
8. Display: actual chart is not in scope of this challenge
9. Combo Chart: this needs to be functioning in this prototype, you can copy existing implementation

<Download full spec from forum to see screenshot>
 
Presets section
The section shows thumbnails (static images) of the 9 charts and they can be dragged and dropped on dashboard to “Create New widgets” (see sections below for details). We have to show samples of the 3 charts mentioned above with some sample data when they are dragged and dropped to the dashboard, for the other 5 just use one of these 4 to mock the behavior.
 
Create New
It will show thumbnails of all 9 types of charts, we can use thumbnail image from sketch. When we hover on chart it should be highlighted as blue:
https://app.zeplin.io/project/5d03512ca33a5e15deabb064/screen/5d369b125c030140f89fe97d
 
Once user click on define source, below screen will display:
https://app.zeplin.io/project/5d03512ca33a5e15deabb064/screen/5d03519c2f25b319dcc51de4
 
 
Define Source Flow
Please check screens 19.1.3 to 19.1.13 to see the complete flow of screens for hover states & search functionality.
 
Delete an option
<Download full spec from forum to see screenshot>
 
Widget Moving (Drag and Drop)
Please check 19.2.1 - 19.2.9 to see how this should work and be implemented.
<Download full spec from forum to see screenshot>
<Download full spec from forum to see screenshot>
 
Drag & Drop: widgets can be dragged and dropped on this page.
<Download full spec from forum to see screenshot>
 
Here’s a link to an example of drag and drop effect that we’d like to achieve:
https://drive.google.com/open?id=12N11J3hvR5JP4DrdWTOgIBUQf6afSorL
 
Create New widget
There are total 9 types of predefined widgets, when we hover on any widget, it will become highlighted.
 
https://app.zeplin.io/project/5d03512ca33a5e15deabb064/screen/5d0352c668714a15d2c01684
User can drag that widget on top panel, which are grayed out sections for now.
 
As soon as user drop it, chart customization drop down will appear:
https://app.zeplin.io/project/5d03512ca33a5e15deabb064/screen/5d0356730350be5d44b9a98e
 
Check screens 19.3.0 to 19.3.5 for the flow of widget creation.
 
Widget Search
Check screens 19.4.0 to 19.4.3 to understand the details of search feature.
 
CLIENT SPECIFIC REQUIREMENTS
1. Avoid ngx datatable for records display.
 
2. Please tell your developers to use the below example as reference.
Implement bootstrap in all pages – i.e. use the 12-column grid layout provided by bootstrap.
 
<div class = col col-sm-6 col-md-4 col-lg-3 col-xl-3> </div>
 
Col - screen size < 576px
SM - ≥576px and < 768px.
MD - ≥768px and < 992px.
LG - ≥992px and < 1200PX
XL - > 1200PX.
All pages must be responsive.
 
3. Support for the following browsers Chrome , Safari and Internet explorer-11 and above.
 
4. We need to make sure all the screens (except SLD) are responsive (bootstrap enabled) . Also there is no restriction on the size of the screen like 760PX etc.
 
In short they must be responsive using Bootstrap and should adapt to screens size.
 
IMPORTANT REQUIREMENTS

• Widget should be of fixed size as in sketch files.Bootstrap 4 should be used
• Prototype should use configurable field names and validation messages (Key and Values are Defined in JSON file)
• Properly implement internationalization-i18n. Please define the mechanism and provide all resources in English. Make all messages, labels, etc configurable. Please follow the same approach we have done in the base code.
• Implement field level validation (error message should be displayed below the mandatory fields)
• Show loading spinners when populating data from API / local JSON to UI
• Implement popup for confirmation and warning messages. Do NOT use browser alerts, but use custom styles popups like the ones we have in the prototype
• No linting errors
• No errors with prod builds
• Please follow zeplin designs accurately, follow fonts, colors, padding, margins everything.

 
GENERAL REQUIREMENTS

• Must use Angular 7 and follow the provided design.
• The main content should have fluid width to fill all the available space.
• Pagination should work whenever applicable.
• Must follow Angular best coding practices
• You are expected to create a detailed README file including information on how to setup, run and verify your application.

 
HTML REQUIREMENTS

• HTML should be valid HTML5 compliant.
• 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.
• 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.

 
CODE REQUIREMENTS

• 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.
• Do not create a single .css/.scss file for the whole app. Each component should have its own stylesheet file.
• Ensure that there are no lint errors.
• All CSS naming should not have any conflicts.
• You’re free to choose between CSS & SCSS but you need to use flex instead of float.
• Follow a clean folder structure.
• Use CSS3 Media Queries to load different styles for each page and don't build different page for different device/layout.
• Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page.
• Make sure npm run build works without any errors.

 
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

 
LICENSES & ATTRIBUTION

• Third-party assets used to build your item must be properly licensed and free for commercial use. MIT and Apache v2 licenses are ok, for any others please check with us to get 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.

 
BROWSER REQUIREMENTS

• Windows: IE 11+, Chrome Latest, Firefox Latest
• Mac: Safari Latest, Chrome Latest, Firefox Latest
• Tablets: Safari / Chrome on iPad, Chrome on Android Tablets

Final Submission Guidelines

FINAL DELIVERABLES

• Full code that covers all the requirements.
• A detailed README file including information on how to setup and run your application.
• Please note that winner is responsible of raising a merge request to our code repo.