semiotic 2.0.2 → 3.0.0-beta.1

package/ai/dist/src/components/charts/xy/LineChart.js

@@ -0,0 +1,302 @@
+"use client";
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LineChart = LineChart;
+const React = __importStar(require("react"));
+const react_1 = require("react");
+const d3_shape_1 = require("d3-shape");
+const XYFrame_1 = __importDefault(require("../../XYFrame"));
+const colorUtils_1 = require("../shared/colorUtils");
+const hooks_1 = require("../shared/hooks");
+const legendUtils_1 = require("../shared/legendUtils");
+const Tooltip_1 = require("../../Tooltip/Tooltip");
+const ChartError_1 = __importDefault(require("../shared/ChartError"));
+const validateChartData_1 = require("../shared/validateChartData");
+/** Map of curve name strings to d3-shape curve functions */
+const CURVE_MAP = {
+    linear: d3_shape_1.curveLinear,
+    monotoneX: d3_shape_1.curveMonotoneX,
+    monotoneY: d3_shape_1.curveMonotoneY,
+    step: d3_shape_1.curveStep,
+    stepAfter: d3_shape_1.curveStepAfter,
+    stepBefore: d3_shape_1.curveStepBefore,
+    basis: d3_shape_1.curveBasis,
+    cardinal: d3_shape_1.curveCardinal,
+    catmullRom: d3_shape_1.curveCatmullRom
+};
+/**
+ * LineChart - Visualize trends and time series data with lines
+ *
+ * A simplified wrapper around XYFrame for creating line charts. Perfect for
+ * showing trends, comparisons, and temporal patterns in your data.
+ *
+ * @example
+ * ```tsx
+ * // Simple line chart
+ * <LineChart
+ *   data={[
+ *     {x: 1, y: 10},
+ *     {x: 2, y: 20},
+ *     {x: 3, y: 15}
+ *   ]}
+ *   xLabel="Time"
+ *   yLabel="Value"
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Multiple lines with grouping
+ * <LineChart
+ *   data={[
+ *     {x: 1, y: 10, series: 'A'},
+ *     {x: 2, y: 20, series: 'A'},
+ *     {x: 1, y: 15, series: 'B'},
+ *     {x: 2, y: 25, series: 'B'}
+ *   ]}
+ *   lineBy="series"
+ *   colorBy="series"
+ *   xLabel="Time"
+ *   yLabel="Value"
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Area chart with custom curve
+ * <LineChart
+ *   data={data}
+ *   curve="monotoneX"
+ *   fillArea={true}
+ *   areaOpacity={0.3}
+ *   showPoints={true}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Advanced: Override XYFrame props
+ * <LineChart
+ *   data={data}
+ *   frameProps={{
+ *     lineType: { type: "line", interpolator: d3.curveCardinal },
+ *     customLineMark: ({ d }) => <path stroke="red" />
+ *   }}
+ * />
+ * ```
+ *
+ * @remarks
+ * This component wraps {@link XYFrame} with sensible defaults for line charts.
+ * For more advanced features like custom marks, annotations, or complex interactions,
+ * use XYFrame directly.
+ *
+ * **Breadcrumb to advanced usage:**
+ * - Use the `frameProps` prop to pass any XYFrame prop
+ * - See XYFrame documentation: https://semiotic.nteract.io/guides/xy-frame
+ * - All XYFrame props are available via `frameProps`
+ *
+ * @param props - LineChart configuration
+ * @returns Rendered line chart
+ */
+function LineChart(props) {
+    const { data, width = 600, height = 400, margin: userMargin, className, title, xLabel, yLabel, xFormat, yFormat, xAccessor = "x", yAccessor = "y", lineBy, lineDataAccessor = "coordinates", colorBy, colorScheme = "category10", curve = "linear", showPoints = false, pointRadius = 3, fillArea = false, areaOpacity = 0.3, lineWidth = 2, enableHover = true, showGrid = false, showLegend, tooltip, frameProps = {} } = props;
+    const safeData = data || [];
+    // Check if data is in line objects format (has lineDataAccessor field)
+    const isLineObjectFormat = safeData[0]?.[lineDataAccessor] !== undefined;
+    // Transform data to line format if needed
+    const lineData = (0, react_1.useMemo)(() => {
+        if (isLineObjectFormat) {
+            // Data is already in line objects format
+            return safeData;
+        }
+        if (lineBy) {
+            // Group data by lineBy field
+            const grouped = safeData.reduce((acc, d) => {
+                const key = typeof lineBy === "function" ? lineBy(d) : d[lineBy];
+                if (!acc[key]) {
+                    const lineObj = { [lineDataAccessor]: [] };
+                    // Add the grouping field
+                    if (typeof lineBy === "string") {
+                        lineObj[lineBy] = key;
+                    }
+                    acc[key] = lineObj;
+                }
+                acc[key][lineDataAccessor].push(d);
+                return acc;
+            }, {});
+            return Object.values(grouped);
+        }
+        // Single line - wrap in line object
+        return [{ [lineDataAccessor]: safeData }];
+    }, [safeData, lineBy, lineDataAccessor, isLineObjectFormat]);
+    // Create color scale if colorBy is specified
+    const colorScale = (0, hooks_1.useColorScale)(safeData, colorBy, colorScheme);
+    // Curve function from module-level map
+    const curveFunction = CURVE_MAP[curve] || d3_shape_1.curveLinear;
+    // Line style function
+    const lineStyle = (0, react_1.useMemo)(() => {
+        return (d) => {
+            const baseStyle = {
+                strokeWidth: lineWidth
+            };
+            // Apply color
+            if (colorBy) {
+                baseStyle.stroke = (0, colorUtils_1.getColor)(d, colorBy, colorScale);
+            }
+            else {
+                baseStyle.stroke = hooks_1.DEFAULT_COLOR;
+            }
+            // Apply fill for area chart
+            if (fillArea) {
+                baseStyle.fill = baseStyle.stroke;
+                baseStyle.fillOpacity = areaOpacity;
+            }
+            return baseStyle;
+        };
+    }, [colorBy, colorScale, lineWidth, fillArea, areaOpacity]);
+    // Point style function (if showPoints is true)
+    const pointStyle = (0, react_1.useMemo)(() => {
+        if (!showPoints)
+            return undefined;
+        return (d) => {
+            const baseStyle = {
+                r: pointRadius,
+                fillOpacity: 1
+            };
+            // Match line color
+            if (colorBy) {
+                baseStyle.fill = (0, colorUtils_1.getColor)(d.parentLine || d, colorBy, colorScale);
+            }
+            else {
+                baseStyle.fill = hooks_1.DEFAULT_COLOR;
+            }
+            return baseStyle;
+        };
+    }, [showPoints, pointRadius, colorBy, colorScale]);
+    // Build axes configuration
+    const axes = (0, react_1.useMemo)(() => {
+        const axesConfig = [];
+        // Y axis (left)
+        axesConfig.push({
+            orient: "left",
+            label: yLabel,
+            tickFormat: yFormat,
+            ...(showGrid && { tickLineGenerator: () => null })
+        });
+        // X axis (bottom)
+        axesConfig.push({
+            orient: "bottom",
+            label: xLabel,
+            tickFormat: xFormat,
+            ...(showGrid && { tickLineGenerator: () => null })
+        });
+        return axesConfig;
+    }, [xLabel, yLabel, xFormat, yFormat, showGrid]);
+    // Determine line type
+    const lineType = (0, react_1.useMemo)(() => {
+        const lineTypeConfig = {
+            type: fillArea ? "area" : "line",
+            interpolator: curveFunction
+        };
+        if (fillArea) {
+            lineTypeConfig.simpleLine = false;
+        }
+        return lineTypeConfig;
+    }, [fillArea, curveFunction]);
+    // Determine if we should show legend
+    const shouldShowLegend = showLegend !== undefined ? showLegend : lineData.length > 1;
+    // Build legend if needed
+    const legend = (0, react_1.useMemo)(() => {
+        if (!shouldShowLegend || !colorBy)
+            return undefined;
+        return (0, legendUtils_1.createLegend)({
+            data: lineData,
+            colorBy,
+            colorScale,
+            getColor: colorUtils_1.getColor
+        });
+    }, [shouldShowLegend, colorBy, lineData, colorScale]);
+    // Adjust margin for legend if present
+    const margin = (0, react_1.useMemo)(() => {
+        const defaultMargin = { top: 50, bottom: 60, left: 70, right: 40 };
+        const finalMargin = { ...defaultMargin, ...userMargin };
+        // If legend is present and right margin is too small, increase it
+        if (legend && finalMargin.right < 120) {
+            finalMargin.right = 120;
+        }
+        return finalMargin;
+    }, [userMargin, legend]);
+    // Validate data (after all hooks)
+    const error = (0, validateChartData_1.validateArrayData)({
+        componentName: "LineChart",
+        data: safeData,
+        accessors: {
+            xAccessor,
+            yAccessor,
+        },
+    });
+    if (error)
+        return React.createElement(ChartError_1.default, { componentName: "LineChart", message: error, width: width, height: height });
+    // Build XYFrame props
+    const xyFrameProps = {
+        size: [width, height],
+        lines: lineData,
+        xAccessor,
+        yAccessor,
+        lineDataAccessor,
+        lineType,
+        lineStyle,
+        axes: axes,
+        hoverAnnotation: enableHover,
+        margin,
+        ...(showPoints && {
+            showLinePoints: true,
+            pointStyle
+        }),
+        ...(legend && { legend }),
+        ...(className && { className }),
+        ...(title && { title }),
+        // Add tooltip support
+        ...(tooltip && { tooltipContent: (0, Tooltip_1.normalizeTooltip)(tooltip) }),
+        // Allow frameProps to override defaults
+        transition: true,
+        ...frameProps
+    };
+    return React.createElement(XYFrame_1.default, { ...xyFrameProps });
+}

package/ai/dist/src/components/charts/xy/Scatterplot.js

@@ -0,0 +1,136 @@
+"use client";
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Scatterplot = Scatterplot;
+const React = __importStar(require("react"));
+const react_1 = require("react");
+const XYFrame_1 = __importDefault(require("../../XYFrame"));
+const colorUtils_1 = require("../shared/colorUtils");
+const legendUtils_1 = require("../shared/legendUtils");
+const Tooltip_1 = require("../../Tooltip/Tooltip");
+const hooks_1 = require("../shared/hooks");
+const ChartError_1 = __importDefault(require("../shared/ChartError"));
+const validateChartData_1 = require("../shared/validateChartData");
+/**
+ * Scatterplot - Visualize relationships between two continuous variables
+ *
+ * @example
+ * ```tsx
+ * <Scatterplot
+ *   data={[{x: 1, y: 10}, {x: 2, y: 20}]}
+ *   xLabel="Time"
+ *   yLabel="Value"
+ * />
+ * ```
+ */
+function Scatterplot(props) {
+    const { data, width = 600, height = 400, margin: userMargin, className, title, xLabel, yLabel, xFormat, yFormat, xAccessor = "x", yAccessor = "y", colorBy, colorScheme = "category10", sizeBy, sizeRange = [3, 15], pointRadius = 5, pointOpacity = 0.8, enableHover = true, showGrid = false, showLegend, tooltip, frameProps = {} } = props;
+    const safeData = data || [];
+    const colorScale = (0, hooks_1.useColorScale)(safeData, colorBy, colorScheme);
+    const sizeDomain = (0, react_1.useMemo)(() => {
+        if (!sizeBy || safeData.length === 0)
+            return undefined;
+        const sizes = safeData.map((d) => typeof sizeBy === "function" ? sizeBy(d) : d[sizeBy]);
+        return [Math.min(...sizes), Math.max(...sizes)];
+    }, [safeData, sizeBy]);
+    const pointStyle = (0, react_1.useMemo)(() => {
+        return (d) => {
+            const baseStyle = { fillOpacity: pointOpacity };
+            baseStyle.fill = colorBy ? (0, colorUtils_1.getColor)(d, colorBy, colorScale) : hooks_1.DEFAULT_COLOR;
+            baseStyle.r = sizeBy
+                ? (0, colorUtils_1.getSize)(d, sizeBy, sizeRange, sizeDomain)
+                : pointRadius;
+            return baseStyle;
+        };
+    }, [colorBy, colorScale, sizeBy, sizeRange, sizeDomain, pointRadius, pointOpacity]);
+    const axes = (0, react_1.useMemo)(() => [
+        {
+            orient: "left",
+            label: yLabel,
+            tickFormat: yFormat,
+            ...(showGrid && { tickLineGenerator: () => null })
+        },
+        {
+            orient: "bottom",
+            label: xLabel,
+            tickFormat: xFormat,
+            ...(showGrid && { tickLineGenerator: () => null })
+        }
+    ], [xLabel, yLabel, xFormat, yFormat, showGrid]);
+    const shouldShowLegend = showLegend !== undefined ? showLegend : !!colorBy;
+    const legend = (0, react_1.useMemo)(() => {
+        if (!shouldShowLegend || !colorBy)
+            return undefined;
+        return (0, legendUtils_1.createLegend)({ data: safeData, colorBy, colorScale, getColor: colorUtils_1.getColor });
+    }, [shouldShowLegend, colorBy, safeData, colorScale]);
+    const margin = (0, react_1.useMemo)(() => {
+        const finalMargin = { top: 50, bottom: 60, left: 70, right: 40, ...userMargin };
+        if (legend && finalMargin.right < 120)
+            finalMargin.right = 120;
+        return finalMargin;
+    }, [userMargin, legend]);
+    // Validate data (after all hooks)
+    const error = (0, validateChartData_1.validateArrayData)({
+        componentName: "Scatterplot",
+        data: safeData,
+        accessors: {
+            xAccessor,
+            yAccessor,
+        },
+    });
+    if (error)
+        return React.createElement(ChartError_1.default, { componentName: "Scatterplot", message: error, width: width, height: height });
+    const xyFrameProps = {
+        size: [width, height],
+        points: safeData,
+        xAccessor,
+        yAccessor,
+        pointStyle,
+        axes: axes,
+        hoverAnnotation: enableHover,
+        margin,
+        ...(legend && { legend }),
+        ...(className && { className }),
+        ...(title && { title }),
+        ...(tooltip && { tooltipContent: (0, Tooltip_1.normalizeTooltip)(tooltip) }),
+        transition: true,
+        ...frameProps
+    };
+    return React.createElement(XYFrame_1.default, { ...xyFrameProps });
+}

package/ai/dist/src/components/charts/xy/StackedAreaChart.js

@@ -0,0 +1,220 @@
+"use client";
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StackedAreaChart = StackedAreaChart;
+const React = __importStar(require("react"));
+const react_1 = require("react");
+const d3_shape_1 = require("d3-shape");
+const XYFrame_1 = __importDefault(require("../../XYFrame"));
+const colorUtils_1 = require("../shared/colorUtils");
+const hooks_1 = require("../shared/hooks");
+const legendUtils_1 = require("../shared/legendUtils");
+const Tooltip_1 = require("../../Tooltip/Tooltip");
+const ChartError_1 = __importDefault(require("../shared/ChartError"));
+const validateChartData_1 = require("../shared/validateChartData");
+/** Map of curve name strings to d3-shape curve functions */
+const CURVE_MAP = {
+    linear: d3_shape_1.curveLinear,
+    monotoneX: d3_shape_1.curveMonotoneX,
+    monotoneY: d3_shape_1.curveMonotoneY,
+    step: d3_shape_1.curveStep,
+    stepAfter: d3_shape_1.curveStepAfter,
+    stepBefore: d3_shape_1.curveStepBefore,
+    basis: d3_shape_1.curveBasis,
+    cardinal: d3_shape_1.curveCardinal,
+    catmullRom: d3_shape_1.curveCatmullRom
+};
+/**
+ * StackedAreaChart - Visualize quantities stacked on top of each other over continuous intervals
+ *
+ * Each series is stacked so that the total height represents the sum of all series.
+ * Use `normalize` for 100% stacked (proportional) areas.
+ *
+ * For overlapping (non-stacked) areas use {@link AreaChart}.
+ *
+ * @example
+ * ```tsx
+ * <StackedAreaChart
+ *   data={[
+ *     {x: 1, y: 10, category: 'A'},
+ *     {x: 2, y: 20, category: 'A'},
+ *     {x: 1, y: 15, category: 'B'},
+ *     {x: 2, y: 25, category: 'B'}
+ *   ]}
+ *   areaBy="category"
+ *   colorBy="category"
+ *   xLabel="Time"
+ *   yLabel="Value"
+ * />
+ * ```
+ */
+function StackedAreaChart(props) {
+    const { data, width = 600, height = 400, margin: userMargin, className, title, xLabel, yLabel, xFormat, yFormat, xAccessor = "x", yAccessor = "y", areaBy, lineDataAccessor = "coordinates", colorBy, colorScheme = "category10", curve = "monotoneX", areaOpacity = 0.7, showLine = true, lineWidth = 2, normalize = false, enableHover = true, showGrid = false, showLegend, tooltip, frameProps = {} } = props;
+    const safeData = data || [];
+    // Check if data is in area objects format (has lineDataAccessor field)
+    const isAreaObjectFormat = safeData[0]?.[lineDataAccessor] !== undefined;
+    // Transform data to line/area format if needed
+    const areaData = (0, react_1.useMemo)(() => {
+        if (isAreaObjectFormat) {
+            // Data is already in area objects format
+            return safeData;
+        }
+        if (areaBy) {
+            // Group data by areaBy field
+            const grouped = safeData.reduce((acc, d) => {
+                const key = typeof areaBy === "function" ? areaBy(d) : d[areaBy];
+                if (!acc[key]) {
+                    const areaObj = { [lineDataAccessor]: [] };
+                    // Add the grouping field
+                    if (typeof areaBy === "string") {
+                        areaObj[areaBy] = key;
+                    }
+                    acc[key] = areaObj;
+                }
+                acc[key][lineDataAccessor].push(d);
+                return acc;
+            }, {});
+            return Object.values(grouped);
+        }
+        // Single area - wrap in area object
+        return [{ [lineDataAccessor]: safeData }];
+    }, [safeData, areaBy, lineDataAccessor, isAreaObjectFormat]);
+    // Create color scale if colorBy is specified
+    const colorScale = (0, hooks_1.useColorScale)(safeData, colorBy, colorScheme);
+    // Curve function from module-level map
+    const curveFunction = CURVE_MAP[curve] || d3_shape_1.curveMonotoneX;
+    // Area/line style function
+    const lineStyle = (0, react_1.useMemo)(() => {
+        return (d) => {
+            const baseStyle = {};
+            // Apply color
+            const color = colorBy ? (0, colorUtils_1.getColor)(d, colorBy, colorScale) : hooks_1.DEFAULT_COLOR;
+            baseStyle.fill = color;
+            baseStyle.fillOpacity = areaOpacity;
+            if (showLine) {
+                baseStyle.stroke = color;
+                baseStyle.strokeWidth = lineWidth;
+            }
+            else {
+                baseStyle.stroke = "none";
+            }
+            return baseStyle;
+        };
+    }, [colorBy, colorScale, areaOpacity, showLine, lineWidth]);
+    // Build axes configuration
+    const axes = (0, react_1.useMemo)(() => {
+        const axesConfig = [];
+        // Y axis (left)
+        axesConfig.push({
+            orient: "left",
+            label: yLabel,
+            tickFormat: yFormat,
+            ...(showGrid && { tickLineGenerator: () => null })
+        });
+        // X axis (bottom)
+        axesConfig.push({
+            orient: "bottom",
+            label: xLabel,
+            tickFormat: xFormat,
+            ...(showGrid && { tickLineGenerator: () => null })
+        });
+        return axesConfig;
+    }, [xLabel, yLabel, xFormat, yFormat, showGrid]);
+    // Stacked area line type
+    const lineType = (0, react_1.useMemo)(() => ({
+        type: normalize ? "stackedpercent-area" : "stackedarea",
+        interpolator: curveFunction
+    }), [curveFunction, normalize]);
+    // Determine if we should show legend
+    const shouldShowLegend = showLegend !== undefined ? showLegend : areaData.length > 1;
+    // Build legend if needed
+    const legend = (0, react_1.useMemo)(() => {
+        if (!shouldShowLegend || !colorBy)
+            return undefined;
+        return (0, legendUtils_1.createLegend)({
+            data: areaData,
+            colorBy,
+            colorScale,
+            getColor: colorUtils_1.getColor
+        });
+    }, [shouldShowLegend, colorBy, areaData, colorScale]);
+    // Adjust margin for legend if present
+    const margin = (0, react_1.useMemo)(() => {
+        const defaultMargin = { top: 50, bottom: 60, left: 70, right: 40 };
+        const finalMargin = { ...defaultMargin, ...userMargin };
+        // If legend is present and right margin is too small, increase it
+        if (legend && finalMargin.right < 120) {
+            finalMargin.right = 120;
+        }
+        return finalMargin;
+    }, [userMargin, legend]);
+    // Validate data (after all hooks)
+    const error = (0, validateChartData_1.validateArrayData)({
+        componentName: "StackedAreaChart",
+        data: safeData,
+        accessors: {
+            xAccessor,
+            yAccessor,
+        },
+    });
+    if (error)
+        return React.createElement(ChartError_1.default, { componentName: "StackedAreaChart", message: error, width: width, height: height });
+    // Build XYFrame props
+    const xyFrameProps = {
+        size: [width, height],
+        lines: areaData,
+        xAccessor,
+        yAccessor,
+        lineDataAccessor,
+        lineType,
+        lineStyle,
+        axes: axes,
+        hoverAnnotation: enableHover,
+        margin,
+        ...(legend && { legend }),
+        ...(className && { className }),
+        ...(title && { title }),
+        // Add tooltip support
+        ...(tooltip && { tooltipContent: (0, Tooltip_1.normalizeTooltip)(tooltip) }),
+        // Allow frameProps to override defaults
+        transition: true,
+        ...frameProps
+    };
+    return React.createElement(XYFrame_1.default, { ...xyFrameProps });
+}

package/ai/dist/src/components/constants/coordinateNames.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.projectedXBottom = exports.projectedXTop = exports.projectedXMiddle = exports.projectedYBottom = exports.projectedYTop = exports.projectedYMiddle = exports.projectedY = exports.projectedX = void 0;
+exports.projectedX = "x";
+exports.projectedY = "y";
+exports.projectedYMiddle = "yMiddle";
+exports.projectedYTop = "yTop";
+exports.projectedYBottom = "yBottom";
+exports.projectedXMiddle = "xMiddle";
+exports.projectedXTop = "xTop";
+exports.projectedXBottom = "xBottom";