@openmrs/esm-patient-vitals-app 9.2.3-pre.7164 → 9.2.3-pre.7171

package/dist/openmrs-esm-patient-vitals-app.js.buildmanifest.json

@@ -354,7 +354,7 @@
       "auxiliaryFiles": [
         "3368.js.map"
       ],
-      "hash": "6768679947a628bf",
+      "hash": "4c804e3f02159034",
       "childrenByOrder": {}
     },
     {
@@ -591,9 +591,9 @@
       "initial": false,
       "entry": false,
       "recorded": false,
-      "size": 401411,
+      "size": 396755,
       "sizes": {
-        "javascript": 401327,
+        "javascript": 396671,
         "consume-shared": 84
       },
       "names": [],
@@ -607,7 +607,7 @@
       "auxiliaryFiles": [
         "4716.js.map"
       ],
-      "hash": "92bf92b444988cf8",
+      "hash": "7c47964fe1e91ab2",
       "childrenByOrder": {}
     },
     {
@@ -954,10 +954,10 @@
       "initial": true,
       "entry": true,
       "recorded": false,
-      "size": 3355291,
+      "size": 3350635,
       "sizes": {
         "consume-shared": 294,
-        "javascript": 3332435,
+        "javascript": 3327779,
         "share-init": 378,
         "runtime": 22184
       },
@@ -974,7 +974,7 @@
       "auxiliaryFiles": [
         "main.js.map"
       ],
-      "hash": "a503db9f26df4eb2",
+      "hash": "8819b34bdf75e69a",
       "childrenByOrder": {}
     },
     {
@@ -1046,7 +1046,7 @@
       "auxiliaryFiles": [
         "8957.js.map"
       ],
-      "hash": "2c8ccc5ea1144f62",
+      "hash": "618fc8eefb88755c",
       "childrenByOrder": {}
     },
     {
@@ -1070,7 +1070,7 @@
       "auxiliaryFiles": [
         "9057.js.map"
       ],
-      "hash": "f144448d3f4a2e24",
+      "hash": "d607f95afd4e74fc",
       "childrenByOrder": {}
     },
     {

package/dist/routes.json

@@ -1 +1 @@
-{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"fhir2":">=1.2","webservices.rest":"^2.2.0"},"extensions":[{"name":"vitals-overview-widget","component":"vitalsSummary","slot":"patient-chart-summary-dashboard-slot","meta":{"fullWidth":true},"order":1},{"name":"vitals-details-widget","component":"vitalsMain","slot":"patient-chart-vitals-biometrics-dashboard-slot","meta":{"title":"Vitals","view":"vitals","fullWidth":true},"order":1},{"name":"patient-vitals-info","component":"vitalsHeader","slot":"patient-info-slot"},{"name":"biometrics-overview-widget","component":"biometricsOverview","slot":"patient-chart-summary-dashboard-slot","meta":{"fullWidth":false},"order":2},{"name":"biometrics-details-widget","component":"biometricsDetailedSummary","slot":"patient-chart-vitals-biometrics-dashboard-slot","meta":{"view":"biometrics","title":"Biometrics","fullWidth":true}},{"name":"results-summary-dashboard","component":"vitalsAndBiometricsDashboardLink","slot":"patient-chart-dashboard-slot","order":2,"meta":{"slot":"patient-chart-vitals-biometrics-dashboard-slot","path":"Vitals & Biometrics"}},{"name":"weight-tile","component":"weightTile","slot":"visit-form-header-slot","order":2}],"pages":[],"workspaces":[{"name":"patient-vitals-biometrics-form-workspace","title":"recordVitalsAndBiometrics","component":"vitalsBiometricsFormWorkspace"}],"version":"9.2.3-pre.7164"}
+{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"fhir2":">=1.2","webservices.rest":"^2.2.0"},"extensions":[{"name":"vitals-overview-widget","component":"vitalsSummary","slot":"patient-chart-summary-dashboard-slot","meta":{"fullWidth":true},"order":1},{"name":"vitals-details-widget","component":"vitalsMain","slot":"patient-chart-vitals-biometrics-dashboard-slot","meta":{"title":"Vitals","view":"vitals","fullWidth":true},"order":1},{"name":"patient-vitals-info","component":"vitalsHeader","slot":"patient-info-slot"},{"name":"biometrics-overview-widget","component":"biometricsOverview","slot":"patient-chart-summary-dashboard-slot","meta":{"fullWidth":false},"order":2},{"name":"biometrics-details-widget","component":"biometricsDetailedSummary","slot":"patient-chart-vitals-biometrics-dashboard-slot","meta":{"view":"biometrics","title":"Biometrics","fullWidth":true}},{"name":"results-summary-dashboard","component":"vitalsAndBiometricsDashboardLink","slot":"patient-chart-dashboard-slot","order":2,"meta":{"slot":"patient-chart-vitals-biometrics-dashboard-slot","path":"Vitals & Biometrics"}},{"name":"weight-tile","component":"weightTile","slot":"visit-form-header-slot","order":2}],"pages":[],"workspaces":[{"name":"patient-vitals-biometrics-form-workspace","title":"recordVitalsAndBiometrics","component":"vitalsBiometricsFormWorkspace"}],"version":"9.2.3-pre.7171"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-patient-vitals-app",
-  "version": "9.2.3-pre.7164",
+  "version": "9.2.3-pre.7171",
   "license": "MPL-2.0",
   "description": "Patient vitals microfrontend for the OpenMRS SPA",
   "browser": "dist/openmrs-esm-patient-vitals-app.js",

package/src/biometrics/biometrics-base.component.tsx

@@ -7,9 +7,9 @@ import { CardHeader, EmptyState, ErrorState, useVisitOrOfflineVisit } from '@ope
 import { launchVitalsAndBiometricsForm } from '../utils';
 import { useVitalsConceptMetadata, useVitalsAndBiometrics, withUnit } from '../common';
 import { type ConfigObject } from '../config-schema';
+import type { BiometricsTableHeader, BiometricsTableRow } from './types';
 import BiometricsChart from './biometrics-chart.component';
 import PaginatedBiometrics from './paginated-biometrics.component';
-import type { BiometricsTableHeader, BiometricsTableRow } from './types';
 import styles from './biometrics-base.scss';
 
 interface BiometricsBaseProps {
@@ -86,8 +86,14 @@ const BiometricsBase: React.FC<BiometricsBaseProps> = ({ patientUuid, pageSize,
     [biometrics],
   );
 
-  if (isLoading) return <DataTableSkeleton role="progressbar" />;
-  if (error) return <ErrorState error={error} headerTitle={headerTitle} />;
+  if (isLoading) {
+    return <DataTableSkeleton role="progressbar" />;
+  }
+
+  if (error) {
+    return <ErrorState error={error} headerTitle={headerTitle} />;
+  }
+
   if (biometrics?.length) {
     return (
       <div className={styles.widgetCard}>

package/src/biometrics/biometrics-chart.component.tsx

@@ -1,21 +1,13 @@
 import React, { useMemo, useState } from 'react';
 import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
-import { Tab, Tabs, TabList } from '@carbon/react';
-import { LineChart } from '@carbon/charts-react';
+import { Tab, TabListVertical, TabPanel, TabPanels, TabsVertical } from '@carbon/react';
+import { LineChart, ScaleTypes } from '@carbon/charts-react';
 import { formatDate, parseDate } from '@openmrs/esm-framework';
 import { type ConfigObject } from '../config-schema';
 import { type PatientVitalsAndBiometrics } from '../common';
 import styles from './biometrics-chart.scss';
 
-enum ScaleTypes {
-  LABELS = 'labels',
-  LABELS_RATIO = 'labels-ratio',
-  LINEAR = 'linear',
-  LOG = 'log',
-  TIME = 'time',
-}
-
 interface BiometricsChartProps {
   conceptUnits: Map<string, string>;
   config: ConfigObject;
@@ -23,9 +15,9 @@ interface BiometricsChartProps {
 }
 
 interface BiometricChartData {
+  groupName: 'Weight' | 'Height' | 'Body mass index' | string;
   title: string;
   value: number | string;
-  groupName: 'Weight' | 'Height' | 'Body mass index' | string;
 }
 
 const chartColors = { weight: '#6929c4', height: '#6929c4', bmi: '#6929c4' };
@@ -39,23 +31,40 @@ const BiometricsChart: React.FC<BiometricsChartProps> = ({ patientBiometrics, co
     groupName: 'weight',
   });
 
+  const biometrics = [
+    {
+      id: 'weight',
+      title: `${t('weight', 'Weight')} (${conceptUnits.get(config.concepts.weightUuid) ?? ''})`,
+      value: 'weight',
+    },
+    {
+      id: 'height',
+      title: `${t('height', 'Height')} (${conceptUnits.get(config.concepts.heightUuid) ?? ''})`,
+      value: 'height',
+    },
+    {
+      id: 'bmi',
+      title: `${t('bmi', 'BMI')} (${bmiUnit})`,
+      value: 'bmi',
+    },
+  ];
+
   const chartData = useMemo(
     () =>
       patientBiometrics
         .filter((biometrics) => biometrics[selectedBiometrics.value])
-        .splice(0, 10)
+        .slice(0, 10)
         .sort((biometricA, biometricB) => new Date(biometricA.date).getTime() - new Date(biometricB.date).getTime())
-        .map((biometric) => {
-          return (
-            biometric[selectedBiometrics.value] && {
-              group: selectedBiometrics.groupName,
-              key: formatDate(new Date(biometric.date), { mode: 'wide', year: false, time: false }),
-              value: biometric[selectedBiometrics.value],
-              date: biometric.date,
-            }
-          );
-        }),
-    [patientBiometrics, selectedBiometrics.groupName, selectedBiometrics.value],
+        .map(
+          (biometrics) =>
+            biometrics[selectedBiometrics.value] && {
+              group: selectedBiometrics.title,
+              key: formatDate(new Date(biometrics.date), { mode: 'wide', year: false, time: false }),
+              value: biometrics[selectedBiometrics.value],
+              date: biometrics.date,
+            },
+        ),
+    [patientBiometrics, selectedBiometrics.title, selectedBiometrics.value],
   );
 
   const chartOptions = useMemo(() => {
@@ -78,7 +87,9 @@ const BiometricsChart: React.FC<BiometricsChartProps> = ({ patientBiometrics, co
         enabled: false,
       },
       color: {
-        scale: chartColors,
+        scale: {
+          [selectedBiometrics.title]: '#6929c4',
+        },
       },
       tooltip: {
         customHTML: ([{ value, date }]) =>
@@ -98,40 +109,35 @@ const BiometricsChart: React.FC<BiometricsChartProps> = ({ patientBiometrics, co
         <label className={styles.biometricLabel} htmlFor="biometrics-chart-radio-group">
           {t('biometricDisplayed', 'Biometric displayed')}
         </label>
-        <Tabs className={styles.verticalTabs}>
-          <TabList className={styles.tablist} aria-label="Biometrics tabs">
-            {[
-              {
-                id: 'weight',
-                label: `${t('weight', 'Weight')} (${conceptUnits.get(config.concepts.weightUuid) ?? ''})`,
-              },
-              {
-                id: 'height',
-                label: `${t('height', 'Height')} (${conceptUnits.get(config.concepts.heightUuid) ?? ''})`,
-              },
-              { id: 'bmi', label: `${t('bmi', 'BMI')} (${bmiUnit})` },
-            ].map(({ id, label }) => (
+        <TabsVertical>
+          <TabListVertical aria-label="Biometrics tabs">
+            {biometrics.map(({ id, title, value }) => (
               <Tab
                 className={classNames(styles.tab, styles.bodyLong01, {
-                  [styles.selectedTab]: selectedBiometrics.title === label,
+                  [styles.selectedTab]: selectedBiometrics.title === title,
                 })}
+                id={`${id}-tab`}
                 key={id}
                 onClick={() =>
                   setSelectedBiometrics({
-                    title: label,
-                    value: id,
+                    title: title,
+                    value: value,
                     groupName: id,
                   })
                 }
               >
-                {label}
+                {title}
               </Tab>
             ))}
-          </TabList>
-        </Tabs>
-      </div>
-      <div className={styles.biometricsChartArea}>
-        <LineChart data={chartData} options={chartOptions} />
+          </TabListVertical>
+          <TabPanels>
+            {biometrics.map(({ id }) => (
+              <TabPanel key={id}>
+                <LineChart data={chartData} options={chartOptions} key={id} />
+              </TabPanel>
+            ))}
+          </TabPanels>
+        </TabsVertical>
       </div>
     </div>
   );

package/src/biometrics/biometrics-chart.scss

@@ -23,47 +23,17 @@
   padding-right: layout.$spacing-05;
 }
 
-.biometricsChartArea {
-  flex-grow: 4;
-  padding: 0 layout.$spacing-05 layout.$spacing-09;
-
-  :global(.cds--cc--layout-row) {
-    height: 0;
-  }
-
-  :global(.layout-child) {
-    margin-top: layout.$spacing-03;
-  }
-}
-
 .biometricLabel {
   @extend .label01;
   margin-bottom: layout.$spacing-05;
   display: inline-block;
 }
 
-.verticalTabs {
-  margin: layout.$spacing-05 0;
-  scroll-behavior: smooth;
-
-  > ul {
-    flex-direction: column !important;
-  }
-
-  :global(.cds--tabs--scrollable .cds--tabs--scrollable__nav-item + .cds--tabs--scrollable__nav-item) {
-    margin-left: 0;
-  }
-
-  :global(.cds--tabs--scrollable .cds--tabs--scrollable__nav-link) {
-    border-bottom: 0 !important;
-    border-left: layout.$spacing-01 solid $color-gray-30;
-  }
-}
-
 .tab {
   outline: 0;
   outline-offset: 0;
-  min-height: layout.$spacing-07;
+  min-height: layout.$spacing-07 !important;
+  block-size: layout.$spacing-05 !important;
 
   &:active,
   &:focus {
@@ -71,7 +41,7 @@
   }
 
   &[aria-selected='true'] {
-    border-left: 3px solid var(--brand-03);
+    box-shadow: inset 4px 0 0 0 var(--brand-03) !important;
     border-bottom: none;
     font-weight: 600;
     margin-left: 0 !important;
@@ -83,15 +53,3 @@
     margin-left: 0 !important;
   }
 }
-
-.tablist {
-  :global(.cds--tab--list) {
-    flex-direction: column;
-    max-height: fit-content;
-    overflow-x: visible;
-  }
-
-  > button :global(.cds--tabs .cds--tabs__nav-link) {
-    border-bottom: none;
-  }
-}

package/src/biometrics/biometrics-overview.test.tsx

@@ -17,6 +17,22 @@ const testProps = {
 const mockUseConfig = jest.mocked(useConfig<ConfigObject>);
 const mockUseVitalsAndBiometrics = jest.mocked(useVitalsAndBiometrics);
 
+jest.mock('@carbon/charts-react', () => ({
+  LineChart: () => <div data-testid="line-chart">Line Chart</div>,
+  ScaleTypes: {
+    TIME: 'time',
+    LINEAR: 'linear',
+    LOG: 'log',
+    LABELS: 'labels',
+    LABELS_RATIO: 'labels-ratio',
+  },
+  TickRotations: {
+    ALWAYS: 'always',
+    AUTO: 'auto',
+    NEVER: 'never',
+  },
+}));
+
 jest.mock('../common', () => {
   const originalModule = jest.requireActual('../common');
 

package/src/biometrics/paginated-biometrics.component.tsx

@@ -1,7 +1,6 @@
 import React, { useMemo, useState } from 'react';
 import {
   DataTable,
-  type DataTableRow,
   Table,
   TableCell,
   TableContainer,
@@ -12,8 +11,8 @@ import {
 } from '@carbon/react';
 import { useLayoutType, usePagination } from '@openmrs/esm-framework';
 import { PatientChartPagination } from '@openmrs/esm-patient-common-lib';
-import styles from './paginated-biometrics.scss';
 import type { BiometricsTableHeader, BiometricsTableRow } from './types';
+import styles from './paginated-biometrics.scss';
 
 interface PaginatedBiometricsProps {
   tableRows: Array<BiometricsTableRow>;
@@ -73,14 +72,14 @@ const PaginatedBiometrics: React.FC<PaginatedBiometricsProps> = ({
   return (
     <>
       <DataTable
-        rows={paginatedBiometrics}
         headers={tableHeaders}
+        isSortable
+        rows={paginatedBiometrics}
         size={isTablet ? 'lg' : 'sm'}
-        useZebraStyles
         sortRow={handleSorting}
-        isSortable
+        useZebraStyles
       >
-        {({ rows, headers, getHeaderProps, getTableProps }) => (
+        {({ getHeaderProps, getTableProps, headers, rows }) => (
           <TableContainer className={styles.tableContainer}>
             <Table aria-label="biometrics" className={styles.table} {...getTableProps()}>
               <TableHead>
@@ -111,13 +110,13 @@ const PaginatedBiometrics: React.FC<PaginatedBiometricsProps> = ({
         )}
       </DataTable>
       <PatientChartPagination
-        pageNumber={currentPage}
-        totalItems={tableRows.length}
         currentItems={paginatedBiometrics.length}
-        pageSize={pageSize}
-        onPageNumberChange={({ page }) => goTo(page)}
-        dashboardLinkUrl={pageUrl}
         dashboardLinkLabel={urlLabel}
+        dashboardLinkUrl={pageUrl}
+        onPageNumberChange={({ page }) => goTo(page)}
+        pageNumber={currentPage}
+        pageSize={pageSize}
+        totalItems={tableRows.length}
       />
     </>
   );

package/src/vitals/vitals-chart.component.tsx

@@ -1,21 +1,13 @@
-import React, { useId, useMemo } from 'react';
+import React, { useId, useMemo, useState } from 'react';
 import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
-import { Tab, Tabs, TabList } from '@carbon/react';
-import { LineChart } from '@carbon/charts-react';
+import { Tab, TabListVertical, TabPanel, TabPanels, TabsVertical } from '@carbon/react';
+import { LineChart, ScaleTypes } from '@carbon/charts-react';
 import { formatDate, parseDate } from '@openmrs/esm-framework';
 import { type ConfigObject } from '../config-schema';
 import { withUnit, type PatientVitalsAndBiometrics } from '../common';
 import styles from './vitals-chart.scss';
 
-enum ScaleTypes {
-  LABELS = 'labels',
-  LABELS_RATIO = 'labels-ratio',
-  LINEAR = 'linear',
-  LOG = 'log',
-  TIME = 'time',
-}
-
 interface VitalsChartProps {
   conceptUnits: Map<string, string>;
   config: ConfigObject;
@@ -30,7 +22,7 @@ interface VitalsChartData {
 const VitalsChart: React.FC<VitalsChartProps> = ({ patientVitals, conceptUnits, config }) => {
   const { t } = useTranslation();
   const id = useId();
-  const [selectedVitalSign, setSelectedVitalsSign] = React.useState<VitalsChartData>({
+  const [selectedVitalsSign, setSelectedVitalsSign] = useState<VitalsChartData>({
     title: `${t('bp', 'BP')} (${conceptUnits.get(config.concepts.systolicBloodPressureUuid)})`,
     value: 'systolic',
   });
@@ -65,40 +57,39 @@ const VitalsChart: React.FC<VitalsChartProps> = ({ patientVitals, conceptUnits,
 
   const chartData = useMemo(() => {
     return patientVitals
-      .filter((vitals) => vitals[selectedVitalSign.value])
-      .splice(0, 10)
+      .filter((vitals) => vitals[selectedVitalsSign.value])
+      .slice(0, 10)
       .sort((vitalA, vitalB) => new Date(vitalA.date).getTime() - new Date(vitalB.date).getTime())
       .map((vitals) => {
-        if (vitals[selectedVitalSign.value]) {
-          if (['systolic', 'diastolic'].includes(selectedVitalSign.value)) {
-            return [
-              {
-                group: 'Systolic blood pressure',
-                key: formatDate(parseDate(vitals.date.toString()), { year: false }),
-                value: vitals.systolic,
-                date: vitals.date,
-              },
-              {
-                group: 'Diastolic blood pressure',
-                key: formatDate(parseDate(vitals.date.toString()), { year: false }),
-                value: vitals.diastolic,
-                date: vitals.date,
-              },
-            ];
-          } else {
-            return {
-              group: selectedVitalSign.title,
-              key: formatDate(parseDate(vitals.date.toString()), { year: false }),
-              value: vitals[selectedVitalSign.value],
+        const formattedDate = formatDate(parseDate(vitals.date.toString()), { year: false });
+
+        if (['systolic', 'diastolic'].includes(selectedVitalsSign.value)) {
+          return [
+            {
+              group: 'Systolic blood pressure',
+              key: formattedDate,
+              value: vitals.systolic,
               date: vitals.date,
-            };
-          }
+            },
+            {
+              group: 'Diastolic blood pressure',
+              key: formattedDate,
+              value: vitals.diastolic,
+              date: vitals.date,
+            },
+          ];
         }
+        return {
+          group: selectedVitalsSign.value,
+          key: formattedDate,
+          value: vitals[selectedVitalsSign.value],
+          date: vitals.date,
+        };
       });
-  }, [patientVitals, selectedVitalSign]);
+  }, [patientVitals, selectedVitalsSign]);
 
   const chartOptions = {
-    title: selectedVitalSign.title,
+    title: selectedVitalsSign.title,
     axes: {
       bottom: {
         title: t('date', 'Date'),
@@ -107,7 +98,7 @@ const VitalsChart: React.FC<VitalsChartProps> = ({ patientVitals, conceptUnits,
       },
       left: {
         mapsTo: 'value',
-        title: selectedVitalSign.title,
+        title: selectedVitalsSign.title,
         scaleType: ScaleTypes.LINEAR,
         includeZero: false,
       },
@@ -117,7 +108,7 @@ const VitalsChart: React.FC<VitalsChartProps> = ({ patientVitals, conceptUnits,
     },
     color: {
       scale: {
-        [selectedVitalSign.title]: '#6929c4',
+        [selectedVitalsSign.title]: '#6929c4',
       },
     },
     tooltip: {
@@ -136,30 +127,41 @@ const VitalsChart: React.FC<VitalsChartProps> = ({ patientVitals, conceptUnits,
         <label className={styles.vitalsSignLabel} htmlFor={`${id}-tab`}>
           {t('vitalSignDisplayed', 'Vital sign displayed')}
         </label>
-        <Tabs className={styles.verticalTabs}>
-          <TabList className={styles.tablist} aria-label="Vitals tabs">
-            {vitalSigns.map(({ id, title, value }) => {
-              return (
-                <Tab
-                  className={classNames(styles.tab, { [styles.selectedTab]: selectedVitalSign.title === title })}
-                  id={`${id}-tab`}
-                  key={id}
-                  onClick={() =>
-                    setSelectedVitalsSign({
-                      title: title,
-                      value: value,
-                    })
-                  }
-                >
-                  {title}
-                </Tab>
-              );
-            })}
-          </TabList>
-        </Tabs>
-      </div>
-      <div className={styles.vitalsChartArea}>
-        <LineChart data={chartData.flat()} options={chartOptions} />
+        <TabsVertical>
+          <TabListVertical aria-label="Vitals tabs">
+            {vitalSigns.map(({ id, title, value }) => (
+              <Tab
+                className={classNames(styles.tab, { [styles.selectedTab]: selectedVitalsSign.title === title })}
+                id={`${id}-tab`}
+                key={id}
+                onClick={() =>
+                  setSelectedVitalsSign({
+                    title: title,
+                    value: value,
+                  })
+                }
+              >
+                {title}
+              </Tab>
+            ))}
+          </TabListVertical>
+          <TabPanels>
+            {vitalSigns.map(({ id, title, value }) => (
+              <TabPanel key={id}>
+                <LineChart
+                  data={chartData
+                    .flat()
+                    .filter((data) =>
+                      value === 'systolic'
+                        ? data.group === 'Systolic blood pressure' || data.group === 'Diastolic blood pressure'
+                        : data.group === value,
+                    )}
+                  options={chartOptions}
+                />
+              </TabPanel>
+            ))}
+          </TabPanels>
+        </TabsVertical>
       </div>
     </div>
   );