@kenyaemr/esm-facility-dashboard-app 5.4.1-pre.1976 → 5.4.1-pre.1978

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.1976"}
+{"$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.1978"}

package/package.json

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

package/src/surveillance/charts/charts.scss

@@ -5,3 +5,6 @@
 .chartContainer {
   padding: layout.$spacing-05;
 }
+.chart {
+  margin-top: layout.$spacing-05;
+}

package/src/surveillance/charts/hiv-not-linked-to-art.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 BaseArtProgressTrackingChart from './base-art-progress-tracking-chart.component';
 import useFacilityDashboardSurveillance from '../../hooks/useFacilityDashboardSurveillance';
 import { useSurveillanceData } from '../../hooks/useSurveillanceData';
+import EmptyState from '../empty-state/empty-state-log.components';
+import styles from './charts.scss';
 type HIVPositiveNotLinkedToARTProps = {
   startDate?: Date;
   endDate?: Date;
@@ -23,12 +25,24 @@ const HIVPositiveNotLinkedToART: React.FC<HIVPositiveNotLinkedToARTProps> = ({ s
 
   return (
     <>
-      <BaseIndicatorTrendChart
-        data={hivPositivePatientValue}
-        title={t('hivPositiveNotLinkedToART', 'HIV +VE Not linked to ART')}
-        yAxisTitle={t('numberTestedPositiveNotLinked', 'no tested positive not linked')}
-      />
-      <BaseArtProgressTrackingChart data={monthlyHivPositivePatientData} />
+      <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>
     </>
   );
 };

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

@@ -1,9 +1,11 @@
 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 useFacilityDashboardSurveillance from '../../hooks/useFacilityDashboardSurveillance';
+import { useSurveillanceData } from '../../hooks/useSurveillanceData';
+import EmptyState from '../empty-state/empty-state-log.components';
 import styles from './charts.scss';
 
 type PBFWNotInPrepProps = {
@@ -12,42 +14,34 @@ type PBFWNotInPrepProps = {
 };
 const PBFWNotInPrep: React.FC<PBFWNotInPrepProps> = ({ 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 highRiskPBFWNotOnPrepValue = useSurveillanceData(surveillanceSummary, 'getMonthlyHighRiskPBFWNotOnPrep');
 
-  const numberSequence = useMemo(() => Math.max(1, getNumberOfDays(startDate, endDate)), [startDate, endDate]);
-
-  const generateRandomDataForProgress = (numRecords: number) => {
-    const data = [];
-    for (let i = 1; i <= numRecords; i++) {
-      data.push({
-        group: 'Declined',
-        key: sevenDaysRunningDates(i, endDate),
-        value: Math.floor(Math.random() * 50),
-      });
-      data.push({
-        group: 'StartedPrEP',
-        key: sevenDaysRunningDates(i, endDate),
-        value: Math.floor(Math.random() * 50),
-      });
-    }
-    return data;
-  };
+  const monthlyhighRiskPBFWNotOnPrepPatientData = useSurveillanceData(
+    surveillanceSummary,
+    'getMonthlyHighRiskPBFWNotOnPrepPatients',
+  );
 
-  const data = useMemo(() => generateRandomDataForProgress(numberSequence), [numberSequence, startDate, endDate]);
-  const values = useMemo(() => generateRandomData(numberSequence), [numberSequence, startDate, endDate]);
   return (
     <>
-      <BaseIndicatorTrendChart
-        data={values}
-        title={t('prepNotlinked', 'High risk +ve PBFW not on PrEP')}
-        yAxisTitle={t('percentageHightRiskPBFW', '% High risk PBFW Not in PrEP')}
-      />
-      <BaseProgressTrackingChart data={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>
+        {monthlyhighRiskPBFWNotOnPrepPatientData.length > 0 ? (
+          <BaseProgressTrackingChart data={monthlyhighRiskPBFWNotOnPrepPatientData} />
+        ) : (
+          <EmptyState subTitle={t('noHighRiskPBFW', 'No High risk PBFW Not on PrEP data to display')} />
+        )}
+      </div>
     </>
   );
 };

package/src/surveillance/empty-state/empty-state-log.components.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import styles from './empty-state-log.scss';
+import { DataEnrichment } from '@carbon/react/icons';
+import { EmptyDataIllustration } from '@openmrs/esm-patient-common-lib';
+
+interface EmptyStateProps {
+  subTitle: string;
+}
+
+const EmptyState: React.FC<EmptyStateProps> = ({ subTitle }) => {
+  return (
+    <div className={styles.emptyStateContainer}>
+      <EmptyDataIllustration />
+      <p className={styles.subTitle}>{subTitle}</p>
+    </div>
+  );
+};
+
+export default EmptyState;

package/src/surveillance/empty-state/empty-state-log.scss

@@ -0,0 +1,28 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.emptyStateContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 300px;
+  background-color: colors.$gray-10;
+  row-gap: layout.$spacing-02;
+
+  & form {
+    border: none;
+  }
+  .subTitle {
+    @include type.type-style('body-compact-01');
+    color: colors.$cool-gray-70;
+    margin-top: layout.$spacing-04;
+  }
+}
+
+svg.iconOverrides {
+  width: layout.$spacing-11;
+  height: layout.$spacing-11;
+  fill: var(--brand-03);
+}

package/src/surveillance/empty-state/empty-state-log.test.tsx

@@ -0,0 +1,24 @@
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { EmptyDataIllustration } from '@openmrs/esm-patient-common-lib';
+import EmptyState from './empty-state-log.components';
+import React from 'react';
+
+// Mock the EmptyDataIllustration component
+jest.mock('@openmrs/esm-patient-common-lib', () => ({
+  EmptyDataIllustration: jest.fn(() => <div>Mocked EmptyDataIllustration</div>),
+}));
+
+describe('EmptyState', () => {
+  it('renders the EmptyState component with the given subtitle', () => {
+    const testSubtitle = 'No data available';
+
+    render(<EmptyState subTitle={testSubtitle} />);
+
+    const subtitleElement = screen.getByText(testSubtitle);
+    expect(subtitleElement).toBeInTheDocument();
+
+    const illustrationElement = screen.getByText('Mocked EmptyDataIllustration');
+    expect(illustrationElement).toBeInTheDocument();
+  });
+});

package/src/types/index.ts

@@ -15,6 +15,8 @@ export type SurveillanceSummary = {
   heiClinicalActionThreshold: number;
   getMonthlyHivPositiveNotLinked: HivPositiveNotLinkedData;
   getMonthlyHivPositiveNotLinkedPatients: HivPositiveNotLinkedData;
+  getMonthlyHighRiskPBFWNotOnPrep: HivPositiveNotLinkedData;
+  getMonthlyHighRiskPBFWNotOnPrepPatients: HivPositiveNotLinkedData;
 };
 
 export type IndicationMode = 'decreasing' | 'increasing';

package/translations/en.json

@@ -1,11 +1,11 @@
 {
   "aboveSiteDashboard": "Above site facility Dashboard",
   "aboveSiteFacilityDashboard": "Above site facility Dashboard",
+  "day": "Day",
   "days": "Days",
   "delayedEAC": "Delayed enhanced adherence counselling",
   "delayedVLTesting": "Number of client on ART that visited, were eligible for VL sampling and no VL was done",
   "dnapcrPending": "HEI (6-8 weeks) without DNA-PCR Results",
-  "durationInDays": "Duration in days",
   "endDate": "End date",
   "facilitydashboard": "Facility Dashboard",
   "facilitydashboardLeftPannel": "facility Dashboard Left Panel",
@@ -17,16 +17,17 @@
   "hivPositiveNotLinkedToART": "HIV +VE Not linked to ART",
   "indicator": "Indicator",
   "missedoppotunityVL": "Missed opportunity in viral load testing",
+  "numberHivPositive": "Number HIV positive",
+  "numberTestedPositiveNotLinked": "Number tested positive not linked",
   "pbfwNotLinked": "High risk -ve PBFW Not linked to PrEP",
-  "percentage": "Percentage",
+  "numberOfPatients": "Number of Patients",
   "percentageDelatedEAC": "% Delayed EAC",
   "percentageHEIOutcome": "% of Undocumented final outcome",
-  "percentageHightRiskPBFW": "% High risk PBFW Not in PrEP",
+  "numberHightRiskPBFW": "Number of High risk PBFW Not on PrEP",
   "percentageMissedVL": "% of missed opportunity VL",
   "percentagePendingPCRDNAResults": "% of HEI (6-8 weeks) without DNA-PCR Results",
-  "numberTestedPositiveNotLinked": "no tested positive not linked",
   "prepNotlinked": "High risk -ve PBFW not on PrEP",
-  "progressInAdressingLinkedToArt": "Progress in adressing Linkage to ART",
+  "progressInAddressingLinkedToArt": "Progress in addressing Linkage to ART",
   "progresstracking": "Progress tracking",
   "startDate": "Start date",
   "surveillance": "Surveillance",