@wakastellar/ui 2.3.4 → 2.4.0

package/src/components/waka-health-pulse/WakaHealthPulse.stories.tsx

@@ -0,0 +1,293 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaHealthPulse } from './index'
+import type { HealthStatus } from './index'
+import * as React from 'react'
+
+const meta: Meta<typeof WakaHealthPulse> = {
+  title: 'Components/DevOps/WakaHealthPulse',
+  component: WakaHealthPulse,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'An ECG-style health pulse visualization with status-specific patterns, animated waveforms, and metric display.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    status: {
+      control: 'select',
+      options: ['healthy', 'warning', 'critical', 'down', 'unknown'],
+      description: 'Health status of the service',
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+      description: 'Size variant',
+    },
+    pulseRate: {
+      control: { type: 'number', min: 20, max: 120, step: 5 },
+      description: 'Pulse rate in beats per minute',
+    },
+    showValue: {
+      control: 'boolean',
+      description: 'Show the metric value',
+    },
+    animated: {
+      control: 'boolean',
+      description: 'Enable animations',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaHealthPulse>
+
+export const Default: Story = {
+  args: {
+    status: 'healthy',
+    value: 245,
+    unit: 'req/s',
+    label: 'API Server',
+    pulseRate: 60,
+  },
+}
+
+export const AllStatuses: Story = {
+  render: () => {
+    const statuses: Array<{ status: HealthStatus; value: number; unit: string }> = [
+      { status: 'healthy', value: 245, unit: 'req/s' },
+      { status: 'warning', value: 89, unit: 'ms' },
+      { status: 'critical', value: 523, unit: 'ms' },
+      { status: 'down', value: 0, unit: 'req/s' },
+      { status: 'unknown', value: 42, unit: '?' },
+    ]
+
+    return (
+      <div className="space-y-4">
+        {statuses.map(({ status, value, unit }) => (
+          <WakaHealthPulse
+            key={status}
+            status={status}
+            value={value}
+            unit={unit}
+            label={`Service (${status})`}
+            pulseRate={status === 'down' ? 0 : status === 'critical' ? 120 : 60}
+          />
+        ))}
+      </div>
+    )
+  },
+}
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Small</p>
+        <WakaHealthPulse
+          status="healthy"
+          value={120}
+          unit="ms"
+          label="Response Time"
+          size="sm"
+        />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Medium (Default)</p>
+        <WakaHealthPulse
+          status="healthy"
+          value={120}
+          unit="ms"
+          label="Response Time"
+          size="md"
+        />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Large</p>
+        <WakaHealthPulse
+          status="healthy"
+          value={120}
+          unit="ms"
+          label="Response Time"
+          size="lg"
+        />
+      </div>
+    </div>
+  ),
+}
+
+export const PulseRates: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Slow (30 BPM)</p>
+        <WakaHealthPulse
+          status="healthy"
+          value={99.9}
+          unit="%"
+          label="Uptime"
+          pulseRate={30}
+        />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Normal (60 BPM)</p>
+        <WakaHealthPulse
+          status="healthy"
+          value={245}
+          unit="req/s"
+          label="Throughput"
+          pulseRate={60}
+        />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Fast (120 BPM)</p>
+        <WakaHealthPulse
+          status="critical"
+          value={2340}
+          unit="ms"
+          label="Latency"
+          pulseRate={120}
+        />
+      </div>
+    </div>
+  ),
+}
+
+export const NoValue: Story = {
+  render: () => (
+    <WakaHealthPulse
+      status="healthy"
+      label="Database Connection"
+      showValue={false}
+    />
+  ),
+}
+
+export const NoAnimation: Story = {
+  render: () => (
+    <WakaHealthPulse
+      status="healthy"
+      value={245}
+      unit="req/s"
+      label="Static Display"
+      animated={false}
+    />
+  ),
+}
+
+export const CustomColors: Story = {
+  render: () => (
+    <WakaHealthPulse
+      status="healthy"
+      value={100}
+      unit="%"
+      label="Custom Colors"
+      colors={{
+        healthy: '#06b6d4', // cyan
+        warning: '#f97316', // orange
+        critical: '#dc2626', // red
+      }}
+    />
+  ),
+}
+
+export const ServiceDashboard: Story = {
+  render: () => {
+    const [services] = React.useState([
+      { id: 'api', label: 'API Server', status: 'healthy' as const, value: 245, unit: 'req/s', pulseRate: 60 },
+      { id: 'db', label: 'Database', status: 'healthy' as const, value: 23, unit: 'ms', pulseRate: 45 },
+      { id: 'cache', label: 'Redis Cache', status: 'warning' as const, value: 89, unit: '%', pulseRate: 80 },
+      { id: 'queue', label: 'Message Queue', status: 'critical' as const, value: 1523, unit: 'pending', pulseRate: 100 },
+      { id: 'storage', label: 'Object Storage', status: 'down' as const, value: 0, unit: 'req/s', pulseRate: 0 },
+      { id: 'cdn', label: 'CDN', status: 'healthy' as const, value: 12, unit: 'ms', pulseRate: 50 },
+    ])
+
+    const healthyCount = services.filter(s => s.status === 'healthy').length
+    const warningCount = services.filter(s => s.status === 'warning').length
+    const criticalCount = services.filter(s => s.status === 'critical').length
+    const downCount = services.filter(s => s.status === 'down').length
+
+    return (
+      <div className="p-6 rounded-xl border bg-card">
+        <div className="flex justify-between items-center mb-6">
+          <h2 className="text-xl font-bold">Service Health</h2>
+          <div className="flex gap-4 text-sm">
+            <span className="text-green-500">● {healthyCount} Healthy</span>
+            <span className="text-yellow-500">● {warningCount} Warning</span>
+            <span className="text-red-500">● {criticalCount} Critical</span>
+            <span className="text-gray-500">● {downCount} Down</span>
+          </div>
+        </div>
+
+        <div className="grid grid-cols-2 gap-4">
+          {services.map((service) => (
+            <WakaHealthPulse
+              key={service.id}
+              status={service.status}
+              value={service.value}
+              unit={service.unit}
+              label={service.label}
+              pulseRate={service.pulseRate}
+              size="md"
+            />
+          ))}
+        </div>
+      </div>
+    )
+  },
+}
+
+export const LiveMetrics: Story = {
+  render: () => {
+    const [value, setValue] = React.useState(245)
+    const [status, setStatus] = React.useState<HealthStatus>('healthy')
+
+    React.useEffect(() => {
+      const interval = setInterval(() => {
+        const newValue = Math.floor(Math.random() * 100) + 200
+        setValue(newValue)
+
+        if (newValue > 280) {
+          setStatus('warning')
+        } else if (newValue < 220) {
+          setStatus('critical')
+        } else {
+          setStatus('healthy')
+        }
+      }, 2000)
+
+      return () => clearInterval(interval)
+    }, [])
+
+    return (
+      <div className="space-y-4">
+        <p className="text-sm text-muted-foreground">
+          Live updating metrics (simulated)
+        </p>
+        <WakaHealthPulse
+          status={status}
+          value={value}
+          unit="req/s"
+          label="API Throughput"
+          pulseRate={status === 'critical' ? 100 : status === 'warning' ? 80 : 60}
+          size="lg"
+        />
+      </div>
+    )
+  },
+}
+
+export const CompactGrid: Story = {
+  render: () => (
+    <div className="grid grid-cols-3 gap-2">
+      <WakaHealthPulse status="healthy" value={99.9} unit="%" label="Uptime" size="sm" />
+      <WakaHealthPulse status="healthy" value={23} unit="ms" label="Latency" size="sm" />
+      <WakaHealthPulse status="warning" value={85} unit="%" label="CPU" size="sm" />
+      <WakaHealthPulse status="healthy" value={64} unit="%" label="Memory" size="sm" />
+      <WakaHealthPulse status="healthy" value={245} unit="req/s" label="Requests" size="sm" />
+      <WakaHealthPulse status="critical" value={92} unit="%" label="Disk" size="sm" />
+    </div>
+  ),
+}

package/src/components/waka-heatmap/WakaHeatmap.stories.tsx

@@ -0,0 +1,376 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaHeatmap, useHeatmap } from './index'
+import type { HeatmapData, HeatmapSelection } from './index'
+import * as React from 'react'
+
+// Generate sample data
+function generateHeatmapData(rows: number, cols: number, pattern: 'random' | 'gradient' | 'checkerboard' = 'random'): HeatmapData {
+  const values: number[][] = []
+  const rowLabels: string[] = []
+  const columnLabels: string[] = []
+
+  for (let r = 0; r < rows; r++) {
+    rowLabels.push(`Row ${r + 1}`)
+    const row: number[] = []
+    for (let c = 0; c < cols; c++) {
+      if (r === 0) columnLabels.push(`Col ${c + 1}`)
+
+      let value: number
+      switch (pattern) {
+        case 'gradient':
+          value = (r + c) / (rows + cols - 2)
+          break
+        case 'checkerboard':
+          value = (r + c) % 2 === 0 ? 0.8 : 0.2
+          break
+        default:
+          value = Math.random()
+      }
+      row.push(value)
+    }
+    values.push(row)
+  }
+
+  return { values, rowLabels, columnLabels }
+}
+
+// Weekly activity data (hours worked per day)
+const weeklyActivityData: HeatmapData = {
+  values: [
+    [8, 7, 6, 8, 7, 2, 0],
+    [7, 8, 9, 7, 8, 4, 1],
+    [6, 7, 8, 8, 6, 3, 0],
+    [9, 8, 7, 9, 8, 5, 2],
+    [7, 6, 8, 7, 7, 3, 1],
+  ],
+  rowLabels: ['Week 1', 'Week 2', 'Week 3', 'Week 4', 'Week 5'],
+  columnLabels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+}
+
+// Correlation matrix
+const correlationData: HeatmapData = {
+  values: [
+    [1.0, 0.8, 0.2, -0.3, 0.5],
+    [0.8, 1.0, 0.1, -0.5, 0.6],
+    [0.2, 0.1, 1.0, 0.4, -0.2],
+    [-0.3, -0.5, 0.4, 1.0, -0.1],
+    [0.5, 0.6, -0.2, -0.1, 1.0],
+  ],
+  rowLabels: ['Revenue', 'Users', 'Bounce Rate', 'Load Time', 'Conversions'],
+  columnLabels: ['Revenue', 'Users', 'Bounce Rate', 'Load Time', 'Conversions'],
+}
+
+const meta: Meta<typeof WakaHeatmap> = {
+  title: 'Components/Charts/WakaHeatmap',
+  component: WakaHeatmap,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'An interactive heatmap component with multiple color schemes, zoom/pan controls, tooltips, and export functionality.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    colorSchemeName: {
+      control: 'select',
+      options: ['blues', 'greens', 'reds', 'viridis', 'plasma', 'coolwarm', 'rdylgn'],
+      description: 'Predefined color scheme',
+    },
+    cellSize: {
+      control: { type: 'range', min: 12, max: 48, step: 4 },
+      description: 'Cell size in pixels',
+    },
+    cellGap: {
+      control: { type: 'range', min: 0, max: 8, step: 1 },
+      description: 'Gap between cells',
+    },
+    showRowLabels: {
+      control: 'boolean',
+      description: 'Show row labels',
+    },
+    showColumnLabels: {
+      control: 'boolean',
+      description: 'Show column labels',
+    },
+    showLegend: {
+      control: 'boolean',
+      description: 'Show color legend',
+    },
+    enableZoom: {
+      control: 'boolean',
+      description: 'Enable zoom controls',
+    },
+    enablePan: {
+      control: 'boolean',
+      description: 'Enable pan mode',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaHeatmap>
+
+export const Default: Story = {
+  args: {
+    data: weeklyActivityData,
+    title: 'Weekly Activity',
+    cellSize: 32,
+  },
+  render: (args) => <WakaHeatmap {...args} valueFormatter={(v) => `${v}h`} />,
+}
+
+export const ColorSchemes: Story = {
+  render: () => {
+    const data = generateHeatmapData(5, 8, 'gradient')
+
+    return (
+      <div className="space-y-8">
+        <WakaHeatmap data={data} colorSchemeName="blues" title="Blues" cellSize={24} />
+        <WakaHeatmap data={data} colorSchemeName="greens" title="Greens" cellSize={24} />
+        <WakaHeatmap data={data} colorSchemeName="viridis" title="Viridis" cellSize={24} />
+        <WakaHeatmap data={data} colorSchemeName="plasma" title="Plasma" cellSize={24} />
+      </div>
+    )
+  },
+}
+
+export const DivergingSchemes: Story = {
+  render: () => (
+    <div className="space-y-8">
+      <WakaHeatmap
+        data={correlationData}
+        colorSchemeName="coolwarm"
+        title="Correlation Matrix (Coolwarm)"
+        cellSize={48}
+        valueFormatter={(v) => v.toFixed(2)}
+      />
+      <WakaHeatmap
+        data={correlationData}
+        colorSchemeName="rdylgn"
+        title="Correlation Matrix (Red-Yellow-Green)"
+        cellSize={48}
+        valueFormatter={(v) => v.toFixed(2)}
+      />
+    </div>
+  ),
+}
+
+export const CellSizes: Story = {
+  render: () => {
+    const data = generateHeatmapData(4, 6, 'random')
+
+    return (
+      <div className="space-y-8">
+        <WakaHeatmap data={data} cellSize={16} cellGap={1} title="Small (16px)" />
+        <WakaHeatmap data={data} cellSize={28} cellGap={2} title="Medium (28px)" />
+        <WakaHeatmap data={data} cellSize={40} cellGap={3} title="Large (40px)" />
+      </div>
+    )
+  },
+}
+
+export const WithoutLabels: Story = {
+  render: () => {
+    const data = generateHeatmapData(8, 12, 'random')
+
+    return (
+      <div className="space-y-8">
+        <WakaHeatmap
+          data={data}
+          showRowLabels
+          showColumnLabels
+          title="With Labels"
+          cellSize={20}
+        />
+        <WakaHeatmap
+          data={data}
+          showRowLabels={false}
+          showColumnLabels={false}
+          title="Without Labels"
+          cellSize={20}
+        />
+      </div>
+    )
+  },
+}
+
+export const LargeHeatmap: Story = {
+  render: () => {
+    const data = generateHeatmapData(20, 30, 'random')
+
+    return (
+      <WakaHeatmap
+        data={data}
+        title="Large Heatmap (20x30)"
+        cellSize={16}
+        cellGap={1}
+        width={700}
+        height={450}
+        showRowLabels={false}
+        showColumnLabels={false}
+      />
+    )
+  },
+}
+
+export const InteractiveSelection: Story = {
+  render: () => {
+    const [selected, setSelected] = React.useState<HeatmapSelection | null>(null)
+
+    return (
+      <div className="space-y-4">
+        <WakaHeatmap
+          data={weeklyActivityData}
+          title="Click to Select"
+          cellSize={32}
+          enableSelection
+          onCellClick={(cell) => setSelected(cell)}
+          onSelectionChange={(selection) => console.log('Selection:', selection)}
+        />
+        {selected && (
+          <div className="p-4 border rounded-lg bg-muted/50">
+            <p className="text-sm">
+              Selected: Row {selected.row + 1}, Column {selected.col + 1}
+            </p>
+            <p className="text-lg font-semibold">{selected.value} hours</p>
+          </div>
+        )}
+      </div>
+    )
+  },
+}
+
+export const ZoomAndPan: Story = {
+  render: () => {
+    const data = generateHeatmapData(15, 20, 'random')
+
+    return (
+      <WakaHeatmap
+        data={data}
+        title="Zoom & Pan (use scroll wheel and pan button)"
+        cellSize={18}
+        width={500}
+        height={350}
+        enableZoom
+        enablePan
+        initialZoom={1}
+        minZoom={0.5}
+        maxZoom={3}
+      />
+    )
+  },
+}
+
+export const MinMaxIndicators: Story = {
+  render: () => (
+    <WakaHeatmap
+      data={weeklyActivityData}
+      title="With Min/Max Indicators"
+      cellSize={32}
+      showMinMax
+      valueFormatter={(v) => `${v}h`}
+    />
+  ),
+}
+
+export const NoTooltip: Story = {
+  render: () => (
+    <WakaHeatmap
+      data={weeklyActivityData}
+      title="Without Tooltip"
+      cellSize={32}
+      showTooltip={false}
+    />
+  ),
+}
+
+export const WithHook: Story = {
+  render: () => {
+    const heatmap = useHeatmap({
+      initialZoom: 1,
+      minZoom: 0.5,
+      maxZoom: 2,
+      onSelectionChange: (selection) => console.log('Selection changed:', selection),
+    })
+
+    return (
+      <div className="space-y-4">
+        <div className="flex gap-2">
+          <button
+            onClick={heatmap.zoomIn}
+            className="px-3 py-1 text-sm border rounded hover:bg-muted"
+          >
+            Zoom In
+          </button>
+          <button
+            onClick={heatmap.zoomOut}
+            className="px-3 py-1 text-sm border rounded hover:bg-muted"
+          >
+            Zoom Out
+          </button>
+          <button
+            onClick={heatmap.resetZoom}
+            className="px-3 py-1 text-sm border rounded hover:bg-muted"
+          >
+            Reset
+          </button>
+          <span className="px-2 py-1 text-sm bg-muted rounded">
+            Zoom: {Math.round(heatmap.zoom * 100)}%
+          </span>
+        </div>
+        <WakaHeatmap
+          data={weeklyActivityData}
+          title="Controlled via Hook"
+          cellSize={32}
+          enableZoom={false}
+          enablePan={false}
+          initialZoom={heatmap.zoom}
+        />
+      </div>
+    )
+  },
+}
+
+export const CorrelationMatrix: Story = {
+  render: () => (
+    <WakaHeatmap
+      data={correlationData}
+      title="Feature Correlation Matrix"
+      colorSchemeName="coolwarm"
+      cellSize={60}
+      valueFormatter={(v) => v.toFixed(2)}
+    />
+  ),
+}
+
+export const ServerLoadExample: Story = {
+  render: () => {
+    const hours = Array.from({ length: 24 }, (_, i) => `${i}:00`)
+    const days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+
+    const values = days.map((_, dayIndex) =>
+      hours.map((_, hourIndex) => {
+        // Simulate server load pattern: higher during business hours, lower at night/weekends
+        const isWeekend = dayIndex >= 5
+        const isBusinessHours = hourIndex >= 9 && hourIndex <= 17
+        const baseLoad = isWeekend ? 20 : isBusinessHours ? 70 : 30
+        return Math.min(100, Math.max(0, baseLoad + (Math.random() - 0.5) * 40))
+      })
+    )
+
+    return (
+      <WakaHeatmap
+        data={{ values, rowLabels: days, columnLabels: hours }}
+        title="Server Load by Hour"
+        colorSchemeName="reds"
+        cellSize={16}
+        cellGap={1}
+        width={700}
+        height={250}
+        valueFormatter={(v) => `${Math.round(v)}%`}
+      />
+    )
+  },
+}