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/dss-dashboard/web/dss-dashboard
List the type of users
State Level Admin
Commissioner
Domain Level Employee
Dashboard List:
There are three type of dashboard,
Home page
Overview page
Module level dashboard
Home page:
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).
Request Payload for dashboardConfig :
Auth-token : which is for authenticate the request and it will fetch from local storage key called “Employee.token”
API Response:
roleName : Which type of user.
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
Figure : 1.3
ULB Dashboard:
ULB Dashboard is having different filters, i.e ULB’s and Wards/Blocks. The data to the filters is loaded from below MDMS api,
https://egov-micro-dev.egovernments.org/egov-mdms-service/v1/_search
Each ULB dashboard, overview Dashboard and module level pages contains different filters, and are identified by roleName in configs api.
Wards/Blocks filter is dependable filter, which gets loaded on ULB selection.
In ULB dashboard, On page ULB filter will be applied across all the charts and for Performance chart default ULB filter will not be applied .
Overview and all module level page is having ULB dashboard.
Filters:
Filters will be loaded from MDMS api.
https://egov-micro-dev.egovernments.org/egov-mdms-service/v1/_search
Filters will be loaded on the basis of roleName,
Admin role: For 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 Module level page, Date, ULB and Wards/Blocks filters will be loaded.
For 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 on the percentage and text. Type of data is identified by symbol in plots of charts api.
{
"statusInfo": {
"statusCode": 200,
"statusMessage": "success",
"errorMessage": ""
},
"responseData": {
"chartType": "pie",
"visualizationCode": "topFiveComplaints",
"chartFormat": null,
"drillDownChartId": "none",
"customData": null,
"dates": null,
"filter": null,
"data": [
{
"headerName": "DSS_PGR_TOP_COMPLAINTS",
"headerValue": 2150,
"headerSymbol": "number",
"insight": null,
"plots": [
{
"label": null,
"name": "Street Light Not Working",
"value": 1295,
"symbol": "number"
},
{
"label": null,
"name": "Others",
"value": 48,
"symbol": "number"
}]}
]}}
Tabs:
Currenty dashboard is having two types of tabs,
Revenue
Service
Tabs are identified by name in visualizations of config api.
{
"statusInfo": {
"statusCode": 200,
"statusMessage": "success",
"errorMessage": ""
},
"responseData": [
{
"name": "DSS_PROPERTY_TAX_DASHBOARD",
"id": "propertyTax",
"title": "From Apr 01, 2019 to Feb 04, 2020",
"visualizations": [
{
"row": 1,
"name": "DSS_REVENUE",
"vizArray": [
{
"id": 211,
"name": "DSS_OVERVIEW",
"dimensions": {
"height": 350,
"width": 5
},
"vizType": "metric-collection",
"noUnit": true,
"isCollapsible": false,
"label": "DSS_OVERVIEW",
"charts": [
{
"id": "todaysCollection",
"name": "DSS_TOTAL_COLLECTION_TODAY",
"code": "",
"chartType": "metric",
"filter": "",
"headers": []
}]}
]},
{
"row": 1,
"name": "DSS_SERVICE",
"vizArray": [
{
"id": 251,
"name": "DSS_PT_TOP_3_PERFORMING_ULBS",
"dimensions": {
"height": 250,
"width": 4
},
"vizType": "performing-metric",
"isCollapsible": false,
"label": "",
"charts": [
{
"id": "topPerformingUlbsCompletionRate",
"name": "DSS_PT_TOP_3_PERFORMING_ULBS",
"code": "",
"chartType": "bar",
"filter": "",
"headers": []
}]}
]}],
"roleId": 6,
"roleName": "Admin"
}]}
Visualisations:
There are three type of Visualization and are identified vizType by dashboard config api,
performing-metric : Display Progress bar chart
metric-collection: Display Collection chart
chart: There are different types of charts used to represent the data, and charts are backend driven. Each chart is identified by chartType by config api .
Library used is react-chartjs-2 and for table Material ui table
Bar chart: chartType is bar
Horizontal bar chart: chartType is horizontalBar
Donut chart: chartType is donut
Line chart: chartType is line. Line chart displays data in days wise, weekwise and monthlywise based on the duration.
If duration < 15 days, it will display data in days wise.
If duration <= 30 days, it will display data in weekwise.
If duartion >30, it will display data in monthlywise.
e. Table: chartType is table.
Example:
{
"statusInfo": {
"statusCode": 200,
"statusMessage": "success",
"errorMessage": ""
},
"responseData": [
{
"name": "DSS_PROPERTY_TAX_DASHBOARD",
"id": "propertyTax",
"title": "From Apr 01, 2019 to Feb 04, 2020",
"visualizations": [
{
"row": 1,
"name": "DSS_REVENUE",
"vizArray": [
{
"id": 211,
"name": "DSS_OVERVIEW",
"dimensions": {
"height": 350,
"width": 5
},
"vizType": "metric-collection",
"noUnit": true,
"isCollapsible": false,
"label": "DSS_OVERVIEW",
"charts": [
{
"id": "todaysCollection",
"name": "DSS_TOTAL_COLLECTION_TODAY",
"code": "",
"chartType": "metric",
"filter": "",
"headers": []
}]},
{
"id": 212,
"name": "DSS_TOTAL_CUMULATIVE_COLLECTION",
"dimensions": {
"height": 350,
"width": 7
},
"vizType": "chart",
"noUnit": true,
"isCollapsible": false,
"charts": [
{
"id": "cumulativeCollection",
"name": "Monthly",
"code": "",
"chartType": "line",
"filter": "",
"headers": []
}]}
]}],
"roleId": 6,
"roleName": "Admin"
}]}
Table Chart with drilldown:
Table chart visualization is having normal material UI datatable 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 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:
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,
https://mseva-uat.lgpunjab.gov.in/filestore/v1/files
Using file Id file will be fetched using below api,
https://mseva-uat.lgpunjab.gov.in/filestore/v1/files/url
Each S3 image will be shortened using below api,
https://mseva-uat.lgpunjab.gov.in/egov-url-shortening/shortener
Configurations:
{
'BASE_URL': '/dashboard-analytics',
'UPLOAD_URL': '',
'POWERED_BY': 'Tarento',
'APP_NAME': '/dashboard/',
'FILE_UPLOAD':'/filestore/v1/files',
'FETCH_FILE':'/filestore/v1/files/url',
'MDMS': '/egov-mdms-service/v1/_search',
'SHORTEN_URL':'/egov-url-shortening/shortener',
'DOC_EXTENSION':['_small','_medium','_large'],
'CHART_COLOR_CODE':["#35a2eb", "#f19c56", "#4c76c7", "#ff6384", '#FFC107', '#009688', '#9C27B0', '#4CAF50',"#99d4fa", "#179cf4", "#1d9cf4", "#1sacq4", "#1gvcf4"],
'MODULE_LEVEL':[
{'dashboard':null},
{'propertytax':{'services_name':'Property Tax','filterKey':'PT'}},
{'tradelicense':{'services_name':'Trade licence','filterKey':'TL'}},
{'pgr':{'services_name':'PGR','filterKey':'PGR'}},
{'ws':{'services_name':'W&S','filterKey':'W&S'}}
],
'SERVICES': ["Property Tax", "Trade licence","PGR"]
}
Localization keys:
Module name: rainmaker-dss
NPM Module Used:
https://docs.google.com/spreadsheets/d/1AdwSGxUZoSmVcSc3PtujGMRCKpNaAEYgAn_8XNTF2vM/edit?usp=sharing