@kenyaemr/esm-facility-dashboard-app 5.4.1-pre.2021 → 5.4.1-pre.2027

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.2021"}
+{"$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.2027"}

package/package.json

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

package/src/constants.ts

@@ -20,22 +20,6 @@ export const formatNewDate = (date: Date | null | undefined) => {
   return date ? new Date(date) : '';
 };
 
-// Generate Dammy dates
-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/surveillance/charts/delayed-eac-charts.component.tsx

@@ -1,10 +1,12 @@
 import '@carbon/charts/styles.css';
-import React, { useMemo } from 'react';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 import BaseIndicatorTrendChart from './base-indicator-trend-chart.component';
-import BaseProgressTrackingChart from './base-progress-tracking-chart.component';
-import { getNumberOfDays, sevenDaysRunningDates } from '../../constants';
 import styles from './charts.scss';
+import EmptyState from '../empty-state/empty-state-log.components';
+import useFacilityDashboardSurveillance from '../../hooks/useFacilityDashboardSurveillance';
+import { useSurveillanceData } from '../../hooks/useSurveillanceData';
+import { InlineLoading } from '@carbon/react';
 type DelayedEACChartsProps = {
   startDate?: Date;
   endDate?: Date;
@@ -12,40 +14,23 @@ type DelayedEACChartsProps = {
 
 const DelayedEACCharts: React.FC<DelayedEACChartsProps> = ({ startDate, endDate }) => {
   const { t } = useTranslation();
-  const generateRandomData = (numRecords: number) => {
-    return Array.from({ length: numRecords }, (_, i) => ({
-      day: sevenDaysRunningDates(i, endDate),
-      value: Math.floor(Math.random() * 50),
-    }));
-  };
+  const { error, isLoading, surveillanceSummary } = useFacilityDashboardSurveillance(startDate, endDate);
 
-  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, endDate),
-        value: Math.floor(Math.random() * 50),
-      });
-      data.push({
-        group: 'Completed',
-        key: sevenDaysRunningDates(i, endDate),
-        value: Math.floor(Math.random() * 50),
-      });
-    }
-    return data;
-  };
-
-  const data = useMemo(() => generateRandomDataProgress(numberSequence), [numberSequence, startDate, endDate]);
-  const values = useMemo(() => generateRandomData(numberSequence), [numberSequence, startDate, endDate]);
+  const delayedEACValue = useSurveillanceData(surveillanceSummary, 'getMonthlyVirallyUnsuppressedWithoutEAC');
   return (
-    <BaseIndicatorTrendChart
-      data={values}
-      title={t('delayedEAC', 'Delayed enhanced adherence counselling')}
-      yAxisTitle={t('percentageDelatedEAC', '% Delayed EAC')}
-    />
+    <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>
   );
 };
 

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

@@ -1,49 +1,35 @@
 import '@carbon/charts/styles.css';
-import React, { useMemo } from 'react';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 import BaseIndicatorTrendChart from './base-indicator-trend-chart.component';
-import BaseProgressTrackingChart from './base-progress-tracking-chart.component';
-import { getNumberOfDays, sevenDaysRunningDates } from '../../constants';
 import styles from './charts.scss';
+import useFacilityDashboardSurveillance from '../../hooks/useFacilityDashboardSurveillance';
+import { useSurveillanceData } from '../../hooks/useSurveillanceData';
+import EmptyState from '../empty-state/empty-state-log.components';
+import { InlineLoading } from '@carbon/react';
 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) => ({
-      day: sevenDaysRunningDates(i, endDate),
-      value: Math.floor(Math.random() * 50),
-    }));
-  };
+  const { error, isLoading, surveillanceSummary } = useFacilityDashboardSurveillance(startDate, endDate);
 
-  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, endDate),
-        value: Math.floor(Math.random() * 50),
-      });
-      data.push({
-        group: 'Completed',
-        key: sevenDaysRunningDates(i, endDate),
-        value: Math.floor(Math.random() * 50),
-      });
-    }
-    return data;
-  };
-
-  const data = useMemo(() => generateRandomDataProgress(numberSequence), [numberSequence, startDate, endDate]);
-  const values = useMemo(() => generateRandomData(numberSequence), [numberSequence, startDate, endDate]);
+  const PendingPCRDNAResultsValue = useSurveillanceData(surveillanceSummary, 'getMonthlyHeiDNAPCRPending');
   return (
-    <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')}
-    />
+    <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>
   );
 };
 

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

@@ -1,10 +1,12 @@
 import '@carbon/charts/styles.css';
-import React, { useMemo } from 'react';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 import BaseIndicatorTrendChart from './base-indicator-trend-chart.component';
-import BaseProgressTrackingChart from './base-progress-tracking-chart.component';
-import { getNumberOfDays, sevenDaysRunningDates } from '../../constants';
 import styles from './charts.scss';
+import useFacilityDashboardSurveillance from '../../hooks/useFacilityDashboardSurveillance';
+import { useSurveillanceData } from '../../hooks/useSurveillanceData';
+import EmptyState from '../empty-state/empty-state-log.components';
+import { InlineLoading } from '@carbon/react';
 type HEIFinalOutcomesChartProps = {
   startDate?: Date;
   endDate?: Date;
@@ -12,40 +14,26 @@ type HEIFinalOutcomesChartProps = {
 
 const HEIFinalOutcomesChart: React.FC<HEIFinalOutcomesChartProps> = ({ startDate, endDate }) => {
   const { t } = useTranslation();
-  const generateRandomData = (numRecords: number) => {
-    return Array.from({ length: numRecords }, (_, i) => ({
-      day: sevenDaysRunningDates(i),
-      value: Math.floor(Math.random() * 50),
-    }));
-  };
+  const { error, isLoading, surveillanceSummary } = useFacilityDashboardSurveillance(startDate, endDate);
 
-  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, endDate),
-        value: Math.floor(Math.random() * 50),
-      });
-      data.push({
-        group: 'Completed',
-        key: sevenDaysRunningDates(i, endDate),
-        value: Math.floor(Math.random() * 50),
-      });
-    }
-    return data;
-  };
-
-  const data = useMemo(() => generateRandomDataProgress(numberSequence), [numberSequence, startDate, endDate]);
-  const values = useMemo(() => generateRandomData(numberSequence), [numberSequence, startDate, endDate]);
+  const heiFinalOutcomesValue = useSurveillanceData(
+    surveillanceSummary,
+    'getMonthlyHei24MonthsWithoutDocumentedOutcome',
+  );
   return (
-    <BaseIndicatorTrendChart
-      data={values}
-      title={t('heiFinalOutcomes', 'Undocumented final outcome')}
-      yAxisTitle={t('percentageHEIOutcome', '% of Undocumented final outcome')}
-    />
+    <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>
   );
 };
 

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

@@ -7,6 +7,7 @@ import useFacilityDashboardSurveillance from '../../hooks/useFacilityDashboardSu
 import { useSurveillanceData } from '../../hooks/useSurveillanceData';
 import EmptyState from '../empty-state/empty-state-log.components';
 import styles from './charts.scss';
+import { InlineLoading } from '@carbon/react';
 type HIVPositiveNotLinkedToARTProps = {
   startDate?: Date;
   endDate?: Date;
@@ -24,26 +25,32 @@ const HIVPositiveNotLinkedToART: React.FC<HIVPositiveNotLinkedToARTProps> = ({ s
   );
 
   return (
-    <>
-      <div className={styles.chart}>
-        {hivPositivePatientValue.length > 0 ? (
-          <BaseIndicatorTrendChart
-            data={hivPositivePatientValue}
-            title={t('hivPositiveNotLinkedToART', 'HIV +VE Not linked to ART')}
-            yAxisTitle={t('numberTestedPositiveNotLinked', 'Number tested positive not linked')}
-          />
-        ) : (
-          <EmptyState subTitle={t('noHivPositiveNotLinked', 'No HIV +VE Not linked to ART data to display')} />
-        )}
-      </div>
-      <div className={styles.chart}>
-        {monthlyHivPositivePatientData.length > 0 ? (
-          <BaseArtProgressTrackingChart data={monthlyHivPositivePatientData} />
-        ) : (
-          <EmptyState subTitle={'No Linkage to ART data to display'} />
-        )}
-      </div>
-    </>
+    <div>
+      {isLoading ? (
+        <InlineLoading status="active" iconDescription="Loading" description="Loading data..." />
+      ) : (
+        <>
+          <div className={styles.chart}>
+            {hivPositivePatientValue.length > 0 ? (
+              <BaseIndicatorTrendChart
+                data={hivPositivePatientValue}
+                title={t('hivPositiveNotLinkedToART', 'HIV +VE Not linked to ART')}
+                yAxisTitle={t('numberTestedPositiveNotLinked', 'Number tested positive not linked')}
+              />
+            ) : (
+              <EmptyState subTitle={t('noHivPositiveNotLinked', 'No HIV +VE Not linked to ART data to display')} />
+            )}
+          </div>
+          <div className={styles.chart}>
+            {monthlyHivPositivePatientData.length > 0 ? (
+              <BaseArtProgressTrackingChart data={monthlyHivPositivePatientData} />
+            ) : (
+              <EmptyState subTitle={'No Linkage to ART data to display'} />
+            )}
+          </div>
+        </>
+      )}
+    </div>
   );
 };
 

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

@@ -1,50 +1,34 @@
-import '@carbon/charts/styles.css';
-import React, { useMemo } from 'react';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 import BaseIndicatorTrendChart from './base-indicator-trend-chart.component';
-import BaseProgressTrackingChart from './base-progress-tracking-chart.component';
-import { getNumberOfDays, sevenDaysRunningDates } from '../../constants';
 import styles from './charts.scss';
+import useFacilityDashboardSurveillance from '../../hooks/useFacilityDashboardSurveillance';
+import { useSurveillanceData } from '../../hooks/useSurveillanceData';
+import EmptyState from '../empty-state/empty-state-log.components';
+import { InlineLoading } from '@carbon/react';
 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) => ({
-      day: sevenDaysRunningDates(i, endDate),
-      value: Math.floor(Math.random() * 50),
-    }));
-  };
+  const { error, isLoading, surveillanceSummary } = useFacilityDashboardSurveillance(startDate, endDate);
 
-  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, endDate),
-        value: Math.floor(Math.random() * 50),
-      });
-      data.push({
-        group: 'Completed',
-        key: sevenDaysRunningDates(i, endDate),
-        value: Math.floor(Math.random() * 50),
-      });
-    }
-    return data;
-  };
-
-  const data = useMemo(() => generateRandomDataProgress(numberSequence), [numberSequence, startDate, endDate]);
-  const values = useMemo(() => generateRandomData(numberSequence), [numberSequence, startDate, endDate]);
+  const missedoppotunityVLValue = useSurveillanceData(surveillanceSummary, 'getMonthlyEligibleForVlSampleNotTaken');
   return (
-    <BaseIndicatorTrendChart
-      data={values}
-      title={t('missedoppotunityVL', 'Missed opportunity in viral load testing')}
-      yAxisTitle={t('percentageMissedVL', '% of missed opportunity VL')}
-    />
+    <div className={styles.chart}>
+      {isLoading ? (
+        <InlineLoading status="active" iconDescription="Loading" description="Loading data..." />
+      ) : missedoppotunityVLValue.length > 0 ? (
+        <BaseIndicatorTrendChart
+          data={missedoppotunityVLValue}
+          title={t('missedoppotunityVL', 'Missed opportunity in viral load testing')}
+          yAxisTitle={t('numberMissedVL', 'Number of missed opportunity VL')}
+        />
+      ) : (
+        <EmptyState subTitle={t('nomissedoppotunityVL', 'No missed opportunity VL data to display')} />
+      )}
+    </div>
   );
 };
 

package/src/surveillance/charts/pbfw-not-in-prep.component.tsx

@@ -7,6 +7,7 @@ import useFacilityDashboardSurveillance from '../../hooks/useFacilityDashboardSu
 import { useSurveillanceData } from '../../hooks/useSurveillanceData';
 import EmptyState from '../empty-state/empty-state-log.components';
 import styles from './charts.scss';
+import { InlineLoading } from '@carbon/react';
 
 type PBFWNotInPrepProps = {
   startDate?: Date;
@@ -23,26 +24,32 @@ const PBFWNotInPrep: React.FC<PBFWNotInPrepProps> = ({ startDate, endDate }) =>
   );
 
   return (
-    <>
-      <div className={styles.chart}>
-        {highRiskPBFWNotOnPrepValue.length > 0 ? (
-          <BaseIndicatorTrendChart
-            data={highRiskPBFWNotOnPrepValue}
-            title={t('prepNotlinked', 'High risk +ve PBFW not on PrEP')}
-            yAxisTitle={t('numberHightRiskPBFW', 'Number of High risk PBFW Not on PrEP')}
-          />
-        ) : (
-          <EmptyState subTitle={t('noHighRiskPBFW', 'No High risk PBFW Not on PrEP data to display')} />
-        )}
-      </div>
-      <div>
-        {monthlyhighRiskPBFWNotOnPrepPatientData.length > 0 ? (
-          <BaseProgressTrackingChart data={monthlyhighRiskPBFWNotOnPrepPatientData} />
-        ) : (
-          <EmptyState subTitle={t('noHighRiskPBFW', 'No High risk PBFW Not on PrEP data to display')} />
-        )}
-      </div>
-    </>
+    <div>
+      {isLoading ? (
+        <InlineLoading status="active" iconDescription="Loading" description="Loading data..." />
+      ) : (
+        <>
+          <div className={styles.chart}>
+            {highRiskPBFWNotOnPrepValue.length > 0 ? (
+              <BaseIndicatorTrendChart
+                data={highRiskPBFWNotOnPrepValue}
+                title={t('prepNotlinked', 'High risk +ve PBFW not on PrEP')}
+                yAxisTitle={t('numberHightRiskPBFW', 'Number of High risk PBFW Not on PrEP')}
+              />
+            ) : (
+              <EmptyState subTitle={t('noHighRiskPBFW', 'No High risk PBFW Not on PrEP data to display')} />
+            )}
+          </div>
+          <div className={styles.chart}>
+            {monthlyhighRiskPBFWNotOnPrepPatientData.length > 0 ? (
+              <BaseProgressTrackingChart data={monthlyhighRiskPBFWNotOnPrepPatientData} />
+            ) : (
+              <EmptyState subTitle={t('noHighRiskPBFW', 'No High risk PBFW Not on PrEP data to display')} />
+            )}
+          </div>
+        </>
+      )}
+    </div>
   );
 };
 

package/src/types/index.ts

@@ -17,6 +17,10 @@ export type SurveillanceSummary = {
   getMonthlyHivPositiveNotLinkedPatients: HivPositiveNotLinkedData;
   getMonthlyHighRiskPBFWNotOnPrep: HivPositiveNotLinkedData;
   getMonthlyHighRiskPBFWNotOnPrepPatients: HivPositiveNotLinkedData;
+  getMonthlyHeiDNAPCRPending: HivPositiveNotLinkedData;
+  getMonthlyEligibleForVlSampleNotTaken: HivPositiveNotLinkedData;
+  getMonthlyHei24MonthsWithoutDocumentedOutcome: HivPositiveNotLinkedData;
+  getMonthlyVirallyUnsuppressedWithoutEAC: HivPositiveNotLinkedData;
 };
 
 export type IndicationMode = 'decreasing' | 'increasing';

package/translations/en.json

@@ -23,11 +23,11 @@
   "numberHivPositive": "Number HIV positive",
   "numberTestedPositiveNotLinked": "Number tested positive not linked",
   "pbfwNotLinked": "High risk -ve PBFW Not linked to PrEP",
-  "percentage": "Percentage",
-  "percentageDelatedEAC": "% Delayed EAC",
-  "percentageHEIOutcome": "% of Undocumented final outcome",
-  "percentageMissedVL": "% of missed opportunity VL",
-  "percentagePendingPCRDNAResults": "% of HEI (6-8 weeks) without DNA-PCR Results",
+  "numberOfPatients": "Number of Patients",
+  "numberDelayedEAC": "Number Delayed EAC",
+  "numberHEIOutcome": "Number of Undocumented final outcome",
+  "numberMissedVL": "Number of missed opportunity VL",
+  "numberOfPendingPCRDNAResults": "Number of HEI (6-8 weeks) without DNA-PCR Results",
   "prepNotlinked": "High risk -ve PBFW not on PrEP",
   "progressInAddressingLinkedToArt": "Progress in addressing Linkage to ART",
   "progresstracking": "Progress tracking",
@@ -35,5 +35,8 @@
   "surveillance": "Surveillance",
   "surveillanceSummary": "Surveillance Summary",
   "viewOnSuperset": "View on Superset",
-  "virallyUnSuppressedWithoutAdherenceCounselingFor2Weeks": "Virally Unsuppressed clients without enhanced adherence counseling (EAC) within 2 weeks"
+  "virallyUnSuppressedWithoutAdherenceCounselingFor2Weeks": "Virally Unsuppressed clients without enhanced adherence counseling (EAC) within 2 weeks",
+  "noheiFinalOutcomes": "No Undocumented final outcome data to display",
+  "noPendingPCRDNAResults": "No PendingPCRDNAResults data to display",
+  "noDelayedEAC": "No Delayed EAC data to display"
 }