@fluentui/react-charting 5.24.39 → 5.25.0

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,343 @@
+import { __assign } 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 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 decodeHtmlEntities = function (html, documentRef) {
+    var _a, _b;
+    if (!html || html.indexOf('&') === -1) {
+        return html;
+    }
+    if (!((_a = documentRef === null || documentRef === void 0 ? void 0 : documentRef.implementation) === null || _a === void 0 ? void 0 : _a.createHTMLDocument)) {
+        return html;
+    }
+    var workingDocument = documentRef.implementation.createHTMLDocument('');
+    workingDocument.body.innerHTML = html;
+    return (_b = workingDocument.body.textContent) !== null && _b !== void 0 ? _b : '';
+};
+var sanitizeAnnotationHtml = function (html) {
+    var _a, _b;
+    if (!html) {
+        return '';
+    }
+    if (typeof window === 'undefined' || !((_b = (_a = window.document) === null || _a === void 0 ? void 0 : _a.implementation) === null || _b === void 0 ? void 0 : _b.createHTMLDocument)) {
+        return html;
+    }
+    var workingDocument = window.document.implementation.createHTMLDocument('');
+    workingDocument.body.innerHTML = decodeHtmlEntities(html, window.document);
+    workingDocument.body.querySelectorAll('script, iframe, object, embed, link').forEach(function (node) { return node.remove(); });
+    workingDocument.body.querySelectorAll('*').forEach(function (node) {
+        Array.from(node.attributes).forEach(function (attr) {
+            if (/^on/i.test(attr.name)) {
+                node.removeAttribute(attr.name);
+            }
+        });
+    });
+    return workingDocument.body.innerHTML;
+};
+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 (annotationHtml, containerStyle, contentStyle, layoutClassName, styleClassName) {
+    return JSON.stringify({
+        annotationHtml: annotationHtml,
+        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 annotationHtml = sanitizeAnnotationHtml((_b = annotation.text) !== null && _b !== void 0 ? _b : '');
+        var layout = annotation.layout;
+        var horizontalAlign = (_c = layout === null || layout === void 0 ? void 0 : layout.align) !== null && _c !== void 0 ? _c : DEFAULT_HORIZONTAL_ALIGN;
+        var verticalAlign = (_d = layout === null || layout === void 0 ? void 0 : layout.verticalAlign) !== null && _d !== void 0 ? _d : DEFAULT_VERTICAL_ALIGN;
+        var backgroundOpacity = (_f = (_e = annotation.style) === null || _e === void 0 ? void 0 : _e.opacity) !== null && _f !== void 0 ? _f : DEFAULT_ANNOTATION_BACKGROUND_OPACITY;
+        var baseBackgroundColor = (_h = (_g = annotation.style) === null || _g === void 0 ? void 0 : _g.backgroundColor) !== null && _h !== void 0 ? _h : theme.semanticColors.bodyBackground;
+        var hasCustomBackground = ((_j = annotation.style) === null || _j === void 0 ? void 0 : _j.backgroundColor) !== undefined || ((_k = annotation.style) === null || _k === void 0 ? void 0 : _k.opacity) !== undefined;
+        var containerStyle = __assign(__assign({ maxWidth: layout === null || layout === void 0 ? void 0 : layout.maxWidth }, (hasCustomBackground && {
+            backgroundColor: applyOpacityToColor(baseBackgroundColor, backgroundOpacity),
+        })), { borderColor: (_l = annotation.style) === null || _l === void 0 ? void 0 : _l.borderColor, borderWidth: (_m = annotation.style) === null || _m === void 0 ? void 0 : _m.borderWidth, borderStyle: (_p = (_o = annotation.style) === null || _o === void 0 ? void 0 : _o.borderStyle) !== null && _p !== void 0 ? _p : (((_q = annotation.style) === null || _q === void 0 ? void 0 : _q.borderColor) ? 'solid' : undefined), borderRadius: (_r = annotation.style) === null || _r === void 0 ? void 0 : _r.borderRadius, padding: (_s = annotation.style) === null || _s === void 0 ? void 0 : _s.padding, boxShadow: (_t = annotation.style) === null || _t === void 0 ? void 0 : _t.boxShadow });
+        var contentStyle = {
+            color: (_u = annotation.style) === null || _u === void 0 ? void 0 : _u.textColor,
+            fontSize: (_v = annotation.style) === null || _v === void 0 ? void 0 : _v.fontSize,
+            fontWeight: (_w = annotation.style) === null || _w === void 0 ? void 0 : _w.fontWeight,
+            opacity: 1,
+        };
+        var measurementSignature = createMeasurementSignature(annotationHtml, containerStyle, contentStyle, layout === null || layout === void 0 ? void 0 : layout.className, (_x = annotation.style) === null || _x === void 0 ? void 0 : _x.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((_z = (_y = measuredSize === null || measuredSize === void 0 ? void 0 : measuredSize.width) !== null && _y !== void 0 ? _y : layout === null || layout === void 0 ? void 0 : layout.maxWidth) !== null && _z !== void 0 ? _z : DEFAULT_FOREIGN_OBJECT_WIDTH, 1);
+        var height = Math.max((_0 = measuredSize === null || measuredSize === void 0 ? void 0 : measuredSize.height) !== null && _0 !== void 0 ? _0 : 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 : (_1 = context.svgRect.width) !== null && _1 !== void 0 ? _1 : 0;
+        var viewportHeight = usePlotBounds ? context.plotRect.height : (_2 = context.svgRect.height) !== null && _2 !== void 0 ? _2 : 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 = (_3 = annotation.connector.startPadding) !== null && _3 !== void 0 ? _3 : 12;
+            var endPadding = (_4 = annotation.connector.endPadding) !== null && _4 !== void 0 ? _4 : 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, (_5 = annotation.style) === null || _5 === void 0 ? void 0 : _5.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, (_6 = annotation.style) === null || _6 === void 0 ? void 0 : _6.className), style: contentStyle, dangerouslySetInnerHTML: { __html: annotationHtml } })));
+        }
+        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, (_7 = annotation.style) === null || _7 === void 0 ? void 0 : _7.className), style: containerStyle, "data-annotation-key": key },
+                React.createElement("div", { className: css(classNames.annotationContent, (_8 = annotation.style) === null || _8 === void 0 ? void 0 : _8.className), style: contentStyle, role: (_10 = (_9 = annotation.accessibility) === null || _9 === void 0 ? void 0 : _9.role) !== null && _10 !== void 0 ? _10 : 'note', "aria-label": (_11 = annotation.accessibility) === null || _11 === void 0 ? void 0 : _11.ariaLabel, "aria-describedby": (_12 = annotation.accessibility) === null || _12 === void 0 ? void 0 : _12.ariaDescribedBy, "data-chart-annotation": "true", "data-annotation-key": key, dangerouslySetInnerHTML: { __html: annotationHtml } }))));
+        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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChartAnnotationLayer.js","sourceRoot":"../src/","sources":["components/CommonComponents/Annotations/ChartAnnotationLayer.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { classNamesFunction, css, getId } from '@fluentui/react/lib/Utilities';\nimport { IChartAnnotation } from '../../../types/IChartAnnotation';\nimport {\n  IAnnotationPoint,\n  IChartAnnotationContext,\n  IChartAnnotationLayerProps,\n  ConnectorRenderData,\n  IResolvedAnnotationPosition,\n} from './ChartAnnotationLayer.types';\nimport {\n  applyOpacityToColor,\n  DEFAULT_ANNOTATION_BACKGROUND_OPACITY,\n  DEFAULT_CONNECTOR_ARROW,\n  DEFAULT_CONNECTOR_END_PADDING,\n  DEFAULT_CONNECTOR_START_PADDING,\n  DEFAULT_CONNECTOR_STROKE_WIDTH,\n  getDefaultConnectorStrokeColor,\n  getStyles,\n  IChartAnnotationLayerStyleProps,\n  IChartAnnotationLayerStyles,\n} from './ChartAnnotationLayer.styles';\n\nconst getClassNames = classNamesFunction<IChartAnnotationLayerStyleProps, IChartAnnotationLayerStyles>();\n\nconst DEFAULT_HORIZONTAL_ALIGN = 'center';\nconst DEFAULT_VERTICAL_ALIGN = 'middle';\nconst DEFAULT_FOREIGN_OBJECT_WIDTH = 180;\nconst DEFAULT_FOREIGN_OBJECT_HEIGHT = 60;\nconst MIN_ARROW_SIZE = 6;\nconst MAX_ARROW_SIZE = 24;\nconst ARROW_SIZE_SCALE = 0.35;\nconst getAnnotationKey = (annotation: IChartAnnotation, index: number) =>\n  annotation.id ??\n  (typeof annotation.text === 'string' || typeof annotation.text === 'number' ? String(annotation.text) : undefined) ??\n  `annotation-${index}`;\n\nconst decodeHtmlEntities = (html: string, documentRef: Document): string => {\n  if (!html || html.indexOf('&') === -1) {\n    return html;\n  }\n\n  if (!documentRef?.implementation?.createHTMLDocument) {\n    return html;\n  }\n\n  const workingDocument = documentRef.implementation.createHTMLDocument('');\n  workingDocument.body.innerHTML = html;\n  return workingDocument.body.textContent ?? '';\n};\n\nconst sanitizeAnnotationHtml = (html: string): string => {\n  if (!html) {\n    return '';\n  }\n\n  if (typeof window === 'undefined' || !window.document?.implementation?.createHTMLDocument) {\n    return html;\n  }\n\n  const workingDocument = window.document.implementation.createHTMLDocument('');\n  workingDocument.body.innerHTML = decodeHtmlEntities(html, window.document);\n\n  workingDocument.body.querySelectorAll('script, iframe, object, embed, link').forEach(node => node.remove());\n\n  workingDocument.body.querySelectorAll('*').forEach(node => {\n    Array.from(node.attributes).forEach(attr => {\n      if (/^on/i.test(attr.name)) {\n        node.removeAttribute(attr.name);\n      }\n    });\n  });\n\n  return workingDocument.body.innerHTML;\n};\n\nconst normalizeBandOffset = (\n  scale: (((value: unknown) => number) & { bandwidth?: () => number }) | undefined,\n  value: unknown,\n) => {\n  const position = scale?.(value as never);\n  if (typeof position !== 'number' || Number.isNaN(position)) {\n    return undefined;\n  }\n  if (scale && typeof scale.bandwidth === 'function') {\n    return position + scale.bandwidth() / 2;\n  }\n  return position;\n};\n\nconst clamp = (value: number, min: number, max: number) => Math.max(min, Math.min(max, value));\n\nconst createMeasurementSignature = (\n  annotationHtml: string,\n  containerStyle: React.CSSProperties,\n  contentStyle: React.CSSProperties,\n  layoutClassName?: string,\n  styleClassName?: string,\n) =>\n  JSON.stringify({\n    annotationHtml,\n    containerStyle,\n    contentStyle,\n    layoutClassName: layoutClassName ?? '',\n    styleClassName: styleClassName ?? '',\n  });\n\ntype MeasurementEntry = { width: number; height: number; signature: string };\n\nconst resolveCoordinates = (\n  annotation: IChartAnnotation,\n  context: IChartAnnotationContext,\n): IResolvedAnnotationPosition | undefined => {\n  const { coordinates, layout } = annotation;\n\n  if (!coordinates) {\n    return undefined;\n  }\n\n  const offsetX = layout?.offsetX ?? 0;\n  const offsetY = layout?.offsetY ?? 0;\n\n  const anchor: IAnnotationPoint = { x: 0, y: 0 };\n\n  switch (coordinates.type) {\n    case 'data': {\n      const { x, y, yAxis = 'primary' } = coordinates;\n      const xScale = context.xScale;\n      const yScale = yAxis === 'secondary' ? context.yScaleSecondary : context.yScalePrimary;\n      if (!xScale || !yScale) {\n        return undefined;\n      }\n      const xValue = normalizeBandOffset(xScale, x instanceof Date ? x.getTime() : x);\n      const yValue = normalizeBandOffset(yScale, y instanceof Date ? y.getTime() : y);\n      if (typeof xValue !== 'number' || typeof yValue !== 'number') {\n        return undefined;\n      }\n      anchor.x = xValue;\n      anchor.y = yValue;\n      break;\n    }\n    case 'relative': {\n      if (typeof coordinates.x !== 'number' || typeof coordinates.y !== 'number') {\n        return undefined;\n      }\n      anchor.x = context.plotRect.x + context.plotRect.width * coordinates.x;\n      anchor.y = context.plotRect.y + context.plotRect.height * coordinates.y;\n      break;\n    }\n    case 'pixel': {\n      if (typeof coordinates.x !== 'number' || typeof coordinates.y !== 'number') {\n        return undefined;\n      }\n      anchor.x = context.plotRect.x + coordinates.x;\n      anchor.y = context.plotRect.y + coordinates.y;\n      break;\n    }\n    default:\n      return undefined;\n  }\n\n  let left = anchor.x + offsetX;\n  let top = anchor.y + offsetY;\n\n  if (layout?.clipToBounds) {\n    left = clamp(left, context.plotRect.x, context.plotRect.x + context.plotRect.width);\n    top = clamp(top, context.plotRect.y, context.plotRect.y + context.plotRect.height);\n  }\n\n  return {\n    anchor,\n    point: { x: left, y: top },\n  };\n};\n\nexport const ChartAnnotationLayer: React.FC<IChartAnnotationLayerProps> = React.memo(props => {\n  const { annotations: annotationsProp, theme, context, className } = props;\n\n  const classNames = getClassNames(getStyles, { theme, className });\n  const idPrefix = React.useMemo(() => getId('chart-annotation'), []);\n\n  const [measurements, setMeasurements] = React.useState<Record<string, MeasurementEntry>>({});\n\n  const resolvedAnnotations = React.useMemo(\n    () =>\n      (annotationsProp ?? []).map((annotation, index) => ({ annotation, key: getAnnotationKey(annotation, index) })),\n    [annotationsProp],\n  );\n\n  React.useEffect(() => {\n    setMeasurements(prev => {\n      if (resolvedAnnotations.length === 0) {\n        if (Object.keys(prev).length === 0) {\n          return prev;\n        }\n        return {} as Record<string, MeasurementEntry>;\n      }\n\n      const next: Record<string, MeasurementEntry> = {};\n      resolvedAnnotations.forEach(({ key }) => {\n        if (prev[key]) {\n          next[key] = prev[key];\n        }\n      });\n\n      if (Object.keys(next).length === Object.keys(prev).length) {\n        let identical = true;\n        for (const key of Object.keys(next)) {\n          if (next[key] !== prev[key]) {\n            identical = false;\n            break;\n          }\n        }\n        if (identical) {\n          return prev;\n        }\n      }\n\n      return next;\n    });\n  }, [resolvedAnnotations]);\n\n  const updateMeasurement = React.useCallback((key: string, width: number, height: number, signature: string) => {\n    setMeasurements(prev => {\n      const prevEntry = prev[key];\n      if (\n        prevEntry &&\n        prevEntry.signature === signature &&\n        Math.abs(prevEntry.width - width) < 0.5 &&\n        Math.abs(prevEntry.height - height) < 0.5\n      ) {\n        return prev;\n      }\n\n      if (width === 0 && height === 0) {\n        return prev;\n      }\n\n      return {\n        ...prev,\n        [key]: { width, height, signature },\n      };\n    });\n  }, []);\n\n  const annotationForeignObjects: React.ReactNode[] = [];\n  const measurementElements: React.ReactNode[] = [];\n  const connectors: ConnectorRenderData[] = [];\n\n  resolvedAnnotations.forEach(({ annotation, key }) => {\n    const resolved = resolveCoordinates(annotation, context);\n    if (!resolved) {\n      return;\n    }\n\n    const annotationHtml = sanitizeAnnotationHtml(annotation.text ?? '');\n\n    const layout = annotation.layout;\n    const horizontalAlign = layout?.align ?? DEFAULT_HORIZONTAL_ALIGN;\n    const verticalAlign = layout?.verticalAlign ?? DEFAULT_VERTICAL_ALIGN;\n    const backgroundOpacity = annotation.style?.opacity ?? DEFAULT_ANNOTATION_BACKGROUND_OPACITY;\n    const baseBackgroundColor = annotation.style?.backgroundColor ?? theme.semanticColors.bodyBackground;\n    const hasCustomBackground =\n      annotation.style?.backgroundColor !== undefined || annotation.style?.opacity !== undefined;\n\n    const containerStyle: React.CSSProperties = {\n      maxWidth: layout?.maxWidth,\n      ...(hasCustomBackground && {\n        backgroundColor: applyOpacityToColor(baseBackgroundColor, backgroundOpacity),\n      }),\n      borderColor: annotation.style?.borderColor,\n      borderWidth: annotation.style?.borderWidth,\n      borderStyle: annotation.style?.borderStyle ?? (annotation.style?.borderColor ? 'solid' : undefined),\n      borderRadius: annotation.style?.borderRadius,\n      padding: annotation.style?.padding,\n      boxShadow: annotation.style?.boxShadow,\n    };\n\n    const contentStyle: React.CSSProperties = {\n      color: annotation.style?.textColor,\n      fontSize: annotation.style?.fontSize,\n      fontWeight: annotation.style?.fontWeight,\n      opacity: 1,\n    };\n\n    const measurementSignature = createMeasurementSignature(\n      annotationHtml,\n      containerStyle,\n      contentStyle,\n      layout?.className,\n      annotation.style?.className,\n    );\n    const measurementEntry = measurements[key];\n    const isMeasurementValid = measurementEntry?.signature === measurementSignature;\n    const measuredSize = isMeasurementValid ? measurementEntry : undefined;\n    const width = Math.max(measuredSize?.width ?? layout?.maxWidth ?? DEFAULT_FOREIGN_OBJECT_WIDTH, 1);\n    const height = Math.max(measuredSize?.height ?? DEFAULT_FOREIGN_OBJECT_HEIGHT, 1);\n\n    const offsetX = horizontalAlign === 'center' ? -width / 2 : horizontalAlign === 'end' ? -width : 0;\n    const offsetY = verticalAlign === 'middle' ? -height / 2 : verticalAlign === 'bottom' ? -height : 0;\n\n    const baseTopLeftX = resolved.point.x + offsetX;\n    const baseTopLeftY = resolved.point.y + offsetY;\n\n    const usePlotBounds = layout?.clipToBounds !== false;\n    const viewportX = usePlotBounds ? context.plotRect.x : 0;\n    const viewportY = usePlotBounds ? context.plotRect.y : 0;\n    const viewportWidth = usePlotBounds ? context.plotRect.width : context.svgRect.width ?? 0;\n    const viewportHeight = usePlotBounds ? context.plotRect.height : context.svgRect.height ?? 0;\n\n    const maxTopLeftX = viewportWidth > 0 ? viewportX + viewportWidth - width : baseTopLeftX;\n    const maxTopLeftY = viewportHeight > 0 ? viewportY + viewportHeight - height : baseTopLeftY;\n\n    let topLeftX = viewportWidth > 0 ? clamp(baseTopLeftX, viewportX, Math.max(viewportX, maxTopLeftX)) : baseTopLeftX;\n    let topLeftY = viewportHeight > 0 ? clamp(baseTopLeftY, viewportY, Math.max(viewportY, maxTopLeftY)) : baseTopLeftY;\n\n    let displayPoint = {\n      x: topLeftX - offsetX,\n      y: topLeftY - offsetY,\n    };\n\n    if (annotation.connector) {\n      const startPadding = annotation.connector.startPadding ?? 12;\n      const endPadding = annotation.connector.endPadding ?? 0;\n      const minArrowClearance = 6;\n      const minDistance = Math.max(startPadding + endPadding + minArrowClearance, startPadding);\n\n      const dx = displayPoint.x - resolved.anchor.x;\n      const dy = displayPoint.y - resolved.anchor.y;\n      const distance = Math.sqrt(dx * dx + dy * dy);\n\n      if (distance < minDistance) {\n        const fallbackDirection: IAnnotationPoint = { x: 0, y: -1 };\n        const ux = distance === 0 ? fallbackDirection.x : dx / distance;\n        const uy = distance === 0 ? fallbackDirection.y : dy / distance;\n\n        const desiredDisplayX = resolved.anchor.x + ux * minDistance;\n        const desiredDisplayY = resolved.anchor.y + uy * minDistance;\n\n        let desiredTopLeftX = desiredDisplayX + offsetX;\n        let desiredTopLeftY = desiredDisplayY + offsetY;\n\n        desiredTopLeftX =\n          viewportWidth > 0 ? clamp(desiredTopLeftX, viewportX, Math.max(viewportX, maxTopLeftX)) : desiredTopLeftX;\n        desiredTopLeftY =\n          viewportHeight > 0 ? clamp(desiredTopLeftY, viewportY, Math.max(viewportY, maxTopLeftY)) : desiredTopLeftY;\n\n        topLeftX = desiredTopLeftX;\n        topLeftY = desiredTopLeftY;\n        displayPoint = {\n          x: topLeftX - offsetX,\n          y: topLeftY - offsetY,\n        };\n      }\n    }\n\n    const measurementStyle: React.CSSProperties = {\n      left: topLeftX,\n      top: topLeftY,\n      pointerEvents: 'none',\n      ...containerStyle,\n    };\n\n    if (!isMeasurementValid) {\n      measurementElements.push(\n        <div\n          key={`${key}-measurement`}\n          ref={node => {\n            if (node) {\n              const rect = node.getBoundingClientRect();\n              if (rect.width !== 0 || rect.height !== 0) {\n                updateMeasurement(key, rect.width, rect.height, measurementSignature);\n              }\n            }\n          }}\n          className={css(classNames.annotation, classNames.measurement, layout?.className, annotation.style?.className)}\n          style={measurementStyle}\n          aria-hidden={true}\n          data-annotation-key={key}\n          data-chart-annotation-measurement=\"true\"\n        >\n          {/* eslint-disable-next-line react/no-danger -- content sanitized via sanitizeAnnotationHtml */}\n          <div\n            className={css(classNames.annotationContent, layout?.className, annotation.style?.className)}\n            style={contentStyle}\n            dangerouslySetInnerHTML={{ __html: annotationHtml }}\n          />\n        </div>,\n      );\n    }\n\n    annotationForeignObjects.push(\n      <foreignObject\n        key={`${key}-annotation`}\n        x={topLeftX}\n        y={topLeftY}\n        width={width}\n        height={height}\n        className={css(classNames.annotationForeignObject)}\n        data-annotation-key={key}\n      >\n        <div\n          className={css(classNames.annotation, layout?.className, annotation.style?.className)}\n          style={containerStyle}\n          data-annotation-key={key}\n        >\n          {/* eslint-disable-next-line react/no-danger -- content sanitized via sanitizeAnnotationHtml */}\n          <div\n            className={css(classNames.annotationContent, annotation.style?.className)}\n            style={contentStyle}\n            role={annotation.accessibility?.role ?? 'note'}\n            aria-label={annotation.accessibility?.ariaLabel}\n            aria-describedby={annotation.accessibility?.ariaDescribedBy}\n            data-chart-annotation=\"true\"\n            data-annotation-key={key}\n            dangerouslySetInnerHTML={{ __html: annotationHtml }}\n          />\n        </div>\n      </foreignObject>,\n    );\n\n    if (annotation.connector) {\n      const {\n        startPadding = DEFAULT_CONNECTOR_START_PADDING,\n        endPadding = DEFAULT_CONNECTOR_END_PADDING,\n        strokeColor = getDefaultConnectorStrokeColor(theme),\n        strokeWidth = DEFAULT_CONNECTOR_STROKE_WIDTH,\n        dashArray,\n        arrow = DEFAULT_CONNECTOR_ARROW,\n      } = annotation.connector;\n\n      const dx = resolved.anchor.x - displayPoint.x;\n      const dy = resolved.anchor.y - displayPoint.y;\n      const distance = Math.sqrt(dx * dx + dy * dy) || 1;\n      const ux = dx / distance;\n      const uy = dy / distance;\n\n      const sizeBasis = Math.max(1, Math.min(width, height));\n      const proportionalSize = sizeBasis * ARROW_SIZE_SCALE;\n      const maxByPadding = startPadding > 0 ? startPadding * 1.25 : MAX_ARROW_SIZE;\n      const maxByDistance = distance * 0.6;\n      const markerSize = clamp(proportionalSize, MIN_ARROW_SIZE, Math.min(MAX_ARROW_SIZE, maxByPadding, maxByDistance));\n      const markerStrokeWidth = clamp(strokeWidth, 1, markerSize / 2);\n\n      const start: IAnnotationPoint = {\n        x: displayPoint.x + ux * startPadding,\n        y: displayPoint.y + uy * startPadding,\n      };\n\n      const end: IAnnotationPoint = {\n        x: resolved.anchor.x - ux * endPadding,\n        y: resolved.anchor.y - uy * endPadding,\n      };\n\n      connectors.push({\n        key: `${key}-connector`,\n        start,\n        end,\n        strokeColor,\n        strokeWidth,\n        dashArray,\n        arrow,\n        markerSize,\n        markerStrokeWidth,\n      });\n    }\n  });\n\n  if (annotationForeignObjects.length === 0 && connectors.length === 0) {\n    return null;\n  }\n\n  const viewBoxWidth = context.svgRect.width || 1;\n  const viewBoxHeight = context.svgRect.height || 1;\n\n  const markerDefs: React.ReactNode[] = [];\n\n  const createMarkerId = (color: string, position: 'start' | 'end', size: number, markerStrokeWidth: number) => {\n    const id = `${idPrefix}-${position}-${markerDefs.length}`;\n    const refY = size / 2;\n    const refX = position === 'end' ? size : 0;\n    const pathEnd = `M0 0 L ${size} ${refY} L0 ${size} Z`;\n    const pathStart = `M ${size} 0 L0 ${refY} L ${size} ${size} Z`;\n    const path = position === 'end' ? pathEnd : pathStart;\n\n    markerDefs.push(\n      <marker\n        key={id}\n        id={id}\n        markerWidth={size}\n        markerHeight={size}\n        viewBox={`0 0 ${size} ${size}`}\n        refX={refX}\n        refY={refY}\n        orient=\"auto\"\n        markerUnits=\"userSpaceOnUse\"\n      >\n        <path\n          d={path}\n          fill={color}\n          stroke={color}\n          strokeWidth={markerStrokeWidth}\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n        />\n      </marker>,\n    );\n\n    return id;\n  };\n\n  const connectorElements = connectors.map(connector => {\n    let markerStart: string | undefined;\n    let markerEnd: string | undefined;\n\n    if (connector.arrow === 'start' || connector.arrow === 'both') {\n      markerStart = createMarkerId(connector.strokeColor, 'start', connector.markerSize, connector.markerStrokeWidth);\n    }\n    if (connector.arrow === 'end' || connector.arrow === 'both') {\n      markerEnd = createMarkerId(connector.strokeColor, 'end', connector.markerSize, connector.markerStrokeWidth);\n    }\n\n    return (\n      <line\n        key={connector.key}\n        x1={connector.start.x}\n        y1={connector.start.y}\n        x2={connector.end.x}\n        y2={connector.end.y}\n        stroke={connector.strokeColor}\n        strokeWidth={connector.strokeWidth}\n        strokeDasharray={connector.dashArray}\n        strokeLinecap=\"round\"\n        markerStart={markerStart ? `url(#${markerStart})` : undefined}\n        markerEnd={markerEnd ? `url(#${markerEnd})` : undefined}\n      />\n    );\n  });\n\n  const shouldRenderSvg = connectors.length > 0 || annotationForeignObjects.length > 0;\n  return (\n    <div className={classNames.root} role=\"presentation\" data-chart-annotation-layer=\"true\">\n      {shouldRenderSvg && (\n        <svg\n          className={classNames.connectorLayer}\n          width=\"100%\"\n          height=\"100%\"\n          viewBox={`0 0 ${viewBoxWidth} ${viewBoxHeight}`}\n          preserveAspectRatio=\"none\"\n          data-chart-annotation-svg=\"true\"\n        >\n          {markerDefs.length > 0 && <defs>{markerDefs}</defs>}\n          {connectorElements.length > 0 && (\n            <g aria-hidden=\"true\" className={classNames.connectorGroup}>\n              {connectorElements}\n            </g>\n          )}\n          {annotationForeignObjects}\n        </svg>\n      )}\n      {measurementElements}\n    </div>\n  );\n});\n\nChartAnnotationLayer.displayName = 'ChartAnnotationLayer';\n"]}

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

@@ -0,0 +1,28 @@
+import { ITheme, IStyle } from '@fluentui/react/lib/Styling';
+import { IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';
+export interface IChartAnnotationLayerStyleProps {
+    theme: ITheme;
+    className?: string;
+}
+import { ChartAnnotationArrowHead } from '../../../types/IChartAnnotation';
+export interface IChartAnnotationLayerStyles {
+    root?: IStyle;
+    annotation?: IStyle;
+    connectorLayer?: IStyle;
+    measurement?: IStyle;
+    annotationContent?: IStyle;
+    annotationForeignObject?: IStyle;
+    annotationContentInteractive?: IStyle;
+    annotationForeignObjectInteractive?: IStyle;
+    connectorGroup?: IStyle;
+}
+export declare const DEFAULT_ANNOTATION_BACKGROUND_OPACITY = 0.8;
+export declare const DEFAULT_ANNOTATION_PADDING = "4px 8px";
+export declare const DEFAULT_CONNECTOR_START_PADDING = 12;
+export declare const DEFAULT_CONNECTOR_END_PADDING = 0;
+export declare const DEFAULT_CONNECTOR_STROKE_WIDTH = 2;
+export declare const DEFAULT_CONNECTOR_ARROW: ChartAnnotationArrowHead;
+export declare const applyOpacityToColor: (color: string | undefined, opacity: number) => string | undefined;
+export declare const getDefaultAnnotationBackgroundColor: (theme: ITheme) => string | undefined;
+export declare const getDefaultConnectorStrokeColor: (theme: ITheme) => string;
+export declare const getStyles: IStyleFunctionOrObject<IChartAnnotationLayerStyleProps, IChartAnnotationLayerStyles>;