@fluentui/react-charting 5.24.38 → 5.25.0

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.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { IModifiedCartesianChartProps } from '../../index';
 import { IChart } from '../../types/index';
+import type { JSXElement } from '@fluentui/utilities';
 export interface ICartesianChartState {
     containerWidth: number;
     containerHeight: number;
@@ -39,7 +40,7 @@ export declare class CartesianChartBase extends React.Component<IModifiedCartesi
     componentWillUnmount(): void;
     componentDidUpdate(prevProps: IModifiedCartesianChartProps): void;
     calculateMaxYAxisLabelLength: (className: string) => number;
-    render(): JSX.Element;
+    render(): JSXElement;
     /**
      * Dedicated function to return the Callout JSX Element , which can further be used to only call this when
      * only the calloutprops and charthover props changes.

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)));
         };