Modify Data Entry Stats to Stacked Bar Chart

package.json

@@ -7,7 +7,7 @@
     "main": "src/index.ts",
     "source": true,
     "scripts": {
-        "start": "openmrs develop --backend http://194.163.171.253:8282",
+        "start": "openmrs develop",
         "serve": "webpack serve --mode=development",
         "build": "webpack --mode production",
         "analyze": "webpack --mode=production --env analyze=true",

src/facility-metrics/data-entry-statistics/data-entry-statistics.component.tsx

@@ -18,7 +18,7 @@ import {
 import { showNotification, useLayoutType } from "@openmrs/esm-framework";
 import EmptyStateIllustration from "./empty-state-illustration.component";
 import { LineChart } from "@carbon/charts-react";
-import { lineOptions } from "../performance/mock-data";
+import { lineOptions } from "../performance/chart-options";
 import { fetchTransactionCount } from "../facility-metrics.resource";
 
 type EntryTypeData = {

src/facility-metrics/data-entry-statistics/data-entry-statistics.resource.ts

@@ -159,17 +159,11 @@ export async function formatStatsData(statsData: Array<dataProvider>) {
           });
         });
 
-        uniqueProviders.forEach((provider) => {
-          const sum = statsData.reduce((acc, curr) => {
-            if (curr.personUuid === provider.personUuid) {
-              return acc + curr.value;
-            }
-            return acc;
-          }, 0);
-
+        statsData.map((item) => {
           providers.push({
-            group: `${provider?.key})`,
-            value: sum,
+            group: item.group,
+            key: item.key,
+            value: item.value,
           });
         });
 

src/facility-metrics/performance/mock-data.ts → src/facility-metrics/performance/chart-options.ts

@@ -31,18 +31,6 @@ export const donutGenderOptions = {
   height: "300px",
 };
 
-export const donutDepartmentOptions = {
-  title: "Patients by Nationality",
-  resizable: true,
-  donut: {
-    center: {
-      label: "Patients",
-    },
-  },
-  height: "300px",
-  theme: ChartTheme.WHITE,
-};
-
 export const pieChartOptions = {
   title: "Patients by Nationality",
   resizable: true,
@@ -62,11 +50,14 @@ export const dataEntryStatsOptions = {
   },
   axes: {
     left: {
-      mapsTo: "group",
+      title: "Data Entrant / Provider",
+      mapsTo: "key",
       scaleType: ScaleTypes.LABELS,
     },
     bottom: {
+      title: "Number of Entries",
       mapsTo: "value",
+      scaleType: ScaleTypes.LINEAR,
     },
   },
   height: "600px",
@@ -99,49 +90,6 @@ export const lineOptions = {
   height: "400px",
 };
 
-export const StackedBarData = [
-  {
-    group: "ART",
-    key: "Triage",
-    value: 16,
-  },
-  {
-    group: "ART",
-    key: "Clinician",
-    value: 16,
-  },
-  {
-    group: "ART",
-    key: "LAB",
-    value: 12,
-  },
-  {
-    group: "ART",
-    key: "Pharmacy",
-    value: 16,
-  },
-  {
-    group: "TB",
-    key: "Triage",
-    value: 15,
-  },
-  {
-    group: "TB",
-    key: "Clinician",
-    value: 12,
-  },
-  {
-    group: "TB",
-    key: "LAB",
-    value: 7,
-  },
-  {
-    group: "TB",
-    key: "Pharmacy",
-    value: 10,
-  },
-];
-
 export const StackedBarPOCOptions = {
   title: "POC Service Points",
   axes: {

src/facility-metrics/performance/performance.component.tsx

@@ -1,10 +1,5 @@
 import React, { useCallback, useEffect, useState } from "react";
-import {
-  DonutChart,
-  PieChart,
-  SimpleBarChart,
-  StackedBarChart,
-} from "@carbon/charts-react";
+import { DonutChart, PieChart, StackedBarChart } from "@carbon/charts-react";
 import {
   showModal,
   showNotification,
@@ -16,7 +11,7 @@ import {
   healthWorkersDisaggregationOptions,
   pieChartOptions,
   StackedBarPOCOptions,
-} from "./mock-data";
+} from "./chart-options";
 import { CaretUp, CheckmarkOutline } from "@carbon/react/icons";
 import styles from "./performance.scss";
 import {
@@ -256,7 +251,10 @@ const Performance: React.FC = () => {
       </div>
 
       <div className={styles.statsContainer}>
-        <SimpleBarChart data={providersArray} options={dataEntryStatsOptions} />
+        <StackedBarChart
+          data={providersArray}
+          options={dataEntryStatsOptions}
+        />
       </div>
     </>
   );