Individual DSS configurations like FSM - DSS configuration is built on DSS module. where configuration and data is recieved from a set of APIs which can be accessed by users with specific user roles.
Module wise role access to DSS module
Role | Module | API |
|---|---|---|
FSM_ADMIN | FSM | curl 'https://qa.digit.org/dashboard-analytics/dashboard/getDashboardConfig/fsm?_=1627404589797' \ -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 'auth-token: 1bc96a3e-c6c0-4af7-9b97-5cff0c035f98' \ -H 'content-type: application/json;charset=utf-8' \ -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' \ --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 chart will have unique data params and response in a 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 consist of 4 components :-
Date Range
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"
}
},
...
Component in itself uses MultiSelectDropdown component
Denomination
React Component named Switch which uses styled radio inputs.
External plugins
JSPDF
https://www.npmjs.com/package/jspdf
HTML2Canvas
https://www.npmjs.com/package/html2canvas
XLXS
https://www.npmjs.com/package/xlsx
Add Comment