Creating ECG Boxes in [REACT/VISX]

Question

output I am currently working on a project that involves visualizing electrocardiogram (ECG) data, and I am looking for guidance on how to create ECG boxes using REACT/VISX.[look like this ][1]The goal is to represent ECG waveforms in a clear and visually appealing manner, similar

import React, { useState } from "react";
import { Group } from "@visx/group";
import { scaleLinear } from "@visx/scale";
import { GridColumns, GridRows } from "@visx/grid";

const styles = {
  gridMinorColour: "#FF0000",
  gridStrokeWidth: 0.5,
  svgPadding: 0,
  outlineBoxColor: "#FF0000",
  outlineBoxStrokeWidth: 1,
};

const initialDataLength = 100;
const initialData = Array.from({ length: initialDataLength }, (_, i) => ({
  x: i,
  y: 0,
}));

const width = window.innerWidth;
const height = 300;
const margin = { top: 0, right: 0, bottom: 50, left: 0 };

const ECG = () => {
  const [data] = useState(initialData);

  const paperSpeed = 30;
  const smallBoxDuration = 0.1;

  const numVerticalBoxes = width / (smallBoxDuration * paperSpeed);
  const numHorizontalBoxes = height / (smallBoxDuration * paperSpeed);

  const xScale = scaleLinear({
    domain: [10, Math.max(...data.map((d) => d.x))],
    range: [margin.left, width - margin.right],
  });

  const yScale = scaleLinear({
    domain: [
      Math.min(...data.map((d) => d.y)),
      Math.max(...data.map((d) => d.y)),
    ],
    range: [height - margin.bottom, margin.top],
    nice: true,
  });

  return (
    <div className="body" style={{ overflow: "hidden" }}>
      <svg width={width} height={height} style={{ padding: styles.svgPadding }}>
        <Group>
          {/* Create vertical grid lines */}
          <GridColumns
            scale={xScale}
            width={width - margin.left - margin.right}
            height={height - margin.top - margin.bottom}
            stroke={styles.gridMinorColour}
            strokeWidth={styles.gridStrokeWidth}
            strokeDasharray="0,0"
            numTicks={numVerticalBoxes}
          />

          {/* Create horizontal grid lines with conic gradient background */}
          <GridRows
            scale={yScale}
            width={width - margin.left - margin.right}
            height={height - margin.top - margin.bottom}
            stroke={styles.gridMinorColour}
            strokeWidth={styles.gridStrokeWidth}
            strokeDasharray="0,0"
            numTicks={numHorizontalBoxes * 10}
            style={{
              background:
                "conic-gradient(from 90deg at 1.5px 1.5px, var(--_g)) 0 0 / var(--s) var(--s), conic-gradient(from 90deg at 1px 1px, var(--_g)) 0 0 / calc(var(--s) / 5) calc(var(--s) / 5)",
            }}
          />

          {/* Add outline box */}
          <rect
            x={margin.left}
            y={margin.top}
            width={width - margin.left - margin.right}
            height={height - margin.top - margin.bottom}
            fill="none"
            stroke={styles.outlineBoxColor}
            strokeWidth={styles.outlineBoxStrokeWidth}
          />
        </Group>
      </svg>
    </div>
  );
};

export default ECG;

to the typical boxes seen in ECG charts.

I have already acquired the ECG data, and now I need assistance with the implementation details. Specifically, I am interested in understanding how to structure the code to generate these ECG boxes, considering factors such as scaling, labeling, and possibly incorporating features like gridlines and annotations.

If anyone has experience or knowledge in creating ECG visualizations, please share your insights, code snippets, or any helpful resources. Additionally, any advice on best practices or common pitfalls to avoid in ECG visualization would be greatly appreciated.

Thank you in advance for your assistance!