@wakastellar/ui 2.3.4 → 2.4.0

package/src/components/waka-sankey-diagram/WakaSankeyDiagram.stories.tsx

@@ -0,0 +1,389 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaSankeyDiagram, useSankeyDiagram } from './index'
+import type { SankeyNode, SankeyLink } from './index'
+import * as React from 'react'
+
+const websiteTrafficNodes: SankeyNode[] = [
+  { id: 'organic', label: 'Organic Search', category: 'primary', value: 5000 },
+  { id: 'direct', label: 'Direct', category: 'secondary', value: 3000 },
+  { id: 'social', label: 'Social Media', category: 'info', value: 2000 },
+  { id: 'referral', label: 'Referral', category: 'success', value: 1500 },
+  { id: 'landing', label: 'Landing Page', value: 7000 },
+  { id: 'pricing', label: 'Pricing Page', value: 4000 },
+  { id: 'features', label: 'Features Page', value: 3500 },
+  { id: 'signup', label: 'Sign Up', category: 'success', value: 2500 },
+  { id: 'demo', label: 'Request Demo', category: 'warning', value: 1000 },
+  { id: 'bounce', label: 'Bounced', category: 'danger', value: 2000 },
+]
+
+const websiteTrafficLinks: SankeyLink[] = [
+  { source: 'organic', target: 'landing', value: 3500 },
+  { source: 'organic', target: 'features', value: 1500 },
+  { source: 'direct', target: 'landing', value: 1500 },
+  { source: 'direct', target: 'pricing', value: 1500 },
+  { source: 'social', target: 'landing', value: 1500 },
+  { source: 'social', target: 'features', value: 500 },
+  { source: 'referral', target: 'pricing', value: 1000 },
+  { source: 'referral', target: 'features', value: 500 },
+  { source: 'landing', target: 'pricing', value: 3000 },
+  { source: 'landing', target: 'signup', value: 2000 },
+  { source: 'landing', target: 'bounce', value: 2000 },
+  { source: 'pricing', target: 'signup', value: 2500 },
+  { source: 'pricing', target: 'demo', value: 1000 },
+  { source: 'features', target: 'pricing', value: 2500 },
+  { source: 'features', target: 'signup', value: 500 },
+]
+
+const energyFlowNodes: SankeyNode[] = [
+  { id: 'solar', label: 'Solar', color: '#f59e0b' },
+  { id: 'wind', label: 'Wind', color: '#3b82f6' },
+  { id: 'hydro', label: 'Hydro', color: '#06b6d4' },
+  { id: 'nuclear', label: 'Nuclear', color: '#8b5cf6' },
+  { id: 'grid', label: 'Power Grid' },
+  { id: 'residential', label: 'Residential', color: '#22c55e' },
+  { id: 'commercial', label: 'Commercial', color: '#ec4899' },
+  { id: 'industrial', label: 'Industrial', color: '#ef4444' },
+  { id: 'loss', label: 'Transmission Loss', color: '#6b7280' },
+]
+
+const energyFlowLinks: SankeyLink[] = [
+  { source: 'solar', target: 'grid', value: 2500 },
+  { source: 'wind', target: 'grid', value: 3000 },
+  { source: 'hydro', target: 'grid', value: 2000 },
+  { source: 'nuclear', target: 'grid', value: 4000 },
+  { source: 'grid', target: 'residential', value: 4500 },
+  { source: 'grid', target: 'commercial', value: 3500 },
+  { source: 'grid', target: 'industrial', value: 2500 },
+  { source: 'grid', target: 'loss', value: 1000 },
+]
+
+const budgetNodes: SankeyNode[] = [
+  { id: 'salary', label: 'Salary', category: 'primary', value: 8000 },
+  { id: 'freelance', label: 'Freelance', category: 'secondary', value: 2000 },
+  { id: 'income', label: 'Total Income' },
+  { id: 'needs', label: 'Needs' },
+  { id: 'wants', label: 'Wants' },
+  { id: 'savings', label: 'Savings', category: 'success' },
+  { id: 'rent', label: 'Rent' },
+  { id: 'utilities', label: 'Utilities' },
+  { id: 'groceries', label: 'Groceries' },
+  { id: 'entertainment', label: 'Entertainment' },
+  { id: 'dining', label: 'Dining Out' },
+]
+
+const budgetLinks: SankeyLink[] = [
+  { source: 'salary', target: 'income', value: 8000 },
+  { source: 'freelance', target: 'income', value: 2000 },
+  { source: 'income', target: 'needs', value: 5000 },
+  { source: 'income', target: 'wants', value: 3000 },
+  { source: 'income', target: 'savings', value: 2000 },
+  { source: 'needs', target: 'rent', value: 2500 },
+  { source: 'needs', target: 'utilities', value: 500 },
+  { source: 'needs', target: 'groceries', value: 1000 },
+  { source: 'needs', target: 'entertainment', value: 1000 },
+  { source: 'wants', target: 'dining', value: 1500 },
+  { source: 'wants', target: 'entertainment', value: 1500 },
+]
+
+const meta: Meta<typeof WakaSankeyDiagram> = {
+  title: 'Components/Charts/WakaSankeyDiagram',
+  component: WakaSankeyDiagram,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A Sankey diagram for visualizing flow data with support for multiple stages, categories, and interactive tooltips.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    orientation: {
+      control: 'select',
+      options: ['horizontal', 'vertical'],
+      description: 'Flow orientation',
+    },
+    nodeWidth: {
+      control: { type: 'range', min: 10, max: 40, step: 2 },
+      description: 'Width of node rectangles',
+    },
+    nodePadding: {
+      control: { type: 'range', min: 5, max: 30, step: 5 },
+      description: 'Padding between nodes',
+    },
+    showValues: {
+      control: 'boolean',
+      description: 'Show value labels on nodes',
+    },
+    showTooltips: {
+      control: 'boolean',
+      description: 'Show tooltips on hover',
+    },
+    draggable: {
+      control: 'boolean',
+      description: 'Enable node dragging',
+    },
+    animated: {
+      control: 'boolean',
+      description: 'Enable animations',
+    },
+    linkOpacity: {
+      control: { type: 'range', min: 0.1, max: 1, step: 0.1 },
+      description: 'Link opacity',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaSankeyDiagram>
+
+export const Default: Story = {
+  args: {
+    nodes: websiteTrafficNodes,
+    links: websiteTrafficLinks,
+    width: 800,
+    height: 500,
+  },
+  render: (args) => <WakaSankeyDiagram {...args} />,
+}
+
+export const Orientations: Story = {
+  render: () => (
+    <div className="space-y-8">
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Horizontal (Default)</p>
+        <WakaSankeyDiagram
+          nodes={energyFlowNodes}
+          links={energyFlowLinks}
+          orientation="horizontal"
+          width={700}
+          height={350}
+        />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Vertical</p>
+        <WakaSankeyDiagram
+          nodes={energyFlowNodes}
+          links={energyFlowLinks}
+          orientation="vertical"
+          width={500}
+          height={500}
+        />
+      </div>
+    </div>
+  ),
+}
+
+export const EnergyFlow: Story = {
+  render: () => (
+    <div className="p-4">
+      <h3 className="text-lg font-semibold mb-2">Energy Production to Consumption</h3>
+      <WakaSankeyDiagram
+        nodes={energyFlowNodes}
+        links={energyFlowLinks}
+        width={750}
+        height={400}
+      />
+    </div>
+  ),
+}
+
+export const BudgetFlow: Story = {
+  render: () => (
+    <div className="p-4">
+      <h3 className="text-lg font-semibold mb-2">Monthly Budget Allocation</h3>
+      <WakaSankeyDiagram
+        nodes={budgetNodes}
+        links={budgetLinks}
+        width={800}
+        height={450}
+      />
+    </div>
+  ),
+}
+
+export const NoValues: Story = {
+  render: () => (
+    <WakaSankeyDiagram
+      nodes={energyFlowNodes}
+      links={energyFlowLinks}
+      showValues={false}
+      width={700}
+      height={400}
+    />
+  ),
+}
+
+export const NoTooltips: Story = {
+  render: () => (
+    <WakaSankeyDiagram
+      nodes={energyFlowNodes}
+      links={energyFlowLinks}
+      showTooltips={false}
+      width={700}
+      height={400}
+    />
+  ),
+}
+
+export const NoDragging: Story = {
+  render: () => (
+    <WakaSankeyDiagram
+      nodes={energyFlowNodes}
+      links={energyFlowLinks}
+      draggable={false}
+      width={700}
+      height={400}
+    />
+  ),
+}
+
+export const CustomNodeWidth: Story = {
+  render: () => (
+    <div className="space-y-8">
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Thin nodes (12px)</p>
+        <WakaSankeyDiagram
+          nodes={energyFlowNodes}
+          links={energyFlowLinks}
+          nodeWidth={12}
+          width={600}
+          height={300}
+        />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Wide nodes (30px)</p>
+        <WakaSankeyDiagram
+          nodes={energyFlowNodes}
+          links={energyFlowLinks}
+          nodeWidth={30}
+          width={600}
+          height={300}
+        />
+      </div>
+    </div>
+  ),
+}
+
+export const LinkOpacity: Story = {
+  render: () => (
+    <div className="space-y-8">
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Low opacity (0.3)</p>
+        <WakaSankeyDiagram
+          nodes={energyFlowNodes}
+          links={energyFlowLinks}
+          linkOpacity={0.3}
+          width={600}
+          height={300}
+        />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">High opacity (0.7)</p>
+        <WakaSankeyDiagram
+          nodes={energyFlowNodes}
+          links={energyFlowLinks}
+          linkOpacity={0.7}
+          width={600}
+          height={300}
+        />
+      </div>
+    </div>
+  ),
+}
+
+export const Interactive: Story = {
+  render: () => {
+    const [selectedNode, setSelectedNode] = React.useState<SankeyNode | null>(null)
+    const [selectedLink, setSelectedLink] = React.useState<SankeyLink | null>(null)
+
+    return (
+      <div className="space-y-4">
+        <WakaSankeyDiagram
+          nodes={websiteTrafficNodes}
+          links={websiteTrafficLinks}
+          width={800}
+          height={450}
+          onNodeClick={(node) => {
+            setSelectedNode(node)
+            setSelectedLink(null)
+          }}
+          onLinkClick={(link) => {
+            setSelectedLink(link)
+            setSelectedNode(null)
+          }}
+        />
+        {(selectedNode || selectedLink) && (
+          <div className="p-4 border rounded-lg bg-muted/50">
+            {selectedNode && (
+              <div>
+                <h4 className="font-semibold">{selectedNode.label}</h4>
+                <p className="text-sm text-muted-foreground">
+                  Category: {selectedNode.category || 'N/A'}
+                </p>
+                <p className="text-sm">
+                  Incoming: {selectedNode.inValue?.toLocaleString()} | Outgoing: {selectedNode.outValue?.toLocaleString()}
+                </p>
+              </div>
+            )}
+            {selectedLink && (
+              <div>
+                <h4 className="font-semibold">
+                  {selectedLink.source} → {selectedLink.target}
+                </h4>
+                <p className="text-2xl font-bold text-primary">
+                  {selectedLink.value.toLocaleString()}
+                </p>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    )
+  },
+}
+
+export const ConversionFunnel: Story = {
+  render: () => (
+    <div className="w-[850px] p-6 border rounded-lg">
+      <div className="mb-4">
+        <h3 className="text-xl font-semibold">Website Conversion Flow</h3>
+        <p className="text-sm text-muted-foreground">
+          How visitors navigate through the site to conversion
+        </p>
+      </div>
+      <WakaSankeyDiagram
+        nodes={websiteTrafficNodes}
+        links={websiteTrafficLinks}
+        width={800}
+        height={480}
+      />
+      <div className="mt-4 flex gap-6 justify-center text-sm">
+        <div className="flex items-center gap-2">
+          <div className="w-3 h-3 rounded-full bg-green-500" />
+          <span>Conversions</span>
+        </div>
+        <div className="flex items-center gap-2">
+          <div className="w-3 h-3 rounded-full bg-yellow-500" />
+          <span>Demo Requests</span>
+        </div>
+        <div className="flex items-center gap-2">
+          <div className="w-3 h-3 rounded-full bg-red-500" />
+          <span>Bounced</span>
+        </div>
+      </div>
+    </div>
+  ),
+}
+
+export const NoAnimation: Story = {
+  render: () => (
+    <WakaSankeyDiagram
+      nodes={energyFlowNodes}
+      links={energyFlowLinks}
+      animated={false}
+      width={700}
+      height={400}
+    />
+  ),
+}