@fluentui/react-charts 0.0.0-nightly-20250423-0405.1 → 0.0.0-nightly-20250423-1415.1

package/lib-commonjs/components/CommonComponents/CartesianChart.js

@@ -0,0 +1,484 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "CartesianChart", {
+    enumerable: true,
+    get: function() {
+        return CartesianChart;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _useCartesianChartStylesstyles = require("./useCartesianChartStyles.styles");
+const _index = require("../../utilities/index");
+const _SVGTooltipText = require("../../utilities/SVGTooltipText");
+const _ChartPopover = require("./ChartPopover");
+const _reacttabster = require("@fluentui/react-tabster");
+const CartesianChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
+    var _props_margins, _props_margins1, _props_margins2, _props_margins3, _props_margins4, _props_margins5;
+    const chartContainer = _react.useRef();
+    let legendContainer;
+    const minLegendContainerHeight = 40;
+    const xAxisElement = _react.useRef();
+    const yAxisElement = _react.useRef();
+    const yAxisElementSecondary = _react.useRef();
+    let margins;
+    const idForGraph = 'chart_';
+    let _reqID;
+    const _useRtl = (0, _index.useRtl)();
+    let _tickValues;
+    const titleMargin = 8;
+    const _isFirstRender = _react.useRef(true);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    let _xScale;
+    let isIntegralDataset = true;
+    const [containerWidth, setContainerWidth] = _react.useState(0);
+    const [containerHeight, setContainerHeight] = _react.useState(0);
+    const [isRemoveValCalculated, setIsRemoveValCalculated] = _react.useState(true);
+    const [removalValueForTextTuncate, setRemovalValueForTextTuncate] = _react.useState(0);
+    const [startFromX, setStartFromX] = _react.useState(0);
+    const [prevProps, setPrevProps] = _react.useState(null);
+    const chartTypesToCheck = [
+        _index.ChartTypes.HorizontalBarChartWithAxis,
+        _index.ChartTypes.HeatMapChart
+    ];
+    var _props_margins_top, _props_margins_bottom, _props_margins_left, _props_margins_right, _props_margins_right1, _props_margins_left1;
+    /**
+   * In RTL mode, Only graph will be rendered left/right. We need to provide left and right margins manually.
+   * So that, in RTL, left margins becomes right margins and viceversa.
+   * As graph needs to be drawn perfecty, these values consider as default values.
+   * Same margins using for all other cartesian charts. Can be accessible through 'getMargins' call back method.
+   */ // eslint-disable-next-line prefer-const
+    margins = {
+        top: (_props_margins_top = (_props_margins = props.margins) === null || _props_margins === void 0 ? void 0 : _props_margins.top) !== null && _props_margins_top !== void 0 ? _props_margins_top : 20,
+        bottom: (_props_margins_bottom = (_props_margins1 = props.margins) === null || _props_margins1 === void 0 ? void 0 : _props_margins1.bottom) !== null && _props_margins_bottom !== void 0 ? _props_margins_bottom : 35,
+        right: _useRtl ? (_props_margins_left = (_props_margins2 = props.margins) === null || _props_margins2 === void 0 ? void 0 : _props_margins2.left) !== null && _props_margins_left !== void 0 ? _props_margins_left : 40 : ((_props_margins_right = (_props_margins3 = props.margins) === null || _props_margins3 === void 0 ? void 0 : _props_margins3.right) !== null && _props_margins_right !== void 0 ? _props_margins_right : props === null || props === void 0 ? void 0 : props.secondaryYScaleOptions) ? 40 : 20,
+        left: _useRtl ? ((_props_margins_right1 = (_props_margins4 = props.margins) === null || _props_margins4 === void 0 ? void 0 : _props_margins4.right) !== null && _props_margins_right1 !== void 0 ? _props_margins_right1 : props === null || props === void 0 ? void 0 : props.secondaryYScaleOptions) ? 40 : 20 : (_props_margins_left1 = (_props_margins5 = props.margins) === null || _props_margins5 === void 0 ? void 0 : _props_margins5.left) !== null && _props_margins_left1 !== void 0 ? _props_margins_left1 : 40
+    };
+    if (props.xAxisTitle !== undefined && props.xAxisTitle !== '') {
+        var _props_margins6;
+        var _props_margins_bottom1;
+        margins.bottom = (_props_margins_bottom1 = (_props_margins6 = props.margins) === null || _props_margins6 === void 0 ? void 0 : _props_margins6.bottom) !== null && _props_margins_bottom1 !== void 0 ? _props_margins_bottom1 : 55;
+    }
+    if (props.yAxisTitle !== undefined && props.yAxisTitle !== '') {
+        var _props_margins7, _props_margins8, _props_margins9, _props_margins10;
+        var _props_margins_right2, _props_margins_left2;
+        margins.left = _useRtl ? ((_props_margins_right2 = (_props_margins7 = props.margins) === null || _props_margins7 === void 0 ? void 0 : _props_margins7.right) !== null && _props_margins_right2 !== void 0 ? _props_margins_right2 : props === null || props === void 0 ? void 0 : props.secondaryYAxistitle) ? 80 : 40 : (_props_margins_left2 = (_props_margins8 = props.margins) === null || _props_margins8 === void 0 ? void 0 : _props_margins8.left) !== null && _props_margins_left2 !== void 0 ? _props_margins_left2 : 60;
+        var _props_margins_left3, _props_margins_right3;
+        margins.right = _useRtl ? (_props_margins_left3 = (_props_margins9 = props.margins) === null || _props_margins9 === void 0 ? void 0 : _props_margins9.left) !== null && _props_margins_left3 !== void 0 ? _props_margins_left3 : 60 : ((_props_margins_right3 = (_props_margins10 = props.margins) === null || _props_margins10 === void 0 ? void 0 : _props_margins10.right) !== null && _props_margins_right3 !== void 0 ? _props_margins_right3 : props === null || props === void 0 ? void 0 : props.secondaryYAxistitle) ? 80 : 40;
+    }
+    const classes = (0, _useCartesianChartStylesstyles.useCartesianChartStyles)(props);
+    const focusAttributes = (0, _reacttabster.useFocusableGroup)();
+    const arrowAttributes = (0, _reacttabster.useArrowNavigationGroup)({
+        axis: 'horizontal'
+    });
+    // ComponentdidMount and Componentwillunmount logic
+    _react.useEffect(()=>{
+        _fitParentContainer();
+        if (props !== null) {
+            setPrevProps(props);
+        }
+        if (chartTypesToCheck.includes(props.chartType) && props.showYAxisLables && yAxisElement) {
+            const maxYAxisLabelLength = calculateMaxYAxisLabelLength(props.chartType, props.points, classes.yAxis);
+            if (startFromX !== maxYAxisLabelLength) {
+                setStartFromX(maxYAxisLabelLength);
+            }
+        } else if (startFromX !== 0) {
+            setStartFromX(0);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        isIntegralDataset = !props.points.some((point)=>point.y % 1 !== 0);
+        return ()=>{
+            cancelAnimationFrame(_reqID);
+        };
+    }, [
+        props
+    ]);
+    // ComponentDidUpdate logic
+    _react.useEffect(()=>{
+        if (prevProps) {
+            if (prevProps.height !== props.height || prevProps.width !== props.width) {
+                _fitParentContainer();
+            }
+        }
+        if (chartTypesToCheck.includes(props.chartType) && props.showYAxisLables && yAxisElement) {
+            const maxYAxisLabelLength = calculateMaxYAxisLabelLength(props.chartType, props.points, classes.yAxis);
+            if (startFromX !== maxYAxisLabelLength) {
+                setStartFromX(maxYAxisLabelLength);
+            }
+        } else if (startFromX !== 0) {
+            setStartFromX(0);
+        }
+        if (prevProps !== null && prevProps.points !== props.points) {
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+            isIntegralDataset = !props.points.some((point)=>point.y % 1 !== 0);
+        }
+    }, [
+        props,
+        prevProps
+    ]);
+    _react.useEffect(()=>{
+        if (!props.wrapXAxisLables && props.rotateXAxisLables && props.xAxisType === _index.XAxisTypes.StringAxis) {
+            const rotateLabelProps = {
+                node: xAxisElement.current,
+                xAxis: _xScale
+            };
+            const rotatedHeight = (0, _index.rotateXAxisLabels)(rotateLabelProps);
+            if (isRemoveValCalculated && removalValueForTextTuncate !== rotatedHeight + margins.bottom && rotatedHeight > 0) {
+                setRemovalValueForTextTuncate(rotatedHeight + margins.bottom);
+                setIsRemoveValCalculated(false);
+            }
+        }
+    });
+    _react.useImperativeHandle(props.componentRef, ()=>{
+        var _chartContainer_current;
+        return {
+            chartContainer: (_chartContainer_current = chartContainer.current) !== null && _chartContainer_current !== void 0 ? _chartContainer_current : null
+        };
+    }, []);
+    /**
+   * 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.
+   * @param calloutProps
+   * @param chartHoverProps
+   * @returns
+   */ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    function _generateCallout(calloutProps) {
+        return /*#__PURE__*/ _react.createElement(_ChartPopover.ChartPopover, calloutProps);
+    }
+    function calculateMaxYAxisLabelLength(chartType, points, className) {
+        if (chartType === _index.ChartTypes.HeatMapChart) {
+            var _points__data, _points_;
+            return (0, _index.calculateLongestLabelWidth)((_points_ = points[0]) === null || _points_ === void 0 ? void 0 : (_points__data = _points_.data) === null || _points__data === void 0 ? void 0 : _points__data.map((point)=>point.y), `.${className} text`);
+        } else {
+            return (0, _index.calculateLongestLabelWidth)(points === null || points === void 0 ? void 0 : points.map((point)=>point.y), `.${className} text`);
+        }
+    }
+    const { calloutProps, points, chartType, svgProps, culture, dateLocalizeOptions, timeFormatLocale, customDateTimeFormatter } = props;
+    if (props.parentRef) {
+        _fitParentContainer();
+    }
+    const margin = {
+        ...margins
+    };
+    if (chartTypesToCheck.includes(props.chartType)) {
+        if (!_useRtl) {
+            margin.left += startFromX;
+        } else {
+            margin.right += startFromX;
+        }
+    }
+    // Callback for margins to the chart
+    props.getmargins && props.getmargins(margin);
+    let callout = null;
+    let children = null;
+    if (props.enableFirstRenderOptimization && chartContainer.current || !props.enableFirstRenderOptimization) {
+        _isFirstRender.current = false;
+        const XAxisParams = {
+            domainNRangeValues: (0, _index.getDomainNRangeValues)(points, props.getDomainMargins ? props.getDomainMargins(containerWidth) : margins, containerWidth, chartType, _useRtl, props.xAxisType, props.barwidth, props.tickValues, startFromX),
+            containerHeight: containerHeight - removalValueForTextTuncate,
+            margins: margins,
+            xAxisElement: xAxisElement.current,
+            showRoundOffXTickValues: true,
+            xAxisCount: props.xAxisTickCount,
+            xAxistickSize: props.xAxistickSize,
+            tickPadding: props.tickPadding || props.showXAxisLablesTooltip ? 5 : 10,
+            xAxisPadding: props.xAxisPadding,
+            xAxisInnerPadding: props.xAxisInnerPadding,
+            xAxisOuterPadding: props.xAxisOuterPadding,
+            containerWidth: containerWidth,
+            hideTickOverlap: props.hideTickOverlap && !props.rotateXAxisLables && !props.showXAxisLablesTooltip && !props.wrapXAxisLables
+        };
+        const YAxisParams = {
+            margins: margins,
+            containerWidth: containerWidth,
+            containerHeight: containerHeight - removalValueForTextTuncate,
+            yAxisElement: yAxisElement.current,
+            yAxisTickFormat: props.yAxisTickFormat,
+            yAxisTickCount: props.yAxisTickCount,
+            yMinValue: props.yMinValue || 0,
+            yMaxValue: props.yMaxValue || 0,
+            tickPadding: 10,
+            maxOfYVal: props.maxOfYVal,
+            yMinMaxValues: (0, _index.getMinMaxOfYAxis)(points, chartType, 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: props.yAxisPadding || 0
+        };
+        /**
+     * 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
+        let xScale;
+        let tickValues;
+        switch(props.xAxisType){
+            case _index.XAxisTypes.NumericAxis:
+                ({ xScale, tickValues } = (0, _index.createNumericXAxis)(XAxisParams, props.tickParams, props.chartType, culture));
+                break;
+            case _index.XAxisTypes.DateAxis:
+                ({ xScale, tickValues } = (0, _index.createDateXAxis)(XAxisParams, props.tickParams, culture, dateLocalizeOptions, timeFormatLocale, customDateTimeFormatter, props.useUTC));
+                break;
+            case _index.XAxisTypes.StringAxis:
+                ({ xScale, tickValues } = (0, _index.createStringXAxis)(XAxisParams, props.tickParams, props.datasetForXAxisDomain, culture));
+                break;
+            default:
+                ({ xScale, tickValues } = (0, _index.createNumericXAxis)(XAxisParams, props.tickParams, props.chartType, culture));
+        }
+        _xScale = xScale;
+        _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 set
+     * Required space will be calculated first time chart rendering and if any width/height of chart updated.
+     * */ if (props.wrapXAxisLables || props.showXAxisLablesTooltip) {
+            const wrapLabelProps = {
+                node: xAxisElement.current,
+                xAxis: xScale,
+                showXAxisLablesTooltip: props.showXAxisLablesTooltip || false,
+                noOfCharsToTruncate: props.noOfCharsToTruncate || 4
+            };
+            const temp = xScale && (0, _index.createWrapOfXLabels)(wrapLabelProps);
+            // this value need to be updated for draw graph updated. So instead of using private value, using set
+            if (isRemoveValCalculated && removalValueForTextTuncate !== temp) {
+                setRemovalValueForTextTuncate(temp);
+                setIsRemoveValCalculated(false);
+            }
+        }
+        /**
+     * 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
+        let yScale;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        let yScaleSecondary;
+        const axisData = {
+            yAxisDomainValues: []
+        };
+        if (props.yAxisType && props.yAxisType === _index.YAxisType.StringAxis) {
+            yScale = (0, _index.createStringYAxis)(YAxisParams, props.stringDatasetForYAxisDomain, _useRtl, props.chartType, props.barwidth, culture);
+        } else {
+            if (props === null || props === void 0 ? void 0 : props.secondaryYScaleOptions) {
+                var _props_secondaryYScaleOptions, _props_secondaryYScaleOptions1, _props_secondaryYScaleOptions2;
+                var _props_secondaryYScaleOptions_yMaxValue, _props_secondaryYScaleOptions_yMaxValue1;
+                const YAxisParamsSecondary = {
+                    margins: margins,
+                    containerWidth: containerWidth,
+                    containerHeight: containerHeight - removalValueForTextTuncate,
+                    yAxisElement: yAxisElementSecondary.current,
+                    yAxisTickFormat: props.yAxisTickFormat,
+                    yAxisTickCount: props.yAxisTickCount,
+                    yMinValue: ((_props_secondaryYScaleOptions = props.secondaryYScaleOptions) === null || _props_secondaryYScaleOptions === void 0 ? void 0 : _props_secondaryYScaleOptions.yMinValue) || 0,
+                    yMaxValue: (_props_secondaryYScaleOptions_yMaxValue = (_props_secondaryYScaleOptions1 = props.secondaryYScaleOptions) === null || _props_secondaryYScaleOptions1 === void 0 ? void 0 : _props_secondaryYScaleOptions1.yMaxValue) !== null && _props_secondaryYScaleOptions_yMaxValue !== void 0 ? _props_secondaryYScaleOptions_yMaxValue : 100,
+                    tickPadding: 10,
+                    maxOfYVal: (_props_secondaryYScaleOptions_yMaxValue1 = (_props_secondaryYScaleOptions2 = props.secondaryYScaleOptions) === null || _props_secondaryYScaleOptions2 === void 0 ? void 0 : _props_secondaryYScaleOptions2.yMaxValue) !== null && _props_secondaryYScaleOptions_yMaxValue1 !== void 0 ? _props_secondaryYScaleOptions_yMaxValue1 : 100,
+                    yMinMaxValues: (0, _index.getMinMaxOfYAxis)(points, chartType),
+                    yAxisPadding: props.yAxisPadding
+                };
+                yScaleSecondary = (0, _index.createYAxis)(YAxisParamsSecondary, _useRtl, axisData, chartType, props.barwidth, isIntegralDataset, true, props.roundedTicks);
+            }
+            yScale = (0, _index.createYAxis)(YAxisParams, _useRtl, axisData, chartType, props.barwidth, isIntegralDataset, false, props.roundedTicks);
+        }
+        /*
+     * To create y axis tick values by if specified
+    truncating the rest of the text and showing elipsis
+    or showing the whole string,
+     * */ chartTypesToCheck.includes(props.chartType) && yScale && (0, _index.createYAxisLabels)(yAxisElement.current, yScale, props.noOfCharsToTruncate || 4, props.showYAxisLablesTooltip || false, startFromX, _useRtl);
+        // Call back to the chart.
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const _getData = (xScale, yScale)=>{
+            props.getGraphData && props.getGraphData(xScale, yScale, containerHeight - removalValueForTextTuncate, containerWidth, xAxisElement.current, yAxisElement.current);
+        };
+        props.getAxisData && props.getAxisData(axisData);
+        // Callback function for chart, returns axis
+        _getData(xScale, yScale);
+        children = props.children({
+            xScale,
+            yScale,
+            yScaleSecondary,
+            containerHeight,
+            containerWidth
+        });
+        if (!props.hideTooltip && calloutProps.isPopoverOpen) {
+            callout = _generateCallout(calloutProps);
+        }
+    }
+    const svgDimensions = {
+        width: containerWidth,
+        height: containerHeight
+    };
+    const xAxisTitleMaximumAllowedWidth = svgDimensions.width - margins.left - margins.right - startFromX;
+    const yAxisTitleMaximumAllowedHeight = svgDimensions.height - margins.bottom - margins.top - removalValueForTextTuncate - titleMargin;
+    /**
+   * When screen resizes, along with screen, chart also auto adjusted.
+   * This method used to adjust height and width of the charts.
+   */ function _fitParentContainer() {
+        //_reqID = requestAnimationFrame(() => {
+        let legendContainerHeight;
+        if (props.hideLegend) {
+            // If there is no legend, need not to allocate some space from total chart space.
+            legendContainerHeight = 0;
+        } else {
+            const legendContainerComputedStyles = legendContainer && getComputedStyle(legendContainer);
+            legendContainerHeight = (legendContainer && legendContainer.getBoundingClientRect().height || minLegendContainerHeight) + parseFloat(legendContainerComputedStyles && legendContainerComputedStyles.marginTop || '0') + parseFloat(legendContainerComputedStyles && legendContainerComputedStyles.marginBottom || '0');
+        }
+        if (props.parentRef || chartContainer.current) {
+            var _props_reflowProps;
+            const container = props.parentRef ? props.parentRef : chartContainer.current;
+            const currentContainerWidth = ((_props_reflowProps = props.reflowProps) === null || _props_reflowProps === void 0 ? void 0 : _props_reflowProps.mode) === 'min-width' && !_isFirstRender.current ? Math.max(container.getBoundingClientRect().width, _calculateChartMinWidth()) : container.getBoundingClientRect().width;
+            const currentContainerHeight = container.getBoundingClientRect().height > legendContainerHeight ? container.getBoundingClientRect().height : 350;
+            const shouldResize = containerWidth !== currentContainerWidth || containerHeight !== currentContainerHeight - legendContainerHeight;
+            if (shouldResize) {
+                setContainerWidth(currentContainerWidth);
+                setContainerHeight(currentContainerHeight - legendContainerHeight);
+            }
+        }
+    //});
+    }
+    function _onChartLeave() {
+        props.onChartMouseLeave && props.onChartMouseLeave();
+    }
+    function _calculateChartMinWidth() {
+        let labelWidth = 10; // Total padding on the left and right sides of the label
+        // Case: rotated labels
+        if (!props.wrapXAxisLables && props.rotateXAxisLables && props.xAxisType === _index.XAxisTypes.StringAxis) {
+            const longestLabelWidth = (0, _index.calculateLongestLabelWidth)(_tickValues, `.${classes.xAxis} text`);
+            labelWidth += Math.ceil(longestLabelWidth * Math.cos(Math.PI / 4));
+        } else if (props.showXAxisLablesTooltip) {
+            const tickValues = _tickValues.map((val)=>{
+                const numChars = props.noOfCharsToTruncate || 4;
+                return val.toString().length > numChars ? `${val.toString().slice(0, numChars)}...` : val;
+            });
+            const longestLabelWidth = (0, _index.calculateLongestLabelWidth)(tickValues, `.${classes.xAxis} text`);
+            labelWidth += Math.ceil(longestLabelWidth);
+        } else if (props.wrapXAxisLables) {
+            const words = [];
+            _tickValues.forEach((val)=>{
+                words.push(...val.toString().split(/\s+/));
+            });
+            const longestLabelWidth = (0, _index.calculateLongestLabelWidth)(words, `.${classes.xAxis} text`);
+            labelWidth += Math.max(Math.ceil(longestLabelWidth), 10);
+        } else {
+            const longestLabelWidth = (0, _index.calculateLongestLabelWidth)(_tickValues, `.${classes.xAxis} text`);
+            labelWidth += Math.ceil(longestLabelWidth);
+        }
+        let minChartWidth = margins.left + margins.right + labelWidth * (_tickValues.length - 1);
+        if ([
+            _index.ChartTypes.GroupedVerticalBarChart,
+            _index.ChartTypes.VerticalBarChart,
+            _index.ChartTypes.VerticalStackedBarChart
+        ].includes(props.chartType)) {
+            const minDomainMargin = 8;
+            minChartWidth += minDomainMargin * 2;
+        }
+        return minChartWidth;
+    }
+    /**
+   * We have use the {@link defaultTabbableElement } to fix
+   * the Focus not landing on chart while tabbing, instead  goes to legend.
+   * This issue is observed in Area, line chart after performance optimization done in the PR {@link https://github.com/microsoft/fluentui/pull/27721 }
+   * This issue is observed in Bar charts after the changes done by FocusZone team in the PR: {@link https://github.com/microsoft/fluentui/pull/24175 }
+   * The issue in Bar Charts(VB and VSB) is due to a {@link FocusZone } update where previously an event listener was
+   * attached on keydown to the window, so that whenever the tab key is pressed all outer FocusZone's
+   * tab-indexes are updated (an outer FocusZone is a FocusZone that is not within another one).
+   * But now after the above PR : they are attaching the
+   * listeners to the FocusZone elements instead of the window. So in the first render cycle in Bar charts
+   * bars are not created as in the first render cycle the size of the chart container is not known( or is 0)
+   * which creates bars of height 0 so instead we do not create any bars  and instead return empty fragments.
+   *
+   * We have tried 2 Approaches to fix the issue:
+   * 1. Using the {@link elementRef} property of FocusZone where we dispatch event for tab keydown
+   *    after the second render cycle which triggers an update of the tab index in FocusZone.
+   *    But this is a hacky solution and not a proper fix and also elementRef is deprecated.
+   * 2. Using the default tabbable element to fix the issue.
+   */ return /*#__PURE__*/ _react.createElement("div", {
+        id: idForGraph,
+        className: classes.root,
+        role: 'presentation',
+        ref: (rootElem)=>chartContainer.current = rootElem,
+        onMouseLeave: _onChartLeave
+    }, /*#__PURE__*/ _react.createElement("div", {
+        className: classes.chartWrapper,
+        ...focusAttributes,
+        ...arrowAttributes
+    }, _isFirstRender.current, /*#__PURE__*/ _react.createElement("svg", {
+        width: svgDimensions.width,
+        height: svgDimensions.height,
+        "aria-label": props.chartTitle,
+        style: {
+            display: 'block'
+        },
+        ...svgProps
+    }, /*#__PURE__*/ _react.createElement("g", {
+        ref: (e)=>{
+            xAxisElement.current = e;
+        },
+        id: `xAxisGElement${idForGraph}`,
+        // To add wrap of x axis lables feature, need to remove word height from svg height.
+        transform: `translate(0, ${svgDimensions.height - margins.bottom - removalValueForTextTuncate})`,
+        className: classes.xAxis
+    }), props.xAxisTitle !== undefined && props.xAxisTitle !== '' && /*#__PURE__*/ _react.createElement(_SVGTooltipText.SVGTooltipText, {
+        content: props.xAxisTitle,
+        textProps: {
+            x: margins.left + startFromX + xAxisTitleMaximumAllowedWidth / 2,
+            y: svgDimensions.height - titleMargin,
+            className: classes.axisTitle,
+            textAnchor: 'middle'
+        },
+        maxWidth: xAxisTitleMaximumAllowedWidth,
+        wrapContent: _index.wrapContent,
+        showBackground: true
+    }), /*#__PURE__*/ _react.createElement("g", {
+        ref: (e)=>{
+            yAxisElement.current = e;
+        },
+        id: `yAxisGElement${idForGraph}`,
+        transform: `translate(${_useRtl ? svgDimensions.width - margins.right - startFromX : margins.left + startFromX}, 0)`,
+        className: classes.yAxis
+    }), props.secondaryYScaleOptions && /*#__PURE__*/ _react.createElement("g", null, /*#__PURE__*/ _react.createElement("g", {
+        ref: (e)=>{
+            yAxisElementSecondary.current = e;
+        },
+        id: `yAxisGElementSecondary${idForGraph}`,
+        transform: `translate(${_useRtl ? margins.left + startFromX : svgDimensions.width - margins.right - startFromX}, 0)`,
+        className: classes.yAxis
+    }), props.secondaryYAxistitle !== undefined && props.secondaryYAxistitle !== '' && /*#__PURE__*/ _react.createElement(_SVGTooltipText.SVGTooltipText, {
+        content: props.secondaryYAxistitle,
+        textProps: {
+            x: (yAxisTitleMaximumAllowedHeight - margins.bottom) / 2 + removalValueForTextTuncate,
+            y: _useRtl ? startFromX - titleMargin : svgDimensions.width - margins.right,
+            textAnchor: 'middle',
+            transform: `translate(${_useRtl ? margins.right / 2 - titleMargin : margins.right / 2 + titleMargin},
+                 ${svgDimensions.height - margins.bottom - margins.top - titleMargin})rotate(-90)`,
+            className: classes.axisTitle
+        },
+        maxWidth: yAxisTitleMaximumAllowedHeight,
+        wrapContent: _index.wrapContent,
+        showBackground: true
+    })), children, props.yAxisTitle !== undefined && props.yAxisTitle !== '' && /*#__PURE__*/ _react.createElement(_SVGTooltipText.SVGTooltipText, {
+        content: props.yAxisTitle,
+        textProps: {
+            x: (yAxisTitleMaximumAllowedHeight - margins.bottom) / 2 + removalValueForTextTuncate,
+            y: _useRtl ? svgDimensions.width - margins.right / 2 + titleMargin : margins.left / 2 + startFromX - titleMargin,
+            textAnchor: 'middle',
+            transform: `translate(0,
+                 ${svgDimensions.height - margins.bottom - margins.top - titleMargin})rotate(-90)`,
+            className: classes.axisTitle
+        },
+        maxWidth: yAxisTitleMaximumAllowedHeight,
+        wrapContent: _index.wrapContent,
+        showBackground: true
+    }))), !props.hideLegend && /*#__PURE__*/ _react.createElement("div", {
+        ref: (e)=>legendContainer = e,
+        className: classes.legendContainer
+    }, props.legendBars), callout && /*#__PURE__*/ _react.createElement(_react.Suspense, {
+        fallback: /*#__PURE__*/ _react.createElement("div", null, "Loading...")
+    }, callout));
+});
+CartesianChart.displayName = 'CartesianChart';

package/lib-commonjs/components/CommonComponents/CartesianChart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["CartesianChart.tsx"],"sourcesContent":["import * as React from 'react';\n// eslint-disable-next-line import/no-extraneous-dependencies\nimport { ModifiedCartesianChartProps, HorizontalBarChartWithAxisDataPoint, HeatMapChartDataPoint } from '../../index';\nimport { useCartesianChartStyles } from './useCartesianChartStyles.styles';\nimport {\n  createNumericXAxis,\n  createStringXAxis,\n  IAxisData,\n  getDomainNRangeValues,\n  createDateXAxis,\n  createYAxis,\n  createStringYAxis,\n  IMargins,\n  getMinMaxOfYAxis,\n  XAxisTypes,\n  YAxisType,\n  createWrapOfXLabels,\n  rotateXAxisLabels,\n  calculateLongestLabelWidth,\n  createYAxisLabels,\n  ChartTypes,\n  wrapContent,\n  useRtl,\n} from '../../utilities/index';\nimport { SVGTooltipText } from '../../utilities/SVGTooltipText';\nimport { ChartPopover } from './ChartPopover';\nimport { useFocusableGroup, useArrowNavigationGroup } from '@fluentui/react-tabster';\n\n/**\n * Cartesian Chart component\n * {@docCategory CartesianChart}\n */\nexport const CartesianChart: React.FunctionComponent<ModifiedCartesianChartProps> = React.forwardRef<\n  HTMLDivElement,\n  ModifiedCartesianChartProps\n>((props, forwardedRef) => {\n  const chartContainer = React.useRef<HTMLDivElement>();\n  let legendContainer: HTMLDivElement;\n  const minLegendContainerHeight: number = 40;\n  const xAxisElement = React.useRef<SVGSVGElement>();\n  const yAxisElement = React.useRef<SVGSVGElement>();\n  const yAxisElementSecondary = React.useRef<SVGSVGElement>();\n  let margins: IMargins;\n  const idForGraph: string = 'chart_';\n  let _reqID: number;\n  const _useRtl: boolean = useRtl();\n  let _tickValues: (string | number)[];\n  const titleMargin: number = 8;\n  const _isFirstRender = React.useRef<boolean>(true);\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  let _xScale: any;\n  let isIntegralDataset: boolean = true;\n\n  const [containerWidth, setContainerWidth] = React.useState<number>(0);\n  const [containerHeight, setContainerHeight] = React.useState<number>(0);\n  const [isRemoveValCalculated, setIsRemoveValCalculated] = React.useState<boolean>(true);\n  const [removalValueForTextTuncate, setRemovalValueForTextTuncate] = React.useState<number>(0);\n  const [startFromX, setStartFromX] = React.useState<number>(0);\n  const [prevProps, setPrevProps] = React.useState<ModifiedCartesianChartProps | null>(null);\n\n  const chartTypesToCheck = [ChartTypes.HorizontalBarChartWithAxis, ChartTypes.HeatMapChart];\n  /**\n   * In RTL mode, Only graph will be rendered left/right. We need to provide left and right margins manually.\n   * So that, in RTL, left margins becomes right margins and viceversa.\n   * As graph needs to be drawn perfecty, these values consider as default values.\n   * Same margins using for all other cartesian charts. Can be accessible through 'getMargins' call back method.\n   */\n  // eslint-disable-next-line prefer-const\n  margins = {\n    top: props.margins?.top ?? 20,\n    bottom: props.margins?.bottom ?? 35,\n    right: _useRtl ? props.margins?.left ?? 40 : props.margins?.right ?? props?.secondaryYScaleOptions ? 40 : 20,\n    left: _useRtl ? (props.margins?.right ?? props?.secondaryYScaleOptions ? 40 : 20) : props.margins?.left ?? 40,\n  };\n  if (props.xAxisTitle !== undefined && props.xAxisTitle !== '') {\n    margins.bottom! = props.margins?.bottom ?? 55;\n  }\n  if (props.yAxisTitle !== undefined && props.yAxisTitle !== '') {\n    margins.left! = _useRtl\n      ? props.margins?.right ?? props?.secondaryYAxistitle\n        ? 80\n        : 40\n      : props.margins?.left ?? 60;\n    margins.right! = _useRtl ? props.margins?.left ?? 60 : props.margins?.right ?? props?.secondaryYAxistitle ? 80 : 40;\n  }\n\n  const classes = useCartesianChartStyles(props);\n  const focusAttributes = useFocusableGroup();\n  const arrowAttributes = useArrowNavigationGroup({ axis: 'horizontal' });\n  // ComponentdidMount and Componentwillunmount logic\n  React.useEffect(() => {\n    _fitParentContainer();\n    if (props !== null) {\n      setPrevProps(props);\n    }\n    if (chartTypesToCheck.includes(props.chartType) && props.showYAxisLables && yAxisElement) {\n      const maxYAxisLabelLength = calculateMaxYAxisLabelLength(props.chartType, props.points, classes.yAxis!);\n      if (startFromX !== maxYAxisLabelLength) {\n        setStartFromX(maxYAxisLabelLength);\n      }\n    } else if (startFromX !== 0) {\n      setStartFromX(0);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    isIntegralDataset = !props.points.some((point: { y: number }) => point.y % 1 !== 0);\n    return () => {\n      cancelAnimationFrame(_reqID);\n    };\n  }, [props]);\n\n  // ComponentDidUpdate logic\n  React.useEffect(() => {\n    if (prevProps) {\n      if (prevProps.height !== props.height || prevProps.width !== props.width) {\n        _fitParentContainer();\n      }\n    }\n    if (chartTypesToCheck.includes(props.chartType) && props.showYAxisLables && yAxisElement) {\n      const maxYAxisLabelLength = calculateMaxYAxisLabelLength(props.chartType, props.points, classes.yAxis!);\n      if (startFromX !== maxYAxisLabelLength) {\n        setStartFromX(maxYAxisLabelLength);\n      }\n    } else if (startFromX !== 0) {\n      setStartFromX(0);\n    }\n    if (prevProps !== null && prevProps.points !== props.points) {\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      isIntegralDataset = !props.points.some((point: { y: number }) => point.y % 1 !== 0);\n    }\n  }, [props, prevProps]);\n\n  React.useEffect(() => {\n    if (!props.wrapXAxisLables && props.rotateXAxisLables && props.xAxisType! === XAxisTypes.StringAxis) {\n      const rotateLabelProps = {\n        node: xAxisElement.current!,\n        xAxis: _xScale,\n      };\n      const rotatedHeight = rotateXAxisLabels(rotateLabelProps);\n\n      if (\n        isRemoveValCalculated &&\n        removalValueForTextTuncate !== rotatedHeight! + margins.bottom! &&\n        rotatedHeight! > 0\n      ) {\n        setRemovalValueForTextTuncate(rotatedHeight! + margins.bottom!);\n        setIsRemoveValCalculated(false);\n      }\n    }\n  });\n\n  React.useImperativeHandle(\n    props.componentRef,\n    () => ({\n      chartContainer: chartContainer.current ?? null,\n    }),\n    [],\n  );\n\n  /**\n   * Dedicated function to return the Callout JSX Element , which can further be used to only call this when\n   * only the calloutprops and charthover props changes.\n   * @param calloutProps\n   * @param chartHoverProps\n   * @returns\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  function _generateCallout(calloutProps: any): JSX.Element {\n    return <ChartPopover {...calloutProps} />;\n  }\n\n  function calculateMaxYAxisLabelLength(\n    chartType: ChartTypes,\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    points: any[],\n    className: string,\n  ): number {\n    if (chartType === ChartTypes.HeatMapChart) {\n      return calculateLongestLabelWidth(\n        points[0]?.data?.map((point: HeatMapChartDataPoint) => point.y),\n        `.${className} text`,\n      );\n    } else {\n      return calculateLongestLabelWidth(\n        points?.map((point: HorizontalBarChartWithAxisDataPoint) => point.y),\n        `.${className} text`,\n      );\n    }\n  }\n\n  const {\n    calloutProps,\n    points,\n    chartType,\n    svgProps,\n    culture,\n    dateLocalizeOptions,\n    timeFormatLocale,\n    customDateTimeFormatter,\n  } = props;\n  if (props.parentRef) {\n    _fitParentContainer();\n  }\n  const margin = { ...margins };\n  if (chartTypesToCheck.includes(props.chartType)) {\n    if (!_useRtl) {\n      margin.left! += startFromX;\n    } else {\n      margin.right! += startFromX;\n    }\n  }\n  // Callback for margins to the chart\n  props.getmargins && props.getmargins(margin);\n\n  let callout: JSX.Element | null = null;\n\n  let children = null;\n  if ((props.enableFirstRenderOptimization && chartContainer.current) || !props.enableFirstRenderOptimization) {\n    _isFirstRender.current = false;\n    const XAxisParams = {\n      domainNRangeValues: getDomainNRangeValues(\n        points,\n        props.getDomainMargins ? props.getDomainMargins(containerWidth) : margins,\n        containerWidth,\n        chartType,\n        _useRtl,\n        props.xAxisType,\n        props.barwidth!,\n        props.tickValues!,\n        // This is only used for Horizontal Bar Chart with Axis for y as string axis\n        startFromX,\n      ),\n      containerHeight: containerHeight - removalValueForTextTuncate!,\n      margins: margins,\n      xAxisElement: xAxisElement.current!,\n      showRoundOffXTickValues: true,\n      xAxisCount: props.xAxisTickCount,\n      xAxistickSize: props.xAxistickSize,\n      tickPadding: props.tickPadding || props.showXAxisLablesTooltip ? 5 : 10,\n      xAxisPadding: props.xAxisPadding,\n      xAxisInnerPadding: props.xAxisInnerPadding,\n      xAxisOuterPadding: props.xAxisOuterPadding,\n      containerWidth: containerWidth,\n      hideTickOverlap:\n        props.hideTickOverlap && !props.rotateXAxisLables && !props.showXAxisLablesTooltip && !props.wrapXAxisLables,\n    };\n\n    const YAxisParams = {\n      margins: margins,\n      containerWidth: containerWidth,\n      containerHeight: containerHeight - removalValueForTextTuncate!,\n      yAxisElement: yAxisElement.current,\n      yAxisTickFormat: props.yAxisTickFormat!,\n      yAxisTickCount: props.yAxisTickCount!,\n      yMinValue: props.yMinValue || 0,\n      yMaxValue: props.yMaxValue || 0,\n      tickPadding: 10,\n      maxOfYVal: props.maxOfYVal,\n      yMinMaxValues: getMinMaxOfYAxis(points, chartType, props.yAxisType),\n      // please note these padding default values must be consistent in here\n      // and the parent chart(HBWA/Vertical etc..) for more details refer example\n      // http://using-d3js.com/04_07_ordinal_scales.html\n      yAxisPadding: props.yAxisPadding || 0,\n    };\n    /**\n     * These scales used for 2 purposes.\n     * 1. To create x and y axis\n     * 2. To draw the graph.\n     * For area/line chart using same scales. For other charts, creating their own scales to draw the graph.\n     */\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    let xScale: any;\n    let tickValues: (string | number)[];\n    switch (props.xAxisType!) {\n      case XAxisTypes.NumericAxis:\n        ({ xScale, tickValues } = createNumericXAxis(XAxisParams, props.tickParams!, props.chartType, culture));\n        break;\n      case XAxisTypes.DateAxis:\n        ({ xScale, tickValues } = createDateXAxis(\n          XAxisParams,\n          props.tickParams!,\n          culture,\n          dateLocalizeOptions,\n          timeFormatLocale,\n          customDateTimeFormatter,\n          props.useUTC,\n        ));\n        break;\n      case XAxisTypes.StringAxis:\n        ({ xScale, tickValues } = createStringXAxis(\n          XAxisParams,\n          props.tickParams!,\n          props.datasetForXAxisDomain!,\n          culture,\n        ));\n        break;\n      default:\n        ({ xScale, tickValues } = createNumericXAxis(XAxisParams, props.tickParams!, props.chartType, culture));\n    }\n    _xScale = xScale;\n    _tickValues = tickValues;\n\n    /*\n     * To enable wrapping of x axis tick values or to display complete x axis tick values,\n     * we need to calculate how much space it needed to render the text.\n     * No need to re-calculate every time the chart renders and same time need to get an update. So using set\n     * Required space will be calculated first time chart rendering and if any width/height of chart updated.\n     * */\n    if (props.wrapXAxisLables || props.showXAxisLablesTooltip) {\n      const wrapLabelProps = {\n        node: xAxisElement.current!,\n        xAxis: xScale,\n        showXAxisLablesTooltip: props.showXAxisLablesTooltip || false,\n        noOfCharsToTruncate: props.noOfCharsToTruncate || 4,\n      };\n      const temp = xScale && (createWrapOfXLabels(wrapLabelProps) as number);\n      // this value need to be updated for draw graph updated. So instead of using private value, using set\n      if (isRemoveValCalculated && removalValueForTextTuncate !== temp) {\n        setRemovalValueForTextTuncate(temp);\n        setIsRemoveValCalculated(false);\n      }\n    }\n    /**\n     * These scales used for 2 purposes.\n     * 1. To create x and y axis\n     * 2. To draw the graph.\n     * For area/line chart using same scales. For other charts, creating their own scales to draw the graph.\n     */\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    let yScale: any;\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    let yScaleSecondary: any;\n    const axisData: IAxisData = { yAxisDomainValues: [] };\n    if (props.yAxisType && props.yAxisType === YAxisType.StringAxis) {\n      yScale = createStringYAxis(\n        YAxisParams,\n        props.stringDatasetForYAxisDomain!,\n        _useRtl,\n        props.chartType,\n        props.barwidth,\n        culture,\n      );\n    } else {\n      if (props?.secondaryYScaleOptions) {\n        const YAxisParamsSecondary = {\n          margins: margins,\n          containerWidth: containerWidth,\n          containerHeight: containerHeight - removalValueForTextTuncate!,\n          yAxisElement: yAxisElementSecondary.current,\n          yAxisTickFormat: props.yAxisTickFormat!,\n          yAxisTickCount: props.yAxisTickCount!,\n          yMinValue: props.secondaryYScaleOptions?.yMinValue || 0,\n          yMaxValue: props.secondaryYScaleOptions?.yMaxValue ?? 100,\n          tickPadding: 10,\n          maxOfYVal: props.secondaryYScaleOptions?.yMaxValue ?? 100,\n          yMinMaxValues: getMinMaxOfYAxis(points, chartType),\n          yAxisPadding: props.yAxisPadding,\n        };\n\n        yScaleSecondary = createYAxis(\n          YAxisParamsSecondary,\n          _useRtl,\n          axisData,\n          chartType,\n          props.barwidth!,\n          isIntegralDataset,\n          true,\n          props.roundedTicks!,\n        );\n      }\n      yScale = createYAxis(\n        YAxisParams,\n        _useRtl,\n        axisData,\n        chartType,\n        props.barwidth!,\n        isIntegralDataset,\n        false,\n        props.roundedTicks!,\n      );\n    }\n\n    /*\n     * To create y axis tick values by if specified\n    truncating the rest of the text and showing elipsis\n    or showing the whole string,\n     * */\n    chartTypesToCheck.includes(props.chartType) &&\n      yScale &&\n      createYAxisLabels(\n        yAxisElement.current!,\n        yScale,\n        props.noOfCharsToTruncate || 4,\n        props.showYAxisLablesTooltip || false,\n        startFromX,\n        _useRtl,\n      );\n\n    // Call back to the chart.\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    const _getData = (xScale: any, yScale: any) => {\n      props.getGraphData &&\n        props.getGraphData(\n          xScale,\n          yScale,\n          containerHeight - removalValueForTextTuncate!,\n          containerWidth,\n          xAxisElement.current,\n          yAxisElement.current,\n        );\n    };\n\n    props.getAxisData && props.getAxisData(axisData);\n    // Callback function for chart, returns axis\n    _getData(xScale, yScale);\n\n    children = props.children({\n      xScale,\n      yScale,\n      yScaleSecondary,\n      containerHeight,\n      containerWidth,\n    });\n\n    if (!props.hideTooltip && calloutProps!.isPopoverOpen) {\n      callout = _generateCallout(calloutProps);\n    }\n  }\n  const svgDimensions = {\n    width: containerWidth,\n    height: containerHeight,\n  };\n\n  const xAxisTitleMaximumAllowedWidth = svgDimensions.width - margins.left! - margins.right! - startFromX!;\n  const yAxisTitleMaximumAllowedHeight =\n    svgDimensions.height - margins.bottom! - margins.top! - removalValueForTextTuncate! - titleMargin;\n  /**\n   * When screen resizes, along with screen, chart also auto adjusted.\n   * This method used to adjust height and width of the charts.\n   */\n  function _fitParentContainer(): void {\n    //_reqID = requestAnimationFrame(() => {\n    let legendContainerHeight;\n    if (props.hideLegend) {\n      // If there is no legend, need not to allocate some space from total chart space.\n      legendContainerHeight = 0;\n    } else {\n      const legendContainerComputedStyles = legendContainer && getComputedStyle(legendContainer);\n      legendContainerHeight =\n        ((legendContainer && legendContainer.getBoundingClientRect().height) || minLegendContainerHeight) +\n        parseFloat((legendContainerComputedStyles && legendContainerComputedStyles.marginTop) || '0') +\n        parseFloat((legendContainerComputedStyles && legendContainerComputedStyles.marginBottom) || '0');\n    }\n    if (props.parentRef || chartContainer.current) {\n      const container = props.parentRef ? props.parentRef : chartContainer.current!;\n      const currentContainerWidth =\n        props.reflowProps?.mode === 'min-width' && !_isFirstRender.current\n          ? Math.max(container.getBoundingClientRect().width, _calculateChartMinWidth())\n          : container.getBoundingClientRect().width;\n      const currentContainerHeight =\n        container.getBoundingClientRect().height > legendContainerHeight\n          ? container.getBoundingClientRect().height\n          : 350;\n      const shouldResize =\n        containerWidth !== currentContainerWidth || containerHeight !== currentContainerHeight - legendContainerHeight;\n      if (shouldResize) {\n        setContainerWidth(currentContainerWidth);\n        setContainerHeight(currentContainerHeight - legendContainerHeight);\n      }\n    }\n    //});\n  }\n\n  function _onChartLeave(): void {\n    props.onChartMouseLeave && props.onChartMouseLeave();\n  }\n\n  function _calculateChartMinWidth(): number {\n    let labelWidth = 10; // Total padding on the left and right sides of the label\n\n    // Case: rotated labels\n    if (!props.wrapXAxisLables && props.rotateXAxisLables && props.xAxisType! === XAxisTypes.StringAxis) {\n      const longestLabelWidth = calculateLongestLabelWidth(_tickValues, `.${classes.xAxis} text`);\n      labelWidth += Math.ceil(longestLabelWidth * Math.cos(Math.PI / 4));\n    }\n    // Case: truncated labels\n    else if (props.showXAxisLablesTooltip) {\n      const tickValues = _tickValues.map(val => {\n        const numChars = props.noOfCharsToTruncate || 4;\n        return val.toString().length > numChars ? `${val.toString().slice(0, numChars)}...` : val;\n      });\n\n      const longestLabelWidth = calculateLongestLabelWidth(tickValues, `.${classes.xAxis} text`);\n      labelWidth += Math.ceil(longestLabelWidth);\n    }\n    // Case: wrapped labels\n    else if (props.wrapXAxisLables) {\n      const words: string[] = [];\n      _tickValues.forEach((val: string) => {\n        words.push(...val.toString().split(/\\s+/));\n      });\n\n      const longestLabelWidth = calculateLongestLabelWidth(words, `.${classes.xAxis} text`);\n      labelWidth += Math.max(Math.ceil(longestLabelWidth), 10);\n    }\n    // Default case\n    else {\n      const longestLabelWidth = calculateLongestLabelWidth(_tickValues, `.${classes.xAxis} text`);\n      labelWidth += Math.ceil(longestLabelWidth);\n    }\n\n    let minChartWidth = margins.left! + margins.right! + labelWidth * (_tickValues.length - 1);\n\n    if (\n      [ChartTypes.GroupedVerticalBarChart, ChartTypes.VerticalBarChart, ChartTypes.VerticalStackedBarChart].includes(\n        props.chartType,\n      )\n    ) {\n      const minDomainMargin = 8;\n      minChartWidth += minDomainMargin * 2;\n    }\n\n    return minChartWidth;\n  }\n\n  /**\n   * We have use the {@link defaultTabbableElement } to fix\n   * the Focus not landing on chart while tabbing, instead  goes to legend.\n   * This issue is observed in Area, line chart after performance optimization done in the PR {@link https://github.com/microsoft/fluentui/pull/27721 }\n   * This issue is observed in Bar charts after the changes done by FocusZone team in the PR: {@link https://github.com/microsoft/fluentui/pull/24175 }\n   * The issue in Bar Charts(VB and VSB) is due to a {@link FocusZone } update where previously an event listener was\n   * attached on keydown to the window, so that whenever the tab key is pressed all outer FocusZone's\n   * tab-indexes are updated (an outer FocusZone is a FocusZone that is not within another one).\n   * But now after the above PR : they are attaching the\n   * listeners to the FocusZone elements instead of the window. So in the first render cycle in Bar charts\n   * bars are not created as in the first render cycle the size of the chart container is not known( or is 0)\n   * which creates bars of height 0 so instead we do not create any bars  and instead return empty fragments.\n   *\n   * We have tried 2 Approaches to fix the issue:\n   * 1. Using the {@link elementRef} property of FocusZone where we dispatch event for tab keydown\n   *    after the second render cycle which triggers an update of the tab index in FocusZone.\n   *    But this is a hacky solution and not a proper fix and also elementRef is deprecated.\n   * 2. Using the default tabbable element to fix the issue.\n   */\n\n  return (\n    <div\n      id={idForGraph}\n      className={classes.root}\n      role={'presentation'}\n      ref={(rootElem: HTMLDivElement) => (chartContainer.current = rootElem)}\n      onMouseLeave={_onChartLeave}\n    >\n      <div className={classes.chartWrapper} {...focusAttributes} {...arrowAttributes}>\n        {_isFirstRender.current}\n        <svg\n          width={svgDimensions.width}\n          height={svgDimensions.height}\n          aria-label={props.chartTitle}\n          style={{ display: 'block' }}\n          {...svgProps}\n        >\n          <g\n            ref={(e: SVGSVGElement | null) => {\n              xAxisElement.current = e!;\n            }}\n            id={`xAxisGElement${idForGraph}`}\n            // To add wrap of x axis lables feature, need to remove word height from svg height.\n            transform={`translate(0, ${svgDimensions.height - margins.bottom! - removalValueForTextTuncate!})`}\n            className={classes.xAxis}\n          />\n          {props.xAxisTitle !== undefined && props.xAxisTitle !== '' && (\n            <SVGTooltipText\n              content={props.xAxisTitle}\n              textProps={{\n                x: margins.left! + startFromX + xAxisTitleMaximumAllowedWidth / 2,\n                y: svgDimensions.height - titleMargin,\n                className: classes.axisTitle!,\n                textAnchor: 'middle',\n              }}\n              maxWidth={xAxisTitleMaximumAllowedWidth}\n              wrapContent={wrapContent}\n              showBackground={true}\n            />\n          )}\n          <g\n            ref={(e: SVGSVGElement | null) => {\n              yAxisElement.current = e!;\n            }}\n            id={`yAxisGElement${idForGraph}`}\n            transform={`translate(${\n              _useRtl ? svgDimensions.width - margins.right! - startFromX : margins.left! + startFromX\n            }, 0)`}\n            className={classes.yAxis}\n          />\n          {props.secondaryYScaleOptions && (\n            <g>\n              <g\n                ref={(e: SVGSVGElement | null) => {\n                  yAxisElementSecondary.current = e!;\n                }}\n                id={`yAxisGElementSecondary${idForGraph}`}\n                transform={`translate(${\n                  _useRtl ? margins.left! + startFromX : svgDimensions.width - margins.right! - startFromX\n                }, 0)`}\n                className={classes.yAxis}\n              />\n              {props.secondaryYAxistitle !== undefined && props.secondaryYAxistitle !== '' && (\n                <SVGTooltipText\n                  content={props.secondaryYAxistitle}\n                  textProps={{\n                    x: (yAxisTitleMaximumAllowedHeight - margins.bottom!) / 2 + removalValueForTextTuncate!,\n                    y: _useRtl ? startFromX - titleMargin : svgDimensions.width - margins.right!,\n                    textAnchor: 'middle',\n                    transform: `translate(${\n                      _useRtl ? margins.right! / 2 - titleMargin : margins.right! / 2 + titleMargin\n                    },\n                 ${svgDimensions.height - margins.bottom! - margins.top! - titleMargin})rotate(-90)`,\n                    className: classes.axisTitle!,\n                  }}\n                  maxWidth={yAxisTitleMaximumAllowedHeight}\n                  wrapContent={wrapContent}\n                  showBackground={true}\n                />\n              )}\n            </g>\n          )}\n          {children}\n          {props.yAxisTitle !== undefined && props.yAxisTitle !== '' && (\n            <SVGTooltipText\n              content={props.yAxisTitle}\n              textProps={{\n                x: (yAxisTitleMaximumAllowedHeight - margins.bottom!) / 2 + removalValueForTextTuncate!,\n                y: _useRtl\n                  ? svgDimensions.width - margins.right! / 2 + titleMargin\n                  : margins.left! / 2 + startFromX - titleMargin,\n                textAnchor: 'middle',\n                transform: `translate(0,\n                 ${svgDimensions.height - margins.bottom! - margins.top! - titleMargin})rotate(-90)`,\n                className: classes.axisTitle!,\n              }}\n              maxWidth={yAxisTitleMaximumAllowedHeight}\n              wrapContent={wrapContent}\n              showBackground={true}\n            />\n          )}\n        </svg>\n      </div>\n\n      {!props.hideLegend && (\n        <div ref={(e: HTMLDivElement) => (legendContainer = e)} className={classes.legendContainer}>\n          {props.legendBars}\n        </div>\n      )}\n      {/** The callout is used for narration, so keep it mounted on the DOM */}\n      {callout && <React.Suspense fallback={<div>Loading...</div>}>{callout}</React.Suspense>}\n    </div>\n  );\n});\nCartesianChart.displayName = 'CartesianChart';\n"],"names":["CartesianChart","React","forwardRef","props","forwardedRef","chartContainer","useRef","legendContainer","minLegendContainerHeight","xAxisElement","yAxisElement","yAxisElementSecondary","margins","idForGraph","_reqID","_useRtl","useRtl","_tickValues","titleMargin","_isFirstRender","_xScale","isIntegralDataset","containerWidth","setContainerWidth","useState","containerHeight","setContainerHeight","isRemoveValCalculated","setIsRemoveValCalculated","removalValueForTextTuncate","setRemovalValueForTextTuncate","startFromX","setStartFromX","prevProps","setPrevProps","chartTypesToCheck","ChartTypes","HorizontalBarChartWithAxis","HeatMapChart","top","bottom","right","left","secondaryYScaleOptions","xAxisTitle","undefined","yAxisTitle","secondaryYAxistitle","classes","useCartesianChartStyles","focusAttributes","useFocusableGroup","arrowAttributes","useArrowNavigationGroup","axis","useEffect","_fitParentContainer","includes","chartType","showYAxisLables","maxYAxisLabelLength","calculateMaxYAxisLabelLength","points","yAxis","some","point","y","cancelAnimationFrame","height","width","wrapXAxisLables","rotateXAxisLables","xAxisType","XAxisTypes","StringAxis","rotateLabelProps","node","current","xAxis","rotatedHeight","rotateXAxisLabels","useImperativeHandle","componentRef","_generateCallout","calloutProps","createElement","ChartPopover","className","calculateLongestLabelWidth","data","map","svgProps","culture","dateLocalizeOptions","timeFormatLocale","customDateTimeFormatter","parentRef","margin","getmargins","callout","children","enableFirstRenderOptimization","XAxisParams","domainNRangeValues","getDomainNRangeValues","getDomainMargins","barwidth","tickValues","showRoundOffXTickValues","xAxisCount","xAxisTickCount","xAxistickSize","tickPadding","showXAxisLablesTooltip","xAxisPadding","xAxisInnerPadding","xAxisOuterPadding","hideTickOverlap","YAxisParams","yAxisTickFormat","yAxisTickCount","yMinValue","yMaxValue","maxOfYVal","yMinMaxValues","getMinMaxOfYAxis","yAxisType","yAxisPadding","xScale","NumericAxis","createNumericXAxis","tickParams","DateAxis","createDateXAxis","useUTC","createStringXAxis","datasetForXAxisDomain","wrapLabelProps","noOfCharsToTruncate","temp","createWrapOfXLabels","yScale","yScaleSecondary","axisData","yAxisDomainValues","YAxisType","createStringYAxis","stringDatasetForYAxisDomain","YAxisParamsSecondary","createYAxis","roundedTicks","createYAxisLabels","showYAxisLablesTooltip","_getData","getGraphData","getAxisData","hideTooltip","isPopoverOpen","svgDimensions","xAxisTitleMaximumAllowedWidth","yAxisTitleMaximumAllowedHeight","legendContainerHeight","hideLegend","legendContainerComputedStyles","getComputedStyle","getBoundingClientRect","parseFloat","marginTop","marginBottom","container","currentContainerWidth","reflowProps","mode","Math","max","_calculateChartMinWidth","currentContainerHeight","shouldResize","_onChartLeave","onChartMouseLeave","labelWidth","longestLabelWidth","ceil","cos","PI","val","numChars","toString","length","slice","words","forEach","push","split","minChartWidth","GroupedVerticalBarChart","VerticalBarChart","VerticalStackedBarChart","minDomainMargin","div","id","root","role","ref","rootElem","onMouseLeave","chartWrapper","svg","aria-label","chartTitle","style","display","g","e","transform","SVGTooltipText","content","textProps","x","axisTitle","textAnchor","maxWidth","wrapContent","showBackground","legendBars","Suspense","fallback","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib-commonjs/components/CommonComponents/CartesianChart.types.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));