@wakastellar/ui 2.3.4 → 2.4.0

package/src/components/waka-charts/WakaCharts.stories.tsx

@@ -0,0 +1,519 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaBarChart } from './WakaBarChart'
+import { WakaLineChart } from './WakaLineChart'
+import { WakaAreaChart } from './WakaAreaChart'
+import { WakaPieChart } from './WakaPieChart'
+import { WakaSparkline } from './WakaSparkline'
+import * as React from 'react'
+
+// Sample data
+const barData = [
+  { name: 'Jan', value: 400, sales: 240, profit: 160 },
+  { name: 'Feb', value: 300, sales: 139, profit: 221 },
+  { name: 'Mar', value: 200, sales: 980, profit: 290 },
+  { name: 'Apr', value: 278, sales: 390, profit: 200 },
+  { name: 'May', value: 189, sales: 480, profit: 181 },
+  { name: 'Jun', value: 239, sales: 380, profit: 250 },
+]
+
+const lineData = [
+  { name: 'Mon', users: 4000, sessions: 2400, pageviews: 2400 },
+  { name: 'Tue', users: 3000, sessions: 1398, pageviews: 2210 },
+  { name: 'Wed', users: 2000, sessions: 9800, pageviews: 2290 },
+  { name: 'Thu', users: 2780, sessions: 3908, pageviews: 2000 },
+  { name: 'Fri', users: 1890, sessions: 4800, pageviews: 2181 },
+  { name: 'Sat', users: 2390, sessions: 3800, pageviews: 2500 },
+  { name: 'Sun', users: 3490, sessions: 4300, pageviews: 2100 },
+]
+
+const pieData = [
+  { name: 'Chrome', value: 45 },
+  { name: 'Firefox', value: 20 },
+  { name: 'Safari', value: 15 },
+  { name: 'Edge', value: 12 },
+  { name: 'Other', value: 8 },
+]
+
+const sparklineData = [12, 19, 3, 5, 2, 3, 15, 20, 25, 18, 12, 8]
+
+const meta: Meta = {
+  title: 'Components/Charts/WakaCharts',
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A comprehensive charting library built on Recharts with Bar, Line, Area, Pie and Sparkline charts.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+}
+
+export default meta
+
+// =============================================
+// Bar Chart Stories
+// =============================================
+
+export const BarChartDefault: StoryObj = {
+  render: () => (
+    <div className="w-[600px]">
+      <WakaBarChart
+        data={barData}
+        dataKeys={['value']}
+        title="Monthly Revenue"
+        description="Revenue by month"
+      />
+    </div>
+  ),
+}
+
+export const BarChartMultiSeries: StoryObj = {
+  render: () => (
+    <div className="w-[600px]">
+      <WakaBarChart
+        data={barData}
+        dataKeys={['sales', 'profit']}
+        title="Sales vs Profit"
+        legend
+        tooltip
+      />
+    </div>
+  ),
+}
+
+export const BarChartStacked: StoryObj = {
+  render: () => (
+    <div className="w-[600px]">
+      <WakaBarChart
+        data={barData}
+        dataKeys={['sales', 'profit']}
+        stacked
+        title="Stacked Revenue"
+        legend
+      />
+    </div>
+  ),
+}
+
+export const BarChartSizes: StoryObj = {
+  render: () => (
+    <div className="space-y-8">
+      <div className="w-[500px]">
+        <WakaBarChart data={barData} dataKeys={['value']} size="sm" title="Small" />
+      </div>
+      <div className="w-[500px]">
+        <WakaBarChart data={barData} dataKeys={['value']} size="md" title="Medium" />
+      </div>
+      <div className="w-[500px]">
+        <WakaBarChart data={barData} dataKeys={['value']} size="lg" title="Large" />
+      </div>
+    </div>
+  ),
+}
+
+// =============================================
+// Line Chart Stories
+// =============================================
+
+export const LineChartDefault: StoryObj = {
+  render: () => (
+    <div className="w-[600px]">
+      <WakaLineChart
+        data={lineData}
+        dataKeys={['users']}
+        title="Weekly Users"
+        description="Active users over the week"
+      />
+    </div>
+  ),
+}
+
+export const LineChartMultiSeries: StoryObj = {
+  render: () => (
+    <div className="w-[600px]">
+      <WakaLineChart
+        data={lineData}
+        dataKeys={['users', 'sessions', 'pageviews']}
+        title="Website Analytics"
+        legend
+        tooltip
+      />
+    </div>
+  ),
+}
+
+export const LineChartCurves: StoryObj = {
+  render: () => (
+    <div className="space-y-8">
+      <div className="w-[500px]">
+        <WakaLineChart
+          data={lineData}
+          dataKeys={['users']}
+          curve="monotone"
+          title="Monotone (Smooth)"
+        />
+      </div>
+      <div className="w-[500px]">
+        <WakaLineChart
+          data={lineData}
+          dataKeys={['users']}
+          curve="linear"
+          title="Linear"
+        />
+      </div>
+      <div className="w-[500px]">
+        <WakaLineChart
+          data={lineData}
+          dataKeys={['users']}
+          curve="step"
+          title="Step"
+        />
+      </div>
+    </div>
+  ),
+}
+
+export const LineChartDots: StoryObj = {
+  render: () => (
+    <div className="flex gap-8">
+      <div className="w-[400px]">
+        <WakaLineChart
+          data={lineData}
+          dataKeys={['users']}
+          dots
+          dotSize={4}
+          title="With Dots"
+        />
+      </div>
+      <div className="w-[400px]">
+        <WakaLineChart
+          data={lineData}
+          dataKeys={['users']}
+          dots={false}
+          title="Without Dots"
+        />
+      </div>
+    </div>
+  ),
+}
+
+// =============================================
+// Area Chart Stories
+// =============================================
+
+export const AreaChartDefault: StoryObj = {
+  render: () => (
+    <div className="w-[600px]">
+      <WakaAreaChart
+        data={lineData}
+        dataKeys={['users']}
+        title="Weekly Traffic"
+        description="User traffic with area fill"
+      />
+    </div>
+  ),
+}
+
+export const AreaChartStacked: StoryObj = {
+  render: () => (
+    <div className="w-[600px]">
+      <WakaAreaChart
+        data={lineData}
+        dataKeys={['users', 'sessions']}
+        stacked
+        title="Stacked Area"
+        legend
+      />
+    </div>
+  ),
+}
+
+export const AreaChartGradient: StoryObj = {
+  render: () => (
+    <div className="flex gap-8">
+      <div className="w-[400px]">
+        <WakaAreaChart
+          data={lineData}
+          dataKeys={['users']}
+          gradientDirection="vertical"
+          title="Vertical Gradient"
+        />
+      </div>
+      <div className="w-[400px]">
+        <WakaAreaChart
+          data={lineData}
+          dataKeys={['users']}
+          gradientDirection="horizontal"
+          title="Horizontal Gradient"
+        />
+      </div>
+    </div>
+  ),
+}
+
+export const AreaChartFillOpacity: StoryObj = {
+  render: () => (
+    <div className="space-y-8">
+      <div className="w-[500px]">
+        <WakaAreaChart
+          data={lineData}
+          dataKeys={['users']}
+          fillOpacity={0.1}
+          title="Light Fill (10%)"
+        />
+      </div>
+      <div className="w-[500px]">
+        <WakaAreaChart
+          data={lineData}
+          dataKeys={['users']}
+          fillOpacity={0.5}
+          title="Medium Fill (50%)"
+        />
+      </div>
+      <div className="w-[500px]">
+        <WakaAreaChart
+          data={lineData}
+          dataKeys={['users']}
+          fillOpacity={0.8}
+          title="Heavy Fill (80%)"
+        />
+      </div>
+    </div>
+  ),
+}
+
+// =============================================
+// Pie Chart Stories
+// =============================================
+
+export const PieChartDefault: StoryObj = {
+  render: () => (
+    <div className="w-[400px]">
+      <WakaPieChart
+        data={pieData}
+        title="Browser Share"
+        description="Market share by browser"
+      />
+    </div>
+  ),
+}
+
+export const PieChartDonut: StoryObj = {
+  render: () => (
+    <div className="flex gap-8">
+      <div className="w-[300px]">
+        <WakaPieChart data={pieData} innerRadius={0} title="Pie" />
+      </div>
+      <div className="w-[300px]">
+        <WakaPieChart data={pieData} innerRadius="50%" title="Donut" />
+      </div>
+    </div>
+  ),
+}
+
+export const PieChartLabels: StoryObj = {
+  render: () => (
+    <div className="space-y-8">
+      <div className="w-[400px]">
+        <WakaPieChart data={pieData} label="percent" title="With Percent Labels" />
+      </div>
+      <div className="w-[400px]">
+        <WakaPieChart data={pieData} label="value" title="With Value Labels" />
+      </div>
+      <div className="w-[400px]">
+        <WakaPieChart data={pieData} label="name" title="With Name Labels" />
+      </div>
+    </div>
+  ),
+}
+
+export const PieChartSizes: StoryObj = {
+  render: () => (
+    <div className="flex items-center gap-8">
+      <WakaPieChart data={pieData} size="sm" title="Small" />
+      <WakaPieChart data={pieData} size="md" title="Medium" />
+      <WakaPieChart data={pieData} size="lg" title="Large" />
+    </div>
+  ),
+}
+
+// =============================================
+// Sparkline Stories
+// =============================================
+
+export const SparklineDefault: StoryObj = {
+  render: () => (
+    <div className="space-y-4">
+      <div className="flex items-center gap-4">
+        <span className="text-sm text-muted-foreground w-24">Line:</span>
+        <WakaSparkline data={sparklineData} type="line" />
+      </div>
+      <div className="flex items-center gap-4">
+        <span className="text-sm text-muted-foreground w-24">Area:</span>
+        <WakaSparkline data={sparklineData} type="area" />
+      </div>
+      <div className="flex items-center gap-4">
+        <span className="text-sm text-muted-foreground w-24">Bar:</span>
+        <WakaSparkline data={sparklineData} type="bar" />
+      </div>
+    </div>
+  ),
+}
+
+export const SparklineSizes: StoryObj = {
+  render: () => (
+    <div className="space-y-4">
+      <div className="flex items-center gap-4">
+        <WakaSparkline data={sparklineData} width={80} height={20} />
+        <span className="text-sm text-muted-foreground">80x20</span>
+      </div>
+      <div className="flex items-center gap-4">
+        <WakaSparkline data={sparklineData} width={120} height={30} />
+        <span className="text-sm text-muted-foreground">120x30</span>
+      </div>
+      <div className="flex items-center gap-4">
+        <WakaSparkline data={sparklineData} width={200} height={50} />
+        <span className="text-sm text-muted-foreground">200x50</span>
+      </div>
+    </div>
+  ),
+}
+
+export const SparklineColors: StoryObj = {
+  render: () => (
+    <div className="space-y-4">
+      <div className="flex items-center gap-4">
+        <WakaSparkline data={sparklineData} color="#22c55e" type="area" />
+        <span className="text-sm text-muted-foreground">Green</span>
+      </div>
+      <div className="flex items-center gap-4">
+        <WakaSparkline data={sparklineData} color="#3b82f6" type="area" />
+        <span className="text-sm text-muted-foreground">Blue</span>
+      </div>
+      <div className="flex items-center gap-4">
+        <WakaSparkline data={sparklineData} color="#ef4444" type="area" />
+        <span className="text-sm text-muted-foreground">Red</span>
+      </div>
+    </div>
+  ),
+}
+
+export const SparklineWithMetrics: StoryObj = {
+  render: () => (
+    <div className="space-y-4">
+      <div className="flex items-center gap-4">
+        <WakaSparkline data={sparklineData} showValue />
+        <span className="text-sm text-muted-foreground">With value</span>
+      </div>
+      <div className="flex items-center gap-4">
+        <WakaSparkline data={sparklineData} showMinMax />
+        <span className="text-sm text-muted-foreground">With min/max</span>
+      </div>
+      <div className="flex items-center gap-4">
+        <WakaSparkline data={sparklineData} showValue showMinMax />
+        <span className="text-sm text-muted-foreground">Both</span>
+      </div>
+    </div>
+  ),
+}
+
+export const SparklineInTable: StoryObj = {
+  render: () => (
+    <table className="w-[500px] text-sm">
+      <thead>
+        <tr className="border-b">
+          <th className="text-left p-2">Metric</th>
+          <th className="text-left p-2">Trend</th>
+          <th className="text-right p-2">Value</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr className="border-b">
+          <td className="p-2">Users</td>
+          <td className="p-2">
+            <WakaSparkline data={[12, 19, 3, 5, 2, 3, 15, 20]} color="#22c55e" />
+          </td>
+          <td className="text-right p-2 font-medium">2,450</td>
+        </tr>
+        <tr className="border-b">
+          <td className="p-2">Revenue</td>
+          <td className="p-2">
+            <WakaSparkline data={[8, 12, 15, 14, 18, 22, 25, 28]} color="#3b82f6" />
+          </td>
+          <td className="text-right p-2 font-medium">$45.2k</td>
+        </tr>
+        <tr className="border-b">
+          <td className="p-2">Errors</td>
+          <td className="p-2">
+            <WakaSparkline data={[25, 20, 18, 15, 12, 8, 5, 3]} color="#ef4444" />
+          </td>
+          <td className="text-right p-2 font-medium">23</td>
+        </tr>
+      </tbody>
+    </table>
+  ),
+}
+
+// =============================================
+// Combined / Dashboard Example
+// =============================================
+
+export const DashboardExample: StoryObj = {
+  render: () => (
+    <div className="w-[900px] space-y-8 p-6 border rounded-lg">
+      <h2 className="text-2xl font-bold">Analytics Dashboard</h2>
+
+      {/* KPI Row */}
+      <div className="grid grid-cols-4 gap-4">
+        {[
+          { label: 'Users', value: '2,450', trend: [12, 19, 15, 25, 22, 30], color: '#22c55e' },
+          { label: 'Revenue', value: '$45.2k', trend: [8, 12, 15, 14, 18, 22], color: '#3b82f6' },
+          { label: 'Orders', value: '1,234', trend: [5, 8, 12, 10, 15, 18], color: '#8b5cf6' },
+          { label: 'Conversion', value: '3.2%', trend: [2, 3, 2.5, 3.5, 4, 3.8], color: '#f59e0b' },
+        ].map((kpi) => (
+          <div key={kpi.label} className="p-4 border rounded-lg">
+            <p className="text-sm text-muted-foreground">{kpi.label}</p>
+            <p className="text-2xl font-bold">{kpi.value}</p>
+            <WakaSparkline data={kpi.trend} color={kpi.color} type="area" width={120} height={30} />
+          </div>
+        ))}
+      </div>
+
+      {/* Charts Row */}
+      <div className="grid grid-cols-2 gap-6">
+        <WakaAreaChart
+          data={lineData}
+          dataKeys={['users', 'sessions']}
+          title="Traffic Overview"
+          legend
+          size="md"
+        />
+        <WakaBarChart
+          data={barData}
+          dataKeys={['sales', 'profit']}
+          title="Revenue Breakdown"
+          legend
+          size="md"
+        />
+      </div>
+
+      {/* Bottom Row */}
+      <div className="grid grid-cols-3 gap-6">
+        <WakaPieChart
+          data={pieData}
+          title="Browser Distribution"
+          size="sm"
+        />
+        <div className="col-span-2">
+          <WakaLineChart
+            data={lineData}
+            dataKeys={['pageviews']}
+            title="Page Views Trend"
+            size="sm"
+          />
+        </div>
+      </div>
+    </div>
+  ),
+}