Interactive Vector Graphics (SVG), Dashboards, and D3 in React

'use client';

import * as React from 'react';
import { scaleTime, scaleLinear } from 'd3-scale';
import { area, line, curveMonotoneX } from 'd3-shape';

export interface DataPoint {
  readonly date: Date;
  readonly value: number;
}

interface MetricsAreaChartProps {
  readonly data: readonly DataPoint[];
  readonly width?: number;
  readonly height?: number;
  readonly title?: string;
}

export function MetricsAreaChart({
  data,
  width = 680,
  height = 260,
  title = 'Request Throughput (RPS)',
}: MetricsAreaChartProps) {
  const svgRef = React.useRef<SVGSVGElement>(null);
  const [hoveredPoint, setHoveredPoint] = React.useState<DataPoint | null>(null);
  const [crosshairX, setCrosshairX] = React.useState<number | null>(null);

  const margin = { top: 20, right: 20, bottom: 28, left: 40 };
  const innerWidth = width - margin.left - margin.right;
  const innerHeight = height - margin.top - margin.bottom;

  // Pure D3 mathematical projections memoized in useMemo
  const { xScale, yScale, areaPath, linePath } = React.useMemo(() => {
    if (data.length < 2) {
      return { xScale: null, yScale: null, areaPath: '', linePath: '' };
    }

    const x = scaleTime()
      .domain([data[0].date, data[data.length - 1].date])
      .range([0, innerWidth]);

    const maxValue = Math.max(...data.map((d) => d.value));
    const y = scaleLinear()
      .domain([0, maxValue * 1.15]) // 15% top padding for visual breathing room
      .range([innerHeight, 0]);

    const areaGen = area<DataPoint>()
      .x((d) => x(d.date))
      .y0(innerHeight)
      .y1((d) => y(d.value))
      .curve(curveMonotoneX);

    const lineGen = line<DataPoint>()
      .x((d) => x(d.date))
      .y((d) => y(d.value))
      .curve(curveMonotoneX);

    return {
      xScale: x,
      yScale: y,
      areaPath: areaGen(data as DataPoint[]) || '',
      linePath: lineGen(data as DataPoint[]) || '',
    };
  }, [data, innerWidth, innerHeight]);

  // Pointer move handler computing precise crosshair alignment
  const handlePointerMove = (e: React.PointerEvent<SVGSVGElement>) => {
    if (!xScale || !svgRef.current || data.length === 0) return;

    const rect = svgRef.current.getBoundingClientRect();
    const clientX = e.clientX - rect.left - margin.left;
    const clampedX = Math.max(0, Math.min(innerWidth, clientX));

    // Inverse projection from pixel coordinates to timestamp domain in O(1)
    const hoveredDate = xScale.invert(clampedX);

    // Bisection search for nearest data point
    let closest = data[0];
    let minDiff = Math.abs(hoveredDate.getTime() - data[0].date.getTime());

    for (let i = 1; i < data.length; i++) {
      const diff = Math.abs(hoveredDate.getTime() - data[i].date.getTime());
      if (diff < minDiff) {
        minDiff = diff;
        closest = data[i];
      }
    }

    setHoveredPoint(closest);
    setCrosshairX(xScale(closest.date));
  };

  const handlePointerLeave = () => {
    setHoveredPoint(null);
    setCrosshairX(null);
  };

  if (!xScale || !yScale) return null;

  return (
    <div className="relative p-5 rounded-3xl bg-bg-surface border border-border shadow-xl space-y-3">
      <div className="flex items-center justify-between">
        <h3 className="font-bold text-sm text-text-primary">{title}</h3>
        <span className="text-[10px] font-mono text-text-muted uppercase">D3 Math + React Fiber</span>
      </div>

      <div className="relative">
        <svg
          ref={svgRef}
          viewBox={`0 0 ${width} ${height}`}
          onPointerMove={handlePointerMove}
          onPointerLeave={handlePointerLeave}
          className="w-full h-auto overflow-visible cursor-crosshair touch-none select-none"
          role="img"
          aria-label={title}
        >
          <defs>
            <linearGradient id="metric-area-gradient" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stopColor="#8B5CF6" stopOpacity="0.45" />
              <stop offset="100%" stopColor="#8B5CF6" stopOpacity="0.0" />
            </linearGradient>
          </defs>

          <g transform={`translate(${margin.left},${margin.top})`}>
            {/* Horizontal Grid Lines */}
            {yScale.ticks(4).map((tick) => (
              <g key={tick} transform={`translate(0, ${yScale(tick)})`}>
                <line x1={0} x2={innerWidth} stroke="#272738" strokeDasharray="3 3" />
                <text
                  x={-8}
                  y={4}
                  textAnchor="end"
                  className="text-[9px] font-mono fill-text-muted select-none"
                >
                  {tick}
                </text>
              </g>
            ))}

            {/* Filled Gradient Area */}
            <path d={areaPath} fill="url(#metric-area-gradient)" />

            {/* Metric Stroke Trajectory */}
            <path
              d={linePath}
              fill="none"
              stroke="#8B5CF6"
              strokeWidth={2.5}
              vectorEffect="non-scaling-stroke"
            />

            {/* Interactive Crosshair Indicator */}
            {crosshairX !== null && hoveredPoint && (
              <g>
                <line
                  x1={crosshairX}
                  y1={0}
                  x2={crosshairX}
                  y2={innerHeight}
                  stroke="#06B6D4"
                  strokeWidth={1.5}
                  strokeDasharray="2 2"
                />
                <circle
                  cx={crosshairX}
                  cy={yScale(hoveredPoint.value)}
                  r={5}
                  fill="#06B6D4"
                  stroke="#0D0D15"
                  strokeWidth={2}
                />
              </g>
            )}
          </g>
        </svg>

        {/* Floating Zero-Reflow Tooltip */}
        {hoveredPoint && crosshairX !== null && (
          <div
            style={{
              left: `${((crosshairX + margin.left) / width) * 100}%`,
              top: '4px',
            }}
            className="absolute -translate-x-1/2 pointer-events-none px-3 py-1.5 rounded-xl bg-bg-elevated/95 backdrop-blur-md border border-border shadow-2xl text-xs font-mono"
          >
            <div className="text-[10px] text-text-muted">
              {hoveredPoint.date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' })}
            </div>
            <div className="text-accent-cyan font-bold text-sm">
              {hoveredPoint.value.toFixed(1)} req/s
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

'use client';

import * as React from 'react';
import { scaleLinear } from 'd3-scale';
import { line, curveBasis } from 'd3-shape';

export interface ResponsiveSparklineProps {
  readonly values: readonly number[];
  readonly strokeColor?: string;
  readonly height?: number;
}

export function ResponsiveSparkline({
  values,
  strokeColor = '#06B6D4',
  height = 54,
}: ResponsiveSparklineProps) {
  const containerRef = React.useRef<HTMLDivElement>(null);
  const [width, setWidth] = React.useState<number>(180);

  React.useEffect(() => {
    if (!containerRef.current) return;

    const observer = new ResizeObserver((entries) => {
      const entry = entries[0];
      if (entry && entry.contentRect.width > 0) {
        setWidth(entry.contentRect.width);
      }
    });

    observer.observe(containerRef.current);
    return () => observer.disconnect();
  }, []);

  const pathD = React.useMemo(() => {
    if (values.length < 2) return '';

    const xScale = scaleLinear()
      .domain([0, values.length - 1])
      .range([2, width - 2]);

    const min = Math.min(...values);
    const max = Math.max(...values);
    const yScale = scaleLinear()
      .domain([min, max === min ? max + 1 : max])
      .range([height - 3, 3]);

    const lineGen = line<number>()
      .x((_, i) => xScale(i))
      .y((d) => yScale(d))
      .curve(curveBasis);

    return lineGen(values as number[]) || '';
  }, [values, width, height]);

  return (
    <div ref={containerRef} className="w-full relative overflow-hidden" style={{ height }}>
      <svg
        viewBox={`0 0 ${width} ${height}`}
        className="w-full h-full overflow-visible"
        aria-hidden="true"
      >
        <path
          d={pathD}
          fill="none"
          stroke={strokeColor}
          strokeWidth={2}
          vectorEffect="non-scaling-stroke"
        />
      </svg>
    </div>
  );
}