feat(react-charts): Add support for negative Y values in GVBC (#34687)

Co-authored-by: Anush <[email protected]>

Author: Anush2303

change/@fluentui-react-charts-811555a6-fbfc-41e4-9823-05deda369f07.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Add negative y value support in GVBC",
+  "packageName": "@fluentui/react-charts",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/charts/react-charts/library/etc/react-charts.api.md

@@ -606,6 +606,7 @@ export interface GroupedVerticalBarChartProps extends CartesianChartProps {
     isCalloutForStack?: boolean;
     maxBarWidth?: number;
     mode?: 'default' | 'plotly';
+    roundCorners?: boolean;
     styles?: GroupedVerticalBarChartStyles;
     useSingleColor?: boolean;
     xAxisInnerPadding?: number;

packages/charts/react-charts/library/src/components/CommonComponents/CartesianChart.tsx

@@ -255,7 +255,9 @@ export const CartesianChart: React.FunctionComponent<ModifiedCartesianChartProps
       yMaxValue: props.yMaxValue || 0,
       tickPadding: 10,
       maxOfYVal: props.maxOfYVal,
-      yMinMaxValues: getMinMaxOfYAxis(points, chartType, props.yAxisType),
+      yMinMaxValues: props.getMinMaxOfYAxis
+        ? props.getMinMaxOfYAxis(points, props.yAxisType)
+        : 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

packages/charts/react-charts/library/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.tsx

@@ -50,6 +50,8 @@ const X1_INNER_PADDING = 0.1;
 // => space_between_bars = (x1_inner_padding / (1 - x1_inner_padding)) * bar_width
 /** Rate at which the space between the bars in a group changes wrt the bar width */
 const BAR_GAP_RATE = X1_INNER_PADDING / (1 - X1_INNER_PADDING);
+const VERTICAL_BAR_GAP = 1;
+const MIN_BAR_HEIGHT = 1;
 
 // This interface used for - While forming datapoints from given prop "data" in code
 interface GVDataPoint {
@@ -82,6 +84,7 @@ export const GroupedVerticalBarChart: React.FC<GroupedVerticalBarChartProps> = R
   let _xAxisInnerPadding: number = 0;
   let _xAxisOuterPadding: number = 0;
   const cartesianChartRef = React.useRef<Chart>(null);
+  const Y_ORIGIN: number = 0;
 
   const [color, setColor] = React.useState<string>('');
   const [dataForHoverCard, setDataForHoverCard] = React.useState<number>(0);
@@ -411,16 +414,29 @@ export const GroupedVerticalBarChart: React.FC<GroupedVerticalBarChartProps> = R
       // To align the centers of the generated bandwidth and the calculated one when they differ,
       // use the following addend.
       const xPoint = xScale1(datasetKey) + (xScale1.bandwidth() - _barWidth) / 2;
-      const yPoint = Math.max(yBarScale(pointData.data), 0);
       const startColor = pointData.color ? pointData.color : getNextColor(index, 0);
 
+      const yBaseline = yBarScale(Y_ORIGIN);
+      let yPositiveStart = yBaseline;
+      let yNegativeStart = yBaseline;
+      let yPoint = Y_ORIGIN;
+
+      const barGap = (VERTICAL_BAR_GAP / 2) * (index > 0 ? 2 : 0);
+      const height = Math.max(yBarScale(Y_ORIGIN) - yBarScale(Math.abs(pointData.data)), MIN_BAR_HEIGHT);
+      if (pointData.data >= Y_ORIGIN) {
+        yPositiveStart -= height + barGap;
+        yPoint = yPositiveStart;
+      } else {
+        yPoint = yNegativeStart + barGap;
+        yNegativeStart = yPoint + height;
+      }
       // Not rendering data with 0.
       pointData.data &&
         singleGroup.push(
           <React.Fragment key={`${singleSet.indexNum}-${index}`}>
             <rect
               className={classes.opacityChangeOnHover}
-              height={Math.max(containerHeight! - _margins.bottom! - yBarScale(pointData.data), 0)}
+              height={height}
               width={_barWidth}
               x={xPoint}
               y={yPoint}
@@ -453,7 +469,7 @@ export const GroupedVerticalBarChart: React.FC<GroupedVerticalBarChartProps> = R
           <text
             key={`${singleSet.indexNum}-${index}`}
             x={xPoint + _barWidth / 2}
-            y={yPoint - 6}
+            y={pointData.data >= Y_ORIGIN ? yPositiveStart - 6 : yNegativeStart + 12}
             textAnchor="middle"
             className={classes.barLabel}
             aria-hidden={true}

packages/charts/react-charts/library/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.types.ts

@@ -87,6 +87,12 @@ export interface GroupedVerticalBarChartProps extends CartesianChartProps {
    * @default 'default'
    */
   mode?: 'default' | 'plotly';
+
+  /**
+   * @default false
+   * The prop used to enable rounded corners for the chart.
+   */
+  roundCorners?: boolean;
 }
 
 /**