@kenyaemr/esm-patient-clinical-view-app 5.4.2-pre.2823 → 5.4.2-pre.2832

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

@@ -214,54 +214,98 @@ const CervixGraph: React.FC<CervixGraphProps> = ({
             }
           }
         });
-        const svgCircles = chartContainer.querySelectorAll('svg circle');
-        svgCircles.forEach((circle) => {
+        const svg = chartContainer.querySelector('svg');
+        if (svg) {
+          svg.querySelectorAll('[data-custom-marker]').forEach((marker) => marker.remove());
+        }
+
+        const circles = chartContainer.querySelectorAll('svg circle');
+        let processedCount = 0;
+        circles.forEach((circle, index) => {
           const circleElement = circle as SVGCircleElement;
-          const parentGroup = circleElement.closest('g');
-          let isCervicalDilation = false;
-          if (circleElement.hasAttribute('data-group')) {
-            isCervicalDilation = circleElement.getAttribute('data-group')?.toLowerCase().includes('cervical dilation');
-          }
-          if (!isCervicalDilation && parentGroup) {
-            const groupLabel = parentGroup.getAttribute('aria-label') || parentGroup.getAttribute('data-name') || '';
-            if (groupLabel.toLowerCase().includes('cervical dilation')) {
-              isCervicalDilation = true;
-            }
-          }
-          if (!isCervicalDilation) {
-            const stroke = (circleElement.getAttribute('stroke') || circleElement.style.stroke || '').toLowerCase();
-            const fill = (circleElement.getAttribute('fill') || circleElement.style.fill || '').toLowerCase();
-            isCervicalDilation =
-              stroke.includes('green') ||
-              fill.includes('green') ||
-              stroke.includes('#42be65') ||
-              fill.includes('#42be65') ||
-              stroke.includes('#24a148') ||
-              fill.includes('#24a148') ||
-              stroke.includes('rgb(36, 161, 72)') ||
-              fill.includes('rgb(36, 161, 72)') ||
-              stroke.includes('rgb(66, 190, 101)') ||
-              fill.includes('rgb(66, 190, 101)');
-          }
-          if (isCervicalDilation && parentGroup) {
+          const cx = parseFloat(circleElement.getAttribute('cx') || '0');
+          const cy = parseFloat(circleElement.getAttribute('cy') || '0');
+          const fill = (circleElement.getAttribute('fill') || circleElement.style.fill || '').toLowerCase();
+          const stroke = (circleElement.getAttribute('stroke') || circleElement.style.stroke || '').toLowerCase();
+          const isGreen =
+            fill.includes('green') ||
+            stroke.includes('green') ||
+            fill.includes('#42be65') ||
+            stroke.includes('#42be65') ||
+            fill.includes('#24a148') ||
+            stroke.includes('#24a148') ||
+            fill.includes('#198038') ||
+            stroke.includes('#198038') ||
+            fill.includes('rgb(66, 190, 101)') ||
+            stroke.includes('rgb(66, 190, 101)') ||
+            fill.includes('rgb(36, 161, 72)') ||
+            stroke.includes('rgb(36, 161, 72)') ||
+            fill.includes('rgb(25, 128, 56)') ||
+            stroke.includes('rgb(25, 128, 56)') ||
+            fill.includes('#008000') ||
+            stroke.includes('#008000') ||
+            fill.includes('#00ff00') ||
+            stroke.includes('#00ff00') ||
+            fill.includes('#228b22') ||
+            stroke.includes('#228b22') ||
+            fill.includes('#32cd32') ||
+            stroke.includes('#32cd32') ||
+            /^#[0-4][0-9a-f][a-f0-9][0-9a-f][a-f0-9][0-9a-f]/.test(fill) ||
+            /^#[0-4][0-9a-f][a-f0-9][0-9a-f][a-f0-9][0-9a-f]/.test(stroke);
+
+          if (isGreen && svg && cx > 0 && cy > 0) {
+            processedCount++;
+            circleElement.style.opacity = '0';
             circleElement.style.display = 'none';
+            const size = 8;
+            const xColor = '#24a148';
+
+            const line1 = document.createElementNS(SVG_NAMESPACE, 'line');
+            line1.setAttribute('x1', (cx - size).toString());
+            line1.setAttribute('y1', (cy - size).toString());
+            line1.setAttribute('x2', (cx + size).toString());
+            line1.setAttribute('y2', (cy + size).toString());
+            line1.setAttribute('stroke', xColor);
+            line1.setAttribute('stroke-width', '3');
+            line1.setAttribute('stroke-linecap', 'round');
+            line1.setAttribute('data-custom-marker', 'cervical-x');
+
+            const line2 = document.createElementNS(SVG_NAMESPACE, 'line');
+            line2.setAttribute('x1', (cx + size).toString());
+            line2.setAttribute('y1', (cy - size).toString());
+            line2.setAttribute('x2', (cx - size).toString());
+            line2.setAttribute('y2', (cy + size).toString());
+            line2.setAttribute('stroke', xColor);
+            line2.setAttribute('stroke-width', '3');
+            line2.setAttribute('stroke-linecap', 'round');
+            line2.setAttribute('data-custom-marker', 'cervical-x');
+
+            svg.appendChild(line1);
+            svg.appendChild(line2);
+          }
+        });
+        if (processedCount === 0) {
+          circles.forEach((circle, index) => {
+            const circleElement = circle as SVGCircleElement;
             const cx = parseFloat(circleElement.getAttribute('cx') || '0');
             const cy = parseFloat(circleElement.getAttribute('cy') || '0');
-            const size = 12;
-            const xColor = '#8a3ffc';
-            const svg = circleElement.ownerSVGElement;
-            if (svg) {
-              // Prevent duplicate Xs
-              if (!parentGroup.querySelector('line[data-x-marker]')) {
+            if (cy > 200 && cy < 400 && cx > 100 && svg) {
+              const isAlreadyHidden = circleElement.style.opacity === '0' || circleElement.style.display === 'none';
+
+              if (!isAlreadyHidden) {
+                circleElement.style.opacity = '0';
+                const size = 8;
+                const xColor = '#24a148';
+
                 const line1 = document.createElementNS(SVG_NAMESPACE, 'line');
                 line1.setAttribute('x1', (cx - size).toString());
                 line1.setAttribute('y1', (cy - size).toString());
                 line1.setAttribute('x2', (cx + size).toString());
                 line1.setAttribute('y2', (cy + size).toString());
                 line1.setAttribute('stroke', xColor);
-                line1.setAttribute('stroke-width', '5');
+                line1.setAttribute('stroke-width', '3');
                 line1.setAttribute('stroke-linecap', 'round');
-                line1.setAttribute('data-x-marker', 'true');
+                line1.setAttribute('data-custom-marker', 'cervical-x-alt');
 
                 const line2 = document.createElementNS(SVG_NAMESPACE, 'line');
                 line2.setAttribute('x1', (cx + size).toString());
@@ -269,30 +313,40 @@ const CervixGraph: React.FC<CervixGraphProps> = ({
                 line2.setAttribute('x2', (cx - size).toString());
                 line2.setAttribute('y2', (cy + size).toString());
                 line2.setAttribute('stroke', xColor);
-                line2.setAttribute('stroke-width', '5');
+                line2.setAttribute('stroke-width', '3');
                 line2.setAttribute('stroke-linecap', 'round');
-                line2.setAttribute('data-x-marker', 'true');
+                line2.setAttribute('data-custom-marker', 'cervical-x-alt');
 
-                parentGroup.appendChild(line1);
-                parentGroup.appendChild(line2);
+                svg.appendChild(line1);
+                svg.appendChild(line2);
               }
             }
-          }
-        });
+          });
+        }
       }
     };
 
-    const timer = setTimeout(applyChartStyling, 100);
+    // Apply styling with multiple aggressive timing attempts
+    const timer1 = setTimeout(applyChartStyling, 50);
+    const timer2 = setTimeout(applyChartStyling, 200);
+    const timer3 = setTimeout(applyChartStyling, 500);
+    const timer4 = setTimeout(applyChartStyling, 1000);
+    const timer5 = setTimeout(applyChartStyling, 2000);
+
     const chartContainer = document.querySelector(`[data-chart-id="cervix"]`);
     if (chartContainer && window.MutationObserver) {
       observer = new MutationObserver(() => {
-        applyChartStyling();
+        setTimeout(applyChartStyling, 100);
       });
       observer.observe(chartContainer, { childList: true, subtree: true });
     }
 
     return () => {
-      clearTimeout(timer);
+      clearTimeout(timer1);
+      clearTimeout(timer2);
+      clearTimeout(timer3);
+      clearTimeout(timer4);
+      clearTimeout(timer5);
       if (observer) {
         observer.disconnect();
       }

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

@@ -19,7 +19,8 @@ const OxytocinGraph: React.FC<OxytocinGraphProps> = ({ data }) => {
     const emptyColumns = Array.from({ length: 20 }, (_, i) => `grid-${i + 1}`);
 
     if (data && data.length > 0) {
-      const dataSlots = data.map((item, i) => `data-${i + 1}`);
+      // Use actual time slots from data instead of generic data-1, data-2
+      const dataSlots = data.map((item) => item.timeSlot);
       const remainingEmpty = Array.from({ length: 20 - data.length }, (_, i) => `empty-${i + 1}`);
       return [...dataSlots, ...remainingEmpty];
     }

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

@@ -1,8 +1,8 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { LineChart } from '@carbon/charts-react';
 import styles from '../partography.scss';
-import { getColorForGraph } from '../types';
+import { getColorForGraph, SVG_NAMESPACE } from '../types';
 
 export interface PulseBPData {
   pulse: number;
@@ -35,9 +35,9 @@ const PULSE_BP_CHART_OPTIONS = {
       title: '',
       mapsTo: 'index',
       scaleType: ScaleTypes.LINEAR,
-      domain: [0, 12],
+      domain: [0, 20],
       ticks: {
-        values: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
+        values: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20],
         formatter: (index: number) => '',
       },
     },
@@ -70,7 +70,7 @@ const PULSE_BP_CHART_OPTIONS = {
   grid: {
     x: {
       enabled: true,
-      numberOfTicks: 13,
+      numberOfTicks: 21,
     },
     y: {
       enabled: true,
@@ -104,7 +104,7 @@ const PulseBPGraph: React.FC<PulseBPGraphProps> = ({ data }) => {
     return now.toLocaleDateString() + ' ' + now.toLocaleTimeString();
   };
 
-  const actualData: PulseBPData[] = data.length > 0 ? data : [];
+  const actualData: PulseBPData[] = React.useMemo(() => (data.length > 0 ? data : []), [data]);
 
   const pulseChartData: ChartDataPoint[] = [];
 
@@ -113,154 +113,252 @@ const PulseBPGraph: React.FC<PulseBPGraphProps> = ({ data }) => {
       pulseChartData.push({
         index: index,
         value: item.pulse,
-        group: 'Pulse',
+        group: 'Pulse-Line',
+      });
+    });
+    actualData.forEach((item, index) => {
+      pulseChartData.push({
+        index: index,
+        value: item.systolicBP,
+        group: 'Systolic-Points',
+      });
+      pulseChartData.push({
+        index: index,
+        value: item.diastolicBP,
+        group: 'Diastolic-Points',
       });
     });
   } else {
-    pulseChartData.push({ index: 0, value: 120, group: 'Pulse' });
+    pulseChartData.push({ index: 0, value: 120, group: 'Pulse-Line' });
   }
 
   const finalChartData = [...pulseChartData];
+  const colorScale: { [key: string]: string } = {
+    'Pulse-Line': actualData.length > 0 ? getColorForGraph('blue') : 'transparent',
+    'Systolic-Points': 'transparent',
+    'Diastolic-Points': 'transparent',
+  };
 
   const chartOptions = {
     ...PULSE_BP_CHART_OPTIONS,
     title: 'Pulse and Blood Pressure Monitoring',
     color: {
-      scale: {
-        Pulse: actualData.length > 0 ? getColorForGraph('blue') : 'transparent',
-      },
+      scale: colorScale,
     },
     points: {
       enabled: actualData.length > 0,
-      radius: 4,
+      radius: 5,
       filled: true,
+      strokeWidth: 2,
+    },
+    legend: {
+      position: 'top',
+      clickable: false,
+      enabled: false,
+    },
+    tooltip: {
+      showTotal: false,
+      customHTML: (data: any) => {
+        if (data && data.length > 0) {
+          const point = data[0];
+          // Just return the value - clean and simple
+          return `<div style="background: #333; color: white; padding: 8px; border-radius: 4px; font-size: 14px; border: none;">
+            ${point.value}
+          </div>`;
+        }
+        return '';
+      },
     },
   };
 
+  useEffect(() => {
+    let observer: MutationObserver | null = null;
+    const addXMarker = (svg: SVGElement, cx: number, cy: number) => {
+      const size = 3;
+      const systolicColor = '#da1e28';
+      const line1 = document.createElementNS(SVG_NAMESPACE, 'line');
+      line1.setAttribute('x1', (cx - size).toString());
+      line1.setAttribute('y1', (cy + size).toString());
+      line1.setAttribute('x2', cx.toString());
+      line1.setAttribute('y2', (cy - size).toString());
+      line1.setAttribute('stroke', systolicColor);
+      line1.setAttribute('stroke-width', '3');
+      line1.setAttribute('stroke-linecap', 'round');
+      line1.setAttribute('data-custom-marker', 'systolic-inverted-v');
+
+      const line2 = document.createElementNS(SVG_NAMESPACE, 'line');
+      line2.setAttribute('x1', cx.toString());
+      line2.setAttribute('y1', (cy - size).toString());
+      line2.setAttribute('x2', (cx + size).toString());
+      line2.setAttribute('y2', (cy + size).toString());
+      line2.setAttribute('stroke', systolicColor);
+      line2.setAttribute('stroke-width', '3');
+      line2.setAttribute('stroke-linecap', 'round');
+      line2.setAttribute('data-custom-marker', 'systolic-inverted-v');
+
+      svg.appendChild(line1);
+      svg.appendChild(line2);
+    };
+
+    const addVMarker = (svg: SVGElement, cx: number, cy: number) => {
+      const size = 3;
+      const vColor = '#24a148';
+
+      const line1 = document.createElementNS(SVG_NAMESPACE, 'line');
+      line1.setAttribute('x1', (cx - size).toString());
+      line1.setAttribute('y1', (cy - size).toString());
+      line1.setAttribute('x2', cx.toString());
+      line1.setAttribute('y2', (cy + size).toString());
+      line1.setAttribute('stroke', vColor);
+      line1.setAttribute('stroke-width', '3');
+      line1.setAttribute('stroke-linecap', 'round');
+      line1.setAttribute('data-custom-marker', 'diastolic-v');
+
+      const line2 = document.createElementNS(SVG_NAMESPACE, 'line');
+      line2.setAttribute('x1', cx.toString());
+      line2.setAttribute('y1', (cy + size).toString());
+      line2.setAttribute('x2', (cx + size).toString());
+      line2.setAttribute('y2', (cy - size).toString());
+      line2.setAttribute('stroke', vColor);
+      line2.setAttribute('stroke-width', '3');
+      line2.setAttribute('stroke-linecap', 'round');
+      line2.setAttribute('data-custom-marker', 'diastolic-v');
+
+      svg.appendChild(line1);
+      svg.appendChild(line2);
+    };
+
+    const addVerticalConnector = (svg: SVGElement, x: number, y1: number, y2: number, color: string) => {
+      const line = document.createElementNS(SVG_NAMESPACE, 'line');
+      line.setAttribute('x1', x.toString());
+      line.setAttribute('y1', y1.toString());
+      line.setAttribute('x2', x.toString());
+      line.setAttribute('y2', y2.toString());
+      line.setAttribute('stroke', color);
+      line.setAttribute('stroke-width', '2');
+      line.setAttribute('data-custom-marker', 'vertical-connector');
+
+      svg.appendChild(line);
+    };
+
+    const addCustomMarkers = () => {
+      const chartContainer = document.querySelector(`[data-chart-id="pulse-bp"]`);
+      if (chartContainer && actualData.length > 0) {
+        const svg = chartContainer.querySelector('svg');
+        if (!svg) {
+          return;
+        }
+
+        svg.querySelectorAll('[data-custom-marker]').forEach((marker) => marker.remove());
+
+        const circles = svg.querySelectorAll('circle');
+
+        circles.forEach((circle, index) => {
+          const cx = parseFloat(circle.getAttribute('cx') || '0');
+          const cy = parseFloat(circle.getAttribute('cy') || '0');
+          const fill = circle.getAttribute('fill') || circle.style.fill || '';
+          const stroke = circle.getAttribute('stroke') || circle.style.stroke || '';
+          const className = circle.getAttribute('class') || '';
+        });
+
+        const allXPositions = Array.from(circles)
+          .map((circle) => {
+            return parseFloat(circle.getAttribute('cx') || '0');
+          })
+          .filter((x) => x > 0)
+          .sort((a, b) => a - b);
+
+        const uniqueXPositions: number[] = [];
+        allXPositions.forEach((x) => {
+          if (uniqueXPositions.length === 0 || Math.abs(x - uniqueXPositions[uniqueXPositions.length - 1]) > 20) {
+            uniqueXPositions.push(x);
+          }
+        });
+
+        uniqueXPositions.forEach((xPos, timeIndex) => {
+          const circlesAtThisX = Array.from(circles).filter((circle) => {
+            const cx = parseFloat(circle.getAttribute('cx') || '0');
+            return Math.abs(cx - xPos) < 15;
+          });
+          if (circlesAtThisX.length === 0) {
+            return;
+          }
+          circlesAtThisX.sort((a, b) => {
+            const aY = parseFloat(a.getAttribute('cy') || '0');
+            const bY = parseFloat(b.getAttribute('cy') || '0');
+            return aY - bY;
+          });
+
+          circlesAtThisX.forEach((circle, idx) => {
+            const cx = parseFloat(circle.getAttribute('cx') || '0');
+            const cy = parseFloat(circle.getAttribute('cy') || '0');
+          });
+          let pulseY: number | null = null;
+          let systolicY: number | null = null;
+          let diastolicY: number | null = null;
+
+          circlesAtThisX.forEach((circle, circleIndex) => {
+            const cx = parseFloat(circle.getAttribute('cx') || '0');
+            const cy = parseFloat(circle.getAttribute('cy') || '0');
+            if (circlesAtThisX.length >= 3) {
+              if (circleIndex === 0) {
+                systolicY = cy;
+                addXMarker(svg, cx, cy);
+                circle.style.opacity = '0';
+              } else if (circleIndex === circlesAtThisX.length - 1) {
+                diastolicY = cy;
+                addVMarker(svg, cx, cy);
+                circle.style.opacity = '0';
+              } else {
+                pulseY = cy;
+              }
+            } else if (circlesAtThisX.length === 2) {
+              if (circleIndex === 0) {
+                pulseY = cy;
+              } else {
+                diastolicY = cy;
+                addVMarker(svg, cx, cy);
+                circle.style.opacity = '0';
+              }
+            } else if (circlesAtThisX.length === 1) {
+              pulseY = cy;
+            }
+          });
+          const currentX = circlesAtThisX[0] ? parseFloat(circlesAtThisX[0].getAttribute('cx') || '0') : 0;
+
+          if (pulseY !== null && systolicY !== null) {
+            addVerticalConnector(svg, currentX, pulseY, systolicY, '#da1e28'); // Red line to systolic
+          }
+
+          if (pulseY !== null && diastolicY !== null) {
+            addVerticalConnector(svg, currentX, pulseY, diastolicY, '#24a148'); // Green line to diastolic
+          }
+        });
+      }
+    };
+    const timer = setTimeout(addCustomMarkers, 500);
+    const timer2 = setTimeout(addCustomMarkers, 1000);
+    const chartContainer = document.querySelector(`[data-chart-id="pulse-bp"]`);
+    if (chartContainer && window.MutationObserver) {
+      observer = new MutationObserver(() => {
+        setTimeout(addCustomMarkers, 100);
+      });
+      observer.observe(chartContainer, { childList: true, subtree: true });
+    }
+
+    return () => {
+      clearTimeout(timer);
+      clearTimeout(timer2);
+      if (observer) {
+        observer.disconnect();
+      }
+    };
+  }, [actualData]);
+
   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 = 5;
-                const chartMarginBottom = 8;
-                const chartMarginLeft = 3.59;
-                const chartMarginRight = 8;
-                const chartWidth = 100 - chartMarginLeft - chartMarginRight;
-                const chartHeight = 100 - chartMarginTop - chartMarginBottom;
-                const dataPointIndex = index;
-                const bpXPosition = chartMarginLeft + ((dataPointIndex + 0) / 12) * chartWidth;
-                const yOffset = 23;
-                const yOffsetDiastolic = 40;
-                const pulseYPosition = chartMarginTop + yOffset + ((260 - item.pulse) / 260) * (chartHeight - yOffset);
-                const systolicYPosition =
-                  chartMarginTop + yOffset + ((260 - item.systolicBP) / 260) * (chartHeight - yOffset);
-                const diastolicYPosition =
-                  chartMarginTop +
-                  yOffsetDiastolic +
-                  ((260 - item.diastolicBP) / 260) * (chartHeight - yOffsetDiastolic);
-
-                const greenArrowStartY = Math.min(pulseYPosition, diastolicYPosition);
-                const greenArrowEndY = Math.max(pulseYPosition, diastolicYPosition);
-
-                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,10 10,5 0,0 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>
+        <LineChart data={finalChartData} options={chartOptions} />
       </div>
     </div>
   );