@wakastellar/ui 2.3.4 → 2.4.0

package/src/components/waka-radar-score/WakaRadarScore.stories.tsx

@@ -0,0 +1,372 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaRadarScore, WakaRadarScoreSimple, WakaRadarScoreCompare, useRadarScore } from './index'
+import type { RadarDataSet, RadarDataPoint } from './index'
+import * as React from 'react'
+
+const skillsData: RadarDataPoint[] = [
+  { label: 'Frontend', value: 85 },
+  { label: 'Backend', value: 70 },
+  { label: 'Database', value: 65 },
+  { label: 'DevOps', value: 55 },
+  { label: 'Testing', value: 75 },
+  { label: 'Design', value: 60 },
+]
+
+const performanceAxes = ['Speed', 'Reliability', 'Scalability', 'Security', 'Usability', 'Cost']
+const performanceDatasets: RadarDataSet[] = [
+  {
+    id: 'current',
+    label: 'Current',
+    data: [75, 85, 65, 90, 70, 60],
+    color: '#3b82f6',
+    fillOpacity: 0.2,
+  },
+  {
+    id: 'target',
+    label: 'Target',
+    data: [90, 90, 85, 95, 85, 70],
+    color: '#22c55e',
+    fillOpacity: 0.1,
+  },
+]
+
+const playerStatsAxes = ['Attack', 'Defense', 'Speed', 'Stamina', 'Technique', 'Mental']
+const playerA: RadarDataSet = {
+  id: 'playerA',
+  label: 'Player A',
+  data: [90, 60, 75, 80, 85, 70],
+  color: '#ef4444',
+  fillOpacity: 0.2,
+}
+const playerB: RadarDataSet = {
+  id: 'playerB',
+  label: 'Player B',
+  data: [70, 85, 90, 75, 65, 80],
+  color: '#3b82f6',
+  fillOpacity: 0.2,
+}
+
+const meta: Meta<typeof WakaRadarScore> = {
+  title: 'Components/Charts/WakaRadarScore',
+  component: WakaRadarScore,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A radar/spider chart for visualizing multi-dimensional data with support for multiple datasets and comparison views.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: { type: 'range', min: 200, max: 500, step: 50 },
+      description: 'Chart size in pixels',
+    },
+    levels: {
+      control: { type: 'range', min: 3, max: 10, step: 1 },
+      description: 'Number of grid levels',
+    },
+    showGrid: {
+      control: 'boolean',
+      description: 'Show grid lines',
+    },
+    showLabels: {
+      control: 'boolean',
+      description: 'Show axis labels',
+    },
+    showPoints: {
+      control: 'boolean',
+      description: 'Show data points',
+    },
+    showTooltip: {
+      control: 'boolean',
+      description: 'Show tooltips on hover',
+    },
+    animated: {
+      control: 'boolean',
+      description: 'Enable animations',
+    },
+    legendPosition: {
+      control: 'select',
+      options: ['none', 'top', 'bottom', 'left', 'right'],
+      description: 'Legend position',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaRadarScore>
+
+export const Default: Story = {
+  args: {
+    axes: performanceAxes,
+    datasets: [performanceDatasets[0]],
+    size: 350,
+  },
+  render: (args) => <WakaRadarScore {...args} />,
+}
+
+export const SimpleAPI: Story = {
+  render: () => (
+    <WakaRadarScoreSimple
+      data={skillsData}
+      size={350}
+      color="#8b5cf6"
+    />
+  ),
+}
+
+export const MultipleDatasets: Story = {
+  render: () => (
+    <WakaRadarScore
+      axes={performanceAxes}
+      datasets={performanceDatasets}
+      size={400}
+      legendPosition="bottom"
+    />
+  ),
+}
+
+export const Comparison: Story = {
+  render: () => (
+    <WakaRadarScoreCompare
+      axes={playerStatsAxes}
+      dataA={{ label: 'Player A', data: playerA.data, color: '#ef4444' }}
+      dataB={{ label: 'Player B', data: playerB.data, color: '#3b82f6' }}
+      size={400}
+    />
+  ),
+}
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex items-end gap-8">
+      <div className="text-center">
+        <WakaRadarScoreSimple data={skillsData} size={200} />
+        <p className="text-sm text-muted-foreground mt-2">200px</p>
+      </div>
+      <div className="text-center">
+        <WakaRadarScoreSimple data={skillsData} size={300} />
+        <p className="text-sm text-muted-foreground mt-2">300px</p>
+      </div>
+      <div className="text-center">
+        <WakaRadarScoreSimple data={skillsData} size={400} />
+        <p className="text-sm text-muted-foreground mt-2">400px</p>
+      </div>
+    </div>
+  ),
+}
+
+export const GridLevels: Story = {
+  render: () => (
+    <div className="flex gap-8">
+      <div className="text-center">
+        <WakaRadarScoreSimple data={skillsData} size={250} />
+        <p className="text-sm text-muted-foreground mt-2">5 levels (default)</p>
+      </div>
+      <div className="text-center">
+        <WakaRadarScore
+          axes={skillsData.map((d) => d.label)}
+          datasets={[{ id: 'main', label: 'Score', data: skillsData.map((d) => d.value), color: '#3b82f6' }]}
+          size={250}
+          levels={3}
+          legendPosition="none"
+        />
+        <p className="text-sm text-muted-foreground mt-2">3 levels</p>
+      </div>
+      <div className="text-center">
+        <WakaRadarScore
+          axes={skillsData.map((d) => d.label)}
+          datasets={[{ id: 'main', label: 'Score', data: skillsData.map((d) => d.value), color: '#3b82f6' }]}
+          size={250}
+          levels={10}
+          legendPosition="none"
+        />
+        <p className="text-sm text-muted-foreground mt-2">10 levels</p>
+      </div>
+    </div>
+  ),
+}
+
+export const LegendPositions: Story = {
+  render: () => (
+    <div className="space-y-8">
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Legend Bottom</p>
+        <WakaRadarScore axes={performanceAxes} datasets={performanceDatasets} size={300} legendPosition="bottom" />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Legend Right</p>
+        <WakaRadarScore axes={performanceAxes} datasets={performanceDatasets} size={300} legendPosition="right" />
+      </div>
+    </div>
+  ),
+}
+
+export const NoLabels: Story = {
+  render: () => (
+    <div className="flex gap-8">
+      <div className="text-center">
+        <WakaRadarScoreSimple data={skillsData} size={250} />
+        <p className="text-sm text-muted-foreground mt-2">With labels</p>
+      </div>
+      <div className="text-center">
+        <WakaRadarScore
+          axes={skillsData.map((d) => d.label)}
+          datasets={[{ id: 'main', label: 'Score', data: skillsData.map((d) => d.value), color: '#3b82f6' }]}
+          size={250}
+          showLabels={false}
+          legendPosition="none"
+        />
+        <p className="text-sm text-muted-foreground mt-2">Without labels</p>
+      </div>
+    </div>
+  ),
+}
+
+export const NoGrid: Story = {
+  render: () => (
+    <WakaRadarScore
+      axes={performanceAxes}
+      datasets={[performanceDatasets[0]]}
+      size={350}
+      showGrid={false}
+      legendPosition="none"
+    />
+  ),
+}
+
+export const NoPoints: Story = {
+  render: () => (
+    <WakaRadarScore
+      axes={performanceAxes}
+      datasets={performanceDatasets}
+      size={350}
+      showPoints={false}
+    />
+  ),
+}
+
+export const NoAnimation: Story = {
+  render: () => (
+    <WakaRadarScoreSimple data={skillsData} size={300} animated={false} />
+  ),
+}
+
+export const CustomColors: Story = {
+  render: () => {
+    const customDatasets: RadarDataSet[] = [
+      {
+        id: 'team1',
+        label: 'Team Alpha',
+        data: [80, 65, 90, 75, 85, 70],
+        color: '#8b5cf6',
+        fillOpacity: 0.3,
+        strokeWidth: 3,
+      },
+      {
+        id: 'team2',
+        label: 'Team Beta',
+        data: [70, 80, 75, 85, 65, 90],
+        color: '#f59e0b',
+        fillOpacity: 0.3,
+        strokeWidth: 3,
+      },
+    ]
+
+    return (
+      <WakaRadarScore
+        axes={performanceAxes}
+        datasets={customDatasets}
+        size={400}
+        legendPosition="bottom"
+      />
+    )
+  },
+}
+
+export const WithHook: Story = {
+  render: () => {
+    const { activeDataset, setActiveDataset, hoveredPoint, setHoveredPoint } = useRadarScore(performanceDatasets)
+
+    return (
+      <div className="space-y-4">
+        <div className="flex gap-2 flex-wrap">
+          {performanceDatasets.map((dataset) => (
+            <button
+              key={dataset.id}
+              onClick={() => setActiveDataset(activeDataset === dataset.id ? null : dataset.id)}
+              className={`px-3 py-1 text-sm border rounded transition-colors ${
+                activeDataset === dataset.id ? 'bg-primary text-primary-foreground' : 'hover:bg-muted'
+              }`}
+            >
+              {dataset.label}
+            </button>
+          ))}
+        </div>
+        <WakaRadarScore
+          axes={performanceAxes}
+          datasets={performanceDatasets}
+          size={350}
+          legendPosition="none"
+        />
+        <p className="text-sm text-muted-foreground">
+          Active: {activeDataset || 'None'}
+        </p>
+      </div>
+    )
+  },
+}
+
+export const DeveloperSkillsCard: Story = {
+  render: () => (
+    <div className="w-[450px] p-6 border rounded-lg">
+      <div className="flex items-center gap-4 mb-4">
+        <div className="w-12 h-12 rounded-full bg-gradient-to-br from-blue-500 to-purple-600" />
+        <div>
+          <h3 className="font-semibold">Jane Developer</h3>
+          <p className="text-sm text-muted-foreground">Full Stack Engineer</p>
+        </div>
+      </div>
+      <WakaRadarScoreSimple
+        data={skillsData}
+        size={350}
+        color="#8b5cf6"
+        fillOpacity={0.25}
+      />
+      <div className="mt-4 grid grid-cols-2 gap-2">
+        {skillsData.map((skill) => (
+          <div key={skill.label} className="flex justify-between text-sm">
+            <span className="text-muted-foreground">{skill.label}</span>
+            <span className="font-medium">{skill.value}%</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  ),
+}
+
+export const PlayerComparisonCard: Story = {
+  render: () => (
+    <div className="w-[500px] p-6 border rounded-lg">
+      <h3 className="text-lg font-semibold mb-4 text-center">Player Comparison</h3>
+      <WakaRadarScoreCompare
+        axes={playerStatsAxes}
+        dataA={{ label: 'Player A', data: playerA.data, color: '#ef4444' }}
+        dataB={{ label: 'Player B', data: playerB.data, color: '#3b82f6' }}
+        size={400}
+      />
+      <div className="mt-4 flex justify-center gap-8">
+        <div className="flex items-center gap-2">
+          <div className="w-3 h-3 rounded-full bg-red-500" />
+          <span className="text-sm">Player A</span>
+        </div>
+        <div className="flex items-center gap-2">
+          <div className="w-3 h-3 rounded-full bg-blue-500" />
+          <span className="text-sm">Player B</span>
+        </div>
+      </div>
+    </div>
+  ),
+}