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:

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::

PreviousMuster Roll (CBO Application)NextMeasurement

Last updated 4 months ago

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.