@openuidev/react-ui 0.9.16

package/dist/components/Charts/BarChartCondensed/stories/barChartCondensed.stories.d.ts

@@ -0,0 +1,156 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { BarChartCondensed, BarChartCondensedProps } from "../BarChartCondensed";
+declare const barChartCondensedData: {
+    month: string;
+    desktop: number;
+    mobile: number;
+    tablet: number;
+}[];
+/**
+ * # BarChart Component Documentation
+ *
+ * The BarChart is a compact chart designed for space-constrained layouts
+ * like dashboards and sidebars. It's ideal for:
+ *
+ * - **Compact Dashboards**: Showing multiple metrics in limited space
+ * - **Sidebar Analytics**: Quick comparison visualization without taking up too much room
+ * - **Dense Data Display**: Efficiently showing many data points in a small area
+ *
+ * ## Key Features
+ *
+ * ### Space-Efficient Design
+ * - **Compact Height**: Default 200px height for tight layouts
+ * - **Minimal Legend**: Legend is compact and doesn't take up vertical space
+ * - **Adjustable Tick Variants**: Choose between horizontal or angled labels for better space usage
+ *
+ * ### Layout Variants
+ * - **Grouped**: Compare sub-categories side-by-side within a primary category
+ * - **Stacked**: Show how sub-categories contribute to a total value
+ *
+ * ### Flexible Label Handling
+ * - **Single Line Ticks**: Horizontal labels with automatic collision detection
+ * - **Angled Ticks**: Optimal rotation angle for longer labels that need more space
+ * - **Smart Angle Calculation**: Automatically calculates optimal rotation based on label width
+ *
+ * ### Interactive & Responsive
+ * - **Hover Tooltips**: Standard tooltip showing all data series
+ * - **Responsive Design**: Adapts fluidly to its container's size
+ *
+ * ### Customization
+ * - **Theming**: Comes with six pre-built color palettes
+ * - **Bar Styling**: Customize corner radius with the radius prop
+ * - **Styling Options**: Control grid visibility, axes, and more
+ */
+declare const meta: Meta<BarChartCondensedProps<typeof barChartCondensedData>>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * ## Comprehensive Data Explorer
+ *
+ * This story serves as a comprehensive test suite for the BarChartCondensed component.
+ * Use the buttons to switch between various datasets designed to test edge cases in:
+ *
+ * - **Label Handling**: Datasets with long, dense, or overlapping labels.
+ * - **Data Density**: Scenarios with few or many data points.
+ * - **Chart Variants**: Toggle between grouped and stacked layouts.
+ * - **Tick Variants**: Toggle between horizontal and angled label orientations.
+ *
+ * It's an excellent tool for developers to see how the chart behaves under different conditions.
+ */
+export declare const DataExplorer: Story;
+/**
+ * ## Large Dataset with Sidebar Tooltip
+ *
+ * This story demonstrates the sidebar tooltip feature that appears when you have
+ * more than 10 data series. Click on any bar in the chart to see the sidebar
+ * tooltip in action. This provides a better UX for viewing many data series at once.
+ */
+export declare const LargeDatasetWithSidebarTooltip: Story;
+/**
+ * ## Grouped vs Stacked Comparison
+ *
+ * Side-by-side comparison of grouped and stacked bar chart variants.
+ * This helps you choose the right variant for your data visualization needs.
+ */
+export declare const VariantComparison: Story;
+/**
+ * ## Big Labels with Angled Ticks
+ *
+ * This story demonstrates the chart's ability to handle very long category labels.
+ * The angled tick variant is particularly useful here for preventing label overlap.
+ */
+export declare const BigLabelsStory: Story;
+/**
+ * ## Company Names with Big Numbers
+ *
+ * This story tests the chart with real-world company names and very large numbers (billions/trillions).
+ * It demonstrates both label handling and number formatting capabilities.
+ */
+export declare const CompanyNamesStory: Story;
+/**
+ * ## Financial Quarters (Grouped)
+ *
+ * Standard financial reporting scenario with quarterly data in grouped layout.
+ */
+export declare const FinancialQuartersGrouped: Story;
+/**
+ * ## Financial Quarters (Stacked)
+ *
+ * Same financial data in stacked layout to show totals and composition.
+ */
+export declare const FinancialQuartersStacked: Story;
+/**
+ * ## Weekly Traffic Analytics
+ *
+ * Typical analytics dashboard data showing weekly traffic metrics.
+ */
+export declare const WeeklyTrafficStory: Story;
+/**
+ * ## Minimal Data
+ *
+ * A baseline test with a small dataset and standard-length labels.
+ */
+export declare const MinimalDataStory: Story;
+/**
+ * ## Custom Palette
+ *
+ * This story demonstrates how to use the customPalette prop to provide your own color scheme.
+ */
+export declare const CustomPaletteStory: Story;
+/**
+ * ## Radius Comparison
+ *
+ * Compare different corner radius values for the bars.
+ */
+export declare const RadiusComparison: Story;
+/**
+ * ## Tick Variant Comparison
+ *
+ * Side-by-side comparison of single-line (horizontal) and angled tick variants.
+ */
+export declare const TickVariantComparison: Story;
+/**
+ * ## Super Condensed Bar Chart
+ *
+ * This story demonstrates the chart with many data points in a very narrow container,
+ * creating extremely thin bars. This tests the minimum bar width logic and the
+ * automatic removal of rounded corners for bars thinner than 7px.
+ */
+export declare const SuperCondensedStory: Story;
+/**
+ * ## Responsive Behavior Demo
+ *
+ * This story demonstrates the responsive capabilities of the BarChartCondensed.
+ * Drag the handles on the container to resize it and observe how the chart adapts.
+ */
+export declare const ResponsiveBehaviorDemo: Story;
+/**
+ * 🎯 Bar Width Testing Playground
+ * Interactive story to test bar width calculations with various configurations:
+ * - Different data set sizes (few bars vs many bars)
+ * - Grouped vs Stacked variants
+ * - Max bar width constraint (prevents bars from being too wide)
+ * - Container width variations
+ */
+export declare const BarWidthPlayground: StoryObj<typeof BarChartCondensed>;
+//# sourceMappingURL=barChartCondensed.stories.d.ts.map

package/dist/components/Charts/BarChartCondensed/stories/barChartCondensed.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"barChartCondensed.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Charts/BarChartCondensed/stories/barChartCondensed.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAavD,OAAO,EAAE,iBAAiB,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AA+IjF,QAAA,MAAM,qBAAqB;;;;;GAAyB,CAAC;AAmBrD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,sBAAsB,CAAC,OAAO,qBAAqB,CAAC,CA0M3B,CAAC;AAE3C,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,YAAY,EAAE,KAiK1B,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,8BAA8B,EAAE,KAiI5C,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAgD/B,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,cAAc,EAAE,KA2B5B,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,EAAE,KA2B/B,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,wBAAwB,EAAE,KA2BtC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,wBAAwB,EAAE,KA2BtC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,EAAE,KA0BhC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,EAAE,KA0B9B,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,EAAE,KA2EhC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,EAAE,KA8D9B,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,qBAAqB,EAAE,KAkDnC,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,mBAAmB,EAAE,KA2EjC,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,sBAAsB,EAAE,KAyHpC,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,kBAAkB,EAAE,QAAQ,CAAC,OAAO,iBAAiB,CAiWjE,CAAC"}