diff --git a/change/@fluentui-react-charts-6ab85af9-ef9d-4b32-bbc9-d62ce02b63b7.json b/change/@fluentui-react-charts-6ab85af9-ef9d-4b32-bbc9-d62ce02b63b7.json new file mode 100644 index 00000000000000..dd958190808798 --- /dev/null +++ b/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" +} diff --git a/packages/charts/react-charts/library/etc/react-charts.api.md b/packages/charts/react-charts/library/etc/react-charts.api.md index a84062e5582b14..d7324ac709eecc 100644 --- a/packages/charts/react-charts/library/etc/react-charts.api.md +++ b/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; diff --git a/packages/charts/react-charts/library/src/components/CommonComponents/CartesianChart.tsx b/packages/charts/react-charts/library/src/components/CommonComponents/CartesianChart.tsx index ebaaf415965fe4..dc2325f6d6267c 100644 --- a/packages/charts/react-charts/library/src/components/CommonComponents/CartesianChart.tsx +++ b/packages/charts/react-charts/library/src/components/CommonComponents/CartesianChart.tsx @@ -217,6 +217,8 @@ export const CartesianChart: React.FunctionComponent | undefined) => return {}; }; +const getXMinMaxValues = (series: Data, layout: Partial | 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 | undefined): Partial | 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), diff --git a/packages/charts/react-charts/library/src/components/DeclarativeChart/__snapshots__/PlotlySchemaAdapterUT.test.tsx.snap b/packages/charts/react-charts/library/src/components/DeclarativeChart/__snapshots__/PlotlySchemaAdapterUT.test.tsx.snap index e3c4a9c32c1e8b..c3d211e87f2413 100644 --- a/packages/charts/react-charts/library/src/components/DeclarativeChart/__snapshots__/PlotlySchemaAdapterUT.test.tsx.snap +++ b/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, diff --git a/packages/charts/react-charts/library/src/utilities/utilities.ts b/packages/charts/react-charts/library/src/utilities/utilities.ts index d4ab833d6b146f..bd592ab4e0f0c8 100644 --- a/packages/charts/react-charts/library/src/utilities/utilities.ts +++ b/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();