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

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

@@ -0,0 +1,178 @@
+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) {
+    const { data, config, chartType = 'bar', stacked = false, minValue: propMinValue, maxValue: propMaxValue, includeZero = true, innerWidth = 600, categoryGap = 8, useSmartRounding = false, } = options;
+    // Use validation hook for data sanitization and safe calculations
+    const { validation, sanitizedData, isValid, hasWarnings, safeScale, safeMath, } = useChartValidation(data, config, {
+        autoSanitize: true,
+        logWarnings: true,
+    });
+    // Get all data keys from config
+    const dataKeys = Object.keys(config || {});
+    // Calculate Y-axis scale
+    const yScale = useMemo(() => {
+        // Start with base scale calculation
+        let scaleRange = safeScale.calculateRange({
+            minValue: propMinValue,
+            maxValue: propMaxValue,
+            includeZero,
+        });
+        // For stacked bar charts, recalculate max as sum of all values per category
+        if (chartType === 'bar' && stacked && propMaxValue === undefined && sanitizedData.length > 0) {
+            const maxStackedTotal = sanitizedData.reduce((maxTotal, item) => {
+                const currentTotal = dataKeys.reduce((sum, key) => {
+                    const 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,
+            });
+        }
+        // For combo charts with stacked bars, also handle stacking
+        if (chartType === 'combo' && propMaxValue === undefined && sanitizedData.length > 0) {
+            // Separate bar and line series
+            const barKeys = dataKeys.filter((key) => {
+                const seriesConfig = config[key];
+                return !(seriesConfig === null || seriesConfig === void 0 ? void 0 : seriesConfig.type) || seriesConfig.type === 'bar';
+            });
+            const lineKeys = dataKeys.filter((key) => {
+                const seriesConfig = config[key];
+                return (seriesConfig === null || seriesConfig === void 0 ? void 0 : seriesConfig.type) === 'line';
+            });
+            // Calculate max for bars (stacked if needed)
+            const maxBarValue = stacked && barKeys.length > 0
+                ? sanitizedData.reduce((maxTotal, item) => {
+                    const barTotal = barKeys.reduce((sum, key) => {
+                        const value = item[key];
+                        return sum + (typeof value === "number" && isFinite(value) ? value : 0);
+                    }, 0);
+                    return Math.max(maxTotal, barTotal);
+                }, 0)
+                : sanitizedData.reduce((max, item) => {
+                    const barMax = Math.max(...barKeys.map(key => {
+                        const value = item[key];
+                        return typeof value === "number" && isFinite(value) ? value : 0;
+                    }));
+                    return Math.max(max, barMax);
+                }, 0);
+            // Calculate max for lines
+            const maxLineValue = lineKeys.length > 0
+                ? sanitizedData.reduce((max, item) => {
+                    const lineMax = Math.max(...lineKeys.map(key => {
+                        const value = item[key];
+                        return typeof value === "number" && isFinite(value) ? value : 0;
+                    }));
+                    return Math.max(max, lineMax);
+                }, 0)
+                : 0;
+            // Use the maximum of both
+            const combinedMax = Math.max(maxBarValue, maxLineValue);
+            scaleRange = safeScale.calculateRange({
+                minValue: propMinValue,
+                maxValue: combinedMax,
+                includeZero,
+            });
+        }
+        // Apply smart rounding for line charts if requested
+        if (useSmartRounding && chartType === 'line' && propMaxValue === undefined) {
+            const rawMaxValue = Math.max(...sanitizedData.map((item) => Math.max(...dataKeys.map((key) => {
+                const 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
+    const xScale = useMemo(() => {
+        const dataLength = sanitizedData.length;
+        if (dataLength === 0) {
+            return {
+                categoryWidth: 0,
+                totalWidth: 0,
+                pointPosition: () => 0,
+            };
+        }
+        // For bar charts
+        if (chartType === 'bar' || chartType === 'combo') {
+            const totalCategoryGap = Math.max(0, (dataLength - 1) * categoryGap);
+            const availableWidth = Math.max(0, innerWidth - totalCategoryGap);
+            const categoryWidth = safeMath.divide(availableWidth, dataLength, 0);
+            return {
+                categoryWidth,
+                totalWidth: availableWidth + totalCategoryGap,
+                pointPosition: (index) => index * (categoryWidth + categoryGap),
+            };
+        }
+        // For line charts - points spread evenly across width
+        if (chartType === 'line') {
+            const categoryWidth = dataLength === 1 ? innerWidth : innerWidth / (dataLength - 1);
+            return {
+                categoryWidth,
+                totalWidth: innerWidth,
+                pointPosition: (index) => {
+                    if (dataLength === 1)
+                        return innerWidth / 2;
+                    return (index / (dataLength - 1)) * innerWidth;
+                },
+            };
+        }
+        // Default fallback
+        return {
+            categoryWidth: innerWidth / Math.max(1, dataLength),
+            totalWidth: innerWidth,
+            pointPosition: (index) => (index / Math.max(1, dataLength)) * innerWidth,
+        };
+    }, [sanitizedData.length, chartType, categoryGap, innerWidth, safeMath]);
+    return {
+        scales: {
+            y: yScale,
+            x: xScale,
+        },
+        sanitizedData,
+        isValid,
+        hasWarnings,
+        safeMath,
+        safeScale,
+    };
+}
+
+export { useChartScales };

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

@@ -1,85 +1,104 @@
-import { __assign } from '../../../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 () {
+function useChartTheme({ config, variant = 'default', theme }) {
+    const resolvedTheme = useMemo(() => {
         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) });
+        const mergedTheme = {
+            ...chartTheme,
+            baseStyle: {
+                ...chartTheme.baseStyle,
+                ...((theme === null || theme === void 0 ? void 0 : theme.baseStyle) || {}),
+                colors: {
+                    ...chartTheme.baseStyle.colors,
+                    ...(((_a = theme === null || theme === void 0 ? void 0 : theme.baseStyle) === null || _a === void 0 ? void 0 : _a.colors) || {}),
+                },
+                opacity: {
+                    ...chartTheme.baseStyle.opacity,
+                    ...(((_b = theme === null || theme === void 0 ? void 0 : theme.baseStyle) === null || _b === void 0 ? void 0 : _b.opacity) || {}),
+                },
+                transitions: {
+                    ...chartTheme.baseStyle.transitions,
+                    ...(((_c = theme === null || theme === void 0 ? void 0 : theme.baseStyle) === null || _c === void 0 ? void 0 : _c.transitions) || {}),
+                },
+            },
+            variants: {
+                ...chartTheme.variants,
+                ...theme === null || theme === void 0 ? void 0 : theme.variants,
+            },
+        };
         return mergedTheme;
     }, [theme]);
-    var getSeriesColor = useMemo(function () {
-        return function (dataKey, index) {
+    const getSeriesColor = useMemo(() => {
+        return (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];
+                const seriesColors = resolvedTheme.baseStyle.colors.series;
+                return seriesColors[index % seriesColors.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;
+            const 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;
+            const seriesColors = resolvedTheme.baseStyle.colors.series;
             return seriesColors[index % seriesColors.length];
         };
     }, [config, variant, resolvedTheme]);
-    var getColorClass = useMemo(function () {
-        return function (type) {
+    const getColorClass = useMemo(() => {
+        return (type) => {
             return resolvedTheme.baseStyle.colors[type];
         };
     }, [resolvedTheme]);
-    var getOpacityClass = useMemo(function () {
-        return function (type) {
+    const getOpacityClass = useMemo(() => {
+        return (type) => {
             return resolvedTheme.baseStyle.opacity[type];
         };
     }, [resolvedTheme]);
-    var getTransitionClass = useMemo(function () {
-        return function (type) {
+    const getTransitionClass = useMemo(() => {
+        return (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 = {};
+    const chartColors = useMemo(() => {
+        const 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];
+        Object.entries(config).forEach(([key, value]) => {
             if (value === null || value === void 0 ? void 0 : value.color) {
-                colors["--color-".concat(key)] = value.color;
+                colors[`--color-${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;
+                colors[`--color-${key}`] = value.theme;
             }
         });
         return colors;
     }, [config]);
-    var getThemeValue = function (key) {
-        return "var(--color-".concat(key, ")");
+    const getThemeValue = (key) => {
+        return `var(--color-${key})`;
     };
     return {
         // New theme utilities
-        getSeriesColor: getSeriesColor,
-        getColorClass: getColorClass,
-        getOpacityClass: getOpacityClass,
-        getTransitionClass: getTransitionClass,
-        resolvedTheme: resolvedTheme,
+        getSeriesColor,
+        getColorClass,
+        getOpacityClass,
+        getTransitionClass,
+        resolvedTheme,
         // Legacy utilities (for backward compatibility)
-        chartColors: chartColors,
-        getThemeValue: getThemeValue,
+        chartColors,
+        getThemeValue,
     };
 }
 

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

@@ -4,12 +4,11 @@ import { validateChart, sanitizeChartData, calculateSafeScaleRange, SafeMath } f
 /**
  * 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;
+function useChartValidation(data, config, options = {}) {
+    const { autoSanitize = true, logWarnings = process.env.NODE_ENV === 'development', onValidationError, onValidationWarning, } = options;
     // Memoized validation result
-    var validation = useMemo(function () {
-        var result = validateChart(data, config);
+    const validation = useMemo(() => {
+        const result = validateChart(data, config);
         // Handle errors
         if (result.errors.length > 0 && onValidationError) {
             onValidationError(result.errors);
@@ -26,33 +25,33 @@ function useChartValidation(data, config, options) {
         return result;
     }, [data, config, onValidationError, onValidationWarning, logWarnings]);
     // Sanitized data
-    var sanitizedData = useMemo(function () {
+    const sanitizedData = useMemo(() => {
         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 : {};
+    const safeScale = useMemo(() => ({
+        calculateRange: (options) => {
+            const validData = autoSanitize ? sanitizedData : (Array.isArray(data) ? data : []);
+            const validConfig = (config && typeof config === 'object') ? config : {};
             return calculateSafeScaleRange(validData, validConfig, options);
         }
-    }); }, [sanitizedData, data, config, autoSanitize]);
+    }), [sanitizedData, data, config, autoSanitize]);
     // Manual revalidation trigger
-    var revalidate = useCallback(function () {
+    const revalidate = useCallback(() => {
         // 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,
+        validation,
+        sanitizedData,
         isValid: validation.isValid,
         hasWarnings: validation.warnings.length > 0,
-        safeScale: safeScale,
+        safeScale,
         safeMath: SafeMath,
-        revalidate: revalidate,
+        revalidate,
     };
 }