diagrams.tsx

import React, { useRef, useEffect } from "react";
import * as d3 from "d3";

function Diagrams() {
  const chartRef = useRef<SVGSVGElement>(null);

  useEffect(() => {
    const width = 640;
    const height = 400;
    const marginTop = 20;
    const marginRight = 20;
    const marginBottom = 30;
    const marginLeft = 40;

    const x = d3.scaleTime()
      .domain([new Date("2018-01-01"), new Date("2023-01-01")])
      .range([marginLeft, width - marginRight]);

    const y = d3.scaleLinear()
      .domain([0, 100])
      .range([height - marginBottom, marginTop]);

    const svg = d3.select(chartRef.current)
      .attr("width", width)
      .attr("height", height);

    svg.append("g")
      .attr("transform", `translate(0,${height - marginBottom})`)
      .call(d3.axisBottom(x).ticks(d3.timeYear.every(1)).tickFormat(d3.timeFormat("%Y")));

    svg.append("g")
      .attr("transform", `translate(${marginLeft},0)`)
      .call(d3.axisLeft(y));
  }, []);

  return <svg ref={chartRef} />;
}

export default Diagrams;