semiotic 2.0.2 → 3.0.0-beta.1

package/ai/dist/src/components/visualizationLayerBehavior/axis.js

@@ -0,0 +1,249 @@
+"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.axisLines = exports.baselineGenerator = exports.axisLabels = void 0;
+exports.generateTickValues = generateTickValues;
+exports.axisPieces = axisPieces;
+const React = __importStar(require("react"));
+const horizontalTornTickGenerator = (width, ticks, y, orient) => {
+    const step = width / ticks;
+    let currentStep = 0;
+    let tickPath = `M0,${y}`;
+    const mod = orient === "right" ? -1 : 1;
+    while (currentStep <= width) {
+        tickPath += `L${currentStep},${y}`;
+        if (currentStep < width) {
+            tickPath += `L${currentStep + step / 2},${y + 10 * mod}`;
+        }
+        currentStep += step;
+    }
+    return tickPath;
+};
+const verticalTornTickGenerator = (height, ticks, x, orient) => {
+    const step = height / ticks;
+    let currentStep = 0;
+    let tickPath = `M${x},0`;
+    const mod = orient === "bottom" ? -1 : 1;
+    while (currentStep <= height) {
+        tickPath += `L${x},${currentStep}`;
+        if (currentStep < height) {
+            tickPath += `L${x + 10 * mod},${currentStep + step / 2}`;
+        }
+        currentStep += step;
+    }
+    return tickPath;
+};
+const generateTornBaseline = (orient, baselineSettings) => {
+    let tornD = "";
+    const { x1, x2, y1, y2 } = baselineSettings;
+    if (orient === "left" || orient === "right") {
+        const calcWidth = Math.abs(x2 - x1);
+        const ticks = Math.ceil(calcWidth / 40);
+        tornD = horizontalTornTickGenerator(calcWidth, ticks, orient === "right" ? 0 : y1, orient);
+    }
+    else {
+        const calcHeight = Math.abs(y2 - y1);
+        const ticks = Math.ceil(calcHeight / 40);
+        tornD = verticalTornTickGenerator(calcHeight, ticks, x1, orient);
+    }
+    return tornD;
+};
+const defaultTickLineGenerator = ({ xy, orient, i, className = "", jaggedBase }) => {
+    let genD = `M${xy.x1},${xy.y1}L${xy.x2},${xy.y2}`;
+    if (jaggedBase && i === 0) {
+        genD = generateTornBaseline(orient, xy);
+    }
+    return (React.createElement("path", { key: i, fill: "none", stroke: "currentColor", strokeWidth: "1px", d: genD, className: `tick-line tick ${orient} ${className}` }));
+};
+const outboundTickLineGenerator = ({ xy, orient, i, className = "" }) => {
+    const tickLength = 8;
+    let genD = `M-4,${xy.y1}L${xy.x1},${xy.y2}`;
+    if (orient === "left") {
+        genD = `M${xy.x1 - tickLength},${xy.y1}L${xy.x1},${xy.y2}`;
+    }
+    else if (orient === "right") {
+        genD = `M${xy.x2},${xy.y1}L${xy.x2 + tickLength},${xy.y2}`;
+    }
+    else if (orient === "top") {
+        genD = `M${xy.x1},${xy.y1 - tickLength}L${xy.x1},${xy.y1}`;
+    }
+    else if (orient === "bottom") {
+        genD = `M${xy.x1},${xy.y2}L${xy.x1},${xy.y2 + tickLength}`;
+    }
+    return (React.createElement("path", { key: i, fill: "none", stroke: "currentColor", strokeWidth: "1px", d: genD, className: `outbound-tick-line tick ${orient} ${className}` }));
+};
+function generateTickValues(tickValues, ticks, scale) {
+    const axisSize = Math.abs(scale.range()[1] - scale.range()[0]);
+    if (!tickValues) {
+        if (!ticks) {
+            ticks = Math.max(1, Math.floor(axisSize / 40));
+        }
+        tickValues = (scale.ticks && scale.ticks(ticks)) || scale.domain();
+    }
+    return tickValues;
+}
+function axisPieces({ renderMode = () => undefined, padding = 5, scale, ticks, tickValues = generateTickValues(undefined, ticks, scale), orient = "left", size, footer = false, tickSize = footer
+    ? -10
+    : ["top", "bottom"].find((d) => d === orient)
+        ? (size ? size[1] : 0)
+        : (size ? size[0] : 0), jaggedBase }) {
+    //returns x1 (start of line), x2 (end of line) associated with the value of the tick
+    let axisDomain = [], position1, position2, domain1, domain2, tposition1, tposition2, textPositionMod = 0, textPositionMod2 = 0, defaultAnchor = "middle";
+    switch (orient) {
+        case "top":
+            position1 = "x1";
+            position2 = "x2";
+            domain1 = "y1";
+            domain2 = "y2";
+            axisDomain = [0, tickSize];
+            tposition1 = "tx";
+            tposition2 = "ty";
+            textPositionMod -= 20 - padding;
+            break;
+        case "bottom":
+            position1 = "x1";
+            position2 = "x2";
+            domain1 = "y2";
+            domain2 = "y1";
+            axisDomain = size ? [size[1], size[1] - tickSize] : [0, -tickSize];
+            tposition1 = "tx";
+            tposition2 = "ty";
+            textPositionMod += 20 + padding;
+            break;
+        case "right":
+            position1 = "y2";
+            position2 = "y1";
+            domain1 = "x2";
+            domain2 = "x1";
+            axisDomain = size ? [size[0], size[0] - tickSize] : [0, -tickSize];
+            tposition1 = "ty";
+            tposition2 = "tx";
+            textPositionMod += 5 + padding;
+            textPositionMod2 += 5;
+            defaultAnchor = "start";
+            break;
+        //left
+        default:
+            position1 = "y1";
+            position2 = "y2";
+            domain1 = "x1";
+            domain2 = "x2";
+            axisDomain = [0, tickSize];
+            tposition1 = "ty";
+            tposition2 = "tx";
+            textPositionMod -= 5 + padding;
+            textPositionMod2 += 5;
+            defaultAnchor = "end";
+            break;
+    }
+    let generatedTicks = tickValues instanceof Function ? tickValues({ orient }) : tickValues;
+    if (jaggedBase &&
+        generatedTicks.find((t) => t === scale.domain()[0]) === undefined) {
+        generatedTicks = [scale.domain()[0], ...generatedTicks];
+    }
+    return generatedTicks.map((tick, i) => {
+        const tickPosition = scale(tick);
+        return {
+            [position1]: tickPosition,
+            [position2]: tickPosition,
+            [domain1]: axisDomain[0],
+            [domain2]: axisDomain[1],
+            [tposition1]: tickPosition + textPositionMod2,
+            [tposition2]: axisDomain[0] + textPositionMod,
+            defaultAnchor,
+            renderMode: renderMode(tick, i),
+            value: tick
+        };
+    });
+}
+const axisLabels = ({ axisParts, tickFormat, rotate = 0, center = false, orient }) => {
+    return axisParts.map((axisPart, i) => {
+        let renderedValue = tickFormat(axisPart.value, i);
+        if (typeof renderedValue !== "object" || renderedValue instanceof Date) {
+            renderedValue = (React.createElement("text", { textAnchor: axisPart.defaultAnchor, className: "axis-label" }, renderedValue.toString ? renderedValue.toString() : renderedValue));
+        }
+        let textX = axisPart.tx;
+        let textY = axisPart.ty;
+        if (center) {
+            switch (orient) {
+                case "right":
+                    textX -= (axisPart.x2 - axisPart.x1) / 2;
+                    break;
+                case "left":
+                    textX += (axisPart.x2 - axisPart.x1) / 2;
+                    break;
+                case "top":
+                    textY += (axisPart.y2 - axisPart.y1) / 2;
+                    break;
+                case "bottom":
+                    textY -= (axisPart.y2 - axisPart.y1) / 2;
+                    break;
+            }
+        }
+        return (React.createElement("g", { key: i, pointerEvents: "none", transform: `translate(${textX},${textY}) rotate(${rotate})`, className: "axis-label" }, renderedValue));
+    });
+};
+exports.axisLabels = axisLabels;
+const baselineGenerator = (orient, size, className) => {
+    const offsets = {
+        left: { x: 0, y: 0, width: 0, height: size ? size[1] : 0 },
+        right: { x: size ? size[0] : 0, y: 0, width: 0, height: size ? size[1] : 0 },
+        top: { x: 0, y: 0, width: size ? size[0] : 0, height: 0 },
+        bottom: { x: 0, y: size ? size[1] : 0, width: size ? size[0] : 0, height: 0 }
+    };
+    const orientOffset = offsets[orient];
+    return (React.createElement("line", { key: "baseline", className: `axis-baseline ${className}`, stroke: "currentColor", strokeLinecap: "square", x1: orientOffset.x, x2: orientOffset.x + orientOffset.width, y1: orientOffset.y, y2: orientOffset.y + orientOffset.height }));
+};
+exports.baselineGenerator = baselineGenerator;
+const axisLines = ({ axisParts, orient, tickLineGenerator = defaultTickLineGenerator, className, jaggedBase, scale, showOutboundTickLines = false }) => {
+    const axisLines = axisParts.map((axisPart, i) => tickLineGenerator({
+        xy: axisPart,
+        orient,
+        i,
+        className,
+        jaggedBase,
+        scale
+    }));
+    const outboundAxisLines = showOutboundTickLines
+        ? axisParts.map((axisPart, i) => outboundTickLineGenerator({
+            xy: axisPart,
+            orient,
+            i,
+            className
+        }))
+        : [];
+    return [...axisLines, outboundAxisLines];
+};
+exports.axisLines = axisLines;

package/ai/dist/src/components/visualizationLayerBehavior/general.js

@@ -0,0 +1,435 @@
+"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.curveHash = void 0;
+exports.lineGeneratorDecorator = lineGeneratorDecorator;
+exports.createPoints = createPoints;
+exports.createLines = createLines;
+exports.createSummaries = createSummaries;
+exports.clonedAppliedElement = clonedAppliedElement;
+const React = __importStar(require("react"));
+const d3_shape_1 = require("d3-shape");
+const areaDrawing_1 = require("../svg/areaDrawing");
+exports.curveHash = {
+    step: d3_shape_1.curveStep,
+    stepbefore: d3_shape_1.curveStepBefore,
+    stepafter: d3_shape_1.curveStepAfter,
+    cardinal: d3_shape_1.curveCardinal,
+    basis: d3_shape_1.curveBasis,
+    linear: d3_shape_1.curveLinear,
+    catmullrom: d3_shape_1.curveCatmullRom,
+    monotone: d3_shape_1.curveMonotoneY,
+    monotonex: d3_shape_1.curveMonotoneX,
+    monotoney: d3_shape_1.curveMonotoneY,
+    natural: d3_shape_1.curveNatural
+};
+function lineGeneratorDecorator({ generator, projectedCoordinateNames, defined, xScale, yScale, interpolator, simpleLine }) {
+    const { x, y, yTop, yBottom, xBottom, xTop } = projectedCoordinateNames;
+    generator.x((d) => xScale(d[x])).curve(interpolator);
+    if (simpleLine) {
+        generator.y((d) => yScale(d[y]));
+    }
+    else {
+        generator.y0((d) => yScale(d[yBottom])).y1((d) => yScale(d[yTop]));
+        generator.x0((d) => xScale(d[xBottom])).x1((d) => xScale(d[xTop]));
+    }
+    if (defined) {
+        generator.defined((p, q) => defined(p, q));
+    }
+    else {
+        generator.defined((p) => !p._xyFrameUndefined);
+    }
+}
+function createPoints({ xScale, yScale, canvasDrawing, data, projectedCoordinateNames, customMark, canvasRender, styleFn, classFn, renderKeyFn, renderMode, showLinePoints: baseShowLinePoints }) {
+    const { y, x, xMiddle, yMiddle, yTop, yBottom } = projectedCoordinateNames;
+    const showLinePoints = baseShowLinePoints === true ? undefined : baseShowLinePoints;
+    const whichPoints = {
+        top: yTop,
+        bottom: yBottom
+    };
+    const whichWay = whichPoints[showLinePoints];
+    const mappedPoints = [];
+    data.forEach((d, i) => {
+        const dX = xScale(d[xMiddle] !== undefined ? d[xMiddle] : d[x]);
+        const dY = yScale(d[whichWay] !== undefined
+            ? d[whichWay]
+            : d[yMiddle] !== undefined
+                ? d[yMiddle]
+                : d[y]);
+        const pointAriaLabel = `Point at x ${d.x} and y ${d.y}`;
+        // CUSTOM MARK IMPLEMENTATION
+        const renderedCustomMark = !customMark
+            ? undefined
+            : React.isValidElement(customMark)
+                ? customMark
+                : customMark({ d: d.data, xy: d, i, xScale, yScale });
+        const markProps = customMark
+            ? { ...renderedCustomMark.props, "aria-label": pointAriaLabel }
+            : {
+                key: `piece-${i}`,
+                markType: "circle",
+                r: 2,
+                "aria-label": pointAriaLabel
+            };
+        if (renderedCustomMark &&
+            renderedCustomMark.props &&
+            !renderedCustomMark.props.markType &&
+            (!canvasRender || canvasRender(d.data, i) !== true)) {
+            mappedPoints.push(React.createElement("g", { transform: `translate(${dX},${dY})`, key: renderKeyFn ? renderKeyFn(d.data, i) : `custom-point-mark-${i}`, style: styleFn ? styleFn(d.data, i) : {}, className: classFn ? classFn(d.data, i) : "" }, renderedCustomMark));
+        }
+        else {
+            if (canvasRender && canvasRender(d.data, i) === true) {
+                const canvasPoint = {
+                    type: "point",
+                    baseClass: "frame-piece",
+                    tx: dX,
+                    ty: dY,
+                    d,
+                    i,
+                    markProps,
+                    styleFn,
+                    renderFn: renderMode,
+                    classFn
+                };
+                canvasDrawing.push(canvasPoint);
+            }
+            else {
+                const yCoordinates = Array.isArray(d[y])
+                    ? d[y].map((p) => yScale(p))
+                    : [dY];
+                yCoordinates.forEach((yc, yi) => {
+                    const xCoordinates = Array.isArray(d[x])
+                        ? d[x].map((p) => xScale(p))
+                        : [dX];
+                    xCoordinates.forEach((xc, xi) => {
+                        mappedPoints.push(clonedAppliedElement({
+                            baseClass: "frame-piece",
+                            tx: xc,
+                            ty: yc,
+                            d: (d.data && { ...d, ...d.data }) || d,
+                            i: yi === 0 && xi === 0 ? i : `${i}-${yi}-${xi}`,
+                            markProps,
+                            styleFn,
+                            renderKeyFn,
+                            classFn,
+                            yi
+                        }));
+                    });
+                });
+            }
+        }
+    });
+    return mappedPoints;
+}
+function createLines({ xScale, yScale, canvasDrawing, data, projectedCoordinateNames, customMark, canvasRender, styleFn, classFn, renderMode, renderKeyFn, type, defined, ariaLabel, axesData = [] }) {
+    const xAxis = axesData.find((d) => d.orient === "bottom" || d.orient === "top");
+    const yAxis = axesData.find((d) => d.orient === "left" || d.orient === "right");
+    const xAxisFormatter = (xAxis && xAxis.tickFormat) || ((d) => d);
+    const yAxisFormatter = (yAxis && yAxis.tickFormat) || ((d) => d);
+    const customLine = typeof type === "object" ? type : { type };
+    const interpolator = typeof customLine.interpolator === "string"
+        ? exports.curveHash[customLine.interpolator]
+        : customLine.interpolator || d3_shape_1.curveLinear;
+    const lineGenerator = customLine.simpleLine ? (0, d3_shape_1.line)() : (0, d3_shape_1.area)();
+    lineGeneratorDecorator({
+        projectedCoordinateNames,
+        defined,
+        interpolator,
+        generator: lineGenerator,
+        xScale,
+        yScale,
+        simpleLine: customLine.simpleLine
+    });
+    const dynamicLineGenerator = (interpolator.dynamicInterpolator &&
+        ((d, i) => {
+            const dynLineGenerator = (0, d3_shape_1.area)();
+            lineGeneratorDecorator({
+                projectedCoordinateNames,
+                defined,
+                interpolator: interpolator.dynamicInterpolator(d, i),
+                generator: dynLineGenerator,
+                xScale,
+                yScale,
+                simpleLine: customLine.simpleLine
+            });
+            return dynLineGenerator;
+        })) ||
+        (() => lineGenerator);
+    const mappedLines = [];
+    data.forEach((d, i) => {
+        const mappedDataForLines = d.data.map((p) => ({ ...p.data, ...p }));
+        if (customMark && typeof customMark === "function") {
+            //shim to make customLineMark work until Semiotic 2
+            const compatibleData = {
+                ...d,
+                data: mappedDataForLines
+            };
+            mappedLines.push(customMark({ d: compatibleData, i, xScale, yScale, canvasDrawing }));
+        }
+        else {
+            const builtInDisplayProps = {};
+            if (customLine.simpleLine) {
+                builtInDisplayProps.fill = "none";
+                builtInDisplayProps.stroke = "black";
+            }
+            const pathString = dynamicLineGenerator(d, i)(mappedDataForLines);
+            const markProps = {
+                ...builtInDisplayProps,
+                markType: "path",
+                d: pathString,
+                "aria-label": d.data &&
+                    d.data.length > 0 &&
+                    ariaLabel &&
+                    `${d.data.length} point ${ariaLabel.items} starting value ${yAxisFormatter(d.data[0].y)} at ${xAxisFormatter(d.data[0].x)} ending value ${yAxisFormatter(d.data[d.data.length - 1].y)} at ${xAxisFormatter(d.data[d.data.length - 1].x)}`
+            };
+            if (canvasRender && canvasRender(d, i) === true) {
+                const canvasLine = {
+                    type: "line",
+                    baseClass: "xyframe-line",
+                    tx: 0,
+                    ty: 0,
+                    d,
+                    i,
+                    markProps,
+                    styleFn,
+                    renderFn: renderMode,
+                    classFn
+                };
+                canvasDrawing.push(canvasLine);
+            }
+            else {
+                let moddedStyleFn = styleFn;
+                if (customLine.type === "area" && customLine.enclosed !== true) {
+                    moddedStyleFn = (d, i) => ({ ...styleFn(d, i), stroke: "none" });
+                }
+                mappedLines.push(clonedAppliedElement({
+                    baseClass: "xyframe-line",
+                    d,
+                    i,
+                    markProps,
+                    styleFn: moddedStyleFn,
+                    renderKeyFn,
+                    classFn
+                }));
+                if (customLine.type === "area" && customLine.enclosed !== true) {
+                    const topperStyleFn = (d, i) => ({ ...styleFn(d, i), fill: "none" });
+                    const topperLineGenerator = (0, d3_shape_1.line)();
+                    lineGeneratorDecorator({
+                        projectedCoordinateNames,
+                        defined,
+                        interpolator: interpolator,
+                        generator: topperLineGenerator,
+                        xScale,
+                        yScale,
+                        simpleLine: true
+                    });
+                    const topperMarkProps = {
+                        ...markProps,
+                        d: topperLineGenerator(mappedDataForLines)
+                    };
+                    const topperKeyFn = renderKeyFn
+                        ? (d, i, yi) => `${renderKeyFn(d, i, yi)}-top`
+                        : undefined;
+                    mappedLines.push(clonedAppliedElement({
+                        baseClass: "xyframe-line-top",
+                        d,
+                        i,
+                        markProps: topperMarkProps,
+                        styleFn: topperStyleFn,
+                        renderKeyFn: topperKeyFn,
+                        classFn
+                    }));
+                }
+            }
+        }
+    });
+    if (customLine.type === "difference" && data.length === 2) {
+        //Create the overlay line for the difference chart
+        const diffdataA = data[0].data.map((basedata, baseI) => {
+            const linePoint = basedata.yTop > data[1].data[baseI].yTop
+                ? basedata.yTop
+                : basedata.yBottom;
+            return {
+                x: basedata.x,
+                y: linePoint,
+                yBottom: linePoint,
+                yTop: linePoint
+            };
+        });
+        const diffdataB = data[0].data.map((basedata, baseI) => {
+            const linePoint = data[1].data[baseI].yTop > basedata.yTop
+                ? data[1].data[baseI].yTop
+                : data[1].data[baseI].yBottom;
+            return {
+                x: basedata.x,
+                y: linePoint,
+                yBottom: linePoint,
+                yTop: linePoint
+            };
+        });
+        const doClassname = classFn
+            ? `xyframe-line ${classFn(diffdataA)}`
+            : "xyframe-line";
+        const overLine = (0, d3_shape_1.line)();
+        lineGeneratorDecorator({
+            projectedCoordinateNames,
+            defined,
+            interpolator,
+            generator: overLine,
+            xScale,
+            yScale,
+            simpleLine: true
+        });
+        //      let baseStyle = props.lineStyle ? props.lineStyle(diffdata, 0) : {}
+        const diffOverlayA = (React.createElement("path", { key: "xyline-diff-a", className: `${doClassname} difference-overlay-a`, d: overLine(diffdataA), style: { fill: "none", pointerEvents: "none" } }));
+        mappedLines.push(diffOverlayA);
+        const diffOverlayB = (React.createElement("path", { key: "xyline-diff-b", className: `${doClassname} difference-overlay-b`, d: overLine(diffdataB), style: { fill: "none", pointerEvents: "none" } }));
+        mappedLines.push(diffOverlayB);
+    }
+    return mappedLines;
+}
+function createSummaries({ xScale, yScale, canvasDrawing, data, canvasRender, styleFn, classFn, renderKeyFn, renderMode, customMark }) {
+    const summaryClass = classFn || (() => "");
+    const summaryStyle = styleFn || (() => ({}));
+    const renderFn = renderMode;
+    if (!Array.isArray(data)) {
+        data = [data];
+    }
+    const renderedSummaries = [];
+    data.forEach((d, i) => {
+        let className = "xyframe-summary";
+        if (summaryClass) {
+            className = `xyframe-summary ${summaryClass(d)}`;
+        }
+        let drawD = "";
+        let shouldBeValid = false;
+        if (typeof d.customMark === "string" ||
+            React.isValidElement(d.customMark)) {
+            drawD = d.customMark;
+            shouldBeValid = true;
+        }
+        else if (d.type === "MultiPolygon") {
+            const polycoords = d.coordinates;
+            polycoords.forEach((coord) => {
+                coord.forEach((c) => {
+                    drawD += `M${c
+                        .map((p) => `${xScale(p[0])},${yScale(p[1])}`)
+                        .join("L")}Z `;
+                });
+            });
+        }
+        else if (customMark) {
+            const xyfCoords = d._xyfCoordinates;
+            const projectedCoordinates = xyfCoords.map((p) => [
+                xScale(p[0]),
+                yScale(p[1])
+            ]);
+            // CUSTOM MARK IMPLEMENTATION
+            drawD = customMark({
+                d,
+                i,
+                classFn: summaryClass,
+                styleFn: summaryStyle,
+                renderFn,
+                projectedCoordinates,
+                xScale,
+                yScale,
+                bounds: (0, areaDrawing_1.shapeBounds)(projectedCoordinates)
+            });
+            shouldBeValid = true;
+        }
+        else {
+            const xyfCoords = d._xyfCoordinates;
+            if (d.curve) {
+                const lineDrawing = (0, d3_shape_1.line)()
+                    .x((d) => xScale(d[0]))
+                    .y((d) => yScale(d[1]))
+                    .curve(d.curve);
+                drawD = lineDrawing(xyfCoords);
+            }
+            else {
+                drawD = `M${xyfCoords
+                    .map((p) => `${xScale(p[0])},${yScale(p[1])}`)
+                    .join("L")}Z`;
+            }
+        }
+        const renderKey = renderKeyFn ? renderKeyFn(d, i) : `summary-${i}`;
+        if (shouldBeValid && React.isValidElement(drawD)) {
+            renderedSummaries.push(drawD);
+        }
+        else if (canvasRender && canvasRender(d, i) === true) {
+            const canvasSummary = {
+                type: "summary",
+                baseClass: "xyframe-summary",
+                tx: 0,
+                ty: 0,
+                d,
+                i,
+                markProps: { markType: "path", d: drawD },
+                styleFn: summaryStyle,
+                renderFn,
+                classFn: () => className
+            };
+            canvasDrawing.push(canvasSummary);
+        }
+        else {
+            renderedSummaries.push(React.createElement("path", { "data-testid": "xyframe-summary", key: renderKey, className: className, d: drawD, style: summaryStyle(d, i) }));
+        }
+    });
+    return renderedSummaries;
+}
+function clonedAppliedElement({ tx, ty, d, i, markProps, styleFn, classFn, renderKeyFn, baseClass, yi }) {
+    markProps.style = styleFn ? styleFn(d, i, yi) : {};
+    markProps.className = baseClass;
+    markProps.key = renderKeyFn
+        ? renderKeyFn(d, i, yi)
+        : `${baseClass}-${d.key === undefined ? i : d.key}`;
+    if (tx || ty) {
+        markProps.transform = `translate(${tx || 0},${ty || 0})`;
+    }
+    if (classFn) {
+        markProps.className = `${baseClass} ${classFn(d, i, yi)}`;
+    }
+    if (markProps.style.r) {
+        markProps.r = markProps.style.r;
+    }
+    markProps["data-testid"] = baseClass;
+    if (!markProps.markType) {
+        const RenderableMark = markProps;
+        return React.createElement(RenderableMark);
+    }
+    const { markType, ...restProps } = markProps;
+    return React.createElement(markType, restProps);
+}

package/ai/dist/src/setupTests.js

@@ -0,0 +1,4 @@
+"use strict";
+/* eslint-disable */
+Object.defineProperty(exports, "__esModule", { value: true });
+require("@testing-library/jest-dom");