@fluentui/react-charting 5.25.5 → 5.25.6

package/lib-amd/components/CommonComponents/CartesianChart.base.d.ts

@@ -28,7 +28,7 @@ export declare class CartesianChartBase extends React.Component<IModifiedCartesi
     private idForDefaultTabbableElement;
     private _reqID;
     private _isRtl;
-    private _tickValues;
+    private _tickLabels;
     private _isFirstRender;
     private _removalValueForTextTuncate;
     private _yAxisTickText;

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

@@ -76,8 +76,8 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
             };
             _this._calculateChartMinWidth = function () {
                 // Adding 10px for padding on both sides
-                var labelWidth = _this._calcMaxLabelWidthWithTransform(_this._tickValues) + 10;
-                var minChartWidth = _this.margins.left + _this.margins.right + labelWidth * (_this._tickValues.length - 1);
+                var labelWidth = _this._calcMaxLabelWidthWithTransform(_this._tickLabels) + 10;
+                var minChartWidth = _this.margins.left + _this.margins.right + labelWidth * (_this._tickLabels.length - 1);
                 if ([index_1.ChartTypes.GroupedVerticalBarChart, index_1.ChartTypes.VerticalBarChart, index_1.ChartTypes.VerticalStackedBarChart].includes(_this.props.chartType)) {
                     var minDomainMargin = 8;
                     minChartWidth += minDomainMargin * 2;
@@ -112,11 +112,11 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
                 }
                 // Case: truncated labels
                 if (_this.props.showXAxisLablesTooltip) {
-                    var tickValues = x.map(function (val) {
+                    var tickLabels = x.map(function (val) {
                         var numChars = _this.props.noOfCharsToTruncate || 4;
                         return val.toString().length > numChars ? "".concat(val.toString().slice(0, numChars), "...") : val;
                     });
-                    var longestLabelWidth_2 = (0, index_1.calculateLongestLabelWidth)(tickValues, ".".concat(_this._classNames.xAxis, " text"));
+                    var longestLabelWidth_2 = (0, index_1.calculateLongestLabelWidth)(tickLabels, ".".concat(_this._classNames.xAxis, " text"));
                     return Math.ceil(longestLabelWidth_2);
                 }
                 // Case: wrapped labels
@@ -161,6 +161,7 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
                         showXAxisLablesTooltip: _this.props.showXAxisLablesTooltip || false,
                         noOfCharsToTruncate: _this.props.noOfCharsToTruncate || 4,
                         width: maxXAxisLabelWidth,
+                        container: _this.chartContainer,
                     };
                     _this._removalValueForTextTuncate = (_b = (0, index_1.createWrapOfXLabels)(wrapLabelProps)) !== null && _b !== void 0 ? _b : 0;
                 }
@@ -285,8 +286,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;
-            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;
+            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;
             if (this.props.parentRef) {
                 this._fitParentContainer();
             }
@@ -317,7 +318,7 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
                     // 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, xMinValue: this.props.xMinValue, xMaxValue: this.props.xMaxValue }, this.props.xAxis);
+                    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.rotateXAxisLables || ((_f = this.props.xAxis) === null || _f === void 0 ? void 0 : _f.tickLayout) === 'auto' ? false : this.props.hideTickOverlap, calcMaxLabelWidth: this._calcMaxLabelWidthWithTransform, xMinValue: this.props.xMinValue, xMaxValue: this.props.xMaxValue }, this.props.xAxis);
                 /**
                  * These scales used for 2 purposes.
                  * 1. To create x and y axis
@@ -327,22 +328,28 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 var xScale = void 0;
                 var tickValues = void 0;
+                var tickLabels = void 0;
                 switch (this.props.xAxisType) {
                     case index_1.XAxisTypes.NumericAxis:
-                        (_a = (0, index_1.createNumericXAxis)(XAxisParams, this.props.tickParams, this.props.chartType, culture, this.props.xScaleType), xScale = _a.xScale, tickValues = _a.tickValues);
+                        (_a = (0, index_1.createNumericXAxis)(XAxisParams, this.props.tickParams, this.props.chartType, culture, this.props.xScaleType), xScale = _a.xScale, tickValues = _a.tickValues, tickLabels = _a.tickLabels);
                         break;
                     case index_1.XAxisTypes.DateAxis:
-                        (_b = (0, index_1.createDateXAxis)(XAxisParams, this.props.tickParams, culture, dateLocalizeOptions, timeFormatLocale, customDateTimeFormatter, this.props.useUTC, this.props.chartType), xScale = _b.xScale, tickValues = _b.tickValues);
+                        (_b = (0, index_1.createDateXAxis)(XAxisParams, this.props.tickParams, culture, dateLocalizeOptions, timeFormatLocale, customDateTimeFormatter, this.props.useUTC, this.props.chartType), xScale = _b.xScale, tickValues = _b.tickValues, tickLabels = _b.tickLabels);
                         break;
                     case index_1.XAxisTypes.StringAxis:
-                        (_c = (0, index_1.createStringXAxis)(XAxisParams, this.props.tickParams, this.props.datasetForXAxisDomain, culture), xScale = _c.xScale, tickValues = _c.tickValues);
+                        (_c = (0, index_1.createStringXAxis)(XAxisParams, this.props.tickParams, this.props.datasetForXAxisDomain, culture), xScale = _c.xScale, tickValues = _c.tickValues, tickLabels = _c.tickLabels);
                         break;
                     default:
-                        (_d = (0, index_1.createNumericXAxis)(XAxisParams, this.props.tickParams, this.props.chartType, culture, this.props.xScaleType), xScale = _d.xScale, tickValues = _d.tickValues);
+                        (_d = (0, index_1.createNumericXAxis)(XAxisParams, this.props.tickParams, this.props.chartType, culture, this.props.xScaleType), xScale = _d.xScale, tickValues = _d.tickValues, tickLabels = _d.tickLabels);
                 }
                 this._xScale = xScale;
-                this._tickValues = tickValues;
-                this._transformXAxisLabels();
+                this._tickLabels = tickLabels;
+                if (((_g = this.props.xAxis) === null || _g === void 0 ? void 0 : _g.tickLayout) === 'auto') {
+                    this._removalValueForTextTuncate = (0, index_1.autoLayoutXAxisLabels)(tickValues, tickLabels, xScale, this.xAxisElement, this.state.containerWidth, this.chartContainer);
+                }
+                else {
+                    this._transformXAxisLabels();
+                }
                 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
@@ -364,7 +371,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 ((_f = this.props) === null || _f === void 0 ? void 0 : _f.secondaryYScaleOptions) {
+                    if ((_h = this.props) === null || _h === void 0 ? void 0 : _h.secondaryYScaleOptions) {
                         var YAxisParamsSecondary = {
                             margins: this.margins,
                             containerWidth: this.state.containerWidth,
@@ -372,8 +379,8 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
                             yAxisElement: this.yAxisElementSecondary,
                             yAxisTickFormat: this.props.yAxisTickFormat,
                             yAxisTickCount: this.props.yAxisTickCount,
-                            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,
+                            yMinValue: ((_j = this.props.secondaryYScaleOptions) === null || _j === void 0 ? void 0 : _j.yMinValue) || 0,
+                            yMaxValue: (_l = (_k = this.props.secondaryYScaleOptions) === null || _k === void 0 ? void 0 : _k.yMaxValue) !== null && _l !== void 0 ? _l : 100,
                             tickPadding: 10,
                             yMinMaxValues: this.props.getMinMaxOfYAxis(points, this.props.yAxisType, true),
                             yAxisPadding: this.props.yAxisPadding,
@@ -384,34 +391,36 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
                 }
                 this._yAxisTickText = axisData.yAxisTickText;
                 this.props.getAxisData && this.props.getAxisData(axisData);
-                // Removing un wanted tooltip div from DOM, when prop not provided, for proper cleanup
-                // of unwanted DOM elements, to prevent flacky behaviour in tooltips , that might occur
-                // in creating tooltips when tooltips are enabled( as we try to recreate a tspan with this._tooltipId)
-                if (!this.props.showYAxisLablesTooltip) {
-                    try {
-                        document.getElementById(this._tooltipId) && document.getElementById(this._tooltipId).remove();
-                        //eslint-disable-next-line no-empty
-                    }
-                    catch (e) { }
+                // Removing previously created tooltips.
+                try {
+                    // eslint-disable-next-line @nx/workspace-no-restricted-globals
+                    document.getElementById(this._tooltipId) && document.getElementById(this._tooltipId).remove();
+                    // eslint-disable-next-line no-empty
+                }
+                catch (e) { }
+                // Used to display tooltip at x axis labels.
+                if (this.props.showXAxisLablesTooltip || ((_m = this.props.xAxis) === null || _m === void 0 ? void 0 : _m.tickLayout) === 'auto') {
+                    var xAxisElement = this.xAxisElement ? (0, d3_selection_1.select)(this.xAxisElement).call(xScale) : null;
+                    var tooltipProps = {
+                        tooltipCls: this._classNames.tooltip,
+                        id: this._tooltipId,
+                        axis: xAxisElement,
+                        container: this.chartContainer,
+                    };
+                    xAxisElement && (0, index_1.tooltipOfAxislabels)(tooltipProps);
                 }
                 // Used to display tooltip at y axis labels.
                 if (this.props.showYAxisLablesTooltip) {
                     // To create y axis tick values by if specified truncating the rest of the text
                     // and showing elipsis or showing the whole string,
                     yScalePrimary &&
-                        // Note: This function should be invoked within the showYAxisLablesTooltip check,
-                        // as its sole purpose is to truncate labels that exceed the noOfCharsToTruncate limit.
                         (0, index_1.createYAxisLabels)(this.yAxisElement, yScalePrimary, this.props.noOfCharsToTruncate || 4, this.props.showYAxisLablesTooltip || false, this._isRtl);
-                    var yAxisElement = (0, d3_selection_1.select)(this.yAxisElement).call(yScalePrimary);
-                    try {
-                        document.getElementById(this._tooltipId) && document.getElementById(this._tooltipId).remove();
-                        //eslint-disable-next-line no-empty
-                    }
-                    catch (e) { }
+                    var yAxisElement = this.yAxisElement ? (0, d3_selection_1.select)(this.yAxisElement).call(yScalePrimary) : null;
                     var ytooltipProps = {
                         tooltipCls: this._classNames.tooltip,
                         id: this._tooltipId,
                         axis: yAxisElement,
+                        container: this.chartContainer,
                     };
                     yAxisElement && (0, index_1.tooltipOfAxislabels)(ytooltipProps);
                 }
@@ -434,7 +443,7 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
                 width: plotWidth,
                 height: plotHeight,
             };
-            var annotations = (_k = this.props.annotations) !== null && _k !== void 0 ? _k : [];
+            var annotations = (_o = this.props.annotations) !== null && _o !== void 0 ? _o : [];
             var hasAnnotations = annotations.length > 0;
             var annotationContext = hasAnnotations
                 ? {
@@ -513,13 +522,44 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
                                 textAnchor: 'middle',
                                 'aria-hidden': true,
                             }, maxWidth: xAxisTitleMaxWidth }, commonSvgToolTipProps))),
-                        this.props.xAxisAnnotation !== undefined && this.props.xAxisAnnotation !== '' && (React.createElement(SVGTooltipText_1.SVGTooltipText, tslib_1.__assign({ content: this.props.xAxisAnnotation, textProps: {
-                                x: this.margins.left + AXIS_TITLE_PADDING + xAxisTitleMaxWidth / 2,
-                                y: VERTICAL_MARGIN_FOR_XAXIS_TITLE - AXIS_TITLE_PADDING,
-                                className: this._classNames.axisAnnotation,
-                                textAnchor: 'middle',
-                                'aria-hidden': true,
-                            }, maxWidth: xAxisTitleMaxWidth }, commonSvgToolTipProps))),
+                        this.props.xAxisAnnotation !== undefined &&
+                            this.props.xAxisAnnotation !== '' &&
+                            (function () {
+                                var _a, _b, _c, _d, _e;
+                                var _f = (_a = _this.props.titleStyles) !== null && _a !== void 0 ? _a : {}, titleFont = _f.titleFont, titleXAnchor = _f.titleXAnchor, titleYAnchor = _f.titleYAnchor, titlePad = _f.titlePad;
+                                var fontSize = typeof (titleFont === null || titleFont === void 0 ? void 0 : titleFont.size) === 'number' ? titleFont.size : 13;
+                                var padL = (_b = titlePad === null || titlePad === void 0 ? void 0 : titlePad.l) !== null && _b !== void 0 ? _b : 0;
+                                var padR = (_c = titlePad === null || titlePad === void 0 ? void 0 : titlePad.r) !== null && _c !== void 0 ? _c : 0;
+                                var padT = (_d = titlePad === null || titlePad === void 0 ? void 0 : titlePad.t) !== null && _d !== void 0 ? _d : 0;
+                                var padB = (_e = titlePad === null || titlePad === void 0 ? void 0 : titlePad.b) !== null && _e !== void 0 ? _e : 0;
+                                var xPos = (titleXAnchor === 'left'
+                                    ? _this.margins.left + AXIS_TITLE_PADDING
+                                    : titleXAnchor === 'right'
+                                        ? _this.margins.left + AXIS_TITLE_PADDING + xAxisTitleMaxWidth
+                                        : _this.margins.left + AXIS_TITLE_PADDING + xAxisTitleMaxWidth / 2) +
+                                    padL -
+                                    padR;
+                                var yPos = Math.max(fontSize + AXIS_TITLE_PADDING, VERTICAL_MARGIN_FOR_XAXIS_TITLE - AXIS_TITLE_PADDING) +
+                                    padT -
+                                    padB;
+                                var textAnchor = titleXAnchor === 'left' ? 'start' : titleXAnchor === 'right' ? 'end' : 'middle';
+                                var dominantBaseline = titleYAnchor === 'top'
+                                    ? 'hanging'
+                                    : titleYAnchor === 'bottom'
+                                        ? 'alphabetic'
+                                        : titleYAnchor === 'middle'
+                                            ? 'central'
+                                            : 'auto';
+                                return (React.createElement(SVGTooltipText_1.SVGTooltipText, tslib_1.__assign({ content: _this.props.xAxisAnnotation, textProps: {
+                                        x: xPos,
+                                        y: yPos,
+                                        className: _this._classNames.axisAnnotation,
+                                        textAnchor: textAnchor,
+                                        dominantBaseline: dominantBaseline,
+                                        'aria-hidden': true,
+                                        style: (0, index_1.getChartTitleInlineStyles)(titleFont),
+                                    }, maxWidth: xAxisTitleMaxWidth }, commonSvgToolTipProps)));
+                            })(),
                         React.createElement("g", { ref: function (e) {
                                 _this.yAxisElement = e;
                             }, id: "yAxisGElement".concat(this.idForGraph), transform: "translate(".concat(this._isRtl ? svgDimensions.width - this.margins.right : this.margins.left, ", 0)"), className: this._classNames.yAxis }),