Add Negative Y Value Support and Example for Vertical Bar Chart (micr…

…osoft#33377)
vs4vijay · Dec 5, 2024 · f42240c · f42240c
1 parent 0f490a4
commit f42240c
Show file tree

Hide file tree

Showing 18 changed files with 3,747 additions and 1,302 deletions.
diff --git a/change/@fluentui-react-charting-cae42a98-eff0-4072-a40f-8a0d2add5253.json b/change/@fluentui-react-charting-cae42a98-eff0-4072-a40f-8a0d2add5253.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "support negative y values in Vertical Bar chart",
+  "packageName": "@fluentui/react-charting",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/charts/react-charting/etc/react-charting.api.md b/packages/charts/react-charting/etc/react-charting.api.md
@@ -293,6 +293,7 @@ export interface ICartesianChartProps {
     showXAxisLablesTooltip?: boolean;
     strokeWidth?: number;
     styles?: IStyleFunctionOrObject<ICartesianChartStyleProps, ICartesianChartStyles>;
+    supportNegativeData?: boolean;
     svgProps?: React_2.SVGProps<SVGSVGElement>;
     theme?: ITheme;
     tickFormat?: string;
@@ -1043,7 +1044,7 @@ export interface IModifiedCartesianChartProps extends ICartesianChartProps {
     createStringYAxis: (yAxisParams: IYAxisParams, dataPoints: string[], isRtl: boolean, barWidth: number | undefined) => ScaleBand<string>;
     // Warning: (ae-forgotten-export) The symbol "IYAxisParams" needs to be exported by the entry point index.d.ts
     // Warning: (ae-forgotten-export) The symbol "IAxisData" needs to be exported by the entry point index.d.ts
-    createYAxis: (yAxisParams: IYAxisParams, isRtl: boolean, axisData: IAxisData, isIntegralDataset: boolean, useSecondaryYScale?: boolean) => ScaleLinear<number, number, never>;
+    createYAxis: (yAxisParams: IYAxisParams, isRtl: boolean, axisData: IAxisData, isIntegralDataset: boolean, useSecondaryYScale?: boolean, supportNegativeData?: boolean) => ScaleLinear<number, number, never>;
     culture?: string;
     customizedCallout?: any;
     datasetForXAxisDomain?: string[];

diff --git a/...s/charts/react-charting/src/components/AreaChart/__snapshots__/AreaChartRTL.test.tsx.snap b/...s/charts/react-charting/src/components/AreaChart/__snapshots__/AreaChartRTL.test.tsx.snap
@@ -4186,12 +4186,12 @@ exports[`Area chart rendering Should render the Area chart with secondary Y axis
             font-family="sans-serif"
             font-size="10"
             id="yAxisGElementSecondarychart_6"
-            text-anchor="end"
+            text-anchor="start"
             transform="translate(610, 0)"
           >
             <path
               class="domain"
-              d="M-6,257.5H0.5V20.5H-6"
+              d="M6,257.5H0.5V20.5H6"
               stroke="currentColor"
             />
             <g
@@ -4201,13 +4201,13 @@ exports[`Area chart rendering Should render the Area chart with secondary Y axis
             >
               <line
                 stroke="currentColor"
-                x2="570"
+                x2="-570"
               />
               <text
                 aria-hidden="true"
                 dy="0.32em"
                 fill="currentColor"
-                x="-10"
+                x="10"
               >
                 0
               </text>
@@ -4219,13 +4219,13 @@ exports[`Area chart rendering Should render the Area chart with secondary Y axis
             >
               <line
                 stroke="currentColor"
-                x2="570"
+                x2="-570"
               />
               <text
                 aria-hidden="true"
                 dy="0.32em"
                 fill="currentColor"
-                x="-10"
+                x="10"
               >
                 25
               </text>
@@ -4237,13 +4237,13 @@ exports[`Area chart rendering Should render the Area chart with secondary Y axis
             >
               <line
                 stroke="currentColor"
-                x2="570"
+                x2="-570"
               />
               <text
                 aria-hidden="true"
                 dy="0.32em"
                 fill="currentColor"
-                x="-10"
+                x="10"
               >
                 50
               </text>
@@ -4255,13 +4255,13 @@ exports[`Area chart rendering Should render the Area chart with secondary Y axis
             >
               <line
                 stroke="currentColor"
-                x2="570"
+                x2="-570"
               />
               <text
                 aria-hidden="true"
                 dy="0.32em"
                 fill="currentColor"
-                x="-10"
+                x="10"
               >
                 75
               </text>
@@ -4273,13 +4273,13 @@ exports[`Area chart rendering Should render the Area chart with secondary Y axis
             >
               <line
                 stroke="currentColor"
-                x2="570"
+                x2="-570"
               />
               <text
                 aria-hidden="true"
                 dy="0.32em"
                 fill="currentColor"
-                x="-10"
+                x="10"
               >
                 100
               </text>

diff --git a/packages/charts/react-charting/src/components/CommonComponents/CartesianChart.base.tsx b/packages/charts/react-charting/src/components/CommonComponents/CartesianChart.base.tsx
@@ -387,9 +387,23 @@ export class CartesianChartBase extends React.Component<IModifiedCartesianChartP
             yAxisPadding: this.props.yAxisPadding,
           };
 
-          yScaleSecondary = this.props.createYAxis(YAxisParamsSecondary, this._isRtl, axisData, this.isIntegralDataset);
+          yScaleSecondary = yScaleSecondary = this.props.createYAxis(
+            YAxisParamsSecondary,
+            this._isRtl,
+            axisData,
+            this.isIntegralDataset,
+            true,
+            this.props.supportNegativeData!,
+          );
         }
-        yScale = this.props.createYAxis(YAxisParams, this._isRtl, axisData, this.isIntegralDataset);
+        yScale = this.props.createYAxis(
+          YAxisParams,
+          this._isRtl,
+          axisData,
+          this.isIntegralDataset,
+          false,
+          this.props.supportNegativeData!,
+        );
       }
 
       /*

diff --git a/packages/charts/react-charting/src/components/CommonComponents/CartesianChart.types.ts b/packages/charts/react-charting/src/components/CommonComponents/CartesianChart.types.ts
@@ -439,6 +439,12 @@ export interface ICartesianChartProps {
    * @default true
    */
   useUTC?: boolean;
+
+  /**
+   * @default false
+   * Used for enabling negative values in Y axis.
+   */
+  supportNegativeData?: boolean;
 }
 
 export interface IYValueHover {
@@ -651,6 +657,7 @@ export interface IModifiedCartesianChartProps extends ICartesianChartProps {
     axisData: IAxisData,
     isIntegralDataset: boolean,
     useSecondaryYScale?: boolean,
+    supportNegativeData?: boolean,
   ) => ScaleLinear<number, number, never>;
 
   /**

diff --git a/...s/charts/react-charting/src/components/LineChart/__snapshots__/LineChartRTL.test.tsx.snap b/...s/charts/react-charting/src/components/LineChart/__snapshots__/LineChartRTL.test.tsx.snap
@@ -5971,12 +5971,12 @@ exports[`Line chart rendering Should render the line chart with secondary Y axis
             font-family="sans-serif"
             font-size="10"
             id="yAxisGElementSecondarychart_9"
-            text-anchor="end"
+            text-anchor="start"
             transform="translate(610, 0)"
           >
             <path
               class="domain"
-              d="M-6,257.5H0.5V20.5H-6"
+              d="M6,257.5H0.5V20.5H6"
               stroke="currentColor"
             />
             <g
@@ -5986,13 +5986,13 @@ exports[`Line chart rendering Should render the line chart with secondary Y axis
             >
               <line
                 stroke="currentColor"
-                x2="570"
+                x2="-570"
               />
               <text
                 aria-hidden="true"
                 dy="0.32em"
                 fill="currentColor"
-                x="-10"
+                x="10"
               >
                 0
               </text>
@@ -6004,13 +6004,13 @@ exports[`Line chart rendering Should render the line chart with secondary Y axis
             >
               <line
                 stroke="currentColor"
-                x2="570"
+                x2="-570"
               />
               <text
                 aria-hidden="true"
                 dy="0.32em"
                 fill="currentColor"
-                x="-10"
+                x="10"
               >
                 25
               </text>
@@ -6022,13 +6022,13 @@ exports[`Line chart rendering Should render the line chart with secondary Y axis
             >
               <line
                 stroke="currentColor"
-                x2="570"
+                x2="-570"
               />
               <text
                 aria-hidden="true"
                 dy="0.32em"
                 fill="currentColor"
-                x="-10"
+                x="10"
               >
                 50
               </text>
@@ -6040,13 +6040,13 @@ exports[`Line chart rendering Should render the line chart with secondary Y axis
             >
               <line
                 stroke="currentColor"
-                x2="570"
+                x2="-570"
               />
               <text
                 aria-hidden="true"
                 dy="0.32em"
                 fill="currentColor"
-                x="-10"
+                x="10"
               >
                 75
               </text>
@@ -6058,13 +6058,13 @@ exports[`Line chart rendering Should render the line chart with secondary Y axis
             >
               <line
                 stroke="currentColor"
-                x2="570"
+                x2="-570"
               />
               <text
                 aria-hidden="true"
                 dy="0.32em"
                 fill="currentColor"
-                x="-10"
+                x="10"
               >
                 100
               </text>