flikkui 0.1.0-beta.11 → 0.1.0-beta.12

package/dist/components/charts/hooks/useChartAccessibility.js

@@ -0,0 +1,127 @@
+import { useState, useRef, useCallback } from 'react';
+
+function useChartAccessibility(_a) {
+    var chartType = _a.chartType, data = _a.data, config = _a.config, title = _a.title, description = _a.description, _b = _a.enableKeyboardNavigation, enableKeyboardNavigation = _b === void 0 ? true : _b;
+    var _c = useState(-1), focusedElementIndex = _c[0], setFocusedElementIndex = _c[1];
+    var _d = useState(false), isKeyboardMode = _d[0], setIsKeyboardMode = _d[1];
+    var descriptionId = useRef("chart-description-".concat(Math.random().toString(36).substr(2, 9)));
+    // Generate chart summary for screen readers
+    var generateChartSummary = useCallback(function () {
+        var _a;
+        var dataKeys = Object.keys(config);
+        var dataCount = data.length;
+        var summary = '';
+        // Chart type and basic info
+        switch (chartType) {
+            case 'bar':
+                summary = "Bar chart with ".concat(dataCount, " categories");
+                break;
+            case 'line':
+                summary = "Line chart with ".concat(dataCount, " data points");
+                break;
+            case 'area':
+                summary = "Area chart with ".concat(dataCount, " data points");
+                break;
+            case 'heatmap':
+                summary = "Heatmap with ".concat(dataCount, " data cells");
+                break;
+        }
+        // Add series information
+        if (dataKeys.length > 1) {
+            summary += " showing ".concat(dataKeys.length, " data series: ").concat(dataKeys.map(function (key) { var _a; return ((_a = config[key]) === null || _a === void 0 ? void 0 : _a.label) || key; }).join(', '));
+        }
+        else if (dataKeys.length === 1) {
+            var seriesLabel = ((_a = config[dataKeys[0]]) === null || _a === void 0 ? void 0 : _a.label) || dataKeys[0];
+            summary += " showing ".concat(seriesLabel);
+        }
+        // Add data range information for numeric charts
+        if (chartType !== 'heatmap' && data.length > 0) {
+            var values = data.flatMap(function (item) {
+                return dataKeys.map(function (key) { return typeof item[key] === 'number' ? item[key] : 0; });
+            }).filter(function (val) { return val !== 0; });
+            if (values.length > 0) {
+                var min = Math.min.apply(Math, values);
+                var max = Math.max.apply(Math, values);
+                summary += ". Values range from ".concat(min, " to ").concat(max);
+            }
+        }
+        return summary;
+    }, [chartType, data, config]);
+    // Generate ARIA label
+    var generateAriaLabel = useCallback(function () {
+        if (title) {
+            return "".concat(title, ". ").concat(generateChartSummary());
+        }
+        return generateChartSummary();
+    }, [title, generateChartSummary]);
+    // Handle keyboard navigation
+    var handleKeyDown = useCallback(function (event) {
+        if (!enableKeyboardNavigation)
+            return;
+        // Enable keyboard mode on first keyboard interaction
+        if (!isKeyboardMode) {
+            setIsKeyboardMode(true);
+        }
+        var maxIndex = data.length - 1;
+        switch (event.key) {
+            case 'ArrowRight':
+            case 'ArrowDown':
+                event.preventDefault();
+                setFocusedElementIndex(function (prev) {
+                    return prev >= maxIndex ? 0 : prev + 1;
+                });
+                break;
+            case 'ArrowLeft':
+            case 'ArrowUp':
+                event.preventDefault();
+                setFocusedElementIndex(function (prev) {
+                    return prev <= 0 ? maxIndex : prev - 1;
+                });
+                break;
+            case 'Home':
+                event.preventDefault();
+                setFocusedElementIndex(0);
+                break;
+            case 'End':
+                event.preventDefault();
+                setFocusedElementIndex(maxIndex);
+                break;
+            case 'Escape':
+                event.preventDefault();
+                setFocusedElementIndex(-1);
+                setIsKeyboardMode(false);
+                break;
+        }
+    }, [enableKeyboardNavigation, isKeyboardMode, data.length]);
+    // Reset keyboard mode on mouse interaction
+    var handleMouseInteraction = useCallback(function () {
+        if (isKeyboardMode) {
+            setIsKeyboardMode(false);
+            setFocusedElementIndex(-1);
+        }
+    }, [isKeyboardMode]);
+    // Chart container accessibility props
+    var chartAccessibilityProps = {
+        role: 'img',
+        'aria-label': generateAriaLabel(),
+        'aria-describedby': description ? descriptionId.current : undefined,
+        tabIndex: enableKeyboardNavigation ? 0 : -1,
+        onKeyDown: handleKeyDown,
+    };
+    // Description element props
+    var descriptionProps = description ? {
+        id: descriptionId.current,
+        className: 'sr-only',
+        children: description,
+    } : null;
+    return {
+        chartAccessibilityProps: chartAccessibilityProps,
+        descriptionProps: descriptionProps,
+        focusedElementIndex: focusedElementIndex,
+        isKeyboardMode: isKeyboardMode,
+        handleMouseInteraction: handleMouseInteraction,
+        generateChartSummary: generateChartSummary,
+    };
+}
+
+export { useChartAccessibility };

package/dist/components/charts/hooks/useChartScales.js

@@ -0,0 +1,180 @@
+import { useMemo } from 'react';
+import { useChartValidation } from './useChartValidation.js';
+
+/**
+ * Smart rounding for line chart Y-axis (matches LineChart logic)
+ */
+function smartRoundMaxValue(rawMax) {
+    if (rawMax <= 10)
+        return Math.ceil(rawMax);
+    if (rawMax <= 100)
+        return Math.ceil(rawMax / 5) * 5;
+    if (rawMax <= 1000)
+        return Math.ceil(rawMax / 50) * 50;
+    if (rawMax <= 10000)
+        return Math.ceil(rawMax / 500) * 500;
+    return Math.ceil(rawMax / 1000) * 1000;
+}
+/**
+ * Unified hook for chart scale calculations
+ * Handles both bar and line charts with consistent logic
+ */
+function useChartScales(options) {
+    var data = options.data, config = options.config, _a = options.chartType, chartType = _a === void 0 ? 'bar' : _a, _b = options.stacked, stacked = _b === void 0 ? false : _b, propMinValue = options.minValue, propMaxValue = options.maxValue, _c = options.includeZero, includeZero = _c === void 0 ? true : _c, _d = options.innerWidth, innerWidth = _d === void 0 ? 600 : _d, _e = options.categoryGap, categoryGap = _e === void 0 ? 8 : _e, _f = options.useSmartRounding, useSmartRounding = _f === void 0 ? false : _f;
+    // Use validation hook for data sanitization and safe calculations
+    var _g = useChartValidation(data, config, {
+        autoSanitize: true,
+        logWarnings: true,
+    }); _g.validation; var sanitizedData = _g.sanitizedData, isValid = _g.isValid, hasWarnings = _g.hasWarnings, safeScale = _g.safeScale, safeMath = _g.safeMath;
+    // Get all data keys from config
+    var dataKeys = Object.keys(config || {});
+    // Calculate Y-axis scale
+    var yScale = useMemo(function () {
+        // Start with base scale calculation
+        var scaleRange = safeScale.calculateRange({
+            minValue: propMinValue,
+            maxValue: propMaxValue,
+            includeZero: includeZero,
+        });
+        // For stacked bar charts, recalculate max as sum of all values per category
+        if (chartType === 'bar' && stacked && propMaxValue === undefined && sanitizedData.length > 0) {
+            var maxStackedTotal = sanitizedData.reduce(function (maxTotal, item) {
+                var currentTotal = dataKeys.reduce(function (sum, key) {
+                    var value = item[key];
+                    return sum + (typeof value === "number" && isFinite(value) ? value : 0);
+                }, 0);
+                return Math.max(maxTotal, currentTotal);
+            }, 0);
+            scaleRange = safeScale.calculateRange({
+                minValue: propMinValue,
+                maxValue: maxStackedTotal,
+                includeZero: includeZero,
+            });
+        }
+        // For combo charts with stacked bars, also handle stacking
+        if (chartType === 'combo' && propMaxValue === undefined && sanitizedData.length > 0) {
+            // Separate bar and line series
+            var barKeys_1 = dataKeys.filter(function (key) {
+                var seriesConfig = config[key];
+                return !(seriesConfig === null || seriesConfig === void 0 ? void 0 : seriesConfig.type) || seriesConfig.type === 'bar';
+            });
+            var lineKeys_1 = dataKeys.filter(function (key) {
+                var seriesConfig = config[key];
+                return (seriesConfig === null || seriesConfig === void 0 ? void 0 : seriesConfig.type) === 'line';
+            });
+            // Calculate max for bars (stacked if needed)
+            var maxBarValue = stacked && barKeys_1.length > 0
+                ? sanitizedData.reduce(function (maxTotal, item) {
+                    var barTotal = barKeys_1.reduce(function (sum, key) {
+                        var value = item[key];
+                        return sum + (typeof value === "number" && isFinite(value) ? value : 0);
+                    }, 0);
+                    return Math.max(maxTotal, barTotal);
+                }, 0)
+                : sanitizedData.reduce(function (max, item) {
+                    var barMax = Math.max.apply(Math, barKeys_1.map(function (key) {
+                        var value = item[key];
+                        return typeof value === "number" && isFinite(value) ? value : 0;
+                    }));
+                    return Math.max(max, barMax);
+                }, 0);
+            // Calculate max for lines
+            var maxLineValue = lineKeys_1.length > 0
+                ? sanitizedData.reduce(function (max, item) {
+                    var lineMax = Math.max.apply(Math, lineKeys_1.map(function (key) {
+                        var value = item[key];
+                        return typeof value === "number" && isFinite(value) ? value : 0;
+                    }));
+                    return Math.max(max, lineMax);
+                }, 0)
+                : 0;
+            // Use the maximum of both
+            var combinedMax = Math.max(maxBarValue, maxLineValue);
+            scaleRange = safeScale.calculateRange({
+                minValue: propMinValue,
+                maxValue: combinedMax,
+                includeZero: includeZero,
+            });
+        }
+        // Apply smart rounding for line charts if requested
+        if (useSmartRounding && chartType === 'line' && propMaxValue === undefined) {
+            var rawMaxValue = Math.max.apply(Math, sanitizedData.map(function (item) {
+                return Math.max.apply(Math, dataKeys.map(function (key) {
+                    var value = item[key];
+                    return typeof value === "number" ? value : 0;
+                }));
+            }));
+            return {
+                min: propMinValue !== null && propMinValue !== void 0 ? propMinValue : 0,
+                max: smartRoundMaxValue(rawMaxValue),
+                hasValidData: scaleRange.hasValidData,
+            };
+        }
+        return scaleRange;
+    }, [
+        sanitizedData,
+        dataKeys,
+        config,
+        chartType,
+        stacked,
+        propMinValue,
+        propMaxValue,
+        includeZero,
+        safeScale,
+        useSmartRounding,
+    ]);
+    // Calculate X-axis scale
+    var xScale = useMemo(function () {
+        var dataLength = sanitizedData.length;
+        if (dataLength === 0) {
+            return {
+                categoryWidth: 0,
+                totalWidth: 0,
+                pointPosition: function () { return 0; },
+            };
+        }
+        // For bar charts
+        if (chartType === 'bar' || chartType === 'combo') {
+            var totalCategoryGap = Math.max(0, (dataLength - 1) * categoryGap);
+            var availableWidth = Math.max(0, innerWidth - totalCategoryGap);
+            var categoryWidth_1 = safeMath.divide(availableWidth, dataLength, 0);
+            return {
+                categoryWidth: categoryWidth_1,
+                totalWidth: availableWidth + totalCategoryGap,
+                pointPosition: function (index) { return index * (categoryWidth_1 + categoryGap); },
+            };
+        }
+        // For line charts - points spread evenly across width
+        if (chartType === 'line') {
+            var categoryWidth = dataLength === 1 ? innerWidth : innerWidth / (dataLength - 1);
+            return {
+                categoryWidth: categoryWidth,
+                totalWidth: innerWidth,
+                pointPosition: function (index) {
+                    if (dataLength === 1)
+                        return innerWidth / 2;
+                    return (index / (dataLength - 1)) * innerWidth;
+                },
+            };
+        }
+        // Default fallback
+        return {
+            categoryWidth: innerWidth / Math.max(1, dataLength),
+            totalWidth: innerWidth,
+            pointPosition: function (index) { return (index / Math.max(1, dataLength)) * innerWidth; },
+        };
+    }, [sanitizedData.length, chartType, categoryGap, innerWidth, safeMath]);
+    return {
+        scales: {
+            y: yScale,
+            x: xScale,
+        },
+        sanitizedData: sanitizedData,
+        isValid: isValid,
+        hasWarnings: hasWarnings,
+        safeMath: safeMath,
+        safeScale: safeScale,
+    };
+}
+
+export { useChartScales };

package/dist/components/charts/hooks/useChartTheme.js

@@ -0,0 +1,86 @@
+import { __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
+import { useMemo } from 'react';
+import { chartTheme } from '../theme/chart.theme.js';
+
+function useChartTheme(_a) {
+    var config = _a.config, _b = _a.variant, variant = _b === void 0 ? 'default' : _b, theme = _a.theme;
+    var resolvedTheme = useMemo(function () {
+        var _a, _b, _c;
+        // Merge default theme with overrides
+        var mergedTheme = __assign(__assign({}, chartTheme), { baseStyle: __assign(__assign(__assign({}, chartTheme.baseStyle), ((theme === null || theme === void 0 ? void 0 : theme.baseStyle) || {})), { colors: __assign(__assign({}, chartTheme.baseStyle.colors), (((_a = theme === null || theme === void 0 ? void 0 : theme.baseStyle) === null || _a === void 0 ? void 0 : _a.colors) || {})), opacity: __assign(__assign({}, chartTheme.baseStyle.opacity), (((_b = theme === null || theme === void 0 ? void 0 : theme.baseStyle) === null || _b === void 0 ? void 0 : _b.opacity) || {})), transitions: __assign(__assign({}, chartTheme.baseStyle.transitions), (((_c = theme === null || theme === void 0 ? void 0 : theme.baseStyle) === null || _c === void 0 ? void 0 : _c.transitions) || {})) }), variants: __assign(__assign({}, chartTheme.variants), theme === null || theme === void 0 ? void 0 : theme.variants) });
+        return mergedTheme;
+    }, [theme]);
+    var getSeriesColor = useMemo(function () {
+        return function (dataKey, index) {
+            var _a, _b, _c;
+            // Add null check for config
+            if (!config || typeof config !== 'object') {
+                // Use base series colors as fallback
+                var seriesColors_1 = resolvedTheme.baseStyle.colors.series;
+                return seriesColors_1[index % seriesColors_1.length];
+            }
+            // Priority 1: Check if config has a specific color for this dataKey
+            if ((_a = config[dataKey]) === null || _a === void 0 ? void 0 : _a.color) {
+                return config[dataKey].color;
+            }
+            // Priority 2: Use variant colors if available
+            var variantColors = (_c = (_b = resolvedTheme.variants) === null || _b === void 0 ? void 0 : _b[variant]) === null || _c === void 0 ? void 0 : _c.colors;
+            if (variantColors && variantColors.length > 0) {
+                return variantColors[index % variantColors.length];
+            }
+            // Priority 3: Use base series colors
+            var seriesColors = resolvedTheme.baseStyle.colors.series;
+            return seriesColors[index % seriesColors.length];
+        };
+    }, [config, variant, resolvedTheme]);
+    var getColorClass = useMemo(function () {
+        return function (type) {
+            return resolvedTheme.baseStyle.colors[type];
+        };
+    }, [resolvedTheme]);
+    var getOpacityClass = useMemo(function () {
+        return function (type) {
+            return resolvedTheme.baseStyle.opacity[type];
+        };
+    }, [resolvedTheme]);
+    var getTransitionClass = useMemo(function () {
+        return function (type) {
+            return resolvedTheme.baseStyle.transitions[type];
+        };
+    }, [resolvedTheme]);
+    // Generate CSS variables for dynamic colors (for cases where Tailwind classes aren't enough)
+    var chartColors = useMemo(function () {
+        var colors = {};
+        // Add null check for config
+        if (!config || typeof config !== 'object') {
+            return colors;
+        }
+        Object.entries(config).forEach(function (_a) {
+            var key = _a[0], value = _a[1];
+            if (value === null || value === void 0 ? void 0 : value.color) {
+                colors["--color-".concat(key)] = value.color;
+            }
+            else if ((value === null || value === void 0 ? void 0 : value.theme) && typeof value.theme === 'string') {
+                // Handle theme-based colors
+                colors["--color-".concat(key)] = value.theme;
+            }
+        });
+        return colors;
+    }, [config]);
+    var getThemeValue = function (key) {
+        return "var(--color-".concat(key, ")");
+    };
+    return {
+        // New theme utilities
+        getSeriesColor: getSeriesColor,
+        getColorClass: getColorClass,
+        getOpacityClass: getOpacityClass,
+        getTransitionClass: getTransitionClass,
+        resolvedTheme: resolvedTheme,
+        // Legacy utilities (for backward compatibility)
+        chartColors: chartColors,
+        getThemeValue: getThemeValue,
+    };
+}
+
+export { useChartTheme };

package/dist/components/charts/hooks/useChartValidation.js

@@ -0,0 +1,59 @@
+import { useMemo, useCallback } from 'react';
+import { validateChart, sanitizeChartData, calculateSafeScaleRange, SafeMath } from '../utils/chart-validation.js';
+
+/**
+ * Hook for comprehensive chart validation and error handling
+ */
+function useChartValidation(data, config, options) {
+    if (options === void 0) { options = {}; }
+    var _a = options.autoSanitize, autoSanitize = _a === void 0 ? true : _a, _b = options.logWarnings, logWarnings = _b === void 0 ? process.env.NODE_ENV === 'development' : _b, onValidationError = options.onValidationError, onValidationWarning = options.onValidationWarning;
+    // Memoized validation result
+    var validation = useMemo(function () {
+        var result = validateChart(data, config);
+        // Handle errors
+        if (result.errors.length > 0 && onValidationError) {
+            onValidationError(result.errors);
+        }
+        // Handle warnings
+        if (result.warnings.length > 0) {
+            if (logWarnings) {
+                console.warn('Chart validation warnings:', result.warnings);
+            }
+            if (onValidationWarning) {
+                onValidationWarning(result.warnings);
+            }
+        }
+        return result;
+    }, [data, config, onValidationError, onValidationWarning, logWarnings]);
+    // Sanitized data
+    var sanitizedData = useMemo(function () {
+        if (!autoSanitize || !Array.isArray(data)) {
+            return Array.isArray(data) ? data : [];
+        }
+        return sanitizeChartData(data);
+    }, [data, autoSanitize]);
+    // Safe scale calculation
+    var safeScale = useMemo(function () { return ({
+        calculateRange: function (options) {
+            var validData = autoSanitize ? sanitizedData : (Array.isArray(data) ? data : []);
+            var validConfig = (config && typeof config === 'object') ? config : {};
+            return calculateSafeScaleRange(validData, validConfig, options);
+        }
+    }); }, [sanitizedData, data, config, autoSanitize]);
+    // Manual revalidation trigger
+    var revalidate = useCallback(function () {
+        // This will trigger re-computation of the validation memoized value
+        // by updating a dependency (though in this case, we rely on the data/config changes)
+    }, []);
+    return {
+        validation: validation,
+        sanitizedData: sanitizedData,
+        isValid: validation.isValid,
+        hasWarnings: validation.warnings.length > 0,
+        safeScale: safeScale,
+        safeMath: SafeMath,
+        revalidate: revalidate,
+    };
+}
+
+export { useChartValidation };