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

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

@@ -0,0 +1,190 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  Button,
+  DataTable,
+  TableContainer,
+  Table,
+  TableHead,
+  TableRow,
+  TableHeader,
+  TableBody,
+  TableCell,
+  Pagination,
+  Tag,
+} from '@carbon/react';
+import { Add, ChartColumn, Table as TableIcon } from '@carbon/react/icons';
+import styles from '../partography.scss';
+import OxytocinGraphComponent from './oxytocin-graph.component';
+import { usePaginationInfo } from '@openmrs/esm-patient-common-lib';
+
+export interface OxytocinData {
+  timeSlot: string;
+  oxytocinUsed: 'yes' | 'no';
+  dropsPerMinute: number;
+  date?: string;
+  id?: string;
+}
+
+interface OxytocinGraphProps {
+  data: OxytocinData[];
+  tableData: any[];
+  viewMode: 'graph' | 'table';
+  currentPage: number;
+  pageSize: number;
+  totalItems: number;
+  controlSize: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+  onAddData: () => void;
+  onViewModeChange: (mode: 'graph' | 'table') => void;
+  onPageChange: (page: number) => void;
+  onPageSizeChange: (size: number) => void;
+  isAddButtonDisabled: boolean;
+}
+
+const OxytocinGraph: React.FC<OxytocinGraphProps> = ({
+  data,
+  tableData,
+  viewMode,
+  currentPage,
+  pageSize,
+  totalItems,
+  controlSize,
+  onAddData,
+  onViewModeChange,
+  onPageChange,
+  onPageSizeChange,
+  isAddButtonDisabled,
+}) => {
+  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: 'timeSlot', header: t('time', 'Time') },
+    { key: 'oxytocinUsed', header: t('oxytocinUsed', 'Oxytocin Used') },
+    { key: 'dropsPerMinute', header: t('dropsPerMinute', 'Drops per Minute') },
+  ];
+
+  return (
+    <div className={styles.graphContainer}>
+      <div className={styles.graphHeader}>
+        <div className={styles.graphHeaderLeft}>
+          <h6>{t('oxytocinAdministration', 'Oxytocin Administration')}</h6>
+          <Tag type="outline">{t('oxytocinRange', '0-60 drops/min')}</Tag>
+        </div>
+        <div className={styles.graphHeaderRight}>
+          <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} onClick={onAddData} disabled={isAddButtonDisabled}>
+            {t('add', 'Add')}
+          </Button>
+        </div>
+      </div>
+      <p className={styles.graphDescription}>
+        {t('oxytocinDescription', 'Track oxytocin administration and drops per minute over time')}
+      </p>
+
+      {viewMode === 'graph' ? (
+        <div className={styles.chartContainer}>
+          <OxytocinGraphComponent data={data} />
+        </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.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 as 'sm' | 'md' | 'lg'}
+                />
+              )}
+              {totalItems > 0 && <div className={styles.paginationInfo}>{itemsDisplayed}</div>}
+              <div className={styles.tableStats}>
+                <span className={styles.recordCount}>
+                  {t('showingResults', 'Showing {{start}}-{{end}} of {{total}} {{itemType}}', {
+                    start: totalItems === 0 ? 0 : startIndex + 1,
+                    end: Math.min(endIndex, totalItems),
+                    total: totalItems,
+                    itemType: totalItems === 1 ? t('record', 'record') : t('records', 'records'),
+                  })}
+                </span>
+              </div>
+            </>
+          ) : (
+            <div className={styles.emptyState}>
+              <p>{t('noOxytocinData', 'No oxytocin data available')}</p>
+              <Button kind="primary" size={controlSize} renderIcon={Add} onClick={onAddData}>
+                {t('addFirstDataPoint', 'Add first data point')}
+              </Button>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default OxytocinGraph;

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

@@ -0,0 +1,126 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import styles from '../partography.scss';
+
+export interface OxytocinData {
+  timeSlot: string;
+  oxytocinUsed: 'yes' | 'no';
+  dropsPerMinute: number;
+}
+
+interface OxytocinGraphProps {
+  data: OxytocinData[];
+}
+
+const OxytocinGraph: React.FC<OxytocinGraphProps> = ({ data }) => {
+  const { t } = useTranslation();
+
+  const getTimeColumns = () => {
+    const emptyColumns = Array.from({ length: 13 }, (_, i) => `grid-${i + 1}`);
+    if (data.length === 0) {
+      return emptyColumns;
+    }
+    const dataTimeSlots = [...new Set(data.map((item) => item.timeSlot))].sort();
+    if (dataTimeSlots.length <= 13) {
+      const remainingEmpty = Array.from({ length: 13 - dataTimeSlots.length }, (_, i) => `empty-${i + 1}`);
+      return [...dataTimeSlots, ...remainingEmpty];
+    }
+    return dataTimeSlots;
+  };
+
+  const timeColumns = getTimeColumns();
+
+  const rows = [
+    { id: 'oxytocin', label: t('oxytocin', 'Oxytocin') },
+    { id: 'drops', label: t('dropsPerMinute', 'Drops per minute') },
+  ];
+
+  const getDataForTimeSlot = (timeSlot: string): OxytocinData | undefined => {
+    if (timeSlot.startsWith('grid-') || timeSlot.startsWith('empty-')) {
+      return undefined;
+    }
+    return data.find((item) => item.timeSlot === timeSlot);
+  };
+
+  const getCellContent = (rowId: string, timeSlot: string) => {
+    const dataPoint = getDataForTimeSlot(timeSlot);
+
+    if (rowId === 'oxytocin') {
+      return dataPoint?.oxytocinUsed === 'yes' ? '✅' : '';
+    }
+
+    if (rowId === 'drops') {
+      return dataPoint?.oxytocinUsed === 'yes' ? dataPoint.dropsPerMinute.toString() : '';
+    }
+
+    return '';
+  };
+
+  const getCellClass = (rowId: string, timeSlot: string): string => {
+    const dataPoint = getDataForTimeSlot(timeSlot);
+    if (!dataPoint || dataPoint.oxytocinUsed === 'no') {
+      return '';
+    }
+
+    if (rowId === 'drops') {
+      const drops = dataPoint.dropsPerMinute;
+      if (drops >= 40) {
+        return 'oxytocinBarHigh';
+      }
+      if (drops >= 20) {
+        return 'oxytocinBarMedium';
+      }
+      if (drops > 0) {
+        return 'oxytocinBarLow';
+      }
+    }
+
+    return '';
+  };
+
+  return (
+    <div className={styles.membraneGrid}>
+      <div className={styles.gridContainer}>
+        <div className={styles.gridHeader}>
+          <div className={styles.gridCell}>{t('time', 'Time')}</div>
+          {timeColumns.map((timeColumn) => (
+            <div key={timeColumn} className={styles.gridCell}>
+              {timeColumn.startsWith('grid-') || timeColumn.startsWith('empty-') ? '' : timeColumn}
+            </div>
+          ))}
+        </div>
+
+        {rows.map((row) => (
+          <div key={row.id} className={styles.gridRow}>
+            <div className={styles.gridRowLabel}>{row.label}</div>
+            {timeColumns.map((timeColumn) => {
+              const content = getCellContent(row.id, timeColumn);
+              const cellClass = getCellClass(row.id, timeColumn);
+              return (
+                <div
+                  key={`${timeColumn}-${row.id}`}
+                  className={`${styles.gridCell} ${cellClass}`}
+                  data-time-slot={timeColumn}
+                  data-row={row.id}
+                  title={`${timeColumn}: ${content || 'No data'}`}>
+                  {content && (
+                    <span
+                      style={{
+                        fontWeight: 'bold',
+                        fontSize: row.id === 'oxytocin' ? '16px' : '14px',
+                        color: cellClass.includes('High') ? 'white' : 'inherit',
+                      }}>
+                      {content}
+                    </span>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default OxytocinGraph;

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

@@ -0,0 +1,266 @@
+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 } from '../types';
+import { usePaginationInfo } from '@openmrs/esm-patient-common-lib';
+
+enum ScaleTypes {
+  LABELS = 'labels',
+  LINEAR = 'linear',
+}
+
+interface ChartDataPoint {
+  hour: number;
+  time?: string;
+  group: string;
+  value: number;
+}
+
+interface GraphDefinition {
+  id: string;
+  title: string;
+  color: string;
+  yAxisLabel: string;
+  yMin: number;
+  yMax: number;
+  normalRange: string;
+  description: string;
+}
+
+interface PartographGraphProps {
+  graph: GraphDefinition;
+  data: ChartDataPoint[];
+  tableData: any[];
+  viewMode: 'graph' | 'table';
+  currentPage: number;
+  pageSize: number;
+  totalItems: number;
+  isLoading: boolean;
+  controlSize: 'sm' | 'md';
+  onAddData: () => void;
+  onViewModeChange: (mode: 'graph' | 'table') => void;
+  onPageChange: (page: number) => void;
+  onPageSizeChange: (size: number) => void;
+  getTableHeaders: () => Array<{ key: string; header: string }>;
+  getColorForGraph: (color: string) => string;
+}
+
+const PartographGraph: React.FC<PartographGraphProps> = ({
+  graph,
+  data,
+  tableData,
+  viewMode,
+  currentPage,
+  pageSize,
+  totalItems,
+  isLoading,
+  controlSize,
+  onAddData,
+  onViewModeChange,
+  onPageChange,
+  onPageSizeChange,
+  getTableHeaders,
+  getColorForGraph,
+}) => {
+  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 chartOptions = {
+    title: graph.title,
+    axes: {
+      bottom: {
+        title: undefined,
+        mapsTo: 'time',
+        scaleType: ScaleTypes.LABELS,
+        tick: {
+          formatter: () => '',
+        },
+      },
+      left: {
+        title: graph.yAxisLabel,
+        mapsTo: 'value',
+        scaleType: ScaleTypes.LINEAR,
+        domain: [graph.yMin, graph.yMax],
+      },
+    },
+    curve: 'curveLinear',
+    height: '500px',
+    color: {
+      scale: {
+        [data[0]?.group || graph.id]: getColorForGraph(graph.color),
+        Systolic: getColorForGraph('red'),
+        Diastolic: getColorForGraph('green'),
+      },
+    },
+    points: {
+      enabled: true,
+      radius: 5,
+      filled: true,
+    },
+    legend: {
+      position: 'bottom',
+      clickable: false,
+    },
+    theme: 'white',
+    toolbar: {
+      enabled: false,
+    },
+  };
+
+  const shouldRenderChart = data.length > 0;
+
+  return (
+    <div className={styles.graphContainer}>
+      <div className={styles.graphHeader}>
+        <div className={styles.graphHeaderLeft}>
+          <h6>{graph.title}</h6>
+          <Tag type="outline">{graph.normalRange}</Tag>
+        </div>
+        <div className={styles.graphHeaderRight}>
+          <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} onClick={onAddData}>
+            {t('add', 'Add')}
+          </Button>
+        </div>
+      </div>
+      <p className={styles.graphDescription}>{graph.description}</p>
+
+      {viewMode === 'graph' ? (
+        <div className={styles.chartContainer}>
+          {shouldRenderChart ? (
+            <LineChart data={data} options={chartOptions} />
+          ) : (
+            <LineChart
+              data={[{ group: graph.title, time: t('noData', 'No Data'), value: graph.yMin }]}
+              options={{
+                ...chartOptions,
+                legend: { enabled: false },
+                points: { enabled: false },
+                color: { scale: { [graph.title]: getColorForGraph('gray') } },
+              }}
+            />
+          )}
+
+          {data.length > 0 && !isLoading && (
+            <div className={styles.chartStats}>
+              <div className={styles.statItem}>
+                <span className={styles.statLabel}>{t('latest', 'Latest')}:</span>
+                <span className={styles.statValue}>
+                  {data[data.length - 1]?.value?.toFixed(1)} {graph.yAxisLabel}
+                </span>
+              </div>
+              <div className={styles.statItem}>
+                <span className={styles.statLabel}>{t('average', 'Average')}:</span>
+                <span className={styles.statValue}>
+                  {(data.reduce((sum, item) => sum + item.value, 0) / data.length).toFixed(1)} {graph.yAxisLabel}
+                </span>
+              </div>
+            </div>
+          )}
+        </div>
+      ) : (
+        <div className={styles.tableContainer}>
+          {paginatedData.length > 0 ? (
+            <>
+              <DataTable rows={paginatedData} headers={getTableHeaders()}>
+                {({ 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 this graph')}</p>
+              <Button kind="primary" size={controlSize} renderIcon={Add} onClick={onAddData}>
+                {t('addFirstDataPoint', 'Add first data point')}
+              </Button>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default PartographGraph;