semiotic 2.0.3 → 3.0.0-beta.1

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

@@ -0,0 +1,889 @@
+"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.calculateOrdinalFrame = exports.calculateMappedMiddles = exports.assembleRenderPipeline = exports.generateColumnOverlays = exports.naturalLanguageTypes = exports.twoPI = exports.zeroFunction = exports.midMod = exports.layoutHash = void 0;
+const React = __importStar(require("react"));
+const d3_array_1 = require("d3-array");
+const d3_shape_1 = require("d3-shape");
+const frameFunctions_1 = require("../svg/frameFunctions");
+const pieceDrawing_1 = require("../svg/pieceDrawing");
+const summaryLayouts_1 = require("../svg/summaryLayouts");
+const summaryAxis_1 = require("../svg/summaryAxis");
+const d3_scale_1 = require("d3-scale");
+const ordinalConstants_1 = require("./ordinalConstants");
+const ordinalOverlays_1 = require("./ordinalOverlays");
+const ordinalRenderPipeline_1 = require("./ordinalRenderPipeline");
+var ordinalConstants_2 = require("./ordinalConstants");
+Object.defineProperty(exports, "layoutHash", { enumerable: true, get: function () { return ordinalConstants_2.layoutHash; } });
+Object.defineProperty(exports, "midMod", { enumerable: true, get: function () { return ordinalConstants_2.midMod; } });
+Object.defineProperty(exports, "zeroFunction", { enumerable: true, get: function () { return ordinalConstants_2.zeroFunction; } });
+Object.defineProperty(exports, "twoPI", { enumerable: true, get: function () { return ordinalConstants_2.twoPI; } });
+Object.defineProperty(exports, "naturalLanguageTypes", { enumerable: true, get: function () { return ordinalConstants_2.naturalLanguageTypes; } });
+var ordinalOverlays_2 = require("./ordinalOverlays");
+Object.defineProperty(exports, "generateColumnOverlays", { enumerable: true, get: function () { return ordinalOverlays_2.generateColumnOverlays; } });
+var ordinalRenderPipeline_2 = require("./ordinalRenderPipeline");
+Object.defineProperty(exports, "assembleRenderPipeline", { enumerable: true, get: function () { return ordinalRenderPipeline_2.assembleRenderPipeline; } });
+const calculateMappedMiddles = (oScale, middleMax, padding) => {
+    const oScaleDomainValues = oScale.domain();
+    const mappedMiddles = {};
+    oScaleDomainValues.forEach((p, q) => {
+        const base = oScale(p) - padding;
+        const next = oScaleDomainValues[q + 1]
+            ? oScale(oScaleDomainValues[q + 1])
+            : middleMax;
+        const diff = (next - base) / 2;
+        mappedMiddles[p] = base + diff;
+    });
+    return mappedMiddles;
+};
+exports.calculateMappedMiddles = calculateMappedMiddles;
+const calculateOrdinalFrame = (currentProps, currentState, cache) => {
+    let oLabels;
+    const projectedColumns = {};
+    const { oPadding: basePadding = 0, summaryType: baseSummaryType, type: baseType, connectorType: baseConnectorType, oAccessor: baseOAccessor, rAccessor: baseRAccessor, connectorStyle: baseConnectorStyle, style: baseStyle, rExtent: baseRExtent, oSort, pieceClass: basePieceClass, summaryStyle: baseSummaryStyle, summaryClass: baseSummaryClass, dynamicColumnWidth, projection, customHoverBehavior, customClickBehavior, customDoubleClickBehavior, size, pixelColumnWidth, title: baseTitle, oLabel, hoverAnnotation, pieceHoverAnnotation, summaryHoverAnnotation, backgroundGraphics, foregroundGraphics, oScaleType, rScaleType, legend, renderKey: baseRenderKey, data, margin: baseMargin, oExtent: baseOExtent, axes: baseAxes, pieceIDAccessor: basePieceIDAccessor, multiAxis, annotations, sketchyRenderingEngine } = currentProps;
+    // Radial (pie chart) projection ignores oPadding — angular gaps widen
+    // radially and create visual artifacts between slices
+    const padding = projection === "radial" ? 0 : basePadding;
+    const summaryType = (0, frameFunctions_1.objectifyType)(baseSummaryType);
+    const pieceType = (0, frameFunctions_1.objectifyType)(baseType);
+    const connectorType = (0, frameFunctions_1.objectifyType)(baseConnectorType);
+    const cachedAccessors = cache.accessorConversions(baseOAccessor, baseRAccessor, baseRenderKey, basePieceIDAccessor);
+    const oAccessor = cachedAccessors.oAccessor;
+    const rAccessor = cachedAccessors.rAccessor;
+    const renderKey = cachedAccessors.renderKey;
+    const eventListenersGenerator = () => ({});
+    const { connectorStyle, summaryStyle, pieceStyle, pieceClass, summaryClass, connectorClass: connectorClassFn, pieceRenderMode, summaryRenderMode, connectorRenderMode: connectorRenderModeFn, pieceCanvasRender, summaryCanvasRender, connectorCanvasRender } = cache.styleFns(baseConnectorStyle, baseSummaryStyle, baseStyle, basePieceClass, baseSummaryClass, currentProps.connectorClass, currentProps.renderMode, currentProps.summaryRenderMode, currentProps.connectorRenderMode, currentProps.canvasPieces, currentProps.canvasSummaries, currentProps.canvasConnectors);
+    const title = typeof baseTitle === "object" &&
+        !React.isValidElement(baseTitle) &&
+        baseTitle !== null
+        ? baseTitle
+        : { title: baseTitle, orient: "top" };
+    const pieceIDAccessor = cachedAccessors.pieceIDAccessor;
+    const originalRAccessor = Array.isArray(baseRAccessor)
+        ? baseRAccessor
+        : [baseRAccessor];
+    const originalOAccessor = Array.isArray(baseOAccessor)
+        ? baseOAccessor
+        : [baseOAccessor];
+    // For radial (pie chart) projection, force uniform arc depth by overriding
+    // rAccessor to always return 1. Encode value via dynamicColumnWidth instead.
+    let effectiveRAccessor = rAccessor;
+    let effectiveDynamicColumnWidth = dynamicColumnWidth;
+    if (projection === "radial") {
+        if (!effectiveDynamicColumnWidth) {
+            // Auto-set dynamicColumnWidth to sum original rAccessor values
+            // so angular extent still encodes the data
+            const originalAccessors = rAccessor;
+            effectiveDynamicColumnWidth = (pieces) => (0, d3_array_1.sum)(pieces, (d) => {
+                let total = 0;
+                for (const accessor of originalAccessors) {
+                    total += accessor(d) || 0;
+                }
+                return total;
+            });
+        }
+        effectiveRAccessor = [() => 1];
+    }
+    const { allData, multiExtents } = (0, frameFunctions_1.keyAndObjectifyBarData)({
+        data,
+        renderKey,
+        oAccessor,
+        rAccessor: effectiveRAccessor,
+        originalRAccessor,
+        originalOAccessor,
+        multiAxis
+    });
+    let columnOverlays;
+    const prevProps = currentState.props;
+    const shouldRecalculateOverlay = currentProps.data !== prevProps.data ||
+        currentProps.size[0] !== prevProps.size[0] ||
+        currentProps.size[1] !== prevProps.size[1] ||
+        currentProps.margin !== prevProps.margin ||
+        !currentState.columnOverlays ||
+        currentState.columnOverlays.length === 0 ||
+        currentProps.customClickBehavior !== prevProps.customClickBehavior ||
+        currentProps.customDoubleClickBehavior !==
+            prevProps.customDoubleClickBehavior ||
+        currentProps.customHoverBehavior !== prevProps.customHoverBehavior;
+    let arrayWrappedAxis;
+    if (Array.isArray(baseAxes)) {
+        arrayWrappedAxis = baseAxes.map((axisFnOrObject) => typeof axisFnOrObject === "function"
+            ? axisFnOrObject({ size: currentProps.size })
+            : axisFnOrObject);
+    }
+    else if (baseAxes) {
+        arrayWrappedAxis = [baseAxes].map((axisFnOrObject) => typeof axisFnOrObject === "function"
+            ? axisFnOrObject({ size: currentProps.size })
+            : axisFnOrObject);
+    }
+    if (multiExtents && baseAxes) {
+        arrayWrappedAxis.forEach((d, i) => {
+            d.extentOverride = multiExtents[i];
+        });
+    }
+    const { margin, adjustedPosition, adjustedSize } = cache.marginCalc(baseMargin, arrayWrappedAxis, title, oLabel, projection, size);
+    const oExtentSettings = baseOExtent === undefined || Array.isArray(baseOExtent)
+        ? { extent: baseOExtent }
+        : baseOExtent;
+    const calculatedOExtent = allData.reduce((p, c) => {
+        const baseOValue = c.column;
+        const oValue = baseOValue !== undefined ? String(baseOValue) : baseOValue;
+        if (p.indexOf(oValue) === -1) {
+            p.push(oValue);
+        }
+        return p;
+    }, []);
+    let oExtent = oExtentSettings.extent || calculatedOExtent;
+    if (pieceType.type === "barpercent") {
+        const oExtentSums = oExtent
+            .map((d) => allData
+            .filter((p) => String(p.column) === d)
+            .reduce((p, c) => p + c.value, 0))
+            .reduce((p, c, i) => {
+            p[oExtent[i]] = c;
+            return p;
+        }, {});
+        allData.forEach((d) => {
+            d.value = (oExtentSums[d.column] && d.value / oExtentSums[d.column]) || 0;
+        });
+        pieceType.type = "bar";
+    }
+    if (pixelColumnWidth) {
+        if (projection === "radial") {
+            console.error("pixelColumnWidth is not honored in radial mode");
+        }
+        else if (projection === "vertical") {
+            adjustedSize[0] = oExtent.length * pixelColumnWidth;
+        }
+        else {
+            adjustedSize[1] = oExtent.length * pixelColumnWidth;
+        }
+    }
+    const oDomain = (projection === "vertical" && [0, adjustedSize[0]]) || [
+        0,
+        adjustedSize[1]
+    ];
+    const cwHash = oExtent.reduce((p, c) => {
+        p[c] = (1 / oExtent.length) * oDomain[1];
+        p.total += p[c];
+        return p;
+    }, { total: 0 });
+    const castOScaleType = oScaleType;
+    const oScale = (effectiveDynamicColumnWidth
+        ? (0, d3_scale_1.scaleOrdinal)()
+        : castOScaleType?.domain
+            ? castOScaleType
+            : castOScaleType());
+    oScale.domain(oExtent);
+    let maxColumnValues;
+    const rExtentSettings = baseRExtent === undefined || Array.isArray(baseRExtent)
+        ? { extent: baseRExtent, onChange: undefined, includeAnnotations: false }
+        : baseRExtent;
+    let rExtent = rExtentSettings.extent;
+    let subZeroRExtent = [0, 0];
+    if (pieceType.type === "bar" &&
+        summaryType.type &&
+        summaryType.type !== "none") {
+        pieceType.type = "none";
+    }
+    const annotationsForExtent = [];
+    if (rExtentSettings.includeAnnotations && annotations) {
+        rAccessor.forEach((actualRAccessor) => {
+            annotations.forEach((annotation, annotationIndex) => {
+                const r = actualRAccessor(annotation, annotationIndex);
+                if (isFinite(r)) {
+                    annotationsForExtent.push(r);
+                }
+            });
+        });
+    }
+    if (pieceType.type === "timeline") {
+        const rData = allData.map((d) => d.value);
+        const leftExtent = (0, d3_array_1.extent)(rData.map((d) => d[0]));
+        const rightExtent = (0, d3_array_1.extent)(rData.map((d) => d[1]));
+        rExtent = (0, d3_array_1.extent)([...leftExtent, ...rightExtent, ...annotationsForExtent]);
+    }
+    else if (pieceType.type !== "bar") {
+        rExtent = (0, d3_array_1.extent)([
+            ...allData.map((d) => d.value),
+            ...annotationsForExtent
+        ]);
+    }
+    else {
+        const nestedPositiveData = [];
+        const nestedNegativeData = [];
+        const positiveDataKeys = {};
+        const negativeDataKeys = {};
+        for (const datum of allData) {
+            if (datum.value >= 0) {
+                if (!positiveDataKeys[datum.column]) {
+                    positiveDataKeys[datum.column] = {
+                        column: datum.column,
+                        value: 0
+                    };
+                    nestedPositiveData.push(positiveDataKeys[datum.column]);
+                }
+                positiveDataKeys[datum.column].value += datum.value;
+            }
+            else {
+                if (!negativeDataKeys[datum.column]) {
+                    negativeDataKeys[datum.column] = {
+                        column: datum.column,
+                        value: 0
+                    };
+                    nestedNegativeData.push(negativeDataKeys[datum.column]);
+                }
+                negativeDataKeys[datum.column].value += datum.value;
+            }
+        }
+        const positiveAnnotations = annotationsForExtent.filter((d) => d > 0);
+        rExtent = [
+            0,
+            nestedPositiveData.length === 0 && positiveAnnotations.length === 0
+                ? 0
+                : Math.max((0, d3_array_1.max)([
+                    ...nestedPositiveData.map((d) => d.value),
+                    ...positiveAnnotations
+                ]), 0)
+        ];
+        const negativeAnnotations = annotationsForExtent.filter((d) => d < 0);
+        subZeroRExtent = [
+            0,
+            nestedNegativeData.length === 0
+                ? 0
+                : Math.min((0, d3_array_1.min)([
+                    ...nestedNegativeData.map((d) => d.value),
+                    ...negativeAnnotations
+                ]), 0)
+        ];
+        rExtent = [subZeroRExtent[1], rExtent[1]];
+    }
+    if ((pieceType.type === "clusterbar" || multiAxis) && rExtent[0] > 0) {
+        rExtent[0] = 0;
+    }
+    const calculatedRExtent = rExtent;
+    if (rExtentSettings.extent &&
+        rExtentSettings.extent[0] !== undefined &&
+        rExtentSettings.extent[1] !== undefined) {
+        rExtent = rExtentSettings.extent;
+    }
+    else {
+        if (rExtentSettings.extent &&
+            rExtentSettings.extent[1] !== undefined &&
+            rExtentSettings.extent[0] === undefined) {
+            rExtent[1] = rExtentSettings.extent[1];
+        }
+        if (rExtentSettings.extent &&
+            rExtentSettings.extent[0] !== undefined &&
+            rExtentSettings.extent[1] === undefined) {
+            rExtent[0] = rExtentSettings.extent[0];
+        }
+    }
+    if (currentProps.invertR ||
+        (rExtentSettings.extent &&
+            rExtentSettings.extent[0] > rExtentSettings.extent[1])) {
+        rExtent = [rExtent[1], rExtent[0]];
+    }
+    const nestedPieces = {};
+    for (const datum of allData) {
+        if (!nestedPieces[datum.column]) {
+            nestedPieces[datum.column] = [];
+        }
+        nestedPieces[datum.column].push(datum);
+    }
+    if (oSort !== undefined) {
+        oExtent = oExtent.sort((a, b) => oSort(a, b, nestedPieces[a].map((d) => d.data), nestedPieces[b].map((d) => d.data)));
+        oScale.domain(oExtent);
+    }
+    else {
+        // Default sort: descending by summed value, with dynamicColumnWidth as tiebreaker
+        const columnSums = {};
+        for (const col of oExtent) {
+            columnSums[col] = (0, d3_array_1.sum)(nestedPieces[col], (d) => d.value);
+        }
+        let columnWidthValues;
+        if (effectiveDynamicColumnWidth) {
+            columnWidthValues = {};
+            let columnValueCreator;
+            if (typeof effectiveDynamicColumnWidth === "string") {
+                columnValueCreator = (d) => (0, d3_array_1.sum)(d, (p) => p.data[effectiveDynamicColumnWidth]);
+            }
+            else {
+                columnValueCreator = (d) => effectiveDynamicColumnWidth(d.map((p) => p.data));
+            }
+            for (const col of oExtent) {
+                columnWidthValues[col] = columnValueCreator(nestedPieces[col]);
+            }
+        }
+        oExtent = oExtent.sort((a, b) => {
+            const diff = columnSums[b] - columnSums[a];
+            if (diff !== 0)
+                return diff;
+            if (columnWidthValues)
+                return columnWidthValues[b] - columnWidthValues[a];
+            return 0;
+        });
+        oScale.domain(oExtent);
+    }
+    if (effectiveDynamicColumnWidth) {
+        let columnValueCreator;
+        if (typeof effectiveDynamicColumnWidth === "string") {
+            columnValueCreator = (d) => (0, d3_array_1.sum)(d, (p) => p.data[effectiveDynamicColumnWidth]);
+        }
+        else {
+            columnValueCreator = (d) => effectiveDynamicColumnWidth(d.map((p) => p.data));
+        }
+        const thresholdDomain = [0];
+        const columnValues = [];
+        maxColumnValues = 0;
+        oExtent.forEach((d) => {
+            const oValues = allData.filter((p) => p.column === d);
+            const columnValue = columnValueCreator(oValues);
+            columnValues.push(columnValue);
+            maxColumnValues += columnValue;
+        });
+        cwHash.total = 0;
+        oExtent.forEach((d, i) => {
+            const oValue = columnValues[i];
+            const stepValue = (oValue / maxColumnValues) * (oDomain[1] - oDomain[0]);
+            cwHash[d] = stepValue;
+            cwHash.total += stepValue;
+            if (i !== oExtent.length - 1) {
+                thresholdDomain.push(stepValue + thresholdDomain[i]);
+            }
+        });
+        oScale.range(thresholdDomain);
+    }
+    else {
+        oScale.range(oDomain);
+    }
+    const rDomain = (projection === "vertical" && [0, adjustedSize[1]]) || [
+        0,
+        adjustedSize[0]
+    ];
+    const castRScaleType = rScaleType;
+    // if rScaleType has a domain that means it's instantiated, otherwise, it needs to be instantiated
+    const instantiatedRScaleType = castRScaleType.domain
+        ? castRScaleType
+        : castRScaleType();
+    const zeroCheck = instantiatedRScaleType(0);
+    if (rExtentSettings.extent &&
+        rExtentSettings.extent[0] !== undefined &&
+        (isNaN(zeroCheck) || zeroCheck === -Infinity || zeroCheck === Infinity)) {
+        rExtent[0] = rExtentSettings.extent[0];
+    }
+    const rScale = instantiatedRScaleType.copy().domain(rExtent).range(rDomain);
+    const rScaleReverse = (0, d3_scale_1.scaleLinear)().domain(rDomain).range(rDomain.reverse());
+    const rScaleVertical = instantiatedRScaleType
+        .copy()
+        .domain(rExtent)
+        .range(rDomain);
+    const columnWidth = cwHash ? 0 : oScale.bandwidth();
+    let pieceData = [];
+    let mappedMiddleSize = adjustedSize[1];
+    if (projection === "vertical") {
+        mappedMiddleSize = adjustedSize[0];
+    }
+    const mappedMiddles = (0, exports.calculateMappedMiddles)(oScale, mappedMiddleSize, padding);
+    pieceData = oExtent.map((d) => (nestedPieces[d] ? nestedPieces[d] : []));
+    let zeroValue = projection === "vertical" ? rScaleReverse(rScale(0)) : rScale(0);
+    if ((isNaN(zeroValue) || zeroValue === -Infinity || zeroValue === Infinity) &&
+        rExtentSettings.extent &&
+        rExtentSettings.extent[0] !== undefined &&
+        (zeroCheck === -Infinity || zeroCheck === Infinity)) {
+        zeroValue =
+            projection === "vertical"
+                ? rScaleReverse(rScale(rExtentSettings.extent[0]))
+                : rScale(rExtentSettings.extent[0]);
+    }
+    oExtent.forEach((o, i) => {
+        projectedColumns[o] = {
+            name: o,
+            padding,
+            pieceData: pieceData[i],
+            pieces: pieceData[i]
+        };
+        projectedColumns[o].x = oScale(o) + padding / 2;
+        projectedColumns[o].y = 0;
+        projectedColumns[o].middle = mappedMiddles[o] + padding / 2;
+        let negativeOffset = zeroValue;
+        let positiveOffset = zeroValue;
+        let negativeBaseValue = 0;
+        let positiveBaseValue = 0;
+        projectedColumns[o].pieceData.forEach((piece) => {
+            let valPosition;
+            if (pieceType.type === "timeline") {
+                piece.scaledValue = rScale(piece.value[0]);
+                piece.scaledEndValue = rScale(piece.value[1]);
+                piece.scaledVerticalValue = rScaleVertical(piece.value[0]);
+            }
+            else if (pieceType.type !== "bar" && pieceType.type !== "clusterbar") {
+                piece.scaledValue = rScale(piece.value);
+                piece.scaledVerticalValue = rScaleVertical(piece.value);
+            }
+            else if (pieceType.type === "clusterbar") {
+                valPosition =
+                    projection === "vertical"
+                        ? rScaleReverse(rScale(piece.value))
+                        : rScale(piece.value);
+                piece.scaledValue = Math.abs(zeroValue - valPosition);
+            }
+            piece.x = projectedColumns[o].x;
+            if (piece.value >= 0) {
+                if (pieceType.type === "bar") {
+                    piece.scaledValue =
+                        projection === "vertical"
+                            ? positiveOffset -
+                                rScaleReverse(rScale(positiveBaseValue + piece.value))
+                            : rScale(positiveBaseValue + piece.value) - positiveOffset;
+                    positiveBaseValue += piece.value;
+                }
+                piece.base = zeroValue;
+                piece.bottom = pieceType.type === "bar" ? positiveOffset : 0;
+                piece.middle = piece.scaledValue / 2 + positiveOffset;
+                positiveOffset =
+                    projection === "vertical"
+                        ? positiveOffset - piece.scaledValue
+                        : positiveOffset + piece.scaledValue;
+                piece.negative = false;
+            }
+            else {
+                if (pieceType.type === "bar") {
+                    piece.scaledValue =
+                        projection === "vertical"
+                            ? Math.abs(rScale(piece.value) - rScale(0))
+                            : Math.abs(rScale(piece.value) - zeroValue);
+                    negativeBaseValue += piece.value;
+                }
+                piece.base = zeroValue;
+                piece.bottom = pieceType.type === "bar" ? negativeOffset : 0;
+                piece.middle = negativeOffset - piece.scaledValue / 2;
+                negativeOffset =
+                    projection === "vertical"
+                        ? negativeOffset + piece.scaledValue
+                        : negativeOffset - piece.scaledValue;
+                piece.negative = true;
+            }
+        });
+        if (cwHash) {
+            projectedColumns[o].width = cwHash[o] - padding;
+            if (currentProps.ordinalAlign === "center") {
+                if (i === 0) {
+                    projectedColumns[o].x =
+                        projectedColumns[o].x - projectedColumns[o].width / 2;
+                    projectedColumns[o].middle =
+                        projectedColumns[o].middle - projectedColumns[o].width / 2;
+                }
+                else {
+                    projectedColumns[o].x =
+                        projectedColumns[oExtent[i - 1]].x +
+                            projectedColumns[oExtent[i - 1]].width;
+                    projectedColumns[o].middle =
+                        projectedColumns[o].x + projectedColumns[o].width / 2;
+                }
+            }
+            projectedColumns[o].pct = cwHash[o] / cwHash.total;
+            projectedColumns[o].pct_start =
+                (projectedColumns[o].x - oDomain[0]) / cwHash.total;
+            projectedColumns[o].pct_padding = padding / cwHash.total;
+            projectedColumns[o].pct_middle =
+                (projectedColumns[o].middle - oDomain[0]) / cwHash.total;
+        }
+        else {
+            projectedColumns[o].width = columnWidth - padding;
+            if (currentProps.ordinalAlign === "center") {
+                projectedColumns[o].x =
+                    projectedColumns[o].x - projectedColumns[o].width / 2;
+                projectedColumns[o].middle =
+                    projectedColumns[o].middle - projectedColumns[o].width / 2;
+            }
+            projectedColumns[o].pct = columnWidth / adjustedSize[1];
+            projectedColumns[o].pct_start =
+                (projectedColumns[o].x - oDomain[0]) / adjustedSize[1];
+            projectedColumns[o].pct_padding = padding / adjustedSize[1];
+            projectedColumns[o].pct_middle =
+                (projectedColumns[o].middle - oDomain[0]) / adjustedSize[1];
+        }
+    });
+    const labelArray = [];
+    const pieArcs = [];
+    const labelSettings = typeof oLabel === "object"
+        ? Object.assign({ label: true, padding: 5 }, oLabel)
+        : { orient: "default", label: oLabel, padding: 5 };
+    if (oLabel || hoverAnnotation) {
+        const offsetPct = (pieceType.offsetAngle && pieceType.offsetAngle / 360) || 0;
+        const rangePct = (pieceType.angleRange &&
+            pieceType.angleRange.map((d) => d / 360)) || [0, 1];
+        const rangeMod = rangePct[1] - rangePct[0];
+        const adjustedPct = rangeMod < 1 ? (0, d3_scale_1.scaleLinear)().domain([0, 1]).range(rangePct) : (d) => d;
+        oExtent.forEach((d) => {
+            const arcGenerator = (0, d3_shape_1.arc)()
+                .innerRadius(0)
+                .outerRadius(rScale.range()[1] / 2);
+            const angle = projectedColumns[d].pct * rangeMod;
+            const startAngle = adjustedPct(projectedColumns[d].pct_start + offsetPct);
+            const endAngle = startAngle + angle;
+            const midAngle = startAngle + angle / 2;
+            const markD = arcGenerator({
+                startAngle: startAngle * ordinalConstants_1.twoPI,
+                endAngle: endAngle * ordinalConstants_1.twoPI
+            });
+            const translate = [adjustedSize[0] / 2, adjustedSize[1] / 2];
+            const centroid = arcGenerator.centroid({
+                startAngle: startAngle * ordinalConstants_1.twoPI,
+                endAngle: endAngle * ordinalConstants_1.twoPI
+            });
+            const addedPadding = centroid[1] > 0 &&
+                (!labelSettings.orient ||
+                    labelSettings.orient === "default" ||
+                    labelSettings.orient === "edge")
+                ? 8
+                : 0;
+            const outerPoint = (0, pieceDrawing_1.pointOnArcAtAngle)([0, 0], midAngle, rScale.range()[1] / 2 + labelSettings.padding + addedPadding);
+            const pieArc = {
+                startAngle,
+                endAngle,
+                midAngle,
+                markD,
+                translate,
+                centroid,
+                outerPoint
+            };
+            projectedColumns[d].pieArc = pieArc;
+            pieArcs.push(pieArc);
+        });
+    }
+    if (currentProps.oLabel) {
+        let labelingFn;
+        if (typeof labelSettings.label === "function") {
+            labelingFn = labelSettings.label;
+        }
+        else {
+            const labelStyle = {
+                textAnchor: "middle"
+            };
+            if (projection === "horizontal" && labelSettings.orient === "right") {
+                labelStyle.textAnchor = "start";
+            }
+            else if (projection === "horizontal") {
+                labelStyle.textAnchor = "end";
+            }
+            labelingFn = (d, p, i) => {
+                const additionalStyle = {};
+                let transformRotate;
+                if (projection === "radial" && labelSettings.orient === "stem") {
+                    transformRotate = `rotate(${pieArcs[i].outerPoint[0] < 0
+                        ? pieArcs[i].midAngle * 360 + 90
+                        : pieArcs[i].midAngle * 360 - 90})`;
+                }
+                else if (projection === "radial" &&
+                    labelSettings.orient === "annotation") {
+                    const { centroid } = pieArcs[i];
+                    const labelIndex = pieArcs.filter((p, q) => q < i &&
+                        centroid[0] < 0 === pieArcs[q].centroid[0] < 0 &&
+                        centroid[1] < 0 === pieArcs[q].centroid[1] < 0).length;
+                    const labelMod = labelIndex * 15;
+                    let labelLength = d.length * 7;
+                    let textAnchor = "start";
+                    let positionProps = { dx: 0, dy: 0 };
+                    if (centroid[0] < 0) {
+                        textAnchor = "end";
+                        labelLength = -labelLength;
+                        positionProps.dx = -35;
+                    }
+                    else {
+                        positionProps.dx = 35;
+                    }
+                    if (centroid[1] < 0) {
+                        positionProps.dy = -35 - labelMod;
+                    }
+                    else {
+                        positionProps.dy = 35 + labelMod;
+                    }
+                    return (React.createElement("g", null,
+                        React.createElement("path", { fill: "none", stroke: "black", strokeWidth: 2, d: `M0,0L${positionProps.dx},${positionProps.dy}L${positionProps.dx + labelLength},${positionProps.dy}` }),
+                        React.createElement("text", { textAnchor: textAnchor, x: positionProps.dx, y: positionProps.dy - 2 }, d)));
+                }
+                else if (projection === "radial" &&
+                    labelSettings.orient !== "center") {
+                    transformRotate = `rotate(${pieArcs[i].outerPoint[1] < 0
+                        ? pieArcs[i].midAngle * 360
+                        : pieArcs[i].midAngle * 360 + 180})`;
+                }
+                if (projection === "radial" &&
+                    labelSettings.orient === "stem" &&
+                    ((pieArcs[i].outerPoint[0] > 0 && labelSettings.padding < 0) ||
+                        (pieArcs[i].outerPoint[0] < 0 && labelSettings.padding >= 0))) {
+                    additionalStyle.textAnchor = "end";
+                }
+                else if (projection === "radial" && labelSettings.orient === "stem") {
+                    additionalStyle.textAnchor = "start";
+                }
+                return (React.createElement("text", { ...labelStyle, ...additionalStyle, transform: transformRotate }, d));
+            };
+        }
+        oExtent.forEach((d, i) => {
+            let xPosition = projectedColumns[d].middle;
+            let yPosition = 0;
+            if (projection === "horizontal") {
+                yPosition = projectedColumns[d].middle;
+                if (labelSettings.orient === "right") {
+                    xPosition = adjustedSize[0] + 3;
+                }
+                else {
+                    xPosition = -3;
+                }
+            }
+            else if (projection === "radial") {
+                if (labelSettings.orient === "annotation") {
+                    xPosition =
+                        pieArcs[i].centroid[0] * 0.25 +
+                            pieArcs[i].outerPoint[0] * 0.75 +
+                            pieArcs[i].translate[0];
+                    yPosition =
+                        pieArcs[i].centroid[1] * 0.25 +
+                            pieArcs[i].outerPoint[1] * 0.75 +
+                            pieArcs[i].translate[1];
+                }
+                else if (labelSettings.orient === "center") {
+                    xPosition = pieArcs[i].centroid[0] + pieArcs[i].translate[0];
+                    yPosition = pieArcs[i].centroid[1] + pieArcs[i].translate[1];
+                }
+                else {
+                    xPosition = pieArcs[i].outerPoint[0] + pieArcs[i].translate[0];
+                    yPosition = pieArcs[i].outerPoint[1] + pieArcs[i].translate[1];
+                }
+            }
+            const labelValue = labelSettings.labelFormatter
+                ? labelSettings.labelFormatter(d)
+                : d;
+            const label = labelingFn(labelValue, projectedColumns[d].pieceData.map((d) => d.data), i, projectedColumns[d]);
+            labelArray.push(React.createElement("g", { key: `olabel-${i}`, transform: `translate(${xPosition},${yPosition})` }, label));
+        });
+        if (projection === "vertical") {
+            let labelY;
+            if (labelSettings.orient === "top") {
+                labelY = -15;
+            }
+            else {
+                labelY = 15 + rScale.range()[1];
+            }
+            oLabels = (React.createElement("g", { key: "ordinalframe-labels-container", className: "ordinal-labels", transform: `translate(0,${labelY})` }, labelArray));
+        }
+        else if (projection === "horizontal") {
+            oLabels = (React.createElement("g", { key: "ordinalframe-labels-container", className: "ordinal-labels" }, labelArray));
+        }
+        else if (projection === "radial") {
+            oLabels = (React.createElement("g", { key: "ordinalframe-labels-container", className: "ordinal-labels" }, labelArray));
+        }
+    }
+    const isBarType = ["bar", "clusterbar", "timeline"].indexOf(pieceType.type) !== -1;
+    const usesPieceOverlays = (currentProps.hoverAnnotation || currentProps.pieceHoverAnnotation) && isBarType;
+    if (!usesPieceOverlays &&
+        !currentProps.summaryHoverAnnotation &&
+        (currentProps.hoverAnnotation ||
+            currentProps.customClickBehavior ||
+            currentProps.customDoubleClickBehavior ||
+            currentProps.customHoverBehavior)) {
+        if (shouldRecalculateOverlay) {
+            columnOverlays = (0, ordinalOverlays_1.generateColumnOverlays)({
+                oExtent,
+                projectedColumns,
+                rScale,
+                pieArcs,
+                padding,
+                projection,
+                customDoubleClickBehavior,
+                customClickBehavior,
+                customHoverBehavior
+            });
+        }
+        else {
+            columnOverlays = currentState.columnOverlays;
+        }
+    }
+    let pieceDataXY;
+    const pieceTypeForXY = pieceType.type && pieceType.type !== "none" ? pieceType.type : "point";
+    const pieceTypeLayout = typeof pieceTypeForXY === "function"
+        ? pieceTypeForXY
+        : ordinalConstants_1.layoutHash[pieceTypeForXY];
+    const calculatedPieceData = pieceTypeLayout({
+        type: pieceType,
+        data: projectedColumns,
+        renderMode: pieceRenderMode,
+        eventListenersGenerator,
+        styleFn: pieceStyle,
+        projection,
+        classFn: pieceClass,
+        adjustedSize,
+        chartSize: size,
+        margin,
+        rScale
+    });
+    const keyedData = calculatedPieceData.reduce((p, c) => {
+        if (c.o) {
+            if (!p[c.o]) {
+                p[c.o] = [];
+            }
+            p[c.o].push(c);
+        }
+        return p;
+    }, {});
+    Object.keys(projectedColumns).forEach((d) => {
+        projectedColumns[d].xyData = keyedData[d] || [];
+    });
+    let calculatedSummaries = {};
+    if (summaryType.type && summaryType.type !== "none") {
+        calculatedSummaries = (0, summaryLayouts_1.drawSummaries)({
+            data: projectedColumns,
+            type: summaryType,
+            renderMode: summaryRenderMode,
+            styleFn: summaryStyle,
+            classFn: summaryClass,
+            projection,
+            eventListenersGenerator,
+            adjustedSize,
+            //        chartSize: size,
+            margin,
+            axisCreator: summaryAxis_1.axisGenerator
+        });
+        calculatedSummaries.originalData = projectedColumns;
+    }
+    const yMod = projection === "horizontal" ? ordinalConstants_1.midMod : ordinalConstants_1.zeroFunction;
+    const xMod = projection === "vertical" ? ordinalConstants_1.midMod : ordinalConstants_1.zeroFunction;
+    const basePieceData = calculatedPieceData
+        .map((d) => {
+        if (d.piece && d.xy) {
+            return {
+                ...d.piece,
+                type: "frame-hover",
+                x: d.xy.x + xMod(d.xy),
+                y: d.xy.y + yMod(d.xy)
+            };
+        }
+        return null;
+    })
+        .filter((d) => d);
+    if (((hoverAnnotation || pieceHoverAnnotation) &&
+        ["bar", "clusterbar", "timeline"].indexOf(pieceType.type) === -1) ||
+        summaryHoverAnnotation) {
+        if (summaryHoverAnnotation && calculatedSummaries.xyPoints) {
+            pieceDataXY = calculatedSummaries.xyPoints.map((d) => Object.assign({}, d, {
+                type: "frame-hover",
+                isSummaryData: true,
+                x: d.x,
+                y: d.y
+            }));
+        }
+        else if ((hoverAnnotation || pieceHoverAnnotation) && calculatedPieceData) {
+            //Check interaction layer rendering when only one point per column
+            pieceDataXY = basePieceData;
+        }
+    }
+    const { axis, axesTickLines } = (0, frameFunctions_1.orFrameAxisGenerator)({
+        axis: arrayWrappedAxis,
+        data: allData,
+        projection,
+        adjustedSize,
+        size,
+        rScale,
+        rScaleType: instantiatedRScaleType.copy(),
+        pieceType,
+        rExtent,
+        maxColumnValues,
+        xyData: basePieceData,
+        margin,
+        thresholds: calculatedSummaries.thresholds
+    });
+    return {
+        pieceDataXY,
+        oAccessor,
+        rAccessor,
+        summaryType,
+        type: pieceType,
+        ...(0, ordinalRenderPipeline_1.assembleRenderPipeline)({
+            usesPieceOverlays,
+            shouldRecalculateOverlay,
+            calculatedPieceData,
+            projection,
+            customClickBehavior,
+            customDoubleClickBehavior,
+            customHoverBehavior,
+            currentState,
+            connectorStyle,
+            connectorClass: connectorClassFn,
+            connectorRenderMode: connectorRenderModeFn,
+            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,
+            columnOverlays,
+            oScaleType,
+            instantiatedRScaleType,
+            oScale,
+            rExtent,
+            legend,
+            pieceIDAccessor,
+            currentProps
+        })
+    };
+};
+exports.calculateOrdinalFrame = calculateOrdinalFrame;