@openmrs/esm-generic-patient-widgets-app 11.3.0 → 11.3.1-patch.9064

package/src/obs-switchable/obs-switchable.test.tsx

@@ -0,0 +1,275 @@
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { LineChart } from '@carbon/charts-react';
+import { getDefaultsFromConfigSchema, useConfig } from '@openmrs/esm-framework';
+import ObsSwitchable from './obs-switchable.component';
+import { useObs, type ObsResult } from '../resources/useObs';
+import { configSchemaSwitchable } from '../config-schema-obs-switchable';
+
+jest.mock('../resources/useObs', () => ({
+  useObs: jest.fn(),
+}));
+
+const mockLineChart = jest.mocked(LineChart);
+
+const mockUseConfig = jest.mocked(useConfig);
+
+const mockObsData = [
+  {
+    code: { text: 'Height' },
+    conceptUuid: '5090AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+    dataType: 'Number',
+    effectiveDateTime: '2021-01-01T00:00:00Z',
+    valueQuantity: { value: 180 },
+    encounter: { reference: 'Encounter/123' },
+  },
+  {
+    code: { text: 'Height' },
+    conceptUuid: '5090AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+    dataType: 'Number',
+    effectiveDateTime: '2021-02-01T00:00:00Z',
+    valueQuantity: { value: 182 },
+    encounter: { reference: 'Encounter/234' },
+  },
+  {
+    code: { text: 'Weight' },
+    conceptUuid: '2154AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+    dataType: 'Number',
+    effectiveDateTime: '2021-01-01T00:00:00Z',
+    valueQuantity: { value: 70 },
+    encounter: { reference: 'Encounter/123' },
+  },
+  {
+    code: { text: 'Weight' },
+    conceptUuid: '2154AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+    dataType: 'Number',
+    effectiveDateTime: '2021-02-01T00:00:00Z',
+    valueQuantity: { value: 72 },
+    encounter: { reference: 'Encounter/234' },
+  },
+  {
+    code: { text: 'Chief Complaint' },
+    conceptUuid: '164162AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+    dataType: 'Text',
+    effectiveDateTime: '2021-01-01T00:00:00Z',
+    valueString: 'Too strong',
+    encounter: { reference: 'Encounter/123' },
+  },
+  {
+    code: { text: 'Power Level' },
+    conceptUuid: '164163AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+    dataType: 'Number',
+    effectiveDateTime: '2021-01-01T00:00:00Z',
+    valueQuantity: { value: 9001 },
+    encounter: { reference: 'Encounter/123' },
+  },
+];
+
+const mockUseObs = jest.mocked(useObs);
+
+describe('ObsSwitchable', () => {
+  it('should render all obs in table and numeric obs in graph', async () => {
+    mockUseObs.mockReturnValue({
+      data: mockObsData as Array<ObsResult>,
+      error: null,
+      isLoading: false,
+      isValidating: false,
+    });
+    mockUseConfig.mockReturnValue({
+      ...(getDefaultsFromConfigSchema(configSchemaSwitchable) as Object),
+      title: 'My Stats',
+      data: [
+        {
+          concept: '5090AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+          label: 'Tallitude',
+        },
+        {
+          concept: '2154AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+        },
+        { concept: '164162AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA' },
+        { concept: '164163AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA' },
+      ],
+    });
+
+    render(<ObsSwitchable patientUuid="123" />);
+
+    // Check table
+    expect(screen.getAllByRole('row')).toHaveLength(3);
+    const headerRow = screen.getAllByRole('row')[0];
+    expect(headerRow).toHaveTextContent('Tallitude');
+    expect(headerRow).toHaveTextContent('Weight');
+    expect(headerRow).toHaveTextContent('Chief Complaint');
+    expect(headerRow).toHaveTextContent('Power Level');
+    const firstRow = screen.getAllByRole('row')[1];
+    expect(firstRow).toHaveTextContent('180');
+    expect(firstRow).toHaveTextContent('70');
+    expect(firstRow).toHaveTextContent('Too strong');
+    expect(firstRow).toHaveTextContent('9001');
+    const secondRow = screen.getAllByRole('row')[2];
+    expect(secondRow).toHaveTextContent('182');
+    expect(secondRow).toHaveTextContent('72');
+    expect(secondRow).toHaveTextContent('--');
+    expect(secondRow).toHaveTextContent('--');
+
+    const user = userEvent.setup();
+    const chartViewButton = screen.getByLabelText('Chart view');
+    expect(chartViewButton).toBeInTheDocument();
+    await user.click(chartViewButton);
+
+    const tabs = screen.getByLabelText('Obs tabs');
+    expect(tabs).toHaveTextContent('Tallitude');
+    expect(tabs).toHaveTextContent('Weight');
+    expect(tabs).not.toHaveTextContent('Chief Complaint');
+    expect(tabs).toHaveTextContent('Power Level');
+
+    expect(mockLineChart).toHaveBeenNthCalledWith(
+      1,
+      expect.objectContaining({
+        data: [
+          { group: 'Tallitude', key: '01-Jan-2021', value: 180 },
+          { group: 'Tallitude', key: '01-Feb-2021', value: 182 },
+        ],
+        options: expect.any(Object),
+      }),
+      {},
+    );
+
+    expect(mockLineChart).toHaveBeenNthCalledWith(
+      2,
+      expect.objectContaining({
+        data: [
+          { group: 'Weight', key: '01-Jan-2021', value: 70 },
+          { group: 'Weight', key: '01-Feb-2021', value: 72 },
+        ],
+        options: expect.any(Object),
+      }),
+      {},
+    );
+
+    expect(mockLineChart).not.toHaveBeenCalledWith(
+      expect.objectContaining({
+        data: [expect.objectContaining({ group: 'Chief Complaint' })],
+        options: expect.any(Object),
+      }),
+      {},
+    );
+
+    expect(mockLineChart).toHaveBeenNthCalledWith(
+      3,
+      expect.objectContaining({
+        data: [{ group: 'Power Level', key: '01-Jan-2021', value: 9001 }],
+        options: expect.any(Object),
+      }),
+      {},
+    );
+  });
+
+  it('should support showing graph tab by default', async () => {
+    mockUseObs.mockReturnValue({
+      data: mockObsData as Array<ObsResult>,
+      error: null,
+      isLoading: false,
+      isValidating: false,
+    });
+    mockUseConfig.mockReturnValue({
+      ...(getDefaultsFromConfigSchema(configSchemaSwitchable) as Object),
+      title: 'My Stats',
+      data: [{ concept: '5090AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA' }, { concept: '2154AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA' }],
+      showGraphByDefault: true,
+    });
+
+    render(<ObsSwitchable patientUuid="123" />);
+
+    const tabs = screen.getByLabelText('Obs tabs');
+    expect(tabs).toHaveTextContent('Height');
+    expect(tabs).toHaveTextContent('Weight');
+
+    expect(mockLineChart).toHaveBeenNthCalledWith(
+      1,
+      expect.objectContaining({
+        data: [
+          { group: 'Height', key: '01-Jan-2021', value: 180 },
+          { group: 'Height', key: '01-Feb-2021', value: 182 },
+        ],
+        options: expect.any(Object),
+      }),
+      {},
+    );
+  });
+
+  it('should support grouping into multiline graphs', async () => {
+    mockUseObs.mockReturnValue({
+      data: mockObsData as Array<ObsResult>,
+      error: null,
+      isLoading: false,
+      isValidating: false,
+    });
+    mockUseConfig.mockReturnValue({
+      ...(getDefaultsFromConfigSchema(configSchemaSwitchable) as Object),
+      title: 'My Stats',
+      showGraphByDefault: true,
+      data: [
+        { concept: '164163AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA', graphGroup: 'Power Level' },
+        { concept: '5090AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA', graphGroup: 'Biometrics' },
+        { concept: '2154AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA', graphGroup: 'Biometrics' },
+      ],
+    });
+
+    render(<ObsSwitchable patientUuid="123" />);
+
+    const tabs = screen.getByLabelText('Obs tabs');
+    expect(tabs).toHaveTextContent('Power Level');
+    expect(tabs).toHaveTextContent('Biometrics');
+
+    expect(mockLineChart).toHaveBeenNthCalledWith(
+      1,
+      expect.objectContaining({
+        data: [{ group: 'Power Level', key: '01-Jan-2021', value: 9001 }],
+        options: expect.any(Object),
+      }),
+      {},
+    );
+
+    expect(mockLineChart).toHaveBeenNthCalledWith(
+      2,
+      expect.objectContaining({
+        data: [
+          { group: 'Height', key: '01-Jan-2021', value: 180 },
+          { group: 'Height', key: '01-Feb-2021', value: 182 },
+          { group: 'Weight', key: '01-Jan-2021', value: 70 },
+          { group: 'Weight', key: '01-Feb-2021', value: 72 },
+        ],
+        options: expect.any(Object),
+      }),
+      {},
+    );
+  });
+
+  it('should hide the graph tab selection if there is only one graph', async () => {
+    mockUseObs.mockReturnValue({
+      data: mockObsData.filter((o) => o.conceptUuid === '164163AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA') as Array<ObsResult>,
+      error: null,
+      isLoading: false,
+      isValidating: false,
+    });
+    mockUseConfig.mockReturnValue({
+      ...(getDefaultsFromConfigSchema(configSchemaSwitchable) as Object),
+      title: 'My Stats',
+      showGraphByDefault: true,
+      data: [{ concept: '164163AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA' }],
+    });
+
+    render(<ObsSwitchable patientUuid="123" />);
+
+    expect(screen.queryByLabelText('Obs tabs')).not.toBeInTheDocument();
+
+    expect(mockLineChart).toHaveBeenCalledWith(
+      expect.objectContaining({
+        data: [{ group: 'Power Level', key: '01-Jan-2021', value: 9001 }],
+        options: expect.any(Object),
+      }),
+      {},
+    );
+  });
+});

package/src/obs-table/obs-table.component.tsx

@@ -33,7 +33,7 @@ const ObsTable: React.FC<ObsTableProps> = ({ patientUuid }) => {
     { key: 'date', header: t('dateAndTime', 'Date and time'), isSortable: true },
     ...config.data.map(({ concept, label }) => ({
       key: concept,
-      header: label,
+      header: label || obss.find((o) => o.conceptUuid == concept)?.code.text,
     })),
   ];
 

package/src/resources/useObs.ts

@@ -12,7 +12,7 @@ export interface UseObsResult {
   isValidating: boolean;
 }
 
-type ObsResult = fhir.Observation & {
+export type ObsResult = fhir.Observation & {
   conceptUuid: string;
   dataType?: string;
   valueDateTime?: string;

package/translations/am.json

@@ -1,7 +1,4 @@
 {
-  "chartView": "Chart View",
   "dateAndTime": "Date and time",
-  "displaying": "Displaying",
-  "encounterType": "Encounter type",
-  "tableView": "Table View"
+  "encounterType": "Encounter type"
 }

package/translations/ar.json

@@ -1,7 +1,4 @@
 {
-  "chartView": "عرض الرسم البياني",
   "dateAndTime": "التاريخ والوقت",
-  "displaying": "عرض",
-  "encounterType": "نوع اللقاء",
-  "tableView": "عرض الجدول"
+  "encounterType": "نوع اللقاء"
 }

package/translations/ar_SY.json

@@ -1,7 +1,4 @@
 {
-  "chartView": "Chart View",
   "dateAndTime": "Date and time",
-  "displaying": "Displaying",
-  "encounterType": "Encounter type",
-  "tableView": "Table View"
+  "encounterType": "Encounter type"
 }

package/translations/bn.json

@@ -1,7 +1,4 @@
 {
-  "chartView": "Chart View",
   "dateAndTime": "Date and time",
-  "displaying": "Displaying",
-  "encounterType": "Encounter type",
-  "tableView": "Table View"
+  "encounterType": "Encounter type"
 }

package/translations/de.json

@@ -1,7 +1,4 @@
 {
-  "chartView": "Chart View",
   "dateAndTime": "Date and time",
-  "displaying": "Displaying",
-  "encounterType": "Encounter type",
-  "tableView": "Table View"
+  "encounterType": "Encounter type"
 }

package/translations/en.json

@@ -1,7 +1,4 @@
 {
-  "chartView": "Chart View",
   "dateAndTime": "Date and time",
-  "displaying": "Displaying",
-  "encounterType": "Encounter type",
-  "tableView": "Table View"
+  "encounterType": "Encounter type"
 }

package/translations/en_US.json

@@ -1,7 +1,4 @@
 {
-  "chartView": "Chart View",
   "dateAndTime": "Date and time",
-  "displaying": "Displaying",
-  "encounterType": "Encounter type",
-  "tableView": "Table View"
+  "encounterType": "Encounter type"
 }

package/translations/es.json

@@ -1,7 +1,4 @@
 {
-  "chartView": "Vista de Gráfico",
   "dateAndTime": "Fecha y hora",
-  "displaying": "Mostrando",
-  "encounterType": "Tipo de encuentro",
-  "tableView": "Vista de Tabla"
+  "encounterType": "Tipo de encuentro"
 }

package/translations/es_MX.json

@@ -1,7 +1,4 @@
 {
-  "chartView": "Chart View",
   "dateAndTime": "Date and time",
-  "displaying": "Displaying",
-  "encounterType": "Encounter type",
-  "tableView": "Table View"
+  "encounterType": "Encounter type"
 }

package/translations/fr.json

@@ -1,7 +1,4 @@
 {
-  "chartView": "Vue graphique",
   "dateAndTime": "Date et heure",
-  "displaying": "En cours d'affichage",
-  "encounterType": "Type de consultation",
-  "tableView": "Vue tabulaire"
+  "encounterType": "Type de consultation"
 }

package/translations/he.json

@@ -1,7 +1,4 @@
 {
-  "chartView": "תצוגת תרשים",
   "dateAndTime": "תאריך ושעה",
-  "displaying": "מציג",
-  "encounterType": "סוג הביקור",
-  "tableView": "תצוגת טבלה"
+  "encounterType": "סוג הביקור"
 }

package/translations/hi.json

@@ -1,7 +1,4 @@
 {
-  "chartView": "Chart View",
   "dateAndTime": "Date and time",
-  "displaying": "Displaying",
-  "encounterType": "Encounter type",
-  "tableView": "Table View"
+  "encounterType": "Encounter type"
 }

package/translations/hi_IN.json

@@ -1,7 +1,4 @@
 {
-  "chartView": "Chart View",
   "dateAndTime": "Date and time",
-  "displaying": "Displaying",
-  "encounterType": "Encounter type",
-  "tableView": "Table View"
+  "encounterType": "Encounter type"
 }

package/translations/id.json

@@ -1,7 +1,4 @@
 {
-  "chartView": "Tampilan Grafik",
   "dateAndTime": "Tanggal dan waktu",
-  "displaying": "Menampilkan",
-  "encounterType": "Jenis pertemuan",
-  "tableView": "Tampilan Tabel"
+  "encounterType": "Jenis pertemuan"
 }

package/translations/it.json

@@ -1,7 +1,4 @@
 {
-  "chartView": "Vista grafico",
   "dateAndTime": "Data e ora",
-  "displaying": "Visualizzazione",
-  "encounterType": "Tipo di incontro",
-  "tableView": "Vista tabella"
+  "encounterType": "Tipo di incontro"
 }

package/translations/ka.json

@@ -1,7 +1,4 @@
 {
-  "chartView": "გრაფიკის ხედი",
   "dateAndTime": "თარიღი და დრო",
-  "displaying": "ნაჩვენებია",
-  "encounterType": "კონსულტაციის ტიპი",
-  "tableView": "ცხრილის ხედი"
+  "encounterType": "კონსულტაციის ტიპი"
 }

package/translations/km.json

@@ -1,7 +1,4 @@
 {
-  "chartView": "មើលគំនូសតាង",
   "dateAndTime": "កាលបរិច្ឆេទ និងម៉ោង",
-  "displaying": "ការបង្ហាញ",
-  "encounterType": "ប្រភេទនៃការជួបប្រទះ",
-  "tableView": "មើលតារាង"
+  "encounterType": "ប្រភេទនៃការជួបប្រទះ"
 }

package/translations/ku.json

@@ -1,7 +1,4 @@
 {
-  "chartView": "Chart View",
   "dateAndTime": "Date and time",
-  "displaying": "Displaying",
-  "encounterType": "Encounter type",
-  "tableView": "Table View"
+  "encounterType": "Encounter type"
 }

package/translations/ky.json

@@ -1,7 +1,4 @@
 {
-  "chartView": "Chart View",
   "dateAndTime": "Date and time",
-  "displaying": "Displaying",
-  "encounterType": "Encounter type",
-  "tableView": "Table View"
+  "encounterType": "Encounter type"
 }

package/translations/lg.json

@@ -1,7 +1,4 @@
 {
-  "chartView": "Chart View",
   "dateAndTime": "Date and time",
-  "displaying": "Displaying",
-  "encounterType": "Encounter type",
-  "tableView": "Table View"
+  "encounterType": "Encounter type"
 }

package/translations/ne.json

@@ -1,7 +1,4 @@
 {
-  "chartView": "Chart View",
   "dateAndTime": "Date and time",
-  "displaying": "Displaying",
-  "encounterType": "Encounter type",
-  "tableView": "Table View"
+  "encounterType": "Encounter type"
 }

package/translations/pl.json

@@ -1,7 +1,4 @@
 {
-  "chartView": "Chart View",
   "dateAndTime": "Date and time",
-  "displaying": "Displaying",
-  "encounterType": "Encounter type",
-  "tableView": "Table View"
+  "encounterType": "Encounter type"
 }

package/translations/pt.json

@@ -1,7 +1,4 @@
 {
-  "chartView": "Visualização de Gráfico",
   "dateAndTime": "Data e hora",
-  "displaying": "Visualizando",
-  "encounterType": "Tipo de consulta",
-  "tableView": "Visualização em Tabela"
+  "encounterType": "Tipo de consulta"
 }

package/translations/pt_BR.json

@@ -1,7 +1,4 @@
 {
-  "chartView": "Visualização do prontuário",
   "dateAndTime": "Data e hora",
-  "displaying": "Exibindo",
-  "encounterType": "Tipo de encontro",
-  "tableView": "Visualização em tabela"
+  "encounterType": "Tipo de encontro"
 }

package/translations/qu.json

@@ -1,7 +1,4 @@
 {
-  "chartView": "Chart View",
   "dateAndTime": "Date and time",
-  "displaying": "Displaying",
-  "encounterType": "Encounter type",
-  "tableView": "Table View"
+  "encounterType": "Encounter type"
 }

package/translations/ro_RO.json

@@ -1,7 +1,4 @@
 {
-  "chartView": "Vizualizare grafica",
   "dateAndTime": "Data si ora",
-  "displaying": "Se afiseaza",
-  "encounterType": "Tip intalnire",
-  "tableView": "Vizualizare tabel"
+  "encounterType": "Tip intalnire"
 }

package/translations/ru_RU.json

@@ -1,7 +1,4 @@
 {
-  "chartView": "Chart View",
   "dateAndTime": "Date and time",
-  "displaying": "Displaying",
-  "encounterType": "Encounter type",
-  "tableView": "Table View"
+  "encounterType": "Encounter type"
 }

package/translations/si.json

@@ -1,7 +1,4 @@
 {
-  "chartView": "Chart View",
   "dateAndTime": "Date and time",
-  "displaying": "Displaying",
-  "encounterType": "Encounter type",
-  "tableView": "Table View"
+  "encounterType": "Encounter type"
 }

package/translations/sw.json

@@ -1,7 +1,4 @@
 {
-  "chartView": "Chart View",
   "dateAndTime": "Date and time",
-  "displaying": "Displaying",
-  "encounterType": "Encounter type",
-  "tableView": "Table View"
+  "encounterType": "Encounter type"
 }

package/translations/sw_KE.json

@@ -1,7 +1,4 @@
 {
-  "chartView": "Chart View",
   "dateAndTime": "Date and time",
-  "displaying": "Displaying",
-  "encounterType": "Encounter type",
-  "tableView": "Table View"
+  "encounterType": "Encounter type"
 }

package/translations/tr.json

@@ -1,7 +1,4 @@
 {
-  "chartView": "Chart View",
   "dateAndTime": "Date and time",
-  "displaying": "Displaying",
-  "encounterType": "Encounter type",
-  "tableView": "Table View"
+  "encounterType": "Encounter type"
 }

package/translations/tr_TR.json

@@ -1,7 +1,4 @@
 {
-  "chartView": "Chart View",
   "dateAndTime": "Date and time",
-  "displaying": "Displaying",
-  "encounterType": "Encounter type",
-  "tableView": "Table View"
+  "encounterType": "Encounter type"
 }

package/translations/uk.json

@@ -1,7 +1,4 @@
 {
-  "chartView": "Chart View",
   "dateAndTime": "Date and time",
-  "displaying": "Displaying",
-  "encounterType": "Encounter type",
-  "tableView": "Table View"
+  "encounterType": "Encounter type"
 }

package/translations/uz.json

@@ -1,7 +1,4 @@
 {
-  "chartView": "Chart View",
   "dateAndTime": "Date and time",
-  "displaying": "Displaying",
-  "encounterType": "Encounter type",
-  "tableView": "Table View"
+  "encounterType": "Encounter type"
 }

package/translations/uz@Latn.json

@@ -1,7 +1,4 @@
 {
-  "chartView": "Chart View",
   "dateAndTime": "Date and time",
-  "displaying": "Displaying",
-  "encounterType": "Encounter type",
-  "tableView": "Table View"
+  "encounterType": "Encounter type"
 }

package/translations/uz_UZ.json

@@ -1,7 +1,4 @@
 {
-  "chartView": "Chart View",
   "dateAndTime": "Date and time",
-  "displaying": "Displaying",
-  "encounterType": "Encounter type",
-  "tableView": "Table View"
+  "encounterType": "Encounter type"
 }