semiotic 2.0.3 → 3.0.0-beta.1

package/ai/dist/src/components/annotationRules/orframeRules.js

@@ -0,0 +1,695 @@
+"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.svgOrdinalLine = exports.svgRectEncloseRule = exports.htmlColumnHoverRule = exports.htmlFrameHoverRule = exports.svgCategoryRule = exports.svgRRule = exports.svgEncloseRule = exports.basicReactAnnotationRule = exports.svgORRule = exports.screenProject = exports.findIDPiece = exports.svgHighlightRule = exports.getColumnScreenCoordinates = void 0;
+const React = __importStar(require("react"));
+const Annotation_1 = __importDefault(require("../Annotation"));
+const d3_hierarchy_1 = require("d3-hierarchy");
+const d3_array_1 = require("d3-array");
+const pieceDrawing_1 = require("../svg/pieceDrawing");
+const baseRules_1 = require("./baseRules");
+const multiAccessorUtils_1 = require("../data/multiAccessorUtils");
+const d3_shape_1 = require("d3-shape");
+const general_1 = require("../visualizationLayerBehavior/general");
+const TooltipPositioner_1 = __importDefault(require("../TooltipPositioner"));
+const derivePieceValue = (accessor, piece) => {
+    const pieceVal = accessor(piece);
+    return (pieceVal && pieceVal.toString && pieceVal.toString()) || pieceVal;
+};
+function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
+    const angleInRadians = ((angleInDegrees - 90) * Math.PI) / 180.0;
+    return {
+        x: centerX + radius * Math.cos(angleInRadians),
+        y: centerY + radius * Math.sin(angleInRadians)
+    };
+}
+function pieContentGenerator({ column }) {
+    return (React.createElement("div", { className: "tooltip-content", "data-testid": "tooltip-content" },
+        React.createElement("p", { key: "or-annotation-1" }, column.name),
+        React.createElement("p", { key: "or-annotation-2" }, `${(column.pct * 100).toFixed(0)}%`)));
+}
+function arcBracket({ x, y, radius, startAngle, endAngle, inset, outset, curly = true }) {
+    const start = polarToCartesian(x, y, radius + outset, endAngle);
+    const end = polarToCartesian(x, y, radius + outset, startAngle);
+    const innerStart = polarToCartesian(x, y, radius + outset - inset, endAngle);
+    const innerEnd = polarToCartesian(x, y, radius + outset - inset, startAngle);
+    const angleSize = endAngle - startAngle;
+    const largeArcFlag = angleSize <= 180 ? "0" : "1";
+    let d;
+    if (curly) {
+        const curlyOffset = Math.min(10, angleSize / 4);
+        const middleLeft = polarToCartesian(x, y, radius + outset, (startAngle + endAngle) / 2 + curlyOffset);
+        const middle = polarToCartesian(x, y, radius + outset + 10, (startAngle + endAngle) / 2);
+        const middleRight = polarToCartesian(x, y, radius + outset, (startAngle + endAngle) / 2 - curlyOffset);
+        d = [
+            "M",
+            innerStart.x,
+            innerStart.y,
+            "L",
+            start.x,
+            start.y,
+            "A",
+            radius + outset,
+            radius + outset,
+            0,
+            0,
+            0,
+            middleLeft.x,
+            middleLeft.y,
+            "A",
+            radius + outset,
+            radius + outset,
+            1,
+            0,
+            1,
+            middle.x,
+            middle.y,
+            "A",
+            radius + outset,
+            radius + outset,
+            1,
+            0,
+            1,
+            middleRight.x,
+            middleRight.y,
+            "A",
+            radius + outset,
+            radius + outset,
+            0,
+            0,
+            0,
+            end.x,
+            end.y,
+            "L",
+            innerEnd.x,
+            innerEnd.y
+        ].join(" ");
+    }
+    else {
+        d = [
+            "M",
+            innerStart.x,
+            innerStart.y,
+            "L",
+            start.x,
+            start.y,
+            "A",
+            radius + outset,
+            radius + outset,
+            0,
+            largeArcFlag,
+            0,
+            end.x,
+            end.y,
+            "L",
+            innerEnd.x,
+            innerEnd.y
+        ].join(" ");
+    }
+    const midAngle = (startAngle + endAngle) / 2;
+    let textOffset, largeTextArcFlag, finalTextEnd, finalTextStart, arcFlip;
+    const lowerArc = midAngle > 90 && midAngle < 270;
+    if (lowerArc) {
+        textOffset = 12;
+        largeTextArcFlag = endAngle - startAngle <= 180 ? "0" : "1";
+        arcFlip = 0;
+    }
+    else {
+        largeTextArcFlag = endAngle - startAngle <= 180 ? "0" : "1";
+        textOffset = 5;
+        arcFlip = 1;
+    }
+    textOffset += curly ? 10 : 0;
+    const textStart = polarToCartesian(x, y, radius + outset + textOffset, endAngle);
+    const textEnd = polarToCartesian(x, y, radius + outset + textOffset, startAngle);
+    if (lowerArc) {
+        finalTextStart = textStart;
+        finalTextEnd = textEnd;
+    }
+    else {
+        finalTextStart = textEnd;
+        finalTextEnd = textStart;
+    }
+    const textD = [
+        "M",
+        finalTextStart.x,
+        finalTextStart.y,
+        "A",
+        radius + outset + textOffset,
+        radius + outset + textOffset,
+        arcFlip,
+        largeTextArcFlag,
+        arcFlip,
+        finalTextEnd.x,
+        finalTextEnd.y
+    ].join(" ");
+    return { arcPath: d, textArcPath: textD };
+}
+const getColumnScreenCoordinates = ({ d, projectedColumns, oAccessor, summaryType, type, projection, adjustedPosition, adjustedSize }) => {
+    const column = typeof d.column === "object"
+        ? d.column
+        : projectedColumns[d.facetColumn] ||
+            projectedColumns[(0, multiAccessorUtils_1.findFirstAccessorValue)(oAccessor, d)];
+    if (!column) {
+        return { coordinates: [0, 0], pieces: undefined, column: undefined };
+    }
+    const pieces = column.pieceData || column.pieces;
+    const positionValue = (summaryType.type && summaryType.type !== "none") ||
+        ["swarm", "point", "clusterbar", "timeline"].find((p) => p === type.type)
+        ? (0, d3_array_1.max)(pieces.map((p) => p.scaledValue))
+        : projection === "horizontal"
+            ? (0, d3_array_1.max)(pieces.map((p) => p.value >= 0 ? p.scaledValue + p.bottom : p.bottom))
+            : (0, d3_array_1.min)(pieces.map((p) => p.value >= 0 ? p.bottom - p.scaledValue : p.bottom));
+    let xPosition = column.middle + adjustedPosition[0];
+    let yPosition = (summaryType.type && summaryType.type !== "none") ||
+        ["swarm", "point", "clusterbar", "timeline"].find((p) => p === type.type)
+        ? adjustedSize[1] - positionValue
+        : positionValue;
+    yPosition += 10;
+    if (projection === "horizontal") {
+        yPosition = column.middle;
+        xPosition = positionValue + adjustedPosition[0];
+    }
+    else if (projection === "radial") {
+        const { pieArc } = column;
+        const { translate, outerPoint, centroid } = pieArc;
+        xPosition = (centroid[0] + outerPoint[0]) / 2 + translate[0];
+        yPosition = (centroid[1] + outerPoint[1]) / 2 + translate[1];
+    }
+    return { coordinates: [xPosition, yPosition], pieces, column };
+};
+exports.getColumnScreenCoordinates = getColumnScreenCoordinates;
+const svgHighlightRule = ({ d, pieceIDAccessor, orFrameRender, oAccessor }) => {
+    const thisID = pieceIDAccessor(d);
+    const thisO = (0, multiAccessorUtils_1.findFirstAccessorValue)(oAccessor, d);
+    const { pieces } = orFrameRender;
+    const { styleFn } = pieces;
+    const foundPieces = (pieces &&
+        pieces.data
+            .filter((p) => {
+            return ((thisID === undefined ||
+                pieceIDAccessor({ ...p.piece, ...p.piece.data }) === thisID) &&
+                (thisO === undefined ||
+                    (0, multiAccessorUtils_1.findFirstAccessorValue)(oAccessor, p.piece.data) === thisO));
+        })
+            .map((p, q) => {
+            let styleObject = {
+                style: styleFn({ ...p.piece, ...p.piece.data })
+            };
+            if (d.style && typeof d.style === "function") {
+                styleObject = {
+                    style: {
+                        ...styleObject,
+                        ...d.style({ ...p.piece, ...p.piece.data })
+                    }
+                };
+            }
+            else if (d.style) {
+                styleObject = { style: { ...styleObject, ...d.style } };
+            }
+            const styledD = { ...p.renderElement, ...styleObject };
+            const className = `highlight-annotation ${(d.class &&
+                typeof d.class === "function" &&
+                d.class(p.piece.data, q)) ||
+                (d.class && d.class) ||
+                ""}`;
+            if (React.isValidElement(p.renderElement)) {
+                return React.cloneElement(p.renderElement, {
+                    ...styleObject,
+                    className
+                });
+            }
+            const { markType, ...restProps } = styledD;
+            return React.createElement(markType || 'path', {
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2px",
+                key: `highlight-piece-${q}`,
+                ...restProps,
+                className
+            });
+        })) ||
+        [];
+    return [...foundPieces];
+};
+exports.svgHighlightRule = svgHighlightRule;
+const findIDPiece = (pieceIDAccessor, oColumn, d) => {
+    const foundIDValue = pieceIDAccessor(d);
+    const pieceID = foundIDValue === "" && d.rName ? d.rName : foundIDValue;
+    const basePieces = oColumn &&
+        oColumn.pieceData.filter((r) => r.rName === pieceID || pieceIDAccessor(r.data) === pieceID);
+    if (pieceID === "" ||
+        basePieces === undefined ||
+        basePieces === false ||
+        basePieces.length !== 1)
+        return d;
+    const basePiece = basePieces[0];
+    const reactAnnotationProps = [
+        "type",
+        "label",
+        "note",
+        "connector",
+        "disabled",
+        "color",
+        "subject"
+    ];
+    if (basePiece) {
+        reactAnnotationProps.forEach((prop) => {
+            if (d[prop])
+                basePiece[prop] = d[prop];
+        });
+    }
+    return basePiece;
+};
+exports.findIDPiece = findIDPiece;
+const screenProject = ({ p, adjustedSize, rScale, oColumn, rAccessor, idPiece, projection, rScaleType }) => {
+    const basePValue = (0, multiAccessorUtils_1.findFirstAccessorValue)(rAccessor, p) || p.value;
+    const pValue = Array.isArray(basePValue)
+        ? Math.max(...basePValue)
+        : basePValue;
+    let o;
+    if (oColumn) {
+        o = oColumn.middle;
+    }
+    else {
+        o = 0;
+    }
+    if (oColumn && projection === "radial") {
+        return (0, pieceDrawing_1.pointOnArcAtAngle)([adjustedSize[0] / 2, adjustedSize[1] / 2], oColumn.pct_middle, idPiece && (idPiece.x === undefined ? idPiece.scaledValue : idPiece.x)
+            ? idPiece.x / 2 || (idPiece.bottom + idPiece.scaledValue / 2) / 2
+            : pValue / 2);
+    }
+    if (projection === "horizontal") {
+        return [
+            idPiece && idPiece.scaledEndValue
+                ? idPiece.scaledEndValue
+                : idPiece && idPiece.scaledValue
+                    ? idPiece.value >= 0
+                        ? idPiece.bottom + idPiece.scaledValue
+                        : idPiece.bottom
+                    : rScale(pValue),
+            o
+        ];
+    }
+    const newScale = rScaleType
+        .copy()
+        .domain(rScale.domain())
+        .range(rScale.range().reverse());
+    return [
+        o,
+        idPiece && (idPiece.x === undefined ? idPiece.scaledValue : idPiece.x)
+            ? idPiece.y === undefined
+                ? idPiece.value >= 0
+                    ? idPiece.bottom - idPiece.scaledValue
+                    : idPiece.bottom
+                : idPiece.y
+            : newScale(pValue)
+    ];
+};
+exports.screenProject = screenProject;
+const svgORRule = ({ d, i, screenCoordinates, projection }) => {
+    return (React.createElement("text", { key: `${d.label}annotationtext${i}`, x: parseInt(screenCoordinates[0] + (projection === "horizontal" ? 10 : 0)), y: parseInt(screenCoordinates[1] + (projection === "vertical" ? 10 : 0)), className: `annotation annotation-or-label ${d.className || ""}`, "data-testid": "annotation-or-label", textAnchor: "middle" }, d.label));
+};
+exports.svgORRule = svgORRule;
+const basicReactAnnotationRule = ({ d, i, screenCoordinates }) => {
+    const noteData = Object.assign({
+        dx: 0,
+        dy: 0,
+        note: { label: d.label, orientation: d.orientation, align: d.align },
+        connector: { end: "arrow" }
+    }, d, {
+        x: screenCoordinates[0],
+        y: screenCoordinates[1],
+        type: typeof d.type === "function" ? d.type : undefined,
+        screenCoordinates
+    });
+    if (d.fixedX)
+        noteData.x = d.fixedX;
+    if (d.fixedY)
+        noteData.y = d.fixedY;
+    return React.createElement(Annotation_1.default, { key: d.key || `annotation-${i}`, noteData: noteData });
+};
+exports.basicReactAnnotationRule = basicReactAnnotationRule;
+const svgEncloseRule = ({ d, i, screenCoordinates }) => {
+    const circle = (0, d3_hierarchy_1.packEnclose)(screenCoordinates.map((p) => ({ x: p[0], y: p[1], r: 2 })));
+    return (0, baseRules_1.circleEnclosure)({ d, i, circle });
+};
+exports.svgEncloseRule = svgEncloseRule;
+const svgRRule = ({ d, i, screenCoordinates, rScale, rAccessor, adjustedSize, adjustedPosition, projection }) => {
+    let x, y, xPosition, yPosition, subject, dx, dy;
+    if (projection === "radial") {
+        return (React.createElement(Annotation_1.default, { key: d.key || `annotation-${i}`, noteData: Object.assign({
+                dx: 50,
+                dy: 50,
+                note: { label: d.label },
+                connector: { end: "arrow" }
+            }, d, {
+                type: "callout-circle",
+                subject: {
+                    radius: rScale((0, multiAccessorUtils_1.findFirstAccessorValue)(rAccessor, d)) / 2,
+                    radiusPadding: 0
+                },
+                x: adjustedSize[0] / 2,
+                y: adjustedSize[1] / 2
+            }) }));
+    }
+    else if (projection === "horizontal") {
+        dx = 50;
+        dy = 50;
+        yPosition = d.offset || i * 25;
+        x = screenCoordinates[0];
+        y = yPosition;
+        subject = {
+            x,
+            y1: 0,
+            y2: adjustedSize[1] + adjustedPosition[1]
+        };
+    }
+    else {
+        dx = 50;
+        dy = -20;
+        xPosition = d.offset || i * 25;
+        y = screenCoordinates[1];
+        x = xPosition;
+        subject = {
+            y,
+            x1: 0,
+            x2: adjustedSize[0] + adjustedPosition[0]
+        };
+    }
+    const noteData = Object.assign({
+        dx,
+        dy,
+        note: { label: d.label },
+        connector: { end: "arrow" }
+    }, d, {
+        type: "xy-threshold",
+        x,
+        y,
+        subject
+    });
+    return React.createElement(Annotation_1.default, { key: d.key || `annotation-${i}`, noteData: noteData });
+};
+exports.svgRRule = svgRRule;
+const svgCategoryRule = ({ projection, d, i, categories, adjustedSize }) => {
+    const { bracketType = "curly", position = projection === "vertical" ? "top" : "left", depth = 30, offset = 0, padding = 0 } = d;
+    const actualCategories = Array.isArray(d.categories)
+        ? d.categories
+        : [d.categories];
+    const cats = actualCategories.map((c) => categories[c]);
+    if (projection === "radial") {
+        const arcPadding = padding / adjustedSize[1];
+        const leftX = (0, d3_array_1.min)(cats.map((p) => p.pct_start + p.pct_padding / 2 + arcPadding / 2));
+        const rightX = (0, d3_array_1.max)(cats.map((p) => p.pct_start + p.pct - p.pct_padding / 2 - arcPadding / 2));
+        const chartSize = Math.min(adjustedSize[0], adjustedSize[1]) / 2;
+        const centerX = adjustedSize[0] / 2;
+        const centerY = adjustedSize[1] / 2;
+        const { arcPath, textArcPath } = arcBracket({
+            x: 0,
+            y: 0,
+            radius: chartSize,
+            startAngle: leftX * 360,
+            endAngle: rightX * 360,
+            inset: depth,
+            outset: offset,
+            curly: bracketType === "curly"
+        });
+        const textPathID = `text-path-${i}-${Math.random()}`;
+        return (React.createElement("g", { className: "category-annotation annotation", transform: `translate(${centerX},${centerY})` },
+            React.createElement("path", { d: arcPath, fill: "none", stroke: "currentColor" }),
+            React.createElement("path", { id: textPathID, d: textArcPath, style: { display: "none" } }),
+            React.createElement("text", { "font-size": "12.5" },
+                React.createElement("textPath", { startOffset: "50%", textAnchor: "middle", xlinkHref: `#${textPathID}` }, d.label))));
+    }
+    else {
+        const leftX = (0, d3_array_1.min)(cats.map((p) => p.x));
+        const rightX = (0, d3_array_1.max)(cats.map((p) => p.x + p.width));
+        if (projection === "vertical") {
+            let yPosition = position === "top" ? 0 : adjustedSize[1];
+            yPosition += position === "top" ? -offset : offset;
+            const noteData = {
+                type: "bracket",
+                y: yPosition,
+                x: leftX - padding,
+                note: {
+                    title: d.title || d.label,
+                    label: d.title ? d.label : undefined
+                },
+                subject: {
+                    type: bracketType,
+                    width: rightX - leftX + padding * 2,
+                    depth: position === "top" ? -depth : depth
+                }
+            };
+            return React.createElement(Annotation_1.default, { key: d.key || `annotation-${i}`, noteData: noteData });
+        }
+        else if (projection === "horizontal") {
+            let yPosition = position === "left" ? 0 : adjustedSize[0];
+            yPosition += position === "left" ? -offset : offset;
+            const noteData = {
+                type: "bracket",
+                x: yPosition,
+                y: leftX - padding,
+                note: {
+                    title: d.title || d.label,
+                    label: d.title ? d.label : undefined
+                },
+                subject: {
+                    type: bracketType,
+                    height: rightX - leftX + padding * 2,
+                    depth: position === "left" ? -depth : depth
+                }
+            };
+            return React.createElement(Annotation_1.default, { key: d.key || `annotation-${i}`, noteData: noteData });
+        }
+    }
+};
+exports.svgCategoryRule = svgCategoryRule;
+const htmlFrameHoverRule = ({ d, i, rAccessor, oAccessor, projection, tooltipContent, optimizeCustomTooltipPosition, pieceIDAccessor, projectedColumns, adjustedSize, rScale, type, rScaleType }) => {
+    tooltipContent =
+        tooltipContent === "pie"
+            ? () => pieContentGenerator({
+                column: d.column
+            })
+            : tooltipContent;
+    //To string because React gives a DOM error if it gets a date
+    let contentFill;
+    const pO = (0, multiAccessorUtils_1.findFirstAccessorValue)(oAccessor, d) || d.column;
+    const oColumn = projectedColumns[pO];
+    const idPiece = (0, exports.findIDPiece)(pieceIDAccessor, oColumn, d);
+    if (!idPiece) {
+        return null;
+    }
+    const screenCoordinates = ((type.type === "clusterbar" ||
+        type.type === "point" ||
+        type.type === "swarm") &&
+        d.x !== undefined &&
+        d.y !== undefined) ||
+        d.isSummaryData
+        ? [d.x, d.y]
+        : (0, exports.screenProject)({
+            p: d,
+            adjustedSize,
+            rScale,
+            oColumn,
+            rAccessor,
+            idPiece,
+            projection,
+            rScaleType
+        });
+    if (d.isSummaryData) {
+        let summaryContent = d.label;
+        if (d.pieces && d.pieces.length !== 0) {
+            if (d.pieces.length === 1) {
+                summaryContent = [];
+                rAccessor.forEach((actualRAccessor) => {
+                    summaryContent.push(actualRAccessor(d.pieces[0].data));
+                });
+            }
+            else {
+                summaryContent = [];
+                rAccessor.forEach((actualRAccessor) => {
+                    const pieceData = (0, d3_array_1.extent)(d.pieces.map((p) => p.data).map(actualRAccessor));
+                    summaryContent.push(`From ${pieceData[0]} to ${pieceData[1]}`);
+                });
+            }
+        }
+        const summaryLabel = React.createElement("p", { key: "html-annotation-content-2" }, summaryContent);
+        contentFill = [
+            React.createElement("p", { key: "html-annotation-content-1" }, d.key),
+            summaryLabel,
+            React.createElement("p", { key: "html-annotation-content-3" }, d.value)
+        ];
+    }
+    else if (d.data) {
+        contentFill = [];
+        oAccessor.forEach((actualOAccessor, i) => {
+            if (idPiece.data) {
+                const pieceOVal = derivePieceValue(actualOAccessor, idPiece.data);
+                contentFill.push(React.createElement("p", { key: `html-annotation-content-o-${i}` }, pieceOVal));
+            }
+        });
+        rAccessor.forEach((actualRAccessor, i) => {
+            if (idPiece.data) {
+                const pieceRVal = derivePieceValue(actualRAccessor, idPiece.data);
+                contentFill.push(React.createElement("p", { key: `html-annotation-content-r-${i}` }, pieceRVal));
+            }
+        });
+    }
+    else if (d.label) {
+        contentFill = d.label;
+    }
+    let content = (React.createElement("div", { className: "tooltip-content", "data-testid": "tooltip-content" }, contentFill));
+    if (d.type === "frame-hover" && tooltipContent && idPiece) {
+        const tooltipContentArgs = {
+            ...idPiece,
+            ...idPiece.data,
+            column: oColumn,
+            pieces: oColumn ? oColumn.pieceData.map(p => p.data) : []
+        };
+        content = optimizeCustomTooltipPosition ? (React.createElement(TooltipPositioner_1.default, { tooltipContent: tooltipContent, tooltipContentArgs: tooltipContentArgs })) : (tooltipContent(tooltipContentArgs));
+    }
+    const xPos = parseInt(screenCoordinates[0]);
+    const flipped = adjustedSize && xPos > adjustedSize[0] / 2;
+    const tooltipStyle = {
+        position: "absolute",
+        top: `${parseInt(screenCoordinates[1])}px`
+    };
+    if (flipped) {
+        tooltipStyle.right = `${adjustedSize[0] - xPos}px`;
+    }
+    else {
+        tooltipStyle.left = `${xPos}px`;
+    }
+    return (React.createElement("div", { key: `xylabel-${i}`, className: `annotation annotation-or-label ${projection} ${d.className || ""}`, "data-testid": "annotation-or-label", style: tooltipStyle }, content));
+};
+exports.htmlFrameHoverRule = htmlFrameHoverRule;
+const htmlColumnHoverRule = ({ d, i, summaryType, oAccessor, type, adjustedPosition, adjustedSize, projection, tooltipContent, optimizeCustomTooltipPosition, projectedColumns }) => {
+    //we need to ignore negative pieces to make sure the hover behavior populates on top of the positive bar
+    const { coordinates: [xPosition, yPosition], pieces, column } = (0, exports.getColumnScreenCoordinates)({
+        d,
+        projectedColumns,
+        oAccessor,
+        summaryType,
+        type,
+        projection,
+        adjustedPosition,
+        adjustedSize
+    });
+    if (column === undefined) {
+        return null;
+    }
+    //To string because React gives a DOM error if it gets a date
+    const oContent = [];
+    oAccessor.forEach((actualOAccessor, i) => {
+        if (pieces[0].data) {
+            const pieceOVal = derivePieceValue(actualOAccessor, pieces[0].data);
+            oContent.push(React.createElement("p", { key: `or-annotation-o-${i}` }, pieceOVal));
+        }
+    });
+    let content = (React.createElement("div", { className: "tooltip-content", "data-testid": "tooltip-content" },
+        oContent,
+        React.createElement("p", { key: "or-annotation-2" }, (0, d3_array_1.sum)(pieces.map((p) => p.value).filter((p) => p > 0)))));
+    if (d.type === "column-hover" && tooltipContent) {
+        if (tooltipContent === "pie") {
+            tooltipContent = pieContentGenerator;
+        }
+        const tooltipContentArgs = {
+            ...d,
+            pieces: pieces.map((p) => p.data),
+            column,
+            oAccessor
+        };
+        content = optimizeCustomTooltipPosition ? (React.createElement(TooltipPositioner_1.default, { tooltipContent: tooltipContent, tooltipContentArgs: tooltipContentArgs })) : (tooltipContent(tooltipContentArgs));
+    }
+    else if (d.label) {
+        content = (React.createElement("div", { className: "tooltip-content", "data-testid": "tooltip-content" }, d.label));
+    }
+    const xPos = parseInt(xPosition);
+    const flipped = adjustedSize && xPos > adjustedSize[0] / 2;
+    const tooltipStyle = {
+        position: "absolute",
+        top: `${parseInt(yPosition)}px`
+    };
+    if (flipped) {
+        tooltipStyle.right = `${adjustedSize[0] - xPos}px`;
+    }
+    else {
+        tooltipStyle.left = `${xPos}px`;
+    }
+    return (React.createElement("div", { key: `orlabel-${i}`, className: `annotation annotation-or-label ${projection} ${d.className || ""}`, "data-testid": "annotation-or-label", style: tooltipStyle }, content));
+};
+exports.htmlColumnHoverRule = htmlColumnHoverRule;
+const svgRectEncloseRule = ({ d, i, screenCoordinates }) => {
+    const bboxNodes = screenCoordinates.map((p) => {
+        return {
+            x0: (p.x0 = p[0]),
+            x1: (p.x1 = p[0]),
+            y0: (p.y0 = p[1]),
+            y1: (p.y1 = p[1])
+        };
+    });
+    return (0, baseRules_1.rectangleEnclosure)({ bboxNodes, d, i });
+};
+exports.svgRectEncloseRule = svgRectEncloseRule;
+const svgOrdinalLine = ({ screenCoordinates, d, voronoiHover }) => {
+    const lineGenerator = (0, d3_shape_1.line)()
+        .x((d) => d[0])
+        .y((d) => d[1]);
+    if (d.curve) {
+        const interpolator = general_1.curveHash[d.curve] || d.curve;
+        lineGenerator.curve(interpolator);
+    }
+    const lineStyle = typeof d.lineStyle === "function" ? d.lineStyle(d) : d.lineStyle || {};
+    return (React.createElement("g", { key: "ordinal-line-annotation" },
+        React.createElement("path", { stroke: "currentColor", fill: "none", style: lineStyle, d: lineGenerator(screenCoordinates) }),
+        (d.points || d.interactive) &&
+            screenCoordinates.map((p, q) => {
+                const pointStyle = typeof d.pointStyle === "function"
+                    ? d.pointStyle(d.coordinates[q], q)
+                    : d.pointStyle || {};
+                return (React.createElement("g", { transform: `translate(${p[0]},${p[1]})`, key: `ordinal-line-point-${q}` },
+                    d.points && (React.createElement("circle", { style: pointStyle, r: d.radius || 5, fill: "currentColor" })),
+                    d.interactive && (React.createElement("circle", { style: { pointerEvents: "all" }, r: d.hoverRadius || 15, opacity: 0, onMouseEnter: () => voronoiHover({
+                            type: "frame-hover",
+                            ...d.coordinates[q],
+                            data: d.coordinates[q]
+                        }), onMouseOut: () => voronoiHover() }))));
+            })));
+};
+exports.svgOrdinalLine = svgOrdinalLine;