@fluentui/react-charting 5.24.38 → 5.25.0

package/lib-commonjs/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-commonjs/components/CommonComponents/Annotations/ChartAnnotationLayer.types.js

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

package/lib-commonjs/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-commonjs/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-commonjs/components/CommonComponents/CartesianChart.base.js

@@ -11,6 +11,7 @@ var chart_utilities_1 = require("@fluentui/chart-utilities");
 var index_1 = require("../../utilities/index");
 var index_2 = require("../Legends/index");
 var SVGTooltipText_1 = require("../../utilities/SVGTooltipText");
+var ChartAnnotationLayer_1 = require("./Annotations/ChartAnnotationLayer");
 var getClassNames = (0, Utilities_1.classNamesFunction)();
 var ChartHoverCard = React.lazy(function () {
     return Promise.resolve().then(function () { return require('../../utilities/ChartHoverCard/ChartHoverCard'); }).then(function (module) { return ({ default: module.ChartHoverCard }); });
@@ -305,8 +306,8 @@ var CartesianChartBase = /** @class */ (function (_super) {
     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();
         }
@@ -332,36 +333,24 @@ var CartesianChartBase = /** @class */ (function (_super) {
         });
         // 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
@@ -387,36 +376,17 @@ var CartesianChartBase = /** @class */ (function (_super) {
             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);
@@ -427,7 +397,7 @@ var CartesianChartBase = /** @class */ (function (_super) {
                 // 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,
@@ -435,8 +405,8 @@ var CartesianChartBase = /** @class */ (function (_super) {
                         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,
@@ -490,6 +460,27 @@ var CartesianChartBase = /** @class */ (function (_super) {
             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;
@@ -602,7 +593,8 @@ var CartesianChartBase = /** @class */ (function (_super) {
                                 : 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)));
     };