@fluentui/react-charts 1.2.0 → 9.0.0

package/lib/CartesianChart.js

@@ -0,0 +1 @@
+export * from './components/CommonComponents/index';

package/lib/CartesianChart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["CartesianChart.ts"],"sourcesContent":["export * from './components/CommonComponents/index';\n"],"names":[],"rangeMappings":"","mappings":"AAAA,cAAc,sCAAsC"}

package/lib/DeclarativeChart.js

@@ -0,0 +1 @@
+export * from './components/DeclarativeChart/index';

package/lib/DeclarativeChart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["DeclarativeChart.ts"],"sourcesContent":["export * from './components/DeclarativeChart/index';\n"],"names":[],"rangeMappings":"","mappings":"AAAA,cAAc,sCAAsC"}

package/lib/DonutChart.js

@@ -0,0 +1 @@
+export * from './components/DonutChart/index';

package/lib/DonutChart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["DonutChart.ts"],"sourcesContent":["export * from './components/DonutChart/index';\n"],"names":[],"rangeMappings":"","mappings":"AAAA,cAAc,gCAAgC"}

package/lib/HorizontalBarChart.js

@@ -0,0 +1 @@
+export * from './components/HorizontalBarChart/index';

package/lib/HorizontalBarChart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["HorizontalBarChart.ts"],"sourcesContent":["export * from './components/HorizontalBarChart/index';\n"],"names":[],"rangeMappings":"","mappings":"AAAA,cAAc,wCAAwC"}

package/lib/Legends.js

@@ -0,0 +1 @@
+export * from './components/Legends/index';

package/lib/Legends.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Legends.ts"],"sourcesContent":["export * from './components/Legends/index';\n"],"names":[],"rangeMappings":"","mappings":"AAAA,cAAc,6BAA6B"}

package/lib/LineChart.js

@@ -0,0 +1 @@
+export * from './components/LineChart/index';

package/lib/LineChart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["LineChart.ts"],"sourcesContent":["export * from './components/LineChart/index';\n"],"names":[],"rangeMappings":"","mappings":"AAAA,cAAc,+BAA+B"}

package/lib/Popover.js

@@ -0,0 +1 @@
+export * from './components/CommonComponents/index';

package/lib/Popover.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Popover.ts"],"sourcesContent":["export * from './components/CommonComponents/index';\n"],"names":[],"rangeMappings":"","mappings":"AAAA,cAAc,sCAAsC"}

package/lib/ResponsiveContainer.js

@@ -0,0 +1 @@
+export * from './components/ResponsiveContainer/index';

package/lib/ResponsiveContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ResponsiveContainer.ts"],"sourcesContent":["export * from './components/ResponsiveContainer/index';\n"],"names":[],"rangeMappings":"","mappings":"AAAA,cAAc,yCAAyC"}

package/lib/Sparkline.js

@@ -0,0 +1 @@
+export * from './components/Sparkline/index';

package/lib/Sparkline.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Sparkline.ts"],"sourcesContent":["export * from './components/Sparkline/index';\n"],"names":[],"rangeMappings":"","mappings":"AAAA,cAAc,+BAA+B"}

package/lib/VerticalBarChart.js

@@ -0,0 +1 @@
+export * from './components/VerticalBarChart/index';

package/lib/VerticalBarChart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["VerticalBarChart.ts"],"sourcesContent":["export * from './components/VerticalBarChart/index';\n"],"names":[],"rangeMappings":"","mappings":"AAAA,cAAc,sCAAsC"}

package/lib/components/CommonComponents/CartesianChart.js

@@ -0,0 +1,462 @@
+import * as React from 'react';
+import { useCartesianChartStyles } from './useCartesianChartStyles.styles';
+import { createNumericXAxis, createStringXAxis, getDomainNRangeValues, createDateXAxis, createYAxis, createStringYAxis, getMinMaxOfYAxis, XAxisTypes, YAxisType, createWrapOfXLabels, rotateXAxisLabels, calculateLongestLabelWidth, createYAxisLabels, ChartTypes, wrapContent, useRtl } from '../../utilities/index';
+import { SVGTooltipText } from '../../utilities/SVGTooltipText';
+import { ChartPopover } from './ChartPopover';
+import { useFocusableGroup, useArrowNavigationGroup } from '@fluentui/react-tabster';
+/**
+ * Cartesian Chart component
+ * {@docCategory CartesianChart}
+ */ export 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 = 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);
+    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) ? 60 : 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) ? 60 : 40;
+    }
+    const classes = useCartesianChartStyles(props);
+    const focusAttributes = useFocusableGroup();
+    const arrowAttributes = useArrowNavigationGroup({
+        axis: 'horizontal'
+    });
+    // ComponentdidMount and Componentwillunmount logic
+    React.useEffect(()=>{
+        _fitParentContainer();
+        if (props !== null) {
+            setPrevProps(props);
+        }
+        if (props.chartType === ChartTypes.HorizontalBarChartWithAxis && props.showYAxisLables && yAxisElement.current) {
+            const maxYAxisLabelLength = calculateLongestLabelWidth(props.points.map((point)=>point.y), `.${classes.yAxis} text`);
+            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 (props.chartType === ChartTypes.HorizontalBarChartWithAxis && props.showYAxisLables && yAxisElement.current) {
+            const maxYAxisLabelLength = calculateLongestLabelWidth(props.points.map((point)=>point.y), `.${classes.yAxis} text`);
+            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 === XAxisTypes.StringAxis) {
+            const rotateLabelProps = {
+                node: xAxisElement.current,
+                xAxis: _xScale
+            };
+            const rotatedHeight = 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, calloutProps);
+    }
+    const { calloutProps, points, chartType, svgProps, culture, dateLocalizeOptions, timeFormatLocale, customDateTimeFormatter } = props;
+    if (props.parentRef) {
+        _fitParentContainer();
+    }
+    const margin = {
+        ...margins
+    };
+    if (props.chartType === ChartTypes.HorizontalBarChartWithAxis) {
+        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: getDomainNRangeValues(points, props.getDomainMargins ? props.getDomainMargins(containerWidth) : margins, containerWidth, chartType, _useRtl, props.xAxisType, props.barwidth, props.tickValues, // This is only used for Horizontal Bar Chart with Axis for y as string axis
+            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: 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 XAxisTypes.NumericAxis:
+                ({ xScale, tickValues } = createNumericXAxis(XAxisParams, props.tickParams, props.chartType, culture));
+                break;
+            case XAxisTypes.DateAxis:
+                ({ xScale, tickValues } = createDateXAxis(XAxisParams, props.tickParams, culture, dateLocalizeOptions, timeFormatLocale, customDateTimeFormatter, props.useUTC));
+                break;
+            case XAxisTypes.StringAxis:
+                ({ xScale, tickValues } = createStringXAxis(XAxisParams, props.tickParams, props.datasetForXAxisDomain, culture));
+                break;
+            default:
+                ({ xScale, tickValues } = 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 && 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 === YAxisType.StringAxis) {
+            yScale = 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: getMinMaxOfYAxis(points, chartType),
+                    yAxisPadding: props.yAxisPadding
+                };
+                yScaleSecondary = createYAxis(YAxisParamsSecondary, _useRtl, axisData, chartType, props.barwidth, isIntegralDataset, true);
+            }
+            yScale = createYAxis(YAxisParams, _useRtl, axisData, chartType, props.barwidth, isIntegralDataset);
+        }
+        /*
+     * To create y axis tick values by if specified
+    truncating the rest of the text and showing elipsis
+    or showing the whole string,
+     * */ props.chartType === ChartTypes.HorizontalBarChartWithAxis && yScale && 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 === XAxisTypes.StringAxis) {
+            const longestLabelWidth = 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 = 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 = calculateLongestLabelWidth(words, `.${classes.xAxis} text`);
+            labelWidth += Math.max(Math.ceil(longestLabelWidth), 10);
+        } else {
+            const longestLabelWidth = calculateLongestLabelWidth(_tickValues, `.${classes.xAxis} text`);
+            labelWidth += Math.ceil(longestLabelWidth);
+        }
+        let minChartWidth = margins.left + margins.right + labelWidth * (_tickValues.length - 1);
+        if ([
+            ChartTypes.GroupedVerticalBarChart,
+            ChartTypes.VerticalBarChart,
+            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, {
+        content: props.xAxisTitle,
+        textProps: {
+            x: margins.left + startFromX + xAxisTitleMaximumAllowedWidth / 2,
+            y: svgDimensions.height - titleMargin,
+            className: classes.axisTitle,
+            textAnchor: 'middle'
+        },
+        maxWidth: xAxisTitleMaximumAllowedWidth,
+        wrapContent: wrapContent
+    }), /*#__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 : svgDimensions.width - margins.right}, 0)`,
+        className: classes.yAxis
+    }), props.secondaryYAxistitle !== undefined && props.secondaryYAxistitle !== '' && /*#__PURE__*/ React.createElement(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: wrapContent
+    })), children, props.yAxisTitle !== undefined && props.yAxisTitle !== '' && /*#__PURE__*/ React.createElement(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: wrapContent
+    }))), !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';