semiotic 2.0.3 → 3.0.0-beta.1

package/ai/dist/src/components/processing/ordinalConstants.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.naturalLanguageTypes = exports.twoPI = exports.zeroFunction = exports.midMod = exports.layoutHash = void 0;
+const pieceLayouts_1 = require("../svg/pieceLayouts");
+const functions_1 = require("../generic_utilities/functions");
+exports.layoutHash = {
+    clusterbar: pieceLayouts_1.clusterBarLayout,
+    bar: pieceLayouts_1.barLayout,
+    point: pieceLayouts_1.pointLayout,
+    swarm: pieceLayouts_1.swarmLayout,
+    timeline: pieceLayouts_1.timelineLayout
+};
+const midMod = (d) => (d.middle ? d.middle : 0);
+exports.midMod = midMod;
+exports.zeroFunction = (0, functions_1.genericFunction)(0);
+exports.twoPI = Math.PI * 2;
+exports.naturalLanguageTypes = {
+    bar: { items: "bar", chart: "bar chart" },
+    clusterbar: { items: "bar", chart: "grouped bar chart" },
+    swarm: { items: "point", chart: "swarm plot" },
+    point: { items: "point", chart: "point plot" },
+    timeline: { items: "bar", chart: "timeline" }
+};

package/ai/dist/src/components/processing/ordinalOverlays.js

@@ -0,0 +1,88 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateColumnOverlays = generateColumnOverlays;
+function generateColumnOverlays({ oExtent, projectedColumns, rScale, pieArcs, padding, projection, customDoubleClickBehavior, customClickBehavior, customHoverBehavior }) {
+    return oExtent.map((d, i) => {
+        const barColumnWidth = projectedColumns[d].width;
+        let xPosition = projectedColumns[d].x;
+        let yPosition = 0;
+        let height = rScale.range()[1];
+        let width = barColumnWidth + padding;
+        if (projection === "horizontal") {
+            yPosition = projectedColumns[d].x;
+            xPosition = 0;
+            width = rScale.range()[1];
+            height = barColumnWidth;
+        }
+        if (projection === "radial") {
+            const { markD, centroid, translate, midAngle } = pieArcs[i];
+            const radialMousePackage = {
+                type: "column-hover",
+                column: projectedColumns[d],
+                pieces: projectedColumns[d].pieceData,
+                summary: projectedColumns[d].pieceData,
+                arcAngles: {
+                    centroid,
+                    translate,
+                    midAngle,
+                    length: rScale.range()[1] / 2
+                }
+            };
+            return {
+                markType: "path",
+                key: `hover${d}`,
+                d: markD,
+                transform: `translate(${translate.join(",")})`,
+                style: { opacity: 0 },
+                overlayData: radialMousePackage,
+                onDoubleClick: customDoubleClickBehavior &&
+                    ((e) => {
+                        customDoubleClickBehavior(radialMousePackage, e);
+                    }),
+                onClick: customClickBehavior &&
+                    ((e) => {
+                        customClickBehavior(radialMousePackage, e);
+                    }),
+                onMouseEnter: customHoverBehavior &&
+                    ((e) => {
+                        customHoverBehavior(radialMousePackage, e);
+                    }),
+                onMouseLeave: customHoverBehavior &&
+                    ((e) => {
+                        customHoverBehavior(e);
+                    })
+            };
+        }
+        const baseMousePackage = {
+            type: "column-hover",
+            column: projectedColumns[d],
+            pieces: projectedColumns[d].pieceData,
+            summary: projectedColumns[d].pieceData
+        };
+        return {
+            markType: "rect",
+            key: `hover-${d}`,
+            x: xPosition,
+            y: yPosition,
+            height: height,
+            width: width,
+            style: { opacity: 0 },
+            onDoubleClick: customDoubleClickBehavior &&
+                ((e) => {
+                    customDoubleClickBehavior(baseMousePackage, e);
+                }),
+            onClick: customClickBehavior &&
+                ((e) => {
+                    customClickBehavior(baseMousePackage, e);
+                }),
+            onMouseEnter: customHoverBehavior &&
+                ((e) => {
+                    customHoverBehavior(baseMousePackage, e);
+                }),
+            onMouseLeave: (e) => {
+                customHoverBehavior(undefined, e);
+            },
+            overlayData: baseMousePackage
+        };
+    });
+}

package/ai/dist/src/components/processing/ordinalRenderPipeline.js

@@ -0,0 +1,196 @@
+"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.assembleRenderPipeline = assembleRenderPipeline;
+const React = __importStar(require("react"));
+const frameFunctions_1 = require("../svg/frameFunctions");
+const pieceDrawing_1 = require("../svg/pieceDrawing");
+const summaryLayouts_1 = require("../svg/summaryLayouts");
+const ordinalConstants_1 = require("./ordinalConstants");
+function assembleRenderPipeline(args) {
+    const { usesPieceOverlays, shouldRecalculateOverlay, calculatedPieceData, projection, customClickBehavior, customDoubleClickBehavior, customHoverBehavior, currentState, connectorStyle, connectorClass, connectorRenderMode, connectorCanvasRender, summaryCanvasRender, pieceCanvasRender, connectorType, eventListenersGenerator, pieceType, summaryStyle, summaryClass, pieceStyle, pieceClass, keyedData, oExtent, projectedColumns, calculatedSummaries, oAccessor, rScale, calculatedRExtent, calculatedOExtent, rExtentSettings, oExtentSettings, adjustedPosition, adjustedSize, margin, backgroundGraphics, foregroundGraphics, arrayWrappedAxis, axis, axesTickLines, oLabels, title, oScaleType, instantiatedRScaleType, oScale, rExtent, legend, pieceIDAccessor, currentProps } = args;
+    let { columnOverlays } = args;
+    // Piece overlays for bar/clusterbar/timeline types
+    if (usesPieceOverlays) {
+        const yMod = projection === "horizontal" ? ordinalConstants_1.midMod : ordinalConstants_1.zeroFunction;
+        const xMod = projection === "vertical" ? ordinalConstants_1.midMod : ordinalConstants_1.zeroFunction;
+        if (shouldRecalculateOverlay) {
+            columnOverlays = calculatedPieceData.map((d, i) => {
+                const mousePackage = {
+                    ...d.piece,
+                    x: d.xy.x + xMod(d.xy),
+                    y: d.xy.y + yMod(d.xy)
+                };
+                if (React.isValidElement(d.renderElement)) {
+                    return {
+                        renderElement: d.renderElement,
+                        overlayData: mousePackage
+                    };
+                }
+                return {
+                    ...d.renderElement,
+                    key: `hover-${i}`,
+                    style: { opacity: 0 },
+                    overlayData: mousePackage,
+                    onClick: customClickBehavior &&
+                        ((e) => {
+                            customClickBehavior(mousePackage.data, e);
+                        }),
+                    onDoubleClick: customDoubleClickBehavior &&
+                        ((e) => {
+                            customDoubleClickBehavior(mousePackage.data, e);
+                        }),
+                    onMouseEnter: customHoverBehavior &&
+                        ((e) => {
+                            customHoverBehavior(mousePackage.data, e);
+                        }),
+                    onMouseLeave: customHoverBehavior &&
+                        ((e) => {
+                            customHoverBehavior(undefined, e);
+                        })
+                };
+            });
+        }
+        else {
+            columnOverlays = currentState.columnOverlays;
+        }
+    }
+    const typeAriaLabel = (pieceType.type !== undefined &&
+        typeof pieceType.type !== "function" &&
+        ordinalConstants_1.naturalLanguageTypes[pieceType.type]) || {
+        items: "piece",
+        chart: "ordinal chart"
+    };
+    const orFrameRender = {
+        connectors: {
+            accessibleTransform: (data, i) => data[i],
+            projection,
+            data: { keyedData, oExtent },
+            styleFn: connectorStyle,
+            classFn: connectorClass,
+            renderMode: connectorRenderMode,
+            canvasRender: connectorCanvasRender,
+            behavior: frameFunctions_1.orFrameConnectionRenderer,
+            type: connectorType,
+            eventListenersGenerator,
+            pieceType
+        },
+        summaries: {
+            accessibleTransform: (data, i) => {
+                const columnName = oExtent[i];
+                const summaryPackage = {
+                    type: "column-hover",
+                    column: projectedColumns[columnName],
+                    pieces: projectedColumns[columnName].pieceData,
+                    summary: projectedColumns[columnName].pieceData,
+                    oAccessor
+                };
+                return summaryPackage;
+            },
+            data: calculatedSummaries.marks,
+            behavior: summaryLayouts_1.renderLaidOutSummaries,
+            canvasRender: summaryCanvasRender,
+            styleFn: summaryStyle,
+            classFn: summaryClass
+        },
+        pieces: {
+            accessibleTransform: (data, i) => ({
+                ...(data[i].piece ? { ...data[i].piece, ...data[i].xy } : data[i]),
+                type: "frame-hover"
+            }),
+            shouldRender: pieceType.type && pieceType.type !== "none",
+            data: calculatedPieceData,
+            behavior: pieceDrawing_1.renderLaidOutPieces,
+            canvasRender: pieceCanvasRender,
+            styleFn: pieceStyle,
+            classFn: pieceClass,
+            axis: arrayWrappedAxis,
+            ariaLabel: typeAriaLabel
+        }
+    };
+    if (rExtentSettings.onChange &&
+        (currentState.calculatedRExtent || []).join(",") !==
+            (calculatedRExtent || []).join(",")) {
+        rExtentSettings.onChange(calculatedRExtent);
+    }
+    if (oExtentSettings.onChange &&
+        (currentState.calculatedOExtent || []).join(",") !==
+            (calculatedOExtent || []).join(",")) {
+        oExtentSettings.onChange(calculatedOExtent);
+    }
+    let legendSettings;
+    if (legend) {
+        legendSettings = legend === true ? {} : { ...legend };
+        // Sort legend items to match the sorted oExtent order
+        if (legendSettings.legendGroups) {
+            const extentOrder = new Map(oExtent.map((d, i) => [d, i]));
+            legendSettings.legendGroups = legendSettings.legendGroups.map((group) => ({
+                ...group,
+                items: [...group.items].sort((a, b) => {
+                    const aIdx = extentOrder.has(a.label) ? extentOrder.get(a.label) : Infinity;
+                    const bIdx = extentOrder.has(b.label) ? extentOrder.get(b.label) : Infinity;
+                    return aIdx - bIdx;
+                })
+            }));
+        }
+    }
+    return {
+        adjustedPosition,
+        adjustedSize,
+        backgroundGraphics,
+        foregroundGraphics,
+        axisData: arrayWrappedAxis,
+        axes: axis,
+        axesTickLines,
+        oLabels: { labels: oLabels },
+        title,
+        columnOverlays,
+        renderNumber: currentState.renderNumber + 1,
+        oScaleType,
+        rScaleType: instantiatedRScaleType,
+        oExtent,
+        rExtent,
+        oScale,
+        rScale,
+        calculatedOExtent,
+        calculatedRExtent,
+        projectedColumns,
+        margin,
+        legendSettings,
+        orFrameRender,
+        pieceIDAccessor,
+        props: currentProps
+    };
+}