@wakastellar/ui 2.3.4 → 2.4.0

package/src/components/waka-treemap-chart/WakaTreemapChart.stories.tsx

@@ -0,0 +1,378 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaTreemapChart, useTreemapChart } from './index'
+import type { TreemapNode } from './index'
+import * as React from 'react'
+
+const diskUsageData: TreemapNode = {
+  id: 'root',
+  name: 'Disk Usage',
+  children: [
+    {
+      id: 'documents',
+      name: 'Documents',
+      children: [
+        { id: 'pdf', name: 'PDFs', value: 2500 },
+        { id: 'word', name: 'Word Docs', value: 1800 },
+        { id: 'spreadsheets', name: 'Spreadsheets', value: 1200 },
+      ],
+    },
+    {
+      id: 'media',
+      name: 'Media',
+      children: [
+        { id: 'photos', name: 'Photos', value: 8000 },
+        { id: 'videos', name: 'Videos', value: 15000 },
+        { id: 'music', name: 'Music', value: 3500 },
+      ],
+    },
+    {
+      id: 'apps',
+      name: 'Applications',
+      children: [
+        { id: 'system', name: 'System', value: 5000 },
+        { id: 'user', name: 'User Apps', value: 7000 },
+      ],
+    },
+    { id: 'other', name: 'Other', value: 2000 },
+  ],
+}
+
+const salesByCategoryData: TreemapNode = {
+  id: 'sales',
+  name: 'Sales',
+  children: [
+    {
+      id: 'electronics',
+      name: 'Electronics',
+      color: '#3b82f6',
+      children: [
+        { id: 'phones', name: 'Phones', value: 45000 },
+        { id: 'laptops', name: 'Laptops', value: 38000 },
+        { id: 'tablets', name: 'Tablets', value: 22000 },
+        { id: 'accessories', name: 'Accessories', value: 15000 },
+      ],
+    },
+    {
+      id: 'clothing',
+      name: 'Clothing',
+      color: '#22c55e',
+      children: [
+        { id: 'mens', name: "Men's", value: 28000 },
+        { id: 'womens', name: "Women's", value: 35000 },
+        { id: 'kids', name: 'Kids', value: 18000 },
+      ],
+    },
+    {
+      id: 'home',
+      name: 'Home & Garden',
+      color: '#f59e0b',
+      children: [
+        { id: 'furniture', name: 'Furniture', value: 32000 },
+        { id: 'decor', name: 'Decor', value: 12000 },
+        { id: 'garden', name: 'Garden', value: 8000 },
+      ],
+    },
+  ],
+}
+
+const portfolioData: TreemapNode = {
+  id: 'portfolio',
+  name: 'Investment Portfolio',
+  children: [
+    {
+      id: 'stocks',
+      name: 'Stocks',
+      children: [
+        { id: 'tech', name: 'Tech', value: 45000, color: '#3b82f6' },
+        { id: 'healthcare', name: 'Healthcare', value: 25000, color: '#22c55e' },
+        { id: 'finance', name: 'Finance', value: 20000, color: '#f59e0b' },
+        { id: 'energy', name: 'Energy', value: 10000, color: '#ef4444' },
+      ],
+    },
+    {
+      id: 'bonds',
+      name: 'Bonds',
+      children: [
+        { id: 'gov', name: 'Government', value: 30000, color: '#8b5cf6' },
+        { id: 'corp', name: 'Corporate', value: 15000, color: '#ec4899' },
+      ],
+    },
+    { id: 'cash', name: 'Cash', value: 20000, color: '#6b7280' },
+    { id: 'crypto', name: 'Crypto', value: 5000, color: '#06b6d4' },
+  ],
+}
+
+const meta: Meta<typeof WakaTreemapChart> = {
+  title: 'Components/Charts/WakaTreemapChart',
+  component: WakaTreemapChart,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A treemap chart for visualizing hierarchical data with nested rectangles proportional to values.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    colorScheme: {
+      control: 'select',
+      options: ['blues', 'greens', 'purples', 'oranges', 'category'],
+      description: 'Color scheme for nodes',
+    },
+    showLabels: {
+      control: 'boolean',
+      description: 'Show node labels',
+    },
+    showValues: {
+      control: 'boolean',
+      description: 'Show node values',
+    },
+    enableDrillDown: {
+      control: 'boolean',
+      description: 'Enable drill-down on click',
+    },
+    animated: {
+      control: 'boolean',
+      description: 'Enable animations',
+    },
+    padding: {
+      control: { type: 'range', min: 0, max: 8, step: 1 },
+      description: 'Padding between nodes',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaTreemapChart>
+
+export const Default: Story = {
+  args: {
+    data: diskUsageData,
+    width: 600,
+    height: 400,
+  },
+  render: (args) => <WakaTreemapChart {...args} />,
+}
+
+export const WithCustomColors: Story = {
+  render: () => <WakaTreemapChart data={salesByCategoryData} width={600} height={400} colorScheme="category" />,
+}
+
+export const ColorSchemes: Story = {
+  render: () => (
+    <div className="space-y-6">
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Blues</p>
+        <WakaTreemapChart data={diskUsageData} width={500} height={250} colorScheme="blues" />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Greens</p>
+        <WakaTreemapChart data={diskUsageData} width={500} height={250} colorScheme="greens" />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Purples</p>
+        <WakaTreemapChart data={diskUsageData} width={500} height={250} colorScheme="purples" />
+      </div>
+    </div>
+  ),
+}
+
+export const DrillDown: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <p className="text-sm text-muted-foreground">Click on a category to drill down into its children</p>
+      <WakaTreemapChart
+        data={salesByCategoryData}
+        width={650}
+        height={400}
+        enableDrillDown
+        colorScheme="category"
+      />
+    </div>
+  ),
+}
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="space-y-6">
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Small (400x250)</p>
+        <WakaTreemapChart data={diskUsageData} width={400} height={250} />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Medium (600x350)</p>
+        <WakaTreemapChart data={diskUsageData} width={600} height={350} />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Large (800x450)</p>
+        <WakaTreemapChart data={diskUsageData} width={800} height={450} />
+      </div>
+    </div>
+  ),
+}
+
+export const Padding: Story = {
+  render: () => (
+    <div className="flex gap-6">
+      <div className="text-center">
+        <WakaTreemapChart data={diskUsageData} width={350} height={250} padding={0} />
+        <p className="text-sm text-muted-foreground mt-2">No padding</p>
+      </div>
+      <div className="text-center">
+        <WakaTreemapChart data={diskUsageData} width={350} height={250} padding={4} />
+        <p className="text-sm text-muted-foreground mt-2">4px padding</p>
+      </div>
+    </div>
+  ),
+}
+
+export const NoLabels: Story = {
+  render: () => (
+    <div className="flex gap-6">
+      <div className="text-center">
+        <WakaTreemapChart data={diskUsageData} width={300} height={200} showLabels={false} />
+        <p className="text-sm text-muted-foreground mt-2">No labels</p>
+      </div>
+      <div className="text-center">
+        <WakaTreemapChart data={diskUsageData} width={300} height={200} showValues={false} />
+        <p className="text-sm text-muted-foreground mt-2">No values</p>
+      </div>
+    </div>
+  ),
+}
+
+export const Interactive: Story = {
+  render: () => {
+    const [selected, setSelected] = React.useState<TreemapNode | null>(null)
+
+    return (
+      <div className="space-y-4">
+        <WakaTreemapChart
+          data={portfolioData}
+          width={600}
+          height={350}
+          colorScheme="category"
+          onNodeClick={(node) => setSelected(node)}
+        />
+        {selected && (
+          <div className="p-4 border rounded-lg bg-muted/50">
+            <h4 className="font-semibold">{selected.name}</h4>
+            {selected.value && (
+              <p className="text-2xl font-bold text-primary">
+                ${selected.value.toLocaleString()}
+              </p>
+            )}
+            {selected.children && (
+              <p className="text-sm text-muted-foreground">
+                {selected.children.length} subcategories
+              </p>
+            )}
+          </div>
+        )}
+      </div>
+    )
+  },
+}
+
+export const WithHook: Story = {
+  render: () => {
+    const { currentNode, breadcrumbs, drillDown, drillUp, reset, getTotalValue } = useTreemapChart(diskUsageData)
+
+    return (
+      <div className="space-y-4">
+        <div className="flex items-center gap-2">
+          {breadcrumbs.map((crumb, index) => (
+            <React.Fragment key={crumb.id}>
+              {index > 0 && <span className="text-muted-foreground">/</span>}
+              <button
+                onClick={() => drillDown(crumb)}
+                className="text-sm hover:underline"
+              >
+                {crumb.name}
+              </button>
+            </React.Fragment>
+          ))}
+        </div>
+        <div className="flex gap-2">
+          <button
+            onClick={drillUp}
+            disabled={breadcrumbs.length <= 1}
+            className="px-3 py-1 text-sm border rounded hover:bg-muted disabled:opacity-50"
+          >
+            Back
+          </button>
+          <button
+            onClick={reset}
+            className="px-3 py-1 text-sm border rounded hover:bg-muted"
+          >
+            Reset
+          </button>
+          <span className="px-3 py-1 text-sm bg-muted rounded">
+            Total: {getTotalValue(currentNode).toLocaleString()} MB
+          </span>
+        </div>
+        <WakaTreemapChart
+          data={currentNode}
+          width={600}
+          height={350}
+          enableDrillDown={false}
+          onNodeClick={(node) => node.children && drillDown(node)}
+        />
+      </div>
+    )
+  },
+}
+
+export const PortfolioDashboard: Story = {
+  render: () => (
+    <div className="w-[700px] p-6 border rounded-lg">
+      <div className="flex justify-between items-start mb-4">
+        <div>
+          <h3 className="text-lg font-semibold">Investment Portfolio</h3>
+          <p className="text-sm text-muted-foreground">Asset allocation overview</p>
+        </div>
+        <div className="text-right">
+          <p className="text-2xl font-bold">$170,000</p>
+          <p className="text-sm text-green-600">+12.5% YTD</p>
+        </div>
+      </div>
+      <WakaTreemapChart
+        data={portfolioData}
+        width={650}
+        height={400}
+        colorScheme="category"
+        enableDrillDown
+        valueFormatter={(v) => `$${(v / 1000).toFixed(0)}K`}
+      />
+    </div>
+  ),
+}
+
+export const DiskUsageDashboard: Story = {
+  render: () => (
+    <div className="w-[700px] p-6 border rounded-lg">
+      <div className="flex justify-between items-start mb-4">
+        <div>
+          <h3 className="text-lg font-semibold">Storage Analysis</h3>
+          <p className="text-sm text-muted-foreground">46 GB used of 100 GB</p>
+        </div>
+        <div className="w-[200px] h-2 bg-muted rounded-full overflow-hidden">
+          <div className="h-full w-[46%] bg-primary rounded-full" />
+        </div>
+      </div>
+      <WakaTreemapChart
+        data={diskUsageData}
+        width={650}
+        height={380}
+        colorScheme="blues"
+        enableDrillDown
+        valueFormatter={(v) => `${(v / 1000).toFixed(1)} GB`}
+      />
+    </div>
+  ),
+}
+
+export const NoAnimation: Story = {
+  render: () => <WakaTreemapChart data={diskUsageData} width={500} height={300} animated={false} />,
+}