...
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 -
| Code Block | ||
|---|---|---|
| ||
{
"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.
...
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 type. 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 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 horizontalBar 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 donut 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 type. 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 facilate the download/share pdf option. It is handled by using the JSPDF package.
External plugins
Recharts
https://www.npmjs.com/package/recharts
JSPDF
https:///todo
HTML2Canvas
...
HTML2Canvas
https://www.npmjs.com/package/html2canvas
XLXS
https://www.npmjs.com/package/xlsx