Chart

1'use client'
2 
3import {
4  Area,
5  AreaChart,
6  AreaProps,
7  Bar,
8  BarChart,
9  BarProps,
10  Line,
11  LineChart,
12  LineProps,
13  ResponsiveContainer,
14  Tooltip,
15  TooltipContentProps,
16} from 'recharts'
17import { NameType, ValueType } from 'recharts/types/component/DefaultTooltipContent'
18 
19export type ValueFormatter = (value: number) => string
20 
21const ChartTooltipContent = ({
22  payload,
23  formatter,
24  valueFormatter,
25}: TooltipContentProps<ValueType, NameType> & { valueFormatter?: ValueFormatter }) => {
26  if (!payload || payload.length === 0) return null
27 
28  return (
29    <div className='border-border/50 bg-background grid min-w-32 items-start gap-1.5 rounded-md border px-2.5 py-1.5 text-xs shadow-xl'>
30      <span className='font-medium'>{payload?.[0].payload.label}</span>
31 
32      {payload.map((item, index) => {
33        const itemColor =
34          (item.color as string | undefined) ??
35          (item.fill as string | undefined) ??
36          'var(--color-foreground)'
37 
38        return (
39          <div
40            key={
41              typeof item.dataKey === 'string' || typeof item.dataKey === 'number'
42                ? item.dataKey
43                : index
44            }
45            className='flex items-center gap-1'
46          >
47            <div
48              className='h-2.5 w-2.5 shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)'
49              style={
50                {
51                  '--color-bg': itemColor,
52                  '--color-border': itemColor,
53                } as React.CSSProperties
54              }
55            />
56            {valueFormatter
57              ? valueFormatter(Number(item.value))
58              : formatter
59                ? formatter(item.value, item.name, item, index, payload)
60                : item.value}
61          </div>
62        )
63      })}
64    </div>
65  )
66}
67 
68export interface TinyBarChartProps {
69  bars: BarProps[]
70  className?: string
71  data: unknown[]
72  formatter?: ValueFormatter
73  height?: number
74}
75 
76export const TinyBarChart = ({
77  bars,
78  className = '',
79  data,
80  formatter,
81  height = 180,
82}: TinyBarChartProps) => {
83  const safeData = Array.isArray(data) ? data : []
84  const resolvedBars = Array.isArray(bars) && bars.length > 0 ? bars : []
85 
86  return (
87    <div className={`w-full ${className}`} style={{ height }}>
88      <ResponsiveContainer width='100%' height='100%'>
89        <BarChart data={safeData}>
90          <Tooltip
91            content={(props) => (
92              <ChartTooltipContent {...props} valueFormatter={formatter} />
93// … truncated