area-chart-kpi-02

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, CardTitle } from '@/components/ui/card'
12 
13interface AreaChartKPI2Props {
14  trend: number
15  data: unknown[]
16  description: string
17  formatter?: ValueFormatter
18  height: number
19  areas: AreaProps[]
20  title: string
21  value: number
22}
23 
24const exampleProps: AreaChartKPI2Props = {
25  trend: 18.4,
26  data: [
27    {
28      label: 'Monday',
29      value: 4200,
30    },
31    {
32      label: 'Tuesday',
33      value: 5100,
34    },
35    {
36      label: 'Wednesday',
37      value: 2800,
38    },
39    {
40      label: 'Thursday',
41      value: 5600,
42    },
43    {
44      label: 'Friday',
45      value: 6300,
46    },
47    {
48      label: 'Saturday',
49      value: 5400,
50    },
51    {
52      label: 'Sunday',
53      value: 6900,
54    },
55  ],
56  description: '+23.8K this week',
57  formatter: (value) => `$${value.toLocaleString()}`,
58  height: 160,
59  areas: [
60    {
61      dataKey: 'value',
62      fill: 'var(--color-chart-2)',
63      stroke: 'var(--color-chart-2)',
64    },
65  ],
66  title: 'Total Transactions',
67  value: 128400,
68}
69 
70const AreaChartKPI2 = (props: AreaChartKPI2Props) => {
71  const { trend, data, description, formatter, height, areas, title, value } = props
72  return (
73    <KPI className='relative overflow-hidden'>
74      <KPIContent>
75        <div className='relative z-10 space-y-12'>
76          <div className='flex items-center justify-between'>
77            <CardTitle>{title}</CardTitle>
78            <Trend trend={trend} variant='badge' />
79          </div>
80          <div className='space-y-1'>
81            <KPIValue value={value} formatter={formatter} animated />
82            <CardDescription className='text-foreground'>{description}</CardDescription>
83          </div>
84        </div>
85        <div className='absolute -bottom-4 -left-4 opacity-75 pointer-events-none w-[calc(100%+2rem)]'>
86          <TinyAreaChart
87            data={data}
88            areas={areas}
89            formatter={formatter}
90            height={height}
91          />
92        </div>
93      </KPIContent>
94    </KPI>
95  )
96}
97 
98export {
99  AreaChartKPI2,
100  exampleProps as areaChartKpi2ExampleProps,
101  type AreaChartKPI2Props,
102}