Page Comparison

...

Technical Implementation Details:

Drilldowns mostly happens based on the drilldown ids present in the current table/ chartDrill down /Drill through in Tables, is based on the drillDownChartId and filter.

Here chart id is used for the subsequent call to fetch the next table along with the applied/selected filters.

File Details

https://github.com/egovernments/frontend/blob/54832d3e7c2f2e61def248432b927e8d13ed09ca/web/dss-dashboard/src/components/Charts/TableChart.js

Drill throughs in piecharts :

It is Similar to Dilldown in tables, here Drill through in piecharts are based on the drillDownChartId field in the parent piechart

File Details,

https://github.com/egovernments/frontend/blob/54832d3e7c2f2e61def248432b927e8d13ed09ca/web/dss-dashboard/src/components/Charts/DonutChart.js

...

For Comparing with previous year data in every table data, the same request object will be used by changing the time range to the previous year/month/week.

File Details

https://github.com/egovernments/frontend/blob/54832d3e7c2f2e61def248432b927e8d13ed09ca/web/dss-dashboard/src/components/Charts/TableChart.js

Following The following Method along with parameters are is used to fetch the previous year data.

getLastYearRequest(calledFrom, visualcode, active, filterList) 

after receiving last year data it is compared with current year data and will be shown insight data will be shown, comparison logic is present in uiTable.js

https://github.com/egovernments/frontend/blob/d3b89b4603e4cc98d6102e5fe0a683dae19c7f28/web/dss-dashboard/src/components/common/UiTable/UiTable.js

TimeFilter

The current time component is not very intuitive and user friendly. So New library react-date-range was used to enhance the time filter.

File Details

https://github.com/egovernments/frontend/blob/54832d3e7c2f2e61def248432b927e8d13ed09camaster/web/dss-dashboard/src/components/common/ChartsDateRange/TableChart.jsindex.js

Event Duration Graphs

Ability to generate graphs showcasing time spent between multiple events like average turnaround time, complaint assigning time, etc.

A DSS_EVENT_DURATION_GRAPH was added in the PGR config

{
    "id": 412,
    "name": "DSS_EVENT_DURATION_GRAPH",
    "dimensions": {
        "height": 350,
        "width": 7
    },
    "vizType": "chart",
    "isCollapsible": false,
    "label": "",
    "charts": [
        {
            "id": "eventDurationGraph",
            "name": "Monthly",
            "code": "",
            "chartType": "line",
            "filter": "",
            "headers": []
        }
    ]
}

API Call Role Action mapping: