bar-chart-kpi-01

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 BarChartKPI1Props {
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: BarChartKPI1Props = {
21  bars: [
22    {
23      dataKey: 'value',
24      fill: 'var(--color-primary)',
25    },
26  ],
27  trend: 7.5,
28  data: [
29    {
30      label: 'Monday',
31      value: 3200,
32    },
33    {
34      label: 'Tuesday',
35      value: 4500,
36    },
37    {
38      label: 'Wednesday',
39      value: 2800,
40    },
41    {
42      label: 'Thursday',
43      value: 5200,
44    },
45    {
46      label: 'Friday',
47      value: 6100,
48    },
49    {
50      label: 'Saturday',
51      value: 4800,
52    },
53    {
54      label: 'Sunday',
55      value: 5700,
56    },
57  ],
58  formatter: (value) => `$${value.toLocaleString()}`,
59  height: 160,
60  title: 'Revenue',
61  value: 87500,
62}
63 
64const BarChartKPI1 = (props: BarChartKPI1Props) => {
65  const { bars, trend, data, formatter, height, title, value } = props
66  return (
67    <KPI>
68      <KPIContent>
69        <div className='space-y-1'>
70          <div className='flex items-center justify-between'>
71            <CardDescription>{title}</CardDescription>
72            <Trend trend={trend} trendIcon='arrow' variant='badge' />
73          </div>
74          <KPIValue value={value} formatter={formatter} animated />
75        </div>
76        <TinyBarChart data={data} bars={bars} formatter={formatter} height={height} />
77      </KPIContent>
78    </KPI>
79  )
80}
81 
82export { BarChartKPI1, exampleProps as barChartKpi1ExampleProps, type BarChartKPI1Props }