Points Chart

1"use client"
2 
3import * as React from "react"
4import { Star } from "lucide-react"
5import {
6  CartesianGrid,
7  Line,
8  LineChart,
9  ReferenceLine,
10  ResponsiveContainer,
11  Tooltip,
12  XAxis,
13  YAxis,
14} from "recharts"
15 
16import { cn } from "@/lib/utils"
17 
18interface PointsChartDataPoint {
19  date: string
20  total: number
21  change: number
22}
23 
24interface PointsChartLevel {
25  value: number
26  color: string
27}
28 
29interface PointsChartProps extends React.HTMLAttributes<HTMLDivElement> {
30  data: PointsChartDataPoint[]
31  height?: number
32  title?: string
33  headerRight?: React.ReactNode
34  yAxisLabel?: string
35  levels?: PointsChartLevel[]
36}
37 
38function formatValue(value: number) {
39  return Math.round(value).toLocaleString()
40}
41 
42function LevelReferenceStarLabel({
43  viewBox,
44  color,
45}: {
46  viewBox?: { x?: number; y?: number } | null
47  color: string
48}) {
49  const x = viewBox?.x
50  const y = viewBox?.y
51 
52  if (typeof x !== "number" || typeof y !== "number") {
53    return null
54  }
55 
56  return (
57    <g transform={`translate(${x - 14},${y})`}>
58      <Star
59        x={-5}
60        y={-5}
61        width={10}
62        height={10}
63        fill={color}
64        stroke={color}
65        strokeWidth={1.75}
66      />
67    </g>
68  )
69}
70 
71function PointsChart({
72  data,
73  height = 260,
74  title = "Your points",
75  headerRight,
76  yAxisLabel,
77  levels,
78  className,
79  ...props
80}: PointsChartProps) {
81  const yDomain = React.useMemo<[number, number]>(() => {
82    const values = [
83      ...data.map((item) => item.total),
84      ...(levels?.map((level) => level.value) ?? []),
85    ]
86 
87    if (values.length === 0) return [0, 100]
88 
89    const minValue = Math.min(...values)
90    const maxValue = Math.max(...values)
91    const range = maxValue - minValue
92 
93    if (range === 0) {
94      const padding = Math.max(maxValue * 0.15, 10)
95      return [Math.max(0, minValue - padding), maxValue + padding]
96    }
97 
98    const padding = Math.max(range * 0.12, 10)
99    return [Math.max(0, minValue - padding), maxValue + padding]
100  }, [data, levels])
101 
102  return (
103    <div className={cn("bg-card rounded-2xl border p-4", className)} {...props}>
104      <div className="mb-3 flex items-center justify-between gap-3">
105        <p className="text-md text-foreground font-semibold">{title}</p>
106        {headerRight ? <div className="shrink-0">{headerRight}</div> : null}
107      </div>
108      <div style={{ height }}>
109        <ResponsiveContainer width="100%" height="100%">
110          <LineChart
111            data={data}
112// … truncated