Line chart

1"use client";
2 
3import * as React from "react";
4import {
5  CartesianGrid,
6  Line,
7  LineChart as RLineChart,
8  ReferenceLine,
9  ResponsiveContainer,
10  Tooltip,
11  XAxis,
12  YAxis,
13} from "recharts";
14 
15import { cn } from "@/lib/utils";
16import { ChartTooltip } from "./chart-tooltip";
17 
18export interface LineChartSeries {
19  key: string;
20  label?: string;
21  color?: string;
22  strokeDasharray?: string;
23}
24 
25export interface LineChartThreshold {
26  value: number;
27  label?: string;
28  tone?: "danger" | "warning" | "info" | "success";
29}
30 
31interface LineChartProps extends React.HTMLAttributes<HTMLDivElement> {
32  data: Array<Record<string, number | string>>;
33  series: LineChartSeries[];
34  xKey?: string;
35  xLabel?: string;
36  yLabel?: string;
37  thresholds?: LineChartThreshold[];
38  height?: number;
39  /** Curve interpolation. Defaults to "monotone". */
40  curve?: "linear" | "monotone" | "step";
41}
42 
43const TONE_TO_VAR: Record<NonNullable<LineChartThreshold["tone"]>, string> = {
44  danger: "var(--color-danger)",
45  warning: "var(--color-warning)",
46  info: "var(--color-info)",
47  success: "var(--color-success)",
48};
49 
50const DEFAULT_COLORS = [
51  "var(--color-chart-1)",
52  "var(--color-chart-2)",
53  "var(--color-chart-3)",
54  "var(--color-chart-4)",
55  "var(--color-chart-5)",
56];
57 
58const LineChart = React.forwardRef<HTMLDivElement, LineChartProps>(
59  (
60    {
61      className,
62      data,
63      series,
64      xKey = "x",
65      xLabel,
66      yLabel,
67      thresholds,
68      height = 220,
69      curve = "monotone",
70      ...props
71    },
72    ref,
73  ) => {
74    return (
75      <div ref={ref} className={cn("w-full", className)} style={{ height }} {...props}>
76        <ResponsiveContainer width="100%" height="100%">
77          <RLineChart data={data} margin={{ top: 8, right: 12, bottom: 16, left: 0 }}>
78            <CartesianGrid stroke="hsl(var(--border))" strokeDasharray="2 4" vertical={false} />
79            <XAxis
80              dataKey={xKey}
81              stroke="hsl(var(--foreground-subtle))"
82              tick={{
83                fontFamily: "var(--font-mono)",
84                fontSize: 10,
85                fill: "hsl(var(--foreground-muted))",
86              }}
87              tickLine={false}
88              axisLine={{ stroke: "hsl(var(--border))" }}
89              label={
90                xLabel
91                  ? {
92                      value: xLabel,
93                      position: "insideBottom",
94                      offset: -8,
95                      fill: "hsl(var(--foreground-muted))",
96// … truncated