import type { Meta, StoryObj } from "@storybook/react";
import { BarChartProps } from "../BarChart";
declare const barChartData: {
    month: string;
    desktop: number;
    mobile: number;
    tablet: number;
    laptop: number;
}[];
/**
 * # ScrollableBarChart Component Documentation
 *
 * The BarChart is a versatile component for comparing values across different categories.
 * It's highly effective for:
 *
 * - **Category Comparison**: Easily compare metrics like sales, users, or revenue across different groups.
 * - **Ranking**: Show the highest and lowest performing items in a dataset.
 * - **Data Over Time**: Visualize changes across discrete time intervals (e.g., monthly sales).
 *
 * ## 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
 * - **Horizontal Scrolling**: Automatically enables scrolling when the number of bars exceeds the container width.
 * - **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.
 */
declare const meta: Meta<BarChartProps<typeof barChartData>>;
export default meta;
type Story = StoryObj<typeof meta>;
/**
 * ## Comprehensive Data Explorer
 *
 * This story serves as a comprehensive test suite for the BarChart 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 declare const DataExplorer: Story;
/**
 * ## Small Dataset (No Scroll)
 *
 * This story demonstrates the BarChart's appearance with a small dataset.
 * When the number of bars fits within the container width, horizontal scrolling is disabled.
 */
export declare const SmallDataStory: Story;
/**
 * ## Large Dataset (With Scrolling)
 *
 * This story showcases the chart's horizontal scrolling capability.
 * When the total width of the bars exceeds the container's width, users can scroll to view all data points.
 */
export declare const LargeDataStory: Story;
/**
 * ## Weekly Data (Many Categories)
 *
 * Similar to the large dataset, this story tests the chart with a high number of categories,
 * which should trigger horizontal scrolling.
 */
export declare const WeeklyDataStory: Story;
/**
 * ## Big Numbers
 *
 * This story tests the chart's ability to handle and format very large numbers,
 * such as billions and trillions, on the Y-axis. The axis labels should be formatted
 * with appropriate suffixes (e.g., "B" for billion, "T" for trillion).
 */
export declare const BigNumbersStory: Story;
/**
 * ## Edge Case (Single Data Point)
 *
 * This story demonstrates how the chart renders with only a single data point.
 * It's a useful test to ensure that the layout and axes behave correctly in minimal-data scenarios.
 */
export declare const EdgeCaseStory: Story;
/**
 * ## Number Ranges (Scale Testing)
 *
 * This story tests the Y-axis scaling with data points of vastly different magnitudes.
 * The chart should automatically adjust its scale to accommodate all values appropriately.
 */
export declare const NumberRangesStory: Story;
/**
 * ## Legend Expand/Collapse
 *
 * Tests the legend's expand/collapse functionality with a large number of data series.
 * The legend should automatically show a "Show More" button when items overflow,
 * allowing users to toggle between a collapsed and expanded view.
 */
export declare const ExpandCollapseMarketingStory: Story;
/**
 * ## Custom Palette
 *
 * This story demonstrates how to use the customPalette prop to provide your own color scheme
 * for the chart. This is useful when you need to match your brand colors or create
 * specific visual themes.
 */
export declare const CustomPaletteStory: Story;
/**
 * ## Responsive Behavior Demo
 *
 * This story demonstrates the responsive capabilities of the BarChart. Drag the handles
 * on the container to resize it and observe how the chart adapts.
 *
 * **Responsive Features:**
 * - **Bar Sizing**: Bar widths and gaps adjust to the container size.
 * - **Layout Adaptation**: Chart elements are repositioned to fit the available space.
 * - **Legend Behavior**: The legend may wrap or show expand/collapse buttons as needed.
 */
export declare const ResponsiveBehaviorDemo: Story;
//# sourceMappingURL=barChart.stories.d.ts.map