@openuidev/react-ui 0.9.16

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

@@ -0,0 +1,774 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Monitor, TabletSmartphone } from "lucide-react";
+import { useState } from "react";
+import { Card } from "../../../Card";
+import { HorizontalBarChart } from "../HorizontalBarChart";
+// 📊 ALL DATA VARIATIONS - For easy switching in stories
+const dataVariations = {
+    default: [
+        {
+            category: "A",
+            desktop: 150,
+            mobile: 90,
+            tablet: 120,
+            laptop: 180,
+        },
+        {
+            category: "B",
+            desktop: 280,
+            mobile: 180,
+            tablet: 140,
+            laptop: 160,
+        },
+        {
+            category: "C",
+            desktop: 220,
+            mobile: 140,
+            tablet: 160,
+            laptop: 180,
+        },
+        {
+            category: "D",
+            desktop: 180,
+            mobile: 160,
+            tablet: 180,
+            laptop: 200,
+        },
+        {
+            category: "E",
+            desktop: 250,
+            mobile: 120,
+            tablet: 140,
+            laptop: 160,
+        },
+    ],
+    small: [
+        { category: "Q1", desktop: 150, mobile: 90 },
+        { category: "Q2", desktop: 280, mobile: 180 },
+        { category: "Q3", desktop: 220, mobile: 140 },
+    ],
+    large: [
+        {
+            category: "North America",
+            revenue: 150000,
+            expenses: 90000,
+            profit: 60000,
+            marketing: 30000,
+            operations: 40000,
+        },
+        {
+            category: "Europe",
+            revenue: 280000,
+            expenses: 180000,
+            profit: 100000,
+            marketing: 50000,
+            operations: 70000,
+        },
+        {
+            category: "Asia Pacific",
+            revenue: 220000,
+            expenses: 140000,
+            profit: 80000,
+            marketing: 40000,
+            operations: 60000,
+        },
+        {
+            category: "Latin America",
+            revenue: 180000,
+            expenses: 160000,
+            profit: 20000,
+            marketing: 35000,
+            operations: 55000,
+        },
+        {
+            category: "Middle East",
+            revenue: 250000,
+            expenses: 120000,
+            profit: 130000,
+            marketing: 45000,
+            operations: 65000,
+        },
+        {
+            category: "Africa",
+            revenue: 120000,
+            expenses: 80000,
+            profit: 40000,
+            marketing: 25000,
+            operations: 35000,
+        },
+        {
+            category: "Oceania",
+            revenue: 95000,
+            expenses: 65000,
+            profit: 30000,
+            marketing: 20000,
+            operations: 25000,
+        },
+        {
+            category: "Southeast Asia",
+            revenue: 180000,
+            expenses: 110000,
+            profit: 70000,
+            marketing: 35000,
+            operations: 50000,
+        },
+        {
+            category: "Eastern Europe",
+            revenue: 140000,
+            expenses: 95000,
+            profit: 45000,
+            marketing: 28000,
+            operations: 42000,
+        },
+        {
+            category: "Scandinavia",
+            revenue: 160000,
+            expenses: 100000,
+            profit: 60000,
+            marketing: 32000,
+            operations: 48000,
+        },
+    ],
+    simple: [
+        { department: "Sales", performance: 1200 },
+        { department: "Marketing", performance: 950 },
+        { department: "Engineering", performance: 1100 },
+        { department: "Support", performance: 800 },
+    ],
+    edge: [{ period: "Current Quarter", sales: 500, target: 600 }],
+    bigNumbers: [
+        { company: "Apple Inc.", revenue: 394328000000, profit: 99803000000 },
+        { company: "Microsoft Corp.", revenue: 211915000000, profit: 83383000000 },
+        { company: "Alphabet Inc.", revenue: 307394000000, profit: 76033000000 },
+        { company: "Amazon.com Inc.", revenue: 574785000000, profit: 33364000000 },
+    ],
+    expandCollapseChannels: [
+        {
+            channel: "Website Traffic and Organic Search Results",
+            impressions: 120000,
+            clicks: 15000,
+            conversions: 1200,
+            cost: 8500,
+            revenue: 24000,
+            roi: 182,
+            ctr: 12.5,
+            cpc: 0.57,
+            cpa: 7.08,
+            reach: 95000,
+            engagement: 8200,
+            shares: 420,
+            saves: 180,
+            comments: 650,
+            videoViews: 0,
+        },
+        {
+            channel: "Social Media Engagement and Brand Awareness",
+            impressions: 85000,
+            clicks: 12000,
+            conversions: 950,
+            cost: 6200,
+            revenue: 19000,
+            roi: 206,
+            ctr: 14.1,
+            cpc: 0.52,
+            cpa: 6.53,
+            reach: 72000,
+            engagement: 15400,
+            shares: 890,
+            saves: 340,
+            comments: 1200,
+            videoViews: 28000,
+        },
+        {
+            channel: "Email Marketing Campaign Performance",
+            impressions: 45000,
+            clicks: 8500,
+            conversions: 800,
+            cost: 2100,
+            revenue: 16000,
+            roi: 562,
+            ctr: 18.9,
+            cpc: 0.25,
+            cpa: 2.63,
+            reach: 42000,
+            engagement: 6800,
+            shares: 120,
+            saves: 85,
+            comments: 240,
+            videoViews: 0,
+        },
+        {
+            channel: "Paid Advertising and PPC Campaign ROI",
+            impressions: 95000,
+            clicks: 18000,
+            conversions: 1500,
+            cost: 12500,
+            revenue: 30000,
+            roi: 140,
+            ctr: 18.9,
+            cpc: 0.69,
+            cpa: 8.33,
+            reach: 88000,
+            engagement: 12600,
+            shares: 320,
+            saves: 150,
+            comments: 480,
+            videoViews: 5200,
+        },
+        {
+            channel: "Content Marketing and Blog Performance",
+            impressions: 60000,
+            clicks: 9500,
+            conversions: 750,
+            cost: 4800,
+            revenue: 15000,
+            roi: 213,
+            ctr: 15.8,
+            cpc: 0.51,
+            cpa: 6.4,
+            reach: 55000,
+            engagement: 7800,
+            shares: 680,
+            saves: 420,
+            comments: 950,
+            videoViews: 12000,
+        },
+        {
+            channel: "Mobile Application Downloads and Usage",
+            impressions: 70000,
+            clicks: 11000,
+            conversions: 1100,
+            cost: 5500,
+            revenue: 22000,
+            roi: 300,
+            ctr: 15.7,
+            cpc: 0.5,
+            cpa: 5.0,
+            reach: 65000,
+            engagement: 9200,
+            shares: 180,
+            saves: 95,
+            comments: 320,
+            videoViews: 8500,
+        },
+        {
+            channel: "Customer Support Response Time and Quality",
+            impressions: 35000,
+            clicks: 5500,
+            conversions: 450,
+            cost: 2800,
+            revenue: 9000,
+            roi: 221,
+            ctr: 15.7,
+            cpc: 0.51,
+            cpa: 6.22,
+            reach: 32000,
+            engagement: 4200,
+            shares: 45,
+            saves: 25,
+            comments: 180,
+            videoViews: 0,
+        },
+        {
+            channel: "Sales Funnel Conversion and Lead Generation",
+            impressions: 110000,
+            clicks: 22000,
+            conversions: 1800,
+            cost: 15000,
+            revenue: 36000,
+            roi: 140,
+            ctr: 20.0,
+            cpc: 0.68,
+            cpa: 8.33,
+            reach: 98000,
+            engagement: 18500,
+            shares: 420,
+            saves: 280,
+            comments: 750,
+            videoViews: 3200,
+        },
+        {
+            channel: "User Retention and Churn Rate Analysis",
+            impressions: 80000,
+            clicks: 14000,
+            conversions: 1200,
+            cost: 7200,
+            revenue: 24000,
+            roi: 233,
+            ctr: 17.5,
+            cpc: 0.51,
+            cpa: 6.0,
+            reach: 75000,
+            engagement: 11200,
+            shares: 280,
+            saves: 150,
+            comments: 420,
+            videoViews: 6800,
+        },
+        {
+            channel: "Product Feature Usage and Performance Metrics",
+            impressions: 65000,
+            clicks: 10500,
+            conversions: 900,
+            cost: 5200,
+            revenue: 18000,
+            roi: 246,
+            ctr: 16.2,
+            cpc: 0.5,
+            cpa: 5.78,
+            reach: 58000,
+            engagement: 8500,
+            shares: 320,
+            saves: 180,
+            comments: 650,
+            videoViews: 4200,
+        },
+        {
+            channel: "Market Research and Competitive Analysis",
+            impressions: 40000,
+            clicks: 6500,
+            conversions: 500,
+            cost: 3200,
+            revenue: 10000,
+            roi: 213,
+            ctr: 16.3,
+            cpc: 0.49,
+            cpa: 6.4,
+            reach: 36000,
+            engagement: 5200,
+            shares: 95,
+            saves: 65,
+            comments: 220,
+            videoViews: 1800,
+        },
+        {
+            channel: "Brand Sentiment and Public Relations Impact",
+            impressions: 55000,
+            clicks: 8000,
+            conversions: 650,
+            cost: 4100,
+            revenue: 13000,
+            roi: 217,
+            ctr: 14.5,
+            cpc: 0.51,
+            cpa: 6.31,
+            reach: 48000,
+            engagement: 6800,
+            shares: 520,
+            saves: 280,
+            comments: 950,
+            videoViews: 15000,
+        },
+    ],
+    mixedPositiveNegative: [
+        { category: "Product A", profit: 100, loss: -50, net: 50 },
+        { category: "Product B", profit: 150, loss: -200, net: -50 },
+        { category: "Product C", profit: 200, loss: -100, net: 100 },
+        { category: "Product D", profit: -80, loss: -120, net: -200 },
+        { category: "Product E", profit: 300, loss: -150, net: 150 },
+    ],
+    singleGroup: [
+        { region: "North America (USA, Canada, Mexico)", sales: 150000 },
+        { region: "Europe (UK, Germany, France, Italy)", sales: 280000 },
+        { region: "Asia Pacific (Japan, Australia, South Korea)", sales: 220000 },
+        { region: "Latin America (Brazil, Argentina, Chile)", sales: 180000 },
+        { region: "Middle East (UAE, Saudi Arabia, Israel)", sales: 250000 },
+    ],
+};
+// Category key mappings for different datasets
+const categoryKeys = {
+    default: "category",
+    small: "category",
+    large: "category",
+    simple: "department",
+    edge: "period",
+    bigNumbers: "company",
+    expandCollapseChannels: "channel",
+    mixedPositiveNegative: "category",
+    singleGroup: "region",
+};
+// 🔥 ACTIVE DATA - For backward compatibility
+const horizontalBarChartData = dataVariations.default;
+const icons = {
+    desktop: Monitor,
+    mobile: TabletSmartphone,
+};
+/**
+ * # HorizontalBarChart Component Documentation
+ *
+ * The HorizontalBarChart is a versatile component for comparing values across different categories in a horizontal layout.
+ * It's highly effective for:
+ *
+ * - **Category Comparison**: Easily compare metrics like sales, performance, or revenue across different groups.
+ * - **Ranking**: Show the highest and lowest performing items with a clear visual hierarchy.
+ * - **Data with Long Labels**: Perfect for datasets with lengthy category names that don't fit well in vertical layouts.
+ *
+ * ## Key Features
+ *
+ * ### Layout Variants
+ * - **Grouped**: Compare sub-categories side-by-side within a primary category.
+ * - **Stacked**: Show how sub-categories contribute to a total value for each primary category.
+ *
+ * ### Interactive & Responsive
+ * - **Vertical Scrolling**: Automatically enables scrolling when the number of bars exceeds the container height.
+ * - **Interactive Legend**: Toggle data series on and off. Handles overflow with a "Show More" button.
+ * - **Hover Tooltips**: Provides detailed data on hover for better user engagement.
+ * - **Responsive Design**: Adjusts gracefully to the size of its container.
+ *
+ * ### Customization
+ * - **Theming**: Six built-in color palettes, or use custom colors with `customPalette`.
+ * - **Bar Styling**: Customize the corner radius of the bars.
+ * - **Axis and Grid Control**: Toggle visibility of axes and grid lines.
+ */
+const meta = {
+    title: "Components/Charts/HorizontalBarChart",
+    component: HorizontalBarChart,
+    parameters: {
+        layout: "centered",
+        docs: {
+            description: {
+                component: `
+## Installation and Basic Usage
+
+\`\`\`tsx
+import { HorizontalBarChart } from '@openui-ui/react-ui/Charts/HorizontalBarChart';
+
+const salesData = [
+  { region: "North America", sales: 150000, profit: 45000 },
+  { region: "Europe", sales: 280000, profit: 68000 },
+  { region: "Asia Pacific", sales: 220000, profit: 52000 },
+];
+
+// Basic implementation
+<HorizontalBarChart
+  data={salesData}
+  categoryKey="region"
+  theme="ocean"
+/>
+
+// With custom colors
+<HorizontalBarChart
+  data={salesData}
+  categoryKey="region"
+  customPalette={["#FF6B6B", "#4ECDC4", "#45B7D1"]}
+/>
+\`\`\`
+
+## Data Structure Requirements
+
+Your data should be an array of objects. Each object must contain:
+- A **category field** (string or number): Used for the Y-axis labels (e.g., regions, departments).
+- One or more **data series fields** (number): These are the values that will be plotted as bars. The key of the field is used as the series name in the legend and tooltip.
+
+\`\`\`tsx
+const performanceData = [
+  { department: "Sales", performance: 5400, target: 6000 },
+  { department: "Marketing", performance: 8200, target: 7500 },
+  { department: "Engineering", performance: 7100, target: 7000 },
+];
+\`\`\`
+
+## Performance Considerations
+- **Data Volume**: The chart uses virtualization for vertical scrolling, but performance can still be impacted by an extremely large number of data points (e.g., 1000+).
+- **Responsiveness**: The chart adapts to its container, but ensure that bar heights and gaps are readable on very small screens.
+- **Animation**: Can be disabled via \`isAnimationActive={false}\` for better performance with large datasets.
+`,
+            },
+        },
+    },
+    tags: ["!dev", "autodocs"],
+    argTypes: {
+        data: {
+            description: `
+**Required.** An array of data objects representing your dataset. Each object should contain:
+- A category identifier (string/number) for the Y-axis.
+- One or more numeric values for the X-axis bars.
+`,
+            control: false,
+            table: {
+                type: { summary: "Array<Record<string, string | number>>" },
+                category: "📊 Data Configuration",
+            },
+        },
+        categoryKey: {
+            description: "**Required.** The key in your data object that represents the category for the Y-axis (e.g., 'region', 'department').",
+            control: false,
+            table: {
+                type: { summary: "string" },
+                category: "📊 Data Configuration",
+            },
+        },
+        theme: {
+            description: "Specifies the color palette for the chart's bars, tooltips, and legend. Ignored when customPalette is provided.",
+            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. Overrides the theme prop when provided.",
+            control: "object",
+            table: {
+                type: { summary: "string[]" },
+                category: "🎨 Visual Styling",
+            },
+        },
+        variant: {
+            description: "Defines how multiple data series are displayed: `grouped` (side-by-side) or `stacked` (on top of each other).",
+            control: "radio",
+            options: ["grouped", "stacked"],
+            table: {
+                defaultValue: { summary: "grouped" },
+                category: "🎨 Visual Styling",
+            },
+        },
+        radius: {
+            description: "Sets the corner radius for the bars, creating a rounded look.",
+            control: { type: "number", min: 0, max: 20 },
+            table: {
+                type: { summary: "number" },
+                defaultValue: { summary: "4" },
+                category: "🎨 Visual Styling",
+            },
+        },
+        icons: {
+            description: "An object mapping data series keys to React components to be used as icons in the legend.",
+            control: false,
+            table: {
+                type: { summary: "Record<string, React.ReactNode>" },
+                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",
+            },
+        },
+        showXAxis: {
+            description: "Toggles the visibility of the X-axis line and labels.",
+            control: "boolean",
+            table: {
+                defaultValue: { summary: "true" },
+                category: "📱 Display Options",
+            },
+        },
+        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",
+            },
+        },
+        isAnimationActive: {
+            description: "Enables or disables the initial loading animation for the bars.",
+            control: "boolean",
+            table: {
+                defaultValue: { summary: "false" },
+                category: "🎬 Animation & Interaction",
+            },
+        },
+        height: {
+            description: "Sets a fixed height for the chart container in pixels.",
+            control: "number",
+            table: {
+                type: { summary: "number" },
+                category: "Layout & Sizing",
+            },
+        },
+        width: {
+            description: "Sets a fixed width for the chart container in pixels.",
+            control: "number",
+            table: {
+                type: { summary: "number" },
+                category: "Layout & Sizing",
+            },
+        },
+    },
+};
+export default meta;
+/**
+ * ## Comprehensive Data Explorer
+ *
+ * This story serves as a comprehensive test suite for the HorizontalBarChart component.
+ * Use the buttons to switch between various datasets designed to test edge cases in:
+ *
+ * - **Data Volume**: Scenarios with few, many, or a single data point.
+ * - **Data Formatting**: Handling of large numbers and different value ranges.
+ * - **Legend Overflow**: A dataset with many series to test legend expand/collapse functionality.
+ *
+ * It's an excellent tool for developers to see how the chart behaves under different conditions.
+ */
+export const DataExplorer = {
+    name: "🎛️ Comprehensive Data Explorer",
+    args: {
+        data: horizontalBarChartData,
+        categoryKey: "category",
+        theme: "ocean",
+        variant: "grouped",
+        radius: 4,
+        grid: true,
+        isAnimationActive: false,
+        showXAxis: true,
+        legend: true,
+        height: 400,
+        width: 600,
+    },
+    render: (args) => {
+        const [selectedDataType, setSelectedDataType] = useState("default");
+        const currentData = dataVariations[selectedDataType];
+        const currentCategoryKey = categoryKeys[selectedDataType];
+        const buttonStyle = {
+            margin: "2px",
+            padding: "6px 12px",
+            fontSize: "12px",
+            border: "1px solid #ddd",
+            borderRadius: "4px",
+            cursor: "pointer",
+            background: "#fff",
+        };
+        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: "700px",
+                    }, children: [_jsx("strong", { children: "\uD83D\uDCA1 Quick Data Switch:" }), _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 (5 categories)" }), _jsx("button", { onClick: () => setSelectedDataType("small"), style: selectedDataType === "small" ? activeButtonStyle : buttonStyle, children: "\uD83D\uDCF1 Small (3 items)" }), _jsx("button", { onClick: () => setSelectedDataType("large"), style: selectedDataType === "large" ? activeButtonStyle : buttonStyle, children: "\uD83C\uDF10 Large (10 regions)" }), _jsx("button", { onClick: () => setSelectedDataType("simple"), style: selectedDataType === "simple" ? activeButtonStyle : buttonStyle, children: "\uD83C\uDFE2 Simple (4 departments)" }), _jsx("button", { onClick: () => setSelectedDataType("bigNumbers"), style: selectedDataType === "bigNumbers" ? activeButtonStyle : buttonStyle, children: "\uD83D\uDCB0 Big Numbers" }), _jsx("button", { onClick: () => setSelectedDataType("edge"), style: selectedDataType === "edge" ? activeButtonStyle : buttonStyle, children: "\uD83C\uDFAF Single Item" }), _jsx("button", { onClick: () => setSelectedDataType("singleGroup"), style: selectedDataType === "singleGroup" ? activeButtonStyle : buttonStyle, children: "\uD83C\uDF0D Single Group" }), _jsx("button", { onClick: () => setSelectedDataType("mixedPositiveNegative"), style: selectedDataType === "mixedPositiveNegative" ? activeButtonStyle : buttonStyle, children: "\uD83D\uDCC8 Mixed +/-" }), _jsx("button", { onClick: () => setSelectedDataType("expandCollapseChannels"), style: selectedDataType === "expandCollapseChannels" ? activeButtonStyle : buttonStyle, children: "\uD83D\uDD04 Marketing Channels" })] }), _jsxs("div", { style: { marginTop: "8px", fontSize: "12px", color: "#666" }, children: [_jsx("strong", { children: "Current:" }), " ", selectedDataType, " | ", _jsx("strong", { children: "Items:" }), " ", currentData.length, " | ", _jsx("strong", { children: "Category:" }), " ", currentCategoryKey] })] }), _jsx(Card, { style: { width: "700px" }, children: _jsx(HorizontalBarChart, { ...args, data: currentData, categoryKey: currentCategoryKey }) })] }));
+    },
+};
+// Basic stories using the new data structure
+export const Default = {
+    args: {
+        data: dataVariations.default,
+        categoryKey: "category",
+        theme: "ocean",
+        variant: "grouped",
+        height: 400,
+        width: 600,
+    },
+    render: (args) => (_jsx(Card, { style: { width: "600px" }, children: _jsx(HorizontalBarChart, { ...args }) })),
+};
+export const Stacked = {
+    args: {
+        data: dataVariations.default,
+        categoryKey: "category",
+        theme: "ocean",
+        variant: "stacked",
+        height: 400,
+        width: 600,
+    },
+    render: (args) => (_jsx(Card, { style: { width: "600px" }, children: _jsx(HorizontalBarChart, { ...args }) })),
+};
+export const WithAnimations = {
+    args: {
+        data: dataVariations.default,
+        categoryKey: "category",
+        theme: "ocean",
+        variant: "grouped",
+        isAnimationActive: true,
+        height: 400,
+        width: 600,
+    },
+    render: (args) => (_jsx(Card, { style: { width: "600px" }, children: _jsx(HorizontalBarChart, { ...args }) })),
+};
+export const CustomPalette = {
+    args: {
+        data: dataVariations.default,
+        categoryKey: "category",
+        customPalette: ["#FF6B6B", "#4ECDC4", "#45B7D1", "#96CEB4", "#FECA57"],
+        variant: "grouped",
+        height: 400,
+        width: 600,
+    },
+    render: (args) => (_jsx(Card, { style: { width: "600px" }, children: _jsx(HorizontalBarChart, { ...args }) })),
+};
+export const CustomPaletteVibrant = {
+    name: "🎨 Custom Palette - Vibrant",
+    args: {
+        data: dataVariations.default,
+        categoryKey: "category",
+        customPalette: ["#FF1744", "#00E676", "#2979FF", "#FF9100", "#9C27B0"],
+        variant: "grouped",
+        height: 400,
+        width: 600,
+    },
+    render: (args) => (_jsx(Card, { style: { width: "600px" }, children: _jsx(HorizontalBarChart, { ...args }) })),
+};
+export const BigNumbers = {
+    args: {
+        data: dataVariations.bigNumbers,
+        categoryKey: "company",
+        theme: "vivid",
+        variant: "grouped",
+        height: 400,
+        width: 600,
+    },
+    render: (args) => (_jsx(Card, { style: { width: "600px" }, children: _jsx(HorizontalBarChart, { ...args }) })),
+};
+export const LargeDataset = {
+    args: {
+        data: dataVariations.large,
+        categoryKey: "category",
+        theme: "emerald",
+        variant: "grouped",
+        height: 400,
+        width: 600,
+    },
+    render: (args) => (_jsx(Card, { style: { width: "600px" }, children: _jsx(HorizontalBarChart, { ...args }) })),
+};
+export const MixedPositiveNegative = {
+    name: "📈 Mixed Positive and Negative",
+    args: {
+        data: dataVariations.mixedPositiveNegative,
+        categoryKey: "category",
+        theme: "spectrum",
+        variant: "grouped",
+        height: 400,
+        width: 600,
+    },
+    render: (args) => (_jsx(Card, { style: { width: "600px" }, children: _jsx(HorizontalBarChart, { ...args }) })),
+};
+export const WithIcons = {
+    args: {
+        data: dataVariations.default,
+        categoryKey: "category",
+        theme: "ocean",
+        variant: "grouped",
+        height: 400,
+        width: 600,
+        icons: {
+            desktop: Monitor,
+            mobile: TabletSmartphone,
+        },
+    },
+    render: (args) => (_jsx(Card, { style: { width: "600px" }, children: _jsx(HorizontalBarChart, { ...args }) })),
+};
+//# sourceMappingURL=HorizontalBarChart.stories.js.map