flikkui 0.1.0-beta.4 → 0.1.0-beta.5

package/dist/components/charts/AreaChart/AreaChart.js

@@ -0,0 +1,434 @@
+import { __rest, __assign, __spreadArray } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default, { useRef, useState, useEffect } from '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 { 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 { ChartMarker } from '../shared/ChartMarker/ChartMarker.js';
+import { ChartCrosshair } from '../shared/ChartCrosshair/ChartCrosshair.js';
+import { getColorValue } from '../utils/color-utils.js';
+import { AREA_CHART_DEFAULTS } from './AreaChart.types.js';
+
+// Color configuration for data series
+var getSeriesColorClass = function (index) {
+    var colors = [
+        "stroke-primary-base fill-primary-base",
+        "stroke-warning-base fill-warning-base",
+        "stroke-success-base fill-success-base",
+        "stroke-error-base fill-error-base",
+    ];
+    return colors[index % colors.length];
+};
+// Get fill color for gradients - now using comprehensive color mapping
+var getSeriesFillColor = function (index) {
+    var colorClasses = [
+        "fill-primary-base",
+        "fill-warning-base",
+        "fill-success-base",
+        "fill-error-base",
+    ];
+    var colorClass = colorClasses[index % colorClasses.length];
+    return getColorValue(colorClass);
+};
+// Simplified curve generation
+var generateMonotonePath = function (points) {
+    if (points.length === 0)
+        return "";
+    if (points.length === 1)
+        return "M ".concat(points[0].x, " ").concat(points[0].y);
+    var path = "M ".concat(points[0].x, " ").concat(points[0].y);
+    for (var i = 1; i < points.length; i++) {
+        var prev = points[i - 1];
+        var curr = points[i];
+        // Calculate control points for smooth curve
+        var dx = curr.x - prev.x;
+        var controlDistance = dx * 0.3;
+        var cp1x = prev.x + controlDistance;
+        var cp1y = prev.y;
+        var cp2x = curr.x - controlDistance;
+        var cp2y = curr.y;
+        path += " C ".concat(cp1x, " ").concat(cp1y, ", ").concat(cp2x, " ").concat(cp2y, ", ").concat(curr.x, " ").concat(curr.y);
+    }
+    return path;
+};
+var generateLinearPath = function (points) {
+    if (points.length === 0)
+        return "";
+    var path = "M ".concat(points[0].x, " ").concat(points[0].y);
+    for (var i = 1; i < points.length; i++) {
+        path += " L ".concat(points[i].x, " ").concat(points[i].y);
+    }
+    return path;
+};
+// Simple curve implementation
+var generateCurvePath = function (points, curveType) {
+    if (curveType === void 0) { curveType = "monotone"; }
+    if (points.length === 0)
+        return "";
+    if (points.length === 1)
+        return "M ".concat(points[0].x, " ").concat(points[0].y);
+    switch (curveType) {
+        case "monotone":
+            return generateMonotonePath(points);
+        case "linear":
+        default:
+            return generateLinearPath(points);
+    }
+};
+var AreaChart = function (_a) {
+    var data = _a.data, config = _a.config, 
+    // Standardized display props with defaults
+    _b = _a.showGrid, 
+    // Standardized display props with defaults
+    showGrid = _b === void 0 ? AREA_CHART_DEFAULTS.showGrid : _b, _c = _a.showXAxis, showXAxis = _c === void 0 ? AREA_CHART_DEFAULTS.showXAxis : _c, _d = _a.showYAxis, showYAxis = _d === void 0 ? AREA_CHART_DEFAULTS.showYAxis : _d, _e = _a.showNullValues, showNullValues = _e === void 0 ? AREA_CHART_DEFAULTS.showNullValues : _e, // NEW!
+    propMinValue = _a.minValue, propMaxValue = _a.maxValue, _f = _a.variant, variant = _f === void 0 ? AREA_CHART_DEFAULTS.variant : _f, theme = _a.theme, 
+    // Standardized visual props with defaults (renamed from area-specific names)
+    _g = _a.radius, 
+    // Standardized visual props with defaults (renamed from area-specific names)
+    radius = _g === void 0 ? AREA_CHART_DEFAULTS.radius : _g, // Was dotRadius
+    _h = _a.strokeWidth, // Was dotRadius
+    strokeWidth = _h === void 0 ? AREA_CHART_DEFAULTS.strokeWidth : _h, _j = _a.curved, curved = _j === void 0 ? AREA_CHART_DEFAULTS.curved : _j, _k = _a.curveType, curveType = _k === void 0 ? AREA_CHART_DEFAULTS.curveType : _k, _l = _a.showDots, showDots = _l === void 0 ? AREA_CHART_DEFAULTS.showDots : _l, _m = _a.fillOpacity, fillOpacity = _m === void 0 ? AREA_CHART_DEFAULTS.fillOpacity : _m, _o = _a.showStroke, showStroke = _o === void 0 ? AREA_CHART_DEFAULTS.showStroke : _o, _p = _a.stacked, stacked = _p === void 0 ? AREA_CHART_DEFAULTS.stacked : _p, 
+    // Base props
+    className = _a.className, title = _a.title, description = _a.description, _q = _a.enableKeyboardNavigation, enableKeyboardNavigation = _q === void 0 ? AREA_CHART_DEFAULTS.enableKeyboardNavigation : _q, children = _a.children, props = __rest(_a, ["data", "config", "showGrid", "showXAxis", "showYAxis", "showNullValues", "minValue", "maxValue", "variant", "theme", "radius", "strokeWidth", "curved", "curveType", "showDots", "fillOpacity", "showStroke", "stacked", "className", "title", "description", "enableKeyboardNavigation", "children"]);
+    // Use the new theme system
+    var _r = useChartTheme({ config: config, variant: variant, theme: theme }); _r.getSeriesColor; _r.getColorClass; _r.getOpacityClass; _r.getTransitionClass; 
+    // Legacy support
+    _r.getThemeValue;
+    var containerRef = useRef(null);
+    var _s = useState({ width: 600, height: 400 }), dimensions = _s[0], setDimensions = _s[1];
+    var _t = useState(null), hoveredPoint = _t[0], setHoveredPoint = _t[1];
+    // Detect if device is mobile/touch
+    var isMobile = typeof window !== 'undefined' &&
+        ('ontouchstart' in window || navigator.maxTouchPoints > 0);
+    // Use the new tooltip positioning hook
+    var _u = useTooltipPosition({
+        containerRef: containerRef,
+        isMobile: isMobile,
+    }), tooltipData = _u.tooltipData, tooltipRef = _u.tooltipRef, handleMouseEnter = _u.handleMouseEnter, handleMouseMove = _u.handleMouseMove, handleMouseLeave = _u.handleMouseLeave;
+    // Use accessibility hook
+    var _v = useChartAccessibility({
+        chartType: 'area',
+        data: data,
+        config: config,
+        title: title,
+        description: description,
+        enableKeyboardNavigation: enableKeyboardNavigation,
+    }), chartAccessibilityProps = _v.chartAccessibilityProps, descriptionProps = _v.descriptionProps; _v.focusedElementIndex; _v.isKeyboardMode; var handleMouseInteraction = _v.handleMouseInteraction;
+    // Measure container dimensions
+    useEffect(function () {
+        var updateDimensions = function () {
+            if (containerRef.current) {
+                var _a = containerRef.current.getBoundingClientRect(), width = _a.width, height = _a.height;
+                setDimensions({
+                    width: width || 600,
+                    height: height || 400,
+                });
+            }
+        };
+        updateDimensions();
+        var resizeObserver = new ResizeObserver(updateDimensions);
+        if (containerRef.current) {
+            resizeObserver.observe(containerRef.current);
+        }
+        return function () {
+            resizeObserver.disconnect();
+        };
+    }, []);
+    // Early return if no data
+    if (!data || data.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 area chart" }, props),
+            React__default.createElement("span", null, "No data available")));
+    }
+    // Calculate dimensions
+    var margin = {
+        top: 0,
+        right: 0,
+        bottom: showXAxis ? 40 : 0,
+        left: showYAxis ? 60 : 0,
+    };
+    var innerWidth = dimensions.width - margin.left - margin.right;
+    var innerHeight = dimensions.height - margin.top - margin.bottom;
+    // Get all data keys from config
+    var dataKeys = Object.keys(config);
+    // Calculate scales
+    var rawMaxValue = Math.max.apply(Math, data.map(function (item) {
+        return stacked
+            ? dataKeys.reduce(function (sum, key) {
+                var value = item[key];
+                return sum + (typeof value === "number" ? value : 0);
+            }, 0)
+            : Math.max.apply(Math, dataKeys.map(function (key) {
+                var value = item[key];
+                return typeof value === "number" ? value : 0;
+            }));
+    }));
+    var minValue = propMinValue !== null && propMinValue !== void 0 ? propMinValue : 0;
+    var maxValue = propMaxValue !== null && propMaxValue !== void 0 ? propMaxValue : (function () {
+        if (rawMaxValue <= 10)
+            return Math.ceil(rawMaxValue);
+        if (rawMaxValue <= 100)
+            return Math.ceil(rawMaxValue / 5) * 5;
+        if (rawMaxValue <= 1000)
+            return Math.ceil(rawMaxValue / 50) * 50;
+        if (rawMaxValue <= 10000)
+            return Math.ceil(rawMaxValue / 500) * 500;
+        return Math.ceil(rawMaxValue / 1000) * 1000;
+    })();
+    // Calculate point position
+    var getPointPosition = function (dataIndex, value) {
+        // Spread points evenly across the full width
+        // First point at left edge (margin.left), last point at right edge (margin.left + innerWidth)
+        var x = data.length === 1
+            ? margin.left + innerWidth / 2 // Center single point
+            : margin.left + (dataIndex / (data.length - 1)) * innerWidth;
+        var y = margin.top +
+            innerHeight -
+            ((value - minValue) / (maxValue - minValue)) * innerHeight;
+        return { x: x, y: y };
+    };
+    // Generate area path with null value handling
+    var generateAreaPath = function (key, stackedValues) {
+        if (!showNullValues) {
+            // Original behavior: skip null values entirely
+            var points_1 = [];
+            var baselinePoints_1 = [];
+            data.forEach(function (item, index) {
+                var rawValue = item[key];
+                var isNull = rawValue === null || rawValue === undefined;
+                var value = isNull ? 0 : typeof rawValue === "number" ? rawValue : 0;
+                if (!isNull) {
+                    var baselineValue = stacked && stackedValues ? stackedValues[index] : minValue;
+                    var topValue = stacked && stackedValues ? stackedValues[index] + value : value;
+                    var topPoint = getPointPosition(index, topValue);
+                    var baselinePoint = getPointPosition(index, baselineValue);
+                    points_1.push(topPoint);
+                    baselinePoints_1.push(baselinePoint);
+                }
+            });
+            if (points_1.length === 0)
+                return null;
+            // Generate the top curve
+            var topPath = generateCurvePath(points_1, curved ? curveType : "linear");
+            // Generate the baseline (reverse order for proper area closure)
+            var reversedBaselinePoints = __spreadArray([], baselinePoints_1, true).reverse();
+            var baselinePath = generateCurvePath(reversedBaselinePoints, curved ? curveType : "linear");
+            // Create closed area path
+            var areaPath = "".concat(topPath, " L ").concat(baselinePoints_1[baselinePoints_1.length - 1].x, " ").concat(baselinePoints_1[baselinePoints_1.length - 1].y, " ").concat(baselinePath.replace('M', 'L'), " Z");
+            return {
+                areaPath: areaPath,
+                linePath: topPath
+            };
+        }
+        else {
+            // New behavior: break areas at null values
+            var segments_1 = [];
+            var currentSegment_1 = { points: [], baselinePoints: [] };
+            data.forEach(function (item, index) {
+                var rawValue = item[key];
+                var isNull = rawValue === null || rawValue === undefined;
+                if (isNull) {
+                    // End current segment and start a new one
+                    if (currentSegment_1.points.length > 0) {
+                        segments_1.push(currentSegment_1);
+                        currentSegment_1 = { points: [], baselinePoints: [] };
+                    }
+                }
+                else {
+                    var value = typeof rawValue === "number" ? rawValue : 0;
+                    var baselineValue = stacked && stackedValues ? stackedValues[index] : minValue;
+                    var topValue = stacked && stackedValues ? stackedValues[index] + value : value;
+                    var topPoint = getPointPosition(index, topValue);
+                    var baselinePoint = getPointPosition(index, baselineValue);
+                    currentSegment_1.points.push(topPoint);
+                    currentSegment_1.baselinePoints.push(baselinePoint);
+                }
+            });
+            // Add the last segment if it has points
+            if (currentSegment_1.points.length > 0) {
+                segments_1.push(currentSegment_1);
+            }
+            if (segments_1.length === 0)
+                return null;
+            // Generate paths for each segment
+            var areaPaths_1 = [];
+            var linePaths_1 = [];
+            segments_1.forEach(function (segment) {
+                if (segment.points.length > 0) {
+                    // Generate the top curve
+                    var topPath = generateCurvePath(segment.points, curved ? curveType : "linear");
+                    // Generate the baseline (reverse order for proper area closure)
+                    var reversedBaselinePoints = __spreadArray([], segment.baselinePoints, true).reverse();
+                    var baselinePath = generateCurvePath(reversedBaselinePoints, curved ? curveType : "linear");
+                    // Create closed area path
+                    var areaPath = "".concat(topPath, " L ").concat(segment.baselinePoints[segment.baselinePoints.length - 1].x, " ").concat(segment.baselinePoints[segment.baselinePoints.length - 1].y, " ").concat(baselinePath.replace('M', 'L'), " Z");
+                    areaPaths_1.push(areaPath);
+                    linePaths_1.push(topPath);
+                }
+            });
+            return {
+                areaPath: areaPaths_1.join(" "),
+                linePath: linePaths_1.join(" ")
+            };
+        }
+    };
+    // Calculate stacked values for each data point
+    var getStackedValues = function () {
+        if (!stacked)
+            return {};
+        var stackedData = {};
+        var cumulativeValues = new Array(data.length).fill(0);
+        dataKeys.forEach(function (key) {
+            stackedData[key] = __spreadArray([], cumulativeValues, true);
+            data.forEach(function (item, index) {
+                var rawValue = item[key];
+                var value = typeof rawValue === "number" ? rawValue : 0;
+                cumulativeValues[index] += value;
+            });
+        });
+        return stackedData;
+    };
+    var stackedValues = getStackedValues();
+    return (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)),
+        React__default.createElement("svg", { width: "100%", height: "100%", viewBox: "0 0 ".concat(dimensions.width, " ").concat(dimensions.height), className: "overflow-visible", role: "presentation" },
+            React__default.createElement("defs", null,
+                React__default.createElement("filter", { id: "area-shadow", x: "-20%", y: "-20%", width: "140%", height: "140%" },
+                    React__default.createElement("feDropShadow", { dx: "4", dy: "4", stdDeviation: "6", floodOpacity: "0.1", floodColor: "#000000" })),
+                dataKeys.map(function (key, keyIndex) {
+                    var fillColor = getSeriesFillColor(keyIndex);
+                    return (React__default.createElement("linearGradient", { key: "gradient-".concat(key), id: "area-gradient-".concat(key), x1: "0%", y1: "0%", x2: "0%", y2: "100%" },
+                        React__default.createElement("stop", { offset: "0%", stopColor: fillColor, stopOpacity: fillOpacity * 0.8 }),
+                        React__default.createElement("stop", { offset: "100%", stopColor: fillColor, stopOpacity: fillOpacity * 0.05 })));
+                }),
+                React__default.createElement("linearGradient", { id: "vertical-fade", x1: "0%", y1: "0%", x2: "0%", y2: "100%" },
+                    React__default.createElement("stop", { offset: "0%", stopColor: "#6b7280", stopOpacity: "0" }),
+                    React__default.createElement("stop", { offset: "40%", stopColor: "#6b7280", stopOpacity: "0.3" }),
+                    React__default.createElement("stop", { offset: "50%", stopColor: "#6b7280", stopOpacity: "0.5" }),
+                    React__default.createElement("stop", { offset: "60%", stopColor: "#6b7280", stopOpacity: "0.3" }),
+                    React__default.createElement("stop", { offset: "100%", stopColor: "#6b7280", stopOpacity: "0" })),
+                React__default.createElement("linearGradient", { id: "horizontal-fade", x1: "0%", y1: "0%", x2: "100%", y2: "0%" },
+                    React__default.createElement("stop", { offset: "0%", stopColor: "#6b7280", stopOpacity: "0" }),
+                    React__default.createElement("stop", { offset: "40%", stopColor: "#6b7280", stopOpacity: "0.3" }),
+                    React__default.createElement("stop", { offset: "50%", stopColor: "#6b7280", stopOpacity: "0.5" }),
+                    React__default.createElement("stop", { offset: "60%", stopColor: "#6b7280", stopOpacity: "0.3" }),
+                    React__default.createElement("stop", { offset: "100%", stopColor: "#6b7280", stopOpacity: "0" }))),
+            React__default.createElement(HorizontalGrid, { show: showGrid, x: margin.left, y: margin.top, width: innerWidth, height: innerHeight, lineCount: 5 }),
+            React__default.createElement(ChartCrosshair, { show: hoveredPoint !== null, x: hoveredPoint !== null ? (data.length === 1
+                    ? margin.left + innerWidth / 2
+                    : margin.left + (hoveredPoint.index / (data.length - 1)) * innerWidth) : 0, y: hoveredPoint !== null && dataKeys.length === 1 ? (function () {
+                    var item = data[hoveredPoint.index];
+                    var singleKey = dataKeys[0];
+                    var singleValue = item[singleKey];
+                    var numValue = typeof singleValue === 'number' ? singleValue : 0;
+                    return margin.top + innerHeight - ((numValue - minValue) / (maxValue - minValue)) * innerHeight;
+                })() : undefined, margin: margin, innerWidth: innerWidth, innerHeight: innerHeight, showHorizontal: dataKeys.length === 1 }),
+            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) {
+                    if (value >= 1000)
+                        return "".concat((value / 1000).toFixed(0), "k");
+                    return value.toString();
+                } }),
+            React__default.createElement("g", { className: "chart-areas" }, dataKeys.map(function (key, keyIndex) {
+                var paths = generateAreaPath(key, stackedValues[key]);
+                var colorClass = getSeriesColorClass(keyIndex);
+                if (!paths)
+                    return null;
+                return (React__default.createElement("g", { key: key },
+                    React__default.createElement("path", { d: paths.areaPath, fill: "url(#area-gradient-".concat(key, ")"), className: "transition-all duration-200", filter: "url(#area-shadow)" }),
+                    showStroke && (React__default.createElement("path", { d: paths.linePath, fill: "none", strokeWidth: strokeWidth, strokeLinecap: "round", className: cn("transition-all duration-200", colorClass.split(' ').find(function (cls) { return cls.startsWith('stroke-'); }) || '') })),
+                    showDots &&
+                        data.map(function (item, dataIndex) {
+                            var rawValue = item[key];
+                            var isNull = rawValue === null || rawValue === undefined;
+                            var value = isNull
+                                ? 0
+                                : typeof rawValue === "number"
+                                    ? rawValue
+                                    : 0;
+                            // Don't render dots for null values regardless of showNullValues
+                            if (isNull)
+                                return null;
+                            stacked && stackedValues[key] ? stackedValues[key][dataIndex] : minValue;
+                            var topValue = stacked && stackedValues[key] ? stackedValues[key][dataIndex] + value : value;
+                            var _a = getPointPosition(dataIndex, topValue), x = _a.x, y = _a.y;
+                            (hoveredPoint === null || hoveredPoint === void 0 ? void 0 : hoveredPoint.index) === dataIndex && hoveredPoint.key === key;
+                            return (React__default.createElement("g", { key: "".concat(key, "-").concat(dataIndex) },
+                                React__default.createElement(ChartMarker, { cx: x, cy: y, radius: radius, colorClass: colorClass })));
+                        })));
+            })),
+            !showDots && hoveredPoint !== null && (React__default.createElement("g", { className: "chart-hover-markers" }, dataKeys.map(function (key, keyIndex) {
+                var item = data[hoveredPoint.index];
+                var rawValue = item[key];
+                var isNull = rawValue === null || rawValue === undefined;
+                var value = isNull
+                    ? 0
+                    : typeof rawValue === "number"
+                        ? rawValue
+                        : 0;
+                // Don't render hover markers for null values
+                if (isNull)
+                    return null;
+                stacked && stackedValues[key] ? stackedValues[key][hoveredPoint.index] : minValue;
+                var topValue = stacked && stackedValues[key] ? stackedValues[key][hoveredPoint.index] + value : value;
+                var _a = getPointPosition(hoveredPoint.index, topValue), x = _a.x, y = _a.y;
+                var colorClass = getSeriesColorClass(keyIndex);
+                return (React__default.createElement(ChartMarker, { key: "hover-".concat(key, "-").concat(hoveredPoint.index), cx: x, cy: y, radius: radius, colorClass: colorClass }));
+            }))),
+            React__default.createElement("g", { className: "chart-hover-areas" }, data.map(function (item, dataIndex) {
+                // Calculate hover area based on new point positioning
+                var pointX = data.length === 1
+                    ? margin.left + innerWidth / 2
+                    : margin.left + (dataIndex / (data.length - 1)) * innerWidth;
+                // Create hover area around each point
+                var hoverWidth = data.length === 1 ? innerWidth : innerWidth / (data.length - 1);
+                var hoverX = data.length === 1
+                    ? margin.left
+                    : Math.max(margin.left, pointX - hoverWidth / 2);
+                // Ensure hover area doesn't exceed chart bounds
+                var adjustedWidth = data.length === 1
+                    ? innerWidth
+                    : Math.min(hoverWidth, margin.left + innerWidth - hoverX);
+                return (React__default.createElement("rect", { key: "hover-".concat(dataIndex), x: hoverX, y: margin.top, width: adjustedWidth, height: innerHeight, fill: "transparent", className: "cursor-pointer", onMouseEnter: function (e) {
+                        setHoveredPoint({ index: dataIndex, key: dataKeys[0] });
+                        // Create multi-series tooltip data
+                        var seriesData = dataKeys.map(function (seriesKey, keyIndex) {
+                            var _a, _b;
+                            var seriesValue = item[seriesKey];
+                            var numValue = typeof seriesValue === 'number' ? seriesValue : 0;
+                            return {
+                                key: seriesKey,
+                                label: ((_a = config[seriesKey]) === null || _a === void 0 ? void 0 : _a.label) || seriesKey,
+                                value: numValue,
+                                color: ((_b = config[seriesKey]) === null || _b === void 0 ? void 0 : _b.color) || getSeriesFillColor(keyIndex)
+                            };
+                        });
+                        var content = {
+                            category: item.name || "Category ".concat(dataIndex + 1),
+                            series: seriesData
+                        };
+                        var svgCoordinates = {
+                            x: pointX,
+                            y: margin.top + innerHeight / 2,
+                            dimensions: dimensions
+                        };
+                        handleMouseEnter(e, content, svgCoordinates);
+                    }, onMouseMove: function (e) {
+                        if ((hoveredPoint === null || hoveredPoint === void 0 ? void 0 : hoveredPoint.index) === dataIndex) {
+                            var svgCoordinates = {
+                                x: pointX,
+                                y: margin.top + innerHeight / 2,
+                                dimensions: dimensions
+                            };
+                            handleMouseMove(e, svgCoordinates);
+                        }
+                    }, onMouseLeave: handleMouseLeave }));
+            })),
+            React__default.createElement(XAxis, { show: showXAxis, data: data, x: margin.left, y: margin.top + innerHeight, width: innerWidth, categoryWidth: innerWidth / data.length, categoryGap: 0 })),
+        React__default.createElement(ChartTooltip, { active: !!tooltipData, position: tooltipData ? { x: tooltipData.x, y: tooltipData.y } : { x: 0, y: 0 }, tooltipRef: tooltipRef, content: tooltipData === null || tooltipData === void 0 ? void 0 : tooltipData.content, chartType: "area" }),
+        children));
+};
+
+export { AreaChart };

package/dist/components/charts/AreaChart/AreaChart.types.js

@@ -0,0 +1,7 @@
+import { __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { CHART_DEFAULTS } from '../types/chart.types.js';
+
+// Default values using centralized defaults
+var AREA_CHART_DEFAULTS = __assign(__assign({}, CHART_DEFAULTS), { radius: CHART_DEFAULTS.radius, strokeWidth: CHART_DEFAULTS.strokeWidth, curved: CHART_DEFAULTS.curved, curveType: CHART_DEFAULTS.curveType, showDots: CHART_DEFAULTS.showDots, fillOpacity: CHART_DEFAULTS.fillOpacity, showStroke: CHART_DEFAULTS.showStroke, stacked: CHART_DEFAULTS.stacked });
+
+export { AREA_CHART_DEFAULTS };