@fluentui/react-charting 5.24.39 → 5.25.1

package/lib-amd/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>;

package/lib-amd/components/CommonComponents/Annotations/ChartAnnotationLayer.styles.js

@@ -0,0 +1,119 @@
+define(["require", "exports", "d3-color"], function (require, exports, d3_color_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.getStyles = exports.getDefaultConnectorStrokeColor = exports.getDefaultAnnotationBackgroundColor = exports.applyOpacityToColor = exports.DEFAULT_CONNECTOR_ARROW = exports.DEFAULT_CONNECTOR_STROKE_WIDTH = exports.DEFAULT_CONNECTOR_END_PADDING = exports.DEFAULT_CONNECTOR_START_PADDING = exports.DEFAULT_ANNOTATION_PADDING = exports.DEFAULT_ANNOTATION_BACKGROUND_OPACITY = void 0;
+    exports.DEFAULT_ANNOTATION_BACKGROUND_OPACITY = 0.8;
+    exports.DEFAULT_ANNOTATION_PADDING = '4px 8px';
+    exports.DEFAULT_CONNECTOR_START_PADDING = 12;
+    exports.DEFAULT_CONNECTOR_END_PADDING = 0;
+    exports.DEFAULT_CONNECTOR_STROKE_WIDTH = 2;
+    exports.DEFAULT_CONNECTOR_ARROW = 'end';
+    var applyOpacityToColor = function (color, opacity) {
+        if (!color) {
+            return undefined;
+        }
+        var parsed = (0, d3_color_1.color)(color);
+        if (!parsed) {
+            return color;
+        }
+        parsed.opacity = Math.max(0, Math.min(1, opacity));
+        return parsed.toString();
+    };
+    exports.applyOpacityToColor = applyOpacityToColor;
+    var getDefaultAnnotationBackgroundColor = function (theme) {
+        return (0, exports.applyOpacityToColor)(theme.semanticColors.bodyBackground, exports.DEFAULT_ANNOTATION_BACKGROUND_OPACITY);
+    };
+    exports.getDefaultAnnotationBackgroundColor = getDefaultAnnotationBackgroundColor;
+    var getDefaultConnectorStrokeColor = function (theme) { return theme.palette.neutralPrimary; };
+    exports.getDefaultConnectorStrokeColor = getDefaultConnectorStrokeColor;
+    var getStyles = function (props) {
+        var theme = props.theme, className = props.className;
+        var defaultBackground = (0, exports.getDefaultAnnotationBackgroundColor)(theme);
+        var defaultTextColor = theme.semanticColors.bodyText;
+        var defaultBorderColor = theme.semanticColors.bodyDivider;
+        return {
+            root: [
+                {
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
+                    width: '100%',
+                    height: '100%',
+                    pointerEvents: 'none',
+                    overflow: 'visible',
+                    zIndex: 1,
+                },
+                className,
+            ],
+            annotation: [
+                theme.fonts.small,
+                {
+                    position: 'absolute',
+                    pointerEvents: 'none',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    textAlign: 'center',
+                    backgroundColor: defaultBackground,
+                    color: defaultTextColor,
+                    padding: exports.DEFAULT_ANNOTATION_PADDING,
+                    borderRadius: 4,
+                    boxShadow: theme.effects.elevation4,
+                    border: "1px solid ".concat(defaultBorderColor),
+                    whiteSpace: 'pre-wrap',
+                    zIndex: 2,
+                },
+            ],
+            connectorLayer: [
+                {
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    width: '100%',
+                    height: '100%',
+                    pointerEvents: 'none',
+                    overflow: 'visible',
+                },
+            ],
+            measurement: [
+                {
+                    position: 'absolute',
+                    visibility: 'hidden',
+                    pointerEvents: 'none',
+                },
+            ],
+            annotationContent: [
+                {
+                    width: '100%',
+                    height: '100%',
+                    pointerEvents: 'none',
+                },
+            ],
+            annotationForeignObject: [
+                {
+                    overflow: 'visible',
+                    pointerEvents: 'none',
+                },
+            ],
+            annotationContentInteractive: [
+                {
+                    pointerEvents: 'auto',
+                },
+            ],
+            annotationForeignObjectInteractive: [
+                {
+                    pointerEvents: 'auto',
+                },
+            ],
+            connectorGroup: [
+                {
+                    pointerEvents: 'none',
+                },
+            ],
+        };
+    };
+    exports.getStyles = getStyles;
+});
+//# sourceMappingURL=ChartAnnotationLayer.styles.js.map

package/lib-amd/components/CommonComponents/Annotations/ChartAnnotationLayer.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartAnnotationLayer.styles.js","sourceRoot":"../src/","sources":["components/CommonComponents/Annotations/ChartAnnotationLayer.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { ITheme, IStyle } from '@fluentui/react/lib/Styling';\nimport { IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';\n\nexport interface IChartAnnotationLayerStyleProps {\n  theme: ITheme;\n  className?: string;\n}\nimport { color as d3Color } from 'd3-color';\nimport { ChartAnnotationArrowHead } from '../../../types/IChartAnnotation';\n\nexport interface IChartAnnotationLayerStyles {\n  root?: IStyle;\n  annotation?: IStyle;\n  connectorLayer?: IStyle;\n  measurement?: IStyle;\n  annotationContent?: IStyle;\n  annotationForeignObject?: IStyle;\n  annotationContentInteractive?: IStyle;\n  annotationForeignObjectInteractive?: IStyle;\n  connectorGroup?: IStyle;\n}\n\nexport const DEFAULT_ANNOTATION_BACKGROUND_OPACITY = 0.8;\nexport const DEFAULT_ANNOTATION_PADDING = '4px 8px';\nexport const DEFAULT_CONNECTOR_START_PADDING = 12;\nexport const DEFAULT_CONNECTOR_END_PADDING = 0;\nexport const DEFAULT_CONNECTOR_STROKE_WIDTH = 2;\nexport const DEFAULT_CONNECTOR_ARROW: ChartAnnotationArrowHead = 'end';\n\nexport const applyOpacityToColor = (color: string | undefined, opacity: number): string | undefined => {\n  if (!color) {\n    return undefined;\n  }\n\n  const parsed = d3Color(color);\n  if (!parsed) {\n    return color;\n  }\n\n  parsed.opacity = Math.max(0, Math.min(1, opacity));\n  return parsed.toString();\n};\n\nexport const getDefaultAnnotationBackgroundColor = (theme: ITheme): string | undefined =>\n  applyOpacityToColor(theme.semanticColors.bodyBackground, DEFAULT_ANNOTATION_BACKGROUND_OPACITY);\n\nexport const getDefaultConnectorStrokeColor = (theme: ITheme): string => theme.palette.neutralPrimary;\n\nexport const getStyles: IStyleFunctionOrObject<IChartAnnotationLayerStyleProps, IChartAnnotationLayerStyles> = (\n  props: IChartAnnotationLayerStyleProps,\n) => {\n  const { theme, className } = props;\n  const defaultBackground = getDefaultAnnotationBackgroundColor(theme);\n  const defaultTextColor = theme.semanticColors.bodyText;\n  const defaultBorderColor = theme.semanticColors.bodyDivider;\n\n  return {\n    root: [\n      {\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        right: 0,\n        bottom: 0,\n        width: '100%',\n        height: '100%',\n        pointerEvents: 'none',\n        overflow: 'visible',\n        zIndex: 1,\n      },\n      className,\n    ],\n    annotation: [\n      theme.fonts.small,\n      {\n        position: 'absolute',\n        pointerEvents: 'none',\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        textAlign: 'center',\n        backgroundColor: defaultBackground,\n        color: defaultTextColor,\n        padding: DEFAULT_ANNOTATION_PADDING,\n        borderRadius: 4,\n        boxShadow: theme.effects.elevation4,\n        border: `1px solid ${defaultBorderColor}`,\n        whiteSpace: 'pre-wrap',\n        zIndex: 2,\n      },\n    ],\n    connectorLayer: [\n      {\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        width: '100%',\n        height: '100%',\n        pointerEvents: 'none',\n        overflow: 'visible',\n      },\n    ],\n    measurement: [\n      {\n        position: 'absolute',\n        visibility: 'hidden',\n        pointerEvents: 'none',\n      },\n    ],\n    annotationContent: [\n      {\n        width: '100%',\n        height: '100%',\n        pointerEvents: 'none',\n      },\n    ],\n    annotationForeignObject: [\n      {\n        overflow: 'visible',\n        pointerEvents: 'none',\n      },\n    ],\n    annotationContentInteractive: [\n      {\n        pointerEvents: 'auto',\n      },\n    ],\n    annotationForeignObjectInteractive: [\n      {\n        pointerEvents: 'auto',\n      },\n    ],\n    connectorGroup: [\n      {\n        pointerEvents: 'none',\n      },\n    ],\n  };\n};\n"]}

package/lib-amd/components/CommonComponents/Annotations/ChartAnnotationLayer.types.d.ts

@@ -0,0 +1,52 @@
+import { ITheme } from '@fluentui/react/lib/Styling';
+import { IChartAnnotation, ChartAnnotationArrowHead } from '../../../types/IChartAnnotation';
+export interface IAnnotationPoint {
+    x: number;
+    y: number;
+}
+export interface IAnnotationPlotRect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface IChartAnnotationContext {
+    /** Rectangle describing the drawable area of the chart (without margins) */
+    plotRect: IAnnotationPlotRect;
+    /** Size of the owning SVG element */
+    svgRect: {
+        width: number;
+        height: number;
+    };
+    /** Indicates if layout should be mirrored */
+    isRtl?: boolean;
+    /** Primary x scale mapping data domain to pixels */
+    xScale?: (value: any) => number;
+    /** Primary y scale mapping data domain to pixels */
+    yScalePrimary?: (value: any) => number;
+    /** Secondary y scale when present */
+    yScaleSecondary?: (value: any) => number;
+}
+export interface IChartAnnotationLayerProps {
+    annotations?: IChartAnnotation[];
+    context: IChartAnnotationContext;
+    theme: ITheme;
+    className?: string;
+}
+export interface IResolvedAnnotationPosition {
+    /** Final absolute position after applying layout and offsets */
+    point: IAnnotationPoint;
+    /** Raw anchor position before offsets (used for connectors) */
+    anchor: IAnnotationPoint;
+}
+export type ConnectorRenderData = {
+    key: string;
+    start: IAnnotationPoint;
+    end: IAnnotationPoint;
+    strokeColor: string;
+    strokeWidth: number;
+    dashArray?: string;
+    arrow: ChartAnnotationArrowHead;
+    markerSize: number;
+    markerStrokeWidth: number;
+};

package/lib-amd/components/CommonComponents/Annotations/ChartAnnotationLayer.types.js

@@ -0,0 +1,5 @@
+define(["require", "exports"], function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+});
+//# sourceMappingURL=ChartAnnotationLayer.types.js.map

package/lib-amd/components/CommonComponents/Annotations/ChartAnnotationLayer.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartAnnotationLayer.types.js","sourceRoot":"../src/","sources":["components/CommonComponents/Annotations/ChartAnnotationLayer.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ITheme } from '@fluentui/react/lib/Styling';\nimport { IChartAnnotation, ChartAnnotationArrowHead } from '../../../types/IChartAnnotation';\n\nexport interface IAnnotationPoint {\n  x: number;\n  y: number;\n}\n\nexport interface IAnnotationPlotRect {\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n}\n\nexport interface IChartAnnotationContext {\n  /** Rectangle describing the drawable area of the chart (without margins) */\n  plotRect: IAnnotationPlotRect;\n  /** Size of the owning SVG element */\n  svgRect: { width: number; height: number };\n  /** Indicates if layout should be mirrored */\n  isRtl?: boolean;\n  /** Primary x scale mapping data domain to pixels */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  xScale?: (value: any) => number;\n  /** Primary y scale mapping data domain to pixels */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  yScalePrimary?: (value: any) => number;\n  /** Secondary y scale when present */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  yScaleSecondary?: (value: any) => number;\n}\n\nexport interface IChartAnnotationLayerProps {\n  annotations?: IChartAnnotation[];\n  context: IChartAnnotationContext;\n  theme: ITheme;\n  className?: string;\n}\n\nexport interface IResolvedAnnotationPosition {\n  /** Final absolute position after applying layout and offsets */\n  point: IAnnotationPoint;\n  /** Raw anchor position before offsets (used for connectors) */\n  anchor: IAnnotationPoint;\n}\n\nexport type ConnectorRenderData = {\n  key: string;\n  start: IAnnotationPoint;\n  end: IAnnotationPoint;\n  strokeColor: string;\n  strokeWidth: number;\n  dashArray?: string;\n  arrow: ChartAnnotationArrowHead;\n  markerSize: number;\n  markerStrokeWidth: number;\n};\n"]}

package/lib-amd/components/CommonComponents/CartesianChart.base.js

@@ -1,4 +1,4 @@
-define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities", "@fluentui/react/lib/Callout", "@fluentui/react-focus", "d3-selection", "@fluentui/chart-utilities", "../../utilities/index", "../Legends/index", "../../utilities/SVGTooltipText"], function (require, exports, tslib_1, React, Utilities_1, Callout_1, react_focus_1, d3_selection_1, chart_utilities_1, index_1, index_2, SVGTooltipText_1) {
+define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities", "@fluentui/react/lib/Callout", "@fluentui/react-focus", "d3-selection", "@fluentui/chart-utilities", "../../utilities/index", "../Legends/index", "../../utilities/SVGTooltipText", "./Annotations/ChartAnnotationLayer"], function (require, exports, tslib_1, React, Utilities_1, Callout_1, react_focus_1, d3_selection_1, chart_utilities_1, index_1, index_2, SVGTooltipText_1, ChartAnnotationLayer_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.CartesianChartBase = void 0;
@@ -296,8 +296,8 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
         CartesianChartBase.prototype.render = function () {
             var _a, _b, _c, _d;
             var _this = this;
-            var _e, _f, _g, _h, _j, _k, _l, _m, _o;
-            var _p = this.props, calloutProps = _p.calloutProps, points = _p.points, chartType = _p.chartType, chartHoverProps = _p.chartHoverProps, svgFocusZoneProps = _p.svgFocusZoneProps, svgProps = _p.svgProps, culture = _p.culture, dateLocalizeOptions = _p.dateLocalizeOptions, timeFormatLocale = _p.timeFormatLocale, customDateTimeFormatter = _p.customDateTimeFormatter;
+            var _e, _f, _g, _h, _j, _k;
+            var _l = this.props, calloutProps = _l.calloutProps, points = _l.points, chartType = _l.chartType, chartHoverProps = _l.chartHoverProps, svgFocusZoneProps = _l.svgFocusZoneProps, svgProps = _l.svgProps, culture = _l.culture, dateLocalizeOptions = _l.dateLocalizeOptions, timeFormatLocale = _l.timeFormatLocale, customDateTimeFormatter = _l.customDateTimeFormatter;
             if (this.props.parentRef) {
                 this._fitParentContainer();
             }
@@ -323,36 +323,24 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
             });
             // eslint-disable-next-line @typescript-eslint/no-deprecated
             var callout = null;
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            var yScalePrimary;
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            var yScaleSecondary;
             var children = null;
             if ((this.props.enableFirstRenderOptimization && this.chartContainer) ||
                 !this.props.enableFirstRenderOptimization) {
                 this._isFirstRender = false;
-                var XAxisParams = {
-                    domainNRangeValues: this.props.getDomainNRangeValues(points, this.props.getDomainMargins ? this.props.getDomainMargins(this.state.containerWidth) : this.margins, this.state.containerWidth, chartType, this._isRtl, this.props.xAxisType, this.props.barwidth, this.props.tickValues, 
+                var XAxisParams = tslib_1.__assign({ domainNRangeValues: this.props.getDomainNRangeValues(points, this.props.getDomainMargins ? this.props.getDomainMargins(this.state.containerWidth) : this.margins, this.state.containerWidth, chartType, this._isRtl, this.props.xAxisType, this.props.barwidth, this.props.tickValues, 
                     // This is only used for Horizontal Bar Chart with Axis for y as string axis
-                    this.state.startFromX),
+                    this.state.startFromX), 
                     // FIXME: In XAxisParams, containerHeight is used by HBWA to generate vertical gridlines.
                     // Since the x-axis in HBWA is numeric, it typically doesn't require transformation.
                     // However, if transformation props are enabled, the updated _removalValueForTextTuncate
                     // will only be available in the next render, as it's set after the axis is created.
                     // Solution: Delay the creation of gridlines until after the transformation has been applied,
                     // or precompute the required height for transformed labels (_removalValueForTextTuncate).
-                    containerHeight: this.state.containerHeight - this._removalValueForTextTuncate,
-                    margins: this.margins,
-                    xAxisElement: this.xAxisElement,
-                    showRoundOffXTickValues: (_e = this.props.showRoundOffXTickValues) !== null && _e !== void 0 ? _e : true,
-                    xAxisCount: this.props.xAxisTickCount,
-                    xAxistickSize: this.props.xAxistickSize,
-                    tickPadding: this.props.tickPadding || this.props.showXAxisLablesTooltip ? 5 : 10,
-                    xAxisPadding: this.props.xAxisPadding,
-                    xAxisInnerPadding: this.props.xAxisInnerPadding,
-                    xAxisOuterPadding: this.props.xAxisOuterPadding,
-                    containerWidth: this.state.containerWidth,
-                    hideTickOverlap: this.props.hideTickOverlap,
-                    calcMaxLabelWidth: this._calcMaxLabelWidthWithTransform,
-                    tickStep: (_f = this.props.xAxis) === null || _f === void 0 ? void 0 : _f.tickStep,
-                    tick0: (_g = this.props.xAxis) === null || _g === void 0 ? void 0 : _g.tick0,
-                };
+                    containerHeight: this.state.containerHeight - this._removalValueForTextTuncate, margins: this.margins, xAxisElement: this.xAxisElement, showRoundOffXTickValues: (_e = this.props.showRoundOffXTickValues) !== null && _e !== void 0 ? _e : true, xAxisCount: this.props.xAxisTickCount, xAxistickSize: this.props.xAxistickSize, tickPadding: this.props.tickPadding || this.props.showXAxisLablesTooltip ? 5 : 10, xAxisPadding: this.props.xAxisPadding, xAxisInnerPadding: this.props.xAxisInnerPadding, xAxisOuterPadding: this.props.xAxisOuterPadding, containerWidth: this.state.containerWidth, hideTickOverlap: this.props.hideTickOverlap, calcMaxLabelWidth: this._calcMaxLabelWidthWithTransform }, this.props.xAxis);
                 /**
                  * These scales used for 2 purposes.
                  * 1. To create x and y axis
@@ -378,36 +366,17 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
                 this._xScale = xScale;
                 this._tickValues = tickValues;
                 this._transformXAxisLabels();
-                var YAxisParams = {
-                    margins: this.props.getYDomainMargins ? this.props.getYDomainMargins(this.state.containerHeight) : this.margins,
-                    containerWidth: this.state.containerWidth,
-                    containerHeight: this.state.containerHeight - this._removalValueForTextTuncate,
-                    yAxisElement: this.yAxisElement,
-                    yAxisTickFormat: this.props.yAxisTickFormat,
-                    yAxisTickCount: this.props.yAxisTickCount,
-                    yMinValue: this.props.yMinValue || 0,
-                    yMaxValue: this.props.yMaxValue || 0,
-                    tickPadding: 10,
-                    maxOfYVal: this.props.maxOfYVal,
-                    yMinMaxValues: this.props.getMinMaxOfYAxis(points, this.props.yAxisType),
+                var YAxisParams = tslib_1.__assign({ margins: this.props.getYDomainMargins ? this.props.getYDomainMargins(this.state.containerHeight) : this.margins, containerWidth: this.state.containerWidth, containerHeight: this.state.containerHeight - this._removalValueForTextTuncate, yAxisElement: this.yAxisElement, yAxisTickFormat: this.props.yAxisTickFormat, yAxisTickCount: this.props.yAxisTickCount, yMinValue: this.props.yMinValue || 0, yMaxValue: this.props.yMaxValue || 0, tickPadding: 10, maxOfYVal: this.props.maxOfYVal, yMinMaxValues: this.props.getMinMaxOfYAxis(points, this.props.yAxisType), 
                     // please note these padding default values must be consistent in here
                     // and the parent chart(HBWA/Vertical etc..) for more details refer example
                     // http://using-d3js.com/04_07_ordinal_scales.html
-                    yAxisPadding: this.props.yAxisPadding || 0,
-                    tickValues: this.props.yAxisTickValues,
-                    tickStep: (_h = this.props.yAxis) === null || _h === void 0 ? void 0 : _h.tickStep,
-                    tick0: (_j = this.props.yAxis) === null || _j === void 0 ? void 0 : _j.tick0,
-                };
+                    yAxisPadding: this.props.yAxisPadding || 0, tickValues: this.props.yAxisTickValues }, this.props.yAxis);
                 /**
                  * These scales used for 2 purposes.
                  * 1. To create x and y axis
                  * 2. To draw the graph.
                  * For area/line chart using same scales. For other charts, creating their own scales to draw the graph.
                  */
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                var yScalePrimary = void 0;
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                var yScaleSecondary = void 0;
                 var axisData = { yAxisDomainValues: [] };
                 if (this.props.yAxisType && this.props.yAxisType === index_1.YAxisType.StringAxis) {
                     yScalePrimary = this.props.createStringYAxis(YAxisParams, this.props.stringDatasetForYAxisDomain, this._isRtl, this.props.barwidth, this.props.chartType);
@@ -418,7 +387,7 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
                     // rendering the secondary y-axis. Therefore, rather than checking the secondaryYScaleOptions
                     // prop to determine whether to create a secondary y-axis, it's more appropriate to check if any
                     // data points are assigned to use the secondary y-scale.
-                    if ((_k = this.props) === null || _k === void 0 ? void 0 : _k.secondaryYScaleOptions) {
+                    if ((_f = this.props) === null || _f === void 0 ? void 0 : _f.secondaryYScaleOptions) {
                         var YAxisParamsSecondary = {
                             margins: this.margins,
                             containerWidth: this.state.containerWidth,
@@ -426,8 +395,8 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
                             yAxisElement: this.yAxisElementSecondary,
                             yAxisTickFormat: this.props.yAxisTickFormat,
                             yAxisTickCount: this.props.yAxisTickCount,
-                            yMinValue: ((_l = this.props.secondaryYScaleOptions) === null || _l === void 0 ? void 0 : _l.yMinValue) || 0,
-                            yMaxValue: (_o = (_m = this.props.secondaryYScaleOptions) === null || _m === void 0 ? void 0 : _m.yMaxValue) !== null && _o !== void 0 ? _o : 100,
+                            yMinValue: ((_g = this.props.secondaryYScaleOptions) === null || _g === void 0 ? void 0 : _g.yMinValue) || 0,
+                            yMaxValue: (_j = (_h = this.props.secondaryYScaleOptions) === null || _h === void 0 ? void 0 : _h.yMaxValue) !== null && _j !== void 0 ? _j : 100,
                             tickPadding: 10,
                             yMinMaxValues: this.props.getMinMaxOfYAxis(points, this.props.yAxisType, true),
                             yAxisPadding: this.props.yAxisPadding,
@@ -481,6 +450,27 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
                 width: this.state.containerWidth,
                 height: this.state.containerHeight,
             };
+            var startFromX = this.state.startFromX || 0;
+            var plotWidth = Math.max(0, svgDimensions.width - this.margins.left - this.margins.right - startFromX);
+            var plotHeight = Math.max(0, svgDimensions.height - this.margins.top - this.margins.bottom - this._removalValueForTextTuncate);
+            var plotRect = {
+                x: this._isRtl ? this.margins.left : this.margins.left + startFromX,
+                y: this.margins.top,
+                width: plotWidth,
+                height: plotHeight,
+            };
+            var annotations = (_k = this.props.annotations) !== null && _k !== void 0 ? _k : [];
+            var hasAnnotations = annotations.length > 0;
+            var annotationContext = hasAnnotations
+                ? {
+                    plotRect: plotRect,
+                    svgRect: svgDimensions,
+                    isRtl: this._isRtl,
+                    xScale: this._xScale,
+                    yScalePrimary: yScalePrimary,
+                    yScaleSecondary: yScaleSecondary,
+                }
+                : undefined;
             var focusDirection;
             if (this.props.focusZoneDirection === react_focus_1.FocusZoneDirection.vertical) {
                 focusDirection = this.props.focusZoneDirection;
@@ -593,7 +583,8 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
                                     : this.margins.right / 2 + this.titleMargin, ",\n                   ").concat(svgDimensions.height - this.margins.bottom - this.margins.top - this.titleMargin, ")rotate(-90)"),
                                 className: this._classNames.axisAnnotation,
                                 'aria-hidden': true,
-                            }, maxWidth: yAxisTitleMaximumAllowedHeight }, commonSvgToolTipProps))))),
+                            }, maxWidth: yAxisTitleMaximumAllowedHeight }, commonSvgToolTipProps)))),
+                    hasAnnotations && annotationContext && (React.createElement(ChartAnnotationLayer_1.ChartAnnotationLayer, { annotations: annotations, context: annotationContext, theme: this.props.theme, className: this._classNames.annotationLayer }))),
                 !this.props.hideLegend && (React.createElement("div", { ref: function (e) { return (_this.legendContainer = e); }, className: this._classNames.legendContainer }, this.props.legendBars)),
                 callout && React.createElement(React.Suspense, { fallback: React.createElement("div", null, "Loading...") }, callout)));
         };