fix(react-charting): Add scaling factor to heights of VerticalStacked bars (#34021)

Author: Anush2303

change/@fluentui-react-charting-364ea844-fc47-4dc9-a1ad-5e297a214b3f.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Add scaling factor to heights of Vertical Stacked bars",
+  "packageName": "@fluentui/react-charting",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/charts/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx

@@ -845,20 +845,30 @@ export class VerticalStackedBarChartBase
   ): {
     readonly gapHeight: number;
     readonly heightValueScale: number;
+    readonly adjustedTotalHeight: number;
   } {
     const { barGapMax = 0 } = this.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 + value.data, 0);
+    const totalData = bars.reduce((iter, value) => iter + Math.abs(value.data), 0);
     const totalHeight = defaultTotalHeight ?? yBarScale(totalData);
+    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;
     const gaps = barGapMax && bars.length - 1;
     const gapHeight = gaps && Math.max(barGapMin, Math.min(barGapMax, (totalHeight * barGapMultiplier) / gaps));
-    const heightValueScale = (totalHeight - gapHeight * gaps) / totalData;
-
+    const heightValueScale = (totalHeight - gapHeight * gaps) / (totalData * scalingRatio);
     return {
       gapHeight,
       heightValueScale,
+      adjustedTotalHeight: sumOfPercent,
     } as const;
   }
 
@@ -902,7 +912,7 @@ export class VerticalStackedBarChartBase
         return undefined;
       }
 
-      const { gapHeight, heightValueScale } = this._getBarGapAndScale(barsToDisplay, yBarScale);
+      const { gapHeight, heightValueScale, adjustedTotalHeight } = this._getBarGapAndScale(barsToDisplay, yBarScale);
 
       if (heightValueScale < 0) {
         return undefined;
@@ -939,8 +949,8 @@ export class VerticalStackedBarChartBase
         };
 
         let barHeight = heightValueScale * point.data;
-        if (barHeight < Math.max(Math.ceil((heightValueScale * this._yMax) / 100.0), barMinimumHeight)) {
-          barHeight = Math.max(Math.ceil((heightValueScale * this._yMax) / 100.0), barMinimumHeight);
+        if (barHeight < Math.max((heightValueScale * adjustedTotalHeight) / 100.0, barMinimumHeight)) {
+          barHeight = Math.max((heightValueScale * adjustedTotalHeight) / 100.0, barMinimumHeight);
         }
         yPoint = yPoint - barHeight - (index ? gapHeight : 0);
         barTotalValue += point.data;

packages/charts/react-charting/src/components/VerticalStackedBarChart/__snapshots__/VerticalStackedBarChartRTL.test.tsx.snap

@@ -293,12 +293,12 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged
                       opacity: ;
                     }
                 fill="#00188f"
-                height="3"
+                height="2.37"
                 rx="0"
                 transform="translate(0, 0)"
                 width="16"
                 x="279"
-                y="249.26"
+                y="249.89"
               />
             </g>
             <text
@@ -314,7 +314,7 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged
               text-anchor="middle"
               transform="translate(0, 0)"
               x="287"
-              y="243.26"
+              y="243.89"
             >
               2.5
             </text>
@@ -1282,12 +1282,12 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged
                       opacity: ;
                     }
                 fill="#00188f"
-                height="3"
+                height="2.37"
                 rx="0"
                 transform="translate(0, 0)"
                 width="16"
                 x="279"
-                y="249.26"
+                y="249.89"
               />
             </g>
             <text
@@ -1303,7 +1303,7 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged
               text-anchor="middle"
               transform="translate(0, 0)"
               x="287"
-              y="243.26"
+              y="243.89"
             >
               2.5
             </text>
@@ -2271,12 +2271,12 @@ exports[`Vertical stacked bar chart - Subcomponent Line Should render the vertic
                       opacity: ;
                     }
                 fill="#00188f"
-                height="3"
+                height="2.37"
                 rx="0"
                 transform="translate(0, 0)"
                 width="16"
                 x="279"
-                y="249.26"
+                y="249.89"
               />
             </g>
             <text
@@ -2292,7 +2292,7 @@ exports[`Vertical stacked bar chart - Subcomponent Line Should render the vertic
               text-anchor="middle"
               transform="translate(0, 0)"
               x="287"
-              y="243.26"
+              y="243.89"
             >
               2.5
             </text>

packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.Basic.Example.tsx

@@ -123,6 +123,55 @@ export class VerticalStackedBarChartBasicExample extends React.Component<{}, IVe
         xAxisCalloutData: '2020/04/30',
         yAxisCalloutData: '31%',
       },
+      {
+        legend: 'Metadata4',
+        data: 10,
+        color: getColorFromToken(DataVizPalette.color4),
+        xAxisCalloutData: '2020/04/30',
+        yAxisCalloutData: '1%',
+      },
+      {
+        legend: 'Metadata5',
+        data: 23,
+        color: getColorFromToken(DataVizPalette.color5),
+        xAxisCalloutData: '2020/04/30',
+        yAxisCalloutData: '2%',
+      },
+      {
+        legend: 'Metadata6',
+        data: 0.4,
+        color: getColorFromToken(DataVizPalette.color6),
+        xAxisCalloutData: '2020/04/30',
+        yAxisCalloutData: '3%',
+      },
+      {
+        legend: 'Metadata7',
+        data: 0.5,
+        color: getColorFromToken(DataVizPalette.color7),
+        xAxisCalloutData: '2020/04/30',
+        yAxisCalloutData: '4%',
+      },
+      {
+        legend: 'Metadata8',
+        data: 0.3,
+        color: getColorFromToken(DataVizPalette.color8),
+        xAxisCalloutData: '2020/04/30',
+        yAxisCalloutData: '5%',
+      },
+      {
+        legend: 'Metadata9',
+        data: 0.7,
+        color: getColorFromToken(DataVizPalette.color9),
+        xAxisCalloutData: '2020/04/30',
+        yAxisCalloutData: '6%',
+      },
+      {
+        legend: 'Metadata10',
+        data: 0.1,
+        color: getColorFromToken(DataVizPalette.color10),
+        xAxisCalloutData: '2020/04/30',
+        yAxisCalloutData: '7%',
+      },
     ];
 
     const secondChartPoints: IVSChartDataPoint[] = [
@@ -341,6 +390,7 @@ export class VerticalStackedBarChartBasicExample extends React.Component<{}, IVe
               xAxisTitle={this.state.showAxisTitles ? 'Number of days' : undefined}
               enableGradient={this.state.enableGradient}
               roundCorners={this.state.roundCorners}
+              roundedTicks={true}
             />
           </div>
         )}
@@ -363,6 +413,7 @@ export class VerticalStackedBarChartBasicExample extends React.Component<{}, IVe
               enableReflow={true}
               enableGradient={this.state.enableGradient}
               roundCorners={this.state.roundCorners}
+              roundedTicks={true}
             />
           </div>
         )}