@fluentui/react-charts 9.2.2 → 9.2.4

package/lib/components/VerticalStackedBarChart/VerticalStackedBarChart.js

@@ -6,12 +6,17 @@ import { scaleLinear as d3ScaleLinear, scaleBand as d3ScaleBand, scaleUtc as d3S
 import { useId } from '@fluentui/react-utilities';
 import { tokens } from '@fluentui/react-theme';
 import { CartesianChart, ChartPopover, Legends } from '../../index';
-import { ChartTypes, getAccessibleDataObject, XAxisTypes, getTypeOfAxis, tooltipOfAxislabels, formatScientificLimitWidth, getBarWidth, getScalePadding, isScalePaddingDefined, calculateAppropriateBarWidth, formatDate, areArraysEqual, calculateLongestLabelWidth, useRtl, DataVizPalette, getColorFromToken, findVSBCNumericMinMaxOfY, createNumericYAxis, domainRangeOfDateForAreaLineVerticalBarChart, domainRangeOfVSBCNumeric, domainRangeOfXStringAxis, createStringYAxis, calcTotalWidth, calcBandwidth, calcRequiredWidth } from '../../utilities/index';
+import { ChartTypes, getAccessibleDataObject, XAxisTypes, getTypeOfAxis, tooltipOfAxislabels, formatScientificLimitWidth, getBarWidth, getScalePadding, isScalePaddingDefined, calculateAppropriateBarWidth, formatDate, areArraysEqual, calculateLongestLabelWidth, useRtl, DataVizPalette, getColorFromToken, findVSBCNumericMinMaxOfY, YAxisType, createNumericYAxis, domainRangeOfDateForAreaLineScatterVerticalBarCharts, domainRangeOfVSBCNumeric, domainRangeOfXStringAxis, createStringYAxis, calcTotalWidth, calcBandwidth, calcRequiredWidth, sortAxisCategories } from '../../utilities/index';
 import { toImage } from '../../utilities/image-export-utils';
+import { formatDateToLocaleString } from '@fluentui/chart-utilities';
 const barGapMultiplier = 0.2;
 const barGapMin = 1;
 const MIN_DOMAIN_MARGIN = 8;
-export const VerticalStackedBarChart = (props)=>{
+export const VerticalStackedBarChart = /*#__PURE__*/ React.forwardRef((props = {
+    xAxisCategoryOrder: 'default',
+    yAxisCategoryOrder: 'default',
+    data: []
+}, forwardedRef)=>{
     var _props_legendProps;
     const _isRtl = useRtl();
     const _createLegendsForLine = (data)=>_getLineLegends(data);
@@ -35,6 +40,8 @@ export const VerticalStackedBarChart = (props)=>{
     const cartesianChartRef = React.useRef(null);
     const Y_ORIGIN = 0;
     const _legendsRef = React.useRef(null);
+    let _yAxisType;
+    let _yAxisLabels = [];
     const [selectedLegends, setSelectedLegends] = React.useState(((_props_legendProps = props.legendProps) === null || _props_legendProps === void 0 ? void 0 : _props_legendProps.selectedLegends) || []);
     const [activeLegend, setActiveLegend] = React.useState(undefined);
     const [dataForHoverCard, setDataForHoverCard] = React.useState(0);
@@ -235,21 +242,26 @@ export const VerticalStackedBarChart = (props)=>{
         _lineObject = _getFormattedLineData(props.data);
         _xAxisInnerPadding = getScalePadding(props.xAxisInnerPadding, props.xAxisPadding, _xAxisType === XAxisTypes.StringAxis ? 2 / 3 : 1 / 2);
         _xAxisOuterPadding = getScalePadding(props.xAxisOuterPadding, props.xAxisPadding, 0);
+        _initYAxisParams();
     }
     function _createDataSetLayer() {
-        const tempArr = [];
         const dataset = _points.map((singlePointData)=>{
+            if (_yAxisType === YAxisType.StringAxis) {
+                return {
+                    x: singlePointData.xAxisPoint,
+                    y: 0
+                };
+            }
             let total = 0;
             singlePointData.chartData.forEach((point)=>{
                 total = total + point.data;
             });
-            tempArr.push(singlePointData.xAxisPoint);
             return {
                 x: singlePointData.xAxisPoint,
                 y: total
             };
         });
-        _xAxisLabels = tempArr;
+        _xAxisLabels = _getOrderedXAxisLabels();
         return dataset;
     }
     function _onLegendHover(legendTitle) {
@@ -274,7 +286,7 @@ export const VerticalStackedBarChart = (props)=>{
     }
     function _getGraphData(xScale, yScale, containerHeight, containerWidth, xElement) {
         const { xBarScale, yBarScale } = _getScales(containerHeight, containerWidth);
-        return _bars = _createBar(xBarScale, yBarScale, containerHeight, xElement);
+        return _bars = _createBar(xBarScale, _yAxisType === YAxisType.StringAxis ? yScale : yBarScale, containerHeight, xElement);
     }
     function _getAxisData(yAxisData) {
         if (yAxisData && yAxisData.yAxisDomainValues.length) {
@@ -284,16 +296,16 @@ export const VerticalStackedBarChart = (props)=>{
         }
     }
     /**
-   * This function checks if the given legend is highlighted or not.
-   * A legend can be highlighted in 2 ways:
-   * 1. selection: if the user clicks on it
-   * 2. hovering: if there is no selected legend and the user hovers over it
-   */ function _isLegendHighlighted(legendTitle) {
+     * This function checks if the given legend is highlighted or not.
+     * A legend can be highlighted in 2 ways:
+     * 1. selection: if the user clicks on it
+     * 2. hovering: if there is no selected legend and the user hovers over it
+     */ function _isLegendHighlighted(legendTitle) {
         return _getHighlightedLegend().includes(legendTitle);
     }
     /**
-   * This function checks if none of the legends is selected or hovered.
-   */ function _noLegendHighlighted() {
+     * This function checks if none of the legends is selected or hovered.
+     */ function _noLegendHighlighted() {
         return _getHighlightedLegend().length === 0;
     }
     function _getAriaLabel(singleChartData, point, isLinePoint) {
@@ -341,7 +353,7 @@ export const VerticalStackedBarChart = (props)=>{
         if (xAxisType === XAxisTypes.NumericAxis) {
             domainNRangeValue = domainRangeOfVSBCNumeric(points, margins, width, isRTL, barWidth);
         } else if (xAxisType === XAxisTypes.DateAxis) {
-            domainNRangeValue = domainRangeOfDateForAreaLineVerticalBarChart(points, margins, width, isRTL, tickValues, chartType, barWidth);
+            domainNRangeValue = domainRangeOfDateForAreaLineScatterVerticalBarCharts(points, margins, width, isRTL, tickValues, chartType, barWidth);
         } else {
             domainNRangeValue = domainRangeOfXStringAxis(margins, width, isRTL);
         }
@@ -401,6 +413,7 @@ export const VerticalStackedBarChart = (props)=>{
                 const y1 = useSecondaryYScale ? yScaleSecondary(lineObject[item][i - 1].y) : yScalePrimary(lineObject[item][i - 1].y);
                 const x2 = xScale(lineObject[item][i].xItem.xAxisPoint);
                 const y2 = useSecondaryYScale ? yScaleSecondary(lineObject[item][i].y) : yScalePrimary(lineObject[item][i].y);
+                const yScaleBandwidthTranslate = !useSecondaryYScale && _yAxisType === YAxisType.StringAxis ? yScalePrimary.bandwidth() / 2 : 0;
                 if (lineBorderWidth > 0) {
                     borderForLines.push(/*#__PURE__*/ React.createElement("line", {
                         key: `${index}-${i}-BorderLine`,
@@ -413,7 +426,7 @@ export const VerticalStackedBarChart = (props)=>{
                         fill: "transparent",
                         strokeLinecap: "round",
                         stroke: tokens.colorNeutralBackground1,
-                        transform: `translate(${xScaleBandwidthTranslate}, 0)`
+                        transform: `translate(${xScaleBandwidthTranslate}, ${yScaleBandwidthTranslate})`
                     }));
                 }
                 var _lineObject_item__lineOptions_strokeWidth, _lineObject_item__lineOptions_strokeLinecap;
@@ -428,7 +441,7 @@ export const VerticalStackedBarChart = (props)=>{
                     strokeLinecap: (_lineObject_item__lineOptions_strokeLinecap = (_lineObject_item__lineOptions1 = lineObject[item][0].lineOptions) === null || _lineObject_item__lineOptions1 === void 0 ? void 0 : _lineObject_item__lineOptions1.strokeLinecap) !== null && _lineObject_item__lineOptions_strokeLinecap !== void 0 ? _lineObject_item__lineOptions_strokeLinecap : 'round',
                     strokeDasharray: (_lineObject_item__lineOptions2 = lineObject[item][0].lineOptions) === null || _lineObject_item__lineOptions2 === void 0 ? void 0 : _lineObject_item__lineOptions2.strokeDasharray,
                     stroke: lineObject[item][i].color,
-                    transform: `translate(${xScaleBandwidthTranslate}, 0)`,
+                    transform: `translate(${xScaleBandwidthTranslate}, ${yScaleBandwidthTranslate})`,
                     onMouseOver: (event)=>_lineHover(lineObject[item][i - 1], event),
                     onMouseLeave: _handleMouseOut
                 }));
@@ -440,6 +453,7 @@ export const VerticalStackedBarChart = (props)=>{
                     refElement: null
                 };
                 const noBarsAndLinesActive = circlePoint.xItem.chartData.filter((dataPoint)=>_noLegendHighlighted() || _isLegendHighlighted(dataPoint.legend)).length === 0;
+                const yScaleBandwidthTranslate = !circlePoint.useSecondaryYScale && _yAxisType === YAxisType.StringAxis ? yScalePrimary.bandwidth() / 2 : 0;
                 dots.push(/*#__PURE__*/ React.createElement("circle", {
                     key: `${index}-${subIndex}-dot`,
                     cx: xScale(circlePoint.xItem.xAxisPoint),
@@ -453,7 +467,7 @@ export const VerticalStackedBarChart = (props)=>{
                     // Elements with visibility: hidden cannot receive focus, so use opacity: 0 instead to hide them.
                     // For more information, see https://fuzzbomb.github.io/accessibility-demos/visually-hidden-focus-test.html
                     opacity: _getCircleOpacityAndRadius(circlePoint.xItem.xAxisPoint, circlePoint.legend).opacity,
-                    transform: `translate(${xScaleBandwidthTranslate}, 0)`,
+                    transform: `translate(${xScaleBandwidthTranslate}, ${yScaleBandwidthTranslate})`,
                     ref: (e)=>circleRef.refElement = e,
                     ...noBarsAndLinesActive ? {
                         tabIndex: !props.hideTooltip ? 0 : undefined,
@@ -525,14 +539,15 @@ export const VerticalStackedBarChart = (props)=>{
         if ((_calloutAnchorPoint === null || _calloutAnchorPoint === void 0 ? void 0 : _calloutAnchorPoint.chartDataPoint) !== point || (_calloutAnchorPoint === null || _calloutAnchorPoint === void 0 ? void 0 : _calloutAnchorPoint.xAxisDataPoint) !== xAxisPoint) {
             _calloutAnchorPoint = {
                 chartDataPoint: point,
-                xAxisDataPoint: `${xAxisPoint}`
+                xAxisDataPoint: xAxisPoint instanceof Date ? formatDateToLocaleString(xAxisPoint, props.culture, props.useUTC) : xAxisPoint.toString()
             };
+            const xCalloutValue = point.xAxisCalloutData || (xAxisPoint instanceof Date ? formatDateToLocaleString(xAxisPoint, props.culture, props.useUTC) : xAxisPoint.toString());
             _updatePosition(clientX, clientY);
             setPopoverOpen(_noLegendHighlighted() || _isLegendHighlighted(point.legend));
             setCalloutLegend(point.legend);
             setDataForHoverCard(point.data);
             setColor(color);
-            setXCalloutValue(point.xAxisCalloutData ? point.xAxisCalloutData : `${xAxisPoint}`);
+            setXCalloutValue(xCalloutValue);
             setYCalloutValue(point.yAxisCalloutData);
             setDataPointCalloutProps(point);
             setCallOutAccessibilityData(point.callOutAccessibilityData);
@@ -566,22 +581,29 @@ export const VerticalStackedBarChart = (props)=>{
     }
     function _getBarGapAndScale(bars, yBarScale, defaultTotalHeight) {
         const { barGapMax = 0 } = props;
-        // When displaying gaps between the bars, the height of each bar is
-        // adjusted so that the total of all bars is not changed by the gaps
-        const totalData = bars.reduce((iter, value)=>iter + Math.abs(value.data), 0);
-        const totalHeight = defaultTotalHeight !== null && defaultTotalHeight !== void 0 ? defaultTotalHeight : Math.abs(yBarScale(totalData) - yBarScale(Y_ORIGIN));
+        let totalData = 0;
+        let totalHeight;
         let sumOfPercent = 0;
-        bars.forEach((point)=>{
-            let value = Math.abs(point.data) / totalData * 100;
-            if (value < 1 && value !== 0) {
-                value = 1;
-            }
-            sumOfPercent += value;
-        });
-        const scalingRatio = sumOfPercent !== 0 ? sumOfPercent / 100 : 1;
+        let scalingRatio;
+        if (_yAxisType === YAxisType.StringAxis) {
+            totalHeight = defaultTotalHeight !== null && defaultTotalHeight !== void 0 ? defaultTotalHeight : bars.reduce((total, bar)=>total + yBarScale(bar.data), 0);
+        } else {
+            // When displaying gaps between the bars, the height of each bar is
+            // adjusted so that the total of all bars is not changed by the gaps
+            totalData = bars.reduce((iter, value)=>iter + Math.abs(value.data), 0);
+            totalHeight = defaultTotalHeight !== null && defaultTotalHeight !== void 0 ? defaultTotalHeight : Math.abs(yBarScale(totalData) - yBarScale(Y_ORIGIN));
+            bars.forEach((point)=>{
+                let value = Math.abs(point.data) / totalData * 100;
+                if (value < 1 && value !== 0) {
+                    value = 1;
+                }
+                sumOfPercent += value;
+            });
+            scalingRatio = sumOfPercent !== 0 ? sumOfPercent / 100 : 1;
+        }
         const gaps = barGapMax && bars.length - 1;
         const gapHeight = gaps && Math.max(barGapMin, Math.min(barGapMax, totalHeight * barGapMultiplier / gaps));
-        const heightValueScale = (totalHeight - gapHeight * gaps) / (totalData * scalingRatio);
+        const heightValueScale = _yAxisType === YAxisType.StringAxis ? 0 : (totalHeight - gapHeight * gaps) / (totalData * scalingRatio);
         return {
             gapHeight,
             heightValueScale,
@@ -731,7 +753,7 @@ export const VerticalStackedBarChart = (props)=>{
             const xPoint = xBarScale(_xAxisType === XAxisTypes.NumericAxis ? singleChartData.xAxisPoint : _xAxisType === XAxisTypes.DateAxis ? singleChartData.xAxisPoint : singleChartData.xAxisPoint);
             const xScaleBandwidthTranslate = _xAxisType !== XAxisTypes.StringAxis ? -_barWidth / 2 : (xBarScale.bandwidth() - _barWidth) / 2;
             let barTotalValue = 0;
-            const barsToDisplay = singleChartData.chartData.filter((point)=>point.data !== 0);
+            const barsToDisplay = singleChartData.chartData.filter((point)=>point.data !== 0 && point.data !== '' && !(_yAxisType === YAxisType.StringAxis && typeof yBarScale(point.data) === 'undefined'));
             if (!barsToDisplay.length) {
                 return undefined;
             }
@@ -739,7 +761,7 @@ export const VerticalStackedBarChart = (props)=>{
             if (heightValueScale < 0) {
                 return undefined;
             }
-            const yBaseline = containerHeight - _margins.bottom - yBarScale(Y_ORIGIN);
+            const yBaseline = containerHeight - _margins.bottom - (_yAxisType === YAxisType.StringAxis ? 0 : yBarScale(Y_ORIGIN));
             let yPositiveStart = yBaseline;
             let yNegativeStart = yBaseline;
             let yPoint = 0;
@@ -759,22 +781,29 @@ export const VerticalStackedBarChart = (props)=>{
                     role: 'img',
                     tabIndex: !props.hideTooltip && shouldHighlight ? 0 : undefined
                 };
-                let barHeight = Math.abs(heightValueScale * point.data);
-                // FIXME: The current scaling logic may produce different min and gap heights for each bar stack.
-                const minHeight = Math.max(heightValueScale * absStackTotal / 100.0, barMinimumHeight);
-                if (barHeight < minHeight) {
-                    barHeight = minHeight;
-                }
+                let barHeight;
                 const gapOffset = index ? gapHeight : 0;
-                if (point.data >= Y_ORIGIN) {
+                if (_yAxisType === YAxisType.StringAxis) {
+                    barHeight = Math.max(containerHeight - _margins.bottom - (yBarScale(point.data) + yBarScale.bandwidth() / 2) - gapOffset, barMinimumHeight, 1);
                     yPositiveStart -= barHeight + gapOffset;
                     yPoint = yPositiveStart;
                 } else {
-                    yPoint = yNegativeStart + gapOffset;
-                    yNegativeStart = yPoint + barHeight;
+                    barHeight = Math.abs(heightValueScale * point.data);
+                    // FIXME: The current scaling logic may produce different min and gap heights for each bar stack.
+                    const minHeight = Math.max(heightValueScale * absStackTotal / 100.0, barMinimumHeight);
+                    if (barHeight < minHeight) {
+                        barHeight = minHeight;
+                    }
+                    if (point.data >= Y_ORIGIN) {
+                        yPositiveStart -= barHeight + gapOffset;
+                        yPoint = yPositiveStart;
+                    } else {
+                        yPoint = yNegativeStart + gapOffset;
+                        yNegativeStart = yPoint + barHeight;
+                    }
+                    barTotalValue += point.data;
+                    heightOfLastBar = index === barsToDisplay.length - 1 ? barHeight : 0;
                 }
-                barTotalValue += point.data;
-                heightOfLastBar = index === barsToDisplay.length - 1 ? barHeight : 0;
                 if (barCornerRadius && barHeight > barCornerRadius && index === barsToDisplay.length - 1) {
                     return /*#__PURE__*/ React.createElement(React.Fragment, {
                         key: index + indexNumber + `${shouldFocusWholeStack}`
@@ -837,7 +866,7 @@ export const VerticalStackedBarChart = (props)=>{
             };
             let showLabel = false;
             let barLabel = 0;
-            if (!props.hideLabels) {
+            if (!props.hideLabels && _yAxisType !== YAxisType.StringAxis) {
                 if (_noLegendHighlighted()) {
                     showLabel = true;
                     barLabel = barTotalValue;
@@ -907,6 +936,83 @@ export const VerticalStackedBarChart = (props)=>{
             endValue: d3Max(values)
         };
     }
+    function _initYAxisParams() {
+        if (_points[0].chartData.length > 0) {
+            _yAxisType = getTypeOfAxis(_points[0].chartData[0].data, false);
+        } else {
+            Object.keys(_lineObject).forEach((lineLegend)=>{
+                if (!_lineObject[lineLegend][0].useSecondaryYScale) {
+                    _yAxisType = getTypeOfAxis(_lineObject[lineLegend][0].y, false);
+                }
+            });
+        }
+        _yAxisLabels = _getOrderedYAxisLabels();
+    }
+    function _getYDomainMargins(containerHeight) {
+        /**
+       * Specifies the extra top margin to apply above the highest y-axis tick label.
+       * Useful when stacked bars extend beyond the combined height of all y-axis labels (or categories).
+       */ let yAxisTickMarginTop = 0;
+        /** Total height available to render the bars */ const totalHeight = containerHeight - _margins.bottom - _margins.top;
+        if (_yAxisType === YAxisType.StringAxis) {
+            /** Maximum height of the stacked bars, expressed in multiples of the height of a y-axis label (or category) */ let maxBarHeightInLabels = 0;
+            _points.forEach((xPoint)=>{
+                /** Height of the stacked bar, expressed in multiples of the height of a y-axis label (or category) */ let barHeightInLabels = 0;
+                xPoint.chartData.forEach((bar)=>{
+                    barHeightInLabels += _yAxisLabels.indexOf(`${bar.data}`) + 1;
+                });
+                maxBarHeightInLabels = Math.max(maxBarHeightInLabels, barHeightInLabels);
+            });
+            /** Height of a y-axis label (or category) */ const yAxisLabelHeight = maxBarHeightInLabels === 0 ? 0 : totalHeight / maxBarHeightInLabels;
+            yAxisTickMarginTop += yAxisLabelHeight * (maxBarHeightInLabels - _yAxisLabels.length);
+        }
+        return {
+            ..._margins,
+            top: _margins.top + yAxisTickMarginTop
+        };
+    }
+    function _getOrderedXAxisLabels() {
+        if (_xAxisType !== XAxisTypes.StringAxis) {
+            return [];
+        }
+        return sortAxisCategories(_mapCategoryToValues(), props.xAxisCategoryOrder);
+    }
+    function _getOrderedYAxisLabels() {
+        if (_yAxisType !== YAxisType.StringAxis) {
+            return [];
+        }
+        return sortAxisCategories(_mapCategoryToValues(true), props.yAxisCategoryOrder);
+    }
+    function _mapCategoryToValues(isYAxis = false) {
+        const categoryToValues = {};
+        _points.forEach((point)=>{
+            var _point_lineData;
+            point.chartData.forEach((bar)=>{
+                const category = isYAxis ? bar.data : point.xAxisPoint;
+                const value = isYAxis ? point.xAxisPoint : bar.data;
+                if (!categoryToValues[category]) {
+                    categoryToValues[category] = [];
+                }
+                if (typeof value === 'number') {
+                    categoryToValues[category].push(value);
+                }
+            });
+            (_point_lineData = point.lineData) === null || _point_lineData === void 0 ? void 0 : _point_lineData.forEach((linePoint)=>{
+                if (isYAxis && linePoint.useSecondaryYScale) {
+                    return;
+                }
+                const category = isYAxis ? linePoint.y : point.xAxisPoint;
+                const value = isYAxis ? point.xAxisPoint : linePoint.y;
+                if (!categoryToValues[category]) {
+                    categoryToValues[category] = [];
+                }
+                if (typeof value === 'number') {
+                    categoryToValues[category].push(value);
+                }
+            });
+        });
+        return categoryToValues;
+    }
     if (!_isChartEmpty()) {
         _adjustProps();
         const _isHavingLines = props.data.some((item)=>item.lineData && item.lineData.length > 0);
@@ -962,6 +1068,12 @@ export const VerticalStackedBarChart = (props)=>{
             },
             componentRef: cartesianChartRef,
             showRoundOffXTickValues: !isScalePaddingDefined(props.xAxisInnerPadding, props.xAxisPadding),
+            yAxisType: _yAxisType,
+            stringDatasetForYAxisDomain: [
+                '',
+                ..._yAxisLabels
+            ],
+            getYDomainMargins: _getYDomainMargins,
             /* eslint-disable react/jsx-no-bind */ children: (props)=>{
                 return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("g", null, _bars), /*#__PURE__*/ React.createElement("g", null, _isHavingLines && _createLines(props.xScale, props.yScalePrimary, props.containerHeight, props.containerWidth, props.yScaleSecondary)));
             }
@@ -975,5 +1087,5 @@ export const VerticalStackedBarChart = (props)=>{
         },
         "aria-label": 'Graph has no data to display'
     });
-};
+});
 VerticalStackedBarChart.displayName = 'VerticalStackedBarChart';