National Dashboard - UI Technical Documentation
- JaganKumar
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/DIGIT-OSS/tree/master/frontend/micro-ui/web/micro-ui-internals
Enable National Dashboard: MDMS details
[
{
"moduleName": "tenant",
"masterDetails": [
{
"name": "citymodule"
}
]
},
]In city module NDSS should be enabled.
{
active: true
code: "NDSS"
module: "NDSS"
}Type of users:
National Level Admin (NATADMIN)
State Level Admin (STADMIN)
Dashboard List:
There are three type of dashboard,
Home page (refer figure 1).
Overview page (refer figure 2).
Module-level dashboard (refer figure 3).
Home page:
The home page contains multiple cards, each card is clickable.
figure 1
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).
Map chart : It shows the total , active ulbs of states where DIGIT is live.
state names to be configured in this dashboard-config.
https://github.com/egovernments/egov-mdms-data/blob/DEV/data/pb/dss-dashboard/dashboard-config.json
Request Payload for dashboardConfig :
https://qa.digit.org/dashboard-analytics/dashboard/getDashboardConfig/NURT_DASHBOARD
auth-token : which is for authenticate the request and it will fetch from local storage key called “Employee.token”
DashboardConfig API Response:
figure 1.2
figure 1.3
Visualizations : Key contains the all configuration for displaying the visualization like rows with charts etc please refer to the figure 1.3.
In Figure 1.3, vizType key will define the module UI like
Collection Chart & Module Chart refer the figure 1
Overview Dashboard
figure 2
figure 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,charts etc(refer figure 1.3).
name - Name of visualization.
vizType - type of visualization like COLLECTION,MODULE,METRIC-COLLECTION, PERFORMING-METRIC,CHART.
COLLECTION - In home page, contains the collection data (refer figure 1).
MODULE - In home page, contains the module level data (refer figure 1).
METRIC-COLLECTION - In Overview/Module Level Page, contains the collection data (refer figure 2.1).
PERFORMING-METRIC -In Overview/Module Level Page, contains the top/bottom performing data (refer figure 2.2).
CHART - In Overview/Module Level Page, contains the below visualizations (refer figure 2.3 to figure 2.7).
PIE CHART (refer figure 2.3)
LINE CHART (refer figure 2.4)
BAR CHART (refer figure 2.5)
HORIZONTAL BAR CHART (refer figure 2.6)
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.
GLOBAL Filters (refer figure 2.8) :
Filters will be loaded from MDMS api.
https://egov-micro-dev.egovernments.org/egov-mdms-service/v1/_search
egov-mdms-data/nationalInfo.json at QA · egovernments/egov-mdms-data (github.com)
State wil be taken from stateCode
ULB from code
{
"stateCode": "Punjab",
"stateName": "Punjab",
"code": "pb.amritsar",
"name": "Amritsar",
"active": true,
"module": "NationalDashboard"
},2.Denomination filter:
Denomination filter having three option to display amount and number in a particular format.
Crore
Lakh
Unit
Denomination filter will not be applied on the percentage and text(refer figure 2.10). Type of data is identified by symbol in plots of charts api.
figure 2.10
Custom Date Filter:
If duration < 15 days, it will display data in days wise.
If duration <= 30 days, it will display data in week-wise.
If duration >30, it will display data in monthly wise.
Tabs:
Currently 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.
figure 4.1
Table Chart with drilldown:
Table chart visualization is having normal material UI datatable features like search,sort etc.
figure 5
In table response filter key & drillDownChartId is having value means its Drill down table.
Cards:
Each card header is localized and having info icon with tooltip option which displays header and can display description.
Number of cards in row and in page is driven by backend. Backend provides 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 uses id from vizArray in order to differentiate each cards in a page.
Download and Share (refer figure 2.9) :
1.Download having two option to dowload data, i.e, Image and PDF
Share:
Share creates the Image/PDF and upload it S3 using below api and returns file id,
Using file Id file will be fetched using below api,
Each S3 image will be shortened using below api,
/egov-url-shortening/shortener
Upload Localization keys:
code : pre-defined key for back-end.
message : message contains the value for the key.
module : rainmaker-dss.
locale : contains locale data.
for more details eGov team to be documented.
Module name: rainmaker-dss
NPM Module Used:
Note:: Consider this while pushing new data.
While pushing any new state data, then both these MDMS state names and codes should be in sync,
1. Map component : https://raw.githubusercontent.com/egovernments/egov-mdms-data/DEV/data/pb/dss-dashboard/dashboard-config.json
where id is state code and name is state name.
2. Global Filter: https://raw.githubusercontent.com/egovernments/egov-mdms-data/QA/data/pb/tenant/nationalInfo.json
if the values are pushed under different names then this existing file should be updated accordingly.
Steps to setup dss in Local :
Step 1: Run as independent , switch to micro-ui-internals folder
Step 2: Run yarn install and yarn start:dev to start working on dss in local setup.
API Call Role Action mapping:
S.No. | API | Roles |
|---|---|---|
1 |
|
|
2 |
|
|
8 |
|
|
6 |
|
|
5 |
|
|
7 |
|
|
3 |
|
|
9 |
|
|
5 |
|
|
6 |
|
|
4 |
|
|
Supporting links