semiotic 2.0.3 → 3.0.0-beta.2

package/ai/dist/src/components/Axis/Axis.js

@@ -0,0 +1,374 @@
+"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.boundingBoxMax = exports.marginalPointMapper = void 0;
+exports.default = Axis;
+exports.formatValue = formatValue;
+const React = __importStar(require("react"));
+const react_1 = require("react");
+const axis_1 = require("./../visualizationLayerBehavior/axis");
+const summaryGraphic_1 = __importDefault(require("./summaryGraphic"));
+const axisTitle_1 = __importDefault(require("./axisTitle"));
+const formatUtils_1 = require("./../charts/shared/formatUtils");
+const summaryLayouts_1 = require("./../geometry/summaryLayouts");
+// components
+const marginalPointMapper = (orient, width, data) => {
+    const xMod = orient === "left" || orient === "right" ? width / 2 : 0;
+    const yMod = orient === "bottom" || orient === "top" ? width / 2 : 0;
+    return data.map((p) => [p.xy.x + xMod, p.xy.y + yMod]);
+};
+exports.marginalPointMapper = marginalPointMapper;
+function formatValue(value, props) {
+    if (props.tickFormat) {
+        return props.tickFormat(value);
+    }
+    if (value.toString) {
+        return value.toString();
+    }
+    return value;
+}
+const boundingBoxMax = (axisNode, orient) => {
+    const axisRef = axisNode.current;
+    if (!axisRef)
+        return 30;
+    const positionType = orient === "left" || orient === "right" ? "width" : "height";
+    const axisLabelMax = Math.max(...[...axisRef.querySelectorAll(".axis-label")]
+        .map((l) => (l.getBBox && l.getBBox()) || { height: 30, width: 30 })
+        .map((d) => d[positionType])) + 25;
+    return axisLabelMax;
+};
+exports.boundingBoxMax = boundingBoxMax;
+function Axis(props) {
+    const { rotate, label, dynamicLabelPosition, orient = "left", marginalSummaryType, tickFormat = marginalSummaryType ? () => "" : formatUtils_1.smartTickFormat, size, width = (size && size[0]) || 0, height = (size && size[1]) || 0, className, padding, tickValues, scale, ticks, footer, tickSize, tickLineGenerator, baseline = true, margin = { top: 0, bottom: 0, left: 0, right: 0 }, center = false, annotationFunction, glyphFunction, xyPoints } = props;
+    const [hoverPosition, changeHoverPosition] = (0, react_1.useState)(0);
+    const [calculatedLabelPosition, changeCalculatedLabelPosition] = (0, react_1.useState)(undefined);
+    const axisNode = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        if (!label?.position && dynamicLabelPosition) {
+            const newBBMax = boundingBoxMax(axisNode, orient);
+            if (newBBMax !== calculatedLabelPosition) {
+                changeCalculatedLabelPosition(newBBMax);
+            }
+        }
+    }, [label, dynamicLabelPosition]);
+    let { axisParts, position = [0, 0] } = props;
+    let axisTickLines;
+    if (!axisParts) {
+        axisParts = (0, axis_1.axisPieces)({
+            padding: padding,
+            tickValues,
+            scale,
+            ticks,
+            orient,
+            size: [width, height],
+            footer,
+            tickSize
+        });
+        axisTickLines = (React.createElement("g", { className: `axis ${className}` }, (0, axis_1.axisLines)({
+            axisParts,
+            orient,
+            tickLineGenerator,
+            className,
+            scale
+        })));
+    }
+    if (axisParts.length === 0) {
+        return null;
+    }
+    let hoverWidth = 50;
+    let hoverHeight = height;
+    let hoverX = -50;
+    let hoverY = 0;
+    let baselineX = 0;
+    let baselineY = 0;
+    let baselineX2 = 0;
+    let baselineY2 = height;
+    // hoverFunction is set is switch(orient) below
+    let hoverFunction;
+    let circleX = 25;
+    let textX = -25;
+    let textY = 18;
+    let lineWidth = width + 25;
+    let lineHeight = 0;
+    let circleY = hoverPosition;
+    let annotationOffset = 0;
+    let annotationType = "y";
+    switch (orient) {
+        case "right":
+            position = [position[0], position[1]];
+            hoverX = width;
+            baselineX2 = baselineX = width;
+            annotationOffset = margin.top;
+            lineWidth = -width - 25;
+            textX = 5;
+            hoverFunction = (e) => {
+                changeHoverPosition(e.nativeEvent.offsetY - annotationOffset);
+            };
+            if (center === true) {
+                baselineX2 = baselineX = width / 2;
+            }
+            break;
+        case "top":
+            position = [position[0], 0];
+            hoverWidth = width;
+            hoverHeight = 50;
+            hoverY = -50;
+            hoverX = 0;
+            annotationOffset = margin.left;
+            annotationType = "x";
+            baselineX2 = width;
+            baselineY2 = 0;
+            if (center === true) {
+                baselineY2 = baselineY = height / 2;
+            }
+            hoverFunction = (e) => {
+                changeHoverPosition(e.nativeEvent.offsetX - annotationOffset);
+            };
+            circleX = hoverPosition;
+            circleY = 25;
+            textX = 0;
+            textY = -10;
+            lineWidth = 0;
+            lineHeight = height + 25;
+            break;
+        case "bottom":
+            position = [position[0], 0];
+            hoverWidth = width;
+            hoverHeight = 50;
+            baselineY = baselineY2 = hoverY = height;
+            baselineX = hoverX = 0;
+            baselineX2 = width;
+            annotationOffset = margin.left;
+            hoverFunction = (e) => {
+                changeHoverPosition(e.nativeEvent.offsetX - annotationOffset);
+            };
+            circleX = hoverPosition;
+            circleY = 25;
+            textX = 0;
+            textY = 15;
+            lineWidth = 0;
+            lineHeight = -height - 25;
+            annotationType = "x";
+            if (center === true) {
+                baselineY2 = baselineY = height / 2;
+            }
+            break;
+        default:
+            position = [position[0], position[1]];
+            annotationOffset = margin.top;
+            if (center === true) {
+                baselineX2 = baselineX = width / 2;
+            }
+            hoverFunction = (e) => {
+                changeHoverPosition(e.nativeEvent.offsetY - annotationOffset);
+            };
+    }
+    let annotationBrush;
+    if (annotationFunction) {
+        const formattedValue = formatValue(scale.invert(hoverPosition), props);
+        const hoverGlyph = glyphFunction ? (glyphFunction({
+            lineHeight,
+            lineWidth,
+            value: scale.invert(hoverPosition)
+        })) : (React.createElement("g", null,
+            React.isValidElement(formattedValue) ? (React.createElement("g", { transform: `translate(${textX},${textY})` }, formattedValue)) : (React.createElement("text", { x: textX, y: textY }, formattedValue)),
+            React.createElement("circle", { r: 5 }),
+            React.createElement("line", { x1: lineWidth, y1: lineHeight, style: { stroke: "black" } })));
+        const annotationSymbol = hoverPosition ? (React.createElement("g", { style: { pointerEvents: "none" }, transform: `translate(${circleX},${circleY})` }, hoverGlyph)) : null;
+        annotationBrush = (React.createElement("g", { className: "annotation-brush", transform: `translate(${hoverX},${hoverY})` },
+            React.createElement("rect", { style: { fillOpacity: 0 }, height: hoverHeight, width: hoverWidth, onMouseMove: hoverFunction, onClick: (e) => annotationFunction({
+                    className: "dynamic-axis-annotation",
+                    type: annotationType,
+                    value: scale.invert(hoverPosition),
+                    e
+                }), onMouseOut: () => {
+                    changeHoverPosition(undefined);
+                } }),
+            annotationSymbol));
+    }
+    let summaryGraphic;
+    if (marginalSummaryType && xyPoints) {
+        const summaryWidth = Math.max(margin[orient] - 6, 5);
+        const decoratedSummaryType = typeof marginalSummaryType === "string"
+            ? { type: marginalSummaryType }
+            : marginalSummaryType;
+        if (decoratedSummaryType.flip === undefined &&
+            (orient === "bottom" || orient === "right")) {
+            decoratedSummaryType.flip = true;
+        }
+        const summaryStyle = decoratedSummaryType.summaryStyle
+            ? () => decoratedSummaryType.summaryStyle
+            : () => ({
+                fill: "black",
+                fillOpacity: 0.5,
+                stroke: "black",
+                strokeDasharray: "0"
+            });
+        const summaryRenderMode = decoratedSummaryType.renderMode
+            ? () => decoratedSummaryType.renderMode
+            : () => undefined;
+        const summaryClass = decoratedSummaryType.summaryClass
+            ? () => decoratedSummaryType.summaryClass
+            : () => "";
+        const dataFilter = decoratedSummaryType.filter || (() => true);
+        const forSummaryData = xyPoints
+            .filter((p) => p.x !== undefined && p.y !== undefined && dataFilter(p.data))
+            .map((d) => ({
+            ...d,
+            xy: {
+                x: orient === "top" || orient === "bottom" ? scale(d.x) : 0,
+                y: orient === "left" || orient === "right" ? scale(d.y) : 0
+            },
+            piece: {
+                scaledVerticalValue: scale(d.y),
+                scaledValue: scale(d.x)
+            },
+            value: orient === "top" || orient === "bottom" ? scale(d.y) : scale(d.x),
+            scaledValue: scale(d.x),
+            scaledVerticalValue: scale(d.y)
+        }));
+        const calculatedSummary = (0, summaryLayouts_1.drawSummaries)({
+            data: {
+                column: {
+                    middle: summaryWidth / 2,
+                    pieceData: forSummaryData,
+                    width: summaryWidth,
+                    xyData: forSummaryData
+                }
+            },
+            type: decoratedSummaryType,
+            renderMode: summaryRenderMode,
+            eventListenersGenerator: decoratedSummaryType.eventListenersGenerator || (() => ({})),
+            styleFn: summaryStyle,
+            classFn: summaryClass,
+            projection: orient === "top" || orient === "bottom" ? "horizontal" : "vertical",
+            adjustedSize: size,
+            margin: { top: 0, bottom: 0, left: 0, right: 0 }
+        });
+        const renderedSummary = (0, summaryLayouts_1.summaryInstructionsToMarks)(calculatedSummary.marks);
+        let points;
+        if (decoratedSummaryType.showPoints === true) {
+            const mappedPoints = marginalPointMapper(orient, summaryWidth, forSummaryData);
+            points = mappedPoints.map((d, i) => (React.createElement("circle", { key: `axis-summary-point-${i}`, cx: d[0], cy: d[1], r: decoratedSummaryType.r || 3, style: decoratedSummaryType.pointStyle || {
+                    fill: "black",
+                    fillOpacity: 0.1
+                } })));
+        }
+        const translation = {
+            left: [-margin.left + 2, 0],
+            right: [size[0] + 2, 0],
+            top: [0, -margin.top + 2],
+            bottom: [0, size[1] + 2]
+        };
+        summaryGraphic = (React.createElement(summaryGraphic_1.default, { translation: translation, orient: orient, decoratedSummaryType: decoratedSummaryType, summaryWidth: summaryWidth, renderedSummary: renderedSummary, points: points }));
+    }
+    let axisTitle;
+    const axisTickLabels = (0, axis_1.axisLabels)({
+        tickFormat,
+        axisParts,
+        orient,
+        rotate,
+        center
+    });
+    if (label) {
+        const labelName = label.name || label;
+        const labelPosition = label.position || {};
+        const locationMod = labelPosition.location || "outside";
+        let anchorMod = (labelPosition.anchor || "middle");
+        const distance = label.locationDistance || calculatedLabelPosition;
+        const rotateHash = {
+            left: -90,
+            right: 90,
+            top: 0,
+            bottom: 0
+        };
+        const rotation = labelPosition.rotation || rotateHash[orient];
+        const positionHash = {
+            left: {
+                start: [0, size[1]],
+                middle: [0, size[1] / 2],
+                end: [0, 0],
+                inside: [distance || 15, 0],
+                outside: [-(distance || 45), 0]
+            },
+            right: {
+                start: [size[0] + 0, size[1]],
+                middle: [size[0] + 0, size[1] / 2],
+                end: [size[0] + 0, 0],
+                inside: [-(distance || 15), 0],
+                outside: [distance || 45, 0]
+            },
+            top: {
+                start: [0, 0],
+                middle: [0 + size[0] / 2, 0],
+                end: [0 + size[0], 0],
+                inside: [0, distance || 15],
+                outside: [0, -(distance || 40)]
+            },
+            bottom: {
+                start: [0, size[1]],
+                middle: [0 + size[0] / 2, size[1]],
+                end: [0 + size[0], size[1]],
+                inside: [0, -(distance || 5)],
+                outside: [0, distance || 50]
+            }
+        };
+        const translation = positionHash[orient][anchorMod];
+        const location = positionHash[orient][locationMod];
+        translation[0] = translation[0] + location[0];
+        translation[1] = translation[1] + location[1];
+        if (anchorMod === "start" && orient === "right") {
+            anchorMod = "end";
+        }
+        else if (anchorMod === "end" && orient === "right") {
+            anchorMod = "start";
+        }
+        axisTitle = (React.createElement(axisTitle_1.default, { className: className, translation: translation, position: position, rotation: rotation, labelName: labelName, anchorMod: anchorMod }));
+    }
+    const axisAriaLabel = `${orient} axis ${(axisParts &&
+        axisParts.length > 0 &&
+        `from ${tickFormat(axisParts[0].value, 0)} to ${tickFormat(axisParts[axisParts.length - 1].value, axisParts.length - 1)}`) ||
+        "without ticks"}`;
+    return (React.createElement("g", { className: className, "aria-label": axisAriaLabel, ref: axisNode },
+        annotationBrush,
+        axisTickLabels,
+        axisTickLines,
+        baseline === true ? (React.createElement("line", { key: "baseline", className: `axis-baseline ${className}`, stroke: "black", strokeLinecap: "square", x1: baselineX, x2: baselineX2, y1: baselineY, y2: baselineY2 })) : null,
+        axisTitle,
+        summaryGraphic));
+}

package/ai/dist/src/components/Axis/axisTitle.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = AxisTitle;
+const react_1 = __importDefault(require("react"));
+function AxisTitle(props) {
+    const { className, translation, position, rotation, labelName, anchorMod } = props;
+    return (react_1.default.createElement("g", { className: `axis-title ${className}`, transform: `translate(${[
+            translation[0] + position[0],
+            translation[1] + position[1]
+        ]}) rotate(${rotation})` }, react_1.default.isValidElement(labelName) ? (labelName) : (react_1.default.createElement("text", { textAnchor: anchorMod }, labelName))));
+}

package/ai/dist/src/components/Axis/index.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const Axis_1 = __importDefault(require("./Axis"));
+exports.default = Axis_1.default;

package/ai/dist/src/components/Axis/summaryGraphic.js

@@ -0,0 +1,37 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = SummaryGraphic;
+const react_1 = __importDefault(require("react"));
+function translateX({ t, o, w }) {
+    if ((t === "contour" || t === "boxplot") && (o === "left" || o === "right")) {
+        return w / 2;
+    }
+    else {
+        return 0;
+    }
+}
+function translateY({ t, o, w }) {
+    if ((t === "contour" || t === "boxplot") && (o === "top" || o === "bottom")) {
+        return w / 2;
+    }
+    else {
+        return 0;
+    }
+}
+function SummaryGraphic(props) {
+    const { translation, orient, decoratedSummaryType, summaryWidth, renderedSummary, points } = props;
+    return (react_1.default.createElement("g", { className: "marginal-graphics", transform: `translate(${translation[orient]})` },
+        react_1.default.createElement("g", { transform: `translate(${translateX({
+                t: decoratedSummaryType.type,
+                o: orient,
+                w: summaryWidth
+            })},${translateY({
+                t: decoratedSummaryType.type,
+                o: orient,
+                w: summaryWidth
+            })})` }, renderedSummary),
+        points));
+}

package/ai/dist/src/components/Brush.js

@@ -0,0 +1,84 @@
+"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;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = Brush;
+const React = __importStar(require("react"));
+const react_1 = require("react");
+const d3_selection_1 = require("d3-selection");
+const flatten = (list) => list.reduce((a, b) => a.concat(Array.isArray(b) ? flatten(b.slice().sort((a, b) => a - b)) : b), []);
+function flatShortArray(baseArray = []) {
+    if (!Array.isArray(baseArray))
+        return "not-array";
+    let array = baseArray.slice();
+    if (!Array.isArray(array[0])) {
+        array = array.slice().sort((a, b) => a - b);
+    }
+    const flat = flatten(array);
+    const stringifiedFlattened = flat
+        .map((d) => (d instanceof Date && d.toString()) ||
+        (d !== undefined && d.toFixed && d.toFixed(2)) ||
+        "empty")
+        .toString();
+    return stringifiedFlattened;
+}
+const createBrush = (node, props) => {
+    const { svgBrush: brush, selectedExtent: baseSelectedExtent } = props;
+    (0, d3_selection_1.select)(node).call(brush);
+    if (baseSelectedExtent) {
+        let selectedExtent = baseSelectedExtent;
+        if (Array.isArray(baseSelectedExtent[0])) {
+            const sortedY = [selectedExtent[0][1], selectedExtent[1][1]].sort((a, b) => a - b);
+            selectedExtent = [
+                [selectedExtent[0][0], sortedY[0]],
+                [selectedExtent[1][0], sortedY[1]]
+            ];
+        }
+        (0, d3_selection_1.select)(node).call(brush.move, selectedExtent);
+    }
+};
+function Brush(props) {
+    const { extent, selectedExtent } = props;
+    const node = (0, react_1.useRef)(null);
+    const flatExtent = flatShortArray(extent);
+    const flatSelectedExtent = flatShortArray(selectedExtent);
+    (0, react_1.useEffect)(() => {
+        if (node?.current) {
+            createBrush(node.current, props);
+        }
+    }, [flatExtent, flatSelectedExtent, node]);
+    const { position = [0, 0] } = props;
+    return (React.createElement("g", { transform: `translate(${position})`, ref: node, className: "xybrush" }));
+}

package/ai/dist/src/components/ChartErrorBoundary.js

@@ -0,0 +1,91 @@
+"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.ChartErrorBoundary = void 0;
+const React = __importStar(require("react"));
+const ChartError_1 = __importDefault(require("./charts/shared/ChartError"));
+/**
+ * Error boundary for Semiotic charts.
+ * Catches render errors and shows a friendly fallback instead of crashing the app.
+ *
+ * @example
+ * ```tsx
+ * <ChartErrorBoundary>
+ *   <LineChart data={data} xAccessor="x" yAccessor="y" />
+ * </ChartErrorBoundary>
+ *
+ * // With custom fallback:
+ * <ChartErrorBoundary fallback={<div>Chart failed to render</div>}>
+ *   <BarChart data={data} categoryAccessor="cat" valueAccessor="val" />
+ * </ChartErrorBoundary>
+ *
+ * // With error callback:
+ * <ChartErrorBoundary onError={(err) => logError(err)}>
+ *   <Scatterplot data={data} xAccessor="x" yAccessor="y" />
+ * </ChartErrorBoundary>
+ * ```
+ */
+class ChartErrorBoundary extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = { error: null };
+    }
+    static getDerivedStateFromError(error) {
+        return { error };
+    }
+    componentDidCatch(error, errorInfo) {
+        this.props.onError?.(error, errorInfo);
+    }
+    render() {
+        if (this.state.error) {
+            const { fallback } = this.props;
+            const error = this.state.error;
+            if (typeof fallback === "function") {
+                return fallback(error);
+            }
+            if (fallback !== undefined) {
+                return fallback;
+            }
+            // Default fallback using ChartError
+            return (React.createElement(ChartError_1.default, { componentName: "ChartErrorBoundary", message: error.message || "An unexpected error occurred while rendering this chart.", width: 600, height: 400 }));
+        }
+        return this.props.children;
+    }
+}
+exports.ChartErrorBoundary = ChartErrorBoundary;

package/ai/dist/src/components/DividedLine.js

@@ -0,0 +1,65 @@
+"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;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = DividedLine;
+const React = __importStar(require("react"));
+const d3_shape_1 = require("d3-shape");
+const lineDrawing_1 = require("./geometry/lineDrawing");
+const createLineSegments = (props) => {
+    const { parameters, className, interpolate = d3_shape_1.curveLinear, customAccessors, lineDataAccessor, data, searchIterations, ...rest } = props;
+    const { x, y } = customAccessors;
+    const lineData = (0, lineDrawing_1.projectLineData)({
+        data: data,
+        lineDataAccessor: [lineDataAccessor],
+        xProp: "x",
+        yProp: "y",
+        xAccessor: [x],
+        yAccessor: [y]
+    });
+    //Compatibility before Semiotic 2
+    for (const projectedD of lineData) {
+        projectedD.data = projectedD.data.map((d) => ({ ...d.data, ...d }));
+    }
+    const lines = (0, lineDrawing_1.dividedLine)(parameters, lineData[0].data, searchIterations);
+    const lineRender = (0, d3_shape_1.line)()
+        .curve(interpolate)
+        .x((d) => d.x)
+        .y((d) => d.y);
+    return lines.map((d, i) => (React.createElement("path", { ...rest, className: className, key: `DividedLine-${i}`, style: d.key, d: lineRender(d.points) })));
+};
+function DividedLine(props) {
+    const lines = createLineSegments(props);
+    return React.createElement("g", null, lines);
+}