semiotic 2.0.3 → 3.0.0-beta.1

package/ai/dist/src/components/svg/frameFunctions.js

@@ -0,0 +1,579 @@
+"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.canvasEvent = exports.orFrameAxisGenerator = exports.calculateMargin = exports.drawMarginPath = exports.circlePath = void 0;
+exports.objectifyType = objectifyType;
+exports.generateOrdinalFrameEventListeners = generateOrdinalFrameEventListeners;
+exports.keyAndObjectifyBarData = keyAndObjectifyBarData;
+exports.adjustedPositionSize = adjustedPositionSize;
+exports.generateFrameTitle = generateFrameTitle;
+exports.orFrameConnectionRenderer = orFrameConnectionRenderer;
+const React = __importStar(require("react"));
+const SvgHelper_1 = require("../svg/SvgHelper");
+const Axis_1 = __importDefault(require("../Axis"));
+const axis_1 = require("../visualizationLayerBehavior/axis");
+const d3_scale_1 = require("d3-scale");
+const extent = (inputArray) => inputArray.reduce((p, c) => {
+    return [Math.min(c, p[0]), Math.max(c, p[1])];
+}, [Infinity, -Infinity]);
+const findActualTitle = (rawTitle) => {
+    let title = null;
+    let orient = "top";
+    if (typeof rawTitle === "string") {
+        title = rawTitle;
+    }
+    else if ("title" in rawTitle) {
+        title = rawTitle.title;
+        orient = rawTitle.orient || "top";
+    }
+    else {
+        title = rawTitle;
+    }
+    return { orient, title };
+};
+function roundToTenth(number) {
+    return Math.round(number * 10) / 10;
+}
+const circlePath = (cx, cy, r) => `${[
+    "M",
+    roundToTenth(cx - r),
+    roundToTenth(cy),
+    "a",
+    r,
+    r,
+    0,
+    1,
+    0,
+    r * 2,
+    0,
+    "a",
+    r,
+    r,
+    0,
+    1,
+    0,
+    -(r * 2),
+    0
+].join(" ")}Z`;
+exports.circlePath = circlePath;
+const drawMarginPath = ({ margin, size, inset = 0 }) => {
+    const iSize = [size[0] - inset, size[1] - inset];
+    return `M0,0 h${size[0]} v${size[1]} h-${size[0]}Z M${margin.left - inset},${margin.top - inset} v${size[1] + inset * 2 - margin.top - margin.bottom} h${iSize[0] + inset * 3 - margin.left - margin.right} v-${iSize[1] + inset * 3 - margin.top - margin.bottom}Z`;
+};
+exports.drawMarginPath = drawMarginPath;
+const calculateMargin = ({ margin, axes, title: rawTitle, oLabel, projection, size }) => {
+    if (margin !== undefined) {
+        if (typeof margin === "function") {
+            margin = margin({ size });
+        }
+        if (typeof margin !== "object") {
+            return { top: margin, bottom: margin, left: margin, right: margin };
+        }
+        else if (typeof margin === "object") {
+            return Object.assign({ top: 0, bottom: 0, left: 0, right: 0 }, margin);
+        }
+    }
+    const finalMargin = { top: 0, bottom: 0, left: 0, right: 0 };
+    let orient = "left";
+    if (axes && projection !== "radial") {
+        axes.forEach((axisObj) => {
+            const axisObjAdditionMargin = axisObj.label ? 60 : 50;
+            orient = axisObj.orient;
+            finalMargin[orient] = axisObjAdditionMargin;
+        });
+    }
+    const { title, orient: titleOrient } = findActualTitle(rawTitle);
+    if (title && !(typeof title === "string" && title.length === 0)) {
+        finalMargin[titleOrient] += 40;
+    }
+    if (oLabel && projection !== "radial") {
+        if (orient === "bottom" || orient === "top") {
+            finalMargin.left += 50;
+        }
+        else {
+            finalMargin.bottom += 50;
+        }
+    }
+    return finalMargin;
+};
+exports.calculateMargin = calculateMargin;
+function objectifyType(type) {
+    if (type instanceof Function || typeof type === "string") {
+        return { type: type };
+    }
+    else if (type === undefined) {
+        return {};
+    }
+    return type;
+}
+function generateOrdinalFrameEventListeners(customHoverBehavior, customClickBehavior) {
+    let eventListenersGenerator = () => ({});
+    if (customHoverBehavior || customClickBehavior) {
+        eventListenersGenerator = (d, i) => ({
+            onMouseEnter: customHoverBehavior
+                ? (e) => customHoverBehavior(d, i, e)
+                : undefined,
+            onMouseLeave: customHoverBehavior
+                ? (e) => customHoverBehavior(undefined, undefined, e)
+                : undefined,
+            onClick: customClickBehavior
+                ? (e) => customClickBehavior(d, i, e)
+                : undefined
+        });
+    }
+    return eventListenersGenerator;
+}
+function keyAndObjectifyBarData({ data, renderKey = (d, i) => i, oAccessor, rAccessor: baseRAccessor, originalRAccessor, originalOAccessor, multiAxis = false }) {
+    let rAccessor;
+    let multiExtents;
+    if (multiAxis && baseRAccessor.length > 1) {
+        let minNegative = Infinity;
+        multiExtents = baseRAccessor.map((accessor) => {
+            const basicExtent = extent(data.map(accessor));
+            minNegative = Math.min(basicExtent[0] / basicExtent[1], minNegative);
+            return basicExtent;
+        });
+        const rScales = multiExtents.map((ext) => {
+            let range = [0, 1];
+            let adjustedExtent = ext;
+            if (ext[0] < 0 && ext[1] > 0) {
+                range[0] = minNegative;
+                adjustedExtent[0] = adjustedExtent[1] * minNegative;
+            }
+            else if (ext[0] < 0 && ext[1] < 0) {
+                adjustedExtent[1] = 0;
+                range = [-1, 0];
+            }
+            else {
+                adjustedExtent[0] = 0;
+            }
+            return (0, d3_scale_1.scaleLinear)().domain(ext).range(range);
+        });
+        rAccessor = rScales.map((scale, i) => (d) => {
+            return scale(baseRAccessor[i](d));
+        });
+    }
+    else {
+        rAccessor = baseRAccessor;
+    }
+    const decoratedData = [];
+    oAccessor.forEach((actualOAccessor, oIndex) => {
+        rAccessor.forEach((actualRAccessor, rIndex) => {
+            ;
+            (data || []).forEach((d) => {
+                const baseAppliedKey = renderKey(d, decoratedData.length);
+                const appliedKey = (baseAppliedKey !== undefined &&
+                    baseAppliedKey.toString &&
+                    baseAppliedKey.toString()) ||
+                    baseAppliedKey;
+                const originalR = originalRAccessor[rIndex];
+                const originalO = originalOAccessor[oIndex];
+                const rName = typeof originalR === "string" ? originalR : `function-${rIndex}`;
+                const oName = typeof originalO === "string" ? originalO : `function-${oIndex}`;
+                if (typeof d !== "object") {
+                    const expandedData = { value: d, renderKey: appliedKey };
+                    const value = actualRAccessor(expandedData);
+                    decoratedData.push({
+                        data: expandedData,
+                        value,
+                        rIndex,
+                        rName,
+                        oIndex,
+                        oName,
+                        column: appliedKey,
+                        renderKey: appliedKey
+                    });
+                }
+                else {
+                    const value = actualRAccessor(d);
+                    const column = actualOAccessor(d);
+                    decoratedData.push({
+                        renderKey: appliedKey,
+                        data: d,
+                        rIndex,
+                        rName,
+                        oIndex,
+                        oName,
+                        value,
+                        column: column && column.toString ? column.toString() : column
+                    });
+                }
+            });
+        });
+    });
+    return { allData: decoratedData, multiExtents };
+}
+function adjustedPositionSize({ size = [500, 500], position = [0, 0], margin, projection }) {
+    const heightAdjust = margin.top + margin.bottom;
+    const widthAdjust = margin.left + margin.right;
+    const adjustedPosition = [position[0], position[1]];
+    let adjustedSize = [size[0] - widthAdjust, size[1] - heightAdjust];
+    if (projection === "radial") {
+        const minSize = Math.min(adjustedSize[0], adjustedSize[1]);
+        adjustedSize = [minSize, minSize];
+    }
+    return { adjustedPosition, adjustedSize };
+}
+function generateFrameTitle({ title: rawTitle = { title: "", orient: "top" }, size }) {
+    let finalTitle = null;
+    const { title, orient } = findActualTitle(rawTitle);
+    let x = 0, y = 0, transform;
+    switch (orient) {
+        case "top":
+            x = size[0] / 2;
+            y = 25;
+            break;
+        case "bottom":
+            x = size[0] / 2;
+            y = size[1] - 25;
+            break;
+        case "left":
+            x = 25;
+            y = size[1] / 2;
+            transform = "rotate(-90)";
+            break;
+        case "right":
+            x = size[0] - 25;
+            y = size[1] / 2;
+            transform = "rotate(90)";
+            break;
+    }
+    const gTransform = `translate(${x},${y})`;
+    if (typeof title === "string" && title.length > 0) {
+        finalTitle = (React.createElement("g", { transform: gTransform },
+            React.createElement("text", { className: "frame-title", transform: transform, style: { textAnchor: "middle", pointerEvents: "none" } }, title)));
+    }
+    else if (title) {
+        //assume if defined then its an svg mark of some sort
+        finalTitle = React.createElement("g", { transform: gTransform }, title);
+    }
+    return finalTitle;
+}
+function orFrameConnectionRenderer({ type, data, renderMode, eventListenersGenerator, styleFn, classFn, projection, canvasRender, canvasDrawing, pieceType }) {
+    if (!type.type) {
+        return null;
+    }
+    const renderedConnectorMarks = [];
+    const radarMap = new Map();
+    const { keyedData, oExtent } = data;
+    if (typeof type.type === "function") {
+        const connectionRule = type.type;
+        const keys = oExtent;
+        oExtent.forEach((key, pieceArrayI) => {
+            const pieceArray = keyedData[key];
+            const nextColumn = keyedData[keys[pieceArrayI + 1]];
+            if (nextColumn) {
+                const matchArray = nextColumn.map((d, i) => connectionRule({ ...d.piece, ...d.piece.data }, i));
+                pieceArray.forEach((piece, pieceI) => {
+                    const thisConnectionPiece = connectionRule({ ...piece.piece, ...piece.piece.data }, pieceI);
+                    const targetMatch = connectionRule({ ...piece.piece, ...piece.piece.data }, pieceI);
+                    const matchingPieceIndex = targetMatch !== undefined &&
+                        targetMatch !== false &&
+                        matchArray.indexOf(targetMatch);
+                    if (thisConnectionPiece !== undefined &&
+                        thisConnectionPiece !== null &&
+                        matchingPieceIndex !== false &&
+                        matchingPieceIndex !== -1) {
+                        const matchingPiece = nextColumn[matchingPieceIndex];
+                        let markD;
+                        if (projection === "radial" && pieceType.type === "point") {
+                            if (!radarMap.get(piece)) {
+                                radarMap.set(piece, [piece]);
+                            }
+                            const thisRadar = radarMap.get(piece);
+                            if (thisRadar) {
+                                thisRadar.push(matchingPiece);
+                                radarMap.set(matchingPiece, thisRadar);
+                                radarMap.delete(piece);
+                            }
+                        }
+                        else {
+                            const { xy } = piece;
+                            const { xy: mxy } = matchingPiece;
+                            const { x, y, height = 1, width = 1 } = xy;
+                            const { x: mx, y: my, height: mheight = 1, width: mwidth = 1 } = mxy;
+                            if (projection === "vertical") {
+                                markD = (0, SvgHelper_1.drawAreaConnector)({
+                                    x1: x + width,
+                                    x2: mx,
+                                    y1: y,
+                                    y2: my,
+                                    sizeX1: 0,
+                                    sizeX2: 0,
+                                    sizeY1: height,
+                                    sizeY2: mheight
+                                });
+                            }
+                            else if (projection === "horizontal") {
+                                const { value } = piece.piece;
+                                const { value: mvalue } = matchingPiece.piece;
+                                const x1 = value >= 0 ? x - width : piece.piece.bottom - width;
+                                const x2 = mvalue >= 0
+                                    ? mx - mwidth
+                                    : matchingPiece.piece.bottom - mwidth;
+                                markD = (0, SvgHelper_1.drawAreaConnector)({
+                                    x1,
+                                    x2,
+                                    y1: y + height,
+                                    y2: my,
+                                    sizeX1: width,
+                                    sizeX2: mwidth,
+                                    sizeY1: 0,
+                                    sizeY2: 0
+                                });
+                            }
+                            else if (projection === "radial") {
+                                markD = (0, SvgHelper_1.drawAreaConnector)({
+                                    x1: x,
+                                    x2: mx,
+                                    y1: y + height,
+                                    y2: my,
+                                    sizeX1: width,
+                                    sizeX2: mwidth,
+                                    sizeY1: 0,
+                                    sizeY2: 0
+                                });
+                            }
+                            const renderValue = renderMode && renderMode(piece.piece, pieceI);
+                            const source = { ...piece.piece.data, ...piece.piece.data };
+                            const target = {
+                                ...matchingPiece.piece,
+                                ...matchingPiece.piece.data
+                            };
+                            const calculatedStyle = styleFn({
+                                source,
+                                target
+                            });
+                            const eventListeners = eventListenersGenerator({ source, target }, pieceI);
+                            if (canvasRender && canvasRender(piece.piece) === true) {
+                                const canvasConnector = {
+                                    baseClass: "xyframe-line",
+                                    tx: 0,
+                                    ty: 0,
+                                    d: {
+                                        source,
+                                        target
+                                    },
+                                    markProps: { d: markD, markType: "path" },
+                                    styleFn: styleFn,
+                                    renderFn: renderMode,
+                                    classFn
+                                };
+                                canvasDrawing.push(canvasConnector);
+                            }
+                            else {
+                                renderedConnectorMarks.push(React.createElement("path", { ...eventListeners, d: markD, className: classFn ? classFn(piece.piece.data, pieceI) : "", key: `connector${piece.piece.renderKey}`, ...calculatedStyle, style: calculatedStyle }));
+                            }
+                        }
+                    }
+                });
+            }
+        });
+        if (radarMap.size > 0) {
+            for (const ring of radarMap.values()) {
+                const ringPiece = { ...ring[0].piece, ...ring[0].piece.data };
+                const markD = `M${ring.map((d) => `${d.xy.x},${d.xy.y}`).join("L")}Z`;
+                if (canvasRender && canvasRender(ringPiece)) {
+                    const canvasRadar = {
+                        baseClass: "ordinal-radar",
+                        tx: 0,
+                        ty: 0,
+                        d: {
+                            source: ringPiece
+                        },
+                        markProps: { d: markD, markType: "path" },
+                        styleFn: styleFn,
+                        renderFn: renderMode,
+                        classFn
+                    };
+                    canvasDrawing.push(canvasRadar);
+                }
+                else {
+                    const style = styleFn({
+                        source: ringPiece
+                    });
+                    renderedConnectorMarks.push(React.createElement("path", { d: markD, className: classFn ? classFn(ringPiece) : "", key: `ordinal-ring-${ringPiece.renderKey}`, ...style, style: style }));
+                }
+            }
+        }
+    }
+    else if (type.type) {
+        console.error(`Invalid connectorType - Must be a function that takes a data point and determines if it is connected to a data point in the next column`);
+    }
+    return renderedConnectorMarks;
+}
+const orFrameAxisGenerator = ({ projection, axis, adjustedSize, size, rScale, rScaleType, pieceType, rExtent, data, maxColumnValues = 1, xyData, margin, thresholds }) => {
+    if (!axis)
+        return { axis: undefined, axesTickLines: undefined };
+    let generatedAxis, axesTickLines;
+    if (projection !== "radial" && axis) {
+        axesTickLines = [];
+        const axisPosition = [0, 0];
+        generatedAxis = axis.map((d, i) => {
+            let axisClassname = d.className || "";
+            let tickValues;
+            const axisDomain = d.extentOverride ? d.extentOverride : rScale.domain();
+            const leftRight = ["left", "right"];
+            const axisScale = (leftRight.indexOf(d.orient) === -1 && projection !== "vertical") ||
+                (leftRight.indexOf(d.orient) !== -1 && projection !== "horizontal")
+                ? rScaleType.domain(axisDomain)
+                : rScaleType.domain([0, maxColumnValues]);
+            const orient = d.orient;
+            const axisRange = (leftRight.indexOf(d.orient) === -1 && projection !== "vertical") ||
+                (leftRight.indexOf(d.orient) !== -1 && projection !== "horizontal")
+                ? rScale.range()
+                : [0, projection === "vertical" ? adjustedSize[0] : adjustedSize[1]];
+            if (orient === "right") {
+                axisScale.range(axisRange.reverse());
+                axisClassname += " right y";
+            }
+            else if (orient === "left") {
+                axisClassname += " left y";
+                axisScale.range(axisRange.reverse());
+            }
+            else if (orient === "top") {
+                axisClassname += " top x";
+                axisScale.range(axisRange);
+            }
+            else if (orient === "bottom") {
+                axisClassname += " bottom x";
+                axisScale.range(axisRange);
+            }
+            if (d.tickValues && Array.isArray(d.tickValues)) {
+                tickValues = d.tickValues;
+            }
+            else if (d.tickValues instanceof Function) {
+                //otherwise assume a function
+                tickValues = d.tickValues(data, size, rScale);
+            }
+            else if (!d.tickValues && thresholds) {
+                tickValues = thresholds.map((d) => rScale.invert(d));
+            }
+            const axisParts = (0, axis_1.axisPieces)({
+                padding: d.padding,
+                tickValues,
+                scale: axisScale,
+                ticks: d.ticks,
+                orient,
+                size: adjustedSize,
+                footer: d.footer,
+                tickSize: d.tickSize,
+                jaggedBase: d.jaggedBase
+            });
+            const axisTickLines = (0, axis_1.axisLines)({
+                className: d.className,
+                axisParts,
+                orient,
+                tickLineGenerator: d.tickLineGenerator,
+                jaggedBase: d.jaggedBase,
+                scale: axisScale
+            });
+            axesTickLines.push(axisTickLines);
+            if (d.baseline === "under") {
+                axesTickLines.push((0, axis_1.baselineGenerator)(d.orient, adjustedSize, d.className));
+            }
+            const marginalSummaryType = typeof d.marginalSummaryType === "string"
+                ? { type: d.marginalSummaryType }
+                : d.marginalSummaryType;
+            return (React.createElement(Axis_1.default, { ...d, key: d.key || `orframe-axis-${i}`, axisParts: axisParts, orient: orient, size: adjustedSize, position: axisPosition, tickValues: tickValues, scale: axisScale, className: axisClassname, marginalSummaryType: marginalSummaryType, margin: margin, xyPoints: xyData.map((d) => ({
+                    x: projection === "vertical" ? 0 : d.value,
+                    y: projection === "vertical" ? d.value : 0,
+                    data: d.data
+                })) }));
+        });
+    }
+    else if (projection === "radial" && axis) {
+        const { innerRadius = 0 } = pieceType;
+        const ticks = [];
+        axis.forEach((axisObj) => {
+            const { tickValues: baseTickValues = rScale.ticks(Math.max(2, (adjustedSize[0] / 2 - innerRadius) / 50)), label, tickFormat = (d) => d } = axisObj;
+            const tickScale = rScaleType
+                .domain(rExtent)
+                .range([innerRadius, adjustedSize[0] / 2]);
+            const tickValues = baseTickValues instanceof Function
+                ? baseTickValues({
+                    orient: axisObj.orient
+                })
+                : baseTickValues;
+            tickValues.forEach((t, i) => {
+                const tickSize = tickScale(t);
+                if (!(innerRadius === 0 && t === 0)) {
+                    let axisLabel;
+                    let ref = "";
+                    if (label && i === tickValues.length - 1) {
+                        const labelSettings = typeof label === "string"
+                            ? { name: label, locationDistance: 15 }
+                            : label;
+                        const { locationDistance = 15 } = labelSettings;
+                        ref = `${Math.random().toString()} `;
+                        axisLabel = (React.createElement("g", { className: "axis-label radial", transform: `translate(0,${locationDistance})` },
+                            React.createElement("text", { textAnchor: "middle" },
+                                React.createElement("textPath", { startOffset: tickSize * Math.PI * 0.5, xlinkHref: `#${ref}` }, label.name))));
+                    }
+                    ticks.push(React.createElement("g", { key: `orframe-radial-axis-element-${t}`, className: "axis axis-label axis-tick radial", transform: `translate(0,0)` },
+                        React.createElement("path", { id: ref, d: (0, exports.circlePath)(0, 0, tickSize), r: tickSize, stroke: "gray", fill: "none" }),
+                        React.createElement("text", { y: -tickSize + 5, textAnchor: "middle" }, tickFormat(t)),
+                        axisLabel));
+                }
+                return undefined;
+            });
+        });
+        generatedAxis = [
+            React.createElement("g", { key: axis[0].key || `orframe-radial-axis-container`, className: "axis-labels", transform: `translate(${adjustedSize[0] / 2},${adjustedSize[1] / 2})` }, ticks)
+        ];
+    }
+    return { axis: generatedAxis, axesTickLines };
+};
+exports.orFrameAxisGenerator = orFrameAxisGenerator;
+const canvasEvent = (canvasContext, overlayRegions, canvasMap, e) => {
+    const interactionContext = canvasContext.getContext("2d", { willReadFrequently: true });
+    const hoverPoint = interactionContext.getImageData(e.offsetX, e.offsetY, 1, 1);
+    const mostCommonRGB = `rgba(${hoverPoint.data[0]},${hoverPoint.data[1]},${hoverPoint.data[2]},255)`;
+    let overlay = overlayRegions[canvasMap.get(mostCommonRGB)];
+    if (!overlay) {
+        const hoverArea = interactionContext.getImageData(e.offsetX - 2, e.offsetY - 2, 5, 5);
+        let x = 0;
+        while (!overlay && x < 100) {
+            overlay =
+                overlayRegions[canvasMap.get(`rgba(${hoverArea.data[x]},${hoverArea.data[x + 1]},${hoverArea.data[x + 2]},255)`)];
+            x += 4;
+        }
+    }
+    return overlay;
+};
+exports.canvasEvent = canvasEvent;