@openuidev/react-ui 0.9.16

package/dist/components/Charts/ScatterChart/stories/ScatterChart.stories.js

@@ -0,0 +1,734 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Calendar, Globe, Laptop, Monitor, Smartphone, TabletSmartphone, Tv, Watch, } from "lucide-react";
+import { useState } from "react";
+import { Card } from "../../../Card";
+import { ScatterChart } from "../ScatterChart";
+const customColorPalette = [
+    "#0A0E60",
+    "#14197B",
+    "#272DA6",
+    "#383FC9",
+    "#444CE7",
+    "#5F67F4",
+    "#7884FF",
+    "#97A9FF",
+    "#B4C6FF",
+    "#CBD7FF",
+];
+// Sample scatter chart datasets
+const dataVariations = {
+    default: [
+        {
+            name: "A school",
+            data: [
+                { x: 100, y: 200, z: 200 },
+                { x: 120, y: 100, z: 260 },
+                { x: 170, y: 300, z: 400 },
+                { x: 140, y: 250, z: 280 },
+                { x: 150, y: 400, z: 500 },
+                { x: 110, y: 280, z: 200 },
+            ],
+        },
+        {
+            name: "B school",
+            data: [
+                { x: 200, y: 180, z: 240 },
+                { x: 180, y: 350, z: 220 },
+                { x: 160, y: 320, z: 250 },
+                { x: 190, y: 150, z: 210 },
+            ],
+        },
+    ],
+    correlation: [
+        {
+            name: "Revenue",
+            data: [
+                { x: 1000, y: 1200 },
+                { x: 1200, y: 1400 },
+                { x: 1700, y: 2100 },
+                { x: 1400, y: 1800 },
+                { x: 1500, y: 1950 },
+                { x: 1100, y: 1300 },
+                { x: 2000, y: 2500 },
+                { x: 1800, y: 2200 },
+                { x: 1600, y: 1850 },
+                { x: 1900, y: 2350 },
+                { x: 1300, y: 1600 },
+                { x: 2200, y: 2800 },
+            ],
+        },
+        {
+            name: "Profit",
+            data: [
+                { x: 1000, y: 200 },
+                { x: 1200, y: 280 },
+                { x: 1700, y: 420 },
+                { x: 1400, y: 350 },
+                { x: 1500, y: 380 },
+                { x: 1100, y: 240 },
+                { x: 2000, y: 500 },
+                { x: 1800, y: 450 },
+                { x: 1600, y: 390 },
+                { x: 1900, y: 470 },
+                { x: 1300, y: 320 },
+                { x: 2200, y: 580 },
+            ],
+        },
+    ],
+    multipleDatasets: [
+        {
+            name: "Desktop",
+            data: [
+                { x: 1, y: 4 },
+                { x: 2, y: 2 },
+                { x: 3, y: 7 },
+                { x: 4, y: 5 },
+                { x: 5, y: 8 },
+                { x: 6, y: 3 },
+                { x: 7, y: 9 },
+                { x: 8, y: 6 },
+                { x: 9, y: 10 },
+                { x: 10, y: 1 },
+            ],
+        },
+        {
+            name: "Mobile",
+            data: [
+                { x: 1, y: 3 },
+                { x: 2, y: 5 },
+                { x: 3, y: 4 },
+                { x: 4, y: 7 },
+                { x: 5, y: 6 },
+                { x: 6, y: 8 },
+                { x: 7, y: 5 },
+                { x: 8, y: 9 },
+                { x: 9, y: 7 },
+                { x: 10, y: 8 },
+            ],
+        },
+        {
+            name: "Tablet",
+            data: [
+                { x: 1, y: 2 },
+                { x: 2, y: 6 },
+                { x: 3, y: 3 },
+                { x: 4, y: 4 },
+                { x: 5, y: 7 },
+                { x: 6, y: 5 },
+                { x: 7, y: 6 },
+                { x: 8, y: 8 },
+                { x: 9, y: 4 },
+                { x: 10, y: 9 },
+            ],
+        },
+    ],
+    performance: [
+        {
+            name: "Performance",
+            data: [
+                { x: 30, y: 1200 },
+                { x: 35, y: 1500 },
+                { x: 40, y: 1800 },
+                { x: 45, y: 2100 },
+                { x: 50, y: 2400 },
+                { x: 55, y: 2700 },
+                { x: 60, y: 3000 },
+                { x: 25, y: 900 },
+                { x: 65, y: 3300 },
+                { x: 70, y: 3600 },
+            ],
+        },
+        {
+            name: "Efficiency",
+            data: [
+                { x: 30, y: 1100 },
+                { x: 35, y: 1350 },
+                { x: 40, y: 1650 },
+                { x: 45, y: 1950 },
+                { x: 50, y: 2200 },
+                { x: 55, y: 2500 },
+                { x: 60, y: 2850 },
+                { x: 25, y: 800 },
+                { x: 65, y: 3150 },
+                { x: 70, y: 3450 },
+            ],
+        },
+    ],
+    comprehensive: [
+        {
+            name: "North America Sales",
+            data: [
+                { x: 1200, y: 8500, z: 120 },
+                { x: 1350, y: 9200, z: 140 },
+                { x: 1100, y: 7800, z: 95 },
+                { x: 1450, y: 10200, z: 160 },
+                { x: 1250, y: 8900, z: 130 },
+                { x: 1600, y: 11500, z: 180 },
+                { x: 1050, y: 7600, z: 85 },
+                { x: 1700, y: 12800, z: 200 },
+                { x: 1300, y: 9100, z: 135 },
+                { x: 1500, y: 10800, z: 170 },
+                { x: 1150, y: 8200, z: 110 },
+                { x: 1750, y: 13200, z: 210 },
+                { x: 1400, y: 9800, z: 150 },
+                { x: 1650, y: 12100, z: 190 },
+                { x: 1220, y: 8700, z: 125 },
+                { x: 1800, y: 13800, z: 220 },
+                { x: 1180, y: 8100, z: 105 },
+                { x: 1550, y: 11100, z: 175 },
+                { x: 1280, y: 9000, z: 128 },
+                { x: 1620, y: 11800, z: 185 },
+                { x: 1120, y: 7900, z: 100 },
+                { x: 1720, y: 13000, z: 205 },
+                { x: 1380, y: 9500, z: 145 },
+                { x: 1680, y: 12500, z: 195 },
+                { x: 1240, y: 8800, z: 120 },
+            ],
+        },
+        {
+            name: "Europe Sales",
+            data: [
+                { x: 980, y: 7200, z: 88 },
+                { x: 1150, y: 8400, z: 115 },
+                { x: 1020, y: 7500, z: 95 },
+                { x: 1280, y: 9200, z: 140 },
+                { x: 1080, y: 7800, z: 105 },
+                { x: 1420, y: 10100, z: 165 },
+                { x: 950, y: 6900, z: 80 },
+                { x: 1520, y: 11200, z: 185 },
+                { x: 1120, y: 8200, z: 120 },
+                { x: 1380, y: 9800, z: 155 },
+                { x: 1050, y: 7600, z: 100 },
+                { x: 1580, y: 11800, z: 195 },
+                { x: 1180, y: 8600, z: 130 },
+                { x: 1480, y: 10700, z: 175 },
+                { x: 1000, y: 7300, z: 90 },
+                { x: 1620, y: 12200, z: 205 },
+                { x: 1060, y: 7700, z: 102 },
+                { x: 1320, y: 9400, z: 145 },
+                { x: 1100, y: 8000, z: 115 },
+                { x: 1450, y: 10400, z: 170 },
+                { x: 970, y: 7100, z: 85 },
+                { x: 1550, y: 11500, z: 190 },
+                { x: 1140, y: 8300, z: 125 },
+                { x: 1680, y: 12600, z: 200 },
+                { x: 1040, y: 7500, z: 98 },
+            ],
+        },
+        {
+            name: "Asia Pacific Sales",
+            data: [
+                { x: 1800, y: 15200, z: 280 },
+                { x: 1950, y: 16800, z: 320 },
+                { x: 1650, y: 13800, z: 240 },
+                { x: 2100, y: 18200, z: 360 },
+                { x: 1750, y: 14800, z: 260 },
+                { x: 2250, y: 19500, z: 400 },
+                { x: 1600, y: 13200, z: 220 },
+                { x: 2350, y: 20200, z: 420 },
+                { x: 1900, y: 16200, z: 300 },
+                { x: 2150, y: 18500, z: 380 },
+                { x: 1700, y: 14200, z: 250 },
+                { x: 2400, y: 20800, z: 440 },
+                { x: 2000, y: 17200, z: 340 },
+                { x: 2200, y: 18800, z: 390 },
+                { x: 1820, y: 15500, z: 290 },
+                { x: 2450, y: 21200, z: 460 },
+                { x: 1720, y: 14500, z: 255 },
+                { x: 2050, y: 17500, z: 350 },
+                { x: 1870, y: 15800, z: 295 },
+                { x: 2300, y: 19800, z: 410 },
+                { x: 1780, y: 15000, z: 275 },
+                { x: 2500, y: 21800, z: 480 },
+                { x: 1920, y: 16400, z: 310 },
+                { x: 2070, y: 17700, z: 355 },
+                { x: 1830, y: 15600, z: 285 },
+            ],
+        },
+        {
+            name: "Latin America Sales",
+            data: [
+                { x: 650, y: 4200, z: 55 },
+                { x: 780, y: 5100, z: 75 },
+                { x: 720, y: 4800, z: 65 },
+                { x: 850, y: 5800, z: 90 },
+                { x: 690, y: 4500, z: 60 },
+                { x: 920, y: 6300, z: 105 },
+                { x: 620, y: 4000, z: 50 },
+                { x: 980, y: 6800, z: 120 },
+                { x: 750, y: 5000, z: 70 },
+                { x: 880, y: 6000, z: 95 },
+                { x: 670, y: 4400, z: 58 },
+                { x: 1020, y: 7100, z: 130 },
+                { x: 730, y: 4900, z: 68 },
+                { x: 950, y: 6500, z: 110 },
+                { x: 640, y: 4100, z: 52 },
+                { x: 1100, y: 7500, z: 150 },
+                { x: 700, y: 4700, z: 62 },
+                { x: 860, y: 5900, z: 92 },
+                { x: 680, y: 4600, z: 56 },
+                { x: 930, y: 6400, z: 108 },
+                { x: 610, y: 3900, z: 48 },
+                { x: 1050, y: 7200, z: 140 },
+                { x: 740, y: 4950, z: 69 },
+                { x: 970, y: 6650, z: 118 },
+                { x: 660, y: 4300, z: 54 },
+            ],
+        },
+        {
+            name: "Middle East & Africa",
+            data: [
+                { x: 450, y: 2800, z: 35 },
+                { x: 580, y: 3700, z: 55 },
+                { x: 520, y: 3300, z: 45 },
+                { x: 680, y: 4400, z: 70 },
+                { x: 490, y: 3100, z: 40 },
+                { x: 750, y: 4900, z: 85 },
+                { x: 420, y: 2600, z: 30 },
+                { x: 820, y: 5500, z: 100 },
+                { x: 560, y: 3600, z: 52 },
+                { x: 710, y: 4700, z: 78 },
+                { x: 470, y: 2900, z: 38 },
+                { x: 880, y: 5900, z: 115 },
+                { x: 530, y: 3400, z: 48 },
+                { x: 780, y: 5200, z: 92 },
+                { x: 440, y: 2700, z: 32 },
+                { x: 920, y: 6200, z: 125 },
+                { x: 500, y: 3200, z: 42 },
+                { x: 650, y: 4100, z: 65 },
+                { x: 480, y: 3000, z: 39 },
+                { x: 730, y: 4800, z: 80 },
+                { x: 410, y: 2500, z: 28 },
+                { x: 850, y: 5700, z: 105 },
+                { x: 540, y: 3500, z: 50 },
+                { x: 800, y: 5400, z: 95 },
+                { x: 460, y: 2850, z: 36 },
+            ],
+        },
+        {
+            name: "Small Business",
+            data: [
+                { x: 200, y: 1200, z: 15 },
+                { x: 280, y: 1600, z: 22 },
+                { x: 240, y: 1400, z: 18 },
+                { x: 320, y: 1900, z: 28 },
+                { x: 220, y: 1300, z: 16 },
+                { x: 360, y: 2200, z: 35 },
+                { x: 180, y: 1100, z: 12 },
+                { x: 400, y: 2500, z: 45 },
+                { x: 260, y: 1500, z: 20 },
+                { x: 340, y: 2100, z: 32 },
+                { x: 210, y: 1250, z: 15 },
+                { x: 380, y: 2400, z: 40 },
+                { x: 250, y: 1450, z: 19 },
+                { x: 370, y: 2300, z: 38 },
+                { x: 190, y: 1150, z: 13 },
+                { x: 420, y: 2700, z: 50 },
+                { x: 230, y: 1350, z: 17 },
+                { x: 290, y: 1700, z: 24 },
+                { x: 205, y: 1220, z: 15 },
+                { x: 350, y: 2150, z: 34 },
+                { x: 170, y: 1050, z: 11 },
+                { x: 390, y: 2450, z: 42 },
+                { x: 245, y: 1420, z: 18 },
+                { x: 375, y: 2350, z: 39 },
+                { x: 195, y: 1180, z: 14 },
+            ],
+        },
+        {
+            name: "Enterprise Clients",
+            data: [
+                { x: 2500, y: 35000, z: 800 },
+                { x: 2800, y: 38000, z: 900 },
+                { x: 2200, y: 32000, z: 700 },
+                { x: 3100, y: 42000, z: 1000 },
+                { x: 2650, y: 36500, z: 850 },
+                { x: 3400, y: 46000, z: 1200 },
+                { x: 2100, y: 30000, z: 650 },
+                { x: 3600, y: 48000, z: 1300 },
+                { x: 2750, y: 37500, z: 875 },
+                { x: 2950, y: 40000, z: 950 },
+                { x: 2350, y: 33500, z: 750 },
+                { x: 3750, y: 50000, z: 1400 },
+                { x: 2900, y: 39500, z: 925 },
+                { x: 3250, y: 44000, z: 1100 },
+                { x: 2550, y: 35500, z: 825 },
+                { x: 3850, y: 52000, z: 1500 },
+                { x: 2400, y: 34000, z: 775 },
+                { x: 3050, y: 41000, z: 975 },
+                { x: 2700, y: 37000, z: 860 },
+                { x: 3300, y: 45000, z: 1150 },
+                { x: 2250, y: 31500, z: 675 },
+                { x: 3500, y: 47000, z: 1250 },
+                { x: 2850, y: 38500, z: 910 },
+                { x: 3200, y: 43000, z: 1050 },
+                { x: 2600, y: 36000, z: 835 },
+            ],
+        },
+        {
+            name: "Government Contracts",
+            data: [
+                { x: 1800, y: 25000, z: 600 },
+                { x: 2100, y: 28000, z: 700 },
+                { x: 1650, y: 23000, z: 550 },
+                { x: 2400, y: 32000, z: 800 },
+                { x: 1950, y: 26500, z: 650 },
+                { x: 2700, y: 36000, z: 900 },
+                { x: 1500, y: 21000, z: 500 },
+                { x: 2850, y: 38000, z: 950 },
+                { x: 2250, y: 30000, z: 750 },
+                { x: 2550, y: 34000, z: 850 },
+                { x: 1750, y: 24000, z: 575 },
+                { x: 3000, y: 40000, z: 1000 },
+                { x: 2150, y: 29000, z: 725 },
+                { x: 2600, y: 35000, z: 875 },
+                { x: 1850, y: 25500, z: 625 },
+                { x: 3100, y: 41000, z: 1025 },
+                { x: 1700, y: 23500, z: 525 },
+                { x: 2300, y: 30500, z: 775 },
+                { x: 2000, y: 27500, z: 675 },
+                { x: 2750, y: 37000, z: 925 },
+                { x: 1600, y: 22500, z: 525 },
+                { x: 2900, y: 39000, z: 975 },
+                { x: 2200, y: 29500, z: 740 },
+                { x: 2650, y: 35500, z: 890 },
+                { x: 1900, y: 26000, z: 640 },
+            ],
+        },
+    ],
+};
+const icons = {
+    desktop: Monitor,
+    mobile: TabletSmartphone,
+    tablet: Calendar,
+    series1: Globe,
+    series2: Smartphone,
+    revenue: Laptop,
+    profit: Tv,
+    performance: Watch,
+    efficiency: Monitor,
+};
+/**
+ * # ScatterChart Component Documentation
+ *
+ * The ScatterChart component is designed for visualizing relationships between two continuous variables.
+ * It's ideal for:
+ *
+ * - **Correlation Analysis**: Identifying relationships between variables.
+ * - **Distribution Analysis**: Understanding data point clustering and outliers.
+ * - **Comparative Analysis**: Comparing multiple datasets on the same coordinate system.
+ *
+ * ## Key Features
+ *
+ * ### Interactive & Responsive
+ * - **Interactive Tooltips**: Hover over points to see detailed data values.
+ * - **Multiple Datasets**: Support for multiple data series with different colors.
+ * - **Responsive Design**: Adapts to any container size.
+ *
+ * ### Customization
+ * - **Theming**: Six pre-built color palettes or custom colors.
+ * - **Shape Options**: Multiple point shapes (circle, diamond, square, etc.).
+ * - **Axis Configuration**: Customizable axis labels, units, and domains.
+ */
+const meta = {
+    title: "Components/Charts/ScatterChart",
+    component: ScatterChart,
+    parameters: {
+        layout: "centered",
+        docs: {
+            description: {
+                component: `
+## Installation and Basic Usage
+
+\`\`\`tsx
+import { ScatterChart } from '@openui-ui/react-ui/Charts/ScatterChart';
+
+const scatterData = [
+  { x: 100, y: 200, category: "A" },
+  { x: 120, y: 100, category: "B" },
+  { x: 170, y: 300, category: "A" },
+];
+
+// Basic implementation
+<ScatterChart
+  data={scatterData}
+  xAxisDataKey="x"
+  yAxisDataKey="y"
+  theme="ocean"
+/>
+
+// With custom labels and units
+<ScatterChart
+  data={scatterData}
+  xAxisDataKey="x"
+  yAxisDataKey="y"
+  xAxisLabel="Temperature (°C)"
+  yAxisLabel="Sales ($)"
+  xAxisUnit="°C"
+  yAxisUnit="$"
+/>
+\`\`\`
+
+## Data Structure Requirements
+
+Your data should be an array of objects. Each object must contain:
+- **x coordinate** (number): The X-axis value for the point.
+- **y coordinate** (number): The Y-axis value for the point.
+- One or more **series fields**: Additional fields that define different datasets/series.
+
+\`\`\`tsx
+const scatterData = [
+  { x: 10, y: 20, dataset1: 1, dataset2: 1 },
+  { x: 15, y: 25, dataset1: 1, dataset2: 1 },
+  { x: 20, y: 30, dataset1: 1, dataset2: 1 },
+];
+\`\`\`
+`,
+            },
+        },
+    },
+    tags: ["!dev", "autodocs"],
+    argTypes: {
+        data: {
+            description: `
+**Required.** An array of data objects for the scatter chart. Each object should contain:
+- x coordinate (number) for the X-axis.
+- y coordinate (number) for the Y-axis.
+- One or more series identifiers.
+`,
+            control: false,
+            table: {
+                type: { summary: "Array<Record<string, string | number>>" },
+                category: "📊 Data Configuration",
+            },
+        },
+        xAxisDataKey: {
+            description: "The key in your data object that represents the X-axis values.",
+            control: "text",
+            table: {
+                defaultValue: { summary: "x" },
+                category: "📊 Data Configuration",
+            },
+        },
+        yAxisDataKey: {
+            description: "The key in your data object that represents the Y-axis values.",
+            control: "text",
+            table: {
+                defaultValue: { summary: "y" },
+                category: "📊 Data Configuration",
+            },
+        },
+        theme: {
+            description: "Specifies the color palette for the chart points and legend.",
+            control: "select",
+            options: ["ocean", "orchid", "emerald", "sunset", "spectrum", "vivid"],
+            table: {
+                defaultValue: { summary: "ocean" },
+                category: "🎨 Visual Styling",
+            },
+        },
+        customPalette: {
+            description: "Custom array of colors to use instead of the theme palette.",
+            control: "object",
+            table: {
+                type: { summary: "string[]" },
+                category: "🎨 Visual Styling",
+            },
+        },
+        shape: {
+            description: "The shape of the scatter points.",
+            control: "select",
+            options: ["circle", "square"],
+            table: {
+                defaultValue: { summary: "circle" },
+                category: "🎨 Visual Styling",
+            },
+        },
+        grid: {
+            description: "Toggles the visibility of the background grid lines.",
+            control: "boolean",
+            table: {
+                defaultValue: { summary: "true" },
+                category: "📱 Display Options",
+            },
+        },
+        legend: {
+            description: "Toggles the visibility of the chart legend.",
+            control: "boolean",
+            table: {
+                defaultValue: { summary: "true" },
+                category: "📱 Display Options",
+            },
+        },
+        isAnimationActive: {
+            description: "Enables or disables the initial loading animation.",
+            control: "boolean",
+            table: {
+                defaultValue: { summary: "false" },
+                category: "🎬 Animation & Interaction",
+            },
+        },
+        xAxisLabel: {
+            description: "A label to display below the X-axis.",
+            control: "text",
+            table: {
+                type: { summary: "React.ReactNode" },
+                category: "📱 Display Options",
+            },
+        },
+        yAxisLabel: {
+            description: "A label to display beside the Y-axis.",
+            control: "text",
+            table: {
+                type: { summary: "React.ReactNode" },
+                category: "📱 Display Options",
+            },
+        },
+        className: {
+            description: "Custom CSS class to apply to the chart's container.",
+            control: "text",
+            table: {
+                type: { summary: "string" },
+                category: "Layout & Sizing",
+            },
+        },
+        height: {
+            description: "Sets the height of the chart container.",
+            control: "number",
+            table: {
+                type: { summary: "number" },
+                category: "Layout & Sizing",
+            },
+        },
+        width: {
+            description: "Sets the width of the chart container.",
+            control: "number",
+            table: {
+                type: { summary: "number" },
+                category: "Layout & Sizing",
+            },
+        },
+    },
+};
+export default meta;
+/**
+ * ## Basic Scatter Chart
+ *
+ * This demonstrates a basic scatter chart with default settings.
+ * Perfect for showing simple correlations between two variables.
+ */
+export const BasicScatter = {
+    name: "📈 Basic Scatter Chart",
+    args: {
+        data: dataVariations.default,
+        xAxisDataKey: "x",
+        yAxisDataKey: "y",
+        theme: "ocean",
+        grid: true,
+        legend: true,
+        isAnimationActive: true,
+        showYAxis: true,
+        showXAxis: true,
+        shape: "circle",
+        width: 700,
+        height: 400,
+    },
+    render: (args) => _jsx(ScatterChart, { ...args }),
+};
+/**
+ * ## Correlation Analysis
+ *
+ * This example shows how to use the scatter chart for correlation analysis.
+ * Notice how the points follow a general upward trend, indicating positive correlation.
+ */
+export const CorrelationAnalysis = {
+    name: "📊 Correlation Analysis",
+    args: {
+        data: dataVariations.correlation,
+        xAxisDataKey: "x",
+        yAxisDataKey: "y",
+        theme: "emerald",
+        grid: true,
+        legend: true,
+        isAnimationActive: true,
+        xAxisLabel: "Marketing Spend",
+        yAxisLabel: "Sales Revenue",
+        shape: "circle",
+    },
+    render: (args) => (_jsx(Card, { style: { width: "700px" }, children: _jsx(ScatterChart, { ...args }) })),
+};
+/**
+ * ## Shape Comparison
+ *
+ * Compare different point shapes available in the scatter chart.
+ * Each shape provides a different visual style for your data points.
+ */
+export const ShapeComparison = {
+    name: "🔷 Shape Comparison",
+    args: {
+        data: dataVariations.default,
+        xAxisDataKey: "x",
+        yAxisDataKey: "y",
+        theme: "sunset",
+        grid: true,
+        legend: true,
+        isAnimationActive: false,
+    },
+    render: (args) => {
+        const shapes = ["circle", "square"];
+        return (_jsx("div", { style: { display: "flex", flexDirection: "column", gap: "20px" }, children: shapes.map((shape) => (_jsxs("div", { children: [_jsxs("h4", { style: {
+                            margin: "0 0 8px 0",
+                            fontSize: "14px",
+                            fontWeight: "600",
+                            textTransform: "capitalize",
+                        }, children: [shape, " Shape"] }), _jsx(Card, { style: { width: "500px", height: "600px" }, children: _jsx(ScatterChart, { ...args, shape: shape, height: "100%" }) })] }, shape))) }));
+    },
+};
+/**
+ * ## Data Explorer
+ *
+ * Interactive tool for exploring different scatter chart datasets.
+ * Use the buttons to switch between various data scenarios.
+ */
+export const DataExplorer = {
+    name: "🎛️ Data Explorer",
+    args: {
+        data: dataVariations.default,
+        xAxisDataKey: "x",
+        yAxisDataKey: "y",
+        theme: "ocean",
+        grid: true,
+        legend: true,
+        isAnimationActive: true,
+        shape: "circle",
+    },
+    render: (args) => {
+        const [selectedDataType, setSelectedDataType] = useState("default");
+        const currentData = dataVariations[selectedDataType];
+        const buttonStyle = {
+            margin: "2px",
+            padding: "6px 12px",
+            fontSize: "12px",
+            border: "1px solid #ddd",
+            borderRadius: "4px",
+            cursor: "pointer",
+            background: "#fff",
+            fontFamily: "monospace",
+        };
+        const activeButtonStyle = {
+            ...buttonStyle,
+            background: "#007acc",
+            color: "white",
+            border: "1px solid #007acc",
+        };
+        return (_jsxs("div", { children: [_jsxs("div", { style: {
+                        marginBottom: "16px",
+                        padding: "12px",
+                        background: "#f8f9fa",
+                        borderRadius: "8px",
+                        border: "1px solid #e9ecef",
+                        width: "600px",
+                    }, children: [_jsx("strong", { children: "\uD83D\uDCC8 Scatter Chart Test Suite:" }), _jsxs("div", { style: { marginTop: "8px", display: "flex", flexWrap: "wrap", gap: "4px" }, children: [_jsx("button", { onClick: () => setSelectedDataType("default"), style: selectedDataType === "default" ? activeButtonStyle : buttonStyle, children: "\uD83D\uDCCA Default" }), _jsx("button", { onClick: () => setSelectedDataType("correlation"), style: selectedDataType === "correlation" ? activeButtonStyle : buttonStyle, children: "\uD83D\uDCC8 Correlation" }), _jsx("button", { onClick: () => setSelectedDataType("multipleDatasets"), style: selectedDataType === "multipleDatasets" ? activeButtonStyle : buttonStyle, children: "\uD83C\uDFAF Multiple Datasets" }), _jsx("button", { onClick: () => setSelectedDataType("performance"), style: selectedDataType === "performance" ? activeButtonStyle : buttonStyle, children: "\u26A1 Performance" }), _jsx("button", { onClick: () => setSelectedDataType("comprehensive"), style: selectedDataType === "comprehensive" ? activeButtonStyle : buttonStyle, children: "\uD83C\uDF0D Comprehensive" })] })] }), _jsx(Card, { style: { width: "600px" }, children: _jsx(ScatterChart, { ...args, data: currentData, height: "600px" }) })] }));
+    },
+};
+//# sourceMappingURL=ScatterChart.stories.js.map