@kenyaemr/esm-patient-clinical-view-app 5.4.2-pre.2592 → 5.4.2-pre.2598

package/src/maternal-and-child-health/partography/cervical-dilation.component.tsx

@@ -1,16 +0,0 @@
-import { EmptyState } from '@openmrs/esm-patient-common-lib/src';
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-
-const CervicalDilation = () => {
-  const { t } = useTranslation();
-  return (
-    <EmptyState
-      headerTitle={t('cervicalDilation', 'Cervical Dilation')}
-      displayText={t('cervicalDilation', 'Cervical Dilation')}
-      launchForm={() => {}}
-    />
-  );
-};
-
-export default CervicalDilation;

package/src/maternal-and-child-health/partography/contraction-level.component.tsx

@@ -1,16 +0,0 @@
-import { EmptyState } from '@openmrs/esm-patient-common-lib';
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-
-const ContractionLevel = () => {
-  const { t } = useTranslation();
-  return (
-    <EmptyState
-      headerTitle={t('contractionLevel', 'Contraction level')}
-      displayText={t('contractionLevel', 'Contraction level')}
-      launchForm={() => {}}
-    />
-  );
-};
-
-export default ContractionLevel;

package/src/maternal-and-child-health/partography/descent-of-head.component.tsx

@@ -1,16 +0,0 @@
-import { EmptyState } from '@openmrs/esm-patient-common-lib';
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-
-const DescentOfHead = () => {
-  const { t } = useTranslation();
-  return (
-    <EmptyState
-      headerTitle={t('descentOfHead', 'Descent of Head')}
-      displayText={t('descentOfHead', 'Descent of Head')}
-      launchForm={() => {}}
-    />
-  );
-};
-
-export default DescentOfHead;

package/src/maternal-and-child-health/partography/foetal-heart-rate.component.tsx

@@ -1,17 +0,0 @@
-import { EmptyState } from '@openmrs/esm-patient-common-lib';
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-
-const FoetalHeartRate = () => {
-  const { t } = useTranslation();
-
-  return (
-    <EmptyState
-      headerTitle={t('foetalHeartRate', 'Foetal Heart Rate')}
-      displayText={t('foetalHeartRate', 'Foetal Heart Rate')}
-      launchForm={() => {}}
-    />
-  );
-};
-
-export default FoetalHeartRate;

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

@@ -1,17 +0,0 @@
-import { EmptyState } from '@openmrs/esm-patient-common-lib';
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-
-const MembraneAmnioticFluidAndMoulding = () => {
-  const { t } = useTranslation();
-
-  return (
-    <EmptyState
-      headerTitle={t('membraneAmnioticFluidAndMoulding', 'Membrane Amniotic Fluid & Moulding')}
-      displayText={t('membraneAmnioticFluidAndMoulding', 'Membrane Amniotic Fluid & Moulding')}
-      launchForm={() => {}}
-    />
-  );
-};
-
-export default MembraneAmnioticFluidAndMoulding;

package/src/maternal-and-child-health/partography/partograph-chart.scss

@@ -1,94 +0,0 @@
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
-@use '~@openmrs/esm-styleguide/src/vars' as *;
-
-.label01 {
-  @include type.type-style('label-01');
-}
-
-.bodyShort01 {
-  @include type.type-style('body-compact-01');
-}
-
-.vitalsChartContainer {
-  margin-bottom: spacing.$spacing-05;
-}
-
-.vitalSignsArea {
-  flex-grow: 1;
-  margin: spacing.$spacing-03 0;
-  padding-right: spacing.$spacing-05;
-}
-
-.vitalsChartArea {
-  flex-grow: 4;
-  padding: 0 spacing.$spacing-05 spacing.$spacing-09;
-
-  :global(.cds--cc--layout-row) {
-    height: 0;
-  }
-
-  :global(.layout-child) {
-    margin-top: 0.5rem;
-  }
-}
-
-.vitalsSignLabel {
-  @extend .label01;
-  margin-bottom: 1rem;
-  margin-left: 1.5rem;
-  display: inline-block;
-}
-
-.verticalTabs {
-  margin: 1rem 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: 0rem;
-  }
-
-  :global(.cds--tabs--scrollable .cds--tabs--scrollable__nav-link) {
-    border-bottom: 0 !important;
-    border-left: 2px solid $color-gray-30;
-  }
-}
-
-.tab {
-  outline: 0;
-  outline-offset: 0;
-
-  &:active,
-  &:focus {
-    outline: 2px solid var(--brand-03) !important;
-  }
-
-  &[aria-selected='true'] {
-    border-left: 3px solid var(--brand-03);
-    border-bottom: none;
-    font-weight: 600;
-    margin-left: 0rem !important;
-  }
-
-  &[aria-selected='false'] {
-    border-bottom: none;
-    border-left: 2px solid $ui-03;
-    margin-left: 0rem !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/maternal-and-child-health/partography/partograph-chart.tsx

@@ -1,176 +0,0 @@
-import React, { useMemo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Tab, TabsVertical, TabListVertical, TabPanels, TabPanel } from '@carbon/react';
-import { LineChart } from '@carbon/charts-react';
-import styles from './partograph-chart.scss';
-
-interface PartographyComponent {
-  date: string;
-  fetalHeartRate?: number;
-  cervicalDilation?: number;
-  descentOfHead?: string | number;
-  [key: string]: any;
-}
-
-interface PartographChartProps {
-  partograpyComponents: PartographyComponent[];
-}
-
-interface PartographSignOption {
-  id: string;
-  title: string;
-  value: keyof PartographyComponent;
-}
-
-enum ScaleTypes {
-  TIME = 'time',
-  LINEAR = 'linear',
-  LOG = 'log',
-  LABELS = 'labels',
-  LABELS_RATIO = 'labels-ratio',
-}
-
-const PartographChart: React.FC<PartographChartProps> = ({ partograpyComponents }) => {
-  const { t } = useTranslation();
-
-  const processedPartographData = useMemo(() => {
-    return partograpyComponents.map((item) => {
-      const processedItem = { ...item };
-
-      if (typeof item.descentOfHead === 'string' && item.descentOfHead.includes('/')) {
-        const [numerator, denominator] = item.descentOfHead.split('/').map(Number);
-        processedItem.descentOfHead = denominator !== 0 ? (numerator / denominator) * 10 : 10;
-      }
-
-      return processedItem;
-    });
-  }, [partograpyComponents]);
-
-  const getFormattedValue = (value: any): string => {
-    if (value === undefined || value === null) {
-      return '-';
-    }
-    return value.toString();
-  };
-
-  const partographSignOptions = useMemo<PartographSignOption[]>(() => {
-    const firstValidItem = processedPartographData.find(
-      (item) =>
-        item.fetalHeartRate !== undefined || item.cervicalDilation !== undefined || item.descentOfHead !== undefined,
-    );
-
-    const fetalHeartRate = firstValidItem?.fetalHeartRate;
-    const cervicalDilation = firstValidItem?.cervicalDilation;
-    const descentOfHead = firstValidItem?.descentOfHead;
-
-    return [
-      {
-        id: 'fetalHeartRate',
-        title: `Heart Rate (${getFormattedValue(fetalHeartRate)})`,
-        value: 'fetalHeartRate',
-      },
-      {
-        id: 'cervicalDilation',
-        title: `Cervical Dilation (${getFormattedValue(cervicalDilation)})`,
-        value: 'cervicalDilation',
-      },
-      {
-        id: 'descentOfHead',
-        title: `Descent of Head (${getFormattedValue(descentOfHead)})`,
-        value: 'descentOfHead',
-      },
-    ];
-  }, [processedPartographData]);
-
-  const [selectedPartographSign, setSelectedPartographSign] = useState<PartographSignOption>(partographSignOptions[0]);
-
-  const chartData = useMemo(() => {
-    if (!processedPartographData.length) {
-      return [];
-    }
-
-    return processedPartographData
-      .filter((item) => item[selectedPartographSign.value] !== undefined)
-      .slice(0, 10)
-      .sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime())
-      .map((item) => ({
-        group: selectedPartographSign.title,
-        value: item[selectedPartographSign.value],
-        date: item.date,
-      }));
-  }, [processedPartographData, selectedPartographSign]);
-
-  const chartOptions = useMemo(
-    () => ({
-      title: t('partoGraphtChartTitle', 'PartoGraph Chart'),
-      axes: {
-        bottom: {
-          title: t('time', 'Time'),
-          mapsTo: 'date',
-          scaleType: ScaleTypes.TIME,
-        },
-        left: {
-          mapsTo: 'value',
-          title: selectedPartographSign.title,
-          scaleType: ScaleTypes.LINEAR,
-          includeZero: false,
-        },
-      },
-      curve: 'curveMonotoneX',
-      height: '400px',
-      tooltip: {
-        customHTML: ([{ value, group }]: any) => `
-        <div class="cds--tooltip cds--tooltip--shown" style="min-width: max-content; font-weight:600">
-          ${value} - ${String(group).toUpperCase()}
-          <span style="color: #c6c6c6; font-size: 1rem; font-weight:600">${group}</span>
-        </div>
-      `,
-      },
-    }),
-    [t, selectedPartographSign.title],
-  );
-
-  const handleTabSelect = (option: PartographSignOption) => {
-    setSelectedPartographSign(option);
-  };
-
-  React.useEffect(() => {
-    const currentOption = partographSignOptions.find((option) => option.id === selectedPartographSign.id);
-    // Update to the new option or default to the first option
-    setSelectedPartographSign(currentOption || partographSignOptions[0]);
-  }, [partographSignOptions, selectedPartographSign.id]);
-
-  return (
-    <div className={styles.vitalsChartContainer}>
-      <div className={styles.partographSignsArea}>
-        <label className={styles.vitalsSignLabel} htmlFor="partography-chart-tab-group">
-          {t('partographyDisplay', 'Partography Displayed')}
-        </label>
-        <TabsVertical height="">
-          <TabListVertical>
-            {partographSignOptions.map((option) => (
-              <Tab
-                key={option.id}
-                className={`${styles.tab} ${styles.bodyLong01} ${
-                  selectedPartographSign.id === option.id ? styles.selectedTab : ''
-                }`}
-                onClick={() => handleTabSelect(option)}>
-                {option.title}
-              </Tab>
-            ))}
-          </TabListVertical>
-
-          <TabPanels>
-            {partographSignOptions.map(({ id, title, value }) => (
-              <TabPanel key={id}>
-                <LineChart data={chartData.flat()} options={chartOptions} />
-              </TabPanel>
-            ))}
-          </TabPanels>
-        </TabsVertical>
-      </div>
-    </div>
-  );
-};
-
-export default PartographChart;