Mukta Dashboard

UI Tech Documentation for UI Enhancements in Dashboard (DSS)

Here's a list of Enhancements Made in DSS

Pie Chart Enhancements

  • Sample config for the same is shown below:

  • There was a requirement in Mukta Dashboard to render pie charts in the following way. Refer the attached screenshot:

  • In the MasterDashboardConfig.json we defined a flag called variant for pieChart

  • In order to use this enhancement we need to use "variant":"pieChartv2"

  • This pie chart component was enhanced to show colored legends below, percentages in each pie and total number of applications in the center of the pie.

  • Sample config for the same is shown below:

{
              "id": 502,
              "name": "DSS_MUKTA_PENDING_BILLS",
              "dimensions": {
                "height": 250,
                "width": 4
              },
              "label": "",
              "vizType": "chart",
              "isCollapsible": false,
              "charts": [
                {
                  "id": "pendingBillsByBillNumberType",
                  "name": "DSS_MUKTA_PENDING_BILLS_BY_BILL_NUMBER_TYPE",
                  "code": "",
                  "chartType": "donut",
                  "variant":"pieChartv2",
                  "filter": "",
                  "headers": [],
                  "tabName": "Number"
                },
                {
                  "id": "pendingBillsByBillAmountType",
                  "name": "DSS_MUKTA_PENDING_BILLS_BY_BILL_AMOUNT_TYPE",
                  "code": "",
                  "chartType": "donut",
                  "variant":"pieChartv2",
                  "filter": "",
                  "headers": [],
                  "tabName": "Amount"
                }
              ]
            }


Horizontal Chart Enhancements (New Metric component to show the KPI's in horizontal way)

  • There was a requirement in Mukta Dashboard to show KPIs in the form of horizontal bar charts. Refer the attached screenshot:

  • In MasterDashboardConfig.json we defined a boolean flag called “horizontalBarv2”

  • Set this flag to true if you want to show the chart in this way.

  • Counts of each bar are shown at the side of the bar, labels can be customized.

New Metric component to show the KPI's in horizontal way:

  • There was a requirement in the MUKTA Dashboard to show KPIs in a horizontal way. Refer to the sample screenshot below:

  • KPIs are shown in horizontal manner along with their description, aligned vertically to them.

  • In MasterDashboardConfig we defined a boolean flag “isHorizontalChart”. Set this to true to make use of this enhancement.

  • Icons are customizable and are defined in the MasterDashboardConfig itself.

References:

Employee Role: STADMIN

Note::

The Existing Global Config is to be updated, following flag is to be removed.

In the invalidEmployeeRoles array STADMIN role should be removed to use Mukta dashboard

All content on this page by eGov Foundation is licensed under a Creative Commons Attribution 4.0 International License.