line-chart-kpi-01

1'use client'
2 
3import {
4  TinyLineChart,
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 { LineProps } from 'recharts'
10 
11import { CardDescription } from '@/components/ui/card'
12 
13interface LineChartKPI1Props {
14  trend: number
15  data: unknown[]
16  formatter?: ValueFormatter
17  height: number
18  lines: LineProps[]
19  title: string
20  value: number
21}
22 
23const exampleProps: LineChartKPI1Props = {
24  trend: 4.2,
25  data: [
26    {
27      label: 'Monday',
28      value: 4200,
29    },
30    {
31      label: 'Tuesday',
32      value: 5100,
33    },
34    {
35      label: 'Wednesday',
36      value: 2800,
37    },
38    {
39      label: 'Thursday',
40      value: 5600,
41    },
42    {
43      label: 'Friday',
44      value: 6300,
45    },
46    {
47      label: 'Saturday',
48      value: 5400,
49    },
50    {
51      label: 'Sunday',
52      value: 6900,
53    },
54  ],
55  formatter: (value) => {
56    const k = value / 1000
57    return `${k.toFixed(1)}k visits`
58  },
59  height: 120,
60  lines: [
61    {
62      dataKey: 'value',
63      stroke: 'var(--color-primary)',
64    },
65  ],
66  title: 'Daily visitors',
67  value: 48230,
68}
69 
70const LineChartKPI1 = (props: LineChartKPI1Props) => {
71  const { trend, data, formatter, height, lines, title, value } = props
72  return (
73    <KPI>
74      <KPIContent>
75        <div className='space-y-1'>
76          <div className='flex items-center justify-between'>
77            <CardDescription>{title}</CardDescription>
78            <Trend trend={trend} variant='badge' />
79          </div>
80          <KPIValue value={value} formatter={formatter} animated />
81        </div>
82        <TinyLineChart data={data} lines={lines} formatter={formatter} height={height} />
83      </KPIContent>
84    </KPI>
85  )
86}
87 
88export {
89  LineChartKPI1,
90  exampleProps as lineChartKpi1ExampleProps,
91  type LineChartKPI1Props,
92}