fix(react-charts): fix x-axis and y-axis tick bugs in v9 charts (microsoft#35188)

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

Author: Anush2303

change/@fluentui-react-charts-29898e47-c08a-4b60-94f6-eb13eb19bf3b.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix v9 bugs",
+  "packageName": "@fluentui/react-charts",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

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

@@ -52,7 +52,9 @@ export const CartesianChart: React.FunctionComponent<ModifiedCartesianChartProps
   const _isFirstRender = React.useRef<boolean>(true);
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   let _xScale: any;
-  let isIntegralDataset: boolean = true;
+  const isIntegralDataset = React.useMemo(() => {
+    return !props.points.some((point: { y: number }) => point.y % 1 !== 0);
+  }, [props.points]);
   let _tooltipId: string = useId('tooltip_');
   /* Used for when WrapXAxisLabels props appeared.
    * To display the total word (space separated words), Need to have more space than usual.
@@ -141,8 +143,6 @@ export const CartesianChart: React.FunctionComponent<ModifiedCartesianChartProps
     } else if (startFromX !== 0) {
       setStartFromX(0);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    isIntegralDataset = !props.points.some((point: { y: number }) => point.y % 1 !== 0);
     return () => {
       cancelAnimationFrame(_reqID);
     };
@@ -168,10 +168,6 @@ export const CartesianChart: React.FunctionComponent<ModifiedCartesianChartProps
     } else if (startFromX !== 0) {
       setStartFromX(0);
     }
-    if (prevProps !== null && prevProps.points !== props.points) {
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      isIntegralDataset = !props.points.some((point: { y: number }) => point.y % 1 !== 0);
-    }
   }, [props, prevProps]);
 
   React.useImperativeHandle(

packages/charts/react-charts/library/src/utilities/utilities.ts

@@ -1478,16 +1478,17 @@ export function domainRangeOfDateForAreaLineScatterVerticalBarCharts(
     // So, Finding smallest and largest dates
     sDate = d3Min([...tickValues, sDate])!;
     lDate = d3Max([...tickValues, lDate])!;
-  } else {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    sDate = d3Min(points as any[], point => point.x as Date)!;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    lDate = d3Max(points as any[], point => point.x as Date)!;
+
     if (hasMarkersMode || chartType === ChartTypes.ScatterChart) {
       const xPadding = getDomainPaddingForMarkers(sDate.getTime(), lDate.getTime());
       sDate = new Date(sDate.getTime() - xPadding.start);
       lDate = new Date(lDate.getTime() + xPadding.end);
     }
+  } else {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    sDate = d3Min(points as any[], point => point.x as Date)!;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    lDate = d3Max(points as any[], point => point.x as Date)!;
   }
 
   const rStartValue = margins.left!;