flikkui 0.1.0-beta.8 → 0.2.0-beta.1

package/dist/components/charts/BarChart/BarChart.js

@@ -1,7 +1,6 @@
-import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
-import React__default, { useRef, useState, useEffect } from 'react';
+import React__default, { useState, useEffect, useRef, useMemo } from 'react';
+import { useReducedMotion, motion } from 'motion/react';
 import { cn } from '../../../utils/cn.js';
-import { useChartTheme } from '../hooks/useChartTheme.js';
 import { useTooltipPosition } from '../hooks/useTooltipPosition.js';
 import { useChartAccessibility } from '../hooks/useChartAccessibility.js';
 import { useChartValidation } from '../hooks/useChartValidation.js';
@@ -10,88 +9,105 @@ import { XAxis } from '../shared/ChartAxis/XAxis.js';
 import { YAxis } from '../shared/ChartAxis/YAxis.js';
 import { HorizontalGrid } from '../shared/ChartGrid/HorizontalGrid.js';
 import { ChartTooltip } from '../shared/ChartTooltip/ChartTooltip.js';
-import { getColorValue } from '../utils/color-utils.js';
 import { BAR_CHART_DEFAULTS } from './BarChart.types.js';
+import { ExclamationTriangleIcon } from '@heroicons/react/20/solid';
 
-var BarChart = function (_a) {
-    var _b;
-    var data = _a.data, config = _a.config, 
-    // Standardized display props with defaults
-    _c = _a.showGrid, 
-    // Standardized display props with defaults
-    showGrid = _c === void 0 ? BAR_CHART_DEFAULTS.showGrid : _c, _d = _a.showXAxis, showXAxis = _d === void 0 ? BAR_CHART_DEFAULTS.showXAxis : _d, _e = _a.showYAxis, showYAxis = _e === void 0 ? BAR_CHART_DEFAULTS.showYAxis : _e, _f = _a.showNullValues, showNullValues = _f === void 0 ? BAR_CHART_DEFAULTS.showNullValues : _f, propMinValue = _a.minValue, propMaxValue = _a.maxValue, _g = _a.variant, variant = _g === void 0 ? BAR_CHART_DEFAULTS.variant : _g, theme = _a.theme, 
-    // Standardized visual props with defaults (renamed from bar-specific names)
-    _h = _a.radius, 
-    // Standardized visual props with defaults (renamed from bar-specific names)
-    radius = _h === void 0 ? BAR_CHART_DEFAULTS.radius : _h, // Was barRadius
-    _j = _a.gap, // Was barRadius
-    gap = _j === void 0 ? BAR_CHART_DEFAULTS.gap : _j, // Was barGap
-    _k = _a.categoryGap, // Was barGap
-    categoryGap = _k === void 0 ? BAR_CHART_DEFAULTS.categoryGap : _k, // Was barCategoryGap
-    _l = _a.stacked, // Was barCategoryGap
-    stacked = _l === void 0 ? BAR_CHART_DEFAULTS.stacked : _l, 
-    // Bar-specific props
-    _m = _a.orientation; 
-    // Bar-specific props
-    _m === void 0 ? BAR_CHART_DEFAULTS.orientation : _m; 
-    var // Base props
-    className = _a.className, title = _a.title, description = _a.description, _o = _a.enableKeyboardNavigation, enableKeyboardNavigation = _o === void 0 ? BAR_CHART_DEFAULTS.enableKeyboardNavigation : _o, children = _a.children, props = __rest(_a, ["data", "config", "showGrid", "showXAxis", "showYAxis", "showNullValues", "minValue", "maxValue", "variant", "theme", "radius", "gap", "categoryGap", "stacked", "orientation", "className", "title", "description", "enableKeyboardNavigation", "children"]);
+const BarChart = ({ data, config, 
+// Standardized display props with defaults
+showGrid = BAR_CHART_DEFAULTS.showGrid, showXAxis = BAR_CHART_DEFAULTS.showXAxis, showYAxis = BAR_CHART_DEFAULTS.showYAxis, minValue: propMinValue, maxValue: propMaxValue, variant = BAR_CHART_DEFAULTS.variant, theme, 
+// Standardized visual props with defaults (renamed from bar-specific names)
+barRadius, radius, // @deprecated Use barRadius instead
+gap = BAR_CHART_DEFAULTS.gap, categoryGap = BAR_CHART_DEFAULTS.categoryGap, 
+// Bar-specific props
+orientation = BAR_CHART_DEFAULTS.orientation, 
+// Animation props
+showAnimation = BAR_CHART_DEFAULTS.showAnimation, 
+// Placeholder bar props
+showPlaceholderBars = BAR_CHART_DEFAULTS.showPlaceholderBars, placeholderData, 
+// Base props
+className, title, description, enableKeyboardNavigation = BAR_CHART_DEFAULTS.enableKeyboardNavigation, showValidationWarnings = process.env.NODE_ENV === "development", children, ...props }) => {
+    var _a, _b;
+    // Resolve barRadius with backward compatibility
+    const resolvedBarRadius = (_a = barRadius !== null && barRadius !== void 0 ? barRadius : radius) !== null && _a !== void 0 ? _a : BAR_CHART_DEFAULTS.barRadius;
+    // Development warning for deprecated radius prop
+    if (process.env.NODE_ENV !== "production" && radius !== undefined) {
+        console.warn("[BarChart]: The `radius` prop is deprecated and will be removed in a future version. " +
+            "Use `barRadius` instead.");
+    }
+    // Animation state
+    const shouldReduceMotion = useReducedMotion();
+    const [hasAnimated, setHasAnimated] = useState(false);
+    useEffect(() => {
+        if (!shouldReduceMotion && showAnimation) {
+            setHasAnimated(true);
+        }
+        else {
+            setHasAnimated(true); // Show immediately if animations disabled
+        }
+    }, [shouldReduceMotion, showAnimation]);
     // Validate data and config with error handling
-    var _p = useChartValidation(data, config, {
+    const { validation, sanitizedData, isValid, hasWarnings, safeScale, safeMath, } = useChartValidation(data, config, {
         autoSanitize: true,
         logWarnings: true,
-    }), validation = _p.validation, sanitizedData = _p.sanitizedData, isValid = _p.isValid, hasWarnings = _p.hasWarnings, safeScale = _p.safeScale, safeMath = _p.safeMath;
+    });
     // Early return for invalid data with error message
     if (!isValid) {
-        return (React__default.createElement("div", __assign({ className: cn("chart-container flex flex-col items-center justify-center p-6 border border-warning-200 bg-warning-50 rounded-lg text-center", className), role: "alert", "aria-live": "polite" }, props),
-            React__default.createElement("div", { className: "flex items-center gap-2 mb-2" },
-                React__default.createElement("svg", { className: "w-5 h-5 text-warning-500", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" },
-                    React__default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" })),
-                React__default.createElement("h3", { className: "text-sm font-medium text-warning-800" }, "Invalid Chart Data")),
-            React__default.createElement("p", { className: "text-sm text-warning-600 mb-2" }, ((_b = validation.errors[0]) === null || _b === void 0 ? void 0 : _b.message) || 'Unable to render chart due to data validation errors'),
-            process.env.NODE_ENV === 'development' && validation.errors.length > 1 && (React__default.createElement("details", { className: "text-xs text-warning-500" },
+        return (React__default.createElement("div", { className: cn("chart-container flex flex-col items-center justify-center p-6 border border-border rounded-lg text-xl", className), role: "alert", "aria-live": "polite", ...props },
+            React__default.createElement("div", { className: "flex flex-col items-center gap-4 mb-1" },
+                React__default.createElement(ExclamationTriangleIcon, { className: "size-6 text-[var(--color-danger)]" }),
+                React__default.createElement("div", { className: "text-sm font-semibold text-[var(--color-text-secondary)]" }, "Invalid Chart Data")),
+            React__default.createElement("p", { className: "text-sm text-[var(--color-text-secondary)]/70 mb-2" }, ((_b = validation.errors[0]) === null || _b === void 0 ? void 0 : _b.message) ||
+                "Unable to render chart due to data validation errors"),
+            process.env.NODE_ENV === "development" &&
+                validation.errors.length > 1 && (React__default.createElement("details", { className: "text-xs text-warning-500" },
                 React__default.createElement("summary", { className: "cursor-pointer" },
                     "Show all errors (",
                     validation.errors.length,
                     ")"),
-                React__default.createElement("ul", { className: "mt-2 text-left" }, validation.errors.map(function (error, index) { return (React__default.createElement("li", { key: index },
+                React__default.createElement("ul", { className: "mt-2 text-left" }, validation.errors.map((error, index) => (React__default.createElement("li", { key: index },
                     "\u2022 ",
-                    error.message)); }))))));
+                    error.message))))))));
     }
     // Early return for empty data
     if (!sanitizedData || sanitizedData.length === 0) {
-        return (React__default.createElement("div", __assign({ className: cn("chart-container flex items-center justify-center text-neutral-500", className), role: "img", "aria-label": "Empty bar chart" }, props),
+        return (React__default.createElement("div", { className: cn("chart-container flex items-center justify-center text-[var(--color-text-muted)]", className), role: "img", "aria-label": "Empty bar chart", ...props },
             React__default.createElement("span", null, "No data available")));
     }
-    // Use the new theme system
-    var _q = useChartTheme({ config: config, variant: variant, theme: theme }); _q.getSeriesColor; _q.getColorClass; _q.getOpacityClass; _q.getTransitionClass; 
-    // Legacy support
-    _q.getThemeValue;
-    var containerRef = useRef(null);
-    var _r = useState({ width: 600, height: 400 }), dimensions = _r[0], setDimensions = _r[1];
-    var _s = useState(null), hoveredCategory = _s[0], setHoveredCategory = _s[1];
+    // Simple color functions based on direct CSS variables (following guidelines)
+    const getSeriesFillColor = (index) => {
+        const colorVars = [
+            "var(--color-primary)",
+            "var(--color-warning)",
+            "var(--color-success)",
+            "var(--color-danger)",
+        ];
+        return colorVars[index % colorVars.length];
+    };
+    const containerRef = useRef(null);
+    const [dimensions, setDimensions] = useState({ width: 600, height: 400 });
+    const [hoveredCategory, setHoveredCategory] = useState(null);
     // Detect if device is mobile/touch
-    var isMobile = typeof window !== 'undefined' &&
-        ('ontouchstart' in window || navigator.maxTouchPoints > 0);
+    const isMobile = typeof window !== "undefined" &&
+        ("ontouchstart" in window || navigator.maxTouchPoints > 0);
     // Use the new tooltip positioning hook
-    var _t = useTooltipPosition({
-        containerRef: containerRef,
-        isMobile: isMobile,
-    }), tooltipData = _t.tooltipData, tooltipRef = _t.tooltipRef, handleMouseEnter = _t.handleMouseEnter, handleMouseMove = _t.handleMouseMove, handleMouseLeave = _t.handleMouseLeave;
+    const { tooltipData, tooltipRef, handleMouseEnter, handleMouseMove, handleMouseLeave, } = useTooltipPosition({
+        containerRef,
+        isMobile,
+    });
     // Use accessibility hook
-    var _u = useChartAccessibility({
-        chartType: 'bar',
+    const { chartAccessibilityProps, descriptionProps, focusedElementIndex, isKeyboardMode, handleMouseInteraction, } = useChartAccessibility({
+        chartType: "bar",
         data: sanitizedData,
-        config: config,
-        title: title,
-        description: description,
-        enableKeyboardNavigation: enableKeyboardNavigation,
-    }), chartAccessibilityProps = _u.chartAccessibilityProps, descriptionProps = _u.descriptionProps, focusedElementIndex = _u.focusedElementIndex, isKeyboardMode = _u.isKeyboardMode, handleMouseInteraction = _u.handleMouseInteraction;
+        config,
+        title,
+        description,
+        enableKeyboardNavigation,
+    });
     // Measure container dimensions
-    useEffect(function () {
-        var updateDimensions = function () {
+    useEffect(() => {
+        const updateDimensions = () => {
             if (containerRef.current) {
-                var _a = containerRef.current.getBoundingClientRect(), width = _a.width, height = _a.height;
+                const { width, height } = containerRef.current.getBoundingClientRect();
                 setDimensions({
                     width: width || 600,
                     height: height || 400,
@@ -99,109 +115,105 @@ var BarChart = function (_a) {
             }
         };
         updateDimensions();
-        var resizeObserver = new ResizeObserver(updateDimensions);
+        const resizeObserver = new ResizeObserver(updateDimensions);
         if (containerRef.current) {
             resizeObserver.observe(containerRef.current);
         }
-        return function () {
+        return () => {
             resizeObserver.disconnect();
         };
     }, []);
     // Helper function to create a path for bars with only top corners rounded
-    var createRoundedTopBarPath = function (x, y, width, height, radius) {
-        var r = Math.min(radius, width / 2, height / 2);
-        return "\n      M ".concat(x, ",").concat(y + height, "\n      L ").concat(x, ",").concat(y + r, "\n      Q ").concat(x, ",").concat(y, " ").concat(x + r, ",").concat(y, "\n      L ").concat(x + width - r, ",").concat(y, "\n      Q ").concat(x + width, ",").concat(y, " ").concat(x + width, ",").concat(y + r, "\n      L ").concat(x + width, ",").concat(y + height, "\n      Z\n    ").trim();
+    const createRoundedTopBarPath = (x, y, width, height, radius) => {
+        const r = Math.min(radius, width / 2, height / 2);
+        return `
+      M ${x},${y + height}
+      L ${x},${y + r}
+      Q ${x},${y} ${x + r},${y}
+      L ${x + width - r},${y}
+      Q ${x + width},${y} ${x + width},${y + r}
+      L ${x + width},${y + height}
+      Z
+    `.trim();
     };
     // Calculate dimensions with safe math
-    var margin = {
+    const margin = {
         top: 15,
         right: showYAxis ? 20 : 0,
         bottom: showXAxis ? 20 : 0,
         left: showYAxis ? 60 : 0,
     };
-    var innerWidth = Math.max(0, dimensions.width - margin.left - margin.right);
-    var innerHeight = Math.max(0, dimensions.height - margin.top - margin.bottom);
+    const innerWidth = Math.max(0, dimensions.width - margin.left - margin.right);
+    const innerHeight = Math.max(0, dimensions.height - margin.top - margin.bottom);
     // Get all data keys from config
-    var dataKeys = Object.keys(config || {});
+    const dataKeys = Object.keys(config || {});
+    // Animation timing constant
+    const BAR_STAGGER = 0.05;
     // Helper function to calculate average of non-null values for a specific key across all data items
-    var calculateAverageForKey = function (key) {
-        var nonNullValues = sanitizedData
-            .map(function (item) { return item[key]; })
-            .filter(function (value) { return typeof value === 'number' && isFinite(value); });
+    const calculateAverageForKey = (key) => {
+        const nonNullValues = sanitizedData
+            .map((item) => item[key])
+            .filter((value) => typeof value === "number" && isFinite(value));
         if (nonNullValues.length === 0)
             return 0;
-        var sum = nonNullValues.reduce(function (acc, val) { return acc + val; }, 0);
+        const sum = nonNullValues.reduce((acc, val) => acc + val, 0);
         return safeMath.divide(sum, nonNullValues.length);
     };
     // Calculate safe scale range
-    var scaleRange = safeScale.calculateRange({
+    const scaleRange = safeScale.calculateRange({
         minValue: propMinValue,
         maxValue: propMaxValue,
         includeZero: true,
     });
-    var minValue = scaleRange.min, maxValue = scaleRange.max, hasValidData = scaleRange.hasValidData;
+    const { min: minValue, max: maxValue, hasValidData } = scaleRange;
     // If no valid data, show empty state
     if (!hasValidData) {
-        return (React__default.createElement("div", __assign({ className: cn("chart-container flex items-center justify-center text-neutral-500", className), role: "img", "aria-label": "Empty bar chart - no valid data" }, props),
+        return (React__default.createElement("div", { className: cn("chart-container flex items-center justify-center text-neutral-500", className), role: "img", "aria-label": "Empty bar chart - no valid data", ...props },
             React__default.createElement("span", null, "No valid numeric data available")));
     }
     // Safe bar width calculations
-    var totalCategoryGap = Math.max(0, (sanitizedData.length - 1) * categoryGap);
-    var availableWidth = Math.max(0, innerWidth - totalCategoryGap);
-    var barWidth = safeMath.divide(availableWidth, sanitizedData.length, 0);
-    var totalBarGap = Math.max(0, (dataKeys.length - 1) * gap);
-    var availableBarWidth = Math.max(0, barWidth - totalBarGap);
-    var individualBarWidth = stacked
-        ? barWidth
-        : safeMath.divide(availableBarWidth, dataKeys.length, 0);
+    const totalCategoryGap = Math.max(0, (sanitizedData.length - 1) * categoryGap);
+    const availableWidth = Math.max(0, innerWidth - totalCategoryGap);
+    const barWidth = safeMath.divide(availableWidth, sanitizedData.length, 0);
+    const totalBarGap = Math.max(0, (dataKeys.length - 1) * gap);
+    const availableBarWidth = Math.max(0, barWidth - totalBarGap);
+    const individualBarWidth = safeMath.divide(availableBarWidth, dataKeys.length, 0);
     // Handle keyboard focus tooltips
-    useEffect(function () {
+    useEffect(() => {
         var _a, _b;
-        if (isKeyboardMode && focusedElementIndex >= 0 && focusedElementIndex < sanitizedData.length) {
-            var item = sanitizedData[focusedElementIndex];
+        if (isKeyboardMode &&
+            focusedElementIndex >= 0 &&
+            focusedElementIndex < sanitizedData.length) {
+            const item = sanitizedData[focusedElementIndex];
             if (dataKeys.length > 0) {
-                var key = dataKeys[0]; // Show first series for keyboard navigation
-                var value = item[key];
-                if (typeof value === 'number' && isFinite(value)) {
+                const key = dataKeys[0]; // Show first series for keyboard navigation
+                const value = item[key];
+                if (typeof value === "number" && isFinite(value)) {
                     // Calculate position for focused bar with safe math
-                    var x = margin.left + focusedElementIndex * (barWidth + categoryGap);
-                    var range = maxValue - minValue;
-                    var barHeight = range > 0 ? ((value - minValue) / range) * innerHeight : 0;
-                    var y = margin.top + innerHeight - barHeight;
-                    // Get the color class for the first series (index 0)
-                    var colorClass = void 0;
-                    switch (0 % 4) {
-                        case 0:
-                            colorClass = "fill-primary-base";
-                            break;
-                        case 1:
-                            colorClass = "fill-warning-base";
-                            break;
-                        case 2:
-                            colorClass = "fill-success-base";
-                            break;
-                        case 3:
-                            colorClass = "fill-danger-base";
-                            break;
-                        default:
-                            colorClass = "fill-primary-base";
-                    }
-                    var content = {
-                        category: item.name || "Category ".concat(focusedElementIndex + 1),
-                        series: [{
-                                key: key,
+                    const x = margin.left + focusedElementIndex * (barWidth + categoryGap);
+                    const range = maxValue - minValue;
+                    const barHeight = range > 0 ? ((value - minValue) / range) * innerHeight : 0;
+                    const y = margin.top + innerHeight - barHeight;
+                    // Get the fill color for the first series (index 0)
+                    const fillColor = getSeriesFillColor(0);
+                    const content = {
+                        category: item.name || `Category ${focusedElementIndex + 1}`,
+                        series: [
+                            {
+                                key,
                                 label: ((_a = config[key]) === null || _a === void 0 ? void 0 : _a.label) || key,
                                 value: value,
-                                color: ((_b = config[key]) === null || _b === void 0 ? void 0 : _b.color) || getColorValue(colorClass)
-                            }]
+                                color: ((_b = config[key]) === null || _b === void 0 ? void 0 : _b.color) || fillColor,
+                            },
+                        ],
                     };
-                    var svgCoordinates = {
+                    const svgCoordinates = {
                         x: x + barWidth / 2,
                         y: y,
-                        dimensions: dimensions
+                        dimensions,
                     };
                     // Simulate mouse enter for keyboard focus
-                    var syntheticEvent = new MouseEvent('mouseenter', {
+                    const syntheticEvent = new MouseEvent("mouseenter", {
                         clientX: x + barWidth / 2,
                         clientY: y,
                     });
@@ -214,188 +226,237 @@ var BarChart = function (_a) {
             handleMouseLeave();
         }
         // Don't clear tooltips when switching from keyboard to mouse mode
-    }, [isKeyboardMode, focusedElementIndex, sanitizedData, config, dimensions, margin, innerWidth, innerHeight, categoryGap, minValue, maxValue, handleMouseEnter, handleMouseLeave, dataKeys, barWidth]);
-    return (React__default.createElement(ChartErrorBoundary, { className: className, showErrorDetails: process.env.NODE_ENV === 'development' },
-        React__default.createElement("div", __assign({ ref: containerRef, className: cn("chart-container w-full h-full", className) }, chartAccessibilityProps, { onMouseEnter: handleMouseInteraction, onMouseMove: handleMouseInteraction }, props),
-            descriptionProps && React__default.createElement("div", __assign({}, descriptionProps)),
-            process.env.NODE_ENV === 'development' && hasWarnings && (React__default.createElement("div", { className: "absolute top-2 left-2 right-2 z-10 p-2 bg-yellow-50 border border-yellow-200 rounded text-xs text-yellow-800 shadow-sm" },
+    }, [
+        isKeyboardMode,
+        focusedElementIndex,
+        sanitizedData,
+        config,
+        dimensions,
+        margin,
+        innerWidth,
+        innerHeight,
+        categoryGap,
+        minValue,
+        maxValue,
+        handleMouseEnter,
+        handleMouseLeave,
+        dataKeys,
+        barWidth,
+    ]);
+    // Memoize placeholder bar heights to prevent flickering on re-renders
+    const placeholderHeightMap = useMemo(() => {
+        const map = new Map();
+        if (showPlaceholderBars) {
+            sanitizedData.forEach((item, index) => {
+                dataKeys.forEach((key) => {
+                    const rawValue = item[key];
+                    const isNull = rawValue === null ||
+                        rawValue === undefined ||
+                        (typeof rawValue === "number" && !isFinite(rawValue));
+                    if (isNull) {
+                        const mapKey = `${index}-${key}`;
+                        // Generate stable random factor between 0.4 and 0.8 (40% to 80% of max)
+                        const randomFactor = Math.random() * 0.4 + 0.4;
+                        map.set(mapKey, randomFactor);
+                    }
+                });
+            });
+        }
+        return map;
+    }, [sanitizedData.length, dataKeys.join(","), showPlaceholderBars]);
+    // Helper function to render individual bar path
+    const renderBarPath = (item, index, key, keyIndex, barX, barY, barHeight, shouldAnimate = true) => {
+        var _a;
+        const rawValue = item[key];
+        const isNull = rawValue === null ||
+            rawValue === undefined ||
+            (typeof rawValue === "number" && !isFinite(rawValue));
+        // Get fill color for this data series using direct CSS variables
+        const fillColor = getSeriesFillColor(keyIndex);
+        const isHovered = hoveredCategory === index;
+        const isAnyBarHovered = hoveredCategory !== null;
+        const shouldReduceOpacity = isAnyBarHovered && !isHovered;
+        const isFocused = isKeyboardMode && focusedElementIndex === index;
+        // Handle null bars - either skip or show placeholder
+        if (isNull) {
+            if (!showPlaceholderBars) {
+                return null; // Original behavior: don't render
+            }
+            // Show placeholder bar
+            let placeholderHeight = 0;
+            let placeholderY = barY;
+            // Try to get value from placeholderData (previous period)
+            if (placeholderData && placeholderData[index]) {
+                const placeholderValue = placeholderData[index][key];
+                if (typeof placeholderValue === "number" &&
+                    isFinite(placeholderValue)) {
+                    // Use previous period value
+                    const range = maxValue - minValue;
+                    placeholderHeight =
+                        range > 0
+                            ? safeMath.scale(placeholderValue, minValue, maxValue, 0, innerHeight)
+                            : 0;
+                    placeholderY = margin.top + innerHeight - placeholderHeight;
+                }
+            }
+            // If no placeholderData or invalid, use stable random height from memoized map
+            if (placeholderHeight === 0) {
+                const mapKey = `${index}-${key}`;
+                const randomFactor = placeholderHeightMap.get(mapKey) || 0.6; // fallback to 60%
+                placeholderHeight = innerHeight * randomFactor;
+                placeholderY = margin.top + innerHeight - placeholderHeight;
+            }
+            const pathD = createRoundedTopBarPath(barX, placeholderY, individualBarWidth, placeholderHeight, resolvedBarRadius);
+            const delay = (index * dataKeys.length + keyIndex) * BAR_STAGGER;
+            return (React__default.createElement(motion.path, { key: keyIndex, d: pathD, initial: shouldAnimate && showAnimation && !shouldReduceMotion
+                    ? { scaleY: 0, opacity: 0 }
+                    : { scaleY: 1, opacity: 1 }, animate: {
+                    scaleY: 1,
+                    opacity: 1,
+                }, transition: {
+                    type: "spring",
+                    stiffness: 100,
+                    damping: 20,
+                    delay,
+                }, className: "transition-opacity duration-200", style: {
+                    originY: 1,
+                    transformOrigin: "bottom",
+                    fill: "url(#diagonalHatch)",
+                    opacity: 0.75,
+                }, "aria-label": `${item.name || `Category ${index + 1}`} - ${((_a = config[key]) === null || _a === void 0 ? void 0 : _a.label) || key}: No data` }));
+        }
+        // Skip rendering if bar dimensions are invalid
+        if (barHeight <= 0 || individualBarWidth <= 0) {
+            return null;
+        }
+        const pathD = createRoundedTopBarPath(barX, barY, individualBarWidth, barHeight, resolvedBarRadius);
+        const delay = (index * dataKeys.length + keyIndex) * BAR_STAGGER;
+        return (React__default.createElement(motion.path, { key: keyIndex, d: pathD, initial: shouldAnimate && showAnimation && !shouldReduceMotion
+                ? { scaleY: 0, opacity: 0 }
+                : { scaleY: 1, opacity: 1 }, animate: {
+                scaleY: 1,
+                opacity: 1,
+            }, transition: {
+                type: "spring",
+                stiffness: 100,
+                damping: 20,
+                delay,
+            }, className: cn("transition-colors duration-200", !isNull && "cursor-pointer", isFocused && "stroke-2"), style: {
+                originY: 1,
+                transformOrigin: "bottom",
+                fill: isNull
+                    ? "var(--color-background-tertiary)"
+                    : shouldReduceOpacity
+                        ? "var(--color-background-tertiary)"
+                        : fillColor,
+                opacity: !isNull && shouldReduceOpacity ? 0.9 : 1,
+                stroke: isFocused ? "var(--color-primary)" : "none",
+            }, onMouseEnter: !isNull
+                ? (e) => {
+                    setHoveredCategory(index);
+                    // Create content with ALL series for this category
+                    const series = dataKeys
+                        .map((dataKey, idx) => {
+                        var _a, _b;
+                        const seriesValue = item[dataKey];
+                        const isSeriesNull = seriesValue === null ||
+                            seriesValue === undefined ||
+                            (typeof seriesValue === "number" &&
+                                !isFinite(seriesValue));
+                        return {
+                            key: dataKey,
+                            label: ((_a = config[dataKey]) === null || _a === void 0 ? void 0 : _a.label) || dataKey,
+                            value: isSeriesNull ? 0 : seriesValue,
+                            color: ((_b = config[dataKey]) === null || _b === void 0 ? void 0 : _b.color) || getSeriesFillColor(idx),
+                        };
+                    })
+                        .filter((series) => {
+                        // Only include non-null and non-zero values in tooltip
+                        const rawVal = item[series.key];
+                        return (rawVal != null &&
+                            typeof rawVal === "number" &&
+                            isFinite(rawVal) &&
+                            rawVal > 0);
+                    });
+                    const content = {
+                        category: item.name || `Category ${index + 1}`,
+                        series,
+                    };
+                    const svgCoordinates = {
+                        x: barX + individualBarWidth / 2,
+                        y: barY,
+                        dimensions,
+                    };
+                    handleMouseEnter(e, content, svgCoordinates);
+                }
+                : undefined, onMouseMove: !isNull
+                ? (e) => {
+                    if (hoveredCategory === index) {
+                        const svgCoordinates = {
+                            x: barX + individualBarWidth / 2,
+                            y: barY,
+                            dimensions,
+                        };
+                        handleMouseMove(e, svgCoordinates);
+                    }
+                }
+                : undefined, onMouseLeave: !isNull
+                ? () => {
+                    setHoveredCategory(null);
+                    handleMouseLeave();
+                }
+                : undefined }));
+    };
+    return (React__default.createElement(ChartErrorBoundary, { className: className, showErrorDetails: process.env.NODE_ENV === "development" },
+        React__default.createElement("div", { ref: containerRef, className: cn("chart-container w-full h-full", className), ...chartAccessibilityProps, onMouseEnter: handleMouseInteraction, onMouseMove: handleMouseInteraction, ...props },
+            descriptionProps && React__default.createElement("div", { ...descriptionProps }),
+            showValidationWarnings && hasWarnings && (React__default.createElement("div", { className: "absolute top-2 left-2 right-2 z-10 p-2 bg-[var(--color-warning-50)] border border-[var(--color-warning-200)] rounded text-xs text-[var(--color-warning)] shadow-sm" },
                 React__default.createElement("strong", null, "Chart Warnings:"),
-                React__default.createElement("ul", { className: "mt-1" }, validation.warnings.map(function (warning, index) { return (React__default.createElement("li", { key: index },
+                React__default.createElement("ul", { className: "mt-1" }, validation.warnings
+                    .filter((warning) => !warning.message.includes("has no valid numeric values"))
+                    .map((warning, index) => (React__default.createElement("li", { key: index },
                     "\u2022 ",
-                    warning.message)); })))),
-            React__default.createElement("svg", { width: "100%", height: "100%", viewBox: "0 0 ".concat(dimensions.width, " ").concat(dimensions.height) },
+                    warning.message)))),
+                validation.warnings.some((warning) => warning.message.includes("has no valid numeric values")) && (React__default.createElement("div", { className: "mt-2 pt-2 border-t border-[var(--color-warning-200)]" },
+                    React__default.createElement("span", { className: "text-[var(--color-warning)]" }, "\u2139\uFE0F Null/undefined values are handled by using averages from other data points"))))),
+            React__default.createElement("svg", { width: "100%", height: "100%", viewBox: `0 0 ${dimensions.width} ${dimensions.height}` },
+                React__default.createElement("defs", null,
+                    React__default.createElement("pattern", { id: "diagonalHatch", patternUnits: "userSpaceOnUse", width: "8", height: "8" },
+                        React__default.createElement("rect", { width: "8", height: "8", fill: "var(--color-neutral-50)" }),
+                        React__default.createElement("path", { d: "M-2,2 l4,-4\n                   M0,8 l8,-8\n                   M6,10 l4,-4", style: { stroke: "black", strokeWidth: 4, opacity: 0.1 } }))),
                 React__default.createElement(HorizontalGrid, { show: showGrid, x: margin.left, y: margin.top, width: innerWidth, height: innerHeight, lineCount: 5 }),
-                React__default.createElement(YAxis, { show: showYAxis, min: minValue, max: maxValue, x: margin.left, y: margin.top, height: innerHeight, showGrid: false, gridWidth: innerWidth, tickFormatter: function (value) {
+                React__default.createElement(YAxis, { show: showYAxis, min: minValue, max: maxValue, x: margin.left, y: margin.top, height: innerHeight, showGrid: false, gridWidth: innerWidth, tickFormatter: (value) => {
                         if (value >= 1000)
-                            return "".concat((value / 1000).toFixed(0), "k");
+                            return `${(value / 1000).toFixed(0)}k`;
                         return value.toString();
                     } }),
-                React__default.createElement("g", { className: "chart-bars" }, sanitizedData.map(function (item, index) {
-                    var x = margin.left + index * (barWidth + categoryGap);
-                    if (stacked) {
-                        var stackedY_1 = margin.top + innerHeight;
-                        return (React__default.createElement("g", { key: index }, dataKeys.map(function (key, keyIndex) {
-                            var rawValue = item[key];
-                            var value = typeof rawValue === 'number' && isFinite(rawValue) ? rawValue : 0;
-                            var isNull = rawValue === null || rawValue === undefined || (typeof rawValue === 'number' && !isFinite(rawValue));
-                            // For null values, use the average of non-null values in this data item
-                            var actualValue = isNull ? calculateAverageForKey(key) : value;
-                            var range = maxValue - minValue;
-                            var barHeight = range > 0 ? safeMath.scale(actualValue, minValue, maxValue, 0, innerHeight) : 0;
-                            var currentY = stackedY_1 - barHeight;
-                            stackedY_1 = currentY;
-                            // Get color class for this data series
-                            var colorClass;
-                            switch (keyIndex % 4) {
-                                case 0:
-                                    colorClass = "fill-primary-base";
-                                    break;
-                                case 1:
-                                    colorClass = "fill-warning-base";
-                                    break;
-                                case 2:
-                                    colorClass = "fill-success-base";
-                                    break;
-                                case 3:
-                                    colorClass = "fill-danger-base";
-                                    break;
-                                default:
-                                    colorClass = "fill-primary-base";
-                            }
-                            var isHovered = hoveredCategory === index;
-                            var isAnyBarHovered = hoveredCategory !== null;
-                            var shouldReduceOpacity = isAnyBarHovered && !isHovered;
-                            var isFocused = isKeyboardMode && focusedElementIndex === index;
-                            // Don't render null bars if showNullValues is false
-                            if (isNull && !showNullValues) {
-                                return null;
-                            }
-                            // Skip rendering if bar dimensions are invalid
-                            if (barHeight <= 0 || individualBarWidth <= 0) {
-                                return null;
-                            }
-                            return (React__default.createElement("path", { key: keyIndex, d: createRoundedTopBarPath(x, currentY, individualBarWidth, barHeight, keyIndex === dataKeys.length - 1 ? radius : 0), className: cn("transition-all duration-750", 
-                                // Only add cursor-pointer for non-null bars
-                                !isNull && "cursor-pointer", !isNull && shouldReduceOpacity ? "fill-slate-500" :
-                                    isNull ? "fill-neutral-300 " : colorClass, !isNull && shouldReduceOpacity && "opacity-20", 
-                                // Keyboard focus styles
-                                isFocused && "stroke-primary-600 stroke-2"), onMouseEnter: !isNull ? function (e) {
-                                    var _a, _b;
-                                    setHoveredCategory(index);
-                                    // Create content in MultiSeriesData format for consistency
-                                    var content = {
-                                        category: item.name || "Category ".concat(index + 1),
-                                        series: [{
-                                                key: key,
-                                                label: ((_a = config[key]) === null || _a === void 0 ? void 0 : _a.label) || key,
-                                                value: value,
-                                                color: ((_b = config[key]) === null || _b === void 0 ? void 0 : _b.color) || getColorValue(colorClass)
-                                            }]
-                                    };
-                                    var svgCoordinates = {
-                                        x: x + individualBarWidth / 2, // Center of bar
-                                        y: currentY, // Top of bar
-                                        dimensions: dimensions
-                                    };
-                                    handleMouseEnter(e, content, svgCoordinates);
-                                } : undefined, onMouseMove: !isNull ? function (e) {
-                                    if (hoveredCategory === index) {
-                                        var svgCoordinates = {
-                                            x: x + individualBarWidth / 2,
-                                            y: currentY,
-                                            dimensions: dimensions
-                                        };
-                                        handleMouseMove(e, svgCoordinates);
-                                    }
-                                } : undefined, onMouseLeave: !isNull ? function () {
-                                    setHoveredCategory(null);
-                                    handleMouseLeave();
-                                } : undefined }));
-                        })));
-                    }
-                    else {
-                        return (React__default.createElement("g", { key: index }, dataKeys.map(function (key, keyIndex) {
-                            var rawValue = item[key];
-                            var value = typeof rawValue === 'number' && isFinite(rawValue) ? rawValue : 0;
-                            var isNull = rawValue === null || rawValue === undefined || (typeof rawValue === 'number' && !isFinite(rawValue));
-                            // For null values, use the average of non-null values in this data item
-                            var actualValue = isNull ? calculateAverageForKey(key) : value;
-                            var range = maxValue - minValue;
-                            var barHeight = range > 0 ? safeMath.scale(actualValue, minValue, maxValue, 0, innerHeight) : 0;
-                            var barX = x + keyIndex * (individualBarWidth + gap);
-                            var barY = margin.top + innerHeight - barHeight;
-                            // Get color class for this data series
-                            var colorClass;
-                            switch (keyIndex % 4) {
-                                case 0:
-                                    colorClass = "fill-primary-base";
-                                    break;
-                                case 1:
-                                    colorClass = "fill-warning-base";
-                                    break;
-                                case 2:
-                                    colorClass = "fill-success-base";
-                                    break;
-                                case 3:
-                                    colorClass = "fill-danger-base";
-                                    break;
-                                default:
-                                    colorClass = "fill-primary-base";
-                            }
-                            var isHovered = hoveredCategory === index;
-                            var isAnyBarHovered = hoveredCategory !== null;
-                            var shouldReduceOpacity = isAnyBarHovered && !isHovered;
-                            var isFocused = isKeyboardMode && focusedElementIndex === index;
-                            // Don't render null bars if showNullValues is false
-                            if (isNull && !showNullValues) {
-                                return null;
-                            }
-                            // Skip rendering if bar dimensions are invalid
-                            if (barHeight <= 0 || individualBarWidth <= 0) {
-                                return null;
-                            }
-                            return (React__default.createElement("path", { key: keyIndex, d: createRoundedTopBarPath(barX, barY, individualBarWidth, barHeight, radius), className: cn("transition-all duration-750", 
-                                // Only add cursor-pointer for non-null bars
-                                !isNull && "cursor-pointer", !isNull && shouldReduceOpacity ? "fill-slate-500" :
-                                    isNull ? "fill-neutral-300" : colorClass, !isNull && shouldReduceOpacity && "opacity-20", 
-                                // Keyboard focus styles
-                                isFocused && "stroke-primary-600 stroke-2"), onMouseEnter: !isNull ? function (e) {
-                                    var _a, _b;
-                                    setHoveredCategory(index);
-                                    // Create content in MultiSeriesData format for consistency
-                                    var content = {
-                                        category: item.name || "Category ".concat(index + 1),
-                                        series: [{
-                                                key: key,
-                                                label: ((_a = config[key]) === null || _a === void 0 ? void 0 : _a.label) || key,
-                                                value: value,
-                                                color: ((_b = config[key]) === null || _b === void 0 ? void 0 : _b.color) || getColorValue(colorClass)
-                                            }]
-                                    };
-                                    var svgCoordinates = {
-                                        x: barX + individualBarWidth / 2, // Center of bar
-                                        y: barY, // Top of bar
-                                        dimensions: dimensions
-                                    };
-                                    handleMouseEnter(e, content, svgCoordinates);
-                                } : undefined, onMouseMove: !isNull ? function (e) {
-                                    if (hoveredCategory === index) {
-                                        var svgCoordinates = {
-                                            x: barX + individualBarWidth / 2,
-                                            y: barY,
-                                            dimensions: dimensions
-                                        };
-                                        handleMouseMove(e, svgCoordinates);
-                                    }
-                                } : undefined, onMouseLeave: !isNull ? function () {
-                                    setHoveredCategory(null);
-                                    handleMouseLeave();
-                                } : undefined }));
-                        })));
-                    }
+                React__default.createElement("g", { className: "chart-bars" }, sanitizedData.map((item, index) => {
+                    const x = margin.left + index * (barWidth + categoryGap);
+                    return (React__default.createElement("g", { key: index }, dataKeys.map((key, keyIndex) => {
+                        const rawValue = item[key];
+                        const value = typeof rawValue === "number" && isFinite(rawValue)
+                            ? rawValue
+                            : 0;
+                        const isNull = rawValue === null ||
+                            rawValue === undefined ||
+                            (typeof rawValue === "number" && !isFinite(rawValue));
+                        // For null values, use the average of non-null values
+                        const actualValue = isNull
+                            ? calculateAverageForKey(key)
+                            : value;
+                        const range = maxValue - minValue;
+                        const barHeight = range > 0
+                            ? safeMath.scale(actualValue, minValue, maxValue, 0, innerHeight)
+                            : 0;
+                        const barX = x + keyIndex * (individualBarWidth + gap);
+                        const barY = margin.top + innerHeight - barHeight;
+                        return renderBarPath(item, index, key, keyIndex, barX, barY, barHeight, true);
+                    })));
                 })),
                 React__default.createElement(XAxis, { show: showXAxis, data: sanitizedData, x: margin.left, y: margin.top + innerHeight, width: innerWidth, categoryWidth: barWidth, categoryGap: categoryGap })),
-            React__default.createElement(ChartTooltip, { tooltipRef: tooltipRef, content: tooltipData === null || tooltipData === void 0 ? void 0 : tooltipData.content, active: !!tooltipData, position: tooltipData ? { x: tooltipData.x, y: tooltipData.y } : { x: 0, y: 0 } }),
+            React__default.createElement(ChartTooltip, { tooltipRef: tooltipRef, content: tooltipData === null || tooltipData === void 0 ? void 0 : tooltipData.content, active: !!tooltipData, position: tooltipData
+                    ? { x: tooltipData.x, y: tooltipData.y }
+                    : { x: 0, y: 0 } }),
             children)));
 };