import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from "react";
import { Card } from "../../../Card";
import { RadialChart } from "../RadialChart";
/**
 * Sample data sets for demonstrating various RadialChart configurations
 * These data structures represent common use cases in business applications
 */
// Basic monthly sales data - ideal for business dashboards
const monthlyRevenueData = [
    { month: "January", value: 1250 },
    { month: "February", value: 980 },
    { month: "March", value: 1450 },
    { month: "April", value: 1320 },
    { month: "May", value: 1680 },
    { month: "June", value: 2100 },
    { month: "July", value: 1950 },
    { month: "August", value: 1820 },
    { month: "September", value: 1650 },
    { month: "October", value: 1480 },
    { month: "November", value: 1350 },
    { month: "December", value: 1200 },
];
// Extended dataset for demonstrating carousel functionality
const comprehensiveFinancialData = [
    { category: "Base Salary", amount: 75000 },
    { category: "Q1 Bonus", amount: 8500 },
    { category: "Q2 Bonus", amount: 9200 },
    { category: "Q3 Bonus", amount: 7800 },
    { category: "Q4 Bonus", amount: 11000 },
    { category: "Holiday Pay", amount: 6500 },
    { category: "Overtime", amount: 4200 },
    { category: "Commission", amount: 8900 },
    { category: "Performance Incentive", amount: 7200 },
    { category: "Stock Options", amount: 12000 },
    { category: "Healthcare Benefits", amount: 4800 },
    { category: "Retirement Match", amount: 3600 },
    { category: "Professional Development", amount: 2400 },
    { category: "Transportation Allowance", amount: 1800 },
    { category: "Meal Vouchers", amount: 1200 },
];
// Custom color palette for demonstration
const customColorPalette = [
    "#0A0E60",
    "#14197B",
    "#272DA6",
    "#383FC9",
    "#444CE7",
    "#5F67F4",
    "#7884FF",
    "#97A9FF",
    "#B4C6FF",
    "#CBD7FF",
];
/**
 * # RadialChart Component Documentation
 *
 * The RadialChart component is a powerful and flexible visualization tool for displaying
 * categorical data in a circular format. It's particularly effective for showing:
 *
 * - **Proportional Relationships**: How different categories relate to each other
 * - **Part-to-Whole Analysis**: Understanding individual contributions to a total
 * - **Comparative Data**: Quickly comparing values across multiple categories
 * - **Dashboard Metrics**: Essential KPIs in executive dashboards
 *
 * ## Key Features
 *
 * ### Visual Variants
 * - **Circular**: Full 360-degree display for comprehensive data visualization
 * - **Semicircle**: Half-circle display for space-efficient layouts
 *
 * ### Data Formatting
 * - **Percentage Mode**: Automatically calculates and displays percentages
 * - **Number Mode**: Shows raw values with customizable formatting
 *
 * ### Interactive Elements
 * - **Responsive Legend**: Adapts to container size with carousel navigation
 * - **Hover States**: Interactive feedback for enhanced user experience
 * - **Animation Support**: Smooth transitions and loading animations
 *
 * ### Customization Options
 * - **Theme System**: Pre-built color palettes (ocean, orchid, emerald, sunset, spectrum, vivid)

 * - **Layout Flexibility**: Responsive design that adapts to container dimensions
 */
const meta = {
    title: "Components/Charts/RadialChart",
    component: RadialChart,
    parameters: {
        layout: "centered",
        docs: {
            description: {
                component: `
## Installation and Basic Usage

\`\`\`tsx
import { RadialChart } from '@openuidev/react-ui/Charts/RadialChart';

// Basic implementation
<RadialChart
  data={yourData}
  categoryKey="category"
  dataKey="value"
  theme="ocean"
  variant="circular"
/>
\`\`\`

## Data Structure Requirements

Your data should be an array of objects where each object contains:
- A **category field** (string): Used for labels and legend items
- A **value field** (number): Used to determine segment sizes

\`\`\`tsx
const exampleData = [
  { category: "Sales", value: 45000 },
  { category: "Marketing", value: 32000 },
  { category: "Operations", value: 28000 },
  { category: "Support", value: 15000 }
];
\`\`\`

## Performance Considerations

- **Data Size**: Optimized for 3-20 data points for best readability
- **Responsive**: Automatically adjusts to container dimensions
- **Animation**: Can be disabled 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)
- One or more numeric values

**Best Practices:**
- Use 3-12 data points for optimal readability
- Ensure consistent data structure across all objects
- Use meaningful category names for better user experience
      `,
            control: false,
            table: {
                type: { summary: "Array<Record<string, string | number>>" },
                defaultValue: { summary: "[]" },
                category: "📊 Data Configuration",
            },
        },
        categoryKey: {
            description: `
**Required.** Specifies which field in your data objects should be used as category labels.

**Examples:**
- "month" for time-series data
- "department" for organizational data  
- "product" for sales data
      `,
            control: false,
            table: {
                type: { summary: "string" },
                category: "📊 Data Configuration",
            },
        },
        dataKey: {
            description: `
**Required.** Specifies which field contains the numeric values for visualization.

**Examples:**
- "value", "amount", "revenue", "count"
- Values should be positive numbers
- Supports both integers and decimals
      `,
            control: false,
            table: {
                type: { summary: "string" },
                category: "📊 Data Configuration",
            },
        },
        theme: {
            description: `
**Color Theme Selection.** Choose from professionally designed color palettes:

- **ocean**: Cool blues and teals (professional, corporate)
- **orchid**: Purple and pink tones (creative, modern)  
- **emerald**: Green variations (nature, growth, finance)
- **sunset**: Warm oranges and reds (energy, attention-grabbing)
- **spectrum**: Full color range (diverse, comprehensive)
- **vivid**: High-contrast colors (accessibility, clarity)
      `,
            control: "select",
            options: ["ocean", "orchid", "emerald", "sunset", "spectrum", "vivid"],
            table: {
                defaultValue: { summary: "ocean" },
                category: "🎨 Visual Styling",
            },
        },
        customPalette: {
            description: `
**Custom Color Palette.** Override the theme colors with your own color array.

**Usage:**
- Provide an array of hex color strings
- Colors will be applied in order to chart segments
- Takes precedence over theme colors when provided
- Useful for brand-specific color requirements

**Example:**
\`["#FF6B6B", "#4ECDC4", "#45B7D1", "#96CEB4"]\`
      `,
            control: false,
            table: {
                type: { summary: "string[]" },
                defaultValue: { summary: "undefined" },
                category: "🎨 Visual Styling",
            },
        },
        variant: {
            description: `
**Chart Layout Style:**

- **circular**: Full 360° display - best for comprehensive data overview
- **semicircle**: Half-circle display - space-efficient for dashboards
      `,
            control: "radio",
            options: ["semicircle", "circular"],
            table: {
                defaultValue: { summary: "circular" },
                category: "🎨 Visual Styling",
            },
        },
        format: {
            description: `
**Data Display Format:**

- **percentage**: Automatically calculates percentages from your data
- **number**: Shows raw numeric values with smart formatting
      `,
            control: "radio",
            options: ["percentage", "number"],
            table: {
                defaultValue: { summary: "number" },
                category: "📱 Display Options",
            },
        },
        legend: {
            description: `
**Legend Visibility.** Controls whether the legend is displayed.

**When to disable:**
- Minimal dashboard widgets
- When labels are embedded in the chart
- Space-constrained layouts
      `,
            control: "boolean",
            table: {
                type: { summary: "boolean" },
                defaultValue: { summary: "true" },
                category: "📱 Display Options",
            },
        },
        legendVariant: {
            description: `
**Legend Layout Style:**

- **stacked**: Vertical layout with responsive behavior (recommended)
- **default**: Horizontal layout at bottom (classic style)
      `,
            control: "radio",
            options: ["default", "stacked"],
            table: {
                defaultValue: { summary: "stacked" },
                category: "📱 Display Options",
            },
        },
        grid: {
            description: `
**Polar Grid Lines.** Adds concentric circles for value reference.

**Use cases:**
- Data analysis and comparison
- Scientific or technical presentations
- When precise value reading is important
      `,
            control: "boolean",
            table: {
                type: { summary: "boolean" },
                defaultValue: { summary: "false" },
                category: "📱 Display Options",
            },
        },
        isAnimationActive: {
            description: `
**Animation Control.** Enables smooth loading and transition animations.

**Performance note:** Disable for large datasets or performance-critical applications.
      `,
            control: "boolean",
            table: {
                type: { summary: "boolean" },
                defaultValue: { summary: "true" },
                category: "🎬 Animation & Interaction",
            },
        },
        cornerRadius: {
            description: `
**Corner Rounding.** Controls the roundness of radial bar ends.

**Design impact:**
- 0: Sharp, technical appearance
- 5-10: Subtle modern look (recommended)
- 15+: Highly rounded, friendly appearance
      `,
            control: { type: "number", min: 0, max: 20 },
            table: {
                type: { summary: "number" },
                defaultValue: { summary: "10" },
                category: "🎨 Visual Styling",
            },
        },
        height: {
            description: "The height of the chart.",
            control: "text",
            table: {
                type: { summary: "string | number" },
                category: "📱 Display Options",
            },
        },
        width: {
            description: "The width of the chart.",
            control: "text",
            table: {
                type: { summary: "string | number" },
                category: "📱 Display Options",
            },
        },
    },
};
export default meta;
/**
 * ## Default Configuration
 *
 * This example demonstrates the RadialChart with its default settings - the most common
 * configuration for business dashboards and data visualization applications.
 *
 * **Key Features Shown:**
 * - Standard circular layout with full 360° display
 * - Professional ocean color theme
 * - Stacked legend for optimal space utilization
 * - Smooth animations for polished user experience
 * - Number format for clear value display
 */
export const DefaultConfiguration = {
    name: "📊 Default Configuration",
    args: {
        data: monthlyRevenueData,
        categoryKey: "month",
        dataKey: "value",
        theme: "ocean",
        variant: "circular",
        format: "number",
        legend: true,
        legendVariant: "stacked",
        grid: false,
        isAnimationActive: true,
        cornerRadius: 10,
    },
    render: (args) => (_jsxs(Card, { style: { width: "700px", height: "auto", padding: "24px" }, children: [_jsxs("div", { style: { marginBottom: "16px" }, children: [_jsx("h3", { style: { margin: "0 0 8px 0", fontSize: "18px", fontWeight: "600" }, children: "Monthly Revenue Analysis" }), _jsx("p", { style: { margin: 0, color: "#666", fontSize: "14px" }, children: "Comprehensive view of revenue distribution across 12 months" })] }), _jsx(RadialChart, { ...args })] })),
    parameters: {
        docs: {
            description: {
                story: `
This is the recommended starting configuration for most use cases. The chart displays data
in a clear, professional manner with optimal default settings for readability and user experience.

**Configuration Details:**
- **Data**: 12 months of revenue data
- **Layout**: Full circular display
- **Colors**: Ocean theme (blues and teals)
- **Legend**: Stacked layout for space efficiency
- **Animations**: Enabled for smooth interactions
        `,
            },
        },
    },
};
/**
 * ## Theme Showcase
 *
 * RadialChart includes six professionally designed color themes, each optimized
 * for different contexts and brand requirements.
 */
export const ThemeShowcase = {
    name: "🎨 Theme Variations",
    args: {
        data: monthlyRevenueData.slice(0, 6),
        categoryKey: "month",
        dataKey: "value",
        theme: "emerald",
        variant: "circular",
        format: "number",
        legend: true,
        legendVariant: "stacked",
        grid: false,
        isAnimationActive: true,
        cornerRadius: 10,
    },
    render: (args) => (_jsxs(Card, { style: { width: "600px", height: "auto", padding: "24px" }, children: [_jsxs("div", { style: { marginBottom: "20px" }, children: [_jsx("h3", { style: { margin: "0 0 8px 0", fontSize: "18px", fontWeight: "600" }, children: "Financial Growth Metrics" }), _jsx("p", { style: { margin: 0, color: "#666", fontSize: "14px" }, children: "Using the emerald theme for finance-related data visualization" })] }), _jsx(RadialChart, { ...args })] })),
    parameters: {
        docs: {
            description: {
                story: `
**Theme Selection Guide:**

- **Ocean** 🌊: Corporate, professional, trustworthy (recommended for business)
- **Orchid** 🌸: Creative, modern, innovative (great for design/marketing)
- **Emerald** 🍃: Growth, finance, nature (perfect for financial data)
- **Sunset** 🌅: Energy, attention, warmth (ideal for alerts/important metrics)
- **Spectrum** 🌈: Diverse, comprehensive (when you need many distinct colors)
- **Vivid** ⚡: High contrast, accessible (optimized for accessibility requirements)

**Best Practice:** Choose themes that align with your brand colors and data context.
        `,
            },
        },
    },
};
/**
 * ## Advanced Visual Enhancement
 *
 * This example showcases percentage formatting to create visually striking and informative charts.
 */
export const VisualEnhancement = {
    name: "✨ Visual Enhancement",
    args: {
        data: monthlyRevenueData.slice(0, 6),
        categoryKey: "month",
        dataKey: "value",
        theme: "sunset",
        variant: "circular",
        format: "percentage",
        legend: true,
        legendVariant: "stacked",
        grid: false,
        isAnimationActive: true,
        cornerRadius: 15,
    },
    render: (args) => (_jsxs(Card, { style: { width: "500px", padding: "24px" }, children: [_jsxs("div", { style: { marginBottom: "20px" }, children: [_jsx("h3", { style: { margin: "0 0 8px 0", fontSize: "18px", fontWeight: "600" }, children: "Revenue Distribution" }), _jsx("p", { style: { margin: 0, color: "#666", fontSize: "14px" }, children: "Enhanced with percentage display" })] }), _jsx(RadialChart, { ...args })] })),
    parameters: {
        docs: {
            description: {
                story: `
**Visual Enhancement Features:**

- **Percentage Display**: Shows data as percentages for better comparison
- **Modern Aesthetic**: Aligns with contemporary design trends  
- **Theme Integration**: Uses theme colors for consistent visual design
- **Performance Optimized**: Efficiently rendered for smooth interactions

**When to Use Percentage Format:**
- Executive dashboards and presentations
- Marketing materials and public-facing reports
- When relative comparisons are important
- With 3-8 data points for optimal readability

**Technical Note:** Percentages are automatically calculated from the data values,
providing clear relative comparisons across all chart segments.
        `,
            },
        },
    },
};
/**
 * ## Custom Color Palette
 *
 * This example demonstrates how to use a custom color palette to override
 * the default theme colors with brand-specific or custom color schemes.
 */
export const CustomPalette = {
    name: "🎨 Custom Color Palette",
    args: {
        data: monthlyRevenueData.slice(0, 8),
        categoryKey: "month",
        dataKey: "value",
        customPalette: customColorPalette,
        variant: "circular",
        format: "number",
        legend: true,
        legendVariant: "stacked",
        grid: false,
        isAnimationActive: true,
        cornerRadius: 12,
    },
    render: (args) => (_jsxs(Card, { style: { width: "600px", padding: "24px" }, children: [_jsxs("div", { style: { marginBottom: "20px" }, children: [_jsx("h3", { style: { margin: "0 0 8px 0", fontSize: "18px", fontWeight: "600" }, children: "Brand-Specific Color Scheme" }), _jsx("p", { style: { margin: 0, color: "#666", fontSize: "14px" }, children: "Using custom colors that align with your brand identity" })] }), _jsx(RadialChart, { ...args }), _jsxs("div", { style: {
                    marginTop: "16px",
                    padding: "12px",
                    backgroundColor: "#f8f9fa",
                    borderRadius: "6px",
                    fontSize: "12px",
                    color: "#666",
                }, children: [_jsx("strong", { children: "\uD83C\uDFA8 Custom Palette:" }), " ", customColorPalette.slice(0, 8).map((color, index) => (_jsx("span", { style: {
                            display: "inline-block",
                            width: "16px",
                            height: "16px",
                            backgroundColor: color,
                            borderRadius: "3px",
                            marginLeft: "4px",
                            marginRight: "4px",
                            border: "1px solid #ddd",
                            verticalAlign: "middle",
                        } }, index)))] })] })),
    parameters: {
        docs: {
            description: {
                story: `
**Custom Palette Features:**

- **Brand Alignment**: Use your exact brand colors for consistent visual identity
- **Override Themes**: Takes precedence over theme-based color selection
- **Flexible Array**: Provide any number of colors - they'll cycle automatically for larger datasets
- **Hex Color Support**: Standard hex color format (#RRGGBB)

**Implementation Example:**
\`\`\`tsx
const brandColors = [
  "#FF6B6B", // Primary brand color
  "#4ECDC4", // Secondary brand color
  "#45B7D1", // Accent color 1
  "#96CEB4", // Accent color 2
  // ... more colors as needed
];

<RadialChart
  data={data}
  categoryKey="category"
  dataKey="value"
  customPalette={brandColors}
/>
\`\`\`

**Best Practices:**
- Ensure sufficient contrast between adjacent colors
- Test color accessibility for users with color vision differences
- Provide at least as many colors as data points for optimal display
- Consider color psychology and brand associations when selecting colors

**Technical Notes:**
- Colors are applied in array order to data segments
- If fewer colors than data points, colors will cycle automatically
        `,
            },
        },
    },
};
/**
 * ## Large Dataset Management
 *
 * When working with extensive datasets, RadialChart provides intelligent
 * legend management with carousel navigation to maintain usability.
 */
export const LargeDatasetDemo = {
    name: "📈 Large Dataset with Carousel",
    args: {
        data: comprehensiveFinancialData,
        categoryKey: "category",
        dataKey: "amount",
        theme: "spectrum",
        variant: "circular",
        format: "number",
        legend: true,
        legendVariant: "stacked",
        grid: false,
        isAnimationActive: true,
        cornerRadius: 8,
    },
    render: (args) => (_jsxs(Card, { style: { width: "700px", height: "auto", padding: "24px" }, children: [_jsxs("div", { style: { marginBottom: "20px" }, children: [_jsx("h3", { style: { margin: "0 0 8px 0", fontSize: "18px", fontWeight: "600" }, children: "Comprehensive Compensation Analysis" }), _jsx("p", { style: { margin: 0, color: "#666", fontSize: "14px" }, children: "Complete breakdown of 15 compensation categories with carousel navigation" })] }), _jsx(RadialChart, { ...args }), _jsxs("div", { style: {
                    marginTop: "16px",
                    padding: "12px",
                    backgroundColor: "#f8f9fa",
                    borderRadius: "6px",
                    fontSize: "12px",
                    color: "#666",
                }, children: [_jsx("strong", { children: "\uD83D\uDCA1 Carousel Feature:" }), " When legend items exceed available space, up/down navigation arrows automatically appear. Use the arrows to scroll through all legend items while maintaining chart visibility."] })] })),
    parameters: {
        docs: {
            description: {
                story: `
**Large Dataset Management:**

**Automatic Carousel Detection:**
- Activates when legend content exceeds container height
- Provides smooth scrolling navigation
- Maintains chart proportions and visibility

**Navigation Features:**
- **Up/Down Arrows**: Navigate through legend items
- **Smooth Scrolling**: Polished user experience
- **Visual Indicators**: Clear navigation state

**Performance Optimizations:**
- Virtual scrolling for datasets with 50+ items
- Efficient rendering of visible legend items only
- Optimized color cycling for unlimited data points

**Best Practices for Large Datasets:**
- Consider data aggregation for better readability
- Use meaningful category names
- Test carousel functionality in your target container sizes
- Consider alternative visualizations for 25+ categories
        `,
            },
        },
    },
};
/**
 * ## Interactive Responsiveness Demo
 *
 * This advanced example demonstrates RadialChart's responsive capabilities
 * with a resizable container to show real-time adaptation.
 */
export const ResponsiveDemo = {
    name: "📱 Responsive Behavior Demo",
    args: {
        data: monthlyRevenueData,
        categoryKey: "month",
        dataKey: "value",
        theme: "spectrum",
        variant: "circular",
        format: "number",
        legend: true,
        legendVariant: "stacked",
        isAnimationActive: false,
        cornerRadius: 8,
    },
    render: (args) => {
        const [dimensions, setDimensions] = useState({
            width: 650,
            height: "auto",
        });
        const handleMouseDown = (e, handle) => {
            e.preventDefault();
            e.stopPropagation();
            const startX = e.clientX;
            const startY = e.clientY;
            const startWidth = dimensions.width;
            const startHeight = e.currentTarget.parentElement.offsetHeight;
            const doDrag = (e) => {
                const dx = e.clientX - startX;
                const dy = e.clientY - startY;
                let newWidth = startWidth;
                let newHeight = startHeight;
                if (handle.includes("e"))
                    newWidth = startWidth + dx;
                if (handle.includes("w"))
                    newWidth = startWidth - dx;
                if (handle.includes("s"))
                    newHeight = startHeight + dy;
                if (handle.includes("n"))
                    newHeight = startHeight - dy;
                setDimensions({
                    width: Math.max(300, newWidth),
                    height: "auto",
                });
            };
            const stopDrag = () => {
                document.removeEventListener("mousemove", doDrag);
                document.removeEventListener("mouseup", stopDrag);
            };
            document.addEventListener("mousemove", doDrag);
            document.addEventListener("mouseup", stopDrag);
        };
        const handleStyle = {
            position: "absolute",
            background: "#3b82f6",
            opacity: 0.6,
            zIndex: 10,
            transition: "opacity 0.2s ease",
        };
        return (_jsxs("div", { style: { padding: "20px" }, children: [_jsxs("div", { style: { marginBottom: "20px" }, children: [_jsx("h3", { style: { margin: "0 0 8px 0", fontSize: "18px", fontWeight: "600" }, children: "Responsive Behavior Demonstration" }), _jsx("p", { style: { margin: "0 0 12px 0", color: "#666", fontSize: "14px" }, children: "Drag the edges or corners of the container below to see how the chart adapts" }), _jsxs("div", { style: {
                                padding: "12px",
                                backgroundColor: "#e3f2fd",
                                borderRadius: "6px",
                                fontSize: "12px",
                                color: "#1565c0",
                            }, children: [_jsx("strong", { children: "\uD83C\uDFAF Try This:" }), " Resize the container to see automatic legend layout changes, chart proportion adjustments, and responsive breakpoint behaviors."] })] }), _jsxs(Card, { style: {
                        position: "relative",
                        width: `${dimensions.width}px`,
                        height: typeof dimensions.height === "number" ? `${dimensions.height}px` : dimensions.height,
                        border: "2px dashed #9ca3af",
                        padding: "20px",
                        boxSizing: "border-box",
                        overflow: "hidden",
                        cursor: "default",
                    }, children: [_jsx(RadialChart, { ...args }), _jsx("div", { style: { ...handleStyle, top: -2, left: 0, right: 0, height: 12, cursor: "ns-resize" }, onMouseDown: (e) => handleMouseDown(e, "n") }), _jsx("div", { style: {
                                ...handleStyle,
                                bottom: -2,
                                left: 0,
                                right: 0,
                                height: 12,
                                cursor: "ns-resize",
                            }, onMouseDown: (e) => handleMouseDown(e, "s") }), _jsx("div", { style: { ...handleStyle, top: 0, bottom: 0, left: -2, width: 12, cursor: "ew-resize" }, onMouseDown: (e) => handleMouseDown(e, "w") }), _jsx("div", { style: { ...handleStyle, top: 0, bottom: 0, right: -2, width: 12, cursor: "ew-resize" }, onMouseDown: (e) => handleMouseDown(e, "e") }), _jsx("div", { style: {
                                ...handleStyle,
                                top: -2,
                                left: -2,
                                width: 20,
                                height: 20,
                                cursor: "nwse-resize",
                                borderRadius: "2px",
                            }, onMouseDown: (e) => handleMouseDown(e, "nw") }), _jsx("div", { style: {
                                ...handleStyle,
                                top: -2,
                                right: -2,
                                width: 20,
                                height: 20,
                                cursor: "nesw-resize",
                                borderRadius: "2px",
                            }, onMouseDown: (e) => handleMouseDown(e, "ne") }), _jsx("div", { style: {
                                ...handleStyle,
                                bottom: -2,
                                right: -2,
                                width: 20,
                                height: 20,
                                cursor: "nwse-resize",
                                borderRadius: "2px",
                            }, onMouseDown: (e) => handleMouseDown(e, "se") }), _jsxs("div", { style: {
                                position: "absolute",
                                bottom: 8,
                                right: 8,
                                background: "rgba(0,0,0,0.8)",
                                color: "white",
                                padding: "4px 8px",
                                borderRadius: "4px",
                                fontSize: "11px",
                                fontFamily: "monospace",
                                fontWeight: "500",
                            }, children: [dimensions.width, "px \u00D7", " ", typeof dimensions.height === "number" ? `${dimensions.height}px` : "auto"] })] }), _jsxs("div", { style: {
                        marginTop: "16px",
                        padding: "12px",
                        backgroundColor: "#f8f9fa",
                        borderRadius: "6px",
                        fontSize: "12px",
                        color: "#666",
                    }, children: [_jsx("strong", { children: "\uD83D\uDCCA Responsive Features Demonstrated:" }), _jsxs("ul", { style: { margin: "8px 0 0 0", paddingLeft: "16px" }, children: [_jsx("li", { children: "Automatic chart scaling and proportion maintenance" }), _jsx("li", { children: "Legend layout adaptation (stacked \u2194 horizontal)" }), _jsx("li", { children: "Text size and spacing adjustments" }), _jsx("li", { children: "Optimal space utilization at any container size" })] })] })] }));
    },
    parameters: {
        docs: {
            description: {
                story: `
**Responsive Design Philosophy:**

**Automatic Adaptation:**
- Chart dimensions automatically adjust to container size
- Legend layout switches between horizontal and stacked based on available space
- Text and spacing scale appropriately for readability

**Breakpoint Behavior:**
- **Large Containers (>600px)**: Side-by-side chart and legend layout
- **Medium Containers (400-600px)**: Stacked layout with optimized proportions  
- **Small Containers (<400px)**: Compact layout with essential elements only

**Performance Optimizations:**
- Efficient re-rendering during resize operations
- Debounced resize calculations to prevent performance issues
- Optimized SVG scaling for crisp display at any size

**Implementation Notes:**
- Uses ResizeObserver API for precise container size detection
- Maintains aspect ratios while maximizing space utilization
- Supports both fixed and flexible container sizing strategies
        `,
            },
        },
    },
};
//# sourceMappingURL=RadialChart.stories.js.map