Dashboard Overview

  • Dashboard is a graphical representation of data.
  • It is using all the slick components.
  • Difference between other components and slick components is that it in the way we are passing data to the component.
  • Other components have multiple attributes through which data is passed but slick components have a schema through which data is passed.
  • Slick components are more flexible and handle different scenarios.

Open Dashboard

In Local

  • Start tw-pages-client server.
  • Open #/slickDashboard route

In testing

Components used in dashboard

Following are the components used in dashboard:

1) Expandable Chart Card

This component is a custom component specific to this page only. It is created in tw-pages-client custom_comp.

2) Prev Next Chart Card

  • It is a slick component.
  • It is a higher level component which is using following components:

    • Chart Action Card

      This is again a higher level component using:
      Icon Bar
      Single Chart

    • Icon

      Icon is a slick component

Theming in Slick Components

  • Slick Components use different theming scheme.
  • Each color is in a different file.
  • Through coding we have added classes over submaster div.
  • Variable names in hose classes are like: --cs-clr-{primary/secondary}-{shade}-{bg/txt/txt-dim}
  • Use these variables to give colors in css file.

Common Issues

Graph not showing data

  • Check the response of the getIds API.
  • If Ids are empty check request structure if that is going correct

APIs returning CORS error

  • Ask Sharan to check the issue