fix(react-charting): port changes from v9 to v8 (#35595)

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

Author: Anush2303

change/@fluentui-react-charting-7925662b-9688-4022-9347-a3e7ebb7c42d.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "port changes from v9 to v8 using custom github agent",
+  "packageName": "@fluentui/react-charting",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-charts-4fe41249-5868-447b-80ae-10aee8a78584.json

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

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

@@ -458,6 +458,7 @@ export interface ICartesianChartProps {
     xAxistickSize?: number;
     xAxisTitle?: string;
     xMaxValue?: number;
+    xMinValue?: number;
     xScaleType?: AxisScaleType;
     yAxis?: AxisProps;
     yAxisAnnotation?: string;

packages/charts/react-charting/src/components/CommonComponents/CartesianChart.base.tsx

@@ -244,6 +244,8 @@ export class CartesianChartBase
         containerWidth: this.state.containerWidth,
         hideTickOverlap: this.props.hideTickOverlap,
         calcMaxLabelWidth: this._calcMaxLabelWidthWithTransform,
+        xMinValue: this.props.xMinValue,
+        xMaxValue: this.props.xMaxValue,
         ...this.props.xAxis,
       };
 

packages/charts/react-charting/src/components/CommonComponents/CartesianChart.types.ts

@@ -322,6 +322,11 @@ export interface ICartesianChartProps {
    */
   yMaxValue?: number;
 
+  /**
+   * minimum data value point in x-axis (for numeric x-axis)
+   */
+  xMinValue?: number;
+
   /**
    * maximum data value point in x-axis
    */

packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts

@@ -212,6 +212,18 @@ const getYMinMaxValues = (series: Data, layout: Partial<Layout> | undefined) =>
   return {};
 };
 
+const getXMinMaxValues = (series: Data, layout: Partial<Layout> | undefined) => {
+  const range = getXAxisProperties(series, layout)?.range;
+  if (range && range.length === 2) {
+    return {
+      xMinValue: range[0],
+      xMaxValue: range[1],
+      showRoundOffXTickValues: false,
+    };
+  }
+  return {};
+};
+
 const getYAxisProperties = (series: Data, layout: Partial<Layout> | undefined): Partial<LayoutAxis> | undefined => {
   return layout?.yaxis;
 };
@@ -1491,6 +1503,14 @@ export const transformPlotlyJsonToVSBCProps = (
     .forEach((shape, shapeIdx) => {
       const lineColor = shape.line?.color;
       const resolveX = (val: Datum) => {
+        if (shape.xref === 'x domain') {
+          if (val === 0) {
+            return xCategories[0];
+          }
+          if (val === 1) {
+            return xCategories[xCategories.length - 1];
+          }
+        }
         if (typeof val === 'number' && Array.isArray(xCategories)) {
           if (xCategories[val] !== undefined) {
             return xCategories[val];
@@ -1563,7 +1583,9 @@ export const transformPlotlyJsonToVSBCProps = (
     showYAxisLables: true,
     noOfCharsToTruncate: 20,
     showYAxisLablesTooltip: true,
+    roundedTicks: true,
     wrapXAxisLables: typeof vsbcData[0]?.xAxisPoint === 'string',
+    ...getXMinMaxValues(input.data[0], input.layout),
     ...getTitles(input.layout),
     ...getAxisCategoryOrderProps(input.data, input.layout),
     ...getYMinMaxValues(input.data[0], input.layout),
@@ -1745,8 +1767,10 @@ export const transformPlotlyJsonToGVBCProps = (
     hideTickOverlap: true,
     hideLegend,
     roundCorners: true,
+    roundedTicks: true,
     wrapXAxisLables: true,
     showYAxisLables: true,
+    ...getXMinMaxValues(processedInput.data[0], processedInput.layout),
     ...getTitles(processedInput.layout),
     ...getAxisCategoryOrderProps(processedInput.data, processedInput.layout),
     ...getYMinMaxValues(processedInput.data[0], processedInput.layout),
@@ -1867,8 +1891,10 @@ export const transformPlotlyJsonToVBCProps = (
     maxBarWidth: 50,
     hideLegend,
     roundCorners: true,
+    roundedTicks: true,
     wrapXAxisLables: typeof vbcData[0]?.x === 'string',
     showYAxisLables: true,
+    ...getXMinMaxValues(input.data[0], input.layout),
     ...getTitles(input.layout),
     ...getAxisCategoryOrderProps(input.data, input.layout),
     ...getYMinMaxValues(input.data[0], input.layout),
@@ -2155,6 +2181,8 @@ const transformPlotlyJsonToScatterTraceProps = (
     optimizeLargeData: numDataPoints > 1000,
     wrapXAxisLables: shouldWrapLabels,
     showYAxisLables: true,
+    roundedTicks: true,
+    ...getXMinMaxValues(input.data[0], input.layout),
     ...getTitles(input.layout),
     ...getXAxisTickFormat(input.data[0], input.layout),
     ...yAxisTickFormat,
@@ -2172,7 +2200,6 @@ const transformPlotlyJsonToScatterTraceProps = (
   } else {
     return {
       data: isScatterChart ? scatterChartProps : chartProps,
-      roundedTicks: true,
       enableReflow: false,
       ...commonProps,
       ...yMinMax,
@@ -2265,6 +2292,8 @@ export const transformPlotlyJsonToHorizontalBarWithAxisProps = (
     noOfCharsToTruncate: 20,
     showYAxisLablesTooltip: true,
     roundCorners: true,
+    roundedTicks: true,
+    ...getXMinMaxValues(input.data[0], input.layout),
     ...getTitles(input.layout),
     ...getAxisCategoryOrderProps(input.data, input.layout),
     ...getBarProps(input.data, input.layout, true),
@@ -2631,6 +2660,14 @@ export const transformPlotlyJsonToSankeyProps = (
     colorMap,
     isDarkTheme,
   );
+  const extractedLinkColors = extractColor(
+    input.layout?.template?.layout?.colorway,
+    colorwayType,
+    link?.color,
+    colorMap,
+    isDarkTheme,
+  );
+
   const sankeyChartData = {
     nodes: node.label?.map((label: string, index: number) => {
       const color = resolveColor(
@@ -2650,8 +2687,17 @@ export const transformPlotlyJsonToSankeyProps = (
     }),
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     links: validLinks.map((validLink: any, index: number) => {
+      const color = resolveColor(
+        extractedLinkColors,
+        index,
+        validLink.target,
+        colorMap,
+        input.layout?.template?.layout?.colorway,
+        isDarkTheme,
+      );
       return {
         ...validLink,
+        color,
       };
     }),
   } as ISankeyChartData;