import React$1 from 'react'; type ColorValue = string; type ColorArray = string[]; type ColorFunction = (index: number, value: number) => string; type DynamicColor = ColorValue | ColorArray | ColorFunction; type DataValue = number | [number, number]; type DataArray = DataValue[]; interface DatasetConfig { /** Label for the dataset (shown in legend) */ label: string; /** Data values for this dataset */ data: DataArray; /** Background color(s) for bars */ backgroundColor?: DynamicColor; /** Border color(s) for bars */ borderColor?: DynamicColor; /** Border width in pixels */ borderWidth?: number; /** Border radius for bars (all corners or individual) */ borderRadius?: number | BorderRadiusConfig; /** Hover background color */ hoverBackgroundColor?: DynamicColor; /** Hover border color */ hoverBorderColor?: DynamicColor; /** Stack group identifier (for stacked charts) */ stack?: string; /** Bar thickness in pixels (auto if not specified) */ barThickness?: number; /** Maximum bar thickness */ maxBarThickness?: number; /** Minimum bar length (useful for small values) */ minBarLength?: number; /** Whether to show this dataset */ hidden?: boolean; /** Order for drawing (lower = drawn first) */ order?: number; /** Opacity (0-1) */ opacity?: number; } interface BorderRadiusConfig { topLeft?: number; topRight?: number; bottomLeft?: number; bottomRight?: number; } interface AxisConfig { /** Display the axis */ display?: boolean; /** Axis title configuration */ title?: { display?: boolean; text?: string; color?: string; fontSize?: number; fontWeight?: string | number; fontFamily?: string; padding?: number; }; /** Grid line configuration */ grid?: { display?: boolean; color?: string; lineWidth?: number; dashArray?: string; }; /** Tick configuration */ ticks?: { display?: boolean; color?: string; fontSize?: number; fontFamily?: string; padding?: number; maxTicksLimit?: number; stepSize?: number; callback?: (value: number, index: number) => string; }; /** Minimum value */ min?: number; /** Maximum value */ max?: number; /** Begin axis at zero */ beginAtZero?: boolean; /** Axis position */ position?: 'top' | 'left' | 'bottom' | 'right'; } interface FontConfig { family?: string; size?: number; weight?: 'normal' | 'bold' | 'lighter' | 'bolder' | number; style?: 'normal' | 'italic'; } interface PaddingConfig { top?: number; right?: number; bottom?: number; left?: number; } interface LegendConfig { /** Display the legend */ display?: boolean; /** Position of the legend */ position?: 'top' | 'left' | 'bottom' | 'right'; /** Alignment of the legend */ align?: 'start' | 'center' | 'end'; /** Label configuration */ labels?: { color?: string; fontSize?: number; fontFamily?: string; padding?: number; boxWidth?: number; boxHeight?: number; usePointStyle?: boolean; }; /** On click handler */ onClick?: (datasetIndex: number, dataset: DatasetConfig) => void; } interface TooltipConfig { /** Enable tooltips */ enabled?: boolean; /** Background color */ backgroundColor?: string; /** Text color */ textColor?: string; /** Font size */ fontSize?: number; /** Font family */ fontFamily?: string; /** Border color */ borderColor?: string; /** Border width */ borderWidth?: number; /** Corner radius */ cornerRadius?: number; /** Padding */ padding?: number; /** Custom format function */ formatter?: (value: DataValue, datasetLabel: string, label: string) => string; } interface AnimationConfig { /** Enable animations */ enabled?: boolean; /** Animation duration in ms */ duration?: number; /** Easing function */ easing?: 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | string; /** Delay before animation starts */ delay?: number; /** Stagger delay between bars */ staggerDelay?: number; } interface BaseChartProps { /** Labels for the x-axis (categories) */ labels: string[]; /** Dataset configurations */ datasets: DatasetConfig[]; /** Chart title */ title?: string | { text: string; color?: string; fontSize?: number; fontWeight?: string | number; fontFamily?: string; align?: 'start' | 'center' | 'end'; padding?: number; }; /** X-axis configuration */ xAxis?: AxisConfig; /** Y-axis configuration */ yAxis?: AxisConfig; /** Legend configuration */ legend?: LegendConfig; /** Tooltip configuration */ tooltip?: TooltipConfig; /** Animation configuration */ animation?: AnimationConfig | boolean; /** Chart width (CSS value or number for pixels) */ width?: string | number; /** Chart height (CSS value or number for pixels) */ height?: string | number; /** Chart padding */ padding?: PaddingConfig | number; /** Chart background color */ backgroundColor?: string; /** Callback on bar click */ onBarClick?: (event: React.MouseEvent, data: BarClickData) => void; /** Callback on bar hover */ onBarHover?: (event: React.MouseEvent, data: BarClickData | null) => void; /** Additional CSS class name */ className?: string; /** Additional CSS styles */ style?: React.CSSProperties; /** Chart ID */ id?: string; /** Aria label for accessibility */ ariaLabel?: string; /** Show values on bars */ showValues?: boolean; /** Value label configuration */ valueLabels?: { color?: string; fontSize?: number; fontFamily?: string; position?: 'inside' | 'outside' | 'center'; formatter?: (value: number) => string; }; } interface BarClickData { datasetIndex: number; dataIndex: number; value: DataValue; label: string; datasetLabel: string; } interface BarChartProps extends BaseChartProps { /** Default border radius for all bars */ borderRadius?: number | BorderRadiusConfig; /** Orientation: vertical or horizontal */ orientation?: 'vertical' | 'horizontal'; /** Bar gap (spacing between bars in a group) */ barGap?: number; /** Group gap (spacing between groups) */ groupGap?: number; } interface HorizontalBarChartProps extends BaseChartProps { /** Default border radius for all bars */ borderRadius?: number | BorderRadiusConfig; /** Bar gap (spacing between bars in a group) */ barGap?: number; /** Group gap (spacing between groups) */ groupGap?: number; } interface StackedBarChartProps extends BaseChartProps { /** Default border radius for all bars */ borderRadius?: number | BorderRadiusConfig; /** Orientation: vertical or horizontal */ orientation?: 'vertical' | 'horizontal'; /** Group gap (spacing between groups) */ groupGap?: number; } interface StackedBarChartWithGroupsProps extends BaseChartProps { /** Default border radius for all bars */ borderRadius?: number | BorderRadiusConfig; /** Orientation: vertical or horizontal */ orientation?: 'vertical' | 'horizontal'; /** Group gap (spacing between stack groups) */ groupGap?: number; /** Stack gap (spacing between stacks) */ stackGap?: number; } interface FloatingBarChartProps extends BaseChartProps { /** Default border radius for all bars */ borderRadius?: number | BorderRadiusConfig; /** Orientation: vertical or horizontal */ orientation?: 'vertical' | 'horizontal'; /** Bar gap (spacing between bars in a group) */ barGap?: number; /** Group gap (spacing between groups) */ groupGap?: number; } interface VerticalBarChartProps extends BaseChartProps { /** Default border radius for all bars */ borderRadius?: number | BorderRadiusConfig; /** Bar gap (spacing between bars in a group) */ barGap?: number; /** Group gap (spacing between groups) */ groupGap?: number; } interface ThemeConfig { /** Primary color palette */ colors?: string[]; /** Font family */ fontFamily?: string; /** Base font size */ fontSize?: number; /** Grid color */ gridColor?: string; /** Text color */ textColor?: string; /** Background color */ backgroundColor?: string; /** Border radius */ borderRadius?: number; /** Tooltip background */ tooltipBackground?: string; /** Tooltip text color */ tooltipTextColor?: string; /** Axis line color */ axisColor?: string; } type PresetTheme = 'default' | 'vibrant' | 'pastel' | 'monochrome' | 'dark' | 'ocean' | 'sunset' | 'forest' | 'candy' | 'corporate'; interface ChartDimensions { width: number; height: number; chartWidth: number; chartHeight: number; padding: Required; } interface ScaleConfig { min: number; max: number; step: number; ticks: number[]; } interface BarRect { x: number; y: number; width: number; height: number; value: DataValue; label: string; datasetIndex: number; dataIndex: number; color: string; borderColor?: string; borderWidth?: number; borderRadius?: number | BorderRadiusConfig; opacity?: number; } interface BarChartComponentProps extends BarChartProps { /** Preset theme name */ theme?: PresetTheme; /** Custom theme configuration */ themeConfig?: ThemeConfig; } /** * BarChart Component * * A highly customizable, accessible bar chart built with pure SVG. * Supports vertical and horizontal orientations. * Fully responsive with mobile-optimized rendering. * * @example * ```tsx * * ``` */ declare const BarChart: React$1.FC; interface HorizontalBarChartComponentProps extends HorizontalBarChartProps { /** Preset theme name */ theme?: PresetTheme; /** Custom theme configuration */ themeConfig?: ThemeConfig; } /** * HorizontalBarChart Component * * A horizontal bar chart optimized for comparing values across categories. * This is a convenience wrapper around BarChart with orientation="horizontal". * * Perfect for: * - Comparing quantities across categories * - Displaying rankings or leaderboards * - Showing data with long category names * * @example * ```tsx * * ``` */ declare const HorizontalBarChart: React$1.FC; interface VerticalBarChartComponentProps extends VerticalBarChartProps { /** Preset theme name */ theme?: PresetTheme; /** Custom theme configuration */ themeConfig?: ThemeConfig; } /** * VerticalBarChart Component * * A classic vertical bar chart component for displaying categorical data. * This is a convenience wrapper around BarChart with orientation="vertical". * * @example * ```tsx * * ``` */ declare const VerticalBarChart: React$1.FC; interface StackedBarChartComponentProps extends StackedBarChartProps { /** Preset theme name */ theme?: PresetTheme; /** Custom theme configuration */ themeConfig?: ThemeConfig; } /** * StackedBarChart Component * * A stacked bar chart that shows the composition of data across categories. * All datasets are stacked on top of each other. * Fully responsive with mobile-optimized rendering. * * @example * ```tsx * * ``` */ declare const StackedBarChart: React$1.FC; interface StackedBarChartWithGroupsComponentProps extends StackedBarChartWithGroupsProps { /** Preset theme name */ theme?: PresetTheme; /** Custom theme configuration */ themeConfig?: ThemeConfig; } /** * StackedBarChartWithGroups Component * * A stacked bar chart that supports multiple stack groups side by side. * Use the `stack` property on each dataset to assign them to different groups. * Fully responsive with mobile-optimized rendering. * * @example * ```tsx * * ``` */ declare const StackedBarChartWithGroups: React$1.FC; interface FloatingBarChartComponentProps extends FloatingBarChartProps { /** Preset theme name */ theme?: PresetTheme; /** Custom theme configuration */ themeConfig?: ThemeConfig; } /** * FloatingBarChart Component * * A bar chart where bars can "float" - they don't have to start from zero. * Each data point is specified as [start, end] to define the bar's range. * Fully responsive with mobile-optimized rendering. * * Perfect for: * - Gantt-style charts * - Range visualization * - Showing intervals or periods * - Temperature ranges (min/max) * * @example * ```tsx * * ``` */ declare const FloatingBarChart: React$1.FC; interface ChartContainerProps { width?: string | number; height?: string | number; minHeight?: number; padding?: PaddingConfig | number; backgroundColor?: string; className?: string; style?: React$1.CSSProperties; id?: string; ariaLabel?: string; ariaDescribedBy?: string; title?: string; children: (dimensions: ChartDimensions, svgRef: React$1.RefObject, isMobile: boolean) => React$1.ReactNode; } /** * ChartContainer - Responsive SVG container that calculates dimensions * Follows WCAG 2.1 accessibility guidelines */ declare const ChartContainer: React$1.FC; interface AxisProps { type: 'x' | 'y'; config: AxisConfig; scale: ScaleConfig; dimensions: ChartDimensions; labels?: string[]; orientation?: 'vertical' | 'horizontal'; isMobile?: boolean; } /** * Axis component - Renders axis line, ticks, and labels * Responsive font sizing for mobile */ declare const Axis: React$1.FC; interface BarProps { x: number; y: number; width: number; height: number; fill: string; stroke?: string; strokeWidth?: number; borderRadius?: number | BorderRadiusConfig; opacity?: number; animation?: AnimationConfig; animationDelay?: number; datasetIndex: number; dataIndex: number; value: number | [number, number]; label: string; datasetLabel: string; onClick?: (event: React$1.MouseEvent, data: BarClickData) => void; onHover?: (event: React$1.MouseEvent, data: BarClickData | null, mousePos?: { x: number; y: number; }) => void; hoverFill?: string; hoverStroke?: string; className?: string; isMobile?: boolean; } /** * Bar component - A single bar in the chart * Accessible with ARIA attributes and keyboard support */ declare const Bar: React$1.FC; interface LegendProps { config: LegendConfig; datasets: DatasetConfig[]; colors: string[]; dimensions: ChartDimensions; onToggleDataset?: (index: number) => void; isMobile?: boolean; } /** * Legend component - Displays dataset labels with color indicators * Fully accessible with keyboard navigation */ declare const Legend: React$1.FC; interface TooltipData { x: number; y: number; value: DataValue; label: string; datasetLabel: string; color: string; mouseX?: number; mouseY?: number; } interface TooltipProps { config: TooltipConfig; data: TooltipData | null; dimensions: ChartDimensions; containerRef: React$1.RefObject; } /** * Tooltip component - Displays information on hover * Follows cursor position exactly * Accessible and responsive */ declare const Tooltip: React$1.FC; interface TitleConfig { text: string; color?: string; fontSize?: number; fontWeight?: string | number; fontFamily?: string; align?: 'start' | 'center' | 'end'; padding?: number; } interface TitleProps { config: string | TitleConfig | undefined; dimensions: ChartDimensions; defaultColor?: string; defaultFontFamily?: string; } /** * Title component - Renders chart title */ declare const Title: React$1.FC; declare const colorPalettes: { default: string[]; vibrant: string[]; pastel: string[]; monochrome: string[]; dark: string[]; ocean: string[]; sunset: string[]; forest: string[]; candy: string[]; corporate: string[]; }; declare const UNISYS_FONT_FAMILY = "'Unisys', 'Segoe UI', 'Helvetica Neue', 'Arial', sans-serif"; declare const themes: Record; /** * Get a color palette by name */ declare const getColorPalette: (name: PresetTheme) => string[]; /** * Get a theme configuration by name */ declare const getTheme: (name: PresetTheme) => ThemeConfig; /** * Generate colors with opacity */ declare const withOpacity: (color: string, opacity: number) => string; /** * Lighten a color */ declare const lighten: (color: string, amount: number) => string; /** * Darken a color */ declare const darken: (color: string, amount: number) => string; /** * Parse a color string to RGB */ declare const parseColor: (color: string) => { r: number; g: number; b: number; a?: number; } | null; /** * Generate gradient colors between two colors */ declare const generateGradient: (startColor: string, endColor: string, steps: number) => string[]; /** * Get contrasting text color (black or white) based on background */ declare const getContrastColor: (backgroundColor: string) => string; /** * Cycle through colors for datasets */ declare const getDatasetColor: (index: number, palette?: string[]) => string; /** * Generate hover color (slightly darker or more opaque) */ declare const getHoverColor: (color: string) => string; /** * Resolve dynamic color to a string */ declare const resolveColor: (color: string | string[] | ((index: number, value: number) => string) | undefined, index: number, value: number, fallback: string) => string; declare const defaultPadding: Required; declare const defaultFontFamily = "'Unisys', 'Segoe UI', 'Helvetica Neue', 'Arial', sans-serif"; declare const defaultAxisConfig: AxisConfig; declare const defaultLegendConfig: LegendConfig; declare const defaultTooltipConfig: TooltipConfig; declare const defaultAnimationConfig: AnimationConfig; declare const mergePadding: (padding: PaddingConfig | number | undefined, defaults?: Required) => Required; declare const mergeAxisConfig: (config: AxisConfig | undefined, defaults?: AxisConfig, theme?: ThemeConfig) => AxisConfig; declare const mergeLegendConfig: (config: LegendConfig | undefined, defaults?: LegendConfig, theme?: ThemeConfig) => LegendConfig; declare const mergeTooltipConfig: (config: TooltipConfig | undefined, defaults?: TooltipConfig, theme?: ThemeConfig) => TooltipConfig; declare const mergeAnimationConfig: (config: AnimationConfig | boolean | undefined, defaults?: AnimationConfig) => AnimationConfig; /** * Get default theme or custom theme */ declare const getActiveTheme: (themeName?: string, customTheme?: ThemeConfig) => ThemeConfig; /** * Get the numeric value from a data point */ declare const getNumericValue: (value: DataValue) => number; /** * Get the minimum value from a data point (for floating bars) */ declare const getMinValue: (value: DataValue) => number; /** * Get the maximum value from a data point */ declare const getMaxValue: (value: DataValue) => number; /** * Calculate nice tick values for an axis */ declare const calculateNiceTicks: (min: number, max: number, maxTicks?: number) => number[]; /** * Calculate scale configuration from datasets */ declare const calculateScale: (datasets: DatasetConfig[], options?: { min?: number; max?: number; beginAtZero?: boolean; maxTicks?: number; stacked?: boolean; }) => ScaleConfig; /** * Convert a value to a position on the chart */ declare const valueToPosition: (value: number, scale: ScaleConfig, size: number, inverted?: boolean) => number; /** * Convert a position to a value */ declare const positionToValue: (position: number, scale: ScaleConfig, size: number, inverted?: boolean) => number; /** * Format a number for display */ declare const formatValue: (value: number, options?: { decimals?: number; prefix?: string; suffix?: string; thousandsSeparator?: string; }) => string; /** * Generate SVG path for a rounded rectangle */ declare const roundedRectPath: (x: number, y: number, width: number, height: number, borderRadius?: number | BorderRadiusConfig) => string; /** * Generate border radius for top of bar only (vertical) */ declare const topRoundedRadius: (radius: number) => BorderRadiusConfig; /** * Generate border radius for bottom of bar only (vertical) */ declare const bottomRoundedRadius: (radius: number) => BorderRadiusConfig; /** * Generate border radius for right of bar only (horizontal) */ declare const rightRoundedRadius: (radius: number) => BorderRadiusConfig; /** * Generate border radius for left of bar only (horizontal) */ declare const leftRoundedRadius: (radius: number) => BorderRadiusConfig; /** * Get appropriate border radius based on bar position in stack */ declare const getStackedBorderRadius: (radius: number | BorderRadiusConfig, isFirst: boolean, isLast: boolean, orientation: "vertical" | "horizontal", isPositive: boolean) => BorderRadiusConfig; /** * Generate a unique ID */ declare const generateId: (prefix?: string) => string; export { Axis, Bar, BarChart, ChartContainer, FloatingBarChart, HorizontalBarChart, Legend, StackedBarChart, StackedBarChartWithGroups, Title, Tooltip, UNISYS_FONT_FAMILY, VerticalBarChart, bottomRoundedRadius, calculateNiceTicks, calculateScale, colorPalettes, darken, defaultAnimationConfig, defaultAxisConfig, defaultFontFamily, defaultLegendConfig, defaultPadding, defaultTooltipConfig, formatValue, generateGradient, generateId, getActiveTheme, getColorPalette, getContrastColor, getDatasetColor, getHoverColor, getMaxValue, getMinValue, getNumericValue, getStackedBorderRadius, getTheme, leftRoundedRadius, lighten, mergeAnimationConfig, mergeAxisConfig, mergeLegendConfig, mergePadding, mergeTooltipConfig, parseColor, positionToValue, resolveColor, rightRoundedRadius, roundedRectPath, themes, topRoundedRadius, valueToPosition, withOpacity }; export type { AnimationConfig, AxisConfig, BarChartComponentProps, BarChartProps, BarClickData, BarRect, BaseChartProps, BorderRadiusConfig, ChartDimensions, ColorArray, ColorFunction, ColorValue, DataArray, DataValue, DatasetConfig, DynamicColor, FloatingBarChartComponentProps, FloatingBarChartProps, FontConfig, HorizontalBarChartComponentProps, HorizontalBarChartProps, LegendConfig, PaddingConfig, PresetTheme, ScaleConfig, StackedBarChartComponentProps, StackedBarChartProps, StackedBarChartWithGroupsComponentProps, StackedBarChartWithGroupsProps, ThemeConfig, TooltipConfig, VerticalBarChartComponentProps, VerticalBarChartProps };