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

package/src/maternal-and-child-health/partography/graphs/pulse-bp-graph-wrapper.component.tsx

@@ -0,0 +1,298 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  Button,
+  DataTable,
+  TableContainer,
+  Table,
+  TableHead,
+  TableRow,
+  TableHeader,
+  TableBody,
+  TableCell,
+  Tag,
+  Pagination,
+} from '@carbon/react';
+import { Add, ChartColumn, Table as TableIcon } from '@carbon/react/icons';
+import PulseBPGraph, { PulseBPData } from './pulse-bp-graph.component';
+import PulseBPForm from '../forms/pulse-bp-form.component';
+import styles from '../partography.scss';
+import { usePaginationInfo } from '@openmrs/esm-patient-common-lib';
+
+interface PulseBPGraphWrapperProps {
+  data: PulseBPData[];
+  tableData?: Array<{
+    pulse: number;
+    systolicBP: number;
+    diastolicBP: number;
+    date?: string;
+    time?: string;
+    timestamp?: Date;
+  }>;
+  viewMode?: 'graph' | 'table';
+  currentPage?: number;
+  pageSize?: number;
+  totalItems?: number;
+  controlSize?: 'sm' | 'md' | 'lg';
+  onAddData?: () => void;
+  onViewModeChange?: (mode: 'graph' | 'table') => void;
+  onPageChange?: (page: number) => void;
+  onPageSizeChange?: (pageSize: number) => void;
+  isAddButtonDisabled?: boolean;
+  patient?: {
+    uuid: string;
+    name: string;
+    gender: string;
+    age: string;
+  };
+  onPulseBPSubmit?: (data: { pulse: number; systolicBP: number; diastolicBP: number }) => void;
+}
+
+const PulseBPGraphWrapper: React.FC<PulseBPGraphWrapperProps> = ({
+  data = [],
+  tableData = [],
+  viewMode = 'graph',
+  currentPage = 1,
+  pageSize = 5,
+  totalItems = 0,
+  controlSize = 'sm',
+  onAddData,
+  onViewModeChange,
+  onPageChange,
+  onPageSizeChange,
+  isAddButtonDisabled = false,
+  patient,
+  onPulseBPSubmit,
+}) => {
+  const { t } = useTranslation();
+  const [isFormOpen, setIsFormOpen] = useState(false);
+
+  const formatDateTime = (item: any, index: number): string => {
+    if (item.timestamp) {
+      return (
+        item.timestamp.toLocaleDateString() +
+        ' ' +
+        item.timestamp.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+      );
+    }
+
+    if (item.date && item.time) {
+      return `${item.date} ${item.time}`;
+    }
+
+    if (item.date) {
+      return item.date;
+    }
+
+    if (item.time) {
+      return item.time;
+    }
+
+    const now = new Date();
+    return now.toLocaleDateString() + ' ' + now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+  };
+
+  const handleAddData = () => {
+    setIsFormOpen(true);
+    onAddData?.();
+  };
+
+  const handleFormSubmit = (formData: { pulse: number; systolicBP: number; diastolicBP: number }) => {
+    onPulseBPSubmit?.(formData);
+    setIsFormOpen(false);
+  };
+
+  const handleFormClose = () => {
+    setIsFormOpen(false);
+  };
+
+  const getPulseStatus = (pulse: number): { type: string; text: string } => {
+    if (isNaN(pulse)) {
+      return { type: 'gray', text: 'Invalid' };
+    }
+
+    if (pulse < 60) {
+      return { type: 'warm-gray', text: 'Low' };
+    } else if (pulse >= 60 && pulse <= 100) {
+      return { type: 'green', text: 'Normal' };
+    } else {
+      return { type: 'red', text: 'Abnormal' };
+    }
+  };
+
+  const getBPStatus = (systolic: number, diastolic: number): { type: string; text: string } => {
+    if (isNaN(systolic) || isNaN(diastolic)) {
+      return { type: 'gray', text: 'Invalid' };
+    }
+
+    if (systolic > 149 || diastolic > 80) {
+      return { type: 'red', text: 'High' };
+    } else if (systolic <= 90 || diastolic <= 60) {
+      return { type: 'warm-gray', text: 'Low' };
+    } else {
+      return { type: 'green', text: 'Normal' };
+    }
+  };
+
+  const [internalPage, setInternalPage] = useState(currentPage);
+  const [internalPageSize, setInternalPageSize] = useState(pageSize);
+  React.useEffect(() => {
+    setInternalPage(currentPage);
+  }, [currentPage]);
+  React.useEffect(() => {
+    setInternalPageSize(pageSize);
+  }, [pageSize]);
+
+  const { pageSizes: calculatedPageSizes, itemsDisplayed } = usePaginationInfo(
+    internalPageSize,
+    Math.ceil((totalItems || 0) / internalPageSize),
+    internalPage,
+    totalItems || 0,
+  );
+
+  const paginatedTableData = tableData.slice((internalPage - 1) * internalPageSize, internalPage * internalPageSize);
+
+  const headers = [
+    { key: 'dateTime', header: t('dateTime', 'Date & Time') },
+    { key: 'pulse', header: t('pulse', 'Pulse (bpm)') },
+    { key: 'bloodPressure', header: t('bloodPressure', 'Blood Pressure (mmHg)') },
+    { key: 'pulseStatus', header: t('pulseStatus', 'Pulse Status') },
+    { key: 'bpStatus', header: t('bpStatus', 'BP Status') },
+  ];
+
+  const rows = paginatedTableData.map((item, index) => {
+    const pulseStatus = getPulseStatus(item.pulse);
+    const bpStatus = getBPStatus(item.systolicBP, item.diastolicBP);
+    return {
+      id: `${internalPage}-${index}`,
+      dateTime: formatDateTime(item, index),
+      pulse: item.pulse,
+      bloodPressure: `${item.systolicBP}/${item.diastolicBP}`,
+      pulseStatus: <Tag type={pulseStatus.type as any}>{pulseStatus.text}</Tag>,
+      bpStatus: <Tag type={bpStatus.type as any}>{bpStatus.text}</Tag>,
+    };
+  });
+
+  return (
+    <div className={styles.fetalHeartRateSection}>
+      <div className={styles.fetalHeartRateContainer}>
+        <div className={styles.fetalHeartRateHeader}>
+          <div className={styles.fetalHeartRateTitle}>
+            <h3 className={styles.fetalHeartRateHeading}>{t('pulseAndBP', 'Pulse & BP')}</h3>
+            <div className={styles.fetalHeartRateControls}>
+              <Tag type="warm-gray" title="Low Pulse">
+                Low(&lt;60)
+              </Tag>
+              <Tag type="green" title="Normal Pulse">
+                Normal(60-100)
+              </Tag>
+              <Tag type="red" title="Abnormal Pulse">
+                Abnormal(&gt;100)
+              </Tag>
+              <Tag type="warm-gray" title="Low BP">
+                Low(S≤90 or D≤60)
+              </Tag>
+              <Tag type="green" title="Normal BP">
+                Normal(90&lt;S&lt;149 and 60&lt;D&lt;80)
+              </Tag>
+              <Tag type="red" title="High BP">
+                High(S≥149 or D≥80)
+              </Tag>
+            </div>
+          </div>
+          <div className={styles.fetalHeartRateControls}>
+            <div className={styles.viewToggle}>
+              <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 pulse and BP data"
+              disabled={isAddButtonDisabled}
+              onClick={handleAddData}
+              className={styles.addButton}>
+              Add
+            </Button>
+          </div>
+        </div>
+
+        {viewMode === 'graph' ? (
+          <PulseBPGraph data={data} />
+        ) : (
+          <div className={styles.tableContainer}>
+            {tableData && tableData.length > 0 ? (
+              <>
+                <TableContainer title="">
+                  <DataTable rows={rows} headers={headers} isSortable={false}>
+                    {({ rows, headers, getTableProps, getHeaderProps, getRowProps }) => (
+                      <Table {...getTableProps()} size={controlSize} className={styles.dataTable}>
+                        <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>
+                    )}
+                  </DataTable>
+                </TableContainer>
+                <Pagination
+                  page={internalPage}
+                  pageSize={internalPageSize}
+                  pageSizes={calculatedPageSizes}
+                  totalItems={totalItems}
+                  onChange={({ page, pageSize }) => {
+                    setInternalPage(page);
+                    setInternalPageSize(pageSize);
+                    onPageChange?.(page);
+                    onPageSizeChange?.(pageSize);
+                  }}
+                  className={styles.pagination}
+                />
+                {totalItems > 0 && <div className={styles.paginationInfo}>{itemsDisplayed}</div>}
+              </>
+            ) : (
+              <div className={styles.emptyTable}>
+                <p>{t('noPulseBPData', 'No pulse and BP data available')}</p>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+
+      <PulseBPForm isOpen={isFormOpen} onClose={handleFormClose} onSubmit={handleFormSubmit} patient={patient} />
+    </div>
+  );
+};
+
+export default PulseBPGraphWrapper;

package/src/maternal-and-child-health/partography/graphs/pulse-bp-graph.component.tsx

@@ -0,0 +1,267 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { LineChart } from '@carbon/charts-react';
+import styles from '../partography.scss';
+import { getColorForGraph } from '../types';
+
+export interface PulseBPData {
+  pulse: number;
+  systolicBP: number;
+  diastolicBP: number;
+  index?: number;
+  date?: string;
+  time?: string;
+  timestamp?: Date;
+}
+
+interface ChartDataPoint {
+  index: number;
+  group: string;
+  value: number;
+}
+
+interface PulseBPGraphProps {
+  data: PulseBPData[];
+}
+
+enum ScaleTypes {
+  LABELS = 'labels',
+  LINEAR = 'linear',
+}
+
+const PULSE_BP_CHART_OPTIONS = {
+  axes: {
+    bottom: {
+      title: '',
+      mapsTo: 'index',
+      scaleType: ScaleTypes.LINEAR,
+      domain: [0, 12],
+      ticks: {
+        values: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
+        formatter: (index: number) => '',
+      },
+    },
+    left: {
+      title: 'Pulse',
+      mapsTo: 'value',
+      domain: [60, 180],
+      ticks: {
+        values: [60, 70, 80, 90, 100, 110, 120, 130, 140, 150, 160, 170, 180],
+        formatter: (value: number) => `${value}`,
+      },
+      scaleType: ScaleTypes.LINEAR,
+    },
+  },
+  points: {
+    enabled: true,
+    radius: 4,
+    filled: true,
+  },
+  curve: 'curveLinear',
+  height: '400px',
+  theme: 'white',
+  toolbar: {
+    enabled: false,
+  },
+  legend: {
+    position: 'top',
+    clickable: false,
+  },
+  grid: {
+    x: {
+      enabled: true,
+      numberOfTicks: 13,
+    },
+    y: {
+      enabled: true,
+      numberOfTicks: 13,
+    },
+  },
+  zoomBar: {
+    top: {
+      enabled: false,
+    },
+  },
+};
+
+const PulseBPGraph: React.FC<PulseBPGraphProps> = ({ data }) => {
+  const { t } = useTranslation();
+
+  const formatDateTime = (item: PulseBPData, index: number): string => {
+    if (item.timestamp) {
+      return item.timestamp.toLocaleDateString() + ' ' + item.timestamp.toLocaleTimeString();
+    }
+    if (item.date && item.time) {
+      return `${item.date} ${item.time}`;
+    }
+    if (item.date) {
+      return item.date;
+    }
+    if (item.time) {
+      return item.time;
+    }
+    const now = new Date();
+    return now.toLocaleDateString() + ' ' + now.toLocaleTimeString();
+  };
+
+  const actualData: PulseBPData[] = data.length > 0 ? data : [];
+
+  const pulseChartData: ChartDataPoint[] = [];
+
+  if (actualData.length > 0) {
+    pulseChartData.push({ index: 0, value: actualData[0].pulse, group: 'Pulse' });
+    actualData.forEach((item, index) => {
+      pulseChartData.push({
+        index: index + 1,
+        value: item.pulse,
+        group: 'Pulse',
+      });
+    });
+  } else {
+    pulseChartData.push({ index: 0, value: 120, group: 'Pulse' });
+  }
+
+  const finalChartData = [...pulseChartData];
+
+  const chartOptions = {
+    ...PULSE_BP_CHART_OPTIONS,
+    title: 'Pulse and Blood Pressure Monitoring',
+    color: {
+      scale: {
+        Pulse: actualData.length > 0 ? getColorForGraph('blue') : 'transparent',
+      },
+    },
+    points: {
+      enabled: actualData.length > 0,
+      radius: 4,
+      filled: true,
+    },
+  };
+
+  return (
+    <div className={styles.pulseBPGraph}>
+      <div className={styles.chartContainer} data-chart-id="pulse-bp">
+        <div style={{ position: 'relative' }}>
+          <LineChart data={finalChartData} options={chartOptions} />
+
+          {actualData.length > 0 && (
+            <svg
+              style={{
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                width: '100%',
+                height: '100%',
+                pointerEvents: 'none',
+                zIndex: 5,
+              }}>
+              {actualData.map((item, index) => {
+                const chartMarginTop = 20;
+                const chartMarginBottom = 10;
+                const chartMarginLeft = 12;
+                const chartMarginRight = 5;
+
+                const chartWidth = 100 - chartMarginLeft - chartMarginRight;
+                const chartHeight = 100 - chartMarginTop - chartMarginBottom;
+
+                const dataPointIndex = index + 1;
+                const xPosition = chartMarginLeft + (dataPointIndex / 12) * chartWidth;
+
+                const gridUnit = chartWidth / 12;
+                const bpXPosition = chartMarginLeft + ((dataPointIndex - 1) / 12) * chartWidth;
+
+                const pulseYPosition = chartMarginTop + ((180 - item.pulse) / (180 - 60)) * chartHeight;
+                const systolicYPosition = chartMarginTop + ((180 - item.systolicBP) / (180 - 60)) * chartHeight;
+                const diastolicYPosition = chartMarginTop + ((180 - item.diastolicBP) / (180 - 60)) * chartHeight;
+
+                return (
+                  <g key={index}>
+                    <defs>
+                      <marker
+                        id={`systolic-arrow-${index}`}
+                        markerWidth="10"
+                        markerHeight="10"
+                        refX="5"
+                        refY="5"
+                        orient="auto"
+                        markerUnits="strokeWidth">
+                        <polygon points="0,0 10,5 0,10 3,5" fill={getColorForGraph('red')} />
+                      </marker>
+                      <marker
+                        id={`diastolic-arrow-${index}`}
+                        markerWidth="10"
+                        markerHeight="10"
+                        refX="5"
+                        refY="5"
+                        orient="auto"
+                        markerUnits="strokeWidth">
+                        <polygon points="0,0 10,5 0,10 3,5" fill={getColorForGraph('green')} />
+                      </marker>
+                    </defs>
+
+                    <line
+                      x1={`${bpXPosition}%`}
+                      y1={`${pulseYPosition}%`}
+                      x2={`${bpXPosition}%`}
+                      y2={`${systolicYPosition}%`}
+                      stroke={getColorForGraph('red')}
+                      strokeWidth="2"
+                      markerEnd={`url(#systolic-arrow-${index})`}
+                    />
+
+                    <line
+                      x1={`${bpXPosition}%`}
+                      y1={`${pulseYPosition}%`}
+                      x2={`${bpXPosition}%`}
+                      y2={`${diastolicYPosition}%`}
+                      stroke={getColorForGraph('green')}
+                      strokeWidth="2"
+                      markerEnd={`url(#diastolic-arrow-${index})`}
+                    />
+
+                    <circle
+                      cx={`${bpXPosition}%`}
+                      cy={`${systolicYPosition}%`}
+                      r="3"
+                      fill={getColorForGraph('red')}
+                      opacity="0.8">
+                      <title>
+                        {formatDateTime(item, index)} - Systolic BP: {item.systolicBP} mmHg
+                      </title>
+                    </circle>
+
+                    <circle
+                      cx={`${bpXPosition}%`}
+                      cy={`${diastolicYPosition}%`}
+                      r="3"
+                      fill={getColorForGraph('green')}
+                      opacity="0.8">
+                      <title>
+                        {formatDateTime(item, index)} - Diastolic BP: {item.diastolicBP} mmHg
+                      </title>
+                    </circle>
+
+                    <circle
+                      cx={`${bpXPosition}%`}
+                      cy={`${pulseYPosition}%`}
+                      r="4"
+                      fill={getColorForGraph('blue')}
+                      stroke="#fff"
+                      strokeWidth="1"
+                      opacity="0.9">
+                      <title>
+                        {formatDateTime(item, index)} - Pulse: {item.pulse} bpm
+                      </title>
+                    </circle>
+                  </g>
+                );
+              })}
+            </svg>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PulseBPGraph;