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:

• MasterDashboardConfig

• Dashboard Configuration

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