@kenyaemr/esm-facility-dashboard-app 5.4.2-pre.2120 → 5.4.2-pre.2126

package/dist/routes.json

@@ -1 +1 @@
-{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"kenyaemrCharts":"^1.6.7"},"extensions":[{"component":"surveillanceDashboardLink","name":"surveillance-dashboard-link","slot":"facility-dashboard-left-panel-slot"},{"component":"aboveSiteDashboardLink","name":"above-site-dashboard-link","slot":"facility-dashboard-left-panel-slot"}],"workspaces":[],"modals":[],"pages":[{"component":"root","route":"facility-dashboard"}],"version":"5.4.2-pre.2120"}
+{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"kenyaemrCharts":"^1.6.7"},"extensions":[{"component":"surveillanceDashboardLink","name":"surveillance-dashboard-link","slot":"facility-dashboard-left-panel-slot"},{"component":"aboveSiteDashboardLink","name":"above-site-dashboard-link","slot":"facility-dashboard-left-panel-slot"}],"workspaces":[],"modals":[],"pages":[{"component":"root","route":"facility-dashboard"}],"version":"5.4.2-pre.2126"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kenyaemr/esm-facility-dashboard-app",
-  "version": "5.4.2-pre.2120",
+  "version": "5.4.2-pre.2126",
   "description": "Facility dashboard app",
   "browser": "dist/kenyaemr-esm-facility-dashboard-app.js",
   "main": "src/index.ts",

package/src/constants.ts

@@ -23,3 +23,7 @@ export const formatNewDate = (date: Date | null | undefined) => {
 export const formattedDate = (date: Date) => {
   return date ? dayjs(date).format(DATE_PICKER_FORMAT) : '';
 };
+
+export const thirtyDays = () => {
+  return dayjs().subtract(30, 'day').toDate();
+};

package/src/hooks/useFacilityDashboardSurveillance.ts

@@ -1,44 +1,122 @@
-import { FetchResponse, formatDatetime, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import { FetchResponse, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
 import useSWR from 'swr';
-import { IndicationMode, type SurveillanceSummary } from '../types';
-import { useCallback } from 'react';
+import { HivPositiveNotLinked, IndicationMode, type SurveillanceSummary } from '../types';
+import { useMemo } from 'react';
 import { formattedDate, sevenDaysAgo, today } from '../constants';
 
+/**
+ * Handling null/undefined/zero values
+ */
+const safeCalculatePercentage = (numerator: number, denominator: number): number | null => {
+  if (!numerator || !denominator || denominator === 0) {
+    return null;
+  }
+  return parseFloat(((numerator / denominator) * 100).toFixed(2));
+};
+
 const useFacilityDashboardSurveillance = (startDate?: Date, endDate?: Date) => {
-  const url =
-    startDate && endDate
-      ? `${restBaseUrl}/kenyaemr/facility-dashboard?startDate=${formattedDate(startDate)}&endDate=${formattedDate(
-          endDate,
-        )}`
-      : `${restBaseUrl}/kenyaemr/facility-dashboard?startDate=${formattedDate(today())}&endDate=${formattedDate(
-          sevenDaysAgo(),
-        )}`;
+  const { formattedStartDate, formattedEndDate, url } = useMemo(() => {
+    const formattedStartDate = startDate ? formattedDate(startDate) : formattedDate(sevenDaysAgo());
+    const formattedEndDate = endDate ? formattedDate(endDate) : formattedDate(today());
+
+    const url = `${restBaseUrl}/kenyaemr/facility-dashboard?startDate=${formattedStartDate}&endDate=${formattedEndDate}`;
+
+    return { formattedStartDate, formattedEndDate, url };
+  }, [startDate, endDate]);
 
   const { data, error, isLoading, mutate } = useSWR<FetchResponse<SurveillanceSummary>>(url, openmrsFetch);
-  const getIndication = useCallback((indicator: number, denominator: number, threshold: number): IndicationMode => {
-    if (denominator === 0 || indicator <= denominator * threshold) {
-      return 'decreasing';
-    }
-    return 'increasing';
-  }, []);
-  const getPercentage = useCallback((indicator: number, denominator: number): string => {
-    if (indicator === null || indicator === undefined || denominator === null || denominator === undefined) {
-      return `- %`;
-    }
-    if (denominator === 0) {
-      return '0 %';
-    }
-    const percent = (indicator / denominator) * 100;
-    return `${percent.toFixed(2)} %`;
+
+  const calculations = useMemo(() => {
+    const getIndication = (indicator: number, denominator: number, threshold: number): IndicationMode => {
+      if (denominator === 0 || indicator <= denominator * threshold) {
+        return 'decreasing';
+      }
+      return 'increasing';
+    };
+
+    const getPercentage = (indicator: number, denominator: number): string => {
+      const result = safeCalculatePercentage(indicator, denominator);
+      if (result === null) {
+        return indicator === null || indicator === undefined ? '- %' : '0 %';
+      }
+      return `${result} %`;
+    };
+
+    const getCompletedPercentage = (indicator: number, denominator: number): number | null => {
+      if (!denominator) {
+        return null;
+      }
+      return safeCalculatePercentage(denominator - indicator, denominator);
+    };
+
+    const getPendingPercentage = (indicator: number, denominator: number): number | null => {
+      return safeCalculatePercentage(indicator, denominator);
+    };
+
+    const getThirtydaysRunninPercentage = (
+      denominator: Array<HivPositiveNotLinked>,
+      numerator: Array<HivPositiveNotLinked>,
+    ) => {
+      if (!denominator?.length) {
+        return [];
+      }
+
+      const result: Array<HivPositiveNotLinked> = new Array(denominator.length * 2);
+      let index = 0;
+
+      const numeratorMap = new Map(numerator.map((item) => [item.day, item.value]));
+
+      for (const denomItem of denominator) {
+        const numValue = numeratorMap.get(denomItem.day) ?? 0;
+        const denomValue = denomItem.value;
+
+        const completedPct = denomValue > 0 ? parseFloat((((denomValue - numValue) / denomValue) * 100).toFixed(2)) : 0;
+        const pendingPct = denomValue > 0 ? parseFloat(((numValue / denomValue) * 100).toFixed(2)) : 0;
+
+        result[index++] = { day: denomItem.day, group: 'Completed', value: completedPct };
+        result[index++] = { day: denomItem.day, group: 'Pending', value: pendingPct };
+      }
+
+      return result;
+    };
+
+    const getThirtydaysRunninPendingPercentage = (
+      denominator: Array<HivPositiveNotLinked>,
+      numerator: Array<HivPositiveNotLinked>,
+    ) => {
+      if (!denominator?.length) {
+        return [];
+      }
+
+      const result: Array<HivPositiveNotLinked> = new Array(denominator.length);
+
+      const numeratorMap = new Map(numerator.map((item) => [item.day, item.value]));
+
+      return denominator.map((denomItem) => {
+        const numValue = numeratorMap.get(denomItem.day) ?? 0;
+        const denomValue = denomItem.value;
+        const pendingPct = denomValue > 0 ? parseFloat(((numValue / denomValue) * 100).toFixed(2)) : 0;
+
+        return { day: denomItem.day, group: 'Pending', value: pendingPct };
+      });
+    };
+
+    return {
+      getIndication,
+      getPercentage,
+      getCompletedPercentage,
+      getPendingPercentage,
+      getThirtydaysRunninPercentage,
+      getThirtydaysRunninPendingPercentage,
+    };
   }, []);
 
   return {
     surveillanceSummary: data?.data ?? null,
-    getIndication,
-    getPercentage,
     isLoading,
     mutate,
     error,
+    ...calculations,
   };
 };
 

package/src/surveillance/charts/base-cumulative-progress-tracking-chart.component.tsx

@@ -0,0 +1,50 @@
+import { ScaleTypes, SimpleBarChart, BarChartOptions } from '@carbon/charts-react';
+import { Layer } from '@carbon/react';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import styles from './charts.scss';
+import { LinkageData } from '../../types';
+
+type Props = {
+  data: LinkageData;
+  height?: string;
+  title?: string;
+  yAxisTitle?: string;
+};
+
+const BaseCumulativeProgressTrackingChart: React.FC<Props> = ({ data, title, yAxisTitle, height = '300px' }) => {
+  const { t } = useTranslation();
+
+  const chartData = data?.data || [];
+
+  const options: BarChartOptions = {
+    title: title,
+    axes: {
+      left: {
+        title: yAxisTitle,
+        scaleType: ScaleTypes.LINEAR,
+        domain: [0, 100],
+        includeZero: true,
+        mapsTo: 'value',
+      },
+      bottom: {
+        mapsTo: 'group',
+        scaleType: ScaleTypes.LABELS,
+      },
+    },
+    height: height,
+    color: {
+      scale: {
+        Completed: '#008000',
+        Pending: '#FF0000',
+      },
+    },
+  };
+  return (
+    <Layer className={styles.chartContainer}>
+      <SimpleBarChart options={options} data={chartData} />
+    </Layer>
+  );
+};
+
+export default BaseCumulativeProgressTrackingChart;

package/src/surveillance/charts/base-indicator-trend-chart.component.tsx

@@ -15,7 +15,7 @@ type Props = {
   yAxisTitle: string;
   height?: string;
 };
-const BaseIndicatorTrendChart: React.FC<Props> = ({ data, title, yAxisTitle, height = '400px' }) => {
+const BaseIndicatorTrendChart: React.FC<Props> = ({ data, title, yAxisTitle, height = '300px' }) => {
   const { t } = useTranslation();
   const [minValue, maxValue] = useChartDomain(data);
   const options: LineChartOptions = {
@@ -27,7 +27,7 @@ const BaseIndicatorTrendChart: React.FC<Props> = ({ data, title, yAxisTitle, hei
       left: {
         title: yAxisTitle,
         scaleType: ScaleTypes.LINEAR,
-        domain: [minValue, maxValue],
+        domain: [0, 100],
         includeZero: true,
         mapsTo: 'value',
       },
@@ -37,7 +37,13 @@ const BaseIndicatorTrendChart: React.FC<Props> = ({ data, title, yAxisTitle, hei
         mapsTo: 'day',
       },
     },
-    height,
+    height: height,
+    color: {
+      scale: {
+        Completed: '#008000',
+        Pending: '#FF0000',
+      },
+    },
   };
 
   return (

package/src/surveillance/charts/base-progress-tracking-chart.component.tsx

@@ -3,39 +3,45 @@ import { Layer } from '@carbon/react';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import styles from './charts.scss';
+import { useChartDomain } from '../../hooks/useSurveillanceData';
 
 type Props = {
-  data: Array<{ group: string; key: string; value: number }>;
+  data: Array<{ group?: string; day: string; value: number }>;
+  height?: string;
+  stackTitle?: string;
+  leftAxiTtitle?: string;
 };
 
-const BaseProgressTrackingChart: React.FC<Props> = ({ data }) => {
+const BaseProgressTrackingChart: React.FC<Props> = ({ data, stackTitle, leftAxiTtitle, height = '300px' }) => {
   const { t } = useTranslation();
 
+  const [minValue, maxValue] = useChartDomain(data);
+
   const options: StackedBarChartOptions = {
-    title: t('progresstracking', 'Progress tracking'),
+    title: stackTitle,
     legend: {
       enabled: true,
     },
     axes: {
       bottom: {
-        title: t('days', 'Days'),
-        mapsTo: 'key',
+        title: t('day', 'Day'),
+        mapsTo: 'day',
         scaleType: ScaleTypes.LABELS,
       },
       left: {
-        title: t('percentage', 'Percentage'),
+        title: leftAxiTtitle,
         mapsTo: 'value',
         scaleType: ScaleTypes.LINEAR,
-        percentage: true,
+        domain: [0, 100],
       },
     },
     color: {
       scale: {
-        Declined: '#00416a', //Dark Imperial Blue
-        StartedPrEP: '#c46210', //Alloy Orange
+        Completed: '#008000',
+        Pending: '#FF0000',
       },
     },
-    height: '400px',
+    height,
     data: {
       groupMapsTo: 'group',
     },

package/src/surveillance/charts/charts.scss

@@ -8,3 +8,7 @@
 .chart {
   margin-top: layout.$spacing-05;
 }
+.cumulativeChart {
+  margin-top: layout.$spacing-05;
+  width: 50%;
+}

package/src/surveillance/charts/delayed-eac-charts.component.tsx

@@ -7,6 +7,8 @@ import EmptyState from '../empty-state/empty-state-log.components';
 import useFacilityDashboardSurveillance from '../../hooks/useFacilityDashboardSurveillance';
 import { useSurveillanceData } from '../../hooks/useSurveillanceData';
 import { InlineLoading } from '@carbon/react';
+import BaseCumulativeProgressTrackingChart from './base-cumulative-progress-tracking-chart.component';
+import BaseProgressTrackingChart from './base-progress-tracking-chart.component';
 type DelayedEACChartsProps = {
   startDate?: Date;
   endDate?: Date;
@@ -14,23 +16,87 @@ type DelayedEACChartsProps = {
 
 const DelayedEACCharts: React.FC<DelayedEACChartsProps> = ({ startDate, endDate }) => {
   const { t } = useTranslation();
-  const { error, isLoading, surveillanceSummary } = useFacilityDashboardSurveillance(startDate, endDate);
+  const {
+    error,
+    isLoading,
+    surveillanceSummary,
+    getCompletedPercentage,
+    getPendingPercentage,
+    getThirtydaysRunninPercentage,
+    getThirtydaysRunninPendingPercentage,
+  } = useFacilityDashboardSurveillance(startDate, endDate);
 
-  const delayedEACValue = useSurveillanceData(surveillanceSummary, 'getMonthlyVirallyUnsuppressedWithoutEAC');
+  const cumulativedelayedEACValueData = {
+    data: [
+      {
+        group: 'Completed',
+        value: getCompletedPercentage(
+          surveillanceSummary?.getVirallyUnsuppressedWithoutEAC,
+          surveillanceSummary?.getVirallyUnsuppressed,
+        ),
+      },
+      {
+        group: 'Pending',
+        value: getPendingPercentage(
+          surveillanceSummary?.getVirallyUnsuppressedWithoutEAC,
+          surveillanceSummary?.getVirallyUnsuppressed,
+        ),
+      },
+    ],
+  };
+
+  const thirtyDaysrunningData = getThirtydaysRunninPercentage(
+    surveillanceSummary?.getMonthlyVirallyUnsuppressed.data,
+    surveillanceSummary?.getMonthlyVirallyUnsuppressedWithoutEAC.data,
+  );
+
+  const lineGraphData = getThirtydaysRunninPendingPercentage(
+    surveillanceSummary?.getMonthlyVirallyUnsuppressed.data,
+    surveillanceSummary?.getMonthlyVirallyUnsuppressedWithoutEAC.data,
+  );
+
+  if (error) {
+    return <EmptyState subTitle={t('errorLoadingData', 'Error loading data')} />;
+  }
   return (
-    <div className={styles.chart}>
-      {isLoading ? (
-        <InlineLoading status="active" iconDescription="Loading" description="Loading data..." />
-      ) : delayedEACValue.length > 0 ? (
-        <BaseIndicatorTrendChart
-          data={delayedEACValue}
-          title={t('delayedEAC', 'Delayed enhanced adherence counselling')}
-          yAxisTitle={t('numberDelayedEAC', 'Number of Delayed EAC')}
-        />
-      ) : (
-        <EmptyState subTitle={t('noDelayedEAC', 'No Delayed EAC data to display')} />
-      )}
-    </div>
+    <>
+      <div className={styles.chart}>
+        {isLoading ? (
+          <InlineLoading status="active" iconDescription="Loading" description="Loading data..." />
+        ) : lineGraphData.length > 0 ? (
+          <BaseIndicatorTrendChart
+            data={lineGraphData}
+            title={t('delayedEAC', 'Delayed enhanced adherence counselling')}
+            yAxisTitle={t('numberDelayedEAC', 'Number of Delayed EAC')}
+          />
+        ) : (
+          <EmptyState subTitle={t('noDelayedEAC', 'No delayed EAC data to display')} />
+        )}
+      </div>
+      <div className={styles.chart}>
+        {thirtyDaysrunningData.length > 0 ? (
+          <BaseProgressTrackingChart
+            data={thirtyDaysrunningData}
+            stackTitle={t('progressInAddressingDelayedEAC', 'Progress in addressing delayed EAC')}
+            leftAxiTtitle={t('percentageDelayedEAC', '% Delayed EAC')}
+          />
+        ) : (
+          <EmptyState subTitle={t('noPendingPCRDNAResults', 'No pending PCR DNA results data to display')} />
+        )}
+      </div>
+      <div className={styles.chart}>
+        {surveillanceSummary?.getVirallyUnsuppressed > 0 ? (
+          <div className={styles.cumulativeChart}>
+            <BaseCumulativeProgressTrackingChart
+              data={cumulativedelayedEACValueData}
+              title={t('cumulativeProgressDelayedEAC', 'Cumulative Progress in addressing delayed EAC')}
+            />
+          </div>
+        ) : (
+          <EmptyState subTitle={t('noDelayedEAC', 'No delayed EAC data to display')} />
+        )}
+      </div>
+    </>
   );
 };
 

package/src/surveillance/charts/dna-pcr-pending-chart.component.tsx

@@ -7,29 +7,98 @@ import useFacilityDashboardSurveillance from '../../hooks/useFacilityDashboardSu
 import { useSurveillanceData } from '../../hooks/useSurveillanceData';
 import EmptyState from '../empty-state/empty-state-log.components';
 import { InlineLoading } from '@carbon/react';
+import BaseCumulativeProgressTrackingChart from './base-cumulative-progress-tracking-chart.component';
+import BaseProgressTrackingChart from './base-progress-tracking-chart.component';
 type DNAPCRPendingChartsProps = {
   startDate?: Date;
   endDate?: Date;
 };
 const DNAPCRPendingCharts: React.FC<DNAPCRPendingChartsProps> = ({ startDate, endDate }) => {
   const { t } = useTranslation();
-  const { error, isLoading, surveillanceSummary } = useFacilityDashboardSurveillance(startDate, endDate);
+  const {
+    error,
+    isLoading,
+    surveillanceSummary,
+    getCompletedPercentage,
+    getPendingPercentage,
+    getThirtydaysRunninPercentage,
+    getThirtydaysRunninPendingPercentage,
+  } = useFacilityDashboardSurveillance(startDate, endDate);
+
+  const cumulativeDnapcrPendingData = {
+    data: [
+      {
+        group: 'Completed',
+        value: getCompletedPercentage(
+          surveillanceSummary?.getHeiSixToEightWeeksWithoutPCRResults,
+          surveillanceSummary.getHeiSixToEightWeeksOld,
+        ),
+      },
+      {
+        group: 'Pending',
+        value: getPendingPercentage(
+          surveillanceSummary?.getHeiSixToEightWeeksWithoutPCRResults,
+          surveillanceSummary.getHeiSixToEightWeeksOld,
+        ),
+      },
+    ],
+  };
+
+  const thirtyDaysrunningData = getThirtydaysRunninPercentage(
+    surveillanceSummary?.getMonthlyHeiSixToEightWeeksOld.data,
+    surveillanceSummary?.getMonthlyHeiDNAPCRPending.data,
+  );
+
+  const lineGraphData = getThirtydaysRunninPendingPercentage(
+    surveillanceSummary?.getMonthlyHeiSixToEightWeeksOld.data,
+    surveillanceSummary?.getMonthlyHeiDNAPCRPending.data,
+  );
+
+  if (error) {
+    return <EmptyState subTitle={t('errorLoadingData', 'Error loading data')} />;
+  }
 
-  const PendingPCRDNAResultsValue = useSurveillanceData(surveillanceSummary, 'getMonthlyHeiDNAPCRPending');
   return (
-    <div className={styles.chart}>
-      {isLoading ? (
-        <InlineLoading status="active" iconDescription="Loading" description="Loading data..." />
-      ) : PendingPCRDNAResultsValue.length > 0 ? (
-        <BaseIndicatorTrendChart
-          data={PendingPCRDNAResultsValue}
-          title={t('dnapcrPending', 'HEI (6-8 weeks) without DNA-PCR results')}
-          yAxisTitle={t('numberOfPendingPCRDNAResults', 'Number of HEI (6-8 weeks) without DNA-PCR results')}
-        />
-      ) : (
-        <EmptyState subTitle={t('noPendingPCRDNAResults', 'No pending PCR DNA results data to display')} />
-      )}
-    </div>
+    <>
+      <div className={styles.chart}>
+        {isLoading ? (
+          <InlineLoading status="active" iconDescription="Loading" description="Loading data..." />
+        ) : lineGraphData.length > 0 ? (
+          <BaseIndicatorTrendChart
+            data={lineGraphData}
+            title={t('dnapcrPending', 'HEI (6-8 weeks) without DNA-PCR results')}
+            yAxisTitle={t('percentageOfPendingPCRDNAResults', '% HEI (6-8 weeks) without DNA-PCR results')}
+          />
+        ) : (
+          <EmptyState subTitle={t('noPendingPCRDNAResults', 'No pending PCR DNA results data to display')} />
+        )}
+      </div>
+      <div className={styles.chart}>
+        {thirtyDaysrunningData.length > 0 ? (
+          <BaseProgressTrackingChart
+            data={thirtyDaysrunningData}
+            stackTitle={t('progressInAddressingHEIPCRResults ', 'Progress in addressing  HEI PCR results')}
+            leftAxiTtitle={t('percentageHEIPCRResults', '% HEI (6-8 weeks) PCR result')}
+          />
+        ) : (
+          <EmptyState subTitle={t('noPendingPCRDNAResults', 'No pending PCR DNA results data to display')} />
+        )}
+      </div>
+      <div className={styles.chart}>
+        {surveillanceSummary?.getHeiSixToEightWeeksOld > 0 ? (
+          <div className={styles.cumulativeChart}>
+            <BaseCumulativeProgressTrackingChart
+              data={cumulativeDnapcrPendingData}
+              title={t('cumulativeProgressDnapcrPending', 'Cumulative Progress in addressing  HEI PCR results')}
+            />
+          </div>
+        ) : (
+          <EmptyState
+            subTitle={t('noCumulativeDnapcrPending', 'No cumulative HEI (6-8 weeks) without DNA-PCR data to display')}
+          />
+        )}
+      </div>
+    </>
   );
 };
 

package/src/surveillance/charts/hei-final-outcome.component.tsx

@@ -7,6 +7,8 @@ import useFacilityDashboardSurveillance from '../../hooks/useFacilityDashboardSu
 import { useSurveillanceData } from '../../hooks/useSurveillanceData';
 import EmptyState from '../empty-state/empty-state-log.components';
 import { InlineLoading } from '@carbon/react';
+import BaseCumulativeProgressTrackingChart from './base-cumulative-progress-tracking-chart.component';
+import BaseProgressTrackingChart from './base-progress-tracking-chart.component';
 type HEIFinalOutcomesChartProps = {
   startDate?: Date;
   endDate?: Date;
@@ -14,26 +16,87 @@ type HEIFinalOutcomesChartProps = {
 
 const HEIFinalOutcomesChart: React.FC<HEIFinalOutcomesChartProps> = ({ startDate, endDate }) => {
   const { t } = useTranslation();
-  const { error, isLoading, surveillanceSummary } = useFacilityDashboardSurveillance(startDate, endDate);
-
-  const heiFinalOutcomesValue = useSurveillanceData(
+  const {
+    error,
+    isLoading,
     surveillanceSummary,
-    'getMonthlyHei24MonthsWithoutDocumentedOutcome',
+    getCompletedPercentage,
+    getPendingPercentage,
+    getThirtydaysRunninPercentage,
+    getThirtydaysRunninPendingPercentage,
+  } = useFacilityDashboardSurveillance(startDate, endDate);
+
+  const cumulativeHeiFinalOutcomesData = {
+    data: [
+      {
+        group: 'Completed',
+        value: getCompletedPercentage(
+          surveillanceSummary?.getHei24MonthsWithoutDocumentedOutcome,
+          surveillanceSummary?.getHei24MonthsOld,
+        ),
+      },
+      {
+        group: 'Pending',
+        value: getPendingPercentage(
+          surveillanceSummary?.getHei24MonthsWithoutDocumentedOutcome,
+          surveillanceSummary?.getHei24MonthsOld,
+        ),
+      },
+    ],
+  };
+
+  const thirtyDaysrunningData = getThirtydaysRunninPercentage(
+    surveillanceSummary?.getMonthlyHei24MonthsOld.data,
+    surveillanceSummary?.getMonthlyHei24MonthsWithoutDocumentedOutcome.data,
   );
+
+  const lineGraphData = getThirtydaysRunninPendingPercentage(
+    surveillanceSummary?.getMonthlyHei24MonthsOld.data,
+    surveillanceSummary?.getMonthlyHei24MonthsWithoutDocumentedOutcome.data,
+  );
+
+  if (error) {
+    return <EmptyState subTitle={t('errorLoadingData', 'Error loading data')} />;
+  }
   return (
-    <div className={styles.chart}>
-      {isLoading ? (
-        <InlineLoading status="active" iconDescription="Loading" description="Loading data..." />
-      ) : heiFinalOutcomesValue.length > 0 ? (
-        <BaseIndicatorTrendChart
-          data={heiFinalOutcomesValue}
-          title={t('heiFinalOutcomes', 'Undocumented final outcome')}
-          yAxisTitle={t('numberHEIOutcome', 'Number of undocumented final outcome')}
-        />
-      ) : (
-        <EmptyState subTitle={t('noheiFinalOutcomes', 'No undocumented final outcome data to display')} />
-      )}
-    </div>
+    <>
+      <div className={styles.chart}>
+        {isLoading ? (
+          <InlineLoading status="active" iconDescription="Loading" description="Loading data..." />
+        ) : lineGraphData.length > 0 ? (
+          <BaseIndicatorTrendChart
+            data={lineGraphData}
+            title={t('heiFinalOutcomes', 'Undocumented final outcome')}
+            yAxisTitle={t('percentageHEIOutcome', '% undocumented final outcome')}
+          />
+        ) : (
+          <EmptyState subTitle={t('noheiFinalOutcomes', 'No undocumented final outcome data to display')} />
+        )}
+      </div>
+      <div className={styles.chart}>
+        {thirtyDaysrunningData.length > 0 ? (
+          <BaseProgressTrackingChart
+            data={thirtyDaysrunningData}
+            stackTitle={t('progressInAddressingHEIFinalOutcome', 'Progress in addressing HEI final Outcome')}
+            leftAxiTtitle={t('percentageHEIFinalOutcome', '% HEI final outcome')}
+          />
+        ) : (
+          <EmptyState subTitle={t('noHEIFinalOutcome', 'No HEI final outcome data to display')} />
+        )}
+      </div>
+      <div className={styles.chart}>
+        {surveillanceSummary?.getHei24MonthsOld > 0 ? (
+          <div className={styles.cumulativeChart}>
+            <BaseCumulativeProgressTrackingChart
+              data={cumulativeHeiFinalOutcomesData}
+              title={t('cumulativeProgressHeiFinalOutcomes', 'Cumulative progress in addressing HEI final outcome')}
+            />
+          </div>
+        ) : (
+          <EmptyState subTitle={t('noheiFinalOutcomes', 'No undocumented final outcome data to display')} />
+        )}
+      </div>
+    </>
   );
 };