semiotic 2.0.3 → 3.0.0-beta.1

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

@@ -0,0 +1,588 @@
+"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.swarmLayout = void 0;
+exports.clusterBarLayout = clusterBarLayout;
+exports.barLayout = barLayout;
+exports.timelineLayout = timelineLayout;
+exports.pointLayout = pointLayout;
+const React = __importStar(require("react"));
+const d3_shape_1 = require("d3-shape");
+const svg_path_bounding_box_1 = __importDefault(require("svg-path-bounding-box"));
+const d3_scale_1 = require("d3-scale");
+const pieceDrawing_1 = require("./pieceDrawing");
+const twoPI = Math.PI * 2;
+const radialBarFeatureGenerator = ({ type, ordset, adjustedSize, piece, i }) => {
+    let { innerRadius } = type;
+    const { offsetAngle = 0, angleRange = [0, 360] } = type;
+    const offsetPct = offsetAngle / 360;
+    const rangePct = angleRange.map((d) => d / 360);
+    const rangeMod = rangePct[1] - rangePct[0];
+    const adjustedPct = rangeMod < 1 ? (0, d3_scale_1.scaleLinear)().domain([0, 1]).range(rangePct) : (d) => d;
+    let innerSize = type.type === "clusterbar"
+        ? 0
+        : type.type === "timeline"
+            ? piece.scaledValue / 2
+            : piece.bottom / 2;
+    let outerSize = type.type === "clusterbar"
+        ? piece.scaledValue / 2
+        : type.type === "timeline"
+            ? piece.scaledEndValue / 2
+            : piece.scaledValue / 2 + piece.bottom / 2;
+    if (innerRadius) {
+        innerRadius = parseInt(innerRadius, 10);
+        const canvasRadius = adjustedSize[0] / 2;
+        const donutMod = (canvasRadius - innerRadius) / canvasRadius;
+        innerSize = innerSize * donutMod + innerRadius;
+        outerSize = outerSize * donutMod + innerRadius;
+    }
+    const arcGenerator = (0, d3_shape_1.arc)().innerRadius(innerSize).outerRadius(outerSize);
+    const angle = (type.type === "clusterbar"
+        ? (ordset.pct - ordset.pct_padding) / ordset.pieceData.length
+        : ordset.pct) * rangeMod;
+    const startAngle = adjustedPct(type.type === "clusterbar"
+        ? ordset.pct_start +
+            (i / ordset.pieceData.length) * (ordset.pct - ordset.pct_padding)
+        : ordset.pct === 1
+            ? 0
+            : ordset.pct_start + offsetPct);
+    const endAngle = ordset.pct === 1
+        ? rangePct[1]
+        : Math.max(startAngle, startAngle + angle - ordset.pct_padding / 2);
+    const startAngleFinal = startAngle * twoPI;
+    const endAngleFinal = endAngle * twoPI;
+    const markD = arcGenerator({
+        startAngle: startAngleFinal,
+        endAngle: endAngleFinal
+    });
+    const centroid = arcGenerator.centroid({
+        startAngle: startAngleFinal,
+        endAngle: endAngleFinal
+    });
+    const xOffset = adjustedSize[0] / 2;
+    const yOffset = adjustedSize[1] / 2;
+    const xPosition = centroid[0] + xOffset;
+    const yPosition = centroid[1] + yOffset;
+    const outerPoint = (0, pieceDrawing_1.pointOnArcAtAngle)([0, 0], (startAngle + endAngle) / 2, piece.scaledValue / 2);
+    const xy = {
+        arcGenerator: arcGenerator,
+        startAngle: startAngleFinal,
+        endAngle: endAngleFinal,
+        dx: outerPoint[0],
+        dy: outerPoint[1]
+    };
+    const translate = `translate(${xOffset},${yOffset})`;
+    return {
+        xPosition,
+        yPosition,
+        xy,
+        translate,
+        tx: xOffset,
+        ty: yOffset,
+        markProps: {
+            markType: "path",
+            d: markD,
+            transform: translate
+        }
+    };
+};
+const iconBarCustomMark = ({ type, projection, finalHeight, finalWidth, styleFn, renderValue, classFn }) => (piece, i, xy) => {
+    const iconD = typeof type.icon === "string" ? type.icon : type.icon(piece.data, i);
+    const { iconPadding = 1, resize = "auto" } = type;
+    const iconBounds = (0, svg_path_bounding_box_1.default)(iconD);
+    const iconTranslate = [
+        0 - iconBounds.x1 + iconPadding,
+        0 - iconBounds.y1 + iconPadding
+    ];
+    iconBounds.height += iconPadding * 2;
+    iconBounds.width += iconPadding * 2;
+    const icons = [];
+    let stackedIconSize = iconBounds.height;
+    let stackedIconNumber = 1;
+    let iconScale = 1;
+    const spaceToUse = projection === "horizontal" ? finalHeight : finalWidth;
+    const sizeToFit = projection === "horizontal" ? iconBounds.height : iconBounds.width;
+    const sizeToPad = projection === "horizontal" ? iconBounds.width : iconBounds.height;
+    const spaceToFill = projection === "horizontal" ? xy.width : xy.height;
+    const spaceToStackFill = projection === "horizontal" ? xy.height : xy.width;
+    if (resize === "auto") {
+        stackedIconSize = spaceToUse / sizeToFit;
+        if (stackedIconSize < 1) {
+            iconScale = stackedIconSize;
+        }
+        else {
+            stackedIconNumber = Math.floor(stackedIconSize);
+            iconScale =
+                1 + (stackedIconSize - stackedIconNumber) / stackedIconNumber;
+        }
+    }
+    else if (resize === "fixed") {
+        iconScale = spaceToUse / sizeToFit;
+    }
+    //  const finalIconWidth = iconBounds.width * iconScale;
+    const finalIconHeight = iconBounds.height * iconScale;
+    const spaceToStep = sizeToPad * iconScale;
+    const spaceToStackStep = sizeToFit * iconScale;
+    iconTranslate[0] = iconTranslate[0] * iconScale;
+    iconTranslate[1] = iconTranslate[1] * iconScale;
+    const randoClipID = `iso-clip-${i}-${Math.random()}`;
+    const clipPath = `url(#${randoClipID})`;
+    if (xy.width > 0) {
+        icons.push(React.createElement("clipPath", { key: randoClipID, id: randoClipID },
+            React.createElement("rect", { x: 0, y: 0, width: xy.width, height: xy.height })));
+        const iconPieces = [];
+        const stepStart = projection === "horizontal" ? 0 : xy.height - finalIconHeight;
+        const stepper = projection === "horizontal" ? spaceToStep : -spaceToStep;
+        const stepTest = projection === "horizontal"
+            ? (step, spaceToFillValue) => step < spaceToFillValue
+            : (step, spaceToFillValue, stepperValue) => step > 0 + stepperValue;
+        for (let step = stepStart; stepTest(step, spaceToFill, stepper); step += stepper) {
+            for (let stack = 0; stack < spaceToStackFill; stack += spaceToStackStep) {
+                const stepX = projection === "horizontal" ? step : stack;
+                const stepY = projection === "horizontal" ? stack : step;
+                const paddedX = stepX + iconTranslate[0];
+                const paddedY = stepY + iconTranslate[1];
+                iconPieces.push(React.createElement("path", { key: `icon-${step}-${stack}`, transform: `translate(${paddedX},${paddedY}) scale(${iconScale})`, vectorEffect: "non-scaling-stroke", d: iconD, style: styleFn({ ...piece, ...piece.data }, i), className: classFn({ ...piece, ...piece.data }, i) }));
+            }
+        }
+        icons.push(React.createElement("g", { key: `clipped-region-${i}`, clipPath: clipPath }, iconPieces));
+    }
+    return icons;
+};
+function clusterBarLayout({ type, data, renderMode, eventListenersGenerator, styleFn, projection, classFn, adjustedSize, chartSize, margin, rScale }) {
+    let allCalculatedPieces = [];
+    const keys = Object.keys(data);
+    keys.forEach((key, ordsetI) => {
+        const ordset = data[key];
+        const barColumnWidth = Math.max(ordset.width, 1);
+        const clusterWidth = barColumnWidth / ordset.pieceData.length;
+        let currentX = 0;
+        let currentY = 0;
+        const calculatedPieces = ordset.pieceData.map((piece, i) => {
+            const renderValue = renderMode && renderMode(piece.data, i);
+            let xPosition = piece.x;
+            let yPosition = piece.base;
+            let finalWidth = clusterWidth;
+            let finalHeight = piece.scaledValue;
+            let xy = { x: 0, y: 0 };
+            if (!piece.negative) {
+                yPosition -= piece.scaledValue;
+            }
+            if (projection === "horizontal") {
+                //TODO: NEGATIVE FOR HORIZONTAL
+                yPosition = piece.x;
+                xPosition = piece.base;
+                finalHeight = clusterWidth;
+                finalWidth = piece.scaledValue;
+                xy.x = piece.scaledValue;
+                if (piece.negative) {
+                    xPosition -= piece.scaledValue;
+                    xy.x = xPosition;
+                }
+            }
+            let translate, markProps = {}, pieceTx = 0, pieceTy = 0;
+            if (projection === "radial") {
+                let tx, ty;
+                ({ xPosition, yPosition, markProps, xy, tx, ty } = radialBarFeatureGenerator({
+                    type,
+                    ordset,
+                    adjustedSize,
+                    piece,
+                    i
+                }));
+                pieceTx = tx;
+                pieceTy = ty;
+                xy.x = xPosition;
+            }
+            else {
+                xPosition += currentX;
+                yPosition += currentY;
+                markProps = {
+                    markType: "rect",
+                    x: xPosition,
+                    y: yPosition,
+                    width: Math.max(0, finalWidth),
+                    height: Math.max(0, finalHeight),
+                    rx: 0,
+                    ry: 0
+                };
+                if (projection === "vertical") {
+                    xy.x = xPosition;
+                }
+            }
+            const eventListeners = eventListenersGenerator(piece, i);
+            xy.y = yPosition;
+            xy.middle = clusterWidth / 2;
+            xy.height = finalHeight;
+            xy.width = finalWidth;
+            if (type.icon && projection !== "radial") {
+                type.customMark = iconBarCustomMark({
+                    type,
+                    projection,
+                    finalHeight,
+                    finalWidth,
+                    styleFn,
+                    renderValue,
+                    classFn
+                });
+            }
+            else if (type.icon && projection === "radial") {
+                console.error("Icons are currently unsupported on radial charts");
+            }
+            const renderElementObject = type.customMark ? (React.createElement("g", { key: `piece-${piece.renderKey}`, transform: translate ? translate : `translate(${xPosition},${yPosition})` }, type.customMark({ ...piece.data, ...piece, x: xPosition, y: yPosition }, i, {
+                ...xy,
+                renderMode,
+                styleFn,
+                classFn,
+                adjustedSize,
+                chartSize,
+                margin,
+                rScale
+            }))) : ({
+                className: classFn({ ...piece, ...piece.data }, i),
+                key: `piece-${piece.renderKey}`,
+                transform: translate,
+                style: styleFn({ ...piece, ...piece.data }, ordsetI),
+                ...markProps,
+                ...eventListeners
+            });
+            const calculatedPiece = {
+                o: key,
+                xy,
+                piece,
+                tx: pieceTx,
+                ty: pieceTy,
+                renderValue,
+                renderElement: renderElementObject
+            };
+            if (projection === "horizontal") {
+                currentY += finalHeight;
+            }
+            else {
+                currentX += finalWidth;
+            }
+            //        currentOffset += pieceSize
+            return calculatedPiece;
+        });
+        allCalculatedPieces = [...allCalculatedPieces, ...calculatedPieces];
+    });
+    return allCalculatedPieces;
+}
+function barLayout({ type, data, renderMode, eventListenersGenerator, styleFn, projection, classFn, adjustedSize, chartSize, margin, rScale }) {
+    const keys = Object.keys(data);
+    let allCalculatedPieces = [];
+    keys.forEach((key, ordsetI) => {
+        const ordset = data[key];
+        const barColumnWidth = Math.max(ordset.width, 1);
+        ordset.pieceData.forEach((piece, i) => {
+            const pieceSize = piece.scaledValue;
+            const renderValue = renderMode && renderMode(piece.data, i);
+            let xPosition = piece.x;
+            let yPosition = piece.bottom;
+            let finalWidth = barColumnWidth;
+            let finalHeight = pieceSize;
+            let xy = {};
+            if (!piece.negative) {
+                yPosition -= piece.scaledValue;
+            }
+            if (projection === "vertical") {
+                xy = {
+                    x: xPosition,
+                    y: yPosition,
+                    middle: barColumnWidth / 2,
+                    height: finalHeight,
+                    width: finalWidth
+                };
+            }
+            else if (projection === "horizontal") {
+                yPosition = piece.x;
+                xPosition = piece.bottom;
+                finalHeight = barColumnWidth;
+                finalWidth = pieceSize;
+                xy = {
+                    x: xPosition + piece.scaledValue,
+                    y: yPosition,
+                    middle: barColumnWidth / 2,
+                    height: finalHeight,
+                    width: finalWidth
+                };
+                if (piece.negative) {
+                    xPosition = piece.bottom - piece.scaledValue;
+                }
+            }
+            let markProps, pieceTx = 0, pieceTy = 0;
+            if (projection === "radial") {
+                let tx, ty;
+                ({ markProps, xPosition, yPosition, tx, ty } = radialBarFeatureGenerator({
+                    type,
+                    ordset,
+                    adjustedSize,
+                    piece,
+                    i
+                }));
+                pieceTx = tx;
+                pieceTy = ty;
+                finalHeight = undefined;
+                finalWidth = undefined;
+                xy = {
+                    x: xPosition,
+                    y: yPosition,
+                    middle: barColumnWidth / 2,
+                    height: finalHeight,
+                    width: finalWidth
+                };
+            }
+            else {
+                markProps = {
+                    markType: "rect",
+                    x: xPosition,
+                    y: yPosition,
+                    width: Math.max(0, finalWidth),
+                    height: Math.max(0, finalHeight),
+                    rx: 0,
+                    ry: 0
+                };
+            }
+            const eventListeners = eventListenersGenerator(piece, i);
+            if (type.icon && projection !== "radial") {
+                type.customMark = iconBarCustomMark({
+                    type,
+                    projection,
+                    finalHeight,
+                    finalWidth,
+                    styleFn,
+                    renderValue,
+                    classFn
+                });
+            }
+            else if (type.icon && projection !== "horizontal") {
+                console.error("Icons are currently unsupported in radial charts");
+            }
+            const renderElementObject = type.customMark ? (React.createElement("g", { key: `piece-${piece.renderKey}`, transform: `translate(${xPosition},${yPosition})`, role: "img", tabIndex: -1 }, type.customMark({ ...piece.data, ...piece, x: xPosition, y: yPosition }, i, {
+                ...xy,
+                renderMode,
+                styleFn,
+                classFn,
+                adjustedSize,
+                chartSize,
+                margin,
+                rScale
+            }))) : ({
+                className: classFn({ ...piece, ...piece.data }, i),
+                key: `piece-${piece.renderKey}`,
+                style: styleFn({ ...piece, ...piece.data }, ordsetI),
+                ...eventListeners,
+                ...markProps
+            });
+            allCalculatedPieces.push({
+                o: key,
+                xy,
+                piece,
+                tx: pieceTx,
+                ty: pieceTy,
+                renderValue,
+                renderElement: renderElementObject
+            });
+        });
+    });
+    return allCalculatedPieces;
+}
+function timelineLayout({ type, data, renderMode, eventListenersGenerator, styleFn, projection, classFn, adjustedSize, chartSize, margin, rScale }) {
+    let allCalculatedPieces = [];
+    const keys = Object.keys(data);
+    keys.forEach((key, ordsetI) => {
+        const ordset = data[key];
+        const calculatedPieces = [];
+        ordset.pieceData.forEach((piece, i) => {
+            let scaledValue, scaledBottom;
+            let pieceTx = 0, pieceTy = 0;
+            const renderValue = renderMode && renderMode(piece.data, i);
+            let xPosition = ordset.x;
+            let height = piece.scaledEndValue - piece.scaledValue;
+            let yPosition = piece.scaledVerticalValue - height;
+            let width = ordset.width;
+            let markProps = {
+                markType: "rect",
+                height: height < 0 ? -height : height,
+                width,
+                x: xPosition,
+                y: height < 0 ? yPosition + height : yPosition
+            };
+            if (projection === "horizontal") {
+                yPosition = ordset.x;
+                xPosition = piece.scaledValue;
+                scaledValue = piece.scaledEndValue - piece.scaledValue;
+                scaledBottom = piece.scaledBottom;
+                width = piece.scaledEndValue - piece.scaledValue;
+                height = ordset.width;
+                markProps = {
+                    markType: "rect",
+                    height,
+                    width: width < 0 ? -width : width,
+                    x: width < 0 ? xPosition + width : xPosition,
+                    y: yPosition
+                };
+            }
+            else if (projection === "radial") {
+                let tx, ty;
+                ({ markProps, tx, ty } = radialBarFeatureGenerator({
+                    piece,
+                    type,
+                    ordset,
+                    adjustedSize,
+                    i
+                }));
+                pieceTx = tx;
+                pieceTy = ty;
+            }
+            //Only return the actual piece if you're rendering points, otherwise you just needed to iterate and calculate the points for the contour summary type
+            const eventListeners = eventListenersGenerator(piece, i);
+            const xy = {
+                x: xPosition,
+                y: yPosition,
+                scaledValue,
+                scaledBottom,
+                height
+            };
+            const renderElementObject = type.customMark ? (React.createElement("g", { key: `piece-${piece.renderKey}`, transform: `translate(${xPosition},${yPosition + height})` }, type.customMark({ ...piece.data, ...piece, x: xPosition, y: yPosition }, i, {
+                ...xy,
+                renderMode,
+                styleFn,
+                classFn,
+                adjustedSize,
+                chartSize,
+                margin,
+                rScale
+            }))) : ({
+                className: classFn({ ...piece, ...piece.data }, i),
+                key: `piece-${piece.renderKey}`,
+                style: styleFn({ ...piece, ...piece.data }, ordsetI),
+                ...markProps,
+                ...eventListeners
+            });
+            const calculatedPiece = {
+                o: key,
+                xy,
+                piece,
+                tx: pieceTx,
+                ty: pieceTy,
+                renderValue,
+                renderElement: renderElementObject
+            };
+            calculatedPieces.push(calculatedPiece);
+        });
+        allCalculatedPieces = [...allCalculatedPieces, ...calculatedPieces];
+    });
+    return allCalculatedPieces;
+}
+function pointLayout({ type, data, renderMode, eventListenersGenerator, styleFn, projection, classFn, adjustedSize, chartSize, margin, rScale }) {
+    const circleRadius = type.r || 3;
+    let allCalculatedPieces = [];
+    const keys = Object.keys(data);
+    keys.forEach((key, ordsetI) => {
+        const ordset = data[key];
+        const calculatedPieces = [];
+        ordset.pieceData.forEach((piece, i) => {
+            const renderValue = renderMode && renderMode(piece.data, i);
+            let xPosition = ordset.middle;
+            let yPosition = piece.scaledVerticalValue;
+            if (projection === "horizontal") {
+                yPosition = ordset.middle;
+                xPosition = piece.scaledValue;
+            }
+            else if (projection === "radial") {
+                const angle = ordset.pct_middle;
+                const rPosition = piece.scaledValue / 2;
+                const baseCentroid = (0, pieceDrawing_1.pointOnArcAtAngle)([adjustedSize[0] / 2, adjustedSize[1] / 2], angle, rPosition);
+                xPosition = baseCentroid[0];
+                yPosition = baseCentroid[1];
+            }
+            //Only return the actual piece if you're rendering points, otherwise you just needed to iterate and calculate the points for the contour summary type
+            const actualCircleRadius = typeof circleRadius === "function"
+                ? circleRadius(piece, i)
+                : circleRadius;
+            const eventListeners = eventListenersGenerator(piece, i);
+            const renderElementObject = type.customMark ? (React.createElement("g", { key: `piece-${piece.renderKey}`, transform: `translate(${xPosition},${yPosition})` }, type.customMark({
+                ...piece.data,
+                ...piece,
+                x: xPosition,
+                y: yPosition,
+                width: ordset.width
+            }, i, {
+                r: circleRadius,
+                x: xPosition,
+                y: yPosition,
+                renderMode,
+                styleFn,
+                classFn,
+                adjustedSize,
+                chartSize,
+                margin,
+                rScale
+            }))) : ({
+                className: classFn({ ...piece, ...piece.data }, i),
+                markType: "rect",
+                key: `piece-${piece.renderKey}`,
+                height: actualCircleRadius * 2,
+                width: actualCircleRadius * 2,
+                x: xPosition - actualCircleRadius,
+                y: yPosition - actualCircleRadius,
+                rx: actualCircleRadius,
+                ry: actualCircleRadius,
+                style: styleFn({ ...piece, ...piece.data }, ordsetI),
+                ...eventListeners
+            });
+            const calculatedPiece = {
+                o: key,
+                xy: {
+                    x: xPosition,
+                    y: yPosition
+                },
+                piece,
+                renderValue,
+                renderElement: renderElementObject
+            };
+            calculatedPieces.push(calculatedPiece);
+        });
+        allCalculatedPieces = [...allCalculatedPieces, ...calculatedPieces];
+    });
+    return allCalculatedPieces;
+}
+// Re-export from new location for backwards compatibility
+var swarmLayout_1 = require("./swarmLayout");
+Object.defineProperty(exports, "swarmLayout", { enumerable: true, get: function () { return swarmLayout_1.swarmLayout; } });