Page Comparison

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.

...

Type of users:

1. State Level Admin

2. Commissioner

3. Domain Level Employee

Dashboard List:

There are three type of dashboard,

1. Home page (refer figure 1).

2. Overview page (refer figure 2).

3. Module level dashboard (refer figure 3).

Home page:

Home page contains multiple cards, each card is clickable.

...

Figure : 1

...

Figure : 2

...

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

Overview and Module level card is differentiated by vizType,

1. Overview card: On click of overview card, it will navigate to overview page. vizType for Overview is collection.

2. 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 :

...

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

DashboardConfig API Response:

...

Figure : 1.2

...

roleName : Which type of user.

...

Collection Chart & Module Chart refer the figure 1

2. Overview Dashboard

...

Figure : 1.33. 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).

1. name - Name of visualization.

2. 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.9 - DOWNLOAD & SHARE BUTTON.

ULB Dashboard:

1. 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

1. Each ULB dashboard, overview Dashboard and module level pages contains different filters, and are identified by roleName in configs api.

1. Wards/Blocks filter is dependable filter, which gets loaded on ULB selection.

1. 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 .

1. Overview and all module level page is having ULB dashboard.

GLOBAL Filters (refer figure 2.8) :

1. Filters will be loaded from MDMS api.

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

1. Filters will be loaded on the basis of roleName,

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

...

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

1. Crore

2. Lack

3. 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.

...

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

Tabs:

Currenty Currently dashboard is having two types of tabs,

1. Revenue (refer figure : 4.1).

2. Service (refer figure : 4.1).

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"
}]}

...

Table Chart with drilldown:

...

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

Cards:

1. Each card header is localized and having info icon with tooltip option which displays header and can display description.

2. Number of cards in row and in page is driven by backend. Backend provides row number to each card where it should be displayed.

3. Card containing option icon which contains Image download and Image share option.

4. 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

1. Share:

Share creates the Image/PDF and upload it S3 using below api and returns file id,

...

https://mseva-uat.lgpunjab.gov.in/egov-url-shortening/shortener

5. 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:Github link for config : https://github.com/egovernments/frontend/blob/dss-dashboard/web/dss-dashboard/src/config/configs.js

...

BASE URL : End point of REST API for dashboard.

FILE Upload : End point of REST API for file upload.

FETCH FILE : End point of REST API for file fetch.

MDMS : End point of REST API for fetch MDMS Data.

SHORTEN URL : End point of REST API for Shorten URL, which is used for share via Email / What's app.

CHART COLOR CODE : Color code object for all charts.

MODULE LEVEL : for global filters, which contains services name & filter key.

SERVICES : for global filter, service filter.

6. Upload Localization keys:

Image Added

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:
The following file contains the list of NPM modules being used in the Dashboard Application.

https://docs.googlegithub.com/spreadsheets/d/1AdwSGxUZoSmVcSc3PtujGMRCKpNaAEYgAn_8XNTF2vM/edit?usp=sharingegovernments/DIGIT-OSS/blob/master/frontend/mono-ui/web/dss-dashboard/package.json

Steps to setup dss in Local :

Step 1: Run as independent , switch to dss-dashboard folder

Step 2: We have to get the below details from environment website and update it the localstorage in the browser.

Employee.tenant-id
Employee.user-info
Employee.token
Employee.module
Employee.locale
localization_en_IN
locale

Step 3: Run Yarn install and yarn start to start working on dss in local setup.

DSS Features Enhancements V2:

DSS Features Enhancements V2 Technical Document for UI