area-chart-kpi-01

1'use client'
2 
3import {
4  TinyAreaChart,
5  ValueFormatter,
6} from '@/registry/components/dashboardblocks/chart'
7import { KPI, KPIContent, KPIValue } from '@/registry/components/dashboardblocks/kpi'
8import { Trend } from '@/registry/components/dashboardblocks/trend'
9import { AreaProps } from 'recharts'
10 
11import { CardDescription } from '@/components/ui/card'
12 
13interface AreaChartKPI1Props {
14  trend: number
15  data: unknown[]
16  formatter?: ValueFormatter
17  height: number
18  areas: AreaProps[]
19  title: string
20  value: number
21}
22 
23const exampleProps: AreaChartKPI1Props = {
24  trend: 3.7,
25  data: [
26    {
27      label: 'Monday',
28      revenue: 4200,
29      profit: 1200,
30    },
31    {
32      label: 'Tuesday',
33      revenue: 5100,
34      profit: 1500,
35    },
36    {
37      label: 'Wednesday',
38      revenue: 2800,
39      profit: 800,
40    },
41    {
42      label: 'Thursday',
43      revenue: 5600,
44      profit: 1600,
45    },
46    {
47      label: 'Friday',
48      revenue: 6300,
49      profit: 1800,
50    },
51    {
52      label: 'Saturday',
53      revenue: 5400,
54      profit: 1400,
55    },
56    {
57      label: 'Sunday',
58      revenue: 6900,
59      profit: 2000,
60    },
61  ],
62  formatter: (value) => `$${value.toLocaleString()}`,
63  height: 120,
64  areas: [
65    {
66      dataKey: 'revenue',
67      fill: 'var(--color-chart-1)',
68      stroke: 'var(--color-chart-1)',
69    },
70    {
71      dataKey: 'profit',
72      fill: 'var(--color-chart-2)',
73      stroke: 'var(--color-chart-2)',
74    },
75  ],
76  title: 'Profit Margin',
77  value: 42.3,
78}
79 
80const AreaChartKPI1 = (props: AreaChartKPI1Props) => {
81  const { trend, data, formatter, height, areas, title, value } = props
82  return (
83    <KPI>
84      <KPIContent>
85        <div className='space-y-1'>
86          <div className='flex items-center justify-between'>
87            <CardDescription>{title}</CardDescription>
88            <Trend trend={trend} variant='badge' />
89          </div>
90          <KPIValue value={value} formatter={formatter} animated />
91        </div>
92        <TinyAreaChart data={data} areas={areas} formatter={formatter} height={height} />
93      </KPIContent>
94    </KPI>
95  )
96}
97 
98export {
99  AreaChartKPI1,
100  exampleProps as areaChartKpi1ExampleProps,
101  type AreaChartKPI1Props,
102}