@fluentui/react-charting 5.25.5 → 5.25.7

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

@@ -5,7 +5,7 @@ import { Callout } from '@fluentui/react/lib/Callout';
 import { FocusZone, FocusZoneDirection } from '@fluentui/react-focus';
 import { select as d3Select } from 'd3-selection';
 import { formatToLocaleString } from '@fluentui/chart-utilities';
-import { createNumericXAxis, createStringXAxis, getAccessibleDataObject, createDateXAxis, XAxisTypes, YAxisType, createWrapOfXLabels, rotateXAxisLabels, Points, pointTypes, calculateLongestLabelWidth, createYAxisLabels, ChartTypes, wrapContent, getSecureProps, truncateString, tooltipOfAxislabels, DEFAULT_WRAP_WIDTH, } from '../../utilities/index';
+import { createNumericXAxis, createStringXAxis, getAccessibleDataObject, createDateXAxis, XAxisTypes, YAxisType, createWrapOfXLabels, rotateXAxisLabels, Points, pointTypes, calculateLongestLabelWidth, createYAxisLabels, ChartTypes, wrapContent, getSecureProps, truncateString, tooltipOfAxislabels, DEFAULT_WRAP_WIDTH, getChartTitleInlineStyles, autoLayoutXAxisLabels, } from '../../utilities/index';
 import { Shape } from '../Legends/index';
 import { SVGTooltipText } from '../../utilities/SVGTooltipText';
 import { ChartAnnotationLayer } from './Annotations/ChartAnnotationLayer';
@@ -83,8 +83,8 @@ var CartesianChartBase = /** @class */ (function (_super) {
         };
         _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 ([ChartTypes.GroupedVerticalBarChart, ChartTypes.VerticalBarChart, ChartTypes.VerticalStackedBarChart].includes(_this.props.chartType)) {
                 var minDomainMargin = 8;
                 minChartWidth += minDomainMargin * 2;
@@ -119,11 +119,11 @@ var CartesianChartBase = /** @class */ (function (_super) {
             }
             // 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 = calculateLongestLabelWidth(tickValues, ".".concat(_this._classNames.xAxis, " text"));
+                var longestLabelWidth_2 = calculateLongestLabelWidth(tickLabels, ".".concat(_this._classNames.xAxis, " text"));
                 return Math.ceil(longestLabelWidth_2);
             }
             // Case: wrapped labels
@@ -168,6 +168,7 @@ var CartesianChartBase = /** @class */ (function (_super) {
                     showXAxisLablesTooltip: _this.props.showXAxisLablesTooltip || false,
                     noOfCharsToTruncate: _this.props.noOfCharsToTruncate || 4,
                     width: maxXAxisLabelWidth,
+                    container: _this.chartContainer,
                 };
                 _this._removalValueForTextTuncate = (_b = createWrapOfXLabels(wrapLabelProps)) !== null && _b !== void 0 ? _b : 0;
             }
@@ -292,8 +293,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;
-        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();
         }
@@ -324,7 +325,7 @@ var CartesianChartBase = /** @class */ (function (_super) {
                 // 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
@@ -334,22 +335,28 @@ var CartesianChartBase = /** @class */ (function (_super) {
             // 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 XAxisTypes.NumericAxis:
-                    (_a = createNumericXAxis(XAxisParams, this.props.tickParams, this.props.chartType, culture, this.props.xScaleType), xScale = _a.xScale, tickValues = _a.tickValues);
+                    (_a = createNumericXAxis(XAxisParams, this.props.tickParams, this.props.chartType, culture, this.props.xScaleType), xScale = _a.xScale, tickValues = _a.tickValues, tickLabels = _a.tickLabels);
                     break;
                 case XAxisTypes.DateAxis:
-                    (_b = createDateXAxis(XAxisParams, this.props.tickParams, culture, dateLocalizeOptions, timeFormatLocale, customDateTimeFormatter, this.props.useUTC, this.props.chartType), xScale = _b.xScale, tickValues = _b.tickValues);
+                    (_b = 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 XAxisTypes.StringAxis:
-                    (_c = createStringXAxis(XAxisParams, this.props.tickParams, this.props.datasetForXAxisDomain, culture), xScale = _c.xScale, tickValues = _c.tickValues);
+                    (_c = createStringXAxis(XAxisParams, this.props.tickParams, this.props.datasetForXAxisDomain, culture), xScale = _c.xScale, tickValues = _c.tickValues, tickLabels = _c.tickLabels);
                     break;
                 default:
-                    (_d = createNumericXAxis(XAxisParams, this.props.tickParams, this.props.chartType, culture, this.props.xScaleType), xScale = _d.xScale, tickValues = _d.tickValues);
+                    (_d = 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 = autoLayoutXAxisLabels(tickValues, tickLabels, xScale, this.xAxisElement, this.state.containerWidth, this.chartContainer);
+            }
+            else {
+                this._transformXAxisLabels();
+            }
             var YAxisParams = __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
@@ -371,7 +378,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 ((_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,
@@ -379,8 +386,8 @@ var CartesianChartBase = /** @class */ (function (_super) {
                         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,
@@ -391,34 +398,36 @@ var CartesianChartBase = /** @class */ (function (_super) {
             }
             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 ? d3Select(this.xAxisElement).call(xScale) : null;
+                var tooltipProps = {
+                    tooltipCls: this._classNames.tooltip,
+                    id: this._tooltipId,
+                    axis: xAxisElement,
+                    container: this.chartContainer,
+                };
+                xAxisElement && 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.
                     createYAxisLabels(this.yAxisElement, yScalePrimary, this.props.noOfCharsToTruncate || 4, this.props.showYAxisLablesTooltip || false, this._isRtl);
-                var yAxisElement = d3Select(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 ? d3Select(this.yAxisElement).call(yScalePrimary) : null;
                 var ytooltipProps = {
                     tooltipCls: this._classNames.tooltip,
                     id: this._tooltipId,
                     axis: yAxisElement,
+                    container: this.chartContainer,
                 };
                 yAxisElement && tooltipOfAxislabels(ytooltipProps);
             }
@@ -441,7 +450,7 @@ var CartesianChartBase = /** @class */ (function (_super) {
             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
             ? {
@@ -520,13 +529,44 @@ var CartesianChartBase = /** @class */ (function (_super) {
                             textAnchor: 'middle',
                             'aria-hidden': true,
                         }, maxWidth: xAxisTitleMaxWidth }, commonSvgToolTipProps))),
-                    this.props.xAxisAnnotation !== undefined && this.props.xAxisAnnotation !== '' && (React.createElement(SVGTooltipText, __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, __assign({ content: _this.props.xAxisAnnotation, textProps: {
+                                    x: xPos,
+                                    y: yPos,
+                                    className: _this._classNames.axisAnnotation,
+                                    textAnchor: textAnchor,
+                                    dominantBaseline: dominantBaseline,
+                                    'aria-hidden': true,
+                                    style: 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 }),