ReactとD3.jsで大規模ヘルスチャートを高速構築

npx create-react-app performant-health-charts
cd performant-health-charts
npm install d3 downsample

// src/utils/data.js
import { LTTB } from 'downsample';

export const generateHealthData = (numPoints) => {
  const data = [];
  const twoYears = 2 * 365 * 24 * 60 * 60 * 1000;
  const now = new Date().getTime();
  const startTime = now - twoYears;

  for (let i = 0; i < numPoints; i++) {
    const timestamp = startTime + (twoYears * i) / numPoints;
    const heartRate = 60 + Math.random() * 40 + Math.sin(i / 100) * 10;
    data.push([timestamp, heartRate]);
  }
  return data;
};

export const downsampleData = (data, threshold) => {
  if (data.length <= threshold) {
    return data;
  }
  return LTTB(data, threshold);
};

// src/components/HealthChart.js
import React, { useRef, useEffect } from 'react';
import * as d3 from 'd3';

const HealthChart = ({ data }) => {
  const canvasRef = useRef(null);

  useEffect(() => {
    if (data && canvasRef.current) {
      const canvas = canvasRef.current;
      const context = canvas.getContext('2d');

      const width = canvas.width;
      const height = canvas.height;

      // Clear the canvas
      context.clearRect(0, 0, width, height);

      // Define scales
      const xScale = d3.scaleTime()
        .domain(d3.extent(data, d => new Date(d[0])))
        .range([0, width]);

      const yScale = d3.scaleLinear()
        .domain([0, d3.max(data, d => d[1])])
        .range([height, 0]);

      // Draw the line
      const line = d3.line()
        .x(d => xScale(new Date(d[0])))
        .y(d => yScale(d[1]))
        .context(context);

      context.beginPath();
      line(data);
      context.lineWidth = 1.5;
      context.strokeStyle = 'steelblue';
      context.stroke();
    }
  }, [data]);

  return <canvas ref={canvasRef} width={800} height={400} />;
};

export default HealthChart;

// src/App.js
import React, { useState, useEffect } from 'react';
import HealthChart from './components/HealthChart';
import { generateHealthData, downsampleData } from './utils/data';
import './App.css';

function App() {
  const [rawData, setRawData] = useState([]);
  const [displayData, setDisplayData] = useState([]);

  useEffect(() => {
    // Generate 1 million data points
    const data = generateHealthData(1000000);
    setRawData(data);

    // Downsample to 1000 points for initial display
    const downsampled = downsampleData(data, 1000);
    setDisplayData(downsampled);
  }, []);

  return (
    <div className="App">
      <header className="App-header">
        <h1>Performant Health Chart</h1>
        <p>
          Displaying {displayData.length} points from a raw dataset of {rawData.length} points.
        </p>
        <HealthChart data={displayData} />
      </header>
    </div>
  );
}

export default App;

// src/components/HealthChart.js
import React, { useRef, useEffect, useState } from 'react';
import * as d3 from 'd3';

const HealthChart = ({ data }) => {
  const canvasRef = useRef(null);
  const [tooltip, setTooltip] = useState(null);

  useEffect(() => {
    // ... (drawing logic from before)

    const canvas = canvasRef.current;
    const width = canvas.width;
    const height = canvas.height;

    const xScale = d3.scaleTime()
      .domain(d3.extent(data, d => new Date(d[0])))
      .range([0, width]);

    // Add mouse move listener for tooltips
    const onMouseMove = (event) => {
      const mouseX = event.clientX - canvas.getBoundingClientRect().left;
      const mouseDate = xScale.invert(mouseX);

      // Find the closest data point
      const bisector = d3.bisector(d => new Date(d[0])).left;
      const index = bisector(data, mouseDate, 1);
      const a = data[index - 1];
      const b = data[index];
      const d = b && (mouseDate - a[0] > b[0] - mouseDate) ? b : a;

      if (d) {
        setTooltip({
          x: xScale(new Date(d[0])),
          y: yScale(d[1]),
          date: new Date(d[0]).toLocaleDateString(),
          value: d[1].toFixed(2),
        });
      }
    };

    const onMouseLeave = () => {
      setTooltip(null);
    };

    canvas.addEventListener('mousemove', onMouseMove);
    canvas.addEventListener('mouseleave', onMouseLeave);

    return () => {
      canvas.removeEventListener('mousemove', onMouseMove);
      canvas.removeEventListener('mouseleave', onMouseLeave);
    };

  }, [data]);

  return (
    <div style={{ position: 'relative' }}>
      <canvas ref={canvasRef} width={800} height={400} />
      {tooltip && (
        <div
          style={{
            position: 'absolute',
            left: `${tooltip.x + 10}px`,
            top: `${tooltip.y - 20}px`,
            backgroundColor: 'rgba(0, 0, 0, 0.7)',
            color: 'white',
            padding: '5px',
            borderRadius: '3px',
            pointerEvents: 'none',
          }}
        >
          <div>Date: {tooltip.date}</div>
          <div>Heart Rate: {tooltip.value}</div>
        </div>
      )}
    </div>
  );
};

export default HealthChart;