bar-chart-kpi-02

1'use client'
2 
3import { TinyBarChart, ValueFormatter } from '@/registry/components/dashboardblocks/chart'
4import { KPI, KPIContent, KPIValue } from '@/registry/components/dashboardblocks/kpi'
5import { Trend } from '@/registry/components/dashboardblocks/trend'
6import type { Props as BarProps } from 'recharts/types/cartesian/Bar'
7 
8import { CardDescription } from '@/components/ui/card'
9 
10interface BarChartKPI2Props {
11  bars: BarProps[]
12  trend: number
13  data: unknown[]
14  formatter?: ValueFormatter
15  height: number
16  title: string
17  value: number
18}
19 
20const exampleProps: BarChartKPI2Props = {
21  bars: [
22    {
23      dataKey: 'value',
24      fill: 'var(--color-chart-1)',
25    },
26    {
27      dataKey: 'goal',
28      fill: 'var(--color-chart-2)',
29    },
30  ],
31  trend: 7.5,
32  data: [
33    {
34      label: 'Monday',
35      value: 3200,
36      goal: 3800,
37    },
38    {
39      label: 'Tuesday',
40      value: 4500,
41      goal: 4200,
42    },
43    {
44      label: 'Wednesday',
45      value: 2800,
46      goal: 3400,
47    },
48    {
49      label: 'Thursday',
50      value: 5200,
51      goal: 4800,
52    },
53    {
54      label: 'Friday',
55      value: 6100,
56      goal: 6400,
57    },
58    {
59      label: 'Saturday',
60      value: 4800,
61      goal: 5200,
62    },
63    {
64      label: 'Sunday',
65      value: 5700,
66      goal: 6000,
67    },
68  ],
69  formatter: (value) => `$${value.toLocaleString()}`,
70  height: 160,
71  title: 'Revenue',
72  value: 87500,
73}
74 
75const BarChartKPI2 = (props: BarChartKPI2Props) => {
76  const { bars, trend, data, formatter, height, title, value } = props
77  return (
78    <KPI>
79      <KPIContent>
80        <div className='space-y-1'>
81          <div className='flex items-center justify-between'>
82            <CardDescription>{title}</CardDescription>
83            <Trend trend={trend} variant='badge' />
84          </div>
85          <KPIValue value={value} formatter={formatter} animated />
86        </div>
87        <TinyBarChart data={data} bars={bars} formatter={formatter} height={height} />
88      </KPIContent>
89    </KPI>
90  )
91}
92 
93export { BarChartKPI2, exampleProps as barChartKPI2ExampleProps, type BarChartKPI2Props }