Line Linear

import { defineChart, lineY } from "@tanstack/charts";
import { motion } from "@tanstack/charts/motion";
import { tooltip } from "@tanstack/charts/tooltip";
import { Chart } from "@tanstack/react-charts/core";
import { useMemo } from "react";

import { max } from "d3-array";
import { scaleLinear, scalePoint } from "d3-scale";

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";

const motionRenderer = motion({
    initial: "always",
    transition: { type: "spring", stiffness: 170, damping: 18, mass: 1 },
});

const chartData = [
    { week: "W1", revenue: 120 },
    { week: "W2", revenue: 145 },
    { week: "W3", revenue: 130 },
    { week: "W4", revenue: 170 },
    { week: "W5", revenue: 160 },
    { week: "W6", revenue: 195 },
    { week: "W7", revenue: 210 },
    { week: "W8", revenue: 185 },
    { week: "W9", revenue: 240 },
    { week: "W10", revenue: 230 },
    { week: "W11", revenue: 280 },
    { week: "W12", revenue: 310 },
];

export function LineLinear() {
    const definition = useMemo(() => {
        const yMax = max(chartData, (d) => d.revenue) ?? 0;

        return defineChart({
            renderer: motionRenderer,
            motion: {
                transition: { type: "spring", stiffness: 170, damping: 18, mass: 1 },
            },
            focus: "group-x",
            tooltip: {
                use: tooltip,
                motion: { type: "spring", stiffness: 170, damping: 18 },
                className: "font-sans! shadow-none! capitalize!",
                content: (points) => {
                    const datum = points[0]?.datum as (typeof chartData)[number];
                    if (!datum) return { rows: [] };
                    return {
                        title: `Week ${datum.week}`,
                        rows: [
                            {
                                label: "Revenue",
                                value: `$${datum.revenue}`,
                                color: "var(--chart-1)",
                            },
                        ],
                    };
                },
            },
            marks: [
                lineY(chartData, {
                    id: "revenue",
                    x: (d) => d.week,
                    y: (d) => d.revenue,
                    stroke: "var(--chart-1)",
                    strokeWidth: 2,
                    points: false,
                }),
            ],
            scales: {
                x: {
                    scale: scalePoint().domain(chartData.map((d) => d.week)),
                },
                y: {
                    scale: scaleLinear().domain([0, yMax]).nice(),
                    grid: true,
                },
            },
        });
    }, []);

    return (
        <Card className="gap-0">
            <CardHeader>
                <CardTitle className="text-lg">Weekly Gross ARR Growth</CardTitle>
                <CardDescription>16-week cumulative revenue expansion tracking</CardDescription>
            </CardHeader>
            <CardContent>
                <Chart
                    definition={definition}
                    renderer={motionRenderer}
                    height={250}
                    ariaLabel="Linear line chart showing 16-week revenue growth"
                />
            </CardContent>
        </Card>
    );
}