DSS Dashboard - Technical Document for UI

Description

A decision support system (DSS) is a composite tool that collects, organizes and analyzes business data to facilitate quality decision-making for management, operations and planning. A well-designed DSS aids decision makers in compiling a variety of data from many sources: raw data, documents, personal knowledge from employees, management, executives and business models. DSS analysis helps organizations to identify and solve problems, and make decisions.

Code Git Repos: https://github.com/egovernments/frontend/tree/master/web/dss-dashboard

Type of users

State-Level Admin
Commissioner
Domain-Level Employee

Dashboard List

There are three types of dashboards -

Home page (refer figure 1).
Overview page (refer figure 2).
Module level dashboard (refer figure 3).

1. Home page

The home page contains multiple cards, each card is clickable.

There are two types of cards, i.e, Overview card and module-level card.

Overview and Module level card is differentiated by vizType,

Overview card: On click of overview card, it will navigate to overview page. vizType for Overview is collection.
Module Level card: On Click of Module level card, it will navigate to Module level dahsboard. vizType is module (i.e Property Tax, Trade License etc).

Request Payload for dashboardConfig:

auth-token : which is for authenticate the request and it will fetch from a local storage key called “Employee.token”

DashboardConfig API Response

roleName: Which type of user.

Visualizations: Key contains all configuration for displaying the visualization like rows with charts etc please refer to figure 1.3.

In Figure 1.3, vizType key will define the module UI like

Collection Chart & Module Chart refer the figure 1

2. Overview Dashboard

****

3. Module Level Dashboard

Visualizations List

In dashboardConfig response visualizations key contains all rows & charts details(refer figure 1.3).

1.Each row contains the visual details like name,vizType,noUnit,isCollapsible,charts etc **(refer figure 1.3**).

name - Name of visualization.
vizType - type of visualization like COLLECTION,MODULE,METRIC-COLLECTION, PERFORMING-METRIC, CHART.
1. COLLECTION - In home page, contains the collection data (refer figure 1).
2. MODULE - In home page, contains the module level data (refer figure 1).
3. METRIC-COLLECTION - In Overview/Module Level Page, contains the collection data (refer figure 2.1).
4. PERFORMING-METRIC -In Overview/Module Level Page, contains the top/bottom performing data (refer figure 2.2).
5. CHART - In Overview/Module Level Page, contains the below visualizations (refer figure 2.3 to figure 2.7).
  1. PIE CHART (refer figure 2.3)
  2. LINE CHART (refer figure 2.4)
  3. BAR CHART (refer figure 2.5)
  4. HORIZONTAL BAR CHART (refer figure 2.6)
  5. TABLE CHART (refer figure 2.7)

List of visualizations

Figure : 2.1 - Metric-collection.

Figure : 2.2 - PERFORMING-METRIC

Figure : 2.3 - CHART - PIE

Figure : 2.4 - Chart - LINE

Figure : 2.5 - Chart - BAR

Figure: 2.6 - Chart - HORIZONTAL BAR

Figure: 2.7 - Chart - TABLE

Figure: 2.8 - GLOBAL FILTERS

Figure: 2.9 - DOWNLOAD & SHARE BUTTON

ULB Dashboard

ULB Dashboard is having different filters, i.e ULB’s and Wards/Blocks. The data to the filters are loaded from below MDMS API -

https://dev.digit.org/egov-mdms-service/v1/_search

Each ULB dashboard, overview Dashboard and module-level pages contain different filters and are identified by roleName in configs API.
The Wards/Blocks filter is a dependable filter, which gets loaded on ULB selection.
In the ULB dashboard, the On-page ULB filter will be applied across all the charts and for the Performance chart, the default ULB filter will not be applied.
Overview and all module level page is having a ULB dashboard.

GLOBAL Filters (refer to figure 2.8)

Filters will be loaded from MDMS API.

https://dev.digit.org/egov-mdms-service/v1/_search

Filters will be loaded on the basis of roleName,

Admin role: For the Module level page, Date, DDR and ULB filter will be loaded

For Overview level page, Date, DDR, ULB and Service filter will be loaded

Commissioner role: For the Module level page, Date, ULB and Wards/Blocks filters will be loaded.

For the Overview page, Date, ULB and Service filters will be loaded.

3.Denomination filter:

Denomination filter having three option to display amount and number in a particular format.

Crore
Lack
Unit

Denomination filter will not be applied to the percentage and text (refer to figure 2.10). The type of data is identified by a symbol in the plots of charts API.

Figure 2.10

Custom Date Filter

If duration < 15 days, it will display data day-wise.

If duration <= 30 days, it will display data week-wise.

If duration >30, it will display data monthly-wise.

Tabs

Currently, the dashboard is having two types of tabs,

Revenue (refer figure: 4.1).
Service (refer figure: 4.1).

Tabs are identified by name in visualizations of config API.

Table Chart with drill-down

Table chart visualization is having normal material UI data table features like search, sort etc.

In table response, filter key & drillDownChartId is having value means its Drill down table.

Cards

Each card header is localized and having an info icon with a tooltip option that displays the header and can display a description.
The number of cards in a row and in a page is driven by the backend. Backend provides the row number to each card where it should be displayed.
Card containing option icon which contains Image download and Image share option.
Image download and share user id from vizArray in order to differentiate each card in a page.