feat(react-charts): add support for rounded X Tick Values

change/@fluentui-react-charts-6ab85af9-ef9d-4b32-bbc9-d62ce02b63b7.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "add support for x rounded tick values ",
+  "packageName": "@fluentui/react-charts",
+  "email": "anushgupta@microsoft.com",
+  "dependentChangeType": "patch"
+}

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

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

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

@@ -217,6 +217,8 @@ export const CartesianChart: React.FunctionComponent<ModifiedCartesianChartProps
       containerWidth: containerWidth,
       hideTickOverlap: props.rotateXAxisLables ? false : hideTickOverlap,
       calcMaxLabelWidth: _calcMaxLabelWidthWithTransform,
+      xMinValue: props.xMinValue,
+      xMaxValue: props.xMaxValue,
       ...props.xAxis,
     };
 

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

@@ -273,7 +273,12 @@ export interface CartesianChartProps {
   yMaxValue?: number;
 
   /**
-   * maximum data value point in x-axis
+   * minimum data value point in x-axis (for numeric x-axis)
+   */
+  xMinValue?: number;
+
+  /**
+   * maximum data value point in x-axis (for numeric x-axis)
    */
   xMaxValue?: number;
 

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

@@ -214,6 +214,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;
 };
@@ -1486,6 +1498,7 @@ export const transformPlotlyJsonToVSBCProps = (
     noOfCharsToTruncate: 20,
     showYAxisLablesTooltip: true,
     roundedTicks: true,
+    ...getXMinMaxValues(input.data[0], input.layout),
     ...getTitles(input.layout),
     ...getXAxisTickFormat(input.data[0], input.layout),
     ...yAxisTickFormat,
@@ -1660,6 +1673,8 @@ export const transformPlotlyJsonToGVBCProps = (
     hideLegend,
     roundCorners: true,
     showYAxisLables: true,
+    roundedTicks: true,
+    ...getXMinMaxValues(processedInput.data[0], processedInput.layout),
     ...getTitles(processedInput.layout),
     ...getAxisCategoryOrderProps(processedInput.data, processedInput.layout),
     ...getYMinMaxValues(processedInput.data[0], processedInput.layout),
@@ -1771,6 +1786,8 @@ export const transformPlotlyJsonToVBCProps = (
     hideLegend,
     roundCorners: true,
     showYAxisLables: true,
+    roundedTicks: true,
+    ...getXMinMaxValues(input.data[0], input.layout),
     ...getTitles(input.layout),
     ...getYMinMaxValues(input.data[0], input.layout),
     ...getAxisCategoryOrderProps(input.data, input.layout),
@@ -2051,6 +2068,8 @@ const transformPlotlyJsonToScatterTraceProps = (
     wrapXAxisLabels: shouldWrapLabels,
     optimizeLargeData: numDataPoints > 1000,
     showYAxisLables: true,
+    roundedTicks: true,
+    ...getXMinMaxValues(input.data[0], input.layout),
     ...getTitles(input.layout),
     ...getXAxisTickFormat(input.data[0], input.layout),
     ...yAxisTickFormat,
@@ -2068,7 +2087,6 @@ const transformPlotlyJsonToScatterTraceProps = (
   } else {
     return {
       data: isScatterChart ? scatterChartProps : chartProps,
-      roundedTicks: true,
       ...commonProps,
       ...yMinMax,
       ...(isScatterChart
@@ -2158,6 +2176,8 @@ export const transformPlotlyJsonToHorizontalBarWithAxisProps = (
     showYAxisLablesTooltip: true,
     hideLegend,
     roundCorners: true,
+    roundedTicks: true,
+    ...getXMinMaxValues(input.data[0], input.layout),
     ...getTitles(input.layout),
     ...getAxisCategoryOrderProps(input.data, input.layout),
     ...getBarProps(input.data, input.layout, true),

packages/charts/react-charts/library/src/components/DeclarativeChart/__snapshots__/PlotlySchemaAdapterUT.test.tsx.snap

@@ -334,6 +334,8 @@ Object {
   "hideTickOverlap": true,
   "mode": "plotly",
   "roundCorners": true,
+  "roundedTicks": true,
+  "showRoundOffXTickValues": false,
   "showYAxisLables": true,
   "width": 850,
   "wrapXAxisLables": true,
@@ -345,6 +347,8 @@ Object {
     "May",
   ],
   "xAxisTitle": "Votes",
+  "xMaxValue": 1830.6731869091736,
+  "xMinValue": -198.2562959184288,
   "yAxisCategoryOrder": Array [
     2000,
     2100,
@@ -3037,12 +3041,16 @@ Object {
   "hideTickOverlap": true,
   "noOfCharsToTruncate": 20,
   "roundCorners": true,
+  "roundedTicks": true,
   "secondaryYAxistitle": "",
+  "showRoundOffXTickValues": false,
   "showYAxisLables": true,
   "showYAxisLablesTooltip": true,
   "width": 850,
   "xAxisCategoryOrder": "data",
   "xAxisTitle": "Votes",
+  "xMaxValue": 1830.6731869091736,
+  "xMinValue": -198.2562959184288,
   "yAxisCategoryOrder": Array [
     "Laravel",
     "Symfony2",
@@ -5039,6 +5047,7 @@ Object {
   "hideTickOverlap": true,
   "mode": "tonexty",
   "optimizeLargeData": false,
+  "roundedTicks": true,
   "showYAxisLables": true,
   "supportNegativeData": true,
   "useUTC": false,
@@ -5479,6 +5488,7 @@ Object {
   "maxBarWidth": 50,
   "mode": "histogram",
   "roundCorners": true,
+  "roundedTicks": true,
   "showYAxisLables": true,
   "width": undefined,
   "wrapXAxisLables": false,

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

@@ -176,6 +176,8 @@ export interface IXAxisParams extends AxisProps {
   containerWidth: number;
   hideTickOverlap?: boolean;
   calcMaxLabelWidth: (x: (string | number)[]) => number;
+  xMaxValue?: number;
+  xMinValue?: number;
 }
 export interface ITickParams {
   tickValues?: Date[] | number[] | string[];
@@ -263,8 +265,12 @@ export function createNumericXAxis(
     tick0,
     tickText,
   } = xAxisParams;
+  const dStartValue = domainNRangeValues.dStartValue as number;
+  const dEndValue = domainNRangeValues.dEndValue as number;
+  const finalXmin = xAxisParams.xMinValue !== undefined ? Math.min(dStartValue, xAxisParams.xMinValue) : dStartValue;
+  const finalXmax = xAxisParams.xMaxValue !== undefined ? Math.max(dEndValue, xAxisParams.xMaxValue) : dEndValue;
   const xAxisScale = createNumericScale(scaleType)
-    .domain([domainNRangeValues.dStartValue, domainNRangeValues.dEndValue])
+    .domain([finalXmin, finalXmax])
     .range([domainNRangeValues.rStartValue, domainNRangeValues.rEndValue]);
   showRoundOffXTickValues && xAxisScale.nice();