@neynar/ui 0.4.0 → 1.0.0

package/src/components/ui/stories/chart.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
+import type { Meta, StoryObj } from "@storybook/react";
 import {
   Area,
   AreaChart as RechartsAreaChart,
@@ -9,9 +9,12 @@ import {
   LineChart as RechartsLineChart,
   Pie,
   PieChart as RechartsPieChart,
+  RadialBar,
+  RadialBarChart as RechartsRadialBarChart,
   XAxis,
   YAxis,
 } from "recharts";
+
 import {
   ChartContainer,
   ChartLegend,
@@ -21,15 +24,23 @@ import {
   type ChartConfig,
 } from "../chart";
 
-const meta = {
-  title: "Charts & Visualization/Chart",
+/**
+ * Chart component stories showcasing data visualization patterns.
+ *
+ * Demonstrates line charts, bar charts, area charts, and pie charts using Recharts.
+ * InContext story shows realistic API usage analytics for Neynar Dashboard.
+ * Interactive story provides a playground for testing chart configurations.
+ * Variants story displays all chart types and configuration options.
+ */
+const meta: Meta<typeof ChartContainer> = {
+  title: "Components/Advanced & Specialized/Chart",
   component: ChartContainer,
   parameters: {
     layout: "centered",
     docs: {
       description: {
         component:
-          "A flexible chart component built on Recharts with theming, configuration, and accessibility support. Provides responsive containers for all chart types with consistent styling and color management.",
+          "A flexible chart container built on Recharts with theming, configuration, and accessibility support. Provides responsive containers for all chart types with consistent styling and color management across light and dark modes.",
       },
     },
   },
@@ -37,393 +48,682 @@ const meta = {
     config: {
       control: { type: "object" },
       description:
-        "Chart configuration defining series labels, colors, and icons",
+        "Chart configuration object defining series labels, colors, and optional icons. Supports both single colors and theme-aware color mappings for light/dark modes.",
     },
     className: {
       control: { type: "text" },
-      description: "Additional CSS classes for styling",
+      description: "Additional CSS classes for custom styling and sizing",
     },
     children: {
       control: false,
-      description: "Recharts components to render",
+      description:
+        "Recharts chart components (LineChart, BarChart, AreaChart, PieChart, etc.)",
+    },
+    id: {
+      control: { type: "text" },
+      description: "Optional unique identifier for the chart container",
     },
   },
-} satisfies Meta<typeof ChartContainer>;
+};
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-// Sample data for different chart types
-const chartData = [
-  { month: "Jan", revenue: 2400, expenses: 1400, profit: 1000 },
-  { month: "Feb", revenue: 1398, expenses: 2100, profit: -702 },
-  { month: "Mar", revenue: 9800, expenses: 2000, profit: 7800 },
-  { month: "Apr", revenue: 3908, expenses: 2780, profit: 1128 },
-  { month: "May", revenue: 4800, expenses: 1890, profit: 2910 },
-  { month: "Jun", revenue: 3800, expenses: 2390, profit: 1410 },
+// Sample data for API analytics
+const apiUsageData = [
+  { date: "Jan 1", requests: 12400, rateLimit: 50000, errors: 240 },
+  { date: "Jan 8", requests: 18200, rateLimit: 50000, errors: 182 },
+  { date: "Jan 15", requests: 24800, rateLimit: 50000, errors: 496 },
+  { date: "Jan 22", requests: 31200, rateLimit: 50000, errors: 312 },
+  { date: "Jan 29", requests: 42400, rateLimit: 50000, errors: 424 },
+  { date: "Feb 5", requests: 38900, rateLimit: 50000, errors: 389 },
+  { date: "Feb 12", requests: 45600, rateLimit: 50000, errors: 456 },
+];
+
+const endpointData = [
+  { endpoint: "/v2/user", requests: 15600 },
+  { endpoint: "/v2/cast", requests: 12400 },
+  { endpoint: "/v2/feed", requests: 9800 },
+  { endpoint: "/v2/channel", requests: 7200 },
+  { endpoint: "/v2/notifications", requests: 5400 },
 ];
 
-const pieData = [
-  { category: "Desktop", value: 275, fill: "var(--color-desktop)" },
-  { category: "Mobile", value: 200, fill: "var(--color-mobile)" },
-  { category: "Tablet", value: 187, fill: "var(--color-tablet)" },
-  { category: "Other", value: 90, fill: "var(--color-other)" },
+const statusCodeData = [
+  { status: "2xx Success", count: 42800, fill: "var(--color-success)" },
+  { status: "4xx Client", count: 1240, fill: "var(--color-client-error)" },
+  { status: "5xx Server", count: 180, fill: "var(--color-server-error)" },
 ];
 
 // Base configuration for interactive controls
 const baseConfig = {
-  revenue: {
-    label: "Revenue",
+  requests: {
+    label: "API Requests",
     color: "var(--chart-1)",
   },
-  expenses: {
-    label: "Expenses",
+  rateLimit: {
+    label: "Rate Limit",
     color: "var(--chart-2)",
   },
-  profit: {
-    label: "Profit",
+  errors: {
+    label: "Errors",
     color: "var(--chart-3)",
   },
 } satisfies ChartConfig;
 
 /**
- * Interactive playground with all chart configuration options
- * Allows testing different props and configurations
+ * API Usage Analytics - A realistic Neynar Dashboard scenario.
+ * Shows API request metrics, endpoint usage, and error tracking.
  */
-export const Interactive: Story = {
-  args: {
-    config: baseConfig,
-    className: "min-h-[300px] w-[600px]",
-    children: <></>,
-  },
-  argTypes: {
-    config: {
-      control: { type: "object" },
-      description: "Chart configuration with series definitions",
-    },
-  },
-  render: (args) => (
-    <ChartContainer {...args}>
-      <RechartsBarChart data={chartData} accessibilityLayer>
-        <CartesianGrid strokeDasharray="3 3" />
-        <XAxis
-          dataKey="month"
-          tickLine={false}
-          tickMargin={10}
-          axisLine={false}
-        />
-        <YAxis />
-        <ChartTooltip content={<ChartTooltipContent />} />
-        <ChartLegend content={<ChartLegendContent />} />
-        <Bar dataKey="revenue" fill="var(--color-revenue)" radius={4} />
-        <Bar dataKey="expenses" fill="var(--color-expenses)" radius={4} />
-        <Bar dataKey="profit" fill="var(--color-profit)" radius={4} />
-      </RechartsBarChart>
-    </ChartContainer>
-  ),
-};
-
-/**
- * Showcase of all chart variants and types
- * Demonstrates different chart configurations
- */
-export const Variants: Story = {
-  args: {
-    config: baseConfig,
-    className: "min-h-[300px] w-[600px]",
-    children: <></>,
+export const InContext: Story = {
+  parameters: {
+    layout: "padded",
   },
-  render: () => (
-    <div className="grid grid-cols-2 gap-8 w-[1000px]">
-      {/* Bar Chart */}
-      <div className="space-y-2">
-        <h3 className="text-lg font-semibold">Bar Chart</h3>
-        <ChartContainer
-          config={{
-            desktop: { label: "Desktop", color: "var(--chart-1)" },
-            mobile: { label: "Mobile", color: "var(--chart-2)" },
-          }}
-          className="h-[200px]"
-        >
-          <RechartsBarChart data={chartData.slice(0, 4)}>
-            <XAxis dataKey="month" tickLine={false} axisLine={false} />
-            <ChartTooltip content={<ChartTooltipContent />} />
-            <Bar dataKey="revenue" fill="var(--color-desktop)" radius={2} />
-            <Bar dataKey="expenses" fill="var(--color-mobile)" radius={2} />
-          </RechartsBarChart>
-        </ChartContainer>
-      </div>
-
-      {/* Line Chart */}
-      <div className="space-y-2">
-        <h3 className="text-lg font-semibold">Line Chart</h3>
-        <ChartContainer
-          config={{
-            trend: { label: "Trend", color: "var(--chart-3)" },
-          }}
-          className="h-[200px]"
-        >
-          <RechartsLineChart data={chartData}>
-            <XAxis dataKey="month" tickLine={false} axisLine={false} />
-            <ChartTooltip content={<ChartTooltipContent />} />
-            <Line
-              dataKey="profit"
-              type="monotone"
-              stroke="var(--color-trend)"
-              strokeWidth={2}
-              dot={{ fill: "var(--color-trend)", strokeWidth: 2 }}
-            />
-          </RechartsLineChart>
-        </ChartContainer>
-      </div>
+  render: () => {
+    const apiConfig = {
+      requests: {
+        label: "API Requests",
+        color: "var(--chart-1)",
+      },
+      rateLimit: {
+        label: "Rate Limit",
+        color: "var(--chart-2)",
+      },
+      errors: {
+        label: "Error Count",
+        color: "var(--chart-3)",
+      },
+    } satisfies ChartConfig;
 
-      {/* Area Chart */}
-      <div className="space-y-2">
-        <h3 className="text-lg font-semibold">Area Chart</h3>
-        <ChartContainer
-          config={{
-            primary: { label: "Primary", color: "var(--chart-4)" },
-            secondary: { label: "Secondary", color: "var(--chart-5)" },
-          }}
-          className="h-[200px]"
-        >
-          <RechartsAreaChart data={chartData}>
-            <XAxis dataKey="month" tickLine={false} axisLine={false} />
-            <ChartTooltip content={<ChartTooltipContent />} />
-            <Area
-              dataKey="revenue"
-              type="natural"
-              fill="var(--color-primary)"
-              fillOpacity={0.6}
-              stroke="var(--color-primary)"
-            />
-            <Area
-              dataKey="expenses"
-              type="natural"
-              fill="var(--color-secondary)"
-              fillOpacity={0.4}
-              stroke="var(--color-secondary)"
-            />
-          </RechartsAreaChart>
-        </ChartContainer>
-      </div>
+    const endpointConfig = {
+      requests: {
+        label: "Requests",
+        color: "var(--chart-1)",
+      },
+    } satisfies ChartConfig;
 
-      {/* Pie Chart */}
-      <div className="space-y-2">
-        <h3 className="text-lg font-semibold">Pie Chart</h3>
-        <ChartContainer
-          config={{
-            desktop: { label: "Desktop", color: "var(--chart-1)" },
-            mobile: { label: "Mobile", color: "var(--chart-2)" },
-            tablet: { label: "Tablet", color: "var(--chart-3)" },
-            other: { label: "Other", color: "var(--chart-4)" },
-          }}
-          className="h-[200px]"
-        >
-          <RechartsPieChart>
-            <ChartTooltip
-              content={<ChartTooltipContent nameKey="category" />}
-            />
-            <Pie
-              data={pieData}
-              dataKey="value"
-              nameKey="category"
-              innerRadius={30}
-              outerRadius={80}
-            />
-            <ChartLegend content={<ChartLegendContent />} />
-          </RechartsPieChart>
-        </ChartContainer>
-      </div>
-    </div>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Displays all chart variants including bar, line, area, and pie charts with different configurations.",
+    const statusConfig = {
+      success: {
+        label: "2xx Success",
+        color: "hsl(142 76% 36%)",
       },
-    },
-  },
-};
+      "client-error": {
+        label: "4xx Client Error",
+        color: "hsl(48 96% 53%)",
+      },
+      "server-error": {
+        label: "5xx Server Error",
+        color: "hsl(0 84% 60%)",
+      },
+    } satisfies ChartConfig;
 
-/**
- * Real-world usage in a dashboard context
- * Shows how charts integrate into actual applications
- */
-export const InContext: Story = {
-  args: {
-    config: baseConfig,
-    className: "min-h-[300px] w-[600px]",
-    children: <></>,
-  },
-  render: () => (
-    <div className="max-w-4xl space-y-8 p-6 bg-background border rounded-lg">
-      {/* Dashboard Header */}
-      <div className="space-y-2">
-        <h2 className="text-2xl font-bold tracking-tight">
-          Analytics Dashboard
-        </h2>
-        <p className="text-muted-foreground">
-          Overview of revenue, expenses, and profit trends for Q1 2025
-        </p>
-      </div>
+    return (
+      <div className="w-full max-w-5xl space-y-8">
+        {/* Header */}
+        <div className="space-y-2">
+          <h2 className="text-2xl font-bold tracking-tight">API Analytics</h2>
+          <p className="text-muted-foreground text-sm">
+            Monitor your Neynar API usage, performance, and rate limits over the
+            past 7 weeks.
+          </p>
+        </div>
 
-      {/* Key Metrics */}
-      <div className="grid grid-cols-3 gap-4">
-        <div className="p-4 border rounded-lg">
-          <div className="text-sm font-medium text-muted-foreground">
-            Total Revenue
+        {/* Key Metrics */}
+        <div className="grid grid-cols-4 gap-4">
+          <div className="bg-card border-border rounded-lg border p-4">
+            <div className="text-muted-foreground text-sm font-medium">
+              Total Requests
+            </div>
+            <div className="mt-2 text-2xl font-bold">233,500</div>
+            <div className="mt-1 text-xs text-green-600">
+              +18.2% from last period
+            </div>
           </div>
-          <div className="text-2xl font-bold">$26,108</div>
-          <div className="text-xs text-green-600">+12.5% from last period</div>
-        </div>
-        <div className="p-4 border rounded-lg">
-          <div className="text-sm font-medium text-muted-foreground">
-            Total Expenses
+          <div className="bg-card border-border rounded-lg border p-4">
+            <div className="text-muted-foreground text-sm font-medium">
+              Avg Response Time
+            </div>
+            <div className="mt-2 text-2xl font-bold">142ms</div>
+            <div className="mt-1 text-xs text-green-600">-8.4% improvement</div>
           </div>
-          <div className="text-2xl font-bold">$12,560</div>
-          <div className="text-xs text-red-600">+8.2% from last period</div>
-        </div>
-        <div className="p-4 border rounded-lg">
-          <div className="text-sm font-medium text-muted-foreground">
-            Net Profit
+          <div className="bg-card border-border rounded-lg border p-4">
+            <div className="text-muted-foreground text-sm font-medium">
+              Success Rate
+            </div>
+            <div className="mt-2 text-2xl font-bold">97.2%</div>
+            <div className="mt-1 text-xs text-green-600">+0.3% increase</div>
+          </div>
+          <div className="bg-card border-border rounded-lg border p-4">
+            <div className="text-muted-foreground text-sm font-medium">
+              Rate Limit Usage
+            </div>
+            <div className="mt-2 text-2xl font-bold">91.2%</div>
+            <div className="mt-1 text-xs text-yellow-600">Close to limit</div>
           </div>
-          <div className="text-2xl font-bold">$13,548</div>
-          <div className="text-xs text-green-600">+18.3% from last period</div>
-        </div>
-      </div>
-
-      {/* Main Chart */}
-      <div className="space-y-4">
-        <div className="flex items-center justify-between">
-          <h3 className="text-lg font-semibold">Financial Overview</h3>
-          <div className="text-sm text-muted-foreground">Last 6 months</div>
         </div>
-        <ChartContainer config={baseConfig} className="h-[400px]">
-          <RechartsAreaChart data={chartData} accessibilityLayer>
-            <CartesianGrid strokeDasharray="3 3" />
-            <XAxis
-              dataKey="month"
-              tickLine={false}
-              tickMargin={10}
-              axisLine={false}
-            />
-            <YAxis
-              tickLine={false}
-              axisLine={false}
-              tickFormatter={(value) => `$${value.toLocaleString()}`}
-            />
-            <ChartTooltip
-              content={
-                <ChartTooltipContent
-                  formatter={(value) => [
-                    `$${value.toLocaleString()}`,
-                    undefined,
-                  ]}
-                  labelFormatter={(label) => `Month: ${label}`}
-                />
-              }
-            />
-            <ChartLegend content={<ChartLegendContent />} />
-            <Area
-              dataKey="revenue"
-              type="natural"
-              fill="var(--color-revenue)"
-              fillOpacity={0.6}
-              stroke="var(--color-revenue)"
-              strokeWidth={2}
-            />
-            <Area
-              dataKey="expenses"
-              type="natural"
-              fill="var(--color-expenses)"
-              fillOpacity={0.4}
-              stroke="var(--color-expenses)"
-              strokeWidth={2}
-            />
-            <Line
-              dataKey="profit"
-              type="monotone"
-              stroke="var(--color-profit)"
-              strokeWidth={3}
-              dot={{ fill: "var(--color-profit)", strokeWidth: 2, r: 4 }}
-            />
-          </RechartsAreaChart>
-        </ChartContainer>
-      </div>
 
-      {/* Secondary Charts */}
-      <div className="grid grid-cols-2 gap-6">
-        <div className="space-y-3">
-          <h4 className="font-medium">Monthly Trends</h4>
-          <ChartContainer
-            config={{
-              growth: { label: "Growth Rate", color: "var(--chart-5)" },
-            }}
-            className="h-[200px]"
-          >
-            <RechartsLineChart data={chartData}>
-              <XAxis dataKey="month" tickLine={false} axisLine={false} />
+        {/* Main Chart - API Usage Over Time */}
+        <div className="bg-card border-border space-y-4 rounded-lg border p-6">
+          <div className="flex items-center justify-between">
+            <div>
+              <h3 className="text-lg font-semibold">API Usage Over Time</h3>
+              <p className="text-muted-foreground text-sm">
+                Weekly request volume and error tracking
+              </p>
+            </div>
+            <div className="text-muted-foreground text-sm">Last 7 weeks</div>
+          </div>
+          <ChartContainer config={apiConfig} className="h-[400px]">
+            <RechartsAreaChart data={apiUsageData} accessibilityLayer>
+              <CartesianGrid strokeDasharray="3 3" />
+              <XAxis
+                dataKey="date"
+                tickLine={false}
+                tickMargin={10}
+                axisLine={false}
+                tickFormatter={(value) => value.slice(0, 6)}
+              />
+              <YAxis
+                tickLine={false}
+                axisLine={false}
+                tickFormatter={(value) => `${(value / 1000).toFixed(0)}k`}
+              />
               <ChartTooltip
                 content={
                   <ChartTooltipContent
-                    formatter={(value) => [`${value}%`, "Growth"]}
+                    formatter={(value, name) => [
+                      typeof value === "number"
+                        ? value.toLocaleString()
+                        : value,
+                      name,
+                    ]}
+                    labelFormatter={(label) => `Week of ${label}`}
                   />
                 }
               />
+              <ChartLegend content={<ChartLegendContent />} />
+              <Area
+                dataKey="rateLimit"
+                type="monotone"
+                fill="var(--color-rateLimit)"
+                fillOpacity={0.2}
+                stroke="var(--color-rateLimit)"
+                strokeWidth={1}
+                strokeDasharray="5 5"
+              />
+              <Area
+                dataKey="requests"
+                type="monotone"
+                fill="var(--color-requests)"
+                fillOpacity={0.6}
+                stroke="var(--color-requests)"
+                strokeWidth={2}
+              />
               <Line
-                dataKey="profit"
+                dataKey="errors"
                 type="monotone"
-                stroke="var(--color-growth)"
+                stroke="var(--color-errors)"
                 strokeWidth={2}
-                dot={false}
+                dot={{ fill: "var(--color-errors)", strokeWidth: 2, r: 4 }}
               />
-            </RechartsLineChart>
+            </RechartsAreaChart>
           </ChartContainer>
         </div>
 
-        <div className="space-y-3">
-          <h4 className="font-medium">Performance Distribution</h4>
-          <ChartContainer
-            config={{
-              positive: { label: "Positive", color: "var(--chart-1)" },
-              negative: { label: "Negative", color: "var(--chart-2)" },
-            }}
-            className="h-[200px]"
-          >
-            <RechartsPieChart>
-              <ChartTooltip content={<ChartTooltipContent />} />
-              <Pie
-                data={[
-                  {
-                    name: "Positive",
-                    value: 75,
-                    fill: "var(--color-positive)",
-                  },
-                  {
-                    name: "Negative",
-                    value: 25,
-                    fill: "var(--color-negative)",
-                  },
-                ]}
-                dataKey="value"
-                innerRadius={40}
-                outerRadius={80}
-              />
-            </RechartsPieChart>
-          </ChartContainer>
+        {/* Secondary Charts */}
+        <div className="grid grid-cols-2 gap-6">
+          {/* Top Endpoints */}
+          <div className="bg-card border-border space-y-4 rounded-lg border p-6">
+            <div>
+              <h4 className="font-semibold">Top API Endpoints</h4>
+              <p className="text-muted-foreground text-sm">
+                Most requested endpoints this week
+              </p>
+            </div>
+            <ChartContainer config={endpointConfig} className="h-[280px]">
+              <RechartsBarChart
+                data={endpointData}
+                layout="vertical"
+                accessibilityLayer
+              >
+                <XAxis type="number" tickLine={false} axisLine={false} />
+                <YAxis
+                  type="category"
+                  dataKey="endpoint"
+                  tickLine={false}
+                  axisLine={false}
+                  width={120}
+                />
+                <ChartTooltip
+                  content={
+                    <ChartTooltipContent
+                      formatter={(value) => [
+                        typeof value === "number"
+                          ? value.toLocaleString()
+                          : value,
+                        "Requests",
+                      ]}
+                    />
+                  }
+                />
+                <Bar
+                  dataKey="requests"
+                  fill="var(--color-requests)"
+                  radius={4}
+                />
+              </RechartsBarChart>
+            </ChartContainer>
+          </div>
+
+          {/* Status Code Distribution */}
+          <div className="bg-card border-border space-y-4 rounded-lg border p-6">
+            <div>
+              <h4 className="font-semibold">Response Status Distribution</h4>
+              <p className="text-muted-foreground text-sm">
+                HTTP status code breakdown
+              </p>
+            </div>
+            <ChartContainer config={statusConfig} className="h-[280px]">
+              <RechartsPieChart>
+                <ChartTooltip
+                  content={
+                    <ChartTooltipContent
+                      nameKey="status"
+                      formatter={(value) => [
+                        typeof value === "number"
+                          ? value.toLocaleString()
+                          : value,
+                        "Requests",
+                      ]}
+                    />
+                  }
+                />
+                <Pie
+                  data={statusCodeData}
+                  dataKey="count"
+                  nameKey="status"
+                  innerRadius={60}
+                  outerRadius={100}
+                  paddingAngle={2}
+                />
+                <ChartLegend content={<ChartLegendContent />} />
+              </RechartsPieChart>
+            </ChartContainer>
+          </div>
         </div>
       </div>
-    </div>
-  ),
+    );
+  },
+};
+
+/**
+ * Complete design system reference showing all chart types and configurations.
+ */
+export const Variants: Story = {
   parameters: {
-    layout: "fullscreen",
-    docs: {
-      description: {
-        story:
-          "Demonstrates chart components in a realistic dashboard context with multiple chart types, formatting, and business-relevant data visualization.",
-      },
-    },
+    layout: "padded",
   },
+  render: () => {
+    const simpleData = [
+      { month: "Jan", value: 2400, secondary: 1400 },
+      { month: "Feb", value: 1398, secondary: 2100 },
+      { month: "Mar", value: 9800, secondary: 2000 },
+      { month: "Apr", value: 3908, secondary: 2780 },
+      { month: "May", value: 4800, secondary: 1890 },
+      { month: "Jun", value: 3800, secondary: 2390 },
+    ];
+
+    const pieChartData = [
+      { category: "Desktop", value: 275, fill: "var(--color-desktop)" },
+      { category: "Mobile", value: 200, fill: "var(--color-mobile)" },
+      { category: "Tablet", value: 187, fill: "var(--color-tablet)" },
+      { category: "Other", value: 90, fill: "var(--color-other)" },
+    ];
+
+    const radialData = [
+      { name: "Usage", value: 72, fill: "var(--color-usage)" },
+    ];
+
+    return (
+      <div className="w-full max-w-5xl space-y-10">
+        {/* Chart Types */}
+        <section className="space-y-4">
+          <div>
+            <h3 className="text-lg font-semibold">Chart Types</h3>
+            <p className="text-muted-foreground text-sm">
+              Different visualization types for various data patterns.
+            </p>
+          </div>
+          <div className="grid grid-cols-2 gap-6">
+            {/* Line Chart */}
+            <div className="space-y-3">
+              <h4 className="font-medium">Line Chart</h4>
+              <ChartContainer
+                config={{
+                  value: { label: "Value", color: "var(--chart-1)" },
+                }}
+                className="h-[200px]"
+              >
+                <RechartsLineChart data={simpleData}>
+                  <CartesianGrid strokeDasharray="3 3" />
+                  <XAxis dataKey="month" tickLine={false} axisLine={false} />
+                  <YAxis tickLine={false} axisLine={false} />
+                  <ChartTooltip content={<ChartTooltipContent />} />
+                  <Line
+                    dataKey="value"
+                    type="monotone"
+                    stroke="var(--color-value)"
+                    strokeWidth={2}
+                    dot={{ fill: "var(--color-value)", strokeWidth: 2 }}
+                  />
+                </RechartsLineChart>
+              </ChartContainer>
+            </div>
+
+            {/* Bar Chart */}
+            <div className="space-y-3">
+              <h4 className="font-medium">Bar Chart</h4>
+              <ChartContainer
+                config={{
+                  value: { label: "Primary", color: "var(--chart-2)" },
+                  secondary: { label: "Secondary", color: "var(--chart-3)" },
+                }}
+                className="h-[200px]"
+              >
+                <RechartsBarChart data={simpleData}>
+                  <CartesianGrid strokeDasharray="3 3" />
+                  <XAxis dataKey="month" tickLine={false} axisLine={false} />
+                  <YAxis tickLine={false} axisLine={false} />
+                  <ChartTooltip content={<ChartTooltipContent />} />
+                  <Bar dataKey="value" fill="var(--color-value)" radius={4} />
+                  <Bar
+                    dataKey="secondary"
+                    fill="var(--color-secondary)"
+                    radius={4}
+                  />
+                </RechartsBarChart>
+              </ChartContainer>
+            </div>
+
+            {/* Area Chart */}
+            <div className="space-y-3">
+              <h4 className="font-medium">Area Chart</h4>
+              <ChartContainer
+                config={{
+                  value: { label: "Primary", color: "var(--chart-4)" },
+                  secondary: { label: "Secondary", color: "var(--chart-5)" },
+                }}
+                className="h-[200px]"
+              >
+                <RechartsAreaChart data={simpleData}>
+                  <CartesianGrid strokeDasharray="3 3" />
+                  <XAxis dataKey="month" tickLine={false} axisLine={false} />
+                  <YAxis tickLine={false} axisLine={false} />
+                  <ChartTooltip content={<ChartTooltipContent />} />
+                  <Area
+                    dataKey="value"
+                    type="natural"
+                    fill="var(--color-value)"
+                    fillOpacity={0.6}
+                    stroke="var(--color-value)"
+                    strokeWidth={2}
+                  />
+                  <Area
+                    dataKey="secondary"
+                    type="natural"
+                    fill="var(--color-secondary)"
+                    fillOpacity={0.4}
+                    stroke="var(--color-secondary)"
+                    strokeWidth={2}
+                  />
+                </RechartsAreaChart>
+              </ChartContainer>
+            </div>
+
+            {/* Pie Chart */}
+            <div className="space-y-3">
+              <h4 className="font-medium">Pie Chart</h4>
+              <ChartContainer
+                config={{
+                  desktop: { label: "Desktop", color: "var(--chart-1)" },
+                  mobile: { label: "Mobile", color: "var(--chart-2)" },
+                  tablet: { label: "Tablet", color: "var(--chart-3)" },
+                  other: { label: "Other", color: "var(--chart-4)" },
+                }}
+                className="h-[200px]"
+              >
+                <RechartsPieChart>
+                  <ChartTooltip
+                    content={<ChartTooltipContent nameKey="category" />}
+                  />
+                  <Pie
+                    data={pieChartData}
+                    dataKey="value"
+                    nameKey="category"
+                    innerRadius={40}
+                    outerRadius={80}
+                  />
+                </RechartsPieChart>
+              </ChartContainer>
+            </div>
+          </div>
+        </section>
+
+        {/* Tooltip Indicators */}
+        <section className="space-y-4">
+          <div>
+            <h3 className="text-lg font-semibold">Tooltip Indicators</h3>
+            <p className="text-muted-foreground text-sm">
+              Different indicator styles for chart tooltips.
+            </p>
+          </div>
+          <div className="grid grid-cols-3 gap-6">
+            {/* Dot Indicator */}
+            <div className="space-y-3">
+              <h4 className="font-medium">Dot Indicator (Default)</h4>
+              <ChartContainer
+                config={{
+                  value: { label: "Value", color: "var(--chart-1)" },
+                }}
+                className="h-[180px]"
+              >
+                <RechartsLineChart data={simpleData.slice(0, 4)}>
+                  <XAxis dataKey="month" tickLine={false} axisLine={false} />
+                  <ChartTooltip
+                    content={<ChartTooltipContent indicator="dot" />}
+                  />
+                  <Line
+                    dataKey="value"
+                    stroke="var(--color-value)"
+                    strokeWidth={2}
+                  />
+                </RechartsLineChart>
+              </ChartContainer>
+            </div>
+
+            {/* Line Indicator */}
+            <div className="space-y-3">
+              <h4 className="font-medium">Line Indicator</h4>
+              <ChartContainer
+                config={{
+                  value: { label: "Value", color: "var(--chart-2)" },
+                }}
+                className="h-[180px]"
+              >
+                <RechartsLineChart data={simpleData.slice(0, 4)}>
+                  <XAxis dataKey="month" tickLine={false} axisLine={false} />
+                  <ChartTooltip
+                    content={<ChartTooltipContent indicator="line" />}
+                  />
+                  <Line
+                    dataKey="value"
+                    stroke="var(--color-value)"
+                    strokeWidth={2}
+                  />
+                </RechartsLineChart>
+              </ChartContainer>
+            </div>
+
+            {/* Dashed Indicator */}
+            <div className="space-y-3">
+              <h4 className="font-medium">Dashed Indicator</h4>
+              <ChartContainer
+                config={{
+                  value: { label: "Value", color: "var(--chart-3)" },
+                }}
+                className="h-[180px]"
+              >
+                <RechartsLineChart data={simpleData.slice(0, 4)}>
+                  <XAxis dataKey="month" tickLine={false} axisLine={false} />
+                  <ChartTooltip
+                    content={<ChartTooltipContent indicator="dashed" />}
+                  />
+                  <Line
+                    dataKey="value"
+                    stroke="var(--color-value)"
+                    strokeWidth={2}
+                  />
+                </RechartsLineChart>
+              </ChartContainer>
+            </div>
+          </div>
+        </section>
+
+        {/* Special Charts */}
+        <section className="space-y-4">
+          <div>
+            <h3 className="text-lg font-semibold">
+              Specialized Visualizations
+            </h3>
+            <p className="text-muted-foreground text-sm">
+              Advanced chart types for specific use cases.
+            </p>
+          </div>
+          <div className="grid grid-cols-2 gap-6">
+            {/* Horizontal Bar Chart */}
+            <div className="space-y-3">
+              <h4 className="font-medium">Horizontal Bar Chart</h4>
+              <ChartContainer
+                config={{
+                  value: { label: "Value", color: "var(--chart-1)" },
+                }}
+                className="h-[240px]"
+              >
+                <RechartsBarChart
+                  data={simpleData.slice(0, 5)}
+                  layout="vertical"
+                >
+                  <XAxis type="number" tickLine={false} axisLine={false} />
+                  <YAxis
+                    type="category"
+                    dataKey="month"
+                    tickLine={false}
+                    axisLine={false}
+                    width={40}
+                  />
+                  <ChartTooltip content={<ChartTooltipContent />} />
+                  <Bar dataKey="value" fill="var(--color-value)" radius={4} />
+                </RechartsBarChart>
+              </ChartContainer>
+            </div>
+
+            {/* Radial Progress */}
+            <div className="space-y-3">
+              <h4 className="font-medium">Radial Bar Chart</h4>
+              <ChartContainer
+                config={{
+                  usage: { label: "Usage", color: "var(--chart-2)" },
+                }}
+                className="h-[240px]"
+              >
+                <RechartsRadialBarChart
+                  data={radialData}
+                  startAngle={90}
+                  endAngle={-270}
+                  innerRadius={60}
+                  outerRadius={100}
+                >
+                  <ChartTooltip content={<ChartTooltipContent />} />
+                  <RadialBar dataKey="value" cornerRadius={10} />
+                </RechartsRadialBarChart>
+              </ChartContainer>
+            </div>
+          </div>
+        </section>
+
+        {/* With Legend */}
+        <section className="space-y-4">
+          <div>
+            <h3 className="text-lg font-semibold">Charts with Legend</h3>
+            <p className="text-muted-foreground text-sm">
+              Adding legends for multi-series charts.
+            </p>
+          </div>
+          <div className="space-y-3">
+            <ChartContainer
+              config={{
+                value: { label: "Primary Series", color: "var(--chart-1)" },
+                secondary: {
+                  label: "Secondary Series",
+                  color: "var(--chart-2)",
+                },
+              }}
+              className="h-[280px]"
+            >
+              <RechartsAreaChart data={simpleData}>
+                <CartesianGrid strokeDasharray="3 3" />
+                <XAxis dataKey="month" tickLine={false} axisLine={false} />
+                <YAxis tickLine={false} axisLine={false} />
+                <ChartTooltip content={<ChartTooltipContent />} />
+                <ChartLegend content={<ChartLegendContent />} />
+                <Area
+                  dataKey="value"
+                  type="monotone"
+                  fill="var(--color-value)"
+                  fillOpacity={0.6}
+                  stroke="var(--color-value)"
+                  strokeWidth={2}
+                />
+                <Area
+                  dataKey="secondary"
+                  type="monotone"
+                  fill="var(--color-secondary)"
+                  fillOpacity={0.4}
+                  stroke="var(--color-secondary)"
+                  strokeWidth={2}
+                />
+              </RechartsAreaChart>
+            </ChartContainer>
+          </div>
+        </section>
+      </div>
+    );
+  },
+};
+
+/**
+ * Interactive playground for testing chart configurations.
+ */
+export const Interactive: Story = {
+  args: {
+    config: baseConfig,
+    className: "h-[300px] w-[600px]",
+  },
+  render: (args) => (
+    <ChartContainer {...args}>
+      <RechartsBarChart data={apiUsageData} accessibilityLayer>
+        <CartesianGrid strokeDasharray="3 3" />
+        <XAxis
+          dataKey="date"
+          tickLine={false}
+          tickMargin={10}
+          axisLine={false}
+        />
+        <YAxis />
+        <ChartTooltip content={<ChartTooltipContent />} />
+        <ChartLegend content={<ChartLegendContent />} />
+        <Bar dataKey="requests" fill="var(--color-requests)" radius={4} />
+        <Bar dataKey="errors" fill="var(--color-errors)" radius={4} />
+      </RechartsBarChart>
+    </ChartContainer>
+  ),
 };