@fluentui/react-charting 5.24.39 → 5.25.1

package/etc/react-charting.api.md

@@ -39,6 +39,7 @@ export type AxisCategoryOrder = 'default' | 'data' | string[] | 'category ascend
 export type AxisProps = {
     tickStep?: number | string;
     tick0?: number | Date;
+    tickText?: string[];
 };
 
 // @public
@@ -47,6 +48,75 @@ export type AxisScaleType = 'default' | 'log';
 // @public
 export const CartesianChart: React_2.FunctionComponent<IModifiedCartesianChartProps>;
 
+// @public (undocumented)
+export interface ChartAnnotation {
+    accessibility?: ChartAnnotationAccessibilityProps;
+    connector?: ChartAnnotationConnectorProps;
+    coordinates: ChartAnnotationCoordinate;
+    data?: Record<string, unknown>;
+    id?: string;
+    layout?: ChartAnnotationLayoutProps;
+    style?: ChartAnnotationStyleProps;
+    text: string;
+}
+
+// @public (undocumented)
+export interface ChartAnnotationAccessibilityProps {
+    ariaDescribedBy?: string;
+    ariaLabel?: string;
+    role?: string;
+}
+
+// @public (undocumented)
+export type ChartAnnotationArrowHead = 'none' | 'start' | 'end' | 'both';
+
+// @public (undocumented)
+export interface ChartAnnotationConnectorProps {
+    arrow?: ChartAnnotationArrowHead;
+    dashArray?: string;
+    endPadding?: number;
+    startPadding?: number;
+    strokeColor?: string;
+    strokeWidth?: number;
+}
+
+// @public (undocumented)
+export type ChartAnnotationCoordinate = {
+    type: 'data' | 'relative' | 'pixel';
+    x: number | string | Date;
+    y: number | string | Date;
+    yAxis?: 'primary' | 'secondary';
+};
+
+// @public (undocumented)
+export interface ChartAnnotationLayoutProps {
+    // Warning: (ae-forgotten-export) The symbol "ChartAnnotationHorizontalAlign" needs to be exported by the entry point index.d.ts
+    align?: ChartAnnotationHorizontalAlign;
+    className?: string;
+    clipToBounds?: boolean;
+    maxWidth?: number;
+    offsetX?: number;
+    offsetY?: number;
+    // Warning: (ae-forgotten-export) The symbol "ChartAnnotationVerticalAlign" needs to be exported by the entry point index.d.ts
+    verticalAlign?: ChartAnnotationVerticalAlign;
+}
+
+// @public (undocumented)
+export interface ChartAnnotationStyleProps {
+    backgroundColor?: string;
+    borderColor?: string;
+    borderRadius?: number;
+    borderStyle?: React_2.CSSProperties['borderStyle'];
+    borderWidth?: number;
+    boxShadow?: string;
+    className?: string;
+    fontSize?: string;
+    fontWeight?: React_2.CSSProperties['fontWeight'];
+    opacity?: number;
+    padding?: string;
+    textColor?: string;
+}
+
 // @public
 export type ChartDataMode = 'default' | 'fraction' | 'percentage';
 
@@ -313,6 +383,7 @@ export interface IBasestate {
 
 // @public
 export interface ICartesianChartProps {
+    annotations?: ChartAnnotation[];
     calloutProps?: Partial<ICalloutProps>;
     // @deprecated
     chartLabel?: string;
@@ -395,6 +466,7 @@ export interface ICartesianChartStyleProps {
 
 // @public
 export interface ICartesianChartStyles {
+    annotationLayer?: IStyle;
     axisAnnotation?: IStyle;
     axisTitle?: IStyle;
     calloutBlockContainer?: IStyle;
@@ -411,6 +483,7 @@ export interface ICartesianChartStyles {
     hover?: IStyle;
     legendContainer?: IStyle;
     opacityChangeOnHover?: IStyle;
+    plotContainer?: IStyle;
     root?: IStyle;
     shapeStyles?: IStyle;
     svgTooltip?: IStyle;
@@ -1286,6 +1359,7 @@ export interface IMargins {
 
 // @public (undocumented)
 export interface IModifiedCartesianChartProps extends ICartesianChartProps {
+    annotations?: ChartAnnotation[];
     barwidth?: number;
     calloutProps: Partial<ICalloutProps> & {
         isCalloutVisible: boolean;

package/lib/components/CommonComponents/Annotations/ChartAnnotationLayer.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { IChartAnnotationLayerProps } from './ChartAnnotationLayer.types';
+export declare const ChartAnnotationLayer: React.FC<IChartAnnotationLayerProps>;

package/lib/components/CommonComponents/Annotations/ChartAnnotationLayer.js

@@ -0,0 +1,496 @@
+import { __assign, __spreadArray } from "tslib";
+import * as React from 'react';
+import { classNamesFunction, css, getId } from '@fluentui/react/lib/Utilities';
+import { applyOpacityToColor, DEFAULT_ANNOTATION_BACKGROUND_OPACITY, DEFAULT_CONNECTOR_ARROW, DEFAULT_CONNECTOR_END_PADDING, DEFAULT_CONNECTOR_START_PADDING, DEFAULT_CONNECTOR_STROKE_WIDTH, getDefaultConnectorStrokeColor, getStyles, } from './ChartAnnotationLayer.styles';
+var getClassNames = classNamesFunction();
+var DEFAULT_HORIZONTAL_ALIGN = 'center';
+var DEFAULT_VERTICAL_ALIGN = 'middle';
+var DEFAULT_FOREIGN_OBJECT_WIDTH = 180;
+var DEFAULT_FOREIGN_OBJECT_HEIGHT = 60;
+var MIN_ARROW_SIZE = 6;
+var MAX_ARROW_SIZE = 24;
+var ARROW_SIZE_SCALE = 0.35;
+var MAX_SIMPLE_MARKUP_DEPTH = 5;
+var CHAR_CODE_LESS_THAN = '<'.codePointAt(0);
+var CHAR_CODE_GREATER_THAN = '>'.codePointAt(0);
+var getAnnotationKey = function (annotation, index) {
+    var _a, _b;
+    return (_b = (_a = annotation.id) !== null && _a !== void 0 ? _a : (typeof annotation.text === 'string' || typeof annotation.text === 'number' ? String(annotation.text) : undefined)) !== null && _b !== void 0 ? _b : "annotation-".concat(index);
+};
+var decodeSimpleMarkupInput = function (input) {
+    var namedEntities = {
+        amp: '&',
+        quot: '"',
+        apos: "'",
+        nbsp: '\u00a0',
+    };
+    var withBasicEntitiesDecoded = input.replace(/&(#x?[0-9a-f]+|#\d+|[a-z][\w-]*);/gi, function (match, entity) {
+        var _a;
+        var lower = entity.toLowerCase();
+        if (lower === 'lt' || lower === 'gt') {
+            return "&".concat(lower, ";");
+        }
+        if (lower.startsWith('#')) {
+            var isHex = lower[1] === 'x';
+            var digits = lower.slice(isHex ? 2 : 1);
+            var codePoint = Number.parseInt(digits, isHex ? 16 : 10);
+            if (Number.isNaN(codePoint)) {
+                return match;
+            }
+            if (codePoint === CHAR_CODE_LESS_THAN) {
+                return '&lt;';
+            }
+            if (codePoint === CHAR_CODE_GREATER_THAN) {
+                return '&gt;';
+            }
+            return String.fromCodePoint(codePoint);
+        }
+        return (_a = namedEntities[lower]) !== null && _a !== void 0 ? _a : match;
+    });
+    return withBasicEntitiesDecoded.replace(/&lt;([^;]+)&gt;/gi, function (match, inner) {
+        var normalized = inner.trim().replace(/\s+/g, ' ');
+        var lower = normalized.toLowerCase();
+        switch (lower) {
+            case 'b':
+                return '<b>';
+            case '/b':
+                return '</b>';
+            case 'i':
+                return '<i>';
+            case '/i':
+                return '</i>';
+            case 'br':
+            case 'br/':
+            case 'br /':
+                return '<br />';
+            default:
+                return match;
+        }
+    });
+};
+var appendTextNode = function (nodes, text) {
+    if (text.length === 0) {
+        return;
+    }
+    var last = nodes[nodes.length - 1];
+    if (last && last.type === 'text') {
+        last.content += text;
+    }
+    else {
+        nodes.push({ type: 'text', content: text });
+    }
+};
+var serializeSimpleMarkup = function (nodes) {
+    return nodes
+        .map(function (node) {
+        if (node.type === 'text') {
+            return node.content;
+        }
+        if (node.type === 'br') {
+            return '<br />';
+        }
+        return "<".concat(node.tag, ">").concat(serializeSimpleMarkup(node.children), "</").concat(node.tag, ">");
+    })
+        .join('');
+};
+var parseSimpleMarkup = function (input) {
+    var _a, _b;
+    if (!input) {
+        return [];
+    }
+    var decodedInput = decodeSimpleMarkupInput(input);
+    var rootChildren = [];
+    var stack = [{ node: null }];
+    var currentChildren = function () { var _a, _b; return (_b = (_a = stack[stack.length - 1].node) === null || _a === void 0 ? void 0 : _a.children) !== null && _b !== void 0 ? _b : rootChildren; };
+    var tagRegex = /<\/?([a-z]+)\s*\/?\s*>/gi;
+    var lastIndex = 0;
+    var match;
+    while ((match = tagRegex.exec(decodedInput)) !== null) {
+        var fullMatch = match[0], rawTagName = match[1];
+        var tagName = rawTagName.toLowerCase();
+        var isClosing = fullMatch.startsWith('</');
+        var isSelfClosing = /\/\s*>$/.test(fullMatch);
+        appendTextNode(currentChildren(), decodedInput.slice(lastIndex, match.index));
+        lastIndex = match.index + fullMatch.length;
+        if (tagName === 'br' && !isClosing) {
+            currentChildren().push({ type: 'br' });
+            continue;
+        }
+        if ((tagName === 'b' || tagName === 'i') && !isSelfClosing) {
+            if (isClosing) {
+                var top_1 = stack[stack.length - 1].node;
+                if (stack.length > 1 && (top_1 === null || top_1 === void 0 ? void 0 : top_1.tag) === tagName) {
+                    stack.pop();
+                }
+                else {
+                    appendTextNode(currentChildren(), fullMatch);
+                }
+            }
+            else {
+                if (stack.length - 1 >= MAX_SIMPLE_MARKUP_DEPTH) {
+                    appendTextNode(currentChildren(), fullMatch);
+                    continue;
+                }
+                var elementNode = {
+                    type: 'element',
+                    tag: tagName,
+                    children: [],
+                };
+                currentChildren().push(elementNode);
+                stack.push({ node: elementNode });
+            }
+            continue;
+        }
+        appendTextNode(currentChildren(), fullMatch);
+    }
+    appendTextNode(currentChildren(), decodedInput.slice(lastIndex));
+    while (stack.length > 1) {
+        var unclosed = stack.pop();
+        var elementNode = unclosed.node;
+        if (!elementNode) {
+            continue;
+        }
+        var parentChildren = (_b = (_a = stack[stack.length - 1].node) === null || _a === void 0 ? void 0 : _a.children) !== null && _b !== void 0 ? _b : rootChildren;
+        var lastChild = parentChildren[parentChildren.length - 1];
+        if (lastChild === elementNode) {
+            parentChildren.pop();
+        }
+        else {
+            var nodeIndex = parentChildren.indexOf(elementNode);
+            if (nodeIndex !== -1) {
+                parentChildren.splice(nodeIndex, 1);
+            }
+        }
+        appendTextNode(parentChildren, "<".concat(elementNode.tag, ">").concat(serializeSimpleMarkup(elementNode.children), "</").concat(elementNode.tag, ">"));
+    }
+    return rootChildren;
+};
+var simpleMarkupNodesToPlainText = function (nodes) {
+    return nodes
+        .map(function (node) {
+        if (node.type === 'text') {
+            return node.content;
+        }
+        if (node.type === 'br') {
+            return '\n';
+        }
+        return simpleMarkupNodesToPlainText(node.children);
+    })
+        .join('');
+};
+var renderSimpleMarkupNodeList = function (nodes, keyPrefix) {
+    return nodes.map(function (node, index) {
+        var key = "".concat(keyPrefix, "-").concat(index);
+        if (node.type === 'text') {
+            return React.createElement(React.Fragment, { key: key }, node.content);
+        }
+        if (node.type === 'br') {
+            return React.createElement("br", { key: key });
+        }
+        var Tag = node.tag === 'b' ? 'strong' : 'em';
+        return React.createElement.apply(React, __spreadArray([Tag, { key: key }], renderSimpleMarkupNodeList(node.children, key), false));
+    });
+};
+var renderSimpleMarkup = function (nodes, keyPrefix) {
+    var _a;
+    var rendered = renderSimpleMarkupNodeList(nodes, keyPrefix);
+    return rendered.length <= 1 ? (_a = rendered[0]) !== null && _a !== void 0 ? _a : null : rendered;
+};
+var normalizeBandOffset = function (scale, value) {
+    var position = scale === null || scale === void 0 ? void 0 : scale(value);
+    if (typeof position !== 'number' || Number.isNaN(position)) {
+        return undefined;
+    }
+    if (scale && typeof scale.bandwidth === 'function') {
+        return position + scale.bandwidth() / 2;
+    }
+    return position;
+};
+var clamp = function (value, min, max) { return Math.max(min, Math.min(max, value)); };
+var createMeasurementSignature = function (annotationContentSignature, containerStyle, contentStyle, layoutClassName, styleClassName) {
+    return JSON.stringify({
+        annotationContentSignature: annotationContentSignature,
+        containerStyle: containerStyle,
+        contentStyle: contentStyle,
+        layoutClassName: layoutClassName !== null && layoutClassName !== void 0 ? layoutClassName : '',
+        styleClassName: styleClassName !== null && styleClassName !== void 0 ? styleClassName : '',
+    });
+};
+var resolveCoordinates = function (annotation, context) {
+    var _a, _b;
+    var coordinates = annotation.coordinates, layout = annotation.layout;
+    if (!coordinates) {
+        return undefined;
+    }
+    var offsetX = (_a = layout === null || layout === void 0 ? void 0 : layout.offsetX) !== null && _a !== void 0 ? _a : 0;
+    var offsetY = (_b = layout === null || layout === void 0 ? void 0 : layout.offsetY) !== null && _b !== void 0 ? _b : 0;
+    var anchor = { x: 0, y: 0 };
+    switch (coordinates.type) {
+        case 'data': {
+            var x = coordinates.x, y = coordinates.y, _c = coordinates.yAxis, yAxis = _c === void 0 ? 'primary' : _c;
+            var xScale = context.xScale;
+            var yScale = yAxis === 'secondary' ? context.yScaleSecondary : context.yScalePrimary;
+            if (!xScale || !yScale) {
+                return undefined;
+            }
+            var xValue = normalizeBandOffset(xScale, x instanceof Date ? x.getTime() : x);
+            var yValue = normalizeBandOffset(yScale, y instanceof Date ? y.getTime() : y);
+            if (typeof xValue !== 'number' || typeof yValue !== 'number') {
+                return undefined;
+            }
+            anchor.x = xValue;
+            anchor.y = yValue;
+            break;
+        }
+        case 'relative': {
+            if (typeof coordinates.x !== 'number' || typeof coordinates.y !== 'number') {
+                return undefined;
+            }
+            anchor.x = context.plotRect.x + context.plotRect.width * coordinates.x;
+            anchor.y = context.plotRect.y + context.plotRect.height * coordinates.y;
+            break;
+        }
+        case 'pixel': {
+            if (typeof coordinates.x !== 'number' || typeof coordinates.y !== 'number') {
+                return undefined;
+            }
+            anchor.x = context.plotRect.x + coordinates.x;
+            anchor.y = context.plotRect.y + coordinates.y;
+            break;
+        }
+        default:
+            return undefined;
+    }
+    var left = anchor.x + offsetX;
+    var top = anchor.y + offsetY;
+    if (layout === null || layout === void 0 ? void 0 : layout.clipToBounds) {
+        left = clamp(left, context.plotRect.x, context.plotRect.x + context.plotRect.width);
+        top = clamp(top, context.plotRect.y, context.plotRect.y + context.plotRect.height);
+    }
+    return {
+        anchor: anchor,
+        point: { x: left, y: top },
+    };
+};
+export var ChartAnnotationLayer = React.memo(function (props) {
+    var annotationsProp = props.annotations, theme = props.theme, context = props.context, className = props.className;
+    var classNames = getClassNames(getStyles, { theme: theme, className: className });
+    var idPrefix = React.useMemo(function () { return getId('chart-annotation'); }, []);
+    var _a = React.useState({}), measurements = _a[0], setMeasurements = _a[1];
+    var resolvedAnnotations = React.useMemo(function () {
+        return (annotationsProp !== null && annotationsProp !== void 0 ? annotationsProp : []).map(function (annotation, index) { return ({ annotation: annotation, key: getAnnotationKey(annotation, index) }); });
+    }, [annotationsProp]);
+    React.useEffect(function () {
+        setMeasurements(function (prev) {
+            if (resolvedAnnotations.length === 0) {
+                if (Object.keys(prev).length === 0) {
+                    return prev;
+                }
+                return {};
+            }
+            var next = {};
+            resolvedAnnotations.forEach(function (_a) {
+                var key = _a.key;
+                if (prev[key]) {
+                    next[key] = prev[key];
+                }
+            });
+            if (Object.keys(next).length === Object.keys(prev).length) {
+                var identical = true;
+                for (var _i = 0, _a = Object.keys(next); _i < _a.length; _i++) {
+                    var key = _a[_i];
+                    if (next[key] !== prev[key]) {
+                        identical = false;
+                        break;
+                    }
+                }
+                if (identical) {
+                    return prev;
+                }
+            }
+            return next;
+        });
+    }, [resolvedAnnotations]);
+    var updateMeasurement = React.useCallback(function (key, width, height, signature) {
+        setMeasurements(function (prev) {
+            var _a;
+            var prevEntry = prev[key];
+            if (prevEntry &&
+                prevEntry.signature === signature &&
+                Math.abs(prevEntry.width - width) < 0.5 &&
+                Math.abs(prevEntry.height - height) < 0.5) {
+                return prev;
+            }
+            if (width === 0 && height === 0) {
+                return prev;
+            }
+            return __assign(__assign({}, prev), (_a = {}, _a[key] = { width: width, height: height, signature: signature }, _a));
+        });
+    }, []);
+    var annotationForeignObjects = [];
+    var measurementElements = [];
+    var connectors = [];
+    resolvedAnnotations.forEach(function (_a) {
+        var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12;
+        var annotation = _a.annotation, key = _a.key;
+        var resolved = resolveCoordinates(annotation, context);
+        if (!resolved) {
+            return;
+        }
+        var rawAnnotationText = annotation.text === undefined || annotation.text === null ? '' : String(annotation.text);
+        var annotationMarkupNodes = parseSimpleMarkup(rawAnnotationText);
+        var annotationMarkupSignature = JSON.stringify(annotationMarkupNodes);
+        var annotationPlainText = simpleMarkupNodesToPlainText(annotationMarkupNodes);
+        var layout = annotation.layout;
+        var horizontalAlign = (_b = layout === null || layout === void 0 ? void 0 : layout.align) !== null && _b !== void 0 ? _b : DEFAULT_HORIZONTAL_ALIGN;
+        var verticalAlign = (_c = layout === null || layout === void 0 ? void 0 : layout.verticalAlign) !== null && _c !== void 0 ? _c : DEFAULT_VERTICAL_ALIGN;
+        var backgroundOpacity = (_e = (_d = annotation.style) === null || _d === void 0 ? void 0 : _d.opacity) !== null && _e !== void 0 ? _e : DEFAULT_ANNOTATION_BACKGROUND_OPACITY;
+        var baseBackgroundColor = (_g = (_f = annotation.style) === null || _f === void 0 ? void 0 : _f.backgroundColor) !== null && _g !== void 0 ? _g : theme.semanticColors.bodyBackground;
+        var hasCustomBackground = ((_h = annotation.style) === null || _h === void 0 ? void 0 : _h.backgroundColor) !== undefined || ((_j = annotation.style) === null || _j === void 0 ? void 0 : _j.opacity) !== undefined;
+        var containerStyle = __assign(__assign({ maxWidth: layout === null || layout === void 0 ? void 0 : layout.maxWidth }, (hasCustomBackground && {
+            backgroundColor: applyOpacityToColor(baseBackgroundColor, backgroundOpacity),
+        })), { borderColor: (_k = annotation.style) === null || _k === void 0 ? void 0 : _k.borderColor, borderWidth: (_l = annotation.style) === null || _l === void 0 ? void 0 : _l.borderWidth, borderStyle: (_o = (_m = annotation.style) === null || _m === void 0 ? void 0 : _m.borderStyle) !== null && _o !== void 0 ? _o : (((_p = annotation.style) === null || _p === void 0 ? void 0 : _p.borderColor) ? 'solid' : undefined), borderRadius: (_q = annotation.style) === null || _q === void 0 ? void 0 : _q.borderRadius, padding: (_r = annotation.style) === null || _r === void 0 ? void 0 : _r.padding, boxShadow: (_s = annotation.style) === null || _s === void 0 ? void 0 : _s.boxShadow });
+        var contentStyle = {
+            color: (_t = annotation.style) === null || _t === void 0 ? void 0 : _t.textColor,
+            fontSize: (_u = annotation.style) === null || _u === void 0 ? void 0 : _u.fontSize,
+            fontWeight: (_v = annotation.style) === null || _v === void 0 ? void 0 : _v.fontWeight,
+            opacity: 1,
+        };
+        var measurementSignature = createMeasurementSignature(annotationMarkupSignature, containerStyle, contentStyle, layout === null || layout === void 0 ? void 0 : layout.className, (_w = annotation.style) === null || _w === void 0 ? void 0 : _w.className);
+        var measurementEntry = measurements[key];
+        var isMeasurementValid = (measurementEntry === null || measurementEntry === void 0 ? void 0 : measurementEntry.signature) === measurementSignature;
+        var measuredSize = isMeasurementValid ? measurementEntry : undefined;
+        var width = Math.max((_y = (_x = measuredSize === null || measuredSize === void 0 ? void 0 : measuredSize.width) !== null && _x !== void 0 ? _x : layout === null || layout === void 0 ? void 0 : layout.maxWidth) !== null && _y !== void 0 ? _y : DEFAULT_FOREIGN_OBJECT_WIDTH, 1);
+        var height = Math.max((_z = measuredSize === null || measuredSize === void 0 ? void 0 : measuredSize.height) !== null && _z !== void 0 ? _z : DEFAULT_FOREIGN_OBJECT_HEIGHT, 1);
+        var offsetX = horizontalAlign === 'center' ? -width / 2 : horizontalAlign === 'end' ? -width : 0;
+        var offsetY = verticalAlign === 'middle' ? -height / 2 : verticalAlign === 'bottom' ? -height : 0;
+        var baseTopLeftX = resolved.point.x + offsetX;
+        var baseTopLeftY = resolved.point.y + offsetY;
+        var usePlotBounds = (layout === null || layout === void 0 ? void 0 : layout.clipToBounds) !== false;
+        var viewportX = usePlotBounds ? context.plotRect.x : 0;
+        var viewportY = usePlotBounds ? context.plotRect.y : 0;
+        var viewportWidth = usePlotBounds ? context.plotRect.width : (_0 = context.svgRect.width) !== null && _0 !== void 0 ? _0 : 0;
+        var viewportHeight = usePlotBounds ? context.plotRect.height : (_1 = context.svgRect.height) !== null && _1 !== void 0 ? _1 : 0;
+        var maxTopLeftX = viewportWidth > 0 ? viewportX + viewportWidth - width : baseTopLeftX;
+        var maxTopLeftY = viewportHeight > 0 ? viewportY + viewportHeight - height : baseTopLeftY;
+        var topLeftX = viewportWidth > 0 ? clamp(baseTopLeftX, viewportX, Math.max(viewportX, maxTopLeftX)) : baseTopLeftX;
+        var topLeftY = viewportHeight > 0 ? clamp(baseTopLeftY, viewportY, Math.max(viewportY, maxTopLeftY)) : baseTopLeftY;
+        var displayPoint = {
+            x: topLeftX - offsetX,
+            y: topLeftY - offsetY,
+        };
+        if (annotation.connector) {
+            var startPadding = (_2 = annotation.connector.startPadding) !== null && _2 !== void 0 ? _2 : 12;
+            var endPadding = (_3 = annotation.connector.endPadding) !== null && _3 !== void 0 ? _3 : 0;
+            var minArrowClearance = 6;
+            var minDistance = Math.max(startPadding + endPadding + minArrowClearance, startPadding);
+            var dx = displayPoint.x - resolved.anchor.x;
+            var dy = displayPoint.y - resolved.anchor.y;
+            var distance = Math.sqrt(dx * dx + dy * dy);
+            if (distance < minDistance) {
+                var fallbackDirection = { x: 0, y: -1 };
+                var ux = distance === 0 ? fallbackDirection.x : dx / distance;
+                var uy = distance === 0 ? fallbackDirection.y : dy / distance;
+                var desiredDisplayX = resolved.anchor.x + ux * minDistance;
+                var desiredDisplayY = resolved.anchor.y + uy * minDistance;
+                var desiredTopLeftX = desiredDisplayX + offsetX;
+                var desiredTopLeftY = desiredDisplayY + offsetY;
+                desiredTopLeftX =
+                    viewportWidth > 0 ? clamp(desiredTopLeftX, viewportX, Math.max(viewportX, maxTopLeftX)) : desiredTopLeftX;
+                desiredTopLeftY =
+                    viewportHeight > 0 ? clamp(desiredTopLeftY, viewportY, Math.max(viewportY, maxTopLeftY)) : desiredTopLeftY;
+                topLeftX = desiredTopLeftX;
+                topLeftY = desiredTopLeftY;
+                displayPoint = {
+                    x: topLeftX - offsetX,
+                    y: topLeftY - offsetY,
+                };
+            }
+        }
+        var measurementStyle = __assign({ left: topLeftX, top: topLeftY, pointerEvents: 'none' }, containerStyle);
+        if (!isMeasurementValid) {
+            measurementElements.push(React.createElement("div", { key: "".concat(key, "-measurement"), ref: function (node) {
+                    if (node) {
+                        var rect = node.getBoundingClientRect();
+                        if (rect.width !== 0 || rect.height !== 0) {
+                            updateMeasurement(key, rect.width, rect.height, measurementSignature);
+                        }
+                    }
+                }, className: css(classNames.annotation, classNames.measurement, layout === null || layout === void 0 ? void 0 : layout.className, (_4 = annotation.style) === null || _4 === void 0 ? void 0 : _4.className), style: measurementStyle, "aria-hidden": true, "data-annotation-key": key, "data-chart-annotation-measurement": "true" },
+                React.createElement("div", { className: css(classNames.annotationContent, layout === null || layout === void 0 ? void 0 : layout.className, (_5 = annotation.style) === null || _5 === void 0 ? void 0 : _5.className), style: contentStyle }, renderSimpleMarkup(annotationMarkupNodes, "".concat(key, "-measurement")))));
+        }
+        annotationForeignObjects.push(React.createElement("foreignObject", { key: "".concat(key, "-annotation"), x: topLeftX, y: topLeftY, width: width, height: height, className: css(classNames.annotationForeignObject), "data-annotation-key": key },
+            React.createElement("div", { className: css(classNames.annotation, layout === null || layout === void 0 ? void 0 : layout.className, (_6 = annotation.style) === null || _6 === void 0 ? void 0 : _6.className), style: containerStyle, "data-annotation-key": key },
+                React.createElement("div", { className: css(classNames.annotationContent, (_7 = annotation.style) === null || _7 === void 0 ? void 0 : _7.className), style: contentStyle, role: (_9 = (_8 = annotation.accessibility) === null || _8 === void 0 ? void 0 : _8.role) !== null && _9 !== void 0 ? _9 : 'note', "aria-label": (_11 = (_10 = annotation.accessibility) === null || _10 === void 0 ? void 0 : _10.ariaLabel) !== null && _11 !== void 0 ? _11 : (annotationPlainText ? annotationPlainText : undefined), "aria-describedby": (_12 = annotation.accessibility) === null || _12 === void 0 ? void 0 : _12.ariaDescribedBy, "data-chart-annotation": "true", "data-annotation-key": key }, renderSimpleMarkup(annotationMarkupNodes, "".concat(key, "-content"))))));
+        if (annotation.connector) {
+            var _13 = annotation.connector, _14 = _13.startPadding, startPadding = _14 === void 0 ? DEFAULT_CONNECTOR_START_PADDING : _14, _15 = _13.endPadding, endPadding = _15 === void 0 ? DEFAULT_CONNECTOR_END_PADDING : _15, _16 = _13.strokeColor, strokeColor = _16 === void 0 ? getDefaultConnectorStrokeColor(theme) : _16, _17 = _13.strokeWidth, strokeWidth = _17 === void 0 ? DEFAULT_CONNECTOR_STROKE_WIDTH : _17, dashArray = _13.dashArray, _18 = _13.arrow, arrow = _18 === void 0 ? DEFAULT_CONNECTOR_ARROW : _18;
+            var dx = resolved.anchor.x - displayPoint.x;
+            var dy = resolved.anchor.y - displayPoint.y;
+            var distance = Math.sqrt(dx * dx + dy * dy) || 1;
+            var ux = dx / distance;
+            var uy = dy / distance;
+            var sizeBasis = Math.max(1, Math.min(width, height));
+            var proportionalSize = sizeBasis * ARROW_SIZE_SCALE;
+            var maxByPadding = startPadding > 0 ? startPadding * 1.25 : MAX_ARROW_SIZE;
+            var maxByDistance = distance * 0.6;
+            var markerSize = clamp(proportionalSize, MIN_ARROW_SIZE, Math.min(MAX_ARROW_SIZE, maxByPadding, maxByDistance));
+            var markerStrokeWidth = clamp(strokeWidth, 1, markerSize / 2);
+            var start = {
+                x: displayPoint.x + ux * startPadding,
+                y: displayPoint.y + uy * startPadding,
+            };
+            var end = {
+                x: resolved.anchor.x - ux * endPadding,
+                y: resolved.anchor.y - uy * endPadding,
+            };
+            connectors.push({
+                key: "".concat(key, "-connector"),
+                start: start,
+                end: end,
+                strokeColor: strokeColor,
+                strokeWidth: strokeWidth,
+                dashArray: dashArray,
+                arrow: arrow,
+                markerSize: markerSize,
+                markerStrokeWidth: markerStrokeWidth,
+            });
+        }
+    });
+    if (annotationForeignObjects.length === 0 && connectors.length === 0) {
+        return null;
+    }
+    var viewBoxWidth = context.svgRect.width || 1;
+    var viewBoxHeight = context.svgRect.height || 1;
+    var markerDefs = [];
+    var createMarkerId = function (color, position, size, markerStrokeWidth) {
+        var id = "".concat(idPrefix, "-").concat(position, "-").concat(markerDefs.length);
+        var refY = size / 2;
+        var refX = position === 'end' ? size : 0;
+        var pathEnd = "M0 0 L ".concat(size, " ").concat(refY, " L0 ").concat(size, " Z");
+        var pathStart = "M ".concat(size, " 0 L0 ").concat(refY, " L ").concat(size, " ").concat(size, " Z");
+        var path = position === 'end' ? pathEnd : pathStart;
+        markerDefs.push(React.createElement("marker", { key: id, id: id, markerWidth: size, markerHeight: size, viewBox: "0 0 ".concat(size, " ").concat(size), refX: refX, refY: refY, orient: "auto", markerUnits: "userSpaceOnUse" },
+            React.createElement("path", { d: path, fill: color, stroke: color, strokeWidth: markerStrokeWidth, strokeLinecap: "round", strokeLinejoin: "round" })));
+        return id;
+    };
+    var connectorElements = connectors.map(function (connector) {
+        var markerStart;
+        var markerEnd;
+        if (connector.arrow === 'start' || connector.arrow === 'both') {
+            markerStart = createMarkerId(connector.strokeColor, 'start', connector.markerSize, connector.markerStrokeWidth);
+        }
+        if (connector.arrow === 'end' || connector.arrow === 'both') {
+            markerEnd = createMarkerId(connector.strokeColor, 'end', connector.markerSize, connector.markerStrokeWidth);
+        }
+        return (React.createElement("line", { key: connector.key, x1: connector.start.x, y1: connector.start.y, x2: connector.end.x, y2: connector.end.y, stroke: connector.strokeColor, strokeWidth: connector.strokeWidth, strokeDasharray: connector.dashArray, strokeLinecap: "round", markerStart: markerStart ? "url(#".concat(markerStart, ")") : undefined, markerEnd: markerEnd ? "url(#".concat(markerEnd, ")") : undefined }));
+    });
+    var shouldRenderSvg = connectors.length > 0 || annotationForeignObjects.length > 0;
+    return (React.createElement("div", { className: classNames.root, role: "presentation", "data-chart-annotation-layer": "true" },
+        shouldRenderSvg && (React.createElement("svg", { className: classNames.connectorLayer, width: "100%", height: "100%", viewBox: "0 0 ".concat(viewBoxWidth, " ").concat(viewBoxHeight), preserveAspectRatio: "none", "data-chart-annotation-svg": "true" },
+            markerDefs.length > 0 && React.createElement("defs", null, markerDefs),
+            connectorElements.length > 0 && (React.createElement("g", { "aria-hidden": "true", className: classNames.connectorGroup }, connectorElements)),
+            annotationForeignObjects)),
+        measurementElements));
+});
+ChartAnnotationLayer.displayName = 'ChartAnnotationLayer';
+//# sourceMappingURL=ChartAnnotationLayer.js.map