# National Dashboard - UI Technical Doc ## **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. ![](https://1885278393-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUYtUmELy66UydIQtJOn5%2Fuploads%2FZI7ZUGMzPRtolbebAGrs%2Fimage.png?alt=media\&token=fea7076d-1ac1-421e-81d2-0decf7f627ba) 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 Code Git Repos: [DIGIT-OSS/frontend/micro-ui/web/micro-ui-internals at master · egovernments/DIGIT-OSS](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" } ] }, ] ``` Enable the NDSS in the city module. ``` { active: true code: "NDSS" module: "NDSS" } ``` State names are configured in the dashboard-config.\ [egov-mdms-data/dashboard-config.json at DEV · egovernments/egov-mdms-data](https://github.com/egovernments/egov-mdms-data/blob/DEV/data/pb/dss-dashboard/dashboard-config.json) **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** ![](https://1885278393-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUYtUmELy66UydIQtJOn5%2Fuploads%2F08aSabdkkjufEmMmcvuN%2Fimage.png?alt=media\&token=92df2253-b0e1-40e6-b8c7-3b0354c9c07c) ![](https://1885278393-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUYtUmELy66UydIQtJOn5%2Fuploads%2FMbORnRUbMwvQSQrEEgHv%2Fimage.png?alt=media\&token=0584e808-6697-43da-b654-1bf34df7251e) ## **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** ![Overview dashboard](https://1885278393-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUYtUmELy66UydIQtJOn5%2Fuploads%2FYQZSQKWadOUEe5xsoj32%2Fimage.png?alt=media\&token=ecee29c4-c511-42e8-866d-bd262faf7740) ![Module level dashboard](https://1885278393-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUYtUmELy66UydIQtJOn5%2Fuploads%2FUbm4U7SAvWkctjjuWJDK%2Fimage.png?alt=media\&token=1121ed2f-84a1-4a2d-9195-f7f602a131e6) **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 ![](https://1885278393-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUYtUmELy66UydIQtJOn5%2Fuploads%2FsW6JpRc4uwb0wCHF5d4f%2Fimage.png?alt=media\&token=d0c40f8c-f62b-45b5-ab0e-2785437306c0) Figure: 2.2 Performance Metric ![](https://1885278393-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUYtUmELy66UydIQtJOn5%2Fuploads%2F8k1vdadhjSOO8dyXMXPa%2Fimage.png?alt=media\&token=ddd70a80-0844-4c7b-8574-c1cec25d55a2) Figure: 2.3 Pie Chart ![](https://1885278393-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUYtUmELy66UydIQtJOn5%2Fuploads%2FTfFYH0KawJoD6FrHCqba%2Fimage.png?alt=media\&token=105d1a6d-f32b-4f8c-b3ed-4ee644a7bebd) Figure: 2.4 Line Chart ![](https://1885278393-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUYtUmELy66UydIQtJOn5%2Fuploads%2FpktSIizpEYZQaJCLK3m9%2Fimage.png?alt=media\&token=eff98ddd-afc3-4731-b82a-0a7fc133af13) Figure: 2.5 Bar Chart ![](https://1885278393-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUYtUmELy66UydIQtJOn5%2Fuploads%2FjAl8h8mKv7v2iWlVQPkK%2Fimage.png?alt=media\&token=4b3f5b01-e750-457f-b30b-dfaa4f58be4c) Figure: 2.6 Horizontal Bar Chart ![](https://1885278393-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUYtUmELy66UydIQtJOn5%2Fuploads%2FTiixcweQWjwfEuBguauu%2Fimage.png?alt=media\&token=ece89d8f-fab1-45f4-9b3d-ca96f1fc59c5) Figure: 2.7 Table Chart ![](https://1885278393-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUYtUmELy66UydIQtJOn5%2Fuploads%2F95owXcZKFcdhP5dQI0h6%2Fimage.png?alt=media\&token=4c98955a-03a6-4b50-b000-ff7913590ff5) Figure: 2.8 Global Filters ![](https://1885278393-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUYtUmELy66UydIQtJOn5%2Fuploads%2F8w25BbdklPfPRCSa6cST%2Fimage.png?alt=media\&token=6dad018c-df9f-4326-818c-44c36e2d64e2) Figure: 2.9 Download & Share Button **Global Filters (figure 2.8)** Filters are loaded from MDMS API - [egov-mdms-data/nationalInfo.json at QA · egovernments/egov-mdms-data (github.com)](https://github.com/egovernments/egov-mdms-data/blob/QA/data/pb/tenant/nationalInfo.json) 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. ![](https://1885278393-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUYtUmELy66UydIQtJOn5%2Fuploads%2F5ulk9gHFDjzIDA5v8KNs%2Fimage.png?alt=media\&token=901f8b77-7e5f-42e3-adee-234cd1729c6c) 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. ![](https://1885278393-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUYtUmELy66UydIQtJOn5%2Fuploads%2Fb5AuxCsKNoyL4F8DKRr1%2Fimage.png?alt=media\&token=f72a0f82-810b-4634-b606-52f843355ce5) **Table chart with drill-down** Table chart visualizations have normal material UI data table features like search, sort etc. ![](https://1885278393-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUYtUmELy66UydIQtJOn5%2Fuploads%2FJWXXNW0FhACkpD3ZQd8H%2Fimage.png?alt=media\&token=3ed32b73-e6d5-4ad0-853b-53345497bff5) 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](https://mseva-uat.lgpunjab.gov.in/filestore/v1/files) Using file Id calls the following API - [/filestore/v1/files/url](https://mseva-uat.lgpunjab.gov.in/filestore/v1/files/url) Each S3 image is shortened using the following API - [/egov-url-shortening/shortener](https://mseva-uat.lgpunjab.gov.in/egov-url-shortening/shortener) Upload localization keys: ![](https://1885278393-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUYtUmELy66UydIQtJOn5%2Fuploads%2FPVeMkK6RBCVTQT35X9Ba%2Fimage.png?alt=media\&token=6ee4a11a-c4c6-4dc9-a627-e8550b0f4421) **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", ``` {% hint style="info" %} **Note:: Consider this while pushing new State data - *****both MDMS state names and codes should be in sync*** {% endhint %} 1\. Map component: ``` { "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: ``` { "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** | **API** | **Roles** | | ------------------------------------------------------------------------- | ---------- | | `/localization/messages/v1/_search` | | | `/egov-mdms-service/v1/_search` | | | `/dashboard-analytics/dashboard/getDashboardConfig/national-ws` | `NATADMIN` | | `/dashboard-analytics/dashboard/getDashboardConfig/national-tradelicense` | `NATADMIN` | | `/dashboard-analytics/dashboard/getDashboardConfig/national-propertytax` | `NATADMIN` | | `/dashboard-analytics/dashboard/getDashboardConfig/national-pgr` | `NATADMIN` | | `/dashboard-analytics/dashboard/getDashboardConfig/NURT_DASHBOARD` | `NATADMIN` | | `/dashboard-analytics/dashboard/getDashboardConfig/nss-obps` | `NATADMIN` | | `/dashboard-analytics/dashboard/getDashboardConfig/national-firenoc` | `NATADMIN` | | `/dashboard-analytics/dashboard/getDashboardConfig/national-mcollect` | `NATADMIN` | | `/dashboard-analytics/dashboard/getDashboardConfig/national-overview` | `NATADMIN` | **Supporting links** 1. [DSS](https://docs.digit.org/local-governance/v2.8/platform/configure-digit/configuring-digit-services/national-dashboard-service-configuration/national-dashboard-ui-technical-doc/dss-ui-flow) 2. [National Dashboard Technical Documentation](https://docs.digit.org/local-governance/v2.8/platform/configure-digit/configuring-digit-services/national-dashboard-service-configuration)