semiotic 2.0.3 → 3.0.0-beta.2

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("../geometry/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");