Insight chart

1"use client";2 3import { useId, useState } from "react";4import { TrendingUp } from "lucide-react";5 6export type InsightPoint = { label: string; value: number };7export type InsightChartProps = {8  data: InsightPoint[];9  name: string;10  color?: string;11  defaultIndex?: number;12  formatValue?: (value: number) => string;13  onPointChange?: (point: InsightPoint, index: number) => void;14};15 16/** Small responsive line chart with pointer snapping and native keyboard inspection. */17export function InsightChart({18  data,19  name,20  color = "#275bea",21  defaultIndex,22  formatValue = (value) => value.toLocaleString(),23  onPointChange,24}: InsightChartProps) {25  const gradientId = useId().replace(/:/g, "");26  const [active, setActive] = useState(27    Math.max(0, Math.min(data.length - 1, defaultIndex ?? data.length - 1)),28  );