@kenyaemr/esm-patient-clinical-view-app 5.4.2-pre.2714 → 5.4.2-pre.2722

package/src/maternal-and-child-health/partography/graphs/fetal-heart-rate-graph.component.tsx

@@ -0,0 +1,359 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  Tag,
+  Button,
+  DataTable,
+  TableContainer,
+  Table,
+  TableHead,
+  TableRow,
+  TableHeader,
+  TableBody,
+  TableCell,
+  Pagination,
+} from '@carbon/react';
+import { Add, ChartColumn, Table as TableIcon } from '@carbon/react/icons';
+import { LineChart } from '@carbon/charts-react';
+import styles from '../partography.scss';
+import { getColorForGraph, generateRange } from '../types';
+import { usePaginationInfo } from '@openmrs/esm-patient-common-lib';
+
+enum ScaleTypes {
+  LABELS = 'labels',
+  LINEAR = 'linear',
+}
+
+interface FetalHeartRateGraphProps {
+  data?: Array<{
+    hour: number;
+    value: number;
+    group: string;
+    time?: string;
+    date?: string;
+    id?: string;
+  }>;
+  tableData?: Array<{
+    id: string;
+    date: string;
+    time: string;
+    value: string;
+    hour: string;
+  }>;
+  viewMode?: 'graph' | 'table';
+  currentPage?: number;
+  pageSize?: number;
+  totalItems?: number;
+  controlSize?: 'sm' | 'md';
+  onAddData?: () => void;
+  onViewModeChange?: (mode: 'graph' | 'table') => void;
+  onPageChange?: (page: number) => void;
+  onPageSizeChange?: (size: number) => void;
+  isAddButtonDisabled?: boolean;
+}
+
+const FetalHeartRateGraph: React.FC<FetalHeartRateGraphProps> = ({
+  data = [],
+  tableData = [],
+  viewMode = 'graph',
+  currentPage = 1,
+  pageSize = 5,
+  totalItems = 0,
+  controlSize = 'sm',
+  onAddData,
+  onViewModeChange,
+  onPageChange,
+  onPageSizeChange,
+  isAddButtonDisabled = true,
+}) => {
+  const { t } = useTranslation();
+  const startIndex = (currentPage - 1) * pageSize;
+  const endIndex = startIndex + pageSize;
+  const paginatedData = tableData.slice(startIndex, endIndex);
+  const { pageSizes: calculatedPageSizes, itemsDisplayed } = usePaginationInfo(
+    pageSize,
+    Math.ceil(totalItems / pageSize),
+    currentPage,
+    totalItems,
+  );
+  const getFetalHeartRateStatus = (value: string): { type: string; text: string; color: string } => {
+    const numValue = parseInt(value.replace(' bpm', ''));
+    if (numValue < 100) {
+      return { type: 'warm-gray', text: 'Low', color: getColorForGraph('gray') };
+    } else if (numValue >= 100 && numValue <= 180) {
+      return { type: 'green', text: 'Normal', color: getColorForGraph('green') };
+    } else {
+      return { type: 'red', text: 'High', color: getColorForGraph('red') };
+    }
+  };
+  const tableHeaders = [
+    { key: 'date', header: t('date', 'Date') },
+    { key: 'time', header: t('time', 'Time') },
+    { key: 'hour', header: t('hour', 'Hour') },
+    { key: 'value', header: t('fetalHeartRate', 'Fetal Heart Rate (bpm)') },
+    { key: 'status', header: t('status', 'Status') },
+  ];
+  const getFetalHeartRateColor = (value: number): string => {
+    if (value < 100) {
+      return getColorForGraph('gray');
+    } else if (value >= 100 && value <= 180) {
+      return getColorForGraph('green');
+    } else {
+      return getColorForGraph('red');
+    }
+  };
+
+  const enhancedChartData = React.useMemo(() => {
+    if (data && data.length > 0) {
+      return data.map((point) => ({
+        ...point,
+        group: 'Fetal Heart Rate',
+        color: getFetalHeartRateColor(point.value),
+      }));
+    }
+
+    return [
+      { hour: 0, value: 140, group: 'Fetal Heart Rate', time: '0', color: getColorForGraph('green') },
+      { hour: 10, value: 140, group: 'Fetal Heart Rate', time: '10', color: getColorForGraph('green') },
+      { hour: 20, value: 140, group: 'Fetal Heart Rate', time: '20', color: getColorForGraph('green') },
+      { hour: 30, value: 140, group: 'Fetal Heart Rate', time: '30', color: getColorForGraph('green') },
+      { hour: 40, value: 140, group: 'Fetal Heart Rate', time: '40', color: getColorForGraph('green') },
+      { hour: 50, value: 140, group: 'Fetal Heart Rate', time: '50', color: getColorForGraph('green') },
+      { hour: 60, value: 140, group: 'Fetal Heart Rate', time: '60', color: getColorForGraph('green') },
+    ];
+  }, [data]);
+
+  const chartData = enhancedChartData;
+  const chartKey = React.useMemo(() => JSON.stringify(enhancedChartData), [enhancedChartData]);
+
+  const chartOptions = {
+    title: '',
+    axes: {
+      bottom: {
+        title: '',
+        mapsTo: 'hour',
+        scaleType: ScaleTypes.LINEAR,
+        domain: [0, 10],
+        ticks: {
+          values: React.useMemo(() => generateRange(0, 10, 0.5), []),
+          formatter: (hour: number) => {
+            if (hour === 0) {
+              return '0';
+            }
+            if (hour === 0.5) {
+              return '0:30';
+            }
+            if (hour % 1 === 0) {
+              return `${hour}:00`;
+            }
+            if (hour % 1 === 0.5) {
+              return `${Math.floor(hour)}:30`;
+            }
+            return `${hour}`;
+          },
+        },
+      },
+      left: {
+        title: 'Fetal Heart Rate (bpm)',
+        mapsTo: 'value',
+        scaleType: ScaleTypes.LINEAR,
+        domain: [80, 200],
+        ticks: {
+          values: React.useMemo(() => generateRange(80, 200, 10), []),
+          formatter: (value: number) => `${value}`,
+        },
+      },
+    },
+    height: '600px',
+    curve: 'curveLinear',
+    points: {
+      enabled: true,
+      radius: 6,
+      filled: true,
+    },
+    grid: {
+      x: {
+        enabled: true,
+      },
+      y: {
+        enabled: true,
+      },
+    },
+    color: {
+      scale:
+        data && data.length > 0
+          ? (datapoint: any) => getFetalHeartRateColor(datapoint.value)
+          : {
+              'Fetal Heart Rate': 'transparent',
+            },
+    },
+    legend: {
+      enabled: false,
+    },
+    theme: 'white',
+    toolbar: {
+      enabled: false,
+    },
+  };
+
+  return (
+    <div className={styles.fetalHeartRateSection}>
+      <div className={styles.fetalHeartRateContainer}>
+        <div className={styles.fetalHeartRateHeader}>
+          <div className={styles.fetalHeartRateHeaderLeft}>
+            <h3 className={styles.fetalHeartRateTitle}>Fetal Heart Rate</h3>
+            <div className={styles.fetalHeartRateControls}>
+              <Tag type="green" title="Normal Range">
+                Normal (100-180)
+              </Tag>
+              <Tag type="red" title="Abnormal Range">
+                Abnormal (&gt;180)
+              </Tag>
+              <Tag type="warm-gray" title="Low Range">
+                Low (&lt;100)
+              </Tag>
+            </div>
+          </div>
+          <div className={styles.fetalHeartRateHeaderRight}>
+            <div className={styles.fetalHeartRateActions}>
+              <div className={styles.viewSwitcher}>
+                <Button
+                  kind={viewMode === 'graph' ? 'primary' : 'secondary'}
+                  size={controlSize}
+                  hasIconOnly
+                  iconDescription={t('graphView', 'Graph View')}
+                  onClick={() => onViewModeChange?.('graph')}
+                  className={styles.viewButton}>
+                  <ChartColumn />
+                </Button>
+                <Button
+                  kind={viewMode === 'table' ? 'primary' : 'secondary'}
+                  size={controlSize}
+                  hasIconOnly
+                  iconDescription={t('tableView', 'Table View')}
+                  onClick={() => onViewModeChange?.('table')}
+                  className={styles.viewButton}>
+                  <TableIcon />
+                </Button>
+              </div>
+              <Button
+                kind="primary"
+                size={controlSize}
+                renderIcon={Add}
+                iconDescription="Add fetal heart rate data"
+                disabled={isAddButtonDisabled}
+                onClick={onAddData}
+                className={styles.addButton}>
+                Add
+              </Button>
+            </div>
+          </div>
+        </div>
+
+        {viewMode === 'graph' ? (
+          <div className={styles.fetalHeartRateChart}>
+            <LineChart data={chartData} options={chartOptions} key={chartKey} />
+          </div>
+        ) : (
+          <div className={styles.tableContainer}>
+            {paginatedData.length > 0 ? (
+              <>
+                <DataTable rows={paginatedData} headers={tableHeaders}>
+                  {({ rows, headers, getTableProps, getHeaderProps, getRowProps }) => (
+                    <TableContainer title="" description="">
+                      <Table {...getTableProps()} size="sm">
+                        <TableHead>
+                          <TableRow>
+                            {headers.map((header) => (
+                              <TableHeader {...getHeaderProps({ header })} key={header.key}>
+                                {header.header}
+                              </TableHeader>
+                            ))}
+                          </TableRow>
+                        </TableHead>
+                        <TableBody>
+                          {rows.map((row) => (
+                            <TableRow {...getRowProps({ row })} key={row.id}>
+                              {row.cells.map((cell) => (
+                                <TableCell key={cell.id}>
+                                  {cell.info.header === 'status'
+                                    ? (() => {
+                                        const status = getFetalHeartRateStatus(
+                                          row.cells.find((c) => c.info.header === 'value')?.value || '0 bpm',
+                                        );
+                                        return (
+                                          <Tag type={status.type as any} title={`Fetal Heart Rate: ${status.text}`}>
+                                            {status.text}
+                                          </Tag>
+                                        );
+                                      })()
+                                    : cell.info.header === 'value'
+                                    ? (() => {
+                                        const numValue = parseInt(cell.value.replace(' bpm', ''));
+
+                                        if (numValue < 100) {
+                                          return (
+                                            <span className={`${styles.fetalHeartRateValue} ${styles.low}`}>
+                                              <span className={styles.arrow}>↓</span>
+                                              {cell.value}
+                                            </span>
+                                          );
+                                        } else if (numValue > 180) {
+                                          return (
+                                            <span className={`${styles.fetalHeartRateValue} ${styles.high}`}>
+                                              <span className={styles.arrow}>↑</span>
+                                              {cell.value}
+                                            </span>
+                                          );
+                                        } else {
+                                          return (
+                                            <span className={`${styles.fetalHeartRateValue} ${styles.normal}`}>
+                                              {cell.value}
+                                            </span>
+                                          );
+                                        }
+                                      })()
+                                    : cell.value}
+                                </TableCell>
+                              ))}
+                            </TableRow>
+                          ))}
+                        </TableBody>
+                      </Table>
+                    </TableContainer>
+                  )}
+                </DataTable>
+
+                {totalItems > 0 && (
+                  <Pagination
+                    page={currentPage}
+                    totalItems={totalItems}
+                    pageSize={pageSize}
+                    pageSizes={calculatedPageSizes}
+                    onChange={(event) => {
+                      onPageChange?.(event.page);
+                      if (event.pageSize !== pageSize) {
+                        onPageSizeChange?.(event.pageSize);
+                      }
+                    }}
+                    size={controlSize}
+                  />
+                )}
+                {totalItems > 0 && <div className={styles.paginationInfo}>{itemsDisplayed}</div>}
+              </>
+            ) : (
+              <div className={styles.emptyState}>
+                <p>{t('noDataAvailable', 'No data available for fetal heart rate')}</p>
+                <Button kind="primary" size={controlSize} renderIcon={Add} onClick={onAddData}>
+                  {t('addFirstDataPoint', 'Add first data point')}
+                </Button>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default FetalHeartRateGraph;

package/src/maternal-and-child-health/partography/graphs/index.ts

@@ -0,0 +1,10 @@
+export { default as FetalHeartRateGraph } from './fetal-heart-rate-graph.component';
+export { default as MembraneAmnioticFluidGraph } from './membrane-amniotic-fluid-graph.component';
+export { default as CervicalContractionsGraph } from './cervical-contractions-graph.component';
+export { default as PartographGraph } from './partograph-graph.component';
+export { default as CervixGraph } from './cervix-graph.component';
+export { default as OxytocinGraph } from './oxytocin-graph-wrapper.component';
+export { default as DrugsIVFluidsGraph } from './drugs-iv-fluids-graph-wrapper.component';
+export { default as PulseBPGraph } from './pulse-bp-graph-wrapper.component';
+export { default as TemperatureGraph } from './temperature-graph.component';
+export { default as UrineTestGraph } from './urine-test-graph.component';

package/src/maternal-and-child-health/partography/graphs/membrane-amniotic-fluid-graph.component.tsx

@@ -0,0 +1,266 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  Button,
+  DataTable,
+  TableContainer,
+  Table,
+  TableHead,
+  TableRow,
+  TableHeader,
+  TableBody,
+  TableCell,
+  Pagination,
+} from '@carbon/react';
+import { Add, ChartColumn, Table as TableIcon } from '@carbon/react/icons';
+import styles from '../partography.scss';
+import { usePaginationInfo } from '@openmrs/esm-patient-common-lib';
+import { AMNIOTIC_FLUID_INITIALS_MAP, AMNIOTIC_FLUID_LABEL_MAP, MOULDING_SYMBOL_MAP } from '../types';
+
+interface MembraneAmnioticFluidData {
+  timeSlot: string;
+  exactTime: string;
+  amnioticFluid: string;
+  moulding: string;
+  date?: string;
+  id?: string;
+}
+
+interface MembraneAmnioticFluidGraphProps {
+  data?: MembraneAmnioticFluidData[];
+  tableData?: Array<{
+    id: string;
+    date: string;
+    timeSlot: string;
+    exactTime: string;
+    amnioticFluid: string;
+    moulding: string;
+  }>;
+  viewMode?: 'graph' | 'table';
+  currentPage?: number;
+  pageSize?: number;
+  totalItems?: number;
+  controlSize?: 'sm' | 'md';
+  onAddData?: () => void;
+  onViewModeChange?: (mode: 'graph' | 'table') => void;
+  onPageChange?: (page: number) => void;
+  onPageSizeChange?: (size: number) => void;
+  isAddButtonDisabled?: boolean;
+}
+
+const MembraneAmnioticFluidGraph: React.FC<MembraneAmnioticFluidGraphProps> = ({
+  data = [],
+  tableData = [],
+  viewMode = 'graph',
+  currentPage = 1,
+  pageSize = 5,
+  totalItems = 0,
+  controlSize = 'sm',
+  onAddData,
+  onViewModeChange,
+  onPageChange,
+  onPageSizeChange,
+  isAddButtonDisabled = true,
+}) => {
+  const { t } = useTranslation();
+
+  const startIndex = (currentPage - 1) * pageSize;
+  const endIndex = startIndex + pageSize;
+  const paginatedData = tableData.slice(startIndex, endIndex);
+  const { pageSizes: calculatedPageSizes, itemsDisplayed } = usePaginationInfo(
+    pageSize,
+    Math.ceil(totalItems / pageSize),
+    currentPage,
+    totalItems,
+  );
+
+  const tableHeaders = [
+    { key: 'date', header: t('date', 'Date') },
+    { key: 'exactTime', header: t('exactTime', 'Exact Time') },
+    { key: 'amnioticFluid', header: t('amnioticFluid', 'Amniotic Fluid') },
+    { key: 'moulding', header: t('moulding', 'Moulding') },
+  ];
+
+  const getTimeColumns = () => {
+    const emptyColumns = Array.from({ length: 13 }, (_, i) => `grid-${i + 1}`);
+    if (data.length === 0) {
+      return emptyColumns;
+    }
+    const dataTimes = data.map((item, idx) => item.exactTime || String(idx));
+    if (dataTimes.length <= 13) {
+      const remainingEmpty = Array.from({ length: 13 - dataTimes.length }, (_, i) => `empty-${i + 1}`);
+      return [...dataTimes, ...remainingEmpty];
+    }
+    return dataTimes;
+  };
+
+  const timeColumns = getTimeColumns();
+
+  const getAmnioticFluidInitials = (value: string): string => {
+    return AMNIOTIC_FLUID_INITIALS_MAP[value] || value.charAt(0).toUpperCase();
+  };
+
+  const getAmnioticFluidLabel = (value: string): string => AMNIOTIC_FLUID_LABEL_MAP[value] || value;
+
+  const getMouldingSymbol = (value: string): string => MOULDING_SYMBOL_MAP[value] || value;
+
+  const createGridData = () => {
+    const gridData: Record<string, { amnioticFluid: string; moulding: string }> = {};
+    data.forEach((item, idx) => {
+      const key = item.exactTime || String(idx);
+      gridData[key] = {
+        amnioticFluid: getAmnioticFluidInitials(item.amnioticFluid),
+        moulding: getMouldingSymbol(item.moulding),
+      };
+    });
+    return gridData;
+  };
+  const gridData = createGridData();
+
+  return (
+    <div className={styles.fetalHeartRateSection}>
+      <div className={styles.fetalHeartRateContainer}>
+        <div className={styles.fetalHeartRateHeader}>
+          <div className={styles.fetalHeartRateHeaderLeft}>
+            <h3 className={styles.fetalHeartRateTitle}>Membrane Amniotic Fluid & Moulding</h3>
+            <div className={styles.fetalHeartRateControls}>
+              <span className={styles.legendText}>
+                M=Membrane intact, C=Clear, MS=Meconium, A=Absent, B=Blood | 0, +, ++, +++
+              </span>
+            </div>
+          </div>
+          <div className={styles.fetalHeartRateHeaderRight}>
+            <div className={styles.fetalHeartRateActions}>
+              <div className={styles.viewSwitcher}>
+                <Button
+                  kind={viewMode === 'graph' ? 'primary' : 'secondary'}
+                  size={controlSize}
+                  hasIconOnly
+                  iconDescription={t('graphView', 'Graph View')}
+                  onClick={() => onViewModeChange?.('graph')}
+                  className={styles.viewButton}>
+                  <ChartColumn />
+                </Button>
+                <Button
+                  kind={viewMode === 'table' ? 'primary' : 'secondary'}
+                  size={controlSize}
+                  hasIconOnly
+                  iconDescription={t('tableView', 'Table View')}
+                  onClick={() => onViewModeChange?.('table')}
+                  className={styles.viewButton}>
+                  <TableIcon />
+                </Button>
+              </div>
+              <Button
+                kind="primary"
+                size={controlSize}
+                renderIcon={Add}
+                iconDescription="Add membrane amniotic fluid data"
+                disabled={isAddButtonDisabled}
+                onClick={onAddData}
+                className={styles.addButton}>
+                Add
+              </Button>
+            </div>
+          </div>
+        </div>
+
+        {viewMode === 'graph' ? (
+          <div className={styles.membraneGrid}>
+            <div className={styles.gridContainer}>
+              <div className={styles.gridRow}>
+                <div className={styles.gridRowLabel}>{t('amnioticFluid', 'Amniotic Fluid')}</div>
+                {timeColumns.map((timeColumn) => {
+                  const cellData = gridData[timeColumn];
+                  return (
+                    <div key={`af-${timeColumn}`} className={styles.gridCell}>
+                      {cellData?.amnioticFluid || ''}
+                    </div>
+                  );
+                })}
+              </div>
+
+              <div className={styles.gridRow}>
+                <div className={styles.gridRowLabel}>{t('moulding', 'Moulding')}</div>
+                {timeColumns.map((timeColumn) => {
+                  const cellData = gridData[timeColumn];
+                  return (
+                    <div key={`m-${timeColumn}`} className={styles.gridCell}>
+                      {cellData?.moulding || ''}
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          </div>
+        ) : (
+          <div className={styles.tableContainer}>
+            {paginatedData.length > 0 ? (
+              <>
+                <DataTable
+                  rows={paginatedData.map((row) => ({
+                    ...row,
+                    exactTime: row.exactTime,
+                    amnioticFluid: getAmnioticFluidLabel(row.amnioticFluid),
+                    moulding: getMouldingSymbol(row.moulding),
+                  }))}
+                  headers={tableHeaders}>
+                  {({ rows, headers, getTableProps, getHeaderProps, getRowProps }) => (
+                    <TableContainer title="" description="">
+                      <Table {...getTableProps()} size="sm">
+                        <TableHead>
+                          <TableRow>
+                            {headers.map((header) => (
+                              <TableHeader {...getHeaderProps({ header })} key={header.key}>
+                                {header.header}
+                              </TableHeader>
+                            ))}
+                          </TableRow>
+                        </TableHead>
+                        <TableBody>
+                          {rows.map((row) => (
+                            <TableRow {...getRowProps({ row })} key={row.id}>
+                              {row.cells.map((cell) => (
+                                <TableCell key={cell.id}>{cell.value}</TableCell>
+                              ))}
+                            </TableRow>
+                          ))}
+                        </TableBody>
+                      </Table>
+                    </TableContainer>
+                  )}
+                </DataTable>
+
+                {totalItems > 0 && (
+                  <Pagination
+                    page={currentPage}
+                    totalItems={totalItems}
+                    pageSize={pageSize}
+                    pageSizes={calculatedPageSizes}
+                    onChange={(event) => {
+                      onPageChange?.(event.page);
+                      if (event.pageSize !== pageSize) {
+                        onPageSizeChange?.(event.pageSize);
+                      }
+                    }}
+                    size={controlSize}
+                  />
+                )}
+                {totalItems > 0 && <div className={styles.paginationInfo}>{itemsDisplayed}</div>}
+              </>
+            ) : (
+              <div className={styles.emptyState}>
+                <p>{t('noDataAvailable', 'No data available for membrane amniotic fluid & moulding')}</p>
+                <Button kind="primary" size={controlSize} renderIcon={Add} onClick={onAddData}>
+                  {t('addFirstDataPoint', 'Add first data point')}
+                </Button>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default MembraneAmnioticFluidGraph;