xertica-ui 2.1.2 → 2.1.4

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

@@ -12,7 +12,13 @@ import {
   InteractiveTimeSeriesChart,
   ComboMetricChart,
   DonutBreakdownChart,
+  SparklineChart,
+  RadarMetricChart,
+  PieMetricChart,
+  RadialBarMetricChart,
+  GaugeChart,
   type ChartConfig,
+  type GaugeChartThreshold,
 } from './chart';
 import {
   BarChart,
@@ -25,6 +31,7 @@ import {
 } from 'recharts';
 import { Card, CardHeader, CardTitle, CardContent } from '../card';
 import React from 'react';
+import { TrendingUp, TrendingDown, Minus } from 'lucide-react';
 
 const meta: Meta<typeof DashboardBarChart> = {
   title: 'UI/Chart',
@@ -55,6 +62,8 @@ const meta: Meta<typeof DashboardBarChart> = {
 export default meta;
 type Story = StoryObj<typeof DashboardBarChart>;
 
+// ─── Shared data ──────────────────────────────────────────────────────────────
+
 const data = [
   { month: 'Jan', revenue: 4000, expenses: 2400 },
   { month: 'Feb', revenue: 3000, expenses: 1398 },
@@ -73,7 +82,7 @@ const richChartConfig: ChartConfig = {
   revenue: { label: 'Revenue', color: 'var(--chart-1)' },
   pipeline: { label: 'Pipeline', color: 'var(--chart-4)' },
   conversion: { label: 'Conversion', color: 'var(--chart-2)' },
-  churn: { label: 'Churn', color: 'var(--chart-3)' },
+  churn: { label: 'Churn', color: 'var(--chart-5)' },
 };
 
 const richData = [
@@ -83,6 +92,8 @@ const richData = [
   { date: 'Apr 22', revenue: 5600, pipeline: 4300, conversion: 41, churn: 9 },
   { date: 'Apr 29', revenue: 7200, pipeline: 4700, conversion: 48, churn: 5 },
   { date: 'May 06', revenue: 7900, pipeline: 5300, conversion: 52, churn: 4 },
+  { date: 'May 13', revenue: 8400, pipeline: 5800, conversion: 55, churn: 3 },
+  { date: 'May 20', revenue: 9100, pipeline: 6200, conversion: 58, churn: 4 },
 ];
 
 const breakdownConfig: ChartConfig = {
@@ -97,7 +108,10 @@ const breakdownData = [
   { name: 'startup', value: 17 },
 ];
 
+// ─── Primitive stories ────────────────────────────────────────────────────────
+
 export const BarChartExample: Story = {
+  name: 'Primitive / Bar Chart',
   render: () => (
     <Card className="w-full max-w-4xl">
       <CardHeader>
@@ -120,6 +134,7 @@ export const BarChartExample: Story = {
 };
 
 export const LineChartExample: Story = {
+  name: 'Primitive / Line Chart',
   render: () => (
     <Card className="w-full max-w-4xl">
       <CardHeader>
@@ -128,7 +143,7 @@ export const LineChartExample: Story = {
       <CardContent>
         <ChartContainer config={chartConfig} className="h-[300px] w-full">
           <LineChart data={data}>
-            <CartesianGrid vertical={false} />
+            <CartesianGrid vertical={false} strokeDasharray="3 3" />
             <XAxis dataKey="month" tickLine={false} axisLine={false} />
             <ChartTooltip content={<ChartTooltipContent />} />
             <Line
@@ -136,8 +151,8 @@ export const LineChartExample: Story = {
               dataKey="revenue"
               stroke="var(--color-revenue)"
               strokeWidth={3}
-              dot={{ r: 4, fill: "var(--color-revenue)" }}
-              activeDot={{ r: 6 }}
+              dot={{ r: 4, fill: "var(--color-revenue)", strokeWidth: 0 }}
+              activeDot={{ r: 6, strokeWidth: 0 }}
             />
           </LineChart>
         </ChartContainer>
@@ -146,7 +161,10 @@ export const LineChartExample: Story = {
   ),
 };
 
+// ─── Dashboard chart stories ──────────────────────────────────────────────────
+
 export const DashboardBarChartExample: Story = {
+  name: 'Bar Chart',
   args: {
     data: richData,
     indexKey: 'date',
@@ -173,10 +191,11 @@ export const DashboardBarChartExample: Story = {
 };
 
 export const DashboardLineChartExample: Story = {
+  name: 'Line Chart',
   render: () => (
     <ChartCard
       title="Growth Trend"
-      description="Multi-series line chart with color markers"
+      description="Multi-series line chart with smooth curves"
     >
       <DashboardLineChart
         data={richData}
@@ -192,12 +211,16 @@ export const DashboardLineChartExample: Story = {
           { key: 'pipeline', label: 'Pipeline' },
           { key: 'conversion', label: 'Conversion' },
         ]}
+        showDots
+        curveType="monotone"
+        strokeWidth={2.5}
       />
     </ChartCard>
   ),
 };
 
 export const HorizontalBarChartExample: Story = {
+  name: 'Horizontal Bar Chart',
   render: () => (
     <ChartCard
       title="Top Segments"
@@ -222,6 +245,7 @@ export const HorizontalBarChartExample: Story = {
 };
 
 export const InteractiveTimeSeriesExample: Story = {
+  name: 'Interactive Time Series',
   render: () => (
     <ChartCard
       title="Executive Trend"
@@ -237,12 +261,38 @@ export const InteractiveTimeSeriesExample: Story = {
           { key: 'pipeline', label: 'Pipeline' },
           { key: 'conversion', label: 'Conversion' },
         ]}
+        gradientFill
+      />
+    </ChartCard>
+  ),
+};
+
+export const GradientAreaChartExample: Story = {
+  name: 'Gradient Area Chart',
+  render: () => (
+    <ChartCard
+      title="Revenue Over Time"
+      description="Area chart with gradient fill for a modern look"
+    >
+      <InteractiveTimeSeriesChart
+        data={richData}
+        indexKey="date"
+        config={{ revenue: { label: 'Revenue', color: 'var(--chart-1)' } }}
+        colors={['var(--chart-1)']}
+        series={[{ key: 'revenue', label: 'Revenue' }]}
+        gradientFill
+        showDots
+        periods={[
+          { value: '7d', label: '7 days' },
+          { value: '30d', label: '30 days' },
+        ]}
       />
     </ChartCard>
   ),
 };
 
 export const ComboMetricChartExample: Story = {
+  name: 'Combo Metric Chart',
   render: () => (
     <ChartCard
       title="Pipeline Health"
@@ -266,7 +316,34 @@ export const ComboMetricChartExample: Story = {
   ),
 };
 
+export const ComboWithGradientAreaExample: Story = {
+  name: 'Combo Chart with Gradient Area',
+  render: () => (
+    <ChartCard
+      title="Revenue & Pipeline"
+      description="Gradient area for revenue, line for conversion rate"
+    >
+      <ComboMetricChart
+        data={richData}
+        indexKey="date"
+        config={richChartConfig}
+        colors={{
+          revenue: 'var(--chart-1)',
+          conversion: 'var(--chart-2)',
+        }}
+        series={[
+          { key: 'revenue', type: 'area' },
+          { key: 'conversion', type: 'line' },
+        ]}
+        gradientFill
+        curveType="monotone"
+      />
+    </ChartCard>
+  ),
+};
+
 export const DonutBreakdownExample: Story = {
+  name: 'Donut Chart',
   render: () => (
     <ChartCard
       title="Customer Mix"
@@ -283,7 +360,250 @@ export const DonutBreakdownExample: Story = {
   ),
 };
 
+// ─── Sparkline stories ────────────────────────────────────────────────────────
+
+const sparkData = [
+  { v: 12 }, { v: 18 }, { v: 14 }, { v: 22 }, { v: 19 },
+  { v: 28 }, { v: 24 }, { v: 31 }, { v: 27 }, { v: 35 },
+];
+
+const sparkDataDown = [
+  { v: 35 }, { v: 30 }, { v: 28 }, { v: 22 }, { v: 25 },
+  { v: 18 }, { v: 20 }, { v: 14 }, { v: 12 }, { v: 8 },
+];
+
+export const SparklineExample: Story = {
+  name: 'Sparkline Chart',
+  render: () => (
+    <div className="space-y-6 max-w-2xl">
+      <p className="text-sm text-muted-foreground">
+        Sparklines are minimal inline charts designed for stat cards and table cells.
+      </p>
+
+      {/* Stat cards with sparklines */}
+      <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
+        <Card className="p-4">
+          <div className="flex items-start justify-between mb-3">
+            <div>
+              <p className="text-xs text-muted-foreground font-medium uppercase tracking-wide">Revenue</p>
+              <p className="text-2xl font-bold mt-0.5">$35.2K</p>
+            </div>
+            <span className="inline-flex items-center gap-1 text-xs font-medium text-emerald-600 bg-emerald-50 dark:bg-emerald-950 dark:text-emerald-400 px-2 py-0.5 rounded-full">
+              <TrendingUp className="size-3" />
+              +12%
+            </span>
+          </div>
+          <SparklineChart
+            data={sparkData}
+            dataKey="v"
+            color="var(--chart-2)"
+            filled
+            showEndDot
+            className="h-12"
+          />
+        </Card>
+
+        <Card className="p-4">
+          <div className="flex items-start justify-between mb-3">
+            <div>
+              <p className="text-xs text-muted-foreground font-medium uppercase tracking-wide">Churn</p>
+              <p className="text-2xl font-bold mt-0.5">8.4%</p>
+            </div>
+            <span className="inline-flex items-center gap-1 text-xs font-medium text-red-600 bg-red-50 dark:bg-red-950 dark:text-red-400 px-2 py-0.5 rounded-full">
+              <TrendingDown className="size-3" />
+              -3%
+            </span>
+          </div>
+          <SparklineChart
+            data={sparkDataDown}
+            dataKey="v"
+            color="var(--chart-5)"
+            filled
+            showEndDot
+            className="h-12"
+          />
+        </Card>
+
+        <Card className="p-4">
+          <div className="flex items-start justify-between mb-3">
+            <div>
+              <p className="text-xs text-muted-foreground font-medium uppercase tracking-wide">Pipeline</p>
+              <p className="text-2xl font-bold mt-0.5">$128K</p>
+            </div>
+            <span className="inline-flex items-center gap-1 text-xs font-medium text-muted-foreground bg-muted px-2 py-0.5 rounded-full">
+              <Minus className="size-3" />
+              0%
+            </span>
+          </div>
+          <SparklineChart
+            data={[
+              { v: 20 }, { v: 22 }, { v: 19 }, { v: 23 }, { v: 21 },
+              { v: 24 }, { v: 22 }, { v: 25 }, { v: 23 }, { v: 24 },
+            ]}
+            dataKey="v"
+            color="var(--chart-4)"
+            filled
+            showEndDot
+            className="h-12"
+          />
+        </Card>
+      </div>
+
+      {/* Sparkline variants */}
+      <ChartCard title="Sparkline Variants" description="Line-only vs filled area">
+        <div className="space-y-4 py-2">
+          <div className="flex items-center gap-4">
+            <span className="text-xs text-muted-foreground w-24 shrink-0">Filled (default)</span>
+            <SparklineChart data={sparkData} dataKey="v" color="var(--chart-1)" filled className="h-10 flex-1" />
+          </div>
+          <div className="flex items-center gap-4">
+            <span className="text-xs text-muted-foreground w-24 shrink-0">Line only</span>
+            <SparklineChart data={sparkData} dataKey="v" color="var(--chart-3)" filled={false} showEndDot={false} className="h-10 flex-1" />
+          </div>
+          <div className="flex items-center gap-4">
+            <span className="text-xs text-muted-foreground w-24 shrink-0">Step curve</span>
+            <SparklineChart data={sparkData} dataKey="v" color="var(--chart-6)" filled curveType="step" className="h-10 flex-1" />
+          </div>
+        </div>
+      </ChartCard>
+    </div>
+  ),
+};
+
+// ─── Dashboard layout story ───────────────────────────────────────────────────
+
+export const DashboardLayoutExample: Story = {
+  name: 'Dashboard Layout',
+  render: () => {
+    const kpiData = [
+      { label: 'Total Revenue', value: '$128.4K', trend: '+18%', up: true, sparkData: sparkData, color: 'var(--chart-1)' },
+      { label: 'Active Pipeline', value: '$62.1K', trend: '+9%', up: true, sparkData: sparkData.map(d => ({ v: d.v * 0.7 })), color: 'var(--chart-4)' },
+      { label: 'Conversion Rate', value: '58%', trend: '+4%', up: true, sparkData: sparkData.map(d => ({ v: d.v * 0.5 })), color: 'var(--chart-2)' },
+      { label: 'Churn Rate', value: '3.2%', trend: '-1%', up: false, sparkData: sparkDataDown, color: 'var(--chart-5)' },
+    ];
+
+    return (
+      <div className="space-y-6">
+        {/* KPI row */}
+        <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+          {kpiData.map((kpi) => (
+            <Card key={kpi.label} className="p-4">
+              <div className="flex items-start justify-between mb-3">
+                <div>
+                  <p className="text-xs text-muted-foreground font-medium">{kpi.label}</p>
+                  <p className="text-xl font-bold mt-0.5">{kpi.value}</p>
+                </div>
+                <span className={`inline-flex items-center gap-1 text-xs font-medium px-2 py-0.5 rounded-full ${kpi.up
+                  ? 'text-emerald-600 bg-emerald-50 dark:bg-emerald-950 dark:text-emerald-400'
+                  : 'text-red-600 bg-red-50 dark:bg-red-950 dark:text-red-400'
+                  }`}>
+                  {kpi.up ? <TrendingUp className="size-3" /> : <TrendingDown className="size-3" />}
+                  {kpi.trend}
+                </span>
+              </div>
+              <SparklineChart
+                data={kpi.sparkData}
+                dataKey="v"
+                color={kpi.color}
+                filled
+                showEndDot
+                className="h-10"
+              />
+            </Card>
+          ))}
+        </div>
+
+        {/* Main charts row */}
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
+          <div className="lg:col-span-2">
+            <ChartCard
+              title="Revenue & Pipeline"
+              description="Weekly performance overview"
+            >
+              <InteractiveTimeSeriesChart
+                data={richData}
+                indexKey="date"
+                config={richChartConfig}
+                colors={['var(--chart-1)', 'var(--chart-4)', 'var(--chart-2)']}
+                series={[
+                  { key: 'revenue', label: 'Revenue' },
+                  { key: 'pipeline', label: 'Pipeline' },
+                  { key: 'conversion', label: 'Conversion' },
+                ]}
+                gradientFill
+                periods={[
+                  { value: '7d', label: '7 days' },
+                  { value: '30d', label: '30 days' },
+                ]}
+              />
+            </ChartCard>
+          </div>
+
+          <ChartCard
+            title="Customer Mix"
+            description="Segment breakdown"
+          >
+            <DonutBreakdownChart
+              data={breakdownData}
+              config={breakdownConfig}
+              colors={['var(--chart-1)', 'var(--chart-4)', 'var(--chart-2)']}
+              centerValue="100%"
+              centerLabel="Accounts"
+            />
+          </ChartCard>
+        </div>
+
+        {/* Bottom row */}
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+          <ChartCard
+            title="Top Segments"
+            description="Revenue by customer segment"
+          >
+            <HorizontalBarChart
+              data={[
+                { segment: 'Enterprise', revenue: 7600 },
+                { segment: 'Mid-market', revenue: 5400 },
+                { segment: 'Startup', revenue: 3100 },
+                { segment: 'Partners', revenue: 2200 },
+              ]}
+              indexKey="segment"
+              config={{ revenue: { label: 'Revenue', color: 'var(--chart-1)' } }}
+              colors={{ revenue: 'var(--chart-1)' }}
+              barSize="xl"
+              categoryWidth={110}
+              showLegend={false}
+            />
+          </ChartCard>
+
+          <ChartCard
+            title="Pipeline Health"
+            description="Volume vs conversion rate"
+          >
+            <ComboMetricChart
+              data={richData}
+              indexKey="date"
+              config={richChartConfig}
+              colors={{
+                pipeline: 'var(--chart-4)',
+                conversion: 'var(--chart-2)',
+              }}
+              barSize="lg"
+              series={[
+                { key: 'pipeline', type: 'bar' },
+                { key: 'conversion', type: 'line' },
+              ]}
+            />
+          </ChartCard>
+        </div>
+      </div>
+    );
+  },
+};
+
+// ─── State stories ────────────────────────────────────────────────────────────
+
 export const EmptyStateExample: Story = {
+  name: 'State / Empty',
   render: () => (
     <ChartCard
       title="Revenue by Week"
@@ -300,6 +620,7 @@ export const EmptyStateExample: Story = {
 };
 
 export const ConnectionErrorExample: Story = {
+  name: 'State / Connection Error',
   render: () => (
     <ChartCard
       title="Pipeline Health"
@@ -316,10 +637,30 @@ export const ConnectionErrorExample: Story = {
   ),
 };
 
+export const LoadingStateExample: Story = {
+  name: 'State / Loading',
+  render: () => (
+    <ChartCard
+      title="Revenue by Week"
+      description="Loading skeleton while data is fetched"
+    >
+      <DashboardBarChart
+        data={[]}
+        indexKey="date"
+        config={richChartConfig}
+        isLoading
+      />
+    </ChartCard>
+  ),
+};
+
+// ─── Variant stories ──────────────────────────────────────────────────────────
+
 export const BarSizeVariantsExample: Story = {
+  name: 'Variants / Bar Sizes',
   render: () => (
     <div className="space-y-6">
-      <ChartCard title="Thin Bars" description="barSize=&quot;sm&quot;">
+      <ChartCard title="Thin Bars" description='barSize="sm"'>
         <DashboardBarChart
           data={richData}
           indexKey="date"
@@ -329,7 +670,7 @@ export const BarSizeVariantsExample: Story = {
           showLegend={false}
         />
       </ChartCard>
-      <ChartCard title="Wide Bars" description="barSize=&quot;xl&quot;">
+      <ChartCard title="Wide Bars" description='barSize="xl"'>
         <DashboardBarChart
           data={richData}
           indexKey="date"
@@ -342,3 +683,621 @@ export const BarSizeVariantsExample: Story = {
     </div>
   ),
 };
+
+export const CurveTypeVariantsExample: Story = {
+  name: 'Variants / Curve Types',
+  render: () => (
+    <div className="space-y-6">
+      {(['monotone', 'linear', 'step', 'natural', 'basis'] as const).map((curve) => (
+        <ChartCard key={curve} title={`curveType="${curve}"`} description="Line chart curve interpolation">
+          <DashboardLineChart
+            data={richData}
+            indexKey="date"
+            config={{ revenue: { label: 'Revenue', color: 'var(--chart-1)' } }}
+            series={[{ key: 'revenue' }]}
+            curveType={curve}
+            showLegend={false}
+            showDots={curve === 'linear'}
+          />
+        </ChartCard>
+      ))}
+    </div>
+  ),
+};
+
+export const ColorPaletteExample: Story = {
+  name: 'Variants / Color Palette',
+  render: () => {
+    const paletteConfig: ChartConfig = {
+      chart1: { label: 'chart-1 (indigo)', color: 'var(--chart-1)' },
+      chart2: { label: 'chart-2 (emerald)', color: 'var(--chart-2)' },
+      chart3: { label: 'chart-3 (amber)', color: 'var(--chart-3)' },
+      chart4: { label: 'chart-4 (blue)', color: 'var(--chart-4)' },
+      chart5: { label: 'chart-5 (red)', color: 'var(--chart-5)' },
+      chart6: { label: 'chart-6 (purple)', color: 'var(--chart-6)' },
+      chart7: { label: 'chart-7 (teal)', color: 'var(--chart-7)' },
+      chart8: { label: 'chart-8 (rose)', color: 'var(--chart-8)' },
+    };
+
+    const paletteData = [
+      { name: 'A', chart1: 80, chart2: 70, chart3: 60, chart4: 75, chart5: 55, chart6: 65, chart7: 72, chart8: 68 },
+    ];
+
+    return (
+      <ChartCard
+        title="Chart Color Palette"
+        description="All 8 chart tokens — vibrant, accessible, harmonious"
+      >
+        <DashboardBarChart
+          data={paletteData}
+          indexKey="name"
+          config={paletteConfig}
+          barSize="xl"
+          showGrid={false}
+        />
+      </ChartCard>
+    );
+  },
+};
+
+// ─── Radar Chart Stories ───────────────────────────────────────────────────────
+
+const radarData = [
+  { skill: 'Performance', score: 88 },
+  { skill: 'Reliability', score: 72 },
+  { skill: 'Security', score: 95 },
+  { skill: 'Scalability', score: 65 },
+  { skill: 'Usability', score: 80 },
+  { skill: 'Maintainability', score: 58 },
+];
+
+const radarMultiData = [
+  { skill: 'Performance', teamA: 88, teamB: 62 },
+  { skill: 'Reliability', teamA: 72, teamB: 85 },
+  { skill: 'Security', teamA: 95, teamB: 70 },
+  { skill: 'Scalability', teamA: 65, teamB: 90 },
+  { skill: 'Usability', teamA: 80, teamB: 55 },
+  { skill: 'Maintainability', teamA: 58, teamB: 78 },
+];
+
+export const RadarChartFilled: Story = {
+  name: 'Radar Chart / Filled',
+  render: () => (
+    <ChartCard
+      title="System Health Score"
+      description="Filled radar — single series"
+    >
+      <RadarMetricChart
+        data={radarData}
+        labelKey="skill"
+        series={[{ key: 'score', label: 'Score' }]}
+        filled
+        showLegend={false}
+      />
+    </ChartCard>
+  ),
+};
+
+export const RadarChartOutline: Story = {
+  name: 'Radar Chart / Outline',
+  render: () => (
+    <ChartCard
+      title="System Health Score"
+      description="Outline only — no fill"
+    >
+      <RadarMetricChart
+        data={radarData}
+        labelKey="skill"
+        series={[{ key: 'score', label: 'Score' }]}
+        filled={false}
+        showDots
+        showLegend={false}
+      />
+    </ChartCard>
+  ),
+};
+
+export const RadarChartMultiSeries: Story = {
+  name: 'Radar Chart / Multi-Series',
+  render: () => (
+    <ChartCard
+      title="Team Comparison"
+      description="Two teams across 6 dimensions"
+    >
+      <RadarMetricChart
+        data={radarMultiData}
+        labelKey="skill"
+        series={[
+          { key: 'teamA', label: 'Team Alpha' },
+          { key: 'teamB', label: 'Team Beta' },
+        ]}
+        filled
+        fillOpacity={0.2}
+        showDots
+      />
+    </ChartCard>
+  ),
+};
+
+export const RadarChartVariants: Story = {
+  name: 'Radar Chart / All Variants',
+  render: () => (
+    <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+      <ChartCard title="Filled" description="Default filled area">
+        <RadarMetricChart
+          data={radarData}
+          labelKey="skill"
+          series={[{ key: 'score', label: 'Score' }]}
+          filled
+          showLegend={false}
+        />
+      </ChartCard>
+      <ChartCard title="Outline + Dots" description="No fill, with dots">
+        <RadarMetricChart
+          data={radarData}
+          labelKey="skill"
+          series={[{ key: 'score', label: 'Score' }]}
+          filled={false}
+          showDots
+          showLegend={false}
+        />
+      </ChartCard>
+      <ChartCard title="Multi-Series" description="Comparison overlay">
+        <RadarMetricChart
+          data={radarMultiData}
+          labelKey="skill"
+          series={[
+            { key: 'teamA', label: 'Team A' },
+            { key: 'teamB', label: 'Team B' },
+          ]}
+          filled
+          fillOpacity={0.18}
+        />
+      </ChartCard>
+    </div>
+  ),
+};
+
+// ─── Pie Chart Stories ────────────────────────────────────────────────────────
+
+const pieData = [
+  { category: 'Infrastructure', spend: 42000 },
+  { category: 'Engineering', spend: 31000 },
+  { category: 'Marketing', spend: 18500 },
+  { category: 'Operations', spend: 12000 },
+  { category: 'Other', spend: 6500 },
+];
+
+export const PieChartSimple: Story = {
+  name: 'Pie Chart / Simple',
+  render: () => (
+    <ChartCard
+      title="Budget Breakdown"
+      description="Simple pie — no labels"
+    >
+      <PieMetricChart
+        data={pieData}
+        nameKey="category"
+        valueKey="spend"
+        valueFormatter={(v) => `$${(v as number).toLocaleString()}`}
+      />
+    </ChartCard>
+  ),
+};
+
+export const PieChartWithLabels: Story = {
+  name: 'Pie Chart / With Labels',
+  render: () => (
+    <ChartCard
+      title="Budget Breakdown"
+      description="Pie with percentage labels"
+    >
+      <PieMetricChart
+        data={pieData}
+        nameKey="category"
+        valueKey="spend"
+        showLabels
+        valueFormatter={(v) => `$${(v as number).toLocaleString()}`}
+      />
+    </ChartCard>
+  ),
+};
+
+export const PieChartExploded: Story = {
+  name: 'Pie Chart / Exploded Slice',
+  render: () => (
+    <ChartCard
+      title="Budget Breakdown"
+      description="Largest slice highlighted with drop shadow"
+    >
+      <PieMetricChart
+        data={pieData}
+        nameKey="category"
+        valueKey="spend"
+        showLabels
+        explodeIndex={0}
+        valueFormatter={(v) => `$${(v as number).toLocaleString()}`}
+      />
+    </ChartCard>
+  ),
+};
+
+export const PieChartDonutVariant: Story = {
+  name: 'Pie Chart / Donut Variant',
+  render: () => (
+    <ChartCard
+      title="Budget Breakdown"
+      description="Pie with inner radius (donut style)"
+    >
+      <PieMetricChart
+        data={pieData}
+        nameKey="category"
+        valueKey="spend"
+        innerRadius="45%"
+        showLabels
+        valueFormatter={(v) => `$${(v as number).toLocaleString()}`}
+      />
+    </ChartCard>
+  ),
+};
+
+export const PieChartVariants: Story = {
+  name: 'Pie Chart / All Variants',
+  render: () => (
+    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+      <ChartCard title="Simple" description="No labels">
+        <PieMetricChart data={pieData} nameKey="category" valueKey="spend" />
+      </ChartCard>
+      <ChartCard title="With Labels" description="Percentage labels">
+        <PieMetricChart data={pieData} nameKey="category" valueKey="spend" showLabels />
+      </ChartCard>
+      <ChartCard title="Exploded" description="First slice highlighted">
+        <PieMetricChart data={pieData} nameKey="category" valueKey="spend" showLabels explodeIndex={0} />
+      </ChartCard>
+      <ChartCard title="Donut" description="Inner radius 45%">
+        <PieMetricChart data={pieData} nameKey="category" valueKey="spend" innerRadius="45%" showLabels />
+      </ChartCard>
+    </div>
+  ),
+};
+
+// ─── Radial Bar Chart Stories ─────────────────────────────────────────────────
+
+const radialData = [
+  { name: 'Infrastructure', value: 78 },
+  { name: 'Engineering', value: 62 },
+  { name: 'Marketing', value: 45 },
+  { name: 'Operations', value: 91 },
+];
+
+export const RadialBarChartSingle: Story = {
+  name: 'Radial Bar / Single Bar',
+  render: () => (
+    <ChartCard
+      title="Deployment Success Rate"
+      description="Single radial bar — full circle"
+    >
+      <RadialBarMetricChart
+        data={[{ name: 'Success Rate', value: 87 }]}
+        dataKey="value"
+        nameKey="name"
+        showLegend={false}
+        innerRadius="60%"
+        outerRadius="90%"
+        valueFormatter={(v) => `${v}%`}
+      />
+    </ChartCard>
+  ),
+};
+
+export const RadialBarChartMulti: Story = {
+  name: 'Radial Bar / Multi-Bar',
+  render: () => (
+    <ChartCard
+      title="Department KPIs"
+      description="Multiple radial bars with background track"
+    >
+      <RadialBarMetricChart
+        data={radialData}
+        dataKey="value"
+        nameKey="name"
+        innerRadius="20%"
+        outerRadius="90%"
+        valueFormatter={(v) => `${v}%`}
+      />
+    </ChartCard>
+  ),
+};
+
+export const RadialBarChartSemiCircle: Story = {
+  name: 'Radial Bar / Semi-Circle',
+  render: () => (
+    <ChartCard
+      title="Department KPIs"
+      description="Semi-circle layout (startAngle=180, endAngle=0)"
+    >
+      <RadialBarMetricChart
+        data={radialData}
+        dataKey="value"
+        nameKey="name"
+        innerRadius="30%"
+        outerRadius="90%"
+        startAngle={180}
+        endAngle={0}
+        valueFormatter={(v) => `${v}%`}
+      />
+    </ChartCard>
+  ),
+};
+
+export const RadialBarChartVariants: Story = {
+  name: 'Radial Bar / All Variants',
+  render: () => (
+    <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+      <ChartCard title="Single Bar" description="Full circle">
+        <RadialBarMetricChart
+          data={[{ name: 'Success', value: 87 }]}
+          dataKey="value"
+          nameKey="name"
+          showLegend={false}
+          innerRadius="60%"
+          outerRadius="90%"
+          valueFormatter={(v) => `${v}%`}
+        />
+      </ChartCard>
+      <ChartCard title="Multi-Bar" description="Stacked radial bars">
+        <RadialBarMetricChart
+          data={radialData}
+          dataKey="value"
+          nameKey="name"
+          innerRadius="20%"
+          outerRadius="90%"
+          valueFormatter={(v) => `${v}%`}
+        />
+      </ChartCard>
+      <ChartCard title="Semi-Circle" description="180° arc layout">
+        <RadialBarMetricChart
+          data={radialData}
+          dataKey="value"
+          nameKey="name"
+          innerRadius="30%"
+          outerRadius="90%"
+          startAngle={180}
+          endAngle={0}
+          valueFormatter={(v) => `${v}%`}
+        />
+      </ChartCard>
+    </div>
+  ),
+};
+
+// ─── Gauge Chart Stories ──────────────────────────────────────────────────────
+
+const gaugeThresholds: GaugeChartThreshold[] = [
+  { value: 33, color: 'var(--chart-5)', label: 'Critical' },
+  { value: 66, color: 'var(--chart-3)', label: 'Warning' },
+  { value: 100, color: 'var(--chart-2)', label: 'Healthy' },
+];
+
+export const GaugeChartSimple: Story = {
+  name: 'Gauge Chart / Simple',
+  render: () => (
+    <ChartCard
+      title="CPU Usage"
+      description="Simple gauge — single color"
+      className="max-w-sm mx-auto"
+    >
+      <div className="flex justify-center py-4">
+        <GaugeChart value={67} label="CPU Usage" />
+      </div>
+    </ChartCard>
+  ),
+};
+
+export const GaugeChartWithThresholds: Story = {
+  name: 'Gauge Chart / With Thresholds',
+  render: () => (
+    <ChartCard
+      title="System Health"
+      description="Color zones: critical / warning / healthy"
+      className="max-w-sm mx-auto"
+    >
+      <div className="flex justify-center py-4">
+        <GaugeChart
+          value={72}
+          label="Overall Health"
+          thresholds={gaugeThresholds}
+        />
+      </div>
+    </ChartCard>
+  ),
+};
+
+export const GaugeChartNoNeedle: Story = {
+  name: 'Gauge Chart / No Needle',
+  render: () => (
+    <ChartCard
+      title="Memory Usage"
+      description="Arc only — no needle indicator"
+      className="max-w-sm mx-auto"
+    >
+      <div className="flex justify-center py-4">
+        <GaugeChart
+          value={45}
+          label="Memory"
+          showNeedle={false}
+          thresholds={gaugeThresholds}
+        />
+      </div>
+    </ChartCard>
+  ),
+};
+
+export const GaugeChartVariants: Story = {
+  name: 'Gauge Chart / All Variants',
+  render: () => (
+    <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+      <ChartCard title="Low (22%)" description="Critical zone">
+        <div className="flex justify-center py-2">
+          <GaugeChart value={22} label="CPU" thresholds={gaugeThresholds} />
+        </div>
+      </ChartCard>
+      <ChartCard title="Medium (55%)" description="Warning zone">
+        <div className="flex justify-center py-2">
+          <GaugeChart value={55} label="Memory" thresholds={gaugeThresholds} />
+        </div>
+      </ChartCard>
+      <ChartCard title="High (88%)" description="Healthy zone">
+        <div className="flex justify-center py-2">
+          <GaugeChart value={88} label="Disk I/O" thresholds={gaugeThresholds} />
+        </div>
+      </ChartCard>
+    </div>
+  ),
+};
+
+export const GaugeChartDashboard: Story = {
+  name: 'Gauge Chart / Infrastructure Dashboard',
+  render: () => {
+    const metrics = [
+      { label: 'CPU', value: 34, unit: '%' },
+      { label: 'Memory', value: 71, unit: '%' },
+      { label: 'Disk', value: 58, unit: '%' },
+      { label: 'Network', value: 22, unit: '%' },
+    ];
+
+    return (
+      <div className="space-y-4">
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+          {metrics.map((m) => (
+            <ChartCard key={m.label} title={m.label} description={`Current ${m.label} utilization`}>
+              <div className="flex justify-center py-2">
+                <GaugeChart
+                  value={m.value}
+                  label={m.label}
+                  thresholds={gaugeThresholds}
+                  valueFormatter={(v) => `${v}${m.unit}`}
+                />
+              </div>
+            </ChartCard>
+          ))}
+        </div>
+      </div>
+    );
+  },
+};
+
+// ─── Complete Chart Library Overview ─────────────────────────────────────────
+
+export const CompleteLibraryOverview: Story = {
+  name: 'Complete Library / All Chart Types',
+  render: () => (
+    <div className="space-y-6">
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        {/* Bar */}
+        <ChartCard title="Bar Chart" description="Categorical comparison">
+          <DashboardBarChart
+            data={[
+              { month: 'Jan', revenue: 42000 },
+              { month: 'Feb', revenue: 38000 },
+              { month: 'Mar', revenue: 51000 },
+              { month: 'Apr', revenue: 47000 },
+              { month: 'May', revenue: 55000 },
+            ]}
+            indexKey="month"
+            config={{ revenue: { label: 'Revenue', color: 'var(--chart-1)' } }}
+            series={[{ key: 'revenue', label: 'Revenue' }]}
+            showLegend={false}
+          />
+        </ChartCard>
+
+        {/* Line */}
+        <ChartCard title="Line Chart" description="Trend over time">
+          <DashboardLineChart
+            data={[
+              { month: 'Jan', users: 1200 },
+              { month: 'Feb', users: 1450 },
+              { month: 'Mar', users: 1380 },
+              { month: 'Apr', users: 1620 },
+              { month: 'May', users: 1890 },
+            ]}
+            indexKey="month"
+            config={{ users: { label: 'Users', color: 'var(--chart-2)' } }}
+            series={[{ key: 'users', label: 'Users' }]}
+            showLegend={false}
+          />
+        </ChartCard>
+
+        {/* Donut */}
+        <ChartCard title="Donut Chart" description="Part-to-whole">
+          <DonutBreakdownChart
+            data={[
+              { name: 'Active', value: 68 },
+              { name: 'Idle', value: 22 },
+              { name: 'Offline', value: 10 },
+            ]}
+            nameKey="name"
+            valueKey="value"
+            config={{
+              Active: { label: 'Active', color: 'var(--chart-2)' },
+              Idle: { label: 'Idle', color: 'var(--chart-3)' },
+              Offline: { label: 'Offline', color: 'var(--chart-5)' },
+            }}
+            centerValue="68%"
+            centerLabel="Active"
+            showLegend={false}
+          />
+        </ChartCard>
+
+        {/* Radar */}
+        <ChartCard title="Radar Chart" description="Multi-dimensional">
+          <RadarMetricChart
+            data={radarData}
+            labelKey="skill"
+            series={[{ key: 'score', label: 'Score' }]}
+            filled
+            showLegend={false}
+          />
+        </ChartCard>
+
+        {/* Pie */}
+        <ChartCard title="Pie Chart" description="Proportional slices">
+          <PieMetricChart
+            data={pieData}
+            nameKey="category"
+            valueKey="spend"
+            showLabels
+            showLegend={false}
+          />
+        </ChartCard>
+
+        {/* Radial Bar */}
+        <ChartCard title="Radial Bar" description="Progress rings">
+          <RadialBarMetricChart
+            data={radialData}
+            dataKey="value"
+            nameKey="name"
+            innerRadius="20%"
+            outerRadius="90%"
+            valueFormatter={(v) => `${v}%`}
+          />
+        </ChartCard>
+      </div>
+
+      {/* Gauge row */}
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+        {[
+          { label: 'CPU', value: 34 },
+          { label: 'Memory', value: 71 },
+          { label: 'Disk', value: 58 },
+        ].map((m) => (
+          <ChartCard key={m.label} title={`Gauge — ${m.label}`} description="Semicircle gauge">
+            <div className="flex justify-center py-2">
+              <GaugeChart value={m.value} label={m.label} thresholds={gaugeThresholds} />
+            </div>
+          </ChartCard>
+        ))}
+      </div>
+    </div>
+  ),
+};