"use client" import { useState } from "react" import { AnalyticsLineChart, DEFAULT_DATA, DEFAULT_GRADIENT, EASE_OUT, type AnalyticsDataPoint, type AnalyticsGradientStop, } from "@/registry/default/ui/analytics-chart" const ANALYTICS_DEMO_SETS = { ecommerce: { title: "Clicks", sub: "Conversion analytics", data: DEFAULT_DATA, valueLabel: "clicks", }, signups: { title: "Signups", sub: "Organic acquisition", data: [ { date: "2024-01-07", label: "organic", value: 340 }, { date: "2024-01-14", label: "organic", value: 520 }, { date: "2024-01-21", label: "organic", value: 480 }, { date: "2024-01-28", label: "organic", value: 710 }, { date: "2024-02-04", label: "organic", value: 890 }, { date: "2024-02-11", label: "organic", value: 1250 }, ], valueLabel: "signups", }, revenue: { title: "Revenue", sub: "SaaS MRR growth", data: [ { date: "2023-07-01", label: "saas-mrr", value: 14_200 }, { date: "2023-08-01", label: "saas-mrr", value: 16_800 }, { date: "2023-09-01", label: "saas-mrr", value: 15_900 }, { date: "2023-10-01", label: "saas-mrr", value: 21_300 }, { date: "2023-11-01", label: "saas-mrr", value: 24_700 }, { date: "2023-12-01", label: "saas-mrr", value: 28_100 }, { date: "2024-01-01", label: "saas-mrr", value: 31_500 }, { date: "2024-02-01", label: "saas-mrr", value: 35_800 }, ], valueLabel: "USD", gradient: [ { offset: "0%", color: "#c084fc" }, { offset: "50%", color: "#818cf8" }, { offset: "100%", color: "#6366f1" }, ], }, } as const satisfies Record< string, { title: string sub: string data: AnalyticsDataPoint[] valueLabel: string gradient?: AnalyticsGradientStop[] } > type AnalyticsDemoKey = keyof typeof ANALYTICS_DEMO_SETS function AnalyticsChartDemo() { const [tab, setTab] = useState("ecommerce") const [epoch, setEpoch] = useState(0) const demo = ANALYTICS_DEMO_SETS[tab] function pick(k: AnalyticsDemoKey) { setTab(k) setEpoch((e) => e + 1) } return (

{/* Tabs */}

{( Object.entries(ANALYTICS_DEMO_SETS) as [ AnalyticsDemoKey, (typeof ANALYTICS_DEMO_SETS)[AnalyticsDemoKey], ][] ).map(([k, v]) => { const on = tab === k return ( ) })}

{/* Card */}

{demo.title}

{demo.sub}

{demo.data.length} points

Hover points for details

{/* Props */}

Component API

{[ ["data", "chart data points"], ["gradientStops", "line color stops"], ["dotColors", "per-dot overrides"], ["gridLines", "grid line count"], ["pinnedIndices", "pinned tooltips"], ["valueLabel", "unit label"], ].map(([p, d]) => (

{p}

{" — "} {d} ))}

) } export default AnalyticsChartDemo