funuicss 3.7.0 → 3.7.2

package/ui/chart/Line.js

@@ -48,190 +48,270 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var recharts_1 = require("recharts");
 var componentUtils_1 = require("../../utils/componentUtils");
-// Parse string to object utility
+// Parse string to object utility with enhanced error handling
 var parseIfString = function (value, fallback) {
     if (typeof value === 'string') {
         try {
-            return JSON.parse(value);
+            var parsed = JSON.parse(value);
+            // Additional validation for arrays
+            if (Array.isArray(fallback) && !Array.isArray(parsed)) {
+                console.warn('Parsed value is not an array, using fallback');
+                return fallback;
+            }
+            return parsed;
         }
         catch (error) {
             console.error('Failed to parse JSON string:', error);
             return fallback;
         }
     }
+    // Handle null/undefined values
+    if (value == null) {
+        return fallback;
+    }
+    return value;
+};
+// Safe array access utility
+var getSafeArray = function (value, fallback) {
+    if (fallback === void 0) { fallback = []; }
+    if (!value || !Array.isArray(value))
+        return fallback;
     return value;
 };
-// CSS var resolver
+// CSS var resolver with error handling
 var getCssVar = function (varName) {
     var _a;
     if (typeof window === 'undefined')
         return '';
-    return ((_a = getComputedStyle(document.documentElement).getPropertyValue("--".concat(varName))) === null || _a === void 0 ? void 0 : _a.trim()) || '';
+    try {
+        return ((_a = getComputedStyle(document.documentElement).getPropertyValue("--".concat(varName))) === null || _a === void 0 ? void 0 : _a.trim()) || '';
+    }
+    catch (error) {
+        console.warn("Failed to get CSS variable --".concat(varName, ":"), error);
+        return '';
+    }
 };
-// Color resolver
+// Color resolver with fallbacks
 var resolveStrokeColor = function (color) {
     if (!color)
         return getCssVar('primary') || '#8884d8';
     if (color.startsWith('#'))
         return color;
-    return getCssVar(color) || color;
+    var cssColor = getCssVar(color);
+    if (cssColor)
+        return cssColor;
+    // Fallback to common color names if CSS var not found
+    var colorMap = {
+        primary: '#8884d8',
+        secondary: '#82ca9d',
+        error: '#ff4d4f',
+        warning: '#faad14',
+        success: '#52c41a'
+    };
+    return colorMap[color] || color || '#8884d8';
 };
-// Default Tooltip
+// Default Tooltip with error handling
 var CustomTooltip = function (_a) {
     var active = _a.active, payload = _a.payload, label = _a.label, formatter = _a.formatter;
-    if (active && payload && payload.length) {
+    if (!active || !payload || !Array.isArray(payload) || payload.length === 0) {
+        return null;
+    }
+    try {
         return (react_1.default.createElement("div", { className: "card raised round-edge p-2 text-sm", style: {
                 maxWidth: '300px'
             } },
-            react_1.default.createElement("div", { className: "text-bold mb-1" }, label),
-            payload.map(function (entry, index) { return (react_1.default.createElement("div", { key: index, style: {
-                    lineHeight: 1.4,
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: '8px'
-                } },
-                react_1.default.createElement("div", { style: {
-                        width: '12px',
-                        height: '12px',
-                        backgroundColor: entry.color,
-                        borderRadius: '2px'
-                    } }),
-                react_1.default.createElement("span", { style: { fontWeight: 500 } },
-                    entry.name,
-                    ":"),
-                react_1.default.createElement("span", { style: { fontWeight: 600, color: 'var(--text-color, #1a202c)' } }, formatter ? formatter(entry.value, entry.name, entry) : entry.value))); })));
+            react_1.default.createElement("div", { className: "text-bold mb-1" }, label || 'N/A'),
+            payload.map(function (entry, index) {
+                if (!entry)
+                    return null;
+                var value = formatter ? formatter(entry.value, entry.name, entry) : entry.value;
+                var displayValue = value != null ? value : 'N/A';
+                var displayName = entry.name || 'Unknown';
+                var displayColor = entry.color || '#8884d8';
+                return (react_1.default.createElement("div", { key: index, style: {
+                        lineHeight: 1.4,
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: '8px'
+                    } },
+                    react_1.default.createElement("div", { style: {
+                            width: '12px',
+                            height: '12px',
+                            backgroundColor: displayColor,
+                            borderRadius: '2px'
+                        } }),
+                    react_1.default.createElement("span", { style: { fontWeight: 500 } },
+                        displayName,
+                        ":"),
+                    react_1.default.createElement("span", { style: { fontWeight: 600, color: 'var(--text-color, #1a202c)' } }, displayValue)));
+            })));
+    }
+    catch (error) {
+        console.error('Error rendering tooltip:', error);
+        return (react_1.default.createElement("div", { className: "card raised round-edge p-2 text-sm" },
+            react_1.default.createElement("div", { className: "text-error" }, "Error displaying tooltip")));
     }
-    return null;
 };
 var Lines = function (_a) {
-    var _b;
-    var data = _a.data, id = _a.id, series = _a.series, fromColor = _a.fromColor, toColor = _a.toColor, dy = _a.dy, _c = _a.showGrid, showGrid = _c === void 0 ? true : _c, _d = _a.horizontalLines, horizontalLines = _d === void 0 ? false : _d, _e = _a.showLegend, showLegend = _e === void 0 ? true : _e, _f = _a.showXAxis, showXAxis = _f === void 0 ? true : _f, _g = _a.showYAxis, showYAxis = _g === void 0 ? false : _g, _h = _a.showTooltip, showTooltip = _h === void 0 ? true : _h, funcss = _a.funcss, _j = _a.curveType, curveType = _j === void 0 ? 'monotone' : _j, _k = _a.height, height = _k === void 0 ? "100%" : _k, _l = _a.width, width = _l === void 0 ? '100%' : _l, _m = _a.margin, margin = _m === void 0 ? { top: 10, right: 30, left: 0, bottom: 20 } : _m, _o = _a.xAxisProps, xAxisProps = _o === void 0 ? {} : _o, _p = _a.yAxisProps, yAxisProps = _p === void 0 ? {} : _p, tooltipFormatter = _a.tooltipFormatter, _q = _a.legendProps, legendProps = _q === void 0 ? {} : _q, _r = _a.tooltipProps, tooltipProps = _r === void 0 ? {} : _r, rotateLabel = _a.rotateLabel, xLabelSize = _a.xLabelSize, yLabelSize = _a.yLabelSize, xInterval = _a.xInterval, yInterval = _a.yInterval, _s = _a.variant, variant = _s === void 0 ? '' : _s, xAxisLabel = _a.xAxisLabel, yAxisLabel = _a.yAxisLabel, _t = _a.tickLine, tickLine = _t === void 0 ? true : _t, _u = _a.axisLine, axisLine = _u === void 0 ? true : _u, gridStroke = _a.gridStroke, _v = _a.gridStrokeDasharray, gridStrokeDasharray = _v === void 0 ? "3 3" : _v, customTooltip = _a.customTooltip, _w = _a.animation, animation = _w === void 0 ? true : _w, _x = _a.animationDuration, animationDuration = _x === void 0 ? 500 : _x, _y = _a.isAnimationActive, isAnimationActive = _y === void 0 ? true : _y, syncId = _a.syncId, chartBackground = _a.chartBackground, borderRadius = _a.borderRadius, padding = _a.padding, _z = _a.shadow, shadow = _z === void 0 ? false : _z, aspect = _a.aspect, minHeight = _a.minHeight, maxHeight = _a.maxHeight, minWidth = _a.minWidth, maxWidth = _a.maxWidth;
-    // Use component configuration with variant support
+    var _b, _c;
+    var data = _a.data, id = _a.id, series = _a.series, fromColor = _a.fromColor, toColor = _a.toColor, dy = _a.dy, _d = _a.showGrid, showGrid = _d === void 0 ? true : _d, _e = _a.horizontalLines, horizontalLines = _e === void 0 ? false : _e, _f = _a.showLegend, showLegend = _f === void 0 ? true : _f, _g = _a.showXAxis, showXAxis = _g === void 0 ? true : _g, _h = _a.showYAxis, showYAxis = _h === void 0 ? false : _h, _j = _a.showTooltip, showTooltip = _j === void 0 ? true : _j, funcss = _a.funcss, _k = _a.curveType, curveType = _k === void 0 ? 'monotone' : _k, _l = _a.height, height = _l === void 0 ? "100%" : _l, _m = _a.width, width = _m === void 0 ? '100%' : _m, _o = _a.margin, margin = _o === void 0 ? { top: 10, right: 30, left: 0, bottom: 20 } : _o, _p = _a.xAxisProps, xAxisProps = _p === void 0 ? {} : _p, _q = _a.yAxisProps, yAxisProps = _q === void 0 ? {} : _q, tooltipFormatter = _a.tooltipFormatter, _r = _a.legendProps, legendProps = _r === void 0 ? {} : _r, _s = _a.tooltipProps, tooltipProps = _s === void 0 ? {} : _s, rotateLabel = _a.rotateLabel, xLabelSize = _a.xLabelSize, yLabelSize = _a.yLabelSize, xInterval = _a.xInterval, yInterval = _a.yInterval, _t = _a.variant, variant = _t === void 0 ? '' : _t, xAxisLabel = _a.xAxisLabel, yAxisLabel = _a.yAxisLabel, _u = _a.tickLine, tickLine = _u === void 0 ? true : _u, _v = _a.axisLine, axisLine = _v === void 0 ? true : _v, gridStroke = _a.gridStroke, _w = _a.gridStrokeDasharray, gridStrokeDasharray = _w === void 0 ? "3 3" : _w, customTooltip = _a.customTooltip, _x = _a.animation, animation = _x === void 0 ? true : _x, _y = _a.animationDuration, animationDuration = _y === void 0 ? 500 : _y, _z = _a.isAnimationActive, isAnimationActive = _z === void 0 ? true : _z, syncId = _a.syncId, chartBackground = _a.chartBackground, borderRadius = _a.borderRadius, padding = _a.padding, _0 = _a.shadow, shadow = _0 === void 0 ? false : _0, aspect = _a.aspect, minHeight = _a.minHeight, maxHeight = _a.maxHeight, minWidth = _a.minWidth, maxWidth = _a.maxWidth;
+    // Use component configuration with variant support and error handling
     var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('AreaChart', variant).mergeWithLocal;
-    // Create local props object
+    // Create local props object with null checks
     var localProps = {
-        data: data,
-        id: id,
-        series: series,
-        fromColor: fromColor,
-        toColor: toColor,
-        dy: dy,
-        showGrid: showGrid,
-        horizontalLines: horizontalLines,
-        showLegend: showLegend,
-        showXAxis: showXAxis,
-        showYAxis: showYAxis,
-        showTooltip: showTooltip,
-        funcss: funcss,
-        curveType: curveType,
-        height: height,
-        width: width,
-        margin: margin,
-        xAxisProps: xAxisProps,
-        yAxisProps: yAxisProps,
-        tooltipFormatter: tooltipFormatter,
-        legendProps: legendProps,
-        tooltipProps: tooltipProps,
-        rotateLabel: rotateLabel,
-        xLabelSize: xLabelSize,
-        yLabelSize: yLabelSize,
-        xInterval: xInterval,
-        yInterval: yInterval,
-        xAxisLabel: xAxisLabel,
-        yAxisLabel: yAxisLabel,
-        tickLine: tickLine,
-        axisLine: axisLine,
-        gridStroke: gridStroke,
-        gridStrokeDasharray: gridStrokeDasharray,
-        customTooltip: customTooltip,
-        animation: animation,
-        animationDuration: animationDuration,
-        isAnimationActive: isAnimationActive,
-        syncId: syncId,
-        chartBackground: chartBackground,
-        borderRadius: borderRadius,
-        padding: padding,
-        shadow: shadow,
-        aspect: aspect,
-        minHeight: minHeight,
-        maxHeight: maxHeight,
-        minWidth: minWidth,
-        maxWidth: maxWidth
+        data: data !== null && data !== void 0 ? data : [],
+        id: id !== null && id !== void 0 ? id : '',
+        series: series !== null && series !== void 0 ? series : [],
+        fromColor: fromColor !== null && fromColor !== void 0 ? fromColor : '',
+        toColor: toColor !== null && toColor !== void 0 ? toColor : '',
+        dy: dy !== null && dy !== void 0 ? dy : 0,
+        showGrid: showGrid !== null && showGrid !== void 0 ? showGrid : true,
+        horizontalLines: horizontalLines !== null && horizontalLines !== void 0 ? horizontalLines : false,
+        showLegend: showLegend !== null && showLegend !== void 0 ? showLegend : true,
+        showXAxis: showXAxis !== null && showXAxis !== void 0 ? showXAxis : true,
+        showYAxis: showYAxis !== null && showYAxis !== void 0 ? showYAxis : false,
+        showTooltip: showTooltip !== null && showTooltip !== void 0 ? showTooltip : true,
+        funcss: funcss !== null && funcss !== void 0 ? funcss : '',
+        curveType: curveType !== null && curveType !== void 0 ? curveType : 'monotone',
+        height: height !== null && height !== void 0 ? height : "100%",
+        width: width !== null && width !== void 0 ? width : '100%',
+        margin: margin !== null && margin !== void 0 ? margin : { top: 10, right: 30, left: 0, bottom: 20 },
+        xAxisProps: xAxisProps !== null && xAxisProps !== void 0 ? xAxisProps : {},
+        yAxisProps: yAxisProps !== null && yAxisProps !== void 0 ? yAxisProps : {},
+        tooltipFormatter: tooltipFormatter !== null && tooltipFormatter !== void 0 ? tooltipFormatter : undefined,
+        legendProps: legendProps !== null && legendProps !== void 0 ? legendProps : {},
+        tooltipProps: tooltipProps !== null && tooltipProps !== void 0 ? tooltipProps : {},
+        rotateLabel: rotateLabel !== null && rotateLabel !== void 0 ? rotateLabel : 0,
+        xLabelSize: xLabelSize !== null && xLabelSize !== void 0 ? xLabelSize : "0.8rem",
+        yLabelSize: yLabelSize !== null && yLabelSize !== void 0 ? yLabelSize : "0.8rem",
+        xInterval: xInterval !== null && xInterval !== void 0 ? xInterval : undefined,
+        yInterval: yInterval !== null && yInterval !== void 0 ? yInterval : undefined,
+        xAxisLabel: xAxisLabel !== null && xAxisLabel !== void 0 ? xAxisLabel : '',
+        yAxisLabel: yAxisLabel !== null && yAxisLabel !== void 0 ? yAxisLabel : '',
+        tickLine: tickLine !== null && tickLine !== void 0 ? tickLine : true,
+        axisLine: axisLine !== null && axisLine !== void 0 ? axisLine : true,
+        gridStroke: gridStroke !== null && gridStroke !== void 0 ? gridStroke : '',
+        gridStrokeDasharray: gridStrokeDasharray !== null && gridStrokeDasharray !== void 0 ? gridStrokeDasharray : "3 3",
+        customTooltip: customTooltip !== null && customTooltip !== void 0 ? customTooltip : undefined,
+        animation: animation !== null && animation !== void 0 ? animation : true,
+        animationDuration: animationDuration !== null && animationDuration !== void 0 ? animationDuration : 500,
+        isAnimationActive: isAnimationActive !== null && isAnimationActive !== void 0 ? isAnimationActive : true,
+        syncId: syncId !== null && syncId !== void 0 ? syncId : '',
+        chartBackground: chartBackground !== null && chartBackground !== void 0 ? chartBackground : '',
+        borderRadius: borderRadius !== null && borderRadius !== void 0 ? borderRadius : '',
+        padding: padding !== null && padding !== void 0 ? padding : '',
+        shadow: shadow !== null && shadow !== void 0 ? shadow : false,
+        aspect: aspect !== null && aspect !== void 0 ? aspect : undefined,
+        minHeight: minHeight !== null && minHeight !== void 0 ? minHeight : undefined,
+        maxHeight: maxHeight !== null && maxHeight !== void 0 ? maxHeight : undefined,
+        minWidth: minWidth !== null && minWidth !== void 0 ? minWidth : undefined,
+        maxWidth: maxWidth !== null && maxWidth !== void 0 ? maxWidth : undefined
     };
-    // Merge with config - LOCAL PROPS OVERRIDE CONFIG
-    var mergedProps = mergeWithLocal(localProps).props;
-    // Parse data and series if they're strings
-    var parsedData = (0, react_1.useMemo)(function () { return parseIfString(mergedProps.data, []); }, [mergedProps.data]);
-    var parsedSeries = (0, react_1.useMemo)(function () { return parseIfString(mergedProps.series, []); }, [mergedProps.series]);
-    // Extract final values
-    var final = (0, react_1.useMemo)(function () { return ({
-        data: parsedData,
-        id: mergedProps.id,
-        series: parsedSeries,
-        fromColor: mergedProps.fromColor,
-        toColor: mergedProps.toColor,
-        dy: mergedProps.dy,
-        showGrid: mergedProps.showGrid,
-        horizontalLines: mergedProps.horizontalLines,
-        showLegend: mergedProps.showLegend,
-        showXAxis: mergedProps.showXAxis,
-        showYAxis: mergedProps.showYAxis,
-        showTooltip: mergedProps.showTooltip,
-        funcss: mergedProps.funcss,
-        curveType: mergedProps.curveType,
-        height: mergedProps.height,
-        width: mergedProps.width,
-        margin: mergedProps.margin,
-        xAxisProps: mergedProps.xAxisProps,
-        yAxisProps: mergedProps.yAxisProps,
-        tooltipFormatter: mergedProps.tooltipFormatter,
-        legendProps: mergedProps.legendProps,
-        tooltipProps: mergedProps.tooltipProps,
-        rotateLabel: mergedProps.rotateLabel,
-        xLabelSize: mergedProps.xLabelSize,
-        yLabelSize: mergedProps.yLabelSize,
-        xInterval: mergedProps.xInterval,
-        yInterval: mergedProps.yInterval,
-        xAxisLabel: mergedProps.xAxisLabel,
-        yAxisLabel: mergedProps.yAxisLabel,
-        tickLine: mergedProps.tickLine,
-        axisLine: mergedProps.axisLine,
-        gridStroke: mergedProps.gridStroke,
-        gridStrokeDasharray: mergedProps.gridStrokeDasharray,
-        customTooltip: mergedProps.customTooltip,
-        animation: mergedProps.animation,
-        animationDuration: mergedProps.animationDuration,
-        isAnimationActive: mergedProps.isAnimationActive,
-        syncId: mergedProps.syncId,
-        chartBackground: mergedProps.chartBackground,
-        borderRadius: mergedProps.borderRadius,
-        padding: mergedProps.padding,
-        shadow: mergedProps.shadow,
-        aspect: mergedProps.aspect,
-        minHeight: mergedProps.minHeight,
-        maxHeight: mergedProps.maxHeight,
-        minWidth: mergedProps.minWidth,
-        maxWidth: mergedProps.maxWidth
-    }); }, [parsedData, parsedSeries, mergedProps]);
+    // Merge with config - LOCAL PROPS OVERRIDE CONFIG with error handling
+    var mergedProps;
+    try {
+        var result = mergeWithLocal(localProps);
+        mergedProps = (_b = result === null || result === void 0 ? void 0 : result.props) !== null && _b !== void 0 ? _b : localProps;
+    }
+    catch (error) {
+        console.error('Error merging component configuration:', error);
+        mergedProps = localProps;
+    }
+    // Parse data and series if they're strings with enhanced validation
+    var parsedData = (0, react_1.useMemo)(function () {
+        var parsed = parseIfString(mergedProps.data, []);
+        return getSafeArray(parsed);
+    }, [mergedProps.data]);
+    var parsedSeries = (0, react_1.useMemo)(function () {
+        var parsed = parseIfString(mergedProps.series, []);
+        return getSafeArray(parsed).filter(function (series) {
+            return series && typeof series === 'object' && series.dataKey;
+        });
+    }, [mergedProps.series]);
+    // Check if we have valid data to display
+    var hasValidData = parsedData.length > 0 && parsedSeries.length > 0;
+    // Extract final values with fallbacks
+    var final = (0, react_1.useMemo)(function () {
+        var _a, _b, _c, _d, _e, _f;
+        return ({
+            data: parsedData,
+            id: mergedProps.id || 'area-chart',
+            series: parsedSeries,
+            fromColor: mergedProps.fromColor || '',
+            toColor: mergedProps.toColor || '',
+            dy: mergedProps.dy || 0,
+            showGrid: (_a = mergedProps.showGrid) !== null && _a !== void 0 ? _a : true,
+            horizontalLines: (_b = mergedProps.horizontalLines) !== null && _b !== void 0 ? _b : false,
+            showLegend: mergedProps.showLegend,
+            showXAxis: mergedProps.showXAxis,
+            showYAxis: mergedProps.showYAxis,
+            showTooltip: mergedProps.showTooltip,
+            funcss: mergedProps.funcss || '',
+            curveType: mergedProps.curveType || 'monotone',
+            height: mergedProps.height || "100%",
+            width: mergedProps.width || '100%',
+            margin: mergedProps.margin || { top: 10, right: 30, left: 0, bottom: 20 },
+            xAxisProps: mergedProps.xAxisProps || {},
+            yAxisProps: mergedProps.yAxisProps || {},
+            tooltipFormatter: mergedProps.tooltipFormatter,
+            legendProps: mergedProps.legendProps || {},
+            tooltipProps: mergedProps.tooltipProps || {},
+            rotateLabel: mergedProps.rotateLabel || 0,
+            xLabelSize: mergedProps.xLabelSize || "0.8rem",
+            yLabelSize: mergedProps.yLabelSize || "0.8rem",
+            xInterval: mergedProps.xInterval,
+            yInterval: mergedProps.yInterval,
+            xAxisLabel: mergedProps.xAxisLabel || '',
+            yAxisLabel: mergedProps.yAxisLabel || '',
+            tickLine: (_c = mergedProps.tickLine) !== null && _c !== void 0 ? _c : true,
+            axisLine: (_d = mergedProps.axisLine) !== null && _d !== void 0 ? _d : true,
+            gridStroke: mergedProps.gridStroke || '',
+            gridStrokeDasharray: mergedProps.gridStrokeDasharray || "3 3",
+            customTooltip: mergedProps.customTooltip,
+            animation: (_e = mergedProps.animation) !== null && _e !== void 0 ? _e : true,
+            animationDuration: mergedProps.animationDuration || 500,
+            isAnimationActive: mergedProps.isAnimationActive,
+            syncId: mergedProps.syncId || '',
+            chartBackground: mergedProps.chartBackground || '',
+            borderRadius: mergedProps.borderRadius || '',
+            padding: mergedProps.padding || '',
+            shadow: (_f = mergedProps.shadow) !== null && _f !== void 0 ? _f : false,
+            aspect: mergedProps.aspect,
+            minHeight: mergedProps.minHeight,
+            maxHeight: mergedProps.maxHeight,
+            minWidth: mergedProps.minWidth,
+            maxWidth: mergedProps.maxWidth
+        });
+    }, [parsedData, parsedSeries, mergedProps, hasValidData]);
     var baseGradientId = final.id || 'areaChartGradient';
     var TooltipComponent = final.customTooltip || CustomTooltip;
-    // Generate per-series gradients
+    // Generate per-series gradients with error handling
     var gradients = (0, react_1.useMemo)(function () {
+        if (!final.series || !Array.isArray(final.series))
+            return [];
         return final.series.map(function (s, index) {
-            if (!s.fromColor && !s.toColor)
+            if (!s || typeof s !== 'object')
                 return null;
-            var gradientId = "".concat(baseGradientId, "-").concat(index);
-            var startColor = resolveStrokeColor(s.fromColor || s.color || final.fromColor);
-            var endColor = resolveStrokeColor(s.toColor || final.toColor);
-            return (react_1.default.createElement("linearGradient", { key: gradientId, id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1" },
-                react_1.default.createElement("stop", { offset: "5%", stopColor: startColor, stopOpacity: 0.8 }),
-                react_1.default.createElement("stop", { offset: "95%", stopColor: endColor, stopOpacity: 0 })));
-        });
+            try {
+                if (!s.fromColor && !s.toColor)
+                    return null;
+                var gradientId = "".concat(baseGradientId, "-").concat(index);
+                var startColor = resolveStrokeColor(s.fromColor || s.color || final.fromColor);
+                var endColor = resolveStrokeColor(s.toColor || final.toColor);
+                return (react_1.default.createElement("linearGradient", { key: gradientId, id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1" },
+                    react_1.default.createElement("stop", { offset: "5%", stopColor: startColor, stopOpacity: 0.8 }),
+                    react_1.default.createElement("stop", { offset: "95%", stopColor: endColor, stopOpacity: 0 })));
+            }
+            catch (error) {
+                console.error('Error generating gradient for series:', error);
+                return null;
+            }
+        }).filter(Boolean);
     }, [final.series, baseGradientId, final.fromColor, final.toColor]);
     // Default gradient for series without custom gradients
     var defaultGradient = (0, react_1.useMemo)(function () { return (react_1.default.createElement("linearGradient", { id: baseGradientId, x1: "0", y1: "0", x2: "0", y2: "1" },
-        react_1.default.createElement("stop", { offset: "5%", stopColor: getCssVar(final.fromColor || 'primary'), stopOpacity: 0.8 }),
-        react_1.default.createElement("stop", { offset: "95%", stopColor: getCssVar(final.toColor || 'primary200'), stopOpacity: 0 }))); }, [baseGradientId, final.fromColor, final.toColor]);
+        react_1.default.createElement("stop", { offset: "5%", stopColor: getCssVar(final.fromColor || 'primary') || '#8884d8', stopOpacity: 0.8 }),
+        react_1.default.createElement("stop", { offset: "95%", stopColor: getCssVar(final.toColor || 'primary200') || '#8884d8', stopOpacity: 0 }))); }, [baseGradientId, final.fromColor, final.toColor]);
     var containerStyle = (0, react_1.useMemo)(function () { return ({
         height: final.height,
         width: final.width,
@@ -244,6 +324,13 @@ var Lines = function (_a) {
         padding: final.padding,
         boxShadow: final.shadow ? '0 4px 6px -1px rgba(0, 0, 0, 0.1)' : undefined,
     }); }, [final]);
+    // Show empty state if no data
+    if (!hasValidData) {
+        return (react_1.default.createElement("div", { className: "flex items-center justify-center ".concat(final.funcss), style: containerStyle },
+            react_1.default.createElement("div", { className: "text-center text-muted" },
+                react_1.default.createElement("div", { className: "text-lg mb-2" }, "\uD83D\uDCCA"),
+                react_1.default.createElement("div", null, "No chart data available"))));
+    }
     return (react_1.default.createElement(recharts_1.ResponsiveContainer, { width: final.width, height: final.height, aspect: final.aspect, className: final.funcss, style: containerStyle },
         react_1.default.createElement(recharts_1.AreaChart, { data: final.data, margin: final.margin, syncId: final.syncId },
             react_1.default.createElement("defs", null,
@@ -251,16 +338,26 @@ var Lines = function (_a) {
                 gradients),
             final.showGrid && (react_1.default.createElement(recharts_1.CartesianGrid, { strokeDasharray: final.gridStrokeDasharray, stroke: final.gridStroke || getCssVar('border-color') || '#e2e8f0' })),
             !final.showGrid && final.horizontalLines && (react_1.default.createElement(recharts_1.CartesianGrid, { strokeDasharray: final.gridStrokeDasharray, horizontal: true, vertical: false, stroke: final.gridStroke || getCssVar('border-color') || '#e2e8f0' })),
-            final.showXAxis && (react_1.default.createElement(recharts_1.XAxis, __assign({ interval: final.xInterval, padding: { left: 10, right: 10 }, fontSize: final.xLabelSize || "0.8rem", strokeWidth: final.horizontalLines ? 0 : 0.2, dataKey: "label", angle: final.rotateLabel || -35, dy: (_b = final.dy) !== null && _b !== void 0 ? _b : 10, tickLine: final.tickLine, axisLine: final.axisLine, label: final.xAxisLabel ? { value: final.xAxisLabel, position: 'insideBottom', offset: -10 } : undefined }, final.xAxisProps))),
+            final.showXAxis && (react_1.default.createElement(recharts_1.XAxis, __assign({ interval: final.xInterval, padding: { left: 10, right: 10 }, fontSize: final.xLabelSize || "0.8rem", strokeWidth: final.horizontalLines ? 0 : 0.2, dataKey: "label", angle: final.rotateLabel || -35, dy: (_c = final.dy) !== null && _c !== void 0 ? _c : 10, tickLine: final.tickLine, axisLine: final.axisLine, label: final.xAxisLabel ? { value: final.xAxisLabel, position: 'insideBottom', offset: -10 } : undefined }, final.xAxisProps))),
             final.showYAxis && (react_1.default.createElement(recharts_1.YAxis, __assign({ interval: final.yInterval, strokeWidth: final.horizontalLines ? 0 : 0.2, fontSize: final.yLabelSize || "0.8rem", tickLine: final.tickLine, axisLine: final.axisLine, label: final.yAxisLabel ? { value: final.yAxisLabel, angle: -90, position: 'insideLeft' } : undefined }, final.yAxisProps))),
             final.showTooltip && (react_1.default.createElement(recharts_1.Tooltip, __assign({ content: react_1.default.createElement(TooltipComponent, { formatter: final.tooltipFormatter }), formatter: final.tooltipFormatter }, final.tooltipProps))),
             final.showLegend && react_1.default.createElement(recharts_1.Legend, __assign({}, final.legendProps)),
             final.series.map(function (s, index) {
-                var hasCustomGradient = s.fromColor || s.toColor;
-                var gradientId = hasCustomGradient
-                    ? "".concat(baseGradientId, "-").concat(index)
-                    : baseGradientId;
-                return (react_1.default.createElement(recharts_1.Area, { key: s.dataKey || index, type: final.curveType, dataKey: s.dataKey, name: s.label || s.dataKey, stroke: resolveStrokeColor(s.color), fill: hasCustomGradient || final.fromColor ? "url(#".concat(gradientId, ")") : resolveStrokeColor(s.color), fillOpacity: s.fillOpacity !== undefined ? s.fillOpacity : 0.6, strokeWidth: s.strokeWidth || 2, strokeDasharray: s.strokeDasharray, dot: s.dot !== false ? { r: 4 } : false, activeDot: s.activeDot !== false ? (typeof s.activeDot === 'object' ? s.activeDot : { r: 6, strokeWidth: 2 }) : false, isAnimationActive: final.isAnimationActive, animationDuration: final.animationDuration }));
+                if (!s || !s.dataKey) {
+                    console.warn('Invalid series configuration at index:', index);
+                    return null;
+                }
+                try {
+                    var hasCustomGradient = s.fromColor || s.toColor;
+                    var gradientId = hasCustomGradient
+                        ? "".concat(baseGradientId, "-").concat(index)
+                        : baseGradientId;
+                    return (react_1.default.createElement(recharts_1.Area, { key: s.dataKey || "series-".concat(index), type: final.curveType, dataKey: s.dataKey, name: s.label || s.dataKey, stroke: resolveStrokeColor(s.color), fill: hasCustomGradient || final.fromColor ? "url(#".concat(gradientId, ")") : resolveStrokeColor(s.color), fillOpacity: s.fillOpacity !== undefined ? s.fillOpacity : 0.6, strokeWidth: s.strokeWidth || 2, strokeDasharray: s.strokeDasharray, dot: s.dot !== false ? { r: 4 } : false, activeDot: s.activeDot !== false ? (typeof s.activeDot === 'object' ? s.activeDot : { r: 6, strokeWidth: 2 }) : false, isAnimationActive: final.isAnimationActive, animationDuration: final.animationDuration }));
+                }
+                catch (error) {
+                    console.error('Error rendering area series:', error);
+                    return null;
+                }
             }))));
 };
 exports.default = Lines;

package/ui/chart/Pie.d.ts

@@ -3,19 +3,73 @@ type PieDataItem = {
     label: string;
     value: number;
     color?: string;
+    [key: string]: any;
 };
+interface LegendProps {
+    align?: 'left' | 'center' | 'right';
+    verticalAlign?: 'top' | 'middle' | 'bottom';
+    layout?: 'horizontal' | 'vertical';
+    iconType?: 'line' | 'square' | 'rect' | 'circle' | 'cross' | 'diamond' | 'star' | 'triangle' | 'wye';
+    wrapperStyle?: Record<string, any>;
+    formatter?: (value: any, entry: any, index: number) => React.ReactNode;
+}
+interface TooltipProps {
+    cursor?: boolean | Record<string, any>;
+    separator?: string;
+    offset?: number;
+    allowEscapeViewBox?: {
+        x?: boolean;
+        y?: boolean;
+    };
+    wrapperStyle?: Record<string, any>;
+}
 interface PieChartProps {
-    data: PieDataItem[];
+    data: PieDataItem[] | string;
+    id?: string;
+    variant?: string;
     donut?: boolean;
-    showLegend?: boolean;
-    funcss?: string;
     width?: number | string;
-    legendCss: string;
     height?: number | string;
-    outerRadius?: number;
-    innerRadius?: number;
+    outerRadius?: number | string;
+    innerRadius?: number | string;
+    paddingAngle?: number;
+    cornerRadius?: number;
+    startAngle?: number;
+    endAngle?: number;
+    minAngle?: number;
+    showLegend?: boolean;
+    showTooltip?: boolean;
+    showLabels?: boolean;
+    showLabelLine?: boolean;
+    labelPosition?: 'inside' | 'outside' | 'center' | 'radial';
+    legendPosition?: 'top' | 'bottom' | 'left' | 'right';
+    funcss?: string;
+    legendCss?: string;
+    chartBackground?: string;
+    borderRadius?: string;
+    padding?: string;
+    shadow?: boolean;
+    strokeWidth?: number;
+    strokeColor?: string;
+    activeShape?: boolean | Record<string, any>;
+    inactiveShape?: boolean | Record<string, any>;
     tooltipFormatter?: (value: any, name: string, props: any) => React.ReactNode;
-    legendProps?: any;
+    labelFormatter?: (value: any, name: string, props: any) => React.ReactNode;
+    legendProps?: LegendProps;
+    tooltipProps?: TooltipProps;
+    customTooltip?: React.ComponentType<any>;
+    customLabel?: React.ComponentType<any>;
+    animation?: boolean;
+    animationDuration?: number;
+    isAnimationActive?: boolean;
+    onPieClick?: (data: any, index: number, event: React.MouseEvent) => void;
+    onPieEnter?: (data: any, index: number, event: React.MouseEvent) => void;
+    onPieLeave?: (data: any, index: number, event: React.MouseEvent) => void;
+    aspect?: number;
+    minHeight?: number | string;
+    maxHeight?: number | string;
+    minWidth?: number | string;
+    maxWidth?: number | string;
 }
 declare const ChartPie: React.FC<PieChartProps>;
 export default ChartPie;