@shohojdhara/atomix 0.2.3 → 0.2.5

package/src/components/Chart/Chart.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
 import { useState } from 'react';
 import { Container, Grid, GridCol } from '../../layouts/Grid';
 import { Badge } from '../Badge';
@@ -10,7 +11,6 @@ import { SideMenuItem } from '../Navigation/SideMenu/SideMenuItem';
 import { SideMenuList } from '../Navigation/SideMenu/SideMenuList';
 
 import {
-  AdvancedChart,
   AnimatedChart,
   AreaChart,
   BarChart,
@@ -25,7 +25,6 @@ import {
   MultiAxisChart,
   PieChart,
   RadarChart,
-  RealTimeChart,
   ScatterChart,
   TreemapChart,
   WaterfallChart,
@@ -51,6 +50,94 @@ const meta: Meta<typeof Chart> = {
 export default meta;
 type Story = StoryObj<typeof Chart>;
 
+// Glass Variant Story
+export const GlassVariant: Story = {
+  render: () => {
+    const sampleData = [
+      { label: 'Jan', value: 65 },
+      { label: 'Feb', value: 78 },
+      { label: 'Mar', value: 90 },
+      { label: 'Apr', value: 81 },
+      { label: 'May', value: 56 },
+      { label: 'Jun', value: 55 },
+      { label: 'Jul', value: 40 },
+    ];
+
+    const datasets = [
+      {
+        label: 'Sales',
+        data: sampleData,
+        color: 'var(--atomix-primary)',
+      },
+    ];
+
+    return (
+      <div
+        style={{
+          padding: '2rem',
+          background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+          minHeight: '100vh',
+        }}
+      >
+        <Container>
+          <Grid>
+            <GridCol col={12}>
+              <h2 style={{ color: 'white', marginBottom: '2rem' }}>Chart Glass Variant</h2>
+            </GridCol>
+            <GridCol col={12} md={6}>
+              <LineChart
+                title="Sales Performance"
+                subtitle="Monthly revenue data"
+                datasets={datasets}
+                glass={true}
+                showToolbar={true}
+                config={{
+                  showTooltips: true,
+                  animate: true,
+                }}
+              />
+            </GridCol>
+            <GridCol col={12} md={6}>
+              <BarChart
+                title="Revenue by Month"
+                subtitle="Q1-Q2 comparison"
+                datasets={datasets}
+                glass={{
+                  displacementScale: 30,
+                  saturation: 200,
+                  mode: 'polar',
+                }}
+                showToolbar={true}
+              />
+            </GridCol>
+            <GridCol col={12} md={6}>
+              <PieChart
+                title="Market Share"
+                data={sampleData}
+                glass={true}
+                showToolbar={true}
+              />
+            </GridCol>
+            <GridCol col={12} md={6}>
+              <AreaChart
+                title="Growth Trend"
+                subtitle="Year over year"
+                datasets={datasets}
+                glass={{
+                  blurAmount: 0,
+                  saturation: 180,
+                  enableBorderEffect: true,
+                }}
+                showToolbar={true}
+              />
+            </GridCol>
+          </Grid>
+        </Container>
+      </div>
+    );
+  },
+};
+
 // Data generators
 const generateData = (points = 20) =>
   Array.from({ length: points }, (_, i) => ({
@@ -60,10 +147,107 @@ const generateData = (points = 20) =>
     value: Math.floor(Math.random() * 100) + 20,
   }));
 
+const generateTimeSeriesData = (points = 20) =>
+  Array.from({ length: points }, (_, i) => ({
+    label: new Date(Date.now() - (points - i) * 24 * 60 * 60 * 1000).toLocaleDateString(),
+    value: Math.floor(Math.random() * 1000) + 500,
+  }));
+
+const generateCandlestickData = (points = 20) =>
+  Array.from({ length: points }, (_, i) => {
+    const open = Math.floor(Math.random() * 100) + 50;
+    const close = Math.floor(Math.random() * 100) + 50;
+    const high = Math.max(open, close) + Math.floor(Math.random() * 20);
+    const low = Math.min(open, close) - Math.floor(Math.random() * 20);
+    return {
+      date: `Day ${i + 1}`,
+      open,
+      high,
+      low,
+      close,
+      volume: Math.floor(Math.random() * 10000) + 1000,
+    };
+  });
+
+const generateBubbleData = (points = 15) =>
+  Array.from({ length: points }, (_, i) => ({
+    label: `Point ${i + 1}`,
+    x: Math.floor(Math.random() * 100),
+    y: Math.floor(Math.random() * 100),
+    size: Math.floor(Math.random() * 50) + 10,
+    value: Math.floor(Math.random() * 1000),
+  }));
+
+const generateHeatmapData = () => {
+  const days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
+  const hours = Array.from({ length: 24 }, (_, i) => `${i}:00`);
+
+  return days
+    .map(day =>
+      hours.map(hour => ({
+        x: hour,
+        y: day,
+        value: Math.floor(Math.random() * 100),
+      }))
+    )
+    .flat();
+};
+
+const generateTreemapData = (count = 12) => {
+  const categories = [
+    'Technology',
+    'Finance',
+    'Healthcare',
+    'Education',
+    'Retail',
+    'Manufacturing',
+    'Energy',
+    'Transport',
+    'Media',
+    'Real Estate',
+    'Consulting',
+    'Food & Beverage',
+    'Sports',
+    'Entertainment',
+    'Travel',
+    'Automotive',
+    'Fashion',
+    'Telecom',
+    'Agriculture',
+    'Construction',
+  ];
+  
+  return Array.from({ length: count }, (_, i) => ({
+    id: `category-${i}`,
+    label: categories[i % categories.length] || `Category ${i + 1}`,
+    value: Math.floor(Math.random() * 500) + 50,
+    metadata: {
+      growth: `${(Math.random() * 20 - 10).toFixed(1)}%`,
+      revenue: `$${(Math.random() * 1000 + 100).toFixed(0)}K`,
+    },
+  }));
+};
+
+const generateFunnelData = () => {
+  const stages = [
+    { label: 'Awareness', value: 10000 },
+    { label: 'Interest', value: 5000 },
+    { label: 'Consideration', value: 2500 },
+    { label: 'Intent', value: 1200 },
+    { label: 'Evaluation', value: 600 },
+    { label: 'Purchase', value: 300 },
+  ];
+  
+  return stages.map(stage => ({
+    ...stage,
+    percentage: ((stage.value / stages[0].value) * 100).toFixed(1),
+  }));
+};
+
 const datasets = [
-  { label: 'Sales', data: generateData(), color: '#3b82f6' },
-  { label: 'Revenue', data: generateData(), color: '#10b981' },
-  { label: 'Profit', data: generateData(), color: '#f59e0b' },
+  { label: 'Sales', data: generateData(), color: 'var(--atomix-primary)' },
+  { label: 'Revenue', data: generateData(), color: 'var(--atomix-success)' },
+  { label: 'Profit', data: generateData(), color: 'var(--atomix-warning)' },
 ];
 
 // Modern Chart Gallery
@@ -95,16 +279,14 @@ export const ChartGallery: Story = {
       { key: 'funnel', icon: 'Funnel', label: 'Funnel', desc: 'Process stages' },
       { key: 'treemap', icon: 'Tree', label: 'Treemap', desc: 'Hierarchical data' },
       { key: 'animated', icon: 'Sparkle', label: 'Animated', desc: 'Motion graphics' },
-      { key: 'realtime', icon: 'WifiHigh', label: 'Real-time', desc: 'Live streaming' },
       { key: 'multiaxis', icon: 'ChartLineUp', label: 'Multi-axis', desc: 'Multiple scales' },
-      { key: 'advanced', icon: 'Rocket', label: 'Advanced', desc: 'Complex features' },
     ];
 
     // Generate dynamic data based on dataPoints
     const dynamicDatasets = [
-      { label: 'Sales', data: generateData(dataPoints), color: '#3b82f6' },
-      { label: 'Revenue', data: generateData(dataPoints), color: '#10b981' },
-      { label: 'Profit', data: generateData(dataPoints), color: '#f59e0b' },
+      { label: 'Sales', data: generateData(dataPoints), color: 'var(--atomix-primary)' },
+      { label: 'Revenue', data: generateData(dataPoints), color: 'var(--atomix-success)' },
+      { label: 'Profit', data: generateData(dataPoints), color: 'var(--atomix-warning)' },
     ];
 
     const renderChart = () => {
@@ -148,6 +330,15 @@ export const ChartGallery: Story = {
               icon={<Icon name="List" />}
               label={`${showLegend ? 'Hide' : 'Show'} legend`}
             />
+
+            {/* Animation Toggle */}
+            <Button
+              size="sm"
+              variant={animated ? 'success' : 'secondary'}
+              onClick={() => setAnimated(!animated)}
+              icon={<Icon name="Sparkle" />}
+              label={`${animated ? 'Disable' : 'Enable'} animations`}
+            />
           </div>
         </div>
       );
@@ -179,7 +370,7 @@ export const ChartGallery: Story = {
             <div>
               {customToolbar}
               <PieChart
-                datasets={[{ label: 'Data', data: generateData(dataPoints) }]}
+                datasets={[{ label: 'Distribution', data: generateData(6) }]}
                 {...commonProps}
               />
             </div>
@@ -189,7 +380,7 @@ export const ChartGallery: Story = {
             <div>
               {customToolbar}
               <DonutChart
-                datasets={[{ label: 'Data', data: generateData(dataPoints) }]}
+                datasets={[{ label: 'Distribution', data: generateData(6) }]}
                 {...commonProps}
               />
             </div>
@@ -205,45 +396,28 @@ export const ChartGallery: Story = {
           return (
             <div>
               {customToolbar}
-              <RadarChart datasets={[dynamicDatasets[0]]} {...commonProps} />
+              <RadarChart datasets={dynamicDatasets} {...commonProps} />
             </div>
           );
         case 'bubble':
           return (
             <div>
               {customToolbar}
-              <BubbleChart
-                bubbleData={Array.from({ length: dataPoints }, (_, i) => ({
-                  label: `Point ${i + 1}`,
-                  x: Math.random() * 100,
-                  y: Math.random() * 100,
-                  size: Math.random() * 50 + 20,
-                  color: ['#3b82f6', '#10b981', '#f59e0b', '#ef4444'][i % 4],
-                }))}
-                {...commonProps}
-              />
+              <BubbleChart bubbleData={generateBubbleData(dataPoints)} {...commonProps} />
             </div>
           );
         case 'gauge':
           return (
             <div>
               {customToolbar}
-              <GaugeChart value={Math.min(dataPoints * 5, 100)} {...commonProps} />
+              <GaugeChart value={75} max={100} {...commonProps} />
             </div>
           );
         case 'heatmap':
           return (
             <div>
               {customToolbar}
-              <HeatmapChart
-                data={Array.from({ length: dataPoints * 4 }, (_, i) => ({
-                  x: i % Math.ceil(Math.sqrt(dataPoints * 4)),
-                  y: Math.floor(i / Math.ceil(Math.sqrt(dataPoints * 4))),
-                  value: Math.random() * 100,
-                  label: `${i}`,
-                }))}
-                {...commonProps}
-              />
+              <HeatmapChart data={generateHeatmapData()} {...commonProps} />
             </div>
           );
         case 'candlestick':
@@ -251,13 +425,7 @@ export const ChartGallery: Story = {
             <div>
               {customToolbar}
               <CandlestickChart
-                candlestickData={Array.from({ length: dataPoints }, (_, i) => ({
-                  date: new Date(2024, 0, i + 1).toISOString(),
-                  open: 100 + Math.random() * 20,
-                  high: 120 + Math.random() * 20,
-                  low: 80 + Math.random() * 20,
-                  close: 110 + Math.random() * 20,
-                }))}
+                candlestickData={generateCandlestickData(dataPoints)}
                 {...commonProps}
               />
             </div>
@@ -267,16 +435,13 @@ export const ChartGallery: Story = {
             <div>
               {customToolbar}
               <WaterfallChart
-                waterfallData={Array.from({ length: Math.min(dataPoints, 8) }, (_, i) => {
-                  if (i === 0) return { label: 'Start', value: 100, type: 'total' };
-                  if (i === Math.min(dataPoints, 8) - 1)
-                    return { label: 'End', value: 100 + (i - 1) * 5, type: 'total' };
-                  return {
-                    label: `Step ${i}`,
-                    value: Math.random() > 0.5 ? Math.random() * 30 : -Math.random() * 20,
-                    type: Math.random() > 0.5 ? 'positive' : 'negative',
-                  };
-                })}
+                waterfallData={[
+                  { label: 'Starting Balance', value: 1000, type: 'subtotal' },
+                  { label: 'Sales', value: 500, type: 'positive' },
+                  { label: 'Expenses', value: -200, type: 'negative' },
+                  { label: 'Taxes', value: -100, type: 'negative' },
+                  { label: 'Net Profit', value: 200, type: 'subtotal' },
+                ]}
                 {...commonProps}
               />
             </div>
@@ -286,10 +451,15 @@ export const ChartGallery: Story = {
             <div>
               {customToolbar}
               <FunnelChart
-                funnelData={Array.from({ length: Math.min(dataPoints, 8) }, (_, i) => ({
-                  label: `Stage ${i + 1}`,
-                  value: 1000 - i * 100 - Math.random() * 50,
-                }))}
+                funnelData={generateFunnelData()}
+                funnelOptions={{
+                  showLabels: true,
+                  showValues: true,
+                  showPercentages: true,
+                  showConversionRates: true,
+                  useGradient: true,
+                  animate: animated,
+                }}
                 {...commonProps}
               />
             </div>
@@ -299,11 +469,15 @@ export const ChartGallery: Story = {
             <div>
               {customToolbar}
               <TreemapChart
-                data={Array.from({ length: dataPoints }, (_, i) => ({
-                  id: `item-${i}`,
-                  label: `Category ${String.fromCharCode(65 + i)}`,
-                  value: Math.random() * 100 + 20,
-                }))}
+                data={generateTreemapData(Math.min(dataPoints, 20))}
+                algorithm="squarified"
+                colorConfig={{ scheme: 'category' }}
+                labelConfig={{
+                  showLabels: true,
+                  minSize: 500,
+                  fontSize: 12,
+                  textColor: 'var(--atomix-text-primary)',
+                }}
                 {...commonProps}
               />
             </div>
@@ -315,20 +489,6 @@ export const ChartGallery: Story = {
               <AnimatedChart datasets={dynamicDatasets} {...commonProps} />
             </div>
           );
-        case 'realtime':
-          return (
-            <div>
-              {customToolbar}
-              <RealTimeChart
-                datasets={[]}
-                dataSource={async () => [
-                  { label: new Date().toLocaleTimeString(), value: Math.random() * 100 },
-                ]}
-                {...commonProps}
-              />
-            </div>
-          );
-
         case 'multiaxis':
           return (
             <div>
@@ -344,13 +504,6 @@ export const ChartGallery: Story = {
               />
             </div>
           );
-        case 'advanced':
-          return (
-            <div>
-              {customToolbar}
-              <AdvancedChart datasets={dynamicDatasets} {...commonProps} />
-            </div>
-          );
         default:
           return (
             <div>
@@ -395,7 +548,7 @@ export const ChartGallery: Story = {
                         <Icon name={icon as any} size="sm" />
                         <div>
                           <div>{label}</div>
-                          {/* <small className="u-text-muted">{desc}</small> */}
+                          <small className="u-text-muted">{desc}</small>
                         </div>
                       </div>
                     </SideMenuItem>
@@ -404,9 +557,10 @@ export const ChartGallery: Story = {
               </SideMenu>
             </Card>
           </GridCol>
-
           <GridCol xs={9}>
-            <Card className="u-p-4 u-min-h-600">{renderChart()}</Card>
+            <Card className="u-p-0 u-overflow-hidden">
+              <div className="u-h-100 u-min-h-100 u-overflow-auto">{renderChart()}</div>
+            </Card>
           </GridCol>
         </Grid>
       </Container>
@@ -414,114 +568,357 @@ export const ChartGallery: Story = {
   },
 };
 
-// Quick Examples
-export const BasicCharts: Story = {
+// Individual chart stories for documentation
+export const LineChartStory: Story = {
   render: () => (
-    <Container className="u-py-4">
-      <div
-        className="u-d-grid u-gap-4"
-        style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(400px, 1fr))' }}
-      >
-        <Card className="u-p-4">
-          <LineChart
-            title="Line Chart"
-            datasets={[datasets[0]]}
-            config={{ showLegend: false }}
-            className="u-h-100"
-          />
-        </Card>
+    <Container className="u-py-6">
+      <Grid>
+        <GridCol xs={12}>
+          <Card className="u-p-6">
+            <LineChart
+              datasets={[
+                { label: 'Sales', data: generateData(12), color: 'var(--atomix-primary)' },
+                { label: 'Revenue', data: generateData(12), color: 'var(--atomix-success)' },
+              ]}
+              title="Line Chart Example"
+              config={{ showLegend: true, animate: true }}
+              showToolbar
+            />
+          </Card>
+        </GridCol>
+      </Grid>
+    </Container>
+  ),
+  name: 'Line Chart',
+};
 
-        <Card className="u-p-4">
-          <BarChart
-            title="Bar Chart"
-            datasets={[datasets[1]]}
-            config={{ showLegend: false }}
-            className="u-h-100"
-          />
-        </Card>
+export const BarChartStory: Story = {
+  render: () => (
+    <Container className="u-py-6">
+      <Grid>
+        <GridCol xs={12}>
+          <Card className="u-p-6">
+            <BarChart
+              datasets={[
+                { label: 'Sales', data: generateData(8), color: 'var(--atomix-primary)' },
+                { label: 'Revenue', data: generateData(8), color: 'var(--atomix-success)' },
+              ]}
+              title="Bar Chart Example"
+              config={{ showLegend: true, animate: true }}
+              showToolbar
+            />
+          </Card>
+        </GridCol>
+      </Grid>
+    </Container>
+  ),
+  name: 'Bar Chart',
+};
 
-        <Card className="u-p-4">
-          <PieChart
-            title="Pie Chart"
-            datasets={[{ label: 'Data', data: generateData(4) }]}
-            config={{ showLegend: true }}
-            className="u-h-100"
-          />
-        </Card>
+export const PieChartStory: Story = {
+  render: () => (
+    <Container className="u-py-6">
+      <Grid>
+        <GridCol xs={12}>
+          <Card className="u-p-6">
+            <PieChart
+              datasets={[{ label: 'Market Share', data: generateData(6) }]}
+              title="Pie Chart Example"
+              config={{ showLegend: true, animate: true }}
+              showToolbar
+            />
+          </Card>
+        </GridCol>
+      </Grid>
+    </Container>
+  ),
+  name: 'Pie Chart',
+};
 
-        <Card className="u-p-4">
-          <DonutChart
-            title="Donut Chart"
-            datasets={[{ label: 'Data', data: generateData(4) }]}
-            config={{ showLegend: true }}
-            className="u-h-100"
-          />
-        </Card>
-      </div>
+export const DonutChartStory: Story = {
+  render: () => (
+    <Container className="u-py-6">
+      <Grid>
+        <GridCol xs={12}>
+          <Card className="u-p-6">
+            <DonutChart
+              datasets={[{ label: 'Market Share', data: generateData(6) }]}
+              title="Donut Chart Example"
+              config={{ showLegend: true, animate: true }}
+              showToolbar
+            />
+          </Card>
+        </GridCol>
+      </Grid>
     </Container>
   ),
+  name: 'Donut Chart',
 };
 
-// Advanced Features
-export const AdvancedFeatures: Story = {
+export const CandlestickChartStory: Story = {
   render: () => (
-    <Container className="u-py-4">
-      <div
-        className="u-d-grid u-gap-4"
-        style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(500px, 1fr))' }}
-      >
-        <Card className="u-p-4">
-          <MultiAxisChart
-            title="Multi-Axis Chart"
-            datasets={datasets}
-            yAxes={datasets.map((d, i) => ({
-              id: `axis${i}`,
-              position: i % 2 ? 'right' : 'left',
-              label: d.label,
-            }))}
-            className="u-h-100"
-          />
-        </Card>
+    <Container className="u-py-6">
+      <Grid>
+        <GridCol xs={12}>
+          <Card className="u-p-6">
+            <CandlestickChart
+              candlestickData={generateCandlestickData(20)}
+              title="Candlestick Chart Example"
+              config={{ showLegend: true, animate: true, showTooltips: true }}
+              candlestickOptions={{ showTooltips: true }}
+              showToolbar
+            />
+          </Card>
+        </GridCol>
+      </Grid>
+    </Container>
+  ),
+  name: 'Candlestick Chart',
+};
 
-        <Card className="u-p-4">
-          <AnimatedChart
-            title="Animated Chart"
-            datasets={datasets}
-            animationConfig={{ duration: 2000, easing: 'bounce' }}
-            className="u-h-100"
-          />
-        </Card>
+export const TreemapChartStory: Story = {
+  render: () => (
+    <Container className="u-py-6">
+      <Grid>
+        <GridCol xs={12}>
+          <Card className="u-p-6">
+            <TreemapChart
+              data={generateTreemapData(15)}
+              title="Treemap Chart Example"
+              algorithm="squarified"
+              colorConfig={{ scheme: 'category' }}
+              labelConfig={{
+                showLabels: true,
+                minSize: 500,
+                fontSize: 12,
+                textColor: 'var(--atomix-text-primary)',
+              }}
+              config={{ showLegend: true, animate: true }}
+              showToolbar
+            />
+          </Card>
+        </GridCol>
+      </Grid>
+    </Container>
+  ),
+  name: 'Treemap Chart',
+};
 
-        <Card className="u-p-4">
-          <RealTimeChart
-            title="Real-time Chart"
-            datasets={[]}
-            dataSource={async () => [
-              {
-                label: new Date().toLocaleTimeString(),
-                value: Math.sin(Date.now() * 0.001) * 20 + 50,
-              },
-            ]}
-            streamConfig={{ interval: 1000, maxDataPoints: 20, autoScroll: true }}
-            className="u-h-100"
-          />
-        </Card>
+export const FunnelChartStory: Story = {
+  render: () => (
+    <Container className="u-py-6">
+      <Grid>
+        <GridCol xs={12}>
+          <Card className="u-p-6">
+            <FunnelChart
+              funnelData={generateFunnelData()}
+              title="Funnel Chart Example"
+              funnelOptions={{
+                showLabels: true,
+                showValues: true,
+                showPercentages: true,
+                showConversionRates: true,
+                useGradient: true,
+                animate: true,
+              }}
+              config={{ showLegend: true, animate: true }}
+              showToolbar
+            />
+          </Card>
+        </GridCol>
+      </Grid>
+    </Container>
+  ),
+  name: 'Funnel Chart',
+};
 
-        <Card className="u-p-4">
-          <GaugeChart
-            title="Gauge Chart"
-            value={78}
-            gaugeOptions={{
-              colorZones: [
-                { from: 0, to: 50, color: '#ef4444' },
-                { from: 50, to: 80, color: '#f59e0b' },
-                { from: 80, to: 100, color: '#10b981' },
-              ],
-            }}
-            className="u-h-100"
-          />
-        </Card>
-      </div>
+export const HeatmapChartStory: Story = {
+  render: () => (
+    <Container className="u-py-6">
+      <Grid>
+        <GridCol xs={12}>
+          <Card className="u-p-6">
+            <HeatmapChart
+              data={generateHeatmapData()}
+              title="Heatmap Chart Example"
+              colorScale={{
+                scheme: 'viridis',
+                steps: 9,
+              }}
+              cellConfig={{
+                width: 30,
+                height: 30,
+                spacing: 2,
+                borderRadius: 4,
+                showLabels: false,
+              }}
+              showColorLegend={true}
+              showGrid={true}
+              config={{ showLegend: true, animate: true }}
+              showToolbar
+            />
+          </Card>
+        </GridCol>
+      </Grid>
+    </Container>
+  ),
+  name: 'Heatmap Chart',
+};
+
+export const ScatterChartStory: Story = {
+  render: () => (
+    <Container className="u-py-6">
+      <Grid>
+        <GridCol xs={12}>
+          <Card className="u-p-6">
+            <ScatterChart
+              datasets={[
+                { label: 'Sales', data: generateData(15), color: 'var(--atomix-primary)' },
+                { label: 'Revenue', data: generateData(15), color: 'var(--atomix-success)' },
+              ]}
+              title="Scatter Chart Example"
+              scatterOptions={{
+                pointRadius: 5,
+                showLabels: false,
+                enableHoverEffects: true,
+              }}
+              config={{ showLegend: true, animate: true }}
+              showToolbar
+            />
+          </Card>
+        </GridCol>
+      </Grid>
+    </Container>
+  ),
+  name: 'Scatter Chart',
+};
+
+export const BubbleChartStory: Story = {
+  render: () => (
+    <Container className="u-py-6">
+      <Grid>
+        <GridCol xs={12}>
+          <Card className="u-p-6">
+            <BubbleChart
+              bubbleData={generateBubbleData(20)}
+              title="Bubble Chart Example"
+              bubbleOptions={{
+                minBubbleSize: 10,
+                maxBubbleSize: 60,
+                bubbleOpacity: 0.7,
+                showLabels: true,
+                enableAnimations: true,
+              }}
+              config={{ showLegend: true, animate: true }}
+              showToolbar
+            />
+          </Card>
+        </GridCol>
+      </Grid>
+    </Container>
+  ),
+  name: 'Bubble Chart',
+};
+
+export const RadarChartStory: Story = {
+  render: () => (
+    <Container className="u-py-6">
+      <Grid>
+        <GridCol xs={12}>
+          <Card className="u-p-6">
+            <RadarChart
+              datasets={[
+                { label: 'Performance', data: generateData(8), color: 'var(--atomix-primary)' },
+                { label: 'Target', data: generateData(8), color: 'var(--atomix-success)' },
+              ]}
+              title="Radar Chart Example"
+              radarOptions={{
+                gridLevels: 5,
+                showGrid: true,
+                showAxisLabels: true,
+                fillArea: true,
+                fillOpacity: 0.3,
+                showDataPoints: true,
+                pointRadius: 4,
+                lineWidth: 2,
+              }}
+              config={{ showLegend: true, animate: true }}
+              showToolbar
+            />
+          </Card>
+        </GridCol>
+      </Grid>
+    </Container>
+  ),
+  name: 'Radar Chart',
+};
+
+export const WaterfallChartStory: Story = {
+  render: () => (
+    <Container className="u-py-6">
+      <Grid>
+        <GridCol xs={12}>
+          <Card className="u-p-6">
+            <WaterfallChart
+              waterfallData={[
+                { label: 'Starting Balance', value: 1000, type: 'subtotal' },
+                { label: 'Sales', value: 500, type: 'positive' },
+                { label: 'Investment', value: 200, type: 'positive' },
+                { label: 'Expenses', value: -200, type: 'negative' },
+                { label: 'Taxes', value: -100, type: 'negative' },
+                { label: 'Fees', value: -50, type: 'negative' },
+                { label: 'Ending Balance', value: 1350, type: 'total' },
+              ]}
+              title="Waterfall Chart Example"
+              waterfallOptions={{
+                showConnectors: true,
+                showValues: true,
+                showBaseline: true,
+                animate: true,
+              }}
+              config={{ showLegend: true, animate: true }}
+              showToolbar
+            />
+          </Card>
+        </GridCol>
+      </Grid>
+    </Container>
+  ),
+  name: 'Waterfall Chart',
+};
+
+export const TooltipTestStory: Story = {
+  render: () => (
+    <Container className="u-py-6">
+      <Grid>
+        <GridCol xs={12}>
+          <Card className="u-p-6">
+            <LineChart
+              datasets={[
+                {
+                  label: 'Sales',
+                  data: generateData(12).map((d, i) => ({
+                    ...d,
+                    metadata: {
+                      trend: i % 2 === 0 ? 'Up' : 'Down',
+                      change: `${Math.floor(Math.random() * 10)}%`,
+                    },
+                  })),
+                  color: 'var(--atomix-primary)',
+                },
+              ]}
+              title="Tooltip Test Chart"
+              config={{
+                showLegend: true,
+                animate: true,
+                showTooltips: true,
+              }}
+              showToolbar
+            />
+          </Card>
+        </GridCol>
+      </Grid>
     </Container>
   ),
+  name: 'Tooltip Test',
 };