@kenyaemr/esm-facility-dashboard-app 5.4.1-pre.1966 → 5.4.1-pre.1969

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.1-pre.1966"}
+{"$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.1-pre.1969"}

package/package.json

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

package/src/constants.ts

@@ -9,9 +9,7 @@ export const today = () => {
 };
 
 export const sevenDaysAgo = () => {
-  const date = today(); // Get today's date
-  date.setDate(date.getDate() - 7); // Subtract 7 days
-  return date;
+  return dayjs().subtract(7, 'day').toDate();
 };
 
 export const DATE_PICKER_CONTROL_FORMAT = 'd/m/Y';
@@ -23,13 +21,21 @@ export const formatNewDate = (date: Date | null | undefined) => {
 };
 
 // Generate Dammy dates
-export const sevenDaysRunningDates = (index: number) => {
-  const date = new Date(today());
-  date.setDate(today().getDate() - index);
-  const formattedDate = date.toISOString().split('T')[0];
-  return formattedDate;
+export const sevenDaysRunningDates = (index: number, endDate: Date = new Date()): string => {
+  const date = new Date(endDate);
+  date.setDate(date.getDate() - index);
+  return date.toISOString().split('T')[0];
 };
 
 export const formattedDate = (date: Date) => {
   return date ? dayjs(date).format(DATE_PICKER_FORMAT) : '';
 };
+
+export const getNumberOfDays = (startDate?: Date, endDate?: Date) => {
+  if (!startDate || !endDate) {
+    return 7;
+  }
+  const start = dayjs(startDate);
+  const end = dayjs(endDate);
+  return end.diff(start, 'day');
+};

package/src/hooks/useFacilityDashboardSurveillance.ts

@@ -33,7 +33,7 @@ const useFacilityDashboardSurveillance = (startDate?: Date, endDate?: Date) => {
   }, []);
 
   return {
-    surveillanceSummary: error ? null : data?.data,
+    surveillanceSummary: data?.data ?? null,
     getIndication,
     getPercentage,
     isLoading,

package/src/hooks/useSurveillanceData.ts

@@ -0,0 +1,46 @@
+import { useMemo } from 'react';
+import { SurveillanceSummary } from '../types';
+import dayjs from 'dayjs';
+
+export const useChartDomain = (
+  data: Array<{ group?: string; day: string; value: number }>,
+  valueKey = 'value',
+  minPadding = 0,
+  maxPadding = 0.1,
+) => {
+  return useMemo(() => {
+    if (!data?.length) {
+      return [0, 10];
+    }
+
+    const values = data.map((item) => item[valueKey]);
+    const minValue = Math.min(...values);
+    const maxValue = Math.max(...values, 10);
+
+    const paddedMin = Math.floor(minValue * (1 - minPadding));
+    const paddedMax = Math.ceil(maxValue * (1 + maxPadding));
+
+    return [paddedMin, paddedMax];
+  }, [data, valueKey, minPadding, maxPadding]);
+};
+
+export const useSurveillanceData = <T extends keyof SurveillanceSummary>(
+  surveillanceSummary: SurveillanceSummary | null,
+  key: T,
+) => {
+  return useMemo(() => {
+    if (!surveillanceSummary || !surveillanceSummary[key]) {
+      return [];
+    }
+
+    const data = (surveillanceSummary[key] as any)?.data || [];
+
+    return Array.isArray(data)
+      ? data
+          .filter((record) => record?.day)
+          .sort((firstSurveillanceRecord, secondSurveillanceRecord) =>
+            dayjs(firstSurveillanceRecord.day).diff(dayjs(secondSurveillanceRecord.day)),
+          )
+      : data;
+  }, [surveillanceSummary, key]);
+};

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

@@ -0,0 +1,56 @@
+import { ScaleTypes, StackedBarChart, StackedBarChartOptions } from '@carbon/charts-react';
+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; day: string; value: number }>;
+  height?: string;
+};
+
+const BaseArtProgressTrackingChart: React.FC<Props> = ({ data, height = '400px' }) => {
+  const { t } = useTranslation();
+
+  const [minValue, maxValue] = useChartDomain(data);
+
+  const options: StackedBarChartOptions = {
+    title: t('progressInAddressingLinkedToArt', 'Progress in addressing Linkage to ART'),
+    legend: {
+      enabled: true,
+    },
+    axes: {
+      bottom: {
+        title: t('day', 'Day'),
+        mapsTo: 'day',
+        scaleType: ScaleTypes.LABELS,
+      },
+      left: {
+        title: t('numberHivPositive', 'Number HIV positive'),
+        mapsTo: 'value',
+        scaleType: ScaleTypes.LINEAR,
+        domain: [minValue, maxValue],
+      },
+    },
+    color: {
+      scale: {
+        ContactedAndLinked: '#00416a', // Dark Imperial Blue
+        ContactedButNotLinked: '#c46210', // Alloy Orange
+        NotContacted: '#195905', // Lincoln Green
+      },
+    },
+    height,
+    data: {
+      groupMapsTo: 'group',
+    },
+  };
+
+  return (
+    <Layer className={styles.chartContainer}>
+      <StackedBarChart options={options} data={data} />
+    </Layer>
+  );
+};
+
+export default BaseArtProgressTrackingChart;

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

@@ -1,20 +1,23 @@
 import { LineChart, LineChartOptions, ScaleTypes } from '@carbon/charts-react';
 import '@carbon/charts/styles.css';
 import { Layer } from '@carbon/react';
-import React from 'react';
+import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import styles from './charts.scss';
+import { useChartDomain } from '../../hooks/useSurveillanceData';
 
 type Props = {
   data: Array<{
-    week: string;
-    abnomallPercentage: number;
+    day: string;
+    value: number;
   }>;
   title: string;
   yAxisTitle: string;
+  height?: string;
 };
-const BaseIndicatorTrendChart: React.FC<Props> = ({ data, title, yAxisTitle }) => {
+const BaseIndicatorTrendChart: React.FC<Props> = ({ data, title, yAxisTitle, height = '400px' }) => {
   const { t } = useTranslation();
+  const [minValue, maxValue] = useChartDomain(data);
   const options: LineChartOptions = {
     title: title,
     legend: {
@@ -23,18 +26,18 @@ const BaseIndicatorTrendChart: React.FC<Props> = ({ data, title, yAxisTitle }) =
     axes: {
       left: {
         title: yAxisTitle,
-        percentage: true,
         scaleType: ScaleTypes.LINEAR,
+        domain: [minValue, maxValue],
         includeZero: true,
-        mapsTo: 'abnomallPercentage',
+        mapsTo: 'value',
       },
       bottom: {
-        title: t('durationInDays', 'Duration in days'),
+        title: t('day', 'Day'),
         scaleType: ScaleTypes.LABELS,
-        mapsTo: 'week',
+        mapsTo: 'day',
       },
     },
-    height: '400px',
+    height,
   };
 
   return (

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

@@ -31,8 +31,8 @@ const BaseProgressTrackingChart: React.FC<Props> = ({ data }) => {
     },
     color: {
       scale: {
-        Pending: '#0000ff',
-        Completed: '#ff0000',
+        Declined: '#00416a', //Dark Imperial Blue
+        StartedPrEP: '#c46210', //Alloy Orange
       },
     },
     height: '400px',

package/src/surveillance/charts/charts.scss

@@ -5,21 +5,3 @@
 .chartContainer {
   padding: layout.$spacing-05;
 }
-
-.chartGroupContainer {
-  display: flex !important;
-  flex-flow: row wrap !important;
-}
-.tendChart {
-  flex: 50%;
-}
-
-.trackingChart {
-  flex: 50;
-}
-
-@media (max-width: 800px) {
-  .chartGroupContainer {
-    flex-direction: column;
-  }
-}

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

@@ -3,53 +3,49 @@ import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import BaseIndicatorTrendChart from './base-indicator-trend-chart.component';
 import BaseProgressTrackingChart from './base-progress-tracking-chart.component';
-import { sevenDaysRunningDates } from '../../constants';
+import { getNumberOfDays, sevenDaysRunningDates } from '../../constants';
 import styles from './charts.scss';
+type DelayedEACChartsProps = {
+  startDate?: Date;
+  endDate?: Date;
+};
 
-const DelayedEACCharts = () => {
+const DelayedEACCharts: React.FC<DelayedEACChartsProps> = ({ startDate, endDate }) => {
   const { t } = useTranslation();
   const generateRandomData = (numRecords: number) => {
     return Array.from({ length: numRecords }, (_, i) => ({
-      week: sevenDaysRunningDates(i),
-      abnomallPercentage: Math.floor(Math.random() * 50),
+      day: sevenDaysRunningDates(i, endDate),
+      value: Math.floor(Math.random() * 50),
     }));
   };
 
+  const numberSequence = useMemo(() => Math.max(1, getNumberOfDays(startDate, endDate)), [startDate, endDate]);
+
   const generateRandomDataProgress = (numRecords: number) => {
     const data = [];
     for (let i = 1; i <= numRecords; i++) {
       data.push({
         group: 'Pending',
-        key: sevenDaysRunningDates(i),
+        key: sevenDaysRunningDates(i, endDate),
         value: Math.floor(Math.random() * 50),
       });
       data.push({
         group: 'Completed',
-        key: sevenDaysRunningDates(i),
+        key: sevenDaysRunningDates(i, endDate),
         value: Math.floor(Math.random() * 50),
       });
     }
     return data;
   };
 
-  const data = useMemo(() => generateRandomDataProgress(7), []);
-
-  const values = useMemo(() => generateRandomData(7), []);
+  const data = useMemo(() => generateRandomDataProgress(numberSequence), [numberSequence, startDate, endDate]);
+  const values = useMemo(() => generateRandomData(numberSequence), [numberSequence, startDate, endDate]);
   return (
-    <>
-      <div className={styles.chartGroupContainer}>
-        <div className={styles.tendChart}>
-          <BaseIndicatorTrendChart
-            data={values}
-            title={t('delayedEAC', 'Delayed EAC')}
-            yAxisTitle={t('percentageDelatedEAC', '% Delayed EAC')}
-          />
-        </div>
-        <div className={styles.trackingChart}>
-          <BaseProgressTrackingChart data={data} />
-        </div>
-      </div>
-    </>
+    <BaseIndicatorTrendChart
+      data={values}
+      title={t('delayedEAC', 'Delayed enhanced adherence counselling')}
+      yAxisTitle={t('percentageDelatedEAC', '% Delayed EAC')}
+    />
   );
 };
 

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

@@ -3,53 +3,47 @@ import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import BaseIndicatorTrendChart from './base-indicator-trend-chart.component';
 import BaseProgressTrackingChart from './base-progress-tracking-chart.component';
-import { sevenDaysRunningDates } from '../../constants';
+import { getNumberOfDays, sevenDaysRunningDates } from '../../constants';
 import styles from './charts.scss';
-
-const DNAPCRPendingCharts = () => {
+type DNAPCRPendingChartsProps = {
+  startDate?: Date;
+  endDate?: Date;
+};
+const DNAPCRPendingCharts: React.FC<DNAPCRPendingChartsProps> = ({ startDate, endDate }) => {
   const { t } = useTranslation();
   const generateRandomData = (numRecords: number) => {
     return Array.from({ length: numRecords }, (_, i) => ({
-      week: sevenDaysRunningDates(i),
-      abnomallPercentage: Math.floor(Math.random() * 50),
+      day: sevenDaysRunningDates(i, endDate),
+      value: Math.floor(Math.random() * 50),
     }));
   };
 
+  const numberSequence = useMemo(() => Math.max(1, getNumberOfDays(startDate, endDate)), [startDate, endDate]);
   const generateRandomDataProgress = (numRecords: number) => {
     const data = [];
     for (let i = 1; i <= numRecords; i++) {
       data.push({
         group: 'Pending',
-        key: sevenDaysRunningDates(i),
+        key: sevenDaysRunningDates(i, endDate),
         value: Math.floor(Math.random() * 50),
       });
       data.push({
         group: 'Completed',
-        key: sevenDaysRunningDates(i),
+        key: sevenDaysRunningDates(i, endDate),
         value: Math.floor(Math.random() * 50),
       });
     }
     return data;
   };
 
-  const data = useMemo(() => generateRandomDataProgress(7), []);
-
-  const values = useMemo(() => generateRandomData(7), []);
+  const data = useMemo(() => generateRandomDataProgress(numberSequence), [numberSequence, startDate, endDate]);
+  const values = useMemo(() => generateRandomData(numberSequence), [numberSequence, startDate, endDate]);
   return (
-    <>
-      <div className={styles.chartGroupContainer}>
-        <div className={styles.tendChart}>
-          <BaseIndicatorTrendChart
-            data={values}
-            title={t('dnapcrPending', 'Pending DNA-PCR Results')}
-            yAxisTitle={t('percentagePendingPCRDNAResults', '% of pending PCR-DNA Results')}
-          />
-        </div>
-        <div className={styles.trackingChart}>
-          <BaseProgressTrackingChart data={data} />
-        </div>
-      </div>
-    </>
+    <BaseIndicatorTrendChart
+      data={values}
+      title={t('dnapcrPending', 'HEI (6-8 weeks) without DNA-PCR Results')}
+      yAxisTitle={t('percentagePendingPCRDNAResults', '% of HEI (6-8 weeks) without DNA-PCR Results')}
+    />
   );
 };
 

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

@@ -3,53 +3,49 @@ import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import BaseIndicatorTrendChart from './base-indicator-trend-chart.component';
 import BaseProgressTrackingChart from './base-progress-tracking-chart.component';
-import { sevenDaysRunningDates } from '../../constants';
+import { getNumberOfDays, sevenDaysRunningDates } from '../../constants';
 import styles from './charts.scss';
+type HEIFinalOutcomesChartProps = {
+  startDate?: Date;
+  endDate?: Date;
+};
 
-const HEIFinalOutcomesChart = () => {
+const HEIFinalOutcomesChart: React.FC<HEIFinalOutcomesChartProps> = ({ startDate, endDate }) => {
   const { t } = useTranslation();
   const generateRandomData = (numRecords: number) => {
     return Array.from({ length: numRecords }, (_, i) => ({
-      week: sevenDaysRunningDates(i),
-      abnomallPercentage: Math.floor(Math.random() * 50),
+      day: sevenDaysRunningDates(i),
+      value: Math.floor(Math.random() * 50),
     }));
   };
 
+  const numberSequence = useMemo(() => Math.max(0, getNumberOfDays(startDate, endDate)), [startDate, endDate]);
+
   const generateRandomDataProgress = (numRecords: number) => {
     const data = [];
     for (let i = 1; i <= numRecords; i++) {
       data.push({
         group: 'Pending',
-        key: sevenDaysRunningDates(i),
+        key: sevenDaysRunningDates(i, endDate),
         value: Math.floor(Math.random() * 50),
       });
       data.push({
         group: 'Completed',
-        key: sevenDaysRunningDates(i),
+        key: sevenDaysRunningDates(i, endDate),
         value: Math.floor(Math.random() * 50),
       });
     }
     return data;
   };
 
-  const data = useMemo(() => generateRandomDataProgress(7), []);
-
-  const values = useMemo(() => generateRandomData(7), []);
+  const data = useMemo(() => generateRandomDataProgress(numberSequence), [numberSequence, startDate, endDate]);
+  const values = useMemo(() => generateRandomData(numberSequence), [numberSequence, startDate, endDate]);
   return (
-    <>
-      <div className={styles.chartGroupContainer}>
-        <div className={styles.tendChart}>
-          <BaseIndicatorTrendChart
-            data={values}
-            title={t('heiFinalOutcomes', 'HEI Final Outcomes')}
-            yAxisTitle={t('percentageHEIOutcome', '% 24 month old HEI without documented outcomes')}
-          />
-        </div>
-        <div className={styles.trackingChart}>
-          <BaseProgressTrackingChart data={data} />
-        </div>
-      </div>
-    </>
+    <BaseIndicatorTrendChart
+      data={values}
+      title={t('heiFinalOutcomes', 'Undocumented final outcome')}
+      yAxisTitle={t('percentageHEIOutcome', '% of Undocumented final outcome')}
+    />
   );
 };
 

package/src/surveillance/charts/hiv-not-linked-to-art.component.tsx

@@ -2,54 +2,33 @@ import '@carbon/charts/styles.css';
 import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import BaseIndicatorTrendChart from './base-indicator-trend-chart.component';
-import BaseProgressTrackingChart from './base-progress-tracking-chart.component';
-import { sevenDaysRunningDates } from '../../constants';
-import styles from './charts.scss';
-const HIVPositiveNotLinkedToART = () => {
+import BaseArtProgressTrackingChart from './base-art-progress-tracking-chart.component';
+import useFacilityDashboardSurveillance from '../../hooks/useFacilityDashboardSurveillance';
+import { useSurveillanceData } from '../../hooks/useSurveillanceData';
+type HIVPositiveNotLinkedToARTProps = {
+  startDate?: Date;
+  endDate?: Date;
+};
+const HIVPositiveNotLinkedToART: React.FC<HIVPositiveNotLinkedToARTProps> = ({ startDate, endDate }) => {
   const { t } = useTranslation();
 
-  const generateRandomData = (numRecords: number) => {
-    return Array.from({ length: numRecords }, (_, i) => ({
-      week: sevenDaysRunningDates(i),
-      abnomallPercentage: Math.floor(Math.random() * 50),
-    }));
-  };
+  const { error, isLoading, surveillanceSummary } = useFacilityDashboardSurveillance(startDate, endDate);
 
-  const generateRandomDataProgress = (numRecords: number) => {
-    const data = [];
-    for (let i = 1; i <= numRecords; i++) {
-      const formattedDate = sevenDaysRunningDates(i);
-      data.push({
-        group: 'Pending',
-        key: formattedDate,
-        value: Math.floor(Math.random() * 50),
-      });
-      data.push({
-        group: 'Completed',
-        key: formattedDate,
-        value: Math.floor(Math.random() * 50),
-      });
-    }
-    return data;
-  };
+  const hivPositivePatientValue = useSurveillanceData(surveillanceSummary, 'getMonthlyHivPositiveNotLinked');
 
-  const data = useMemo(() => generateRandomDataProgress(7), []);
+  const monthlyHivPositivePatientData = useSurveillanceData(
+    surveillanceSummary,
+    'getMonthlyHivPositiveNotLinkedPatients',
+  );
 
-  const values = useMemo(() => generateRandomData(7), []);
   return (
     <>
-      <div className={styles.chartGroupContainer}>
-        <div className={styles.tendChart}>
-          <BaseIndicatorTrendChart
-            data={values}
-            title={t('hivPositiveNotLinkedToART', 'HIV +VE Not linked to ART')}
-            yAxisTitle={t('percentageTestedPositiveNotLinked', '% tested positive not linked')}
-          />
-        </div>
-        <div className={styles.trackingChart}>
-          <BaseProgressTrackingChart data={data} />
-        </div>
-      </div>
+      <BaseIndicatorTrendChart
+        data={hivPositivePatientValue}
+        title={t('hivPositiveNotLinkedToART', 'HIV +VE Not linked to ART')}
+        yAxisTitle={t('numberTestedPositiveNotLinked', 'no tested positive not linked')}
+      />
+      <BaseArtProgressTrackingChart data={monthlyHivPositivePatientData} />
     </>
   );
 };

package/src/surveillance/charts/missed-opportunity-vl-chart.component.tsx

@@ -3,53 +3,48 @@ import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import BaseIndicatorTrendChart from './base-indicator-trend-chart.component';
 import BaseProgressTrackingChart from './base-progress-tracking-chart.component';
-import { sevenDaysRunningDates } from '../../constants';
+import { getNumberOfDays, sevenDaysRunningDates } from '../../constants';
 import styles from './charts.scss';
-
-const MissedOpportunityChart = () => {
+type MissedOpportunityChartProps = {
+  startDate?: Date;
+  endDate?: Date;
+};
+const MissedOpportunityChart: React.FC<MissedOpportunityChartProps> = ({ startDate, endDate }) => {
   const { t } = useTranslation();
   const generateRandomData = (numRecords: number) => {
     return Array.from({ length: numRecords }, (_, i) => ({
-      week: sevenDaysRunningDates(i),
-      abnomallPercentage: Math.floor(Math.random() * 50),
+      day: sevenDaysRunningDates(i, endDate),
+      value: Math.floor(Math.random() * 50),
     }));
   };
 
+  const numberSequence = useMemo(() => Math.max(1, getNumberOfDays(startDate, endDate)), [startDate, endDate]);
+
   const generateRandomDataProgress = (numRecords: number) => {
     const data = [];
     for (let i = 1; i <= numRecords; i++) {
       data.push({
         group: 'Pending',
-        key: sevenDaysRunningDates(i),
+        key: sevenDaysRunningDates(i, endDate),
         value: Math.floor(Math.random() * 50),
       });
       data.push({
         group: 'Completed',
-        key: sevenDaysRunningDates(i),
+        key: sevenDaysRunningDates(i, endDate),
         value: Math.floor(Math.random() * 50),
       });
     }
     return data;
   };
 
-  const data = useMemo(() => generateRandomDataProgress(40), []);
-
-  const values = useMemo(() => generateRandomData(40), []);
+  const data = useMemo(() => generateRandomDataProgress(numberSequence), [numberSequence, startDate, endDate]);
+  const values = useMemo(() => generateRandomData(numberSequence), [numberSequence, startDate, endDate]);
   return (
-    <>
-      <div className={styles.chartGroupContainer}>
-        <div className={styles.tendChart}>
-          <BaseIndicatorTrendChart
-            data={values}
-            title={t('missedoppotunityVL', 'Missed opportunity VL')}
-            yAxisTitle={t('percentageMissedVL', '% of missed opportunity VL')}
-          />
-        </div>
-        <div className={styles.trackingChart}>
-          <BaseProgressTrackingChart data={data} />
-        </div>
-      </div>
-    </>
+    <BaseIndicatorTrendChart
+      data={values}
+      title={t('missedoppotunityVL', 'Missed opportunity in viral load testing')}
+      yAxisTitle={t('percentageMissedVL', '% of missed opportunity VL')}
+    />
   );
 };