> For the complete documentation index, see [llms.txt](https://docs.digit.org/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](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.md).
# DSS UI Flow
## 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**
```javascript
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
[
npm: recharts](https://www.npmjs.com/package/recharts)
#### JSPDF
[npm: npm-install-peers](https://www.npmjs.com/package/jspdf)
#### HTML2Canvas
[npm: html2canvas](https://www.npmjs.com/package/html2canvas)
#### XLXS
[npm: xlsx](https://www.npmjs.com/package/xlsx)
#### DateRangePicker
[npm: daterangepicker](https://www.npmjs.com/package/daterangepicker)
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET 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.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.