{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "area-chart-kpi-02",
  "registryDependencies": [
    "https://dashboardblocks.com/r/animated-number.json",
    "https://dashboardblocks.com/r/chart.json",
    "https://dashboardblocks.com/r/kpi.json",
    "https://dashboardblocks.com/r/trend.json"
  ],
  "files": [
    {
      "path": "registry/components/dashboardblocks/kpi/area-chart-kpi-02.tsx",
      "content": "'use client'\n\nimport {\n  TinyAreaChart,\n  ValueFormatter,\n} from '@/registry/components/dashboardblocks/chart'\nimport { KPI, KPIContent, KPIValue } from '@/registry/components/dashboardblocks/kpi'\nimport { Trend } from '@/registry/components/dashboardblocks/trend'\nimport { AreaProps } from 'recharts'\n\nimport { CardDescription, CardTitle } from '@/components/ui/card'\n\ninterface AreaChartKPI2Props {\n  trend: number\n  data: unknown[]\n  description: string\n  formatter?: ValueFormatter\n  height: number\n  areas: AreaProps[]\n  title: string\n  value: number\n}\n\nconst exampleProps: AreaChartKPI2Props = {\n  trend: 18.4,\n  data: [\n    {\n      label: 'Monday',\n      value: 4200,\n    },\n    {\n      label: 'Tuesday',\n      value: 5100,\n    },\n    {\n      label: 'Wednesday',\n      value: 2800,\n    },\n    {\n      label: 'Thursday',\n      value: 5600,\n    },\n    {\n      label: 'Friday',\n      value: 6300,\n    },\n    {\n      label: 'Saturday',\n      value: 5400,\n    },\n    {\n      label: 'Sunday',\n      value: 6900,\n    },\n  ],\n  description: '+23.8K this week',\n  formatter: (value) => `$${value.toLocaleString()}`,\n  height: 160,\n  areas: [\n    {\n      dataKey: 'value',\n      fill: 'var(--color-chart-2)',\n      stroke: 'var(--color-chart-2)',\n    },\n  ],\n  title: 'Total Transactions',\n  value: 128400,\n}\n\nconst AreaChartKPI2 = (props: AreaChartKPI2Props) => {\n  const { trend, data, description, formatter, height, areas, title, value } = props\n  return (\n    <KPI className='relative overflow-hidden'>\n      <KPIContent>\n        <div className='relative z-10 space-y-12'>\n          <div className='flex items-center justify-between'>\n            <CardTitle>{title}</CardTitle>\n            <Trend trend={trend} variant='badge' />\n          </div>\n          <div className='space-y-1'>\n            <KPIValue value={value} formatter={formatter} animated />\n            <CardDescription className='text-foreground'>{description}</CardDescription>\n          </div>\n        </div>\n        <div className='absolute -bottom-4 -left-4 opacity-75 pointer-events-none w-[calc(100%+2rem)]'>\n          <TinyAreaChart\n            data={data}\n            areas={areas}\n            formatter={formatter}\n            height={height}\n          />\n        </div>\n      </KPIContent>\n    </KPI>\n  )\n}\n\nexport {\n  AreaChartKPI2,\n  exampleProps as areaChartKpi2ExampleProps,\n  type AreaChartKPI2Props,\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}