feat(declarative-charts): Support rounded ticks for y-axis (#33730)

microsoft · Jan 30, 2025 · 669de2d · 669de2d
1 parent 82cc27f
commit 669de2d
Show file tree

Hide file tree

Showing 9 changed files with 1,349 additions and 1,201 deletions.
diff --git a/change/@fluentui-react-charting-5013f021-6089-48d8-86d3-c8c3b618edb3.json b/change/@fluentui-react-charting-5013f021-6089-48d8-86d3-c8c3b618edb3.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Support rounded ticks in declarative charts",
+  "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
@@ -289,6 +289,7 @@ export interface ICartesianChartProps {
     noOfCharsToTruncate?: number;
     parentRef?: HTMLElement | null;
     rotateXAxisLables?: boolean;
+    roundedTicks?: boolean;
     secondaryYAxistitle?: string;
     secondaryYScaleOptions?: {
         yMinValue?: number;
@@ -1080,7 +1081,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, supportNegativeData?: boolean) => ScaleLinear<number, number, never>;
+    createYAxis: (yAxisParams: IYAxisParams, isRtl: boolean, axisData: IAxisData, isIntegralDataset: boolean, useSecondaryYScale?: boolean, supportNegativeData?: boolean, roundedTicks?: boolean) => ScaleLinear<number, number, never>;
     culture?: string;
     customizedCallout?: any;
     datasetForXAxisDomain?: string[];

diff --git a/packages/charts/react-charting/src/components/CommonComponents/CartesianChart.base.tsx b/packages/charts/react-charting/src/components/CommonComponents/CartesianChart.base.tsx
@@ -413,6 +413,7 @@ export class CartesianChartBase
             this.isIntegralDataset,
             true,
             this.props.supportNegativeData!,
+            this.props.roundedTicks!,
           );
         }
         yScale = this.props.createYAxis(
@@ -422,6 +423,7 @@ export class CartesianChartBase
           this.isIntegralDataset,
           false,
           this.props.supportNegativeData!,
+          this.props.roundedTicks!,
         );
       }
 

diff --git a/packages/charts/react-charting/src/components/CommonComponents/CartesianChart.types.ts b/packages/charts/react-charting/src/components/CommonComponents/CartesianChart.types.ts
@@ -447,6 +447,12 @@ export interface ICartesianChartProps {
    */
   supportNegativeData?: boolean;
 
+  /**
+   * @default false
+   * The prop used to decide rounded ticks on y axis
+   */
+  roundedTicks?: boolean;
+
   /**
    * Optional callback to access the IChart interface. Use this instead of ref for accessing
    * the public methods and properties of the component.
@@ -665,6 +671,7 @@ export interface IModifiedCartesianChartProps extends ICartesianChartProps {
     isIntegralDataset: boolean,
     useSecondaryYScale?: boolean,
     supportNegativeData?: boolean,
+    roundedTicks?: boolean,
   ) => ScaleLinear<number, number, never>;
 
   /**

diff --git a/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts b/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts
@@ -29,6 +29,7 @@ import { DataVizPalette, getColorFromToken, getNextColor } from '../../utilities
 import { GaugeChartVariant, IGaugeChartProps, IGaugeChartSegment } from '../GaugeChart/index';
 import { IGroupedVerticalBarChartProps } from '../GroupedVerticalBarChart/index';
 import { IVerticalBarChartProps } from '../VerticalBarChart/index';
+import { findNumericMinMaxOfY } from '../../utilities/utilities';
 import { Layout, PlotlySchema, PieData, PlotData, SankeyData } from './PlotlySchema';
 import type { Datum, TypedArray } from './PlotlySchema';
 import { timeParse } from 'd3-time-format';
@@ -525,6 +526,7 @@ export const transformPlotlyJsonToScatterChartProps = (
     } as ILineChartPoints;
   });
 
+  const yMinMaxValues = findNumericMinMaxOfY(chartData);
   const { chartTitle, xAxisTitle, yAxisTitle } = getTitles(input.layout);
 
   const chartProps: IChartProps = {
@@ -550,6 +552,9 @@ export const transformPlotlyJsonToScatterChartProps = (
       yAxisTitle,
       secondaryYAxistitle: secondaryYAxisValues.secondaryYAxistitle,
       secondaryYScaleOptions: secondaryYAxisValues.secondaryYScaleOptions,
+      roundedTicks: true,
+      yMinValue: yMinMaxValues.startValue,
+      yMaxValue: yMinMaxValues.endValue,
     } as ILineChartProps;
   }
 };