@fluentui/react-charts 9.3.5 → 9.3.6

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

@@ -0,0 +1,617 @@
+'use client';
+import * as React from 'react';
+import { mergeClasses } from '@griffel/react';
+import { applyOpacityToColor, DEFAULT_ANNOTATION_BACKGROUND_OPACITY, DEFAULT_CONNECTOR_ARROW, DEFAULT_CONNECTOR_END_PADDING, DEFAULT_CONNECTOR_START_PADDING, DEFAULT_CONNECTOR_STROKE_WIDTH, getDefaultConnectorStrokeColor, useChartAnnotationLayerStyles } from './useChartAnnotationLayer.styles';
+import { useId } from '@fluentui/react-utilities';
+import { tokens } from '@fluentui/react-theme';
+const DEFAULT_HORIZONTAL_ALIGN = 'center';
+const DEFAULT_VERTICAL_ALIGN = 'middle';
+const DEFAULT_FOREIGN_OBJECT_WIDTH = 180;
+const DEFAULT_FOREIGN_OBJECT_HEIGHT = 60;
+const MIN_ARROW_SIZE = 6;
+const MAX_ARROW_SIZE = 24;
+const ARROW_SIZE_SCALE = 0.35;
+const MAX_SIMPLE_MARKUP_DEPTH = 5;
+const CHAR_CODE_LESS_THAN = '<'.codePointAt(0);
+const CHAR_CODE_GREATER_THAN = '>'.codePointAt(0);
+const getAnnotationKey = (annotation, index)=>{
+    var _annotation_id, _ref;
+    return (_ref = (_annotation_id = annotation.id) !== null && _annotation_id !== void 0 ? _annotation_id : typeof annotation.text === 'string' || typeof annotation.text === 'number' ? String(annotation.text) : undefined) !== null && _ref !== void 0 ? _ref : `annotation-${index}`;
+};
+const decodeSimpleMarkupInput = (input)=>{
+    const namedEntities = {
+        amp: '&',
+        quot: '"',
+        apos: "'",
+        nbsp: '\u00a0'
+    };
+    const withBasicEntitiesDecoded = input.replace(/&(#x?[0-9a-f]+|#\d+|[a-z][\w-]*);/gi, (match, entity)=>{
+        const lower = entity.toLowerCase();
+        if (lower === 'lt' || lower === 'gt') {
+            return `&${lower};`;
+        }
+        if (lower.startsWith('#')) {
+            const isHex = lower[1] === 'x';
+            const digits = lower.slice(isHex ? 2 : 1);
+            const 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);
+        }
+        var _namedEntities_lower;
+        return (_namedEntities_lower = namedEntities[lower]) !== null && _namedEntities_lower !== void 0 ? _namedEntities_lower : match;
+    });
+    return withBasicEntitiesDecoded.replace(/&lt;([^;]+)&gt;/gi, (match, inner)=>{
+        const normalized = inner.trim().replace(/\s+/g, ' ');
+        const 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;
+        }
+    });
+};
+const appendTextNode = (nodes, text)=>{
+    if (text.length === 0) {
+        return;
+    }
+    const last = nodes[nodes.length - 1];
+    if (last && last.type === 'text') {
+        last.content += text;
+    } else {
+        nodes.push({
+            type: 'text',
+            content: text
+        });
+    }
+};
+const serializeSimpleMarkup = (nodes)=>nodes.map((node)=>{
+        if (node.type === 'text') {
+            return node.content;
+        }
+        if (node.type === 'br') {
+            return '<br />';
+        }
+        return `<${node.tag}>${serializeSimpleMarkup(node.children)}</${node.tag}>`;
+    }).join('');
+const parseSimpleMarkup = (input)=>{
+    if (!input) {
+        return [];
+    }
+    const decodedInput = decodeSimpleMarkupInput(input);
+    const rootChildren = [];
+    const stack = [
+        {
+            node: null
+        }
+    ];
+    const currentChildren = ()=>{
+        var _stack__node;
+        var _stack__node_children;
+        return (_stack__node_children = (_stack__node = stack[stack.length - 1].node) === null || _stack__node === void 0 ? void 0 : _stack__node.children) !== null && _stack__node_children !== void 0 ? _stack__node_children : rootChildren;
+    };
+    const tagRegex = /<\/?([a-z]+)\s*\/?\s*>/gi;
+    let lastIndex = 0;
+    let match;
+    while((match = tagRegex.exec(decodedInput)) !== null){
+        const [fullMatch, rawTagName] = match;
+        const tagName = rawTagName.toLowerCase();
+        const isClosing = fullMatch.startsWith('</');
+        const 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) {
+                const top = stack[stack.length - 1].node;
+                if (stack.length > 1 && (top === null || top === void 0 ? void 0 : top.tag) === tagName) {
+                    stack.pop();
+                } else {
+                    appendTextNode(currentChildren(), fullMatch);
+                }
+            } else {
+                if (stack.length - 1 >= MAX_SIMPLE_MARKUP_DEPTH) {
+                    appendTextNode(currentChildren(), fullMatch);
+                    continue;
+                }
+                const 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 _stack__node;
+        const unclosed = stack.pop();
+        const elementNode = unclosed.node;
+        if (!elementNode) {
+            continue;
+        }
+        var _stack__node_children;
+        const parentChildren = (_stack__node_children = (_stack__node = stack[stack.length - 1].node) === null || _stack__node === void 0 ? void 0 : _stack__node.children) !== null && _stack__node_children !== void 0 ? _stack__node_children : rootChildren;
+        const lastChild = parentChildren[parentChildren.length - 1];
+        if (lastChild === elementNode) {
+            parentChildren.pop();
+        } else {
+            const nodeIndex = parentChildren.indexOf(elementNode);
+            if (nodeIndex !== -1) {
+                parentChildren.splice(nodeIndex, 1);
+            }
+        }
+        appendTextNode(parentChildren, `<${elementNode.tag}>${serializeSimpleMarkup(elementNode.children)}</${elementNode.tag}>`);
+    }
+    return rootChildren;
+};
+const simpleMarkupNodesToPlainText = (nodes)=>nodes.map((node)=>{
+        if (node.type === 'text') {
+            return node.content;
+        }
+        if (node.type === 'br') {
+            return '\n';
+        }
+        return simpleMarkupNodesToPlainText(node.children);
+    }).join('');
+const renderSimpleMarkupNodeList = (nodes, keyPrefix)=>nodes.map((node, index)=>{
+        const key = `${keyPrefix}-${index}`;
+        if (node.type === 'text') {
+            return /*#__PURE__*/ React.createElement(React.Fragment, {
+                key: key
+            }, node.content);
+        }
+        if (node.type === 'br') {
+            return /*#__PURE__*/ React.createElement("br", {
+                key: key
+            });
+        }
+        const Tag = node.tag === 'b' ? 'strong' : 'em';
+        return /*#__PURE__*/ React.createElement(Tag, {
+            key
+        }, ...renderSimpleMarkupNodeList(node.children, key));
+    });
+const renderSimpleMarkup = (nodes, keyPrefix)=>{
+    const rendered = renderSimpleMarkupNodeList(nodes, keyPrefix);
+    var _rendered_;
+    return rendered.length <= 1 ? (_rendered_ = rendered[0]) !== null && _rendered_ !== void 0 ? _rendered_ : null : rendered;
+};
+const normalizeBandOffset = (scale, value)=>{
+    const 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;
+};
+const clamp = (value, min, max)=>Math.max(min, Math.min(max, value));
+const createMeasurementSignature = (annotationContentSignature, containerStyle, contentStyle, layoutClassName, styleClassName)=>JSON.stringify({
+        annotationContentSignature,
+        containerStyle,
+        contentStyle,
+        layoutClassName: layoutClassName !== null && layoutClassName !== void 0 ? layoutClassName : '',
+        styleClassName: styleClassName !== null && styleClassName !== void 0 ? styleClassName : ''
+    });
+const resolveCoordinates = (annotation, context)=>{
+    const { coordinates, layout } = annotation;
+    if (!coordinates) {
+        return undefined;
+    }
+    var _layout_offsetX;
+    const offsetX = (_layout_offsetX = layout === null || layout === void 0 ? void 0 : layout.offsetX) !== null && _layout_offsetX !== void 0 ? _layout_offsetX : 0;
+    var _layout_offsetY;
+    const offsetY = (_layout_offsetY = layout === null || layout === void 0 ? void 0 : layout.offsetY) !== null && _layout_offsetY !== void 0 ? _layout_offsetY : 0;
+    const anchor = {
+        x: 0,
+        y: 0
+    };
+    switch(coordinates.type){
+        case 'data':
+            {
+                const { x, y, yAxis = 'primary' } = coordinates;
+                const xScale = context.xScale;
+                const yScale = yAxis === 'secondary' ? context.yScaleSecondary : context.yScalePrimary;
+                if (!xScale || !yScale) {
+                    return undefined;
+                }
+                const xValue = normalizeBandOffset(xScale, x instanceof Date ? x.getTime() : x);
+                const 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;
+    }
+    let left = anchor.x + offsetX;
+    let 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,
+        point: {
+            x: left,
+            y: top
+        }
+    };
+};
+export const ChartAnnotationLayer = /*#__PURE__*/ React.memo((props)=>{
+    const { annotations: annotationsProp, context } = props;
+    const classes = useChartAnnotationLayerStyles(props);
+    const idPrefix = useId('chart-annotation');
+    const [measurements, setMeasurements] = React.useState({});
+    const resolvedAnnotations = React.useMemo(()=>(annotationsProp !== null && annotationsProp !== void 0 ? annotationsProp : []).map((annotation, index)=>({
+                annotation,
+                key: getAnnotationKey(annotation, index)
+            })), [
+        annotationsProp
+    ]);
+    React.useEffect(()=>{
+        setMeasurements((prev)=>{
+            if (resolvedAnnotations.length === 0) {
+                if (Object.keys(prev).length === 0) {
+                    return prev;
+                }
+                return {};
+            }
+            const next = {};
+            resolvedAnnotations.forEach(({ key })=>{
+                if (prev[key]) {
+                    next[key] = prev[key];
+                }
+            });
+            if (Object.keys(next).length === Object.keys(prev).length) {
+                let identical = true;
+                for (const key of Object.keys(next)){
+                    if (next[key] !== prev[key]) {
+                        identical = false;
+                        break;
+                    }
+                }
+                if (identical) {
+                    return prev;
+                }
+            }
+            return next;
+        });
+    }, [
+        resolvedAnnotations
+    ]);
+    const updateMeasurement = React.useCallback((key, width, height, signature)=>{
+        setMeasurements((prev)=>{
+            const 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 {
+                ...prev,
+                [key]: {
+                    width,
+                    height,
+                    signature
+                }
+            };
+        });
+    }, []);
+    const annotationForeignObjects = [];
+    const measurementElements = [];
+    const connectors = [];
+    resolvedAnnotations.forEach(({ annotation, key })=>{
+        var _annotation_style, _annotation_style1, _annotation_style2, _annotation_style3, _annotation_style4, _annotation_style5, _annotation_style6, _annotation_style7, _annotation_style8, _annotation_style9, _annotation_style10, _annotation_style11, _annotation_style12, _annotation_style13, _annotation_style14, _annotation_style15, _annotation_style16, _annotation_style17, _annotation_accessibility, _annotation_accessibility1, _annotation_accessibility2;
+        const resolved = resolveCoordinates(annotation, context);
+        if (!resolved) {
+            return;
+        }
+        const rawAnnotationText = annotation.text === undefined || annotation.text === null ? '' : String(annotation.text);
+        const annotationMarkupNodes = parseSimpleMarkup(rawAnnotationText);
+        const annotationMarkupSignature = JSON.stringify(annotationMarkupNodes);
+        const annotationPlainText = simpleMarkupNodesToPlainText(annotationMarkupNodes);
+        const layout = annotation.layout;
+        var _layout_align;
+        const horizontalAlign = (_layout_align = layout === null || layout === void 0 ? void 0 : layout.align) !== null && _layout_align !== void 0 ? _layout_align : DEFAULT_HORIZONTAL_ALIGN;
+        var _layout_verticalAlign;
+        const verticalAlign = (_layout_verticalAlign = layout === null || layout === void 0 ? void 0 : layout.verticalAlign) !== null && _layout_verticalAlign !== void 0 ? _layout_verticalAlign : DEFAULT_VERTICAL_ALIGN;
+        var _annotation_style_opacity;
+        const backgroundOpacity = (_annotation_style_opacity = (_annotation_style = annotation.style) === null || _annotation_style === void 0 ? void 0 : _annotation_style.opacity) !== null && _annotation_style_opacity !== void 0 ? _annotation_style_opacity : DEFAULT_ANNOTATION_BACKGROUND_OPACITY;
+        const baseBackgroundColor = (_annotation_style1 = annotation.style) === null || _annotation_style1 === void 0 ? void 0 : _annotation_style1.backgroundColor;
+        const hasCustomBackground = ((_annotation_style2 = annotation.style) === null || _annotation_style2 === void 0 ? void 0 : _annotation_style2.backgroundColor) !== undefined || ((_annotation_style3 = annotation.style) === null || _annotation_style3 === void 0 ? void 0 : _annotation_style3.opacity) !== undefined;
+        var _annotation_style_borderStyle;
+        const containerStyle = {
+            maxWidth: layout === null || layout === void 0 ? void 0 : layout.maxWidth,
+            ...hasCustomBackground ? {
+                backgroundColor: applyOpacityToColor(baseBackgroundColor, backgroundOpacity)
+            } : {
+                backgroundColor: applyOpacityToColor(tokens.colorNeutralBackground1, DEFAULT_ANNOTATION_BACKGROUND_OPACITY)
+            },
+            borderColor: (_annotation_style4 = annotation.style) === null || _annotation_style4 === void 0 ? void 0 : _annotation_style4.borderColor,
+            borderWidth: (_annotation_style5 = annotation.style) === null || _annotation_style5 === void 0 ? void 0 : _annotation_style5.borderWidth,
+            borderStyle: (_annotation_style_borderStyle = (_annotation_style6 = annotation.style) === null || _annotation_style6 === void 0 ? void 0 : _annotation_style6.borderStyle) !== null && _annotation_style_borderStyle !== void 0 ? _annotation_style_borderStyle : ((_annotation_style7 = annotation.style) === null || _annotation_style7 === void 0 ? void 0 : _annotation_style7.borderColor) ? 'solid' : undefined,
+            borderRadius: (_annotation_style8 = annotation.style) === null || _annotation_style8 === void 0 ? void 0 : _annotation_style8.borderRadius,
+            padding: (_annotation_style9 = annotation.style) === null || _annotation_style9 === void 0 ? void 0 : _annotation_style9.padding,
+            boxShadow: (_annotation_style10 = annotation.style) === null || _annotation_style10 === void 0 ? void 0 : _annotation_style10.boxShadow
+        };
+        const contentStyle = {
+            color: (_annotation_style11 = annotation.style) === null || _annotation_style11 === void 0 ? void 0 : _annotation_style11.textColor,
+            fontSize: (_annotation_style12 = annotation.style) === null || _annotation_style12 === void 0 ? void 0 : _annotation_style12.fontSize,
+            fontWeight: (_annotation_style13 = annotation.style) === null || _annotation_style13 === void 0 ? void 0 : _annotation_style13.fontWeight,
+            opacity: 1
+        };
+        if (typeof ((_annotation_style14 = annotation.style) === null || _annotation_style14 === void 0 ? void 0 : _annotation_style14.rotation) === 'number' && !Number.isNaN(annotation.style.rotation)) {
+            containerStyle.transform = `rotate(${annotation.style.rotation}deg)`;
+            containerStyle.transformOrigin = '50% 50%';
+        }
+        const measurementSignature = createMeasurementSignature(annotationMarkupSignature, containerStyle, contentStyle, layout === null || layout === void 0 ? void 0 : layout.className, (_annotation_style15 = annotation.style) === null || _annotation_style15 === void 0 ? void 0 : _annotation_style15.className);
+        const measurementEntry = measurements[key];
+        const isMeasurementValid = (measurementEntry === null || measurementEntry === void 0 ? void 0 : measurementEntry.signature) === measurementSignature;
+        const measuredSize = isMeasurementValid ? measurementEntry : undefined;
+        var _measuredSize_width, _ref;
+        const width = Math.max((_ref = (_measuredSize_width = measuredSize === null || measuredSize === void 0 ? void 0 : measuredSize.width) !== null && _measuredSize_width !== void 0 ? _measuredSize_width : layout === null || layout === void 0 ? void 0 : layout.maxWidth) !== null && _ref !== void 0 ? _ref : DEFAULT_FOREIGN_OBJECT_WIDTH, 1);
+        var _measuredSize_height;
+        const height = Math.max((_measuredSize_height = measuredSize === null || measuredSize === void 0 ? void 0 : measuredSize.height) !== null && _measuredSize_height !== void 0 ? _measuredSize_height : DEFAULT_FOREIGN_OBJECT_HEIGHT, 1);
+        const offsetX = horizontalAlign === 'center' ? -width / 2 : horizontalAlign === 'end' ? -width : 0;
+        const offsetY = verticalAlign === 'middle' ? -height / 2 : verticalAlign === 'bottom' ? -height : 0;
+        const baseTopLeftX = resolved.point.x + offsetX;
+        const baseTopLeftY = resolved.point.y + offsetY;
+        const usePlotBounds = (layout === null || layout === void 0 ? void 0 : layout.clipToBounds) !== false;
+        const viewportX = usePlotBounds ? context.plotRect.x : 0;
+        const viewportY = usePlotBounds ? context.plotRect.y : 0;
+        var _context_svgRect_width;
+        const viewportWidth = usePlotBounds ? context.plotRect.width : (_context_svgRect_width = context.svgRect.width) !== null && _context_svgRect_width !== void 0 ? _context_svgRect_width : 0;
+        var _context_svgRect_height;
+        const viewportHeight = usePlotBounds ? context.plotRect.height : (_context_svgRect_height = context.svgRect.height) !== null && _context_svgRect_height !== void 0 ? _context_svgRect_height : 0;
+        const maxTopLeftX = viewportWidth > 0 ? viewportX + viewportWidth - width : baseTopLeftX;
+        const maxTopLeftY = viewportHeight > 0 ? viewportY + viewportHeight - height : baseTopLeftY;
+        let topLeftX = viewportWidth > 0 ? clamp(baseTopLeftX, viewportX, Math.max(viewportX, maxTopLeftX)) : baseTopLeftX;
+        let topLeftY = viewportHeight > 0 ? clamp(baseTopLeftY, viewportY, Math.max(viewportY, maxTopLeftY)) : baseTopLeftY;
+        let displayPoint = {
+            x: topLeftX - offsetX,
+            y: topLeftY - offsetY
+        };
+        if (annotation.connector) {
+            var _annotation_connector_startPadding;
+            const startPadding = (_annotation_connector_startPadding = annotation.connector.startPadding) !== null && _annotation_connector_startPadding !== void 0 ? _annotation_connector_startPadding : 12;
+            var _annotation_connector_endPadding;
+            const endPadding = (_annotation_connector_endPadding = annotation.connector.endPadding) !== null && _annotation_connector_endPadding !== void 0 ? _annotation_connector_endPadding : 0;
+            const minArrowClearance = 6;
+            const minDistance = Math.max(startPadding + endPadding + minArrowClearance, startPadding);
+            const dx = displayPoint.x - resolved.anchor.x;
+            const dy = displayPoint.y - resolved.anchor.y;
+            const distance = Math.sqrt(dx * dx + dy * dy);
+            if (distance < minDistance) {
+                const fallbackDirection = {
+                    x: 0,
+                    y: -1
+                };
+                const ux = distance === 0 ? fallbackDirection.x : dx / distance;
+                const uy = distance === 0 ? fallbackDirection.y : dy / distance;
+                const desiredDisplayX = resolved.anchor.x + ux * minDistance;
+                const desiredDisplayY = resolved.anchor.y + uy * minDistance;
+                let desiredTopLeftX = desiredDisplayX + offsetX;
+                let 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
+                };
+            }
+        }
+        const measurementStyle = {
+            position: 'absolute',
+            left: topLeftX,
+            top: topLeftY,
+            pointerEvents: 'none',
+            visibility: 'hidden',
+            ...containerStyle
+        };
+        if (!isMeasurementValid) {
+            var _annotation_style18, _annotation_style19;
+            measurementElements.push(/*#__PURE__*/ React.createElement("div", {
+                key: `${key}-measurement`,
+                ref: (node)=>{
+                    if (node) {
+                        const rect = node.getBoundingClientRect();
+                        if (rect.width !== 0 || rect.height !== 0) {
+                            updateMeasurement(key, rect.width, rect.height, measurementSignature);
+                        }
+                    }
+                },
+                className: mergeClasses(classes.annotation, classes.measurement, layout === null || layout === void 0 ? void 0 : layout.className, (_annotation_style18 = annotation.style) === null || _annotation_style18 === void 0 ? void 0 : _annotation_style18.className),
+                style: measurementStyle,
+                "aria-hidden": true,
+                "data-annotation-key": key,
+                "data-chart-annotation-measurement": "true"
+            }, /*#__PURE__*/ React.createElement("div", {
+                className: mergeClasses(classes.annotationContent, layout === null || layout === void 0 ? void 0 : layout.className, (_annotation_style19 = annotation.style) === null || _annotation_style19 === void 0 ? void 0 : _annotation_style19.className),
+                style: contentStyle
+            }, renderSimpleMarkup(annotationMarkupNodes, `${key}-measurement`))));
+        }
+        var _annotation_accessibility_role, _annotation_accessibility_ariaLabel;
+        annotationForeignObjects.push(/*#__PURE__*/ React.createElement("foreignObject", {
+            key: `${key}-annotation`,
+            x: topLeftX,
+            y: topLeftY,
+            width: width,
+            height: height,
+            className: mergeClasses(classes.annotationForeignObject),
+            "data-annotation-key": key
+        }, /*#__PURE__*/ React.createElement("div", {
+            className: mergeClasses(classes.annotation, layout === null || layout === void 0 ? void 0 : layout.className, (_annotation_style16 = annotation.style) === null || _annotation_style16 === void 0 ? void 0 : _annotation_style16.className),
+            style: containerStyle,
+            "data-annotation-key": key
+        }, /*#__PURE__*/ React.createElement("div", {
+            className: mergeClasses(classes.annotationContent, (_annotation_style17 = annotation.style) === null || _annotation_style17 === void 0 ? void 0 : _annotation_style17.className),
+            style: contentStyle,
+            role: (_annotation_accessibility_role = (_annotation_accessibility = annotation.accessibility) === null || _annotation_accessibility === void 0 ? void 0 : _annotation_accessibility.role) !== null && _annotation_accessibility_role !== void 0 ? _annotation_accessibility_role : 'note',
+            "aria-label": (_annotation_accessibility_ariaLabel = (_annotation_accessibility1 = annotation.accessibility) === null || _annotation_accessibility1 === void 0 ? void 0 : _annotation_accessibility1.ariaLabel) !== null && _annotation_accessibility_ariaLabel !== void 0 ? _annotation_accessibility_ariaLabel : annotationPlainText ? annotationPlainText : undefined,
+            "aria-describedby": (_annotation_accessibility2 = annotation.accessibility) === null || _annotation_accessibility2 === void 0 ? void 0 : _annotation_accessibility2.ariaDescribedBy,
+            "data-chart-annotation": "true",
+            "data-annotation-key": key
+        }, renderSimpleMarkup(annotationMarkupNodes, `${key}-content`)))));
+        if (annotation.connector) {
+            const { startPadding = DEFAULT_CONNECTOR_START_PADDING, endPadding = DEFAULT_CONNECTOR_END_PADDING, strokeColor = getDefaultConnectorStrokeColor(), strokeWidth = DEFAULT_CONNECTOR_STROKE_WIDTH, dashArray, arrow = DEFAULT_CONNECTOR_ARROW } = annotation.connector;
+            const dx = resolved.anchor.x - displayPoint.x;
+            const dy = resolved.anchor.y - displayPoint.y;
+            const distance = Math.sqrt(dx * dx + dy * dy) || 1;
+            const ux = dx / distance;
+            const uy = dy / distance;
+            const sizeBasis = Math.max(1, Math.min(width, height));
+            const proportionalSize = sizeBasis * ARROW_SIZE_SCALE;
+            const maxByPadding = startPadding > 0 ? startPadding * 1.25 : MAX_ARROW_SIZE;
+            const maxByDistance = distance * 0.6;
+            const markerSize = clamp(proportionalSize, MIN_ARROW_SIZE, Math.min(MAX_ARROW_SIZE, maxByPadding, maxByDistance));
+            const markerStrokeWidth = clamp(strokeWidth, 1, markerSize / 2);
+            const start = {
+                x: displayPoint.x + ux * startPadding,
+                y: displayPoint.y + uy * startPadding
+            };
+            const end = {
+                x: resolved.anchor.x - ux * endPadding,
+                y: resolved.anchor.y - uy * endPadding
+            };
+            connectors.push({
+                key: `${key}-connector`,
+                start,
+                end,
+                strokeColor,
+                strokeWidth,
+                dashArray,
+                arrow,
+                markerSize,
+                markerStrokeWidth
+            });
+        }
+    });
+    if (annotationForeignObjects.length === 0 && connectors.length === 0) {
+        return null;
+    }
+    const viewBoxWidth = context.svgRect.width || 1;
+    const viewBoxHeight = context.svgRect.height || 1;
+    const markerDefs = [];
+    const createMarkerId = (color, position, size, markerStrokeWidth)=>{
+        const id = `${idPrefix}-${position}-${markerDefs.length}`;
+        const refY = size / 2;
+        const refX = position === 'end' ? size : 0;
+        const pathEnd = `M0 0 L ${size} ${refY} L0 ${size} Z`;
+        const pathStart = `M ${size} 0 L0 ${refY} L ${size} ${size} Z`;
+        const path = position === 'end' ? pathEnd : pathStart;
+        markerDefs.push(/*#__PURE__*/ React.createElement("marker", {
+            key: id,
+            id: id,
+            markerWidth: size,
+            markerHeight: size,
+            viewBox: `0 0 ${size} ${size}`,
+            refX: refX,
+            refY: refY,
+            orient: "auto",
+            markerUnits: "userSpaceOnUse"
+        }, /*#__PURE__*/ React.createElement("path", {
+            d: path,
+            fill: color,
+            stroke: color,
+            strokeWidth: markerStrokeWidth,
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+        })));
+        return id;
+    };
+    const connectorElements = connectors.map((connector)=>{
+        let markerStart;
+        let 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 /*#__PURE__*/ 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(#${markerStart})` : undefined,
+            markerEnd: markerEnd ? `url(#${markerEnd})` : undefined
+        });
+    });
+    const shouldRenderSvg = connectors.length > 0 || annotationForeignObjects.length > 0;
+    return /*#__PURE__*/ React.createElement("div", {
+        className: classes.root,
+        role: "presentation",
+        "data-chart-annotation-layer": "true"
+    }, shouldRenderSvg && /*#__PURE__*/ React.createElement("svg", {
+        className: classes.connectorLayer,
+        width: "100%",
+        height: "100%",
+        viewBox: `0 0 ${viewBoxWidth} ${viewBoxHeight}`,
+        preserveAspectRatio: "none",
+        "data-chart-annotation-svg": "true"
+    }, markerDefs.length > 0 && /*#__PURE__*/ React.createElement("defs", null, markerDefs), connectorElements.length > 0 && /*#__PURE__*/ React.createElement("g", {
+        "aria-hidden": "true",
+        className: classes.connectorGroup
+    }, connectorElements), annotationForeignObjects), measurementElements);
+});
+ChartAnnotationLayer.displayName = 'ChartAnnotationLayer';