@fluentui/react-charts 0.0.0-nightly-20250814-0406.1 → 0.0.0-nightly-20250815-0407.1

package/lib/components/VerticalStackedBarChart/VerticalStackedBarChart.js

@@ -6,7 +6,7 @@ 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, domainRangeOfDateForAreaLineVerticalBarChart, domainRangeOfVSBCNumeric, domainRangeOfXStringAxis, createStringYAxis, calcTotalWidth, calcBandwidth, calcRequiredWidth } from '../../utilities/index';
 import { toImage } from '../../utilities/image-export-utils';
 import { formatDateToLocaleString } from '@fluentui/chart-utilities';
 const barGapMultiplier = 0.2;
@@ -36,6 +36,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);
@@ -236,15 +238,22 @@ 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)=>{
+            tempArr.push(singlePointData.xAxisPoint);
+            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
@@ -275,7 +284,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) {
@@ -402,6 +411,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`,
@@ -414,7 +424,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;
@@ -429,7 +439,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
                 }));
@@ -441,6 +451,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),
@@ -454,7 +465,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,
@@ -568,22 +579,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,
@@ -733,7 +751,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;
             }
@@ -741,7 +759,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;
@@ -761,22 +779,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}`
@@ -839,7 +864,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;
@@ -909,6 +934,68 @@ 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);
+                }
+            });
+        }
+        if (_yAxisType === YAxisType.StringAxis) {
+            const legendToYValues = {};
+            _points.forEach((xPoint)=>{
+                xPoint.chartData.forEach((bar)=>{
+                    if (!legendToYValues[bar.legend]) {
+                        legendToYValues[bar.legend] = [
+                            `${bar.data}`
+                        ];
+                    } else {
+                        legendToYValues[bar.legend].push(`${bar.data}`);
+                    }
+                });
+            });
+            const yAxisLabels = new Set();
+            Object.values(legendToYValues).forEach((yValues)=>{
+                yValues.forEach((yVal)=>{
+                    yAxisLabels.add(yVal);
+                });
+            });
+            Object.values(_lineObject).forEach((linePoints)=>{
+                linePoints.forEach((linePoint)=>{
+                    if (!linePoint.useSecondaryYScale) {
+                        yAxisLabels.add(`${linePoint.y}`);
+                    }
+                });
+            });
+            _yAxisLabels = Array.from(yAxisLabels);
+        }
+    }
+    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
+        };
+    }
     if (!_isChartEmpty()) {
         _adjustProps();
         const _isHavingLines = props.data.some((item)=>item.lineData && item.lineData.length > 0);
@@ -964,6 +1051,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)));
             }