Line Charts

1"use client";
2
3import {
4  CustomLineChart,
5  InsightLineChart,
6  KpiStripWithTrend,
7  RevenuePanel,
8} from "@/registry/ui";
9
10const growthData = [
11  { label: "Mon", signups: 42, activated: 21 },
12  { label: "Tue", signups: 58, activated: 33 },
13  { label: "Wed", signups: 64, activated: 41 },
14  { label: "Thu", signups: 81, activated: 52 },
15  { label: "Fri", signups: 95, activated: 61 },
16  { label: "Sat", signups: 77, activated: 48 },
17  { label: "Sun", signups: 88, activated: 56 },
18];
19const dataKeys = [
20  { key: "signups", label: "Signups", color: "var(--chart-1)" },
21  { key: "activated", label: "Activated", color: "var(--chart-2)" },
22];
23
24const revenueData = [
25  { label: "W1", revenue: 12400, forecast: 11800 },
26  { label: "W2", revenue: 14900, forecast: 13400 },
27  { label: "W3", revenue: 13300, forecast: 14100 },
28  { label: "W4", revenue: 17100, forecast: 15500 },
29  { label: "W5", revenue: 19800, forecast: 17600 },
30];
31
32export function LineChartExample() {
33  return (
34    <div className="mx-auto grid w-full max-w-6xl grid-cols-2 gap-6 text-left">
35      <CustomLineChart
36        title="Activation momentum"
37        description="Signups vs activation trend with interactive legend filtering."
38        surface="muted"
39        plotSize="md"
40        stylePreset="signal"
41        data={growthData}
42        dataKeys={dataKeys}
43      />
44      <InsightLineChart
45        title="MRR insight lane"
46        description="Narrative chart with milestones, anomaly callouts, and threshold bands."
47        surface="muted"
48        data={revenueData}
49        dataKey="revenue"
50        confidenceKey="forecast"
51        xKey="label"
52        detectAnomalies
53        stylePreset="glass"
54        thresholdBands={[
55          { min: 0, max: 12000, label: "Risk", color: "var(--destructive)" },
56          { min: 12000, max: 19000, label: "Target", color: "var(--chart-1)" },
57        ]}
58        eventMarkers={[
59          { index: 1, kind: "campaign", label: "Launch week" },
60          { index: 3, kind: "release", label: "New pricing" },
61        ]}
62        annotations={[{ index: 4, label: "Revenue breakout" }]}
63      />
64      <KpiStripWithTrend
65        title="Weekly active teams"
66        total="4,231"
67        change={{ value: 9.8, label: "vs last week" }}
68        stylePreset="signal"
69        data={[
70          { label: "Mon", value: 3520 },
71          { label: "Tue", value: 3610 },
72          { label: "Wed", value: 3770 },
73          { label: "Thu", value: 3890 },
74          { label: "Fri", value: 4025 },
75          { label: "Sat", value: 4180 },
76          { label: "Sun", value: 4231 },
77        ]}
78      />
79      <RevenuePanel data={revenueData} />
80    </div>
81  );
82}