line_chart.jsx

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

function LineChart({ data }) {
    const chartRef = useRef(null);
    const width = 640;
    const height = 400;
    const marginTop = 20;
    const marginRight = 20;
    const marginBottom = 30;
    const marginLeft = 40;

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

        const y = d3.scaleLinear()
            .domain([20000, 40000])
            .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));

        const line = d3.line()
            .x(d => x(d.year))
            .y(d => y(d.price));

        svg.append("path")
            .datum(data)
            .attr("fill", "none")
            .attr("stroke", "steelblue")
            .attr("stroke-width", 2)
            .attr("d", line);

    }, [data]);

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

export default LineChart;