@fluentui/react-charting 5.24.6 → 5.24.8

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

@@ -6,8 +6,6 @@ export interface ICartesianChartState {
     containerHeight: number;
     _width: number;
     _height: number;
-    isRemoveValCalculated?: boolean;
-    _removalValueForTextTuncate?: number;
     startFromX: number;
 }
 /**
@@ -32,6 +30,7 @@ export declare class CartesianChartBase extends React.Component<IModifiedCartesi
     private _tickValues;
     private titleMargin;
     private _isFirstRender;
+    private _removalValueForTextTuncate;
     private _xScale;
     private isIntegralDataset;
     private _tooltipId;
@@ -62,4 +61,6 @@ export declare class CartesianChartBase extends React.Component<IModifiedCartesi
     private _calculateChartMinWidth;
     private _getChartDescription;
     private _getAxisTitle;
+    private _calcMaxLabelWidthWithTransform;
+    private _transformXAxisLabels;
 }

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, } from '../../utilities/index';
+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 { Shape } from '../Legends/index';
 import { SVGTooltipText } from '../../utilities/SVGTooltipText';
 var getClassNames = classNamesFunction();
@@ -31,6 +31,13 @@ var CartesianChartBase = /** @class */ (function (_super) {
         _this.minLegendContainerHeight = 32;
         _this._isRtl = getRTL();
         _this._isFirstRender = true;
+        /* Used for when WrapXAxisLabels props appeared.
+         * To display the total word (space separated words), Need to have more space than usual.
+         * This height will get total height need to disaply total word.
+         * These value need to be removed from actual svg height/graph height.
+         * Defalut value is 0. And this values calculted when 'wrapXAxisLables' or 'showXAxisLablesTooltip' is true.
+         */
+        _this._removalValueForTextTuncate = 0;
         _this.isIntegralDataset = true;
         _this.calculateMaxYAxisLabelLength = function (className) {
             var formatTickLabel = function (str) {
@@ -68,43 +75,14 @@ var CartesianChartBase = /** @class */ (function (_super) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         _this._getData = function (xScale, yScalePrimary, yScaleSecondary) {
             _this.props.getGraphData &&
-                _this.props.getGraphData(xScale, yScalePrimary, _this.state.containerHeight - _this.state._removalValueForTextTuncate, _this.state.containerWidth, _this.xAxisElement, _this.yAxisElement, yScaleSecondary);
+                _this.props.getGraphData(xScale, yScalePrimary, _this.state.containerHeight - _this._removalValueForTextTuncate, _this.state.containerWidth, _this.xAxisElement, _this.yAxisElement, yScaleSecondary);
         };
         _this._onChartLeave = function () {
             _this.props.onChartMouseLeave && _this.props.onChartMouseLeave();
         };
         _this._calculateChartMinWidth = function () {
-            var labelWidth = 10; // Total padding on the left and right sides of the label
-            // Case: rotated labels
-            if (!_this.props.wrapXAxisLables &&
-                _this.props.rotateXAxisLables &&
-                _this.props.xAxisType === XAxisTypes.StringAxis) {
-                var longestLabelWidth = calculateLongestLabelWidth(_this._tickValues, ".".concat(_this._classNames.xAxis, " text"));
-                labelWidth += Math.ceil(longestLabelWidth * Math.cos(Math.PI / 4));
-            }
-            // Case: truncated labels
-            else if (_this.props.showXAxisLablesTooltip) {
-                var tickValues = _this._tickValues.map(function (val) {
-                    var numChars = _this.props.noOfCharsToTruncate || 4;
-                    return val.toString().length > numChars ? "".concat(val.toString().slice(0, numChars), "...") : val;
-                });
-                var longestLabelWidth = calculateLongestLabelWidth(tickValues, ".".concat(_this._classNames.xAxis, " text"));
-                labelWidth += Math.ceil(longestLabelWidth);
-            }
-            // Case: wrapped labels
-            else if (_this.props.wrapXAxisLables) {
-                var words_1 = [];
-                _this._tickValues.forEach(function (val) {
-                    words_1.push.apply(words_1, val.toString().split(/\s+/));
-                });
-                var longestLabelWidth = calculateLongestLabelWidth(words_1, ".".concat(_this._classNames.xAxis, " text"));
-                labelWidth += Math.max(Math.ceil(longestLabelWidth), 10);
-            }
-            // Default case
-            else {
-                var longestLabelWidth = calculateLongestLabelWidth(_this._tickValues, ".".concat(_this._classNames.xAxis, " text"));
-                labelWidth += Math.ceil(longestLabelWidth);
-            }
+            // 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);
             if ([ChartTypes.GroupedVerticalBarChart, ChartTypes.VerticalBarChart, ChartTypes.VerticalStackedBarChart].includes(_this.props.chartType)) {
                 var minDomainMargin = 8;
@@ -130,13 +108,85 @@ var CartesianChartBase = /** @class */ (function (_super) {
                             : 'values')) +
                 '. ');
         };
+        _this._calcMaxLabelWidthWithTransform = function (x) {
+            // Case: rotated labels
+            if (!_this.props.wrapXAxisLables &&
+                _this.props.rotateXAxisLables &&
+                _this.props.xAxisType === XAxisTypes.StringAxis) {
+                var longestLabelWidth_1 = calculateLongestLabelWidth(x, ".".concat(_this._classNames.xAxis, " text"));
+                return Math.ceil(longestLabelWidth_1 * Math.cos(Math.PI / 4));
+            }
+            // Case: truncated labels
+            if (_this.props.showXAxisLablesTooltip) {
+                var tickValues = 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"));
+                return Math.ceil(longestLabelWidth_2);
+            }
+            // Case: wrapped labels
+            if (_this.props.wrapXAxisLables) {
+                // FIXME: Calculate the max width of lines instead of words. This requires applying
+                // the wrapping transformation earlier to obtain the actual rendered lines.
+                var words_1 = [];
+                x.forEach(function (val) {
+                    words_1.push.apply(words_1, val.toString().split(/\s+/));
+                });
+                // This approach works well in most cases, since overflow typically occurs only when
+                // a single word exceeds the specified width — otherwise, the text will wrap as expected.
+                var longestLabelWidth_3 = calculateLongestLabelWidth(words_1, ".".concat(_this._classNames.xAxis, " text"));
+                return Math.max(Math.ceil(longestLabelWidth_3), DEFAULT_WRAP_WIDTH);
+            }
+            // Default case
+            var longestLabelWidth = calculateLongestLabelWidth(x, ".".concat(_this._classNames.xAxis, " text"));
+            return Math.ceil(longestLabelWidth);
+        };
+        _this._transformXAxisLabels = function () {
+            var _a, _b, _c;
+            _this._removalValueForTextTuncate = 0;
+            /*
+             * To enable wrapping of x axis tick values or to display complete x axis tick values,
+             * we need to calculate how much space it needed to render the text.
+             * No need to re-calculate every time the chart renders and same time need to get an update. So using setState.
+             * Required space will be calculated first time chart rendering and if any width/height of chart updated.
+             * */
+            if (_this.props.wrapXAxisLables || _this.props.showXAxisLablesTooltip) {
+                var maxXAxisLabelWidth = void 0;
+                if (_this.props.xAxisType === XAxisTypes.StringAxis) {
+                    if ((((_a = _this.props.datasetForXAxisDomain) === null || _a === void 0 ? void 0 : _a.length) || 0) > 1) {
+                        maxXAxisLabelWidth = _this._xScale.step();
+                    }
+                    else {
+                        maxXAxisLabelWidth = _this.state.containerWidth;
+                    }
+                }
+                var wrapLabelProps = {
+                    node: _this.xAxisElement,
+                    xAxis: _this._xScale,
+                    showXAxisLablesTooltip: _this.props.showXAxisLablesTooltip || false,
+                    noOfCharsToTruncate: _this.props.noOfCharsToTruncate || 4,
+                    width: maxXAxisLabelWidth,
+                };
+                _this._removalValueForTextTuncate = (_b = createWrapOfXLabels(wrapLabelProps)) !== null && _b !== void 0 ? _b : 0;
+            }
+            if (!_this.props.wrapXAxisLables &&
+                _this.props.rotateXAxisLables &&
+                _this.props.xAxisType === XAxisTypes.StringAxis) {
+                var rotateLabelProps = {
+                    node: _this.xAxisElement,
+                    xAxis: _this._xScale,
+                };
+                var rotatedHeight = (_c = rotateXAxisLabels(rotateLabelProps)) !== null && _c !== void 0 ? _c : 0;
+                // this.margins.bottom is used as padding here
+                _this._removalValueForTextTuncate = rotatedHeight + _this.margins.bottom;
+            }
+        };
         _this.state = {
             containerHeight: 0,
             containerWidth: 0,
             _width: _this.props.width || 600,
             _height: _this.props.height || 350,
-            _removalValueForTextTuncate: 0,
-            isRemoveValCalculated: true,
             startFromX: 0,
         };
         _this.idForGraph = getId('chart_');
@@ -224,23 +274,6 @@ var CartesianChartBase = /** @class */ (function (_super) {
         if (prevProps.height !== this.props.height || prevProps.width !== this.props.width) {
             this._fitParentContainer();
         }
-        if (!this.props.wrapXAxisLables &&
-            this.props.rotateXAxisLables &&
-            this.props.xAxisType === XAxisTypes.StringAxis) {
-            var rotateLabelProps = {
-                node: this.xAxisElement,
-                xAxis: this._xScale,
-            };
-            var rotatedHeight = rotateXAxisLabels(rotateLabelProps);
-            if (this.state.isRemoveValCalculated &&
-                this.state._removalValueForTextTuncate !== rotatedHeight + this.margins.bottom &&
-                rotatedHeight > 0) {
-                this.setState({
-                    _removalValueForTextTuncate: rotatedHeight + this.margins.bottom,
-                    isRemoveValCalculated: false,
-                });
-            }
-        }
         if (chartTypesWithStringYAxis.includes(this.props.chartType) &&
             this.props.showYAxisLables &&
             this.yAxisElement &&
@@ -300,7 +333,13 @@ var CartesianChartBase = /** @class */ (function (_super) {
                 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),
-                containerHeight: this.state.containerHeight - this.state._removalValueForTextTuncate,
+                // 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,
@@ -311,27 +350,8 @@ var CartesianChartBase = /** @class */ (function (_super) {
                 xAxisInnerPadding: this.props.xAxisInnerPadding,
                 xAxisOuterPadding: this.props.xAxisOuterPadding,
                 containerWidth: this.state.containerWidth,
-                hideTickOverlap: this.props.hideTickOverlap &&
-                    !this.props.rotateXAxisLables &&
-                    !this.props.showXAxisLablesTooltip &&
-                    !this.props.wrapXAxisLables,
-            };
-            var YAxisParams = {
-                margins: this.props.getYDomainMargins ? this.props.getYDomainMargins(this.state.containerHeight) : this.margins,
-                containerWidth: this.state.containerWidth,
-                containerHeight: this.state.containerHeight - this.state._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,
+                hideTickOverlap: this.props.hideTickOverlap,
+                calcMaxLabelWidth: this._calcMaxLabelWidthWithTransform,
             };
             /**
              * These scales used for 2 purposes.
@@ -357,25 +377,24 @@ var CartesianChartBase = /** @class */ (function (_super) {
             }
             this._xScale = xScale;
             this._tickValues = tickValues;
-            /*
-             * To enable wrapping of x axis tick values or to display complete x axis tick values,
-             * we need to calculate how much space it needed to render the text.
-             * No need to re-calculate every time the chart renders and same time need to get an update. So using setState.
-             * Required space will be calculated first time chart rendering and if any width/height of chart updated.
-             * */
-            if (this.props.wrapXAxisLables || this.props.showXAxisLablesTooltip) {
-                var wrapLabelProps = {
-                    node: this.xAxisElement,
-                    xAxis: xScale,
-                    showXAxisLablesTooltip: this.props.showXAxisLablesTooltip || false,
-                    noOfCharsToTruncate: this.props.noOfCharsToTruncate || 4,
-                };
-                var temp = xScale && createWrapOfXLabels(wrapLabelProps);
-                // this value need to be updated for draw graph updated. So instead of using private value, using set state.
-                if (this.state.isRemoveValCalculated && this.state._removalValueForTextTuncate !== temp) {
-                    this.setState({ _removalValueForTextTuncate: temp, isRemoveValCalculated: false });
-                }
-            }
+            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),
+                // 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,
+            };
             /**
              * These scales used for 2 purposes.
              * 1. To create x and y axis
@@ -400,7 +419,7 @@ var CartesianChartBase = /** @class */ (function (_super) {
                     var YAxisParamsSecondary = {
                         margins: this.margins,
                         containerWidth: this.state.containerWidth,
-                        containerHeight: this.state.containerHeight - this.state._removalValueForTextTuncate,
+                        containerHeight: this.state.containerHeight - this._removalValueForTextTuncate,
                         yAxisElement: this.yAxisElementSecondary,
                         yAxisTickFormat: this.props.yAxisTickFormat,
                         yAxisTickCount: this.props.yAxisTickCount,
@@ -473,7 +492,7 @@ var CartesianChartBase = /** @class */ (function (_super) {
         var yAxisTitleMaximumAllowedHeight = svgDimensions.height -
             this.margins.bottom -
             this.margins.top -
-            this.state._removalValueForTextTuncate -
+            this._removalValueForTextTuncate -
             this.titleMargin;
         var commonSvgToolTipProps = {
             wrapContent: wrapContent,
@@ -509,7 +528,7 @@ var CartesianChartBase = /** @class */ (function (_super) {
                             _this.xAxisElement = e;
                         }, id: "xAxisGElement".concat(this.idForGraph), 
                         // To add wrap of x axis lables feature, need to remove word height from svg height.
-                        transform: "translate(0, ".concat(svgDimensions.height - this.margins.bottom - this.state._removalValueForTextTuncate, ")"), className: this._classNames.xAxis }),
+                        transform: "translate(0, ".concat(svgDimensions.height - this.margins.bottom - this._removalValueForTextTuncate, ")"), className: this._classNames.xAxis }),
                     this.props.xAxisTitle !== undefined && this.props.xAxisTitle !== '' && (React.createElement(SVGTooltipText, __assign({ content: this.props.xAxisTitle, textProps: {
                             x: this.margins.left + this.state.startFromX + xAxisTitleMaximumAllowedWidth / 2,
                             y: svgDimensions.height - this.titleMargin,
@@ -536,8 +555,7 @@ var CartesianChartBase = /** @class */ (function (_super) {
                                 ? this.margins.left + this.state.startFromX
                                 : svgDimensions.width - this.margins.right - this.state.startFromX, ", 0)"), className: this._classNames.yAxis }),
                         this.props.secondaryYAxistitle !== undefined && this.props.secondaryYAxistitle !== '' && (React.createElement(SVGTooltipText, __assign({ content: this.props.secondaryYAxistitle, textProps: {
-                                x: (yAxisTitleMaximumAllowedHeight - this.margins.bottom) / 2 +
-                                    this.state._removalValueForTextTuncate,
+                                x: (yAxisTitleMaximumAllowedHeight - this.margins.bottom) / 2 + this._removalValueForTextTuncate,
                                 y: this._isRtl
                                     ? this.state.startFromX - this.titleMargin
                                     : svgDimensions.width - this.margins.right,
@@ -550,8 +568,7 @@ var CartesianChartBase = /** @class */ (function (_super) {
                             }, maxWidth: yAxisTitleMaximumAllowedHeight }, commonSvgToolTipProps))))),
                     children,
                     this.props.yAxisTitle !== undefined && this.props.yAxisTitle !== '' && (React.createElement(SVGTooltipText, __assign({ content: this.props.yAxisTitle, textProps: {
-                            x: (yAxisTitleMaximumAllowedHeight - this.margins.bottom) / 2 +
-                                this.state._removalValueForTextTuncate,
+                            x: (yAxisTitleMaximumAllowedHeight - this.margins.bottom) / 2 + this._removalValueForTextTuncate,
                             y: this._isRtl
                                 ? svgDimensions.width - this.margins.right / 2 + this.titleMargin
                                 : this.margins.left / 2 - this.titleMargin,
@@ -563,8 +580,7 @@ var CartesianChartBase = /** @class */ (function (_super) {
                     this.props.yAxisAnnotation !== undefined &&
                         this.props.yAxisAnnotation !== '' &&
                         (this.props.secondaryYAxistitle === undefined || this.props.secondaryYAxistitle === '') && (React.createElement(SVGTooltipText, __assign({ content: this.props.yAxisAnnotation, textProps: {
-                            x: (yAxisTitleMaximumAllowedHeight - this.margins.bottom) / 2 +
-                                this.state._removalValueForTextTuncate,
+                            x: (yAxisTitleMaximumAllowedHeight - this.margins.bottom) / 2 + this._removalValueForTextTuncate,
                             y: this._isRtl
                                 ? this.state.startFromX - this.titleMargin
                                 : svgDimensions.width - this.margins.right,