Overview

Individual DSS configurations like FSM - DSS configuration is built on the DSS module where configuration and data are received from a set of APIs which can be accessed by users with specific user roles.

Module-wise Role Access To DSS Module

Role - FSM_ADMIN

Module - FSM

API Curl

1curl 'https://qa.digit.org/dashboard-analytics/dashboard/getDashboardConfig/fsm?_=1627404589797' \ 2 -H 'authority: qa.digit.org' \ 3 -H 'sec-ch-ua: " Not;A Brand";v="99", "Google Chrome";v="91", "Chromium";v="91"' \ 4 -H 'accept: application/json, text/plain, */*' \ 5 -H 'dnt: 1' \ 6 -H 'sec-ch-ua-mobile: ?0' \ 7 -H 'user-agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.114 Safari/537.36' \ 8 -H 'auth-token: 1bc96a3e-c6c0-4af7-9b97-5cff0c035f98' \ 9 -H 'content-type: application/json;charset=utf-8' \ 10 -H 'sec-fetch-site: same-origin' \ 11 -H 'sec-fetch-mode: cors' \ 12 -H 'sec-fetch-dest: empty' \ 13 -H 'referer: https://qa.digit.org/digit-ui/employee/dss/dashboard/fsm' \ 14 -H 'accept-language: en-US,en;q=0.9,hi;q=0.8' \ 15 --compressed

APIs

Data for each configuration is fetched using {env}/dashboard-analytics/dashboard/getChartV2?_=1627404593531

API CURL -

curl 'https://qa.digit.org/dashboard-analytics/dashboard/getChartV2?_=1627404593531' \
  -H 'authority: qa.digit.org' \
  -H 'sec-ch-ua: " Not;A Brand";v="99", "Google Chrome";v="91", "Chromium";v="91"' \
  -H 'accept: application/json, text/plain, */*' \
  -H 'dnt: 1' \
  -H 'sec-ch-ua-mobile: ?0' \
  -H 'user-agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.114 Safari/537.36' \
  -H 'content-type: application/json;charset=UTF-8' \
  -H 'origin: https://qa.digit.org' \
  -H 'sec-fetch-site: same-origin' \
  -H 'sec-fetch-mode: cors' \
  -H 'sec-fetch-dest: empty' \
  -H 'referer: https://qa.digit.org/digit-ui/employee/dss/dashboard/fsm' \
  -H 'accept-language: en-US,en;q=0.9,hi;q=0.8' \
  --data-raw '{"aggregationRequestDto":{"visualizationType":"METRIC","visualizationCode":"fsmTotalrequest","queryType":"","filters":{"tenantId":[]},"moduleLevel":"","aggregationFactors":null,"requestDate":{"startDate":1617215400000,"endDate":1627410599999,"interval":"month","title":"Apr 1, 2021 - Jul 27, 2021"}},"headers":{"tenantId":"pb.amritsar"},"RequestInfo":{"apiId":"Rainmaker","authToken":"1bc96a3e-c6c0-4af7-9b97-5cff0c035f98"}}' \
  --compressed

Each of the charts will have unique data parameters and responses in distinct API calls.

UI Components

Fundamentally DSS has various functionalities including filtering of data, charts and drill-down charts with download PDF, Image and .XLS files. This is achieved by various components utilizing external plugins and internal services

Filters

Filter component in DSS consists of 4 components:-

Date Range

The DateRange component is a styling wrapper around DateRangePicker plugin.

ULB / DDR Filter

Filter on the basis of ULB and DDR (District) is done by selecting single or multiple instances of DDR/ ULB. DDR is an encapsulation of ULBs, and getChart API filters data on the basis of ULB tenants,

Sample request header -

{
  "aggregationRequestDto": {
    "visualizationType": "METRIC",
    "visualizationCode": "fsmTotalrequest",
    "queryType": "",
    "filters": {
      "tenantId": [
        "pb.jalandhar",
        "pb.phagwara"
      ]
    },
    "moduleLevel": "",
    "aggregationFactors": null,
    "requestDate": {
      "startDate": 1617215400000,
      "endDate": 1627410599999,
      "duration": "month",
      "title": "Apr 1, 2021 - Jul 27, 2021"
    }
  },
...

The component in itself uses MultiSelectDropdown component

Denomination

React Component named Switch which uses styled radio inputs.

Generic Chart

The GenericChart is a common wrapper for all charts. It adds the basic styles to all the chart components.

Metric Chart

The MetricChart component is a wrapper component around the MetricChartRow component. MetricChartRow component uses getChart API to fetch data for the “METRIC“ chart type. The MetricData component is a styling component used to format data.

Area Chart

The CustomAreaChart component is used to render line chart types. It can format data based on denomination filter data. It uses the AreaChart component from the recharts package to draw the chart.

Bar Chart

The CustomBarChart component is used to render the performing-metric chart type. It uses the BarChart component from the recharts package to draw the chart.

Horizontal Bar Chart

The CustomHorizontalBarChart component is used to render horizontal bar chart type. It uses the BarChart component from the recharts package to draw the chart.

Pie Chart

The CustomPieChart component is used to render the doughnut chart type. It displays the top 4 categories and aggregates all the other categories into the “Others“ category. It uses the PieChart component from the recharts package to draw the chart.

Tabular Chart

The CustomTable component is used to render table chart types. The insights are calculated by fetching the previous year's data and compared with the current data.

Download Service

The download service is a common service used by all the chart components to facilitate the download/share pdf option. It is handled by using the JSPDF package.

External Plugins

Recharts

JSPDF

HTML2Canvas

XLXS

DateRangePicker

Overview

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, and personal knowledge from employees, management, executives and business models. DSS analysis helps organizations identify and solve problems, and make decisions.

Key Concepts

Type Of Users

1. National Level Admin (NATADMIN)

2. State Level Admin (STADMIN)

Dashboard List

There are three types of dashboards -

1. Home page (refer to figure 1).

2. Overview page (refer to figure 2).

3. Module-level dashboard (refer to figure 3).

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

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

Overview and Module level card is differentiated by vizType,

1. Overview card: Clicking on the Overview card, redirects users to the overview page. vizType for Overview is a collection.

2. Module Level card: Clicking on the Module level card, redirects users to the Module level dashboards. vizType is module (i.e Property Tax, Trade License etc).

3. Map chart: This entity displays the total, active ULBs within states where DIGIT is live.

Configuration Details

Enable national dashboard: MDMS details

[
  {
    "moduleName": "tenant",
    "masterDetails": [
      {
        "name": "citymodule"
      }
    ]
  },
]

Enable the NDSS in the city module.

{
  active: true
  code: "NDSS"
  module: "NDSS"
}

Request Payload For Dashboard Config

https://qa.digit.org/dashboard-analytics/dashboard/getDashboardConfig/NURT_DASHBOARD

auth-token: authenticates the request and fetches from the local storage key called Employee.token

DashboardConfig API Response

National DSS Chart Details

Visualizations: The key contains all configurations for displaying the visualization like rows with charts etc. - refer to figure 1.3. In Figure 1.3, the vizType key defines the module UI.

For Collection Chart & Module Chart refer figure 1

Visualizations List

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

Each row contains visual details like name, vizType, noUnit, charts etc.(refer to figure 1.3).

name - the name of visualization

vizType - the type of visualization like COLLECTION, MODULE, METRIC-COLLECTION, PERFORMING-METRIC, CHART

• COLLECTION - contains collection data and is displayed on the home page (refer to figure 1)

• MODULE - contains module-level data and is displayed on the home page (refer to figure 1)

• METRIC-COLLECTION - contains collection data and is displayed on Overview/Module level page (refer to figure 2.1)

• PERFORMING-METRIC - contains top/bottom performing data displayed on Overview/Module level page (refer to figure 2.2).

• CHART - contains the below visualizations displayed on Overview/Module level page (refer to figure 2.3 to figure 2.7).

  1. PIE CHART (refer to figure 2.3)

  2. LINE CHART (refer to figure 2.4)

  3. BAR CHART (refer to figure 2.5)

  4. HORIZONTAL BAR CHART (refer to figure 2.6)

  5. TABLE CHART (refer to figure 2.7)

List of visualizations

Figure: 2.1 Collection Metric

Figure: 2.2 Performance Metric

Figure: 2.3 Pie Chart

Figure: 2.4 Line Chart

Figure: 2.5 Bar Chart

Figure: 2.6 Horizontal Bar Chart

Figure: 2.7 Table Chart

Figure: 2.8 Global Filters

Figure: 2.9 Download & Share Button

Global Filters (figure 2.8)

Filters are 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 is fetched from stateCode ULB from code

  {
        "stateCode": "Punjab",
        "stateName": "Punjab",
        "code": "pb.amritsar",
        "name": "Amritsar",
        "active": true,
        "module": "NationalDashboard"
      },

Denomination filter: Denomination filter offers three options to display the amount and number in a particular format.

1. Crore

2. Lakh

3. Unit

Denomination filter is not applied on the percentage and text (figure 2.10). Type of data is identified by symbol in plots of charts API.

Figure 2.10

Custom Date Filter

If the duration is < 15 days, data is displayed days-wise.

If duration <= 30 days, data is displayed week-wise.

If duration >30, data is displayed monthly wise.

Tabs

Currently, the dashboard has two types of tabs -

1. Revenue (figure: 4.1)

2. Service (figure: 4.1)

Tabs are identified by name in visualizations of config API.

Table chart with drill-down

Table chart visualizations have normal material UI data table features like search, sort etc.

In the table response filter key & drillDownChartId has a value that indicates it is a drill-down table.

Cards

1. Each card header is localized and has an info icon with a tooltip option which displays the header and the description.

2. The number of cards in rows on the page is driven by the backend. The backend provides a row number to each card where it should be displayed.

3. The card contains an option icon that contains the image download and image share options.

4. Image download and share option use id from vizArray in order to differentiate each card on a page.

Download and Share (figure 2.9)

The download has two options - download as an Image or PDF

Share: Share creates the Image/PDF and uploads it S3 using the below API and returns file id - /filestore/v1/files

Using file Id calls the following API - /filestore/v1/files/url

Each S3 image is shortened using the following 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

Contact eGov team for more details

Module name: rainmaker-dss

NPM Module Used

    "react-date-range": "1.3.0",
    "react-hook-form": "^6.7.0",
    "react-i18next": "^11.7.3",
    "react-query": "3.6.1",
    "react-redux": "^7.2.1",
    "react-router-dom": "^5.2.0",
    "react-table": "^7.6.1",
    "react-time-picker": "4.2.1",
    "recharts": "^2.0.9",

1. Map component: https://raw.githubusercontent.com/egovernments/egov-mdms-data/DEV/data/pb/dss-dashboard/dashboard-config.json

 {
              "type": "Polygon",
              "id": "MP",
              "properties": { "name": "Madhya Pradesh" },
              "arcs": [[-39, 142, -127, -66, -86]]
            },

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

   {
        "stateCode": "Punjab",
        "stateName": "Punjab",
        "code": "pb.amritsar",
        "name": "Amritsar",
        "active": true,
        "module": "NationalDashboard"
      },

If the values are pushed under different names then the existing file is 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 a local setup.

API Call Role Action Mapping

Supporting links

1. DSS

2. National Dashboard Technical Documentation

Overview - About Page

An about the dashboard page that describes the purpose of the dashboard as well as the source of the data is required to be built as per the feedback received from the demos.

Web URL:-mSeva

The file location in Digit-Dev:- ../modules/dss/src/pages/About.js

The file location in egov-mdms-data:- ../../pb/dss-dashboard/About.json

code

{
                        "titleHeader": "DSS_QUES_WHAT_CAN_DASBOARD_VIEWER_SEE_N_DO",
                        "define": [
                            "DSS_ANS_WHAT_CAN_DASBOARD_VIEWER_SEE_N_DO"
                        ],
                        "subdefine": [
                            "FOLLOWING_VIEWER_DO_ON_DASHBOARD"
                        ],
                        "definePoints": [
                            {
                                "point": "PERFORMANCE_METRICS"
                            },
                            {
                                "point": "RESPECTIVE_STATE'S_PERFORMANCE"
                            },
                            {
                                "point": "PERFORMANCES_IN_FORM_VISUALIZATIONS"
                            },
                            {
                                "point": "SERVICE-WISE_PERFORMANCE"
                            },
                            {
                                "point": "YEAR_PERFORMANCE"
                            }
                        ],
                        "subdefinePoints": [
                            {
                                "point": "STUDY_THE_PERFORMANCES"
                            },
                            {
                                "point": "SEE_COMPARISONS_OF_INTER-STATE"
                            },
                            {
                                "point": "SEE_COMPARISON_ON_YEAR-WISE"
                            },
                            {
                                "point": "DOWNLOAD_THE_DATASET"
                            },
                            {
                                "point": "SHARE_DATA_ANALYTICS"
                            }
                        ]
                    }

OUTPUT

Add Content

To add a question we need to mention titleHeader

To add the first point we need to mention define

To add the first sub-points we need to mention definePoints

To add the second point we need to mention subdefine

To add the second sub-points we need to mention subdefinePoints

Remove Content

If we need to remove the content we need to delete it according titleHeader,define,definePoints, subdefine, subdefinePoints

Overview - FAQ Page

To enhance the dashboard and make it more user-friendly, an FAQ page is to be developed so that users can access it from any page for any queries that they may have regarding any acronyms or how to navigate.

The File location in egov-mdms-data:- ../../pb/dss-dashboard/FAQs.json

code

{
                        "question": "QUES_THREE_HOW_CAN_I_VIEW_VALUES_GRAPH",
                        "answer": [
                            {
                                "ans": "FOR_PIE_CHARTS"
                            },
                            {
                                "point": "HOVER_OVER_THE_INDIVIDUAL_SLICES"
                            }
                        ],
                        "subAnswer" : [
                          {
                            "ans": "FOR_LINE/BAR_GRAPHS"
                        },
                        {
                            "point": "HOVER_OVER_HE_INE/BAR"
                        }
                        ]
                      }

OUTPUT

Add Content

To add a question we need to mention question

To add the First point we need to mention answer, ans

To add the First sub-points we need to mention answer, point

To add the Second point we need to mention subAnswer, ans

To add the Second sub-points we need to mention subAnswer, point

Remove Content

If we need to remove the content we need to delete it according question, answer, subAnswer, ans, point

roleactions.json:- path:- ../../pb/ACCESSCONTROL-ACTIONS-TEST/actions-test.json

   {
      "rolecode": "EMPLOYEE",
      "actionid": 2373,
      "actioncode": "",
      "tenantId": "pb"
    },
    {
      "rolecode": "EMPLOYEE",
      "actionid": 2374,
      "actioncode": "",
      "tenantId": "pb"
    }

actions-test.json:- path:- ../../../ACCESSCONTROL-ACTIONS-TEST/actions-test.json

{
      "id": 2373,
      "name": "ABOUT DASHBOARD",
      "url": "url",
      "displayName": "About Dashboard",
      "orderNumber": 11,
      "parentModule": "ndss-dashboard",
      "enabled": true,
      "serviceCode": "NDSS",
      "code": "null",
      "path": "NatDashboard.About",
      "navigationURL": "/digit-ui/employee/dss/national-about",
      "leftIcon": "places:business-center",
      "rightIcon": ""
    },
    {
      "id": 2374,
      "name": "FAQS",
      "url": "url",
      "displayName": "FAQs",
      "orderNumber": 12,
      "parentModule": "ndss-dashboard",
      "enabled": true,
      "serviceCode": "NDSS",
      "code": "null",
      "path": "NatDashboard.FAQs",
      "navigationURL": "/digit-ui/employee/dss/national-faqs",
      "leftIcon": "places:business-center",
      "rightIcon": ""
    }