From 96671504b702289de6476e4803aeca06a0bcfd48 Mon Sep 17 00:00:00 2001 From: Anush Date: Fri, 14 Nov 2025 13:34:36 +0530 Subject: [PATCH 1/9] add support for xmin and xmax and roundedXTicks --- .../library/etc/react-charts.api.md | 6 ++++-- .../CommonComponents/CartesianChart.tsx | 8 ++++++-- .../CommonComponents/CartesianChart.types.ts | 17 ++++++++++++++--- .../DeclarativeChart/PlotlySchemaAdapter.ts | 3 ++- .../PlotlySchemaAdapterUT.test.tsx.snap | 6 ++++-- .../library/src/utilities/utilities.ts | 17 +++++++++++++---- .../VerticalStackedBarChartDefault.stories.tsx | 4 ++-- .../VerticalStackedBarChartNegative.stories.tsx | 4 ++-- 8 files changed, 47 insertions(+), 18 deletions(-) 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 a84062e5582b1..cb6134a3e476b 100644 --- a/packages/charts/react-charts/library/etc/react-charts.api.md +++ b/packages/charts/react-charts/library/etc/react-charts.api.md @@ -216,7 +216,8 @@ export interface CartesianChartProps { mode: 'none' | 'min-width'; }; rotateXAxisLables?: boolean; - roundedTicks?: boolean; + roundedXTicks?: boolean; + roundedYTicks?: boolean; secondaryYAxistitle?: string; secondaryYScaleOptions?: { yMinValue?: number; @@ -244,6 +245,7 @@ export interface CartesianChartProps { xAxistickSize?: number; xAxisTitle?: string; xMaxValue?: number; + xMinValue?: number; xScaleType?: AxisScaleType; yAxis?: AxisProps; yAxisAnnotation?: string; @@ -1416,7 +1418,7 @@ export interface ModifiedCartesianChartProps extends CartesianChartProps { chartType: ChartTypes; children(props: ChildProps): React_2.ReactNode; createStringYAxis: (yAxisParams: IYAxisParams, dataPoints: string[], isRtl: boolean, axisData: IAxisData, barWidth: number | undefined, chartType?: ChartTypes) => ScaleBand; - createYAxis: (yAxisParams: IYAxisParams, isRtl: boolean, axisData: IAxisData, isIntegralDataset: boolean, chartType: ChartTypes, useSecondaryYScale?: boolean, roundedTicks?: boolean, scaleType?: AxisScaleType, _useRtl?: boolean) => ScaleLinear; + createYAxis: (yAxisParams: IYAxisParams, isRtl: boolean, axisData: IAxisData, isIntegralDataset: boolean, chartType: ChartTypes, useSecondaryYScale?: boolean, roundedYTicks?: boolean, scaleType?: AxisScaleType, _useRtl?: boolean) => ScaleLinear; culture?: string; customizedCallout?: any; datasetForXAxisDomain?: 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 ebaaf415965fe..d1cefc14e4eae 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 ScaleLinear; diff --git a/packages/charts/react-charts/library/src/components/DeclarativeChart/PlotlySchemaAdapter.ts b/packages/charts/react-charts/library/src/components/DeclarativeChart/PlotlySchemaAdapter.ts index d7d5191ef66f3..c75d296833809 100644 --- a/packages/charts/react-charts/library/src/components/DeclarativeChart/PlotlySchemaAdapter.ts +++ b/packages/charts/react-charts/library/src/components/DeclarativeChart/PlotlySchemaAdapter.ts @@ -2067,7 +2067,8 @@ const transformPlotlyJsonToScatterTraceProps = ( } else { return { data: isScatterChart ? scatterChartProps : chartProps, - roundedTicks: true, + roundedYTicks: true, + roundedXTicks: true, ...commonProps, ...yMinMax, ...(isScatterChart 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 77f956db3828c..956ea0b59049d 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 @@ -4620,7 +4620,8 @@ Object { "hideLegend": false, "hideTickOverlap": true, "optimizeLargeData": false, - "roundedTicks": true, + "roundedXTicks": true, + "roundedYTicks": true, "showYAxisLables": true, "supportNegativeData": true, "useUTC": false, @@ -5171,7 +5172,8 @@ Object { "hideLegend": false, "hideTickOverlap": true, "optimizeLargeData": false, - "roundedTicks": true, + "roundedXTicks": true, + "roundedYTicks": true, "showYAxisLables": true, "showYAxisLablesTooltip": true, "supportNegativeData": true, diff --git a/packages/charts/react-charts/library/src/utilities/utilities.ts b/packages/charts/react-charts/library/src/utilities/utilities.ts index d4ab833d6b146..ef45ac2ae2b25 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[]; @@ -246,6 +248,7 @@ export function createNumericXAxis( culture?: string, scaleType?: AxisScaleType, _useRtl?: boolean, + roundedXTicks: boolean = false, ): { xScale: ScaleLinear; tickValues: string[]; @@ -263,8 +266,12 @@ export function createNumericXAxis( tick0, tickText, } = xAxisParams; + const dStartValue = typeof domainNRangeValues.dStartValue === 'number' ? domainNRangeValues.dStartValue : 0; + const dEndValue = typeof domainNRangeValues.dEndValue === 'number' ? domainNRangeValues.dEndValue : 0; + 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([dStartValue, dEndValue]) .range([domainNRangeValues.rStartValue, domainNRangeValues.rEndValue]); showRoundOffXTickValues && xAxisScale.nice(); @@ -295,7 +302,9 @@ export function createNumericXAxis( xAxis.tickSizeInner(-(xAxisParams.containerHeight - xAxisParams.margins.top!)); } let customTickValues: number[] | undefined; - if (tickParams.tickValues) { + if (roundedXTicks && scaleType !== 'log') { + customTickValues = prepareDatapoints(finalXmax, finalXmin, tickCount, true, roundedXTicks); + } else if (tickParams.tickValues) { customTickValues = tickParams.tickValues as number[]; } else if (tickStep) { customTickValues = generateNumericTicks(scaleType, tickStep, tick0, xAxisScale.domain()); @@ -774,7 +783,7 @@ export function createNumericYAxis( isIntegralDataset: boolean, chartType: ChartTypes, useSecondaryYScale: boolean = false, - roundedTicks: boolean = false, + roundedYTicks: boolean = false, scaleType?: AxisScaleType, _useRtl?: boolean, ): ScaleLinear { @@ -802,7 +811,7 @@ export function createNumericYAxis( const tempVal = maxOfYVal || yMinMaxValues.endValue || 0; const finalYmax = tempVal > yMaxValue ? tempVal : yMaxValue!; const finalYmin = Math.min(yMinMaxValues.startValue || 0, yMinValue || 0); - const domainValues = prepareDatapoints(finalYmax, finalYmin, yAxisTickCount, isIntegralDataset, roundedTicks); + const domainValues = prepareDatapoints(finalYmax, finalYmin, yAxisTickCount, isIntegralDataset, roundedYTicks); let yMin = finalYmin; let yMax = domainValues[domainValues.length - 1]; if (chartType === ChartTypes.ScatterChart) { diff --git a/packages/charts/react-charts/stories/src/VerticalStackedBarChart/VerticalStackedBarChartDefault.stories.tsx b/packages/charts/react-charts/stories/src/VerticalStackedBarChart/VerticalStackedBarChartDefault.stories.tsx index 56ee4ede90b02..c15494dea3683 100644 --- a/packages/charts/react-charts/stories/src/VerticalStackedBarChart/VerticalStackedBarChartDefault.stories.tsx +++ b/packages/charts/react-charts/stories/src/VerticalStackedBarChart/VerticalStackedBarChartDefault.stories.tsx @@ -350,7 +350,7 @@ export const VerticalStackedBarDefault = (): JSXElement => { yAxisTitle={showAxisTitles ? 'Variation of number of sales' : undefined} xAxisTitle={showAxisTitles ? 'Number of days' : undefined} roundCorners={roundCorners} - roundedTicks={true} + roundedYTicks={true} styles={{ svgTooltip: classes.svgTooltip }} /> @@ -372,7 +372,7 @@ export const VerticalStackedBarDefault = (): JSXElement => { }} hideLabels={hideLabels} roundCorners={roundCorners} - roundedTicks={true} + roundedYTicks={true} styles={{ svgTooltip: classes.svgTooltip }} /> diff --git a/packages/charts/react-charts/stories/src/VerticalStackedBarChart/VerticalStackedBarChartNegative.stories.tsx b/packages/charts/react-charts/stories/src/VerticalStackedBarChart/VerticalStackedBarChartNegative.stories.tsx index 7f07fffd83fae..fec8d0bb25b68 100644 --- a/packages/charts/react-charts/stories/src/VerticalStackedBarChart/VerticalStackedBarChartNegative.stories.tsx +++ b/packages/charts/react-charts/stories/src/VerticalStackedBarChart/VerticalStackedBarChartNegative.stories.tsx @@ -370,7 +370,7 @@ export const VerticalStackedBarNegative = (): JSXElement => { yAxisTitle={showAxisTitles ? 'Variation of number of sales' : undefined} xAxisTitle={showAxisTitles ? 'Number of days' : undefined} roundCorners={roundCorners} - roundedTicks={true} + roundedYTicks={true} styles={{ svgTooltip: classes.svgTooltip }} /> @@ -393,7 +393,7 @@ export const VerticalStackedBarNegative = (): JSXElement => { hideLabels={hideLabels} reflowProps={{ mode: 'min-width' }} roundCorners={roundCorners} - roundedTicks={true} + roundedYTicks={true} styles={{ svgTooltip: classes.svgTooltip }} /> From 8a97d7d5c667ec7d1d3ec74353d4360cd4d6f756 Mon Sep 17 00:00:00 2001 From: Anush Date: Fri, 14 Nov 2025 13:40:11 +0530 Subject: [PATCH 2/9] Add change file --- ...-react-charts-6ab85af9-ef9d-4b32-bbc9-d62ce02b63b7.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-charts-6ab85af9-ef9d-4b32-bbc9-d62ce02b63b7.json 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 0000000000000..dd95819080879 --- /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" +} From de0a10e88ed53c3a0be2e6e9f250ae6e6d100cbd Mon Sep 17 00:00:00 2001 From: Anush Date: Mon, 17 Nov 2025 12:24:46 +0530 Subject: [PATCH 3/9] honor xMax and xMin coming from schema --- .../src/components/CommonComponents/CartesianChart.tsx | 4 ++-- .../src/components/DeclarativeChart/PlotlySchemaAdapter.ts | 3 +++ .../charts/react-charts/library/src/utilities/utilities.ts | 6 +++--- 3 files changed, 8 insertions(+), 5 deletions(-) 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 d1cefc14e4eae..8c632383b4a48 100644 --- a/packages/charts/react-charts/library/src/components/CommonComponents/CartesianChart.tsx +++ b/packages/charts/react-charts/library/src/components/CommonComponents/CartesianChart.tsx @@ -217,8 +217,8 @@ export const CartesianChart: React.FunctionComponent Date: Mon, 17 Nov 2025 16:07:50 +0530 Subject: [PATCH 4/9] resolve comments --- .../DeclarativeChart/PlotlySchemaAdapter.ts | 11 ++++++++--- .../__snapshots__/PlotlySchemaAdapterUT.test.tsx.snap | 5 ++++- .../react-charts/library/src/utilities/utilities.ts | 7 ++++--- 3 files changed, 16 insertions(+), 7 deletions(-) diff --git a/packages/charts/react-charts/library/src/components/DeclarativeChart/PlotlySchemaAdapter.ts b/packages/charts/react-charts/library/src/components/DeclarativeChart/PlotlySchemaAdapter.ts index 13872a58d070e..d02c2fafde758 100644 --- a/packages/charts/react-charts/library/src/components/DeclarativeChart/PlotlySchemaAdapter.ts +++ b/packages/charts/react-charts/library/src/components/DeclarativeChart/PlotlySchemaAdapter.ts @@ -1485,7 +1485,10 @@ export const transformPlotlyJsonToVSBCProps = ( showYAxisLables: true, noOfCharsToTruncate: 20, showYAxisLablesTooltip: true, - roundedTicks: true, + roundedYTicks: true, + ...(input.layout?.xaxis?.range + ? { xMinValue: input.layout.xaxis.range[0], xMaxValue: input.layout.xaxis.range[1] } + : { roundedXTicks: true }), ...getTitles(input.layout), ...getXAxisTickFormat(input.data[0], input.layout), ...yAxisTickFormat, @@ -2069,10 +2072,9 @@ const transformPlotlyJsonToScatterTraceProps = ( return { data: isScatterChart ? scatterChartProps : chartProps, roundedYTicks: true, - roundedXTicks: true, ...(input.layout?.xaxis?.range ? { xMinValue: input.layout.xaxis.range[0], xMaxValue: input.layout.xaxis.range[1] } - : {}), + : { roundedXTicks: true }), ...commonProps, ...yMinMax, ...(isScatterChart @@ -2162,6 +2164,9 @@ export const transformPlotlyJsonToHorizontalBarWithAxisProps = ( showYAxisLablesTooltip: true, hideLegend, roundCorners: true, + ...(input.layout?.xaxis?.range + ? { xMinValue: input.layout.xaxis.range[0], xMaxValue: input.layout.xaxis.range[1] } + : { roundedXTicks: true }), ...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 9fea9fd26c6fa..1483604fe7916 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 @@ -3043,6 +3043,8 @@ Object { "width": 850, "xAxisCategoryOrder": "data", "xAxisTitle": "Votes", + "xMaxValue": 1830.6731869091736, + "xMinValue": -198.2562959184288, "yAxisCategoryOrder": Array [ "Laravel", "Symfony2", @@ -5595,7 +5597,8 @@ Object { "mode": "plotly", "noOfCharsToTruncate": 20, "roundCorners": true, - "roundedTicks": true, + "roundedXTicks": true, + "roundedYTicks": true, "showYAxisLables": true, "showYAxisLablesTooltip": true, "width": undefined, diff --git a/packages/charts/react-charts/library/src/utilities/utilities.ts b/packages/charts/react-charts/library/src/utilities/utilities.ts index 8fcc10bbefe27..ee1d8a7178298 100644 --- a/packages/charts/react-charts/library/src/utilities/utilities.ts +++ b/packages/charts/react-charts/library/src/utilities/utilities.ts @@ -268,8 +268,8 @@ export function createNumericXAxis( } = xAxisParams; const dStartValue = typeof domainNRangeValues.dStartValue === 'number' ? domainNRangeValues.dStartValue : 0; const dEndValue = typeof domainNRangeValues.dEndValue === 'number' ? domainNRangeValues.dEndValue : 0; - const finalXmin = xAxisParams.xMinValue !== undefined ? xAxisParams.xMinValue : dStartValue; - const finalXmax = xAxisParams.xMaxValue !== undefined ? xAxisParams.xMaxValue : dEndValue; + 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([finalXmin, finalXmax]) .range([domainNRangeValues.rStartValue, domainNRangeValues.rEndValue]); @@ -2223,7 +2223,8 @@ export const getDomainPaddingForMarkers = ( }; } - const defaultPadding = (maxVal - minVal) * 0.1; + // don't add padding if the calculated padding is greater than minVal to avoid unnecessary extra tick value + const defaultPadding = (maxVal - minVal) * 0.1 > minVal ? 0 : (maxVal - minVal) * 0.1; return { start: defaultPadding, end: defaultPadding, From 21c0956a7b92c442a0c98b04184e9807f9560e00 Mon Sep 17 00:00:00 2001 From: Anush Date: Tue, 18 Nov 2025 12:45:28 +0530 Subject: [PATCH 5/9] refine logic --- .../library/etc/react-charts.api.md | 3 +- .../CommonComponents/CartesianChart.tsx | 6 ++-- .../CommonComponents/CartesianChart.types.ts | 8 +----- .../DeclarativeChart/PlotlySchemaAdapter.ts | 28 +++++++++++++------ .../PlotlySchemaAdapterUT.test.tsx.snap | 10 +++---- .../library/src/utilities/utilities.ts | 8 ++---- 6 files changed, 30 insertions(+), 33 deletions(-) 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 cb6134a3e476b..6dd0babaab333 100644 --- a/packages/charts/react-charts/library/etc/react-charts.api.md +++ b/packages/charts/react-charts/library/etc/react-charts.api.md @@ -216,8 +216,7 @@ export interface CartesianChartProps { mode: 'none' | 'min-width'; }; rotateXAxisLables?: boolean; - roundedXTicks?: boolean; - roundedYTicks?: boolean; + roundedTicks?: boolean; secondaryYAxistitle?: string; secondaryYScaleOptions?: { yMinValue?: number; 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 8c632383b4a48..dc2325f6d6267 100644 --- a/packages/charts/react-charts/library/src/components/CommonComponents/CartesianChart.tsx +++ b/packages/charts/react-charts/library/src/components/CommonComponents/CartesianChart.tsx @@ -240,7 +240,6 @@ export const CartesianChart: React.FunctionComponent; tickValues: string[]; @@ -302,9 +301,7 @@ export function createNumericXAxis( xAxis.tickSizeInner(-(xAxisParams.containerHeight - xAxisParams.margins.top!)); } let customTickValues: number[] | undefined; - if (roundedXTicks && scaleType !== 'log') { - customTickValues = prepareDatapoints(finalXmax, finalXmin, tickCount, true, roundedXTicks); - } else if (tickParams.tickValues) { + if (tickParams.tickValues) { customTickValues = tickParams.tickValues as number[]; } else if (tickStep) { customTickValues = generateNumericTicks(scaleType, tickStep, tick0, xAxisScale.domain()); @@ -2223,8 +2220,7 @@ export const getDomainPaddingForMarkers = ( }; } - // don't add padding if the calculated padding is greater than minVal to avoid unnecessary extra tick value - const defaultPadding = (maxVal - minVal) * 0.1 > minVal ? 0 : (maxVal - minVal) * 0.1; + const defaultPadding = (maxVal - minVal) * 0.1; return { start: defaultPadding, end: defaultPadding, From f3a44e1dd748cae02dbb80f540e736996054fadd Mon Sep 17 00:00:00 2001 From: Anush Date: Tue, 18 Nov 2025 13:46:24 +0530 Subject: [PATCH 6/9] fix build errors --- .../library/etc/react-charts.api.md | 2 +- .../CommonComponents/CartesianChart.types.ts | 2 +- .../library/src/utilities/utilities.ts | 4 +- .../DeclarativeChartDefault.stories.tsx | 623 +++++++++++++++++- ...VerticalStackedBarChartDefault.stories.tsx | 4 +- ...erticalStackedBarChartNegative.stories.tsx | 4 +- 6 files changed, 628 insertions(+), 11 deletions(-) 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 6dd0babaab333..d7324ac709eec 100644 --- a/packages/charts/react-charts/library/etc/react-charts.api.md +++ b/packages/charts/react-charts/library/etc/react-charts.api.md @@ -1417,7 +1417,7 @@ export interface ModifiedCartesianChartProps extends CartesianChartProps { chartType: ChartTypes; children(props: ChildProps): React_2.ReactNode; createStringYAxis: (yAxisParams: IYAxisParams, dataPoints: string[], isRtl: boolean, axisData: IAxisData, barWidth: number | undefined, chartType?: ChartTypes) => ScaleBand; - createYAxis: (yAxisParams: IYAxisParams, isRtl: boolean, axisData: IAxisData, isIntegralDataset: boolean, chartType: ChartTypes, useSecondaryYScale?: boolean, roundedYTicks?: boolean, scaleType?: AxisScaleType, _useRtl?: boolean) => ScaleLinear; + createYAxis: (yAxisParams: IYAxisParams, isRtl: boolean, axisData: IAxisData, isIntegralDataset: boolean, chartType: ChartTypes, useSecondaryYScale?: boolean, roundedTicks?: boolean, scaleType?: AxisScaleType, _useRtl?: boolean) => ScaleLinear; culture?: string; customizedCallout?: any; datasetForXAxisDomain?: string[]; diff --git a/packages/charts/react-charts/library/src/components/CommonComponents/CartesianChart.types.ts b/packages/charts/react-charts/library/src/components/CommonComponents/CartesianChart.types.ts index 1ca9c63694c83..fc1b188b69112 100644 --- a/packages/charts/react-charts/library/src/components/CommonComponents/CartesianChart.types.ts +++ b/packages/charts/react-charts/library/src/components/CommonComponents/CartesianChart.types.ts @@ -728,7 +728,7 @@ export interface ModifiedCartesianChartProps extends CartesianChartProps { isIntegralDataset: boolean, chartType: ChartTypes, useSecondaryYScale?: boolean, - roundedYTicks?: boolean, + roundedTicks?: boolean, scaleType?: AxisScaleType, _useRtl?: boolean, ) => ScaleLinear; diff --git a/packages/charts/react-charts/library/src/utilities/utilities.ts b/packages/charts/react-charts/library/src/utilities/utilities.ts index e1e2cbac2bd94..f842d8099f397 100644 --- a/packages/charts/react-charts/library/src/utilities/utilities.ts +++ b/packages/charts/react-charts/library/src/utilities/utilities.ts @@ -780,7 +780,7 @@ export function createNumericYAxis( isIntegralDataset: boolean, chartType: ChartTypes, useSecondaryYScale: boolean = false, - roundedYTicks: boolean = false, + roundedTicks: boolean = false, scaleType?: AxisScaleType, _useRtl?: boolean, ): ScaleLinear { @@ -808,7 +808,7 @@ export function createNumericYAxis( const tempVal = maxOfYVal || yMinMaxValues.endValue || 0; const finalYmax = tempVal > yMaxValue ? tempVal : yMaxValue!; const finalYmin = Math.min(yMinMaxValues.startValue || 0, yMinValue || 0); - const domainValues = prepareDatapoints(finalYmax, finalYmin, yAxisTickCount, isIntegralDataset, roundedYTicks); + const domainValues = prepareDatapoints(finalYmax, finalYmin, yAxisTickCount, isIntegralDataset, roundedTicks); let yMin = finalYmin; let yMax = domainValues[domainValues.length - 1]; if (chartType === ChartTypes.ScatterChart) { diff --git a/packages/charts/react-charts/stories/src/DeclarativeChart/DeclarativeChartDefault.stories.tsx b/packages/charts/react-charts/stories/src/DeclarativeChart/DeclarativeChartDefault.stories.tsx index ad22d6c2da5fa..1a970fa5e351c 100644 --- a/packages/charts/react-charts/stories/src/DeclarativeChart/DeclarativeChartDefault.stories.tsx +++ b/packages/charts/react-charts/stories/src/DeclarativeChart/DeclarativeChartDefault.stories.tsx @@ -137,9 +137,626 @@ const DEFAULT_SCHEMAS = [ }, { key: 'scatterchart', - schema: JSON.parse( - '{"visualizer":"plotly","data":[{"line":{"color":"rgba(255, 153, 51, 1.0)","width":"1.3"},"mode":"markers","name":"Trace 0","type":"scatter","x":["2015-01-01","2015-01-02","2015-01-03","2015-01-04","2015-01-05"],"y":[0.5353935439391206,-0.3510205670171982,-1.3420793330744663,-1.683479706754631,-2.0207368899942826],"marker":{"size":[10,20,15,25,30]}},{"line":{"color":"rgba(55, 128, 191, 1.0)","width":"1.3"},"mode":"markers","name":"Trace 1","type":"scatter","x":["2015-01-01","2015-01-02","2015-01-03","2015-01-04","2015-01-05"],"y":[-2.58404773330316,-1.9162964761259451,-1.8899798841571565,-1.098466181069551,-1.2161136413159992],"marker":{"size":[15,10,20,25,30]}},{"line":{"color":"rgba(50, 171, 96, 1.0)","width":"1.3"},"mode":"markers","name":"Trace 2","type":"scatter","x":["2015-01-01","2015-01-02","2015-01-03","2015-01-04","2015-01-05"],"y":[0.4661114764240781,1.0610769506804194,1.0620659379275244,-0.5603096501263787,-0.22966983294858567],"marker":{"size":[20,15,25,10,30]}}],"layout":{"legend":{"font":{"color":"#4D5663"},"bgcolor":"#F5F6F9"},"xaxis1":{"title":"","tickfont":{"color":"#4D5663"},"gridcolor":"#E1E5ED","titlefont":{"color":"#4D5663"},"zerolinecolor":"#E1E5ED"},"yaxis1":{"title":"Price","tickfont":{"color":"#4D5663"},"zeroline":false,"gridcolor":"#E1E5ED","titlefont":{"color":"#4D5663"},"tickprefix":"$","zerolinecolor":"#E1E5ED"},"plot_bgcolor":"#F5F6F9","paper_bgcolor":"#F5F6F9"},"frames":[],"selectedLegends":["Trace 0","Trace 1"]}', - ), + schema: { + data: [ + { + mode: 'lines+markers', + name: 'Control', + x: [ + 9550, 19101, 28651, 38202, 47752, 57303, 66853, 76404, 85954, 95505, 105055, 95505, 85954, 76404, 66853, + 57303, 47752, 38202, 28651, 19101, 9550, + ], + y: [ + 118.8, 98, 86.6, 79.4, 74.9, 71.1, 67.3, 63.8, 60, 55.8, 52.2, 51.1, 50.4, 49.2, 49.2, 50.9, 52.9, 55.7, + 60.7, 66.5, 85.2, + ], + type: 'scatter', + }, + { + mode: 'lines+markers', + name: 'A1', + x: [ + 9550, 19101, 28651, 38202, 47752, 57303, 66853, 76404, 85954, 95505, 105055, 95505, 85954, 76404, 66853, + 57303, 47752, 38202, 28651, 19101, 9550, + ], + y: [ + 64.6, 66.1, 60.7, 56.9, 53.6, 51.2, 49.2, 47.5, 45.1, 43.1, 40.7, 40.4, 43.2, 38.9, 38.1, 39.1, 40, 42, + 45.3, 48.5, 60.4, + ], + type: 'scatter', + }, + { + mode: 'lines+markers', + name: 'A2', + x: [ + 9550, 19101, 28651, 38202, 47752, 57303, 66853, 76404, 85954, 95505, 105055, 95505, 85954, 76404, 66853, + 57303, 47752, 38202, 28651, 19101, 9550, + ], + y: [ + 70.1, 68.6, 62.5, 58, 55.2, 53, 50.7, 49.2, 47, 44.5, 42.3, 42.9, 44.1, 43.1, 42, 43.2, 44.7, 47.1, 49.7, + 54.6, 60.9, + ], + type: 'scatter', + }, + { + mode: 'lines+markers', + name: 'B', + x: [ + 9550, 19101, 28651, 38202, 47752, 57303, 66853, 76404, 85954, 95505, 105055, 95505, 85954, 76404, 66853, + 57303, 47752, 38202, 28651, 19101, 9550, + ], + y: [ + 47.9, 38.2, 36.5, 34.9, 33.6, 32.2, 31.4, 30.6, 30, 29.4, 28.7, 28.9, 29.5, 30.1, 30.6, 31.1, 31.9, 32.7, + 34.3, 36.9, 47.9, + ], + type: 'scatter', + }, + { + mode: 'lines+markers', + name: 'C', + x: [ + 9550, 19101, 28651, 38202, 47752, 57303, 66853, 76404, 85954, 95505, 105055, 95505, 85954, 76404, 66853, + 57303, 47752, 38202, 28651, 19101, 9550, + ], + y: [ + 60.9, 58.8, 54.3, 52.1, 50.4, 49.1, 47.7, 46.4, 45.4, 44.3, 42.3, 42.5, 42.8, 43.1, 43.8, 44.6, 45.8, 47, + 48.3, 50.8, 60.9, + ], + type: 'scatter', + }, + ], + layout: { + template: { + data: { + barpolar: [ + { + marker: { + line: { + color: 'white', + width: 0.5, + }, + pattern: { + fillmode: 'overlay', + size: 10, + solidity: 0.2, + }, + }, + type: 'barpolar', + }, + ], + bar: [ + { + error_x: { + color: '#2a3f5f', + }, + error_y: { + color: '#2a3f5f', + }, + marker: { + line: { + color: 'white', + width: 0.5, + }, + pattern: { + fillmode: 'overlay', + size: 10, + solidity: 0.2, + }, + }, + type: 'bar', + }, + ], + carpet: [ + { + aaxis: { + endlinecolor: '#2a3f5f', + gridcolor: '#C8D4E3', + linecolor: '#C8D4E3', + minorgridcolor: '#C8D4E3', + startlinecolor: '#2a3f5f', + }, + baxis: { + endlinecolor: '#2a3f5f', + gridcolor: '#C8D4E3', + linecolor: '#C8D4E3', + minorgridcolor: '#C8D4E3', + startlinecolor: '#2a3f5f', + }, + type: 'carpet', + }, + ], + choropleth: [ + { + colorbar: { + outlinewidth: 0, + ticks: '', + }, + type: 'choropleth', + }, + ], + contourcarpet: [ + { + colorbar: { + outlinewidth: 0, + ticks: '', + }, + type: 'contourcarpet', + }, + ], + contour: [ + { + colorbar: { + outlinewidth: 0, + ticks: '', + }, + colorscale: [ + [0, '#0d0887'], + [0.1111111111111111, '#46039f'], + [0.2222222222222222, '#7201a8'], + [0.3333333333333333, '#9c179e'], + [0.4444444444444444, '#bd3786'], + [0.5555555555555556, '#d8576b'], + [0.6666666666666666, '#ed7953'], + [0.7777777777777778, '#fb9f3a'], + [0.8888888888888888, '#fdca26'], + [1, '#f0f921'], + ], + type: 'contour', + }, + ], + heatmap: [ + { + colorbar: { + outlinewidth: 0, + ticks: '', + }, + colorscale: [ + [0, '#0d0887'], + [0.1111111111111111, '#46039f'], + [0.2222222222222222, '#7201a8'], + [0.3333333333333333, '#9c179e'], + [0.4444444444444444, '#bd3786'], + [0.5555555555555556, '#d8576b'], + [0.6666666666666666, '#ed7953'], + [0.7777777777777778, '#fb9f3a'], + [0.8888888888888888, '#fdca26'], + [1, '#f0f921'], + ], + type: 'heatmap', + }, + ], + histogram2dcontour: [ + { + colorbar: { + outlinewidth: 0, + ticks: '', + }, + colorscale: [ + [0, '#0d0887'], + [0.1111111111111111, '#46039f'], + [0.2222222222222222, '#7201a8'], + [0.3333333333333333, '#9c179e'], + [0.4444444444444444, '#bd3786'], + [0.5555555555555556, '#d8576b'], + [0.6666666666666666, '#ed7953'], + [0.7777777777777778, '#fb9f3a'], + [0.8888888888888888, '#fdca26'], + [1, '#f0f921'], + ], + type: 'histogram2dcontour', + }, + ], + histogram2d: [ + { + colorbar: { + outlinewidth: 0, + ticks: '', + }, + colorscale: [ + [0, '#0d0887'], + [0.1111111111111111, '#46039f'], + [0.2222222222222222, '#7201a8'], + [0.3333333333333333, '#9c179e'], + [0.4444444444444444, '#bd3786'], + [0.5555555555555556, '#d8576b'], + [0.6666666666666666, '#ed7953'], + [0.7777777777777778, '#fb9f3a'], + [0.8888888888888888, '#fdca26'], + [1, '#f0f921'], + ], + type: 'histogram2d', + }, + ], + histogram: [ + { + marker: { + pattern: { + fillmode: 'overlay', + size: 10, + solidity: 0.2, + }, + }, + type: 'histogram', + }, + ], + mesh3d: [ + { + colorbar: { + outlinewidth: 0, + ticks: '', + }, + type: 'mesh3d', + }, + ], + parcoords: [ + { + line: { + colorbar: { + outlinewidth: 0, + ticks: '', + }, + }, + type: 'parcoords', + }, + ], + pie: [ + { + automargin: true, + type: 'pie', + }, + ], + scatter3d: [ + { + line: { + colorbar: { + outlinewidth: 0, + ticks: '', + }, + }, + marker: { + colorbar: { + outlinewidth: 0, + ticks: '', + }, + }, + type: 'scatter3d', + }, + ], + scattercarpet: [ + { + marker: { + colorbar: { + outlinewidth: 0, + ticks: '', + }, + }, + type: 'scattercarpet', + }, + ], + scattergeo: [ + { + marker: { + colorbar: { + outlinewidth: 0, + ticks: '', + }, + }, + type: 'scattergeo', + }, + ], + scattergl: [ + { + marker: { + colorbar: { + outlinewidth: 0, + ticks: '', + }, + }, + type: 'scattergl', + }, + ], + scattermapbox: [ + { + marker: { + colorbar: { + outlinewidth: 0, + ticks: '', + }, + }, + type: 'scattermapbox', + }, + ], + scattermap: [ + { + marker: { + colorbar: { + outlinewidth: 0, + ticks: '', + }, + }, + type: 'scattermap', + }, + ], + scatterpolargl: [ + { + marker: { + colorbar: { + outlinewidth: 0, + ticks: '', + }, + }, + type: 'scatterpolargl', + }, + ], + scatterpolar: [ + { + marker: { + colorbar: { + outlinewidth: 0, + ticks: '', + }, + }, + type: 'scatterpolar', + }, + ], + scatter: [ + { + fillpattern: { + fillmode: 'overlay', + size: 10, + solidity: 0.2, + }, + type: 'scatter', + }, + ], + scatterternary: [ + { + marker: { + colorbar: { + outlinewidth: 0, + ticks: '', + }, + }, + type: 'scatterternary', + }, + ], + surface: [ + { + colorbar: { + outlinewidth: 0, + ticks: '', + }, + colorscale: [ + [0, '#0d0887'], + [0.1111111111111111, '#46039f'], + [0.2222222222222222, '#7201a8'], + [0.3333333333333333, '#9c179e'], + [0.4444444444444444, '#bd3786'], + [0.5555555555555556, '#d8576b'], + [0.6666666666666666, '#ed7953'], + [0.7777777777777778, '#fb9f3a'], + [0.8888888888888888, '#fdca26'], + [1, '#f0f921'], + ], + type: 'surface', + }, + ], + table: [ + { + cells: { + fill: { + color: '#EBF0F8', + }, + line: { + color: 'white', + }, + }, + header: { + fill: { + color: '#C8D4E3', + }, + line: { + color: 'white', + }, + }, + type: 'table', + }, + ], + }, + layout: { + annotationdefaults: { + arrowcolor: '#2a3f5f', + arrowhead: 0, + arrowwidth: 1, + }, + autotypenumbers: 'strict', + coloraxis: { + colorbar: { + outlinewidth: 0, + ticks: '', + }, + }, + colorscale: { + diverging: [ + [0, '#8e0152'], + [0.1, '#c51b7d'], + [0.2, '#de77ae'], + [0.3, '#f1b6da'], + [0.4, '#fde0ef'], + [0.5, '#f7f7f7'], + [0.6, '#e6f5d0'], + [0.7, '#b8e186'], + [0.8, '#7fbc41'], + [0.9, '#4d9221'], + [1, '#276419'], + ], + sequential: [ + [0, '#0d0887'], + [0.1111111111111111, '#46039f'], + [0.2222222222222222, '#7201a8'], + [0.3333333333333333, '#9c179e'], + [0.4444444444444444, '#bd3786'], + [0.5555555555555556, '#d8576b'], + [0.6666666666666666, '#ed7953'], + [0.7777777777777778, '#fb9f3a'], + [0.8888888888888888, '#fdca26'], + [1, '#f0f921'], + ], + sequentialminus: [ + [0, '#0d0887'], + [0.1111111111111111, '#46039f'], + [0.2222222222222222, '#7201a8'], + [0.3333333333333333, '#9c179e'], + [0.4444444444444444, '#bd3786'], + [0.5555555555555556, '#d8576b'], + [0.6666666666666666, '#ed7953'], + [0.7777777777777778, '#fb9f3a'], + [0.8888888888888888, '#fdca26'], + [1, '#f0f921'], + ], + }, + colorway: [ + '#636efa', + '#EF553B', + '#00cc96', + '#ab63fa', + '#FFA15A', + '#19d3f3', + '#FF6692', + '#B6E880', + '#FF97FF', + '#FECB52', + ], + font: { + color: '#2a3f5f', + }, + geo: { + bgcolor: 'white', + lakecolor: 'white', + landcolor: 'white', + showlakes: true, + showland: true, + subunitcolor: '#C8D4E3', + }, + hoverlabel: { + align: 'left', + }, + hovermode: 'closest', + mapbox: { + style: 'light', + }, + paper_bgcolor: 'white', + plot_bgcolor: 'white', + polar: { + angularaxis: { + gridcolor: '#EBF0F8', + linecolor: '#EBF0F8', + ticks: '', + }, + bgcolor: 'white', + radialaxis: { + gridcolor: '#EBF0F8', + linecolor: '#EBF0F8', + ticks: '', + }, + }, + scene: { + xaxis: { + backgroundcolor: 'white', + gridcolor: '#DFE8F3', + gridwidth: 2, + linecolor: '#EBF0F8', + showbackground: true, + ticks: '', + zerolinecolor: '#EBF0F8', + }, + yaxis: { + backgroundcolor: 'white', + gridcolor: '#DFE8F3', + gridwidth: 2, + linecolor: '#EBF0F8', + showbackground: true, + ticks: '', + zerolinecolor: '#EBF0F8', + }, + zaxis: { + backgroundcolor: 'white', + gridcolor: '#DFE8F3', + gridwidth: 2, + linecolor: '#EBF0F8', + showbackground: true, + ticks: '', + zerolinecolor: '#EBF0F8', + }, + }, + shapedefaults: { + line: { + color: '#2a3f5f', + }, + }, + ternary: { + aaxis: { + gridcolor: '#DFE8F3', + linecolor: '#A2B1C6', + ticks: '', + }, + baxis: { + gridcolor: '#DFE8F3', + linecolor: '#A2B1C6', + ticks: '', + }, + bgcolor: 'white', + caxis: { + gridcolor: '#DFE8F3', + linecolor: '#A2B1C6', + ticks: '', + }, + }, + title: { + x: 0.05, + }, + xaxis: { + automargin: true, + gridcolor: '#EBF0F8', + linecolor: '#EBF0F8', + ticks: '', + title: { + standoff: 15, + }, + zerolinecolor: '#EBF0F8', + zerolinewidth: 2, + }, + yaxis: { + automargin: true, + gridcolor: '#EBF0F8', + linecolor: '#EBF0F8', + ticks: '', + title: { + standoff: 15, + }, + zerolinecolor: '#EBF0F8', + zerolinewidth: 2, + }, + }, + }, + xaxis: { + title: { + text: 'Shear Rate (1/sec)', + }, + range: [0, 105055], + tickmode: 'auto', + }, + title: { + text: 'Rheology Graph', + }, + yaxis: { + title: { + text: 'Apparent Viscosity (centipoise)', + }, + }, + }, + id: '001', + }, }, { key: 'ganttchart', diff --git a/packages/charts/react-charts/stories/src/VerticalStackedBarChart/VerticalStackedBarChartDefault.stories.tsx b/packages/charts/react-charts/stories/src/VerticalStackedBarChart/VerticalStackedBarChartDefault.stories.tsx index c15494dea3683..56ee4ede90b02 100644 --- a/packages/charts/react-charts/stories/src/VerticalStackedBarChart/VerticalStackedBarChartDefault.stories.tsx +++ b/packages/charts/react-charts/stories/src/VerticalStackedBarChart/VerticalStackedBarChartDefault.stories.tsx @@ -350,7 +350,7 @@ export const VerticalStackedBarDefault = (): JSXElement => { yAxisTitle={showAxisTitles ? 'Variation of number of sales' : undefined} xAxisTitle={showAxisTitles ? 'Number of days' : undefined} roundCorners={roundCorners} - roundedYTicks={true} + roundedTicks={true} styles={{ svgTooltip: classes.svgTooltip }} /> @@ -372,7 +372,7 @@ export const VerticalStackedBarDefault = (): JSXElement => { }} hideLabels={hideLabels} roundCorners={roundCorners} - roundedYTicks={true} + roundedTicks={true} styles={{ svgTooltip: classes.svgTooltip }} /> diff --git a/packages/charts/react-charts/stories/src/VerticalStackedBarChart/VerticalStackedBarChartNegative.stories.tsx b/packages/charts/react-charts/stories/src/VerticalStackedBarChart/VerticalStackedBarChartNegative.stories.tsx index fec8d0bb25b68..7f07fffd83fae 100644 --- a/packages/charts/react-charts/stories/src/VerticalStackedBarChart/VerticalStackedBarChartNegative.stories.tsx +++ b/packages/charts/react-charts/stories/src/VerticalStackedBarChart/VerticalStackedBarChartNegative.stories.tsx @@ -370,7 +370,7 @@ export const VerticalStackedBarNegative = (): JSXElement => { yAxisTitle={showAxisTitles ? 'Variation of number of sales' : undefined} xAxisTitle={showAxisTitles ? 'Number of days' : undefined} roundCorners={roundCorners} - roundedYTicks={true} + roundedTicks={true} styles={{ svgTooltip: classes.svgTooltip }} /> @@ -393,7 +393,7 @@ export const VerticalStackedBarNegative = (): JSXElement => { hideLabels={hideLabels} reflowProps={{ mode: 'min-width' }} roundCorners={roundCorners} - roundedYTicks={true} + roundedTicks={true} styles={{ svgTooltip: classes.svgTooltip }} /> From f42fbc713d5ebd436b5b5d9b9b3d5b37e4dc1db1 Mon Sep 17 00:00:00 2001 From: Anush Date: Tue, 18 Nov 2025 13:48:05 +0530 Subject: [PATCH 7/9] revert change --- .../DeclarativeChartDefault.stories.tsx | 623 +----------------- 1 file changed, 3 insertions(+), 620 deletions(-) diff --git a/packages/charts/react-charts/stories/src/DeclarativeChart/DeclarativeChartDefault.stories.tsx b/packages/charts/react-charts/stories/src/DeclarativeChart/DeclarativeChartDefault.stories.tsx index 1a970fa5e351c..ad22d6c2da5fa 100644 --- a/packages/charts/react-charts/stories/src/DeclarativeChart/DeclarativeChartDefault.stories.tsx +++ b/packages/charts/react-charts/stories/src/DeclarativeChart/DeclarativeChartDefault.stories.tsx @@ -137,626 +137,9 @@ const DEFAULT_SCHEMAS = [ }, { key: 'scatterchart', - schema: { - data: [ - { - mode: 'lines+markers', - name: 'Control', - x: [ - 9550, 19101, 28651, 38202, 47752, 57303, 66853, 76404, 85954, 95505, 105055, 95505, 85954, 76404, 66853, - 57303, 47752, 38202, 28651, 19101, 9550, - ], - y: [ - 118.8, 98, 86.6, 79.4, 74.9, 71.1, 67.3, 63.8, 60, 55.8, 52.2, 51.1, 50.4, 49.2, 49.2, 50.9, 52.9, 55.7, - 60.7, 66.5, 85.2, - ], - type: 'scatter', - }, - { - mode: 'lines+markers', - name: 'A1', - x: [ - 9550, 19101, 28651, 38202, 47752, 57303, 66853, 76404, 85954, 95505, 105055, 95505, 85954, 76404, 66853, - 57303, 47752, 38202, 28651, 19101, 9550, - ], - y: [ - 64.6, 66.1, 60.7, 56.9, 53.6, 51.2, 49.2, 47.5, 45.1, 43.1, 40.7, 40.4, 43.2, 38.9, 38.1, 39.1, 40, 42, - 45.3, 48.5, 60.4, - ], - type: 'scatter', - }, - { - mode: 'lines+markers', - name: 'A2', - x: [ - 9550, 19101, 28651, 38202, 47752, 57303, 66853, 76404, 85954, 95505, 105055, 95505, 85954, 76404, 66853, - 57303, 47752, 38202, 28651, 19101, 9550, - ], - y: [ - 70.1, 68.6, 62.5, 58, 55.2, 53, 50.7, 49.2, 47, 44.5, 42.3, 42.9, 44.1, 43.1, 42, 43.2, 44.7, 47.1, 49.7, - 54.6, 60.9, - ], - type: 'scatter', - }, - { - mode: 'lines+markers', - name: 'B', - x: [ - 9550, 19101, 28651, 38202, 47752, 57303, 66853, 76404, 85954, 95505, 105055, 95505, 85954, 76404, 66853, - 57303, 47752, 38202, 28651, 19101, 9550, - ], - y: [ - 47.9, 38.2, 36.5, 34.9, 33.6, 32.2, 31.4, 30.6, 30, 29.4, 28.7, 28.9, 29.5, 30.1, 30.6, 31.1, 31.9, 32.7, - 34.3, 36.9, 47.9, - ], - type: 'scatter', - }, - { - mode: 'lines+markers', - name: 'C', - x: [ - 9550, 19101, 28651, 38202, 47752, 57303, 66853, 76404, 85954, 95505, 105055, 95505, 85954, 76404, 66853, - 57303, 47752, 38202, 28651, 19101, 9550, - ], - y: [ - 60.9, 58.8, 54.3, 52.1, 50.4, 49.1, 47.7, 46.4, 45.4, 44.3, 42.3, 42.5, 42.8, 43.1, 43.8, 44.6, 45.8, 47, - 48.3, 50.8, 60.9, - ], - type: 'scatter', - }, - ], - layout: { - template: { - data: { - barpolar: [ - { - marker: { - line: { - color: 'white', - width: 0.5, - }, - pattern: { - fillmode: 'overlay', - size: 10, - solidity: 0.2, - }, - }, - type: 'barpolar', - }, - ], - bar: [ - { - error_x: { - color: '#2a3f5f', - }, - error_y: { - color: '#2a3f5f', - }, - marker: { - line: { - color: 'white', - width: 0.5, - }, - pattern: { - fillmode: 'overlay', - size: 10, - solidity: 0.2, - }, - }, - type: 'bar', - }, - ], - carpet: [ - { - aaxis: { - endlinecolor: '#2a3f5f', - gridcolor: '#C8D4E3', - linecolor: '#C8D4E3', - minorgridcolor: '#C8D4E3', - startlinecolor: '#2a3f5f', - }, - baxis: { - endlinecolor: '#2a3f5f', - gridcolor: '#C8D4E3', - linecolor: '#C8D4E3', - minorgridcolor: '#C8D4E3', - startlinecolor: '#2a3f5f', - }, - type: 'carpet', - }, - ], - choropleth: [ - { - colorbar: { - outlinewidth: 0, - ticks: '', - }, - type: 'choropleth', - }, - ], - contourcarpet: [ - { - colorbar: { - outlinewidth: 0, - ticks: '', - }, - type: 'contourcarpet', - }, - ], - contour: [ - { - colorbar: { - outlinewidth: 0, - ticks: '', - }, - colorscale: [ - [0, '#0d0887'], - [0.1111111111111111, '#46039f'], - [0.2222222222222222, '#7201a8'], - [0.3333333333333333, '#9c179e'], - [0.4444444444444444, '#bd3786'], - [0.5555555555555556, '#d8576b'], - [0.6666666666666666, '#ed7953'], - [0.7777777777777778, '#fb9f3a'], - [0.8888888888888888, '#fdca26'], - [1, '#f0f921'], - ], - type: 'contour', - }, - ], - heatmap: [ - { - colorbar: { - outlinewidth: 0, - ticks: '', - }, - colorscale: [ - [0, '#0d0887'], - [0.1111111111111111, '#46039f'], - [0.2222222222222222, '#7201a8'], - [0.3333333333333333, '#9c179e'], - [0.4444444444444444, '#bd3786'], - [0.5555555555555556, '#d8576b'], - [0.6666666666666666, '#ed7953'], - [0.7777777777777778, '#fb9f3a'], - [0.8888888888888888, '#fdca26'], - [1, '#f0f921'], - ], - type: 'heatmap', - }, - ], - histogram2dcontour: [ - { - colorbar: { - outlinewidth: 0, - ticks: '', - }, - colorscale: [ - [0, '#0d0887'], - [0.1111111111111111, '#46039f'], - [0.2222222222222222, '#7201a8'], - [0.3333333333333333, '#9c179e'], - [0.4444444444444444, '#bd3786'], - [0.5555555555555556, '#d8576b'], - [0.6666666666666666, '#ed7953'], - [0.7777777777777778, '#fb9f3a'], - [0.8888888888888888, '#fdca26'], - [1, '#f0f921'], - ], - type: 'histogram2dcontour', - }, - ], - histogram2d: [ - { - colorbar: { - outlinewidth: 0, - ticks: '', - }, - colorscale: [ - [0, '#0d0887'], - [0.1111111111111111, '#46039f'], - [0.2222222222222222, '#7201a8'], - [0.3333333333333333, '#9c179e'], - [0.4444444444444444, '#bd3786'], - [0.5555555555555556, '#d8576b'], - [0.6666666666666666, '#ed7953'], - [0.7777777777777778, '#fb9f3a'], - [0.8888888888888888, '#fdca26'], - [1, '#f0f921'], - ], - type: 'histogram2d', - }, - ], - histogram: [ - { - marker: { - pattern: { - fillmode: 'overlay', - size: 10, - solidity: 0.2, - }, - }, - type: 'histogram', - }, - ], - mesh3d: [ - { - colorbar: { - outlinewidth: 0, - ticks: '', - }, - type: 'mesh3d', - }, - ], - parcoords: [ - { - line: { - colorbar: { - outlinewidth: 0, - ticks: '', - }, - }, - type: 'parcoords', - }, - ], - pie: [ - { - automargin: true, - type: 'pie', - }, - ], - scatter3d: [ - { - line: { - colorbar: { - outlinewidth: 0, - ticks: '', - }, - }, - marker: { - colorbar: { - outlinewidth: 0, - ticks: '', - }, - }, - type: 'scatter3d', - }, - ], - scattercarpet: [ - { - marker: { - colorbar: { - outlinewidth: 0, - ticks: '', - }, - }, - type: 'scattercarpet', - }, - ], - scattergeo: [ - { - marker: { - colorbar: { - outlinewidth: 0, - ticks: '', - }, - }, - type: 'scattergeo', - }, - ], - scattergl: [ - { - marker: { - colorbar: { - outlinewidth: 0, - ticks: '', - }, - }, - type: 'scattergl', - }, - ], - scattermapbox: [ - { - marker: { - colorbar: { - outlinewidth: 0, - ticks: '', - }, - }, - type: 'scattermapbox', - }, - ], - scattermap: [ - { - marker: { - colorbar: { - outlinewidth: 0, - ticks: '', - }, - }, - type: 'scattermap', - }, - ], - scatterpolargl: [ - { - marker: { - colorbar: { - outlinewidth: 0, - ticks: '', - }, - }, - type: 'scatterpolargl', - }, - ], - scatterpolar: [ - { - marker: { - colorbar: { - outlinewidth: 0, - ticks: '', - }, - }, - type: 'scatterpolar', - }, - ], - scatter: [ - { - fillpattern: { - fillmode: 'overlay', - size: 10, - solidity: 0.2, - }, - type: 'scatter', - }, - ], - scatterternary: [ - { - marker: { - colorbar: { - outlinewidth: 0, - ticks: '', - }, - }, - type: 'scatterternary', - }, - ], - surface: [ - { - colorbar: { - outlinewidth: 0, - ticks: '', - }, - colorscale: [ - [0, '#0d0887'], - [0.1111111111111111, '#46039f'], - [0.2222222222222222, '#7201a8'], - [0.3333333333333333, '#9c179e'], - [0.4444444444444444, '#bd3786'], - [0.5555555555555556, '#d8576b'], - [0.6666666666666666, '#ed7953'], - [0.7777777777777778, '#fb9f3a'], - [0.8888888888888888, '#fdca26'], - [1, '#f0f921'], - ], - type: 'surface', - }, - ], - table: [ - { - cells: { - fill: { - color: '#EBF0F8', - }, - line: { - color: 'white', - }, - }, - header: { - fill: { - color: '#C8D4E3', - }, - line: { - color: 'white', - }, - }, - type: 'table', - }, - ], - }, - layout: { - annotationdefaults: { - arrowcolor: '#2a3f5f', - arrowhead: 0, - arrowwidth: 1, - }, - autotypenumbers: 'strict', - coloraxis: { - colorbar: { - outlinewidth: 0, - ticks: '', - }, - }, - colorscale: { - diverging: [ - [0, '#8e0152'], - [0.1, '#c51b7d'], - [0.2, '#de77ae'], - [0.3, '#f1b6da'], - [0.4, '#fde0ef'], - [0.5, '#f7f7f7'], - [0.6, '#e6f5d0'], - [0.7, '#b8e186'], - [0.8, '#7fbc41'], - [0.9, '#4d9221'], - [1, '#276419'], - ], - sequential: [ - [0, '#0d0887'], - [0.1111111111111111, '#46039f'], - [0.2222222222222222, '#7201a8'], - [0.3333333333333333, '#9c179e'], - [0.4444444444444444, '#bd3786'], - [0.5555555555555556, '#d8576b'], - [0.6666666666666666, '#ed7953'], - [0.7777777777777778, '#fb9f3a'], - [0.8888888888888888, '#fdca26'], - [1, '#f0f921'], - ], - sequentialminus: [ - [0, '#0d0887'], - [0.1111111111111111, '#46039f'], - [0.2222222222222222, '#7201a8'], - [0.3333333333333333, '#9c179e'], - [0.4444444444444444, '#bd3786'], - [0.5555555555555556, '#d8576b'], - [0.6666666666666666, '#ed7953'], - [0.7777777777777778, '#fb9f3a'], - [0.8888888888888888, '#fdca26'], - [1, '#f0f921'], - ], - }, - colorway: [ - '#636efa', - '#EF553B', - '#00cc96', - '#ab63fa', - '#FFA15A', - '#19d3f3', - '#FF6692', - '#B6E880', - '#FF97FF', - '#FECB52', - ], - font: { - color: '#2a3f5f', - }, - geo: { - bgcolor: 'white', - lakecolor: 'white', - landcolor: 'white', - showlakes: true, - showland: true, - subunitcolor: '#C8D4E3', - }, - hoverlabel: { - align: 'left', - }, - hovermode: 'closest', - mapbox: { - style: 'light', - }, - paper_bgcolor: 'white', - plot_bgcolor: 'white', - polar: { - angularaxis: { - gridcolor: '#EBF0F8', - linecolor: '#EBF0F8', - ticks: '', - }, - bgcolor: 'white', - radialaxis: { - gridcolor: '#EBF0F8', - linecolor: '#EBF0F8', - ticks: '', - }, - }, - scene: { - xaxis: { - backgroundcolor: 'white', - gridcolor: '#DFE8F3', - gridwidth: 2, - linecolor: '#EBF0F8', - showbackground: true, - ticks: '', - zerolinecolor: '#EBF0F8', - }, - yaxis: { - backgroundcolor: 'white', - gridcolor: '#DFE8F3', - gridwidth: 2, - linecolor: '#EBF0F8', - showbackground: true, - ticks: '', - zerolinecolor: '#EBF0F8', - }, - zaxis: { - backgroundcolor: 'white', - gridcolor: '#DFE8F3', - gridwidth: 2, - linecolor: '#EBF0F8', - showbackground: true, - ticks: '', - zerolinecolor: '#EBF0F8', - }, - }, - shapedefaults: { - line: { - color: '#2a3f5f', - }, - }, - ternary: { - aaxis: { - gridcolor: '#DFE8F3', - linecolor: '#A2B1C6', - ticks: '', - }, - baxis: { - gridcolor: '#DFE8F3', - linecolor: '#A2B1C6', - ticks: '', - }, - bgcolor: 'white', - caxis: { - gridcolor: '#DFE8F3', - linecolor: '#A2B1C6', - ticks: '', - }, - }, - title: { - x: 0.05, - }, - xaxis: { - automargin: true, - gridcolor: '#EBF0F8', - linecolor: '#EBF0F8', - ticks: '', - title: { - standoff: 15, - }, - zerolinecolor: '#EBF0F8', - zerolinewidth: 2, - }, - yaxis: { - automargin: true, - gridcolor: '#EBF0F8', - linecolor: '#EBF0F8', - ticks: '', - title: { - standoff: 15, - }, - zerolinecolor: '#EBF0F8', - zerolinewidth: 2, - }, - }, - }, - xaxis: { - title: { - text: 'Shear Rate (1/sec)', - }, - range: [0, 105055], - tickmode: 'auto', - }, - title: { - text: 'Rheology Graph', - }, - yaxis: { - title: { - text: 'Apparent Viscosity (centipoise)', - }, - }, - }, - id: '001', - }, + schema: JSON.parse( + '{"visualizer":"plotly","data":[{"line":{"color":"rgba(255, 153, 51, 1.0)","width":"1.3"},"mode":"markers","name":"Trace 0","type":"scatter","x":["2015-01-01","2015-01-02","2015-01-03","2015-01-04","2015-01-05"],"y":[0.5353935439391206,-0.3510205670171982,-1.3420793330744663,-1.683479706754631,-2.0207368899942826],"marker":{"size":[10,20,15,25,30]}},{"line":{"color":"rgba(55, 128, 191, 1.0)","width":"1.3"},"mode":"markers","name":"Trace 1","type":"scatter","x":["2015-01-01","2015-01-02","2015-01-03","2015-01-04","2015-01-05"],"y":[-2.58404773330316,-1.9162964761259451,-1.8899798841571565,-1.098466181069551,-1.2161136413159992],"marker":{"size":[15,10,20,25,30]}},{"line":{"color":"rgba(50, 171, 96, 1.0)","width":"1.3"},"mode":"markers","name":"Trace 2","type":"scatter","x":["2015-01-01","2015-01-02","2015-01-03","2015-01-04","2015-01-05"],"y":[0.4661114764240781,1.0610769506804194,1.0620659379275244,-0.5603096501263787,-0.22966983294858567],"marker":{"size":[20,15,25,10,30]}}],"layout":{"legend":{"font":{"color":"#4D5663"},"bgcolor":"#F5F6F9"},"xaxis1":{"title":"","tickfont":{"color":"#4D5663"},"gridcolor":"#E1E5ED","titlefont":{"color":"#4D5663"},"zerolinecolor":"#E1E5ED"},"yaxis1":{"title":"Price","tickfont":{"color":"#4D5663"},"zeroline":false,"gridcolor":"#E1E5ED","titlefont":{"color":"#4D5663"},"tickprefix":"$","zerolinecolor":"#E1E5ED"},"plot_bgcolor":"#F5F6F9","paper_bgcolor":"#F5F6F9"},"frames":[],"selectedLegends":["Trace 0","Trace 1"]}', + ), }, { key: 'ganttchart', From 125f110c1fc5480679dc8fb20181f4c90854ac9e Mon Sep 17 00:00:00 2001 From: Anush Date: Tue, 18 Nov 2025 20:22:39 +0530 Subject: [PATCH 8/9] resolve comments --- .../DeclarativeChart/PlotlySchemaAdapter.ts | 33 ++++++++++++++----- .../PlotlySchemaAdapterUT.test.tsx.snap | 7 ++++ .../library/src/utilities/utilities.ts | 4 +-- 3 files changed, 34 insertions(+), 10 deletions(-) diff --git a/packages/charts/react-charts/library/src/components/DeclarativeChart/PlotlySchemaAdapter.ts b/packages/charts/react-charts/library/src/components/DeclarativeChart/PlotlySchemaAdapter.ts index 244977b085f8a..adaf767095680 100644 --- a/packages/charts/react-charts/library/src/components/DeclarativeChart/PlotlySchemaAdapter.ts +++ b/packages/charts/react-charts/library/src/components/DeclarativeChart/PlotlySchemaAdapter.ts @@ -1667,6 +1667,14 @@ export const transformPlotlyJsonToGVBCProps = ( hideLegend, roundCorners: true, showYAxisLables: true, + roundedTicks: true, + ...(input.layout?.xaxis?.range + ? { + xMinValue: input.layout.xaxis.range[0], + xMaxValue: input.layout.xaxis.range[1], + showRoundOffXTickValues: false, + } + : {}), ...getTitles(processedInput.layout), ...getAxisCategoryOrderProps(processedInput.data, processedInput.layout), ...getYMinMaxValues(processedInput.data[0], processedInput.layout), @@ -1778,6 +1786,14 @@ export const transformPlotlyJsonToVBCProps = ( hideLegend, roundCorners: true, showYAxisLables: true, + roundedTicks: true, + ...(input.layout?.xaxis?.range + ? { + xMinValue: input.layout.xaxis.range[0], + xMaxValue: input.layout.xaxis.range[1], + showRoundOffXTickValues: false, + } + : {}), ...getTitles(input.layout), ...getYMinMaxValues(input.data[0], input.layout), ...getAxisCategoryOrderProps(input.data, input.layout), @@ -2058,6 +2074,14 @@ const transformPlotlyJsonToScatterTraceProps = ( wrapXAxisLabels: shouldWrapLabels, optimizeLargeData: numDataPoints > 1000, showYAxisLables: true, + roundedTicks: true, + ...(input.layout?.xaxis?.range + ? { + xMinValue: input.layout.xaxis.range[0], + xMaxValue: input.layout.xaxis.range[1], + showRoundOffXTickValues: false, + } + : {}), ...getTitles(input.layout), ...getXAxisTickFormat(input.data[0], input.layout), ...yAxisTickFormat, @@ -2075,14 +2099,6 @@ const transformPlotlyJsonToScatterTraceProps = ( } else { return { data: isScatterChart ? scatterChartProps : chartProps, - roundedTicks: true, - ...(input.layout?.xaxis?.range - ? { - xMinValue: input.layout.xaxis.range[0], - xMaxValue: input.layout.xaxis.range[1], - showRoundOffXTickValues: false, - } - : {}), ...commonProps, ...yMinMax, ...(isScatterChart @@ -2172,6 +2188,7 @@ export const transformPlotlyJsonToHorizontalBarWithAxisProps = ( showYAxisLablesTooltip: true, hideLegend, roundCorners: true, + roundedTicks: true, ...(input.layout?.xaxis?.range ? { xMinValue: input.layout.xaxis.range[0], 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 55c00241bd7aa..c3d211e87f241 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,6 +3041,7 @@ Object { "hideTickOverlap": true, "noOfCharsToTruncate": 20, "roundCorners": true, + "roundedTicks": true, "secondaryYAxistitle": "", "showRoundOffXTickValues": false, "showYAxisLables": true, @@ -5042,6 +5047,7 @@ Object { "hideTickOverlap": true, "mode": "tonexty", "optimizeLargeData": false, + "roundedTicks": true, "showYAxisLables": true, "supportNegativeData": true, "useUTC": false, @@ -5482,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 f842d8099f397..bd592ab4e0f0c 100644 --- a/packages/charts/react-charts/library/src/utilities/utilities.ts +++ b/packages/charts/react-charts/library/src/utilities/utilities.ts @@ -265,8 +265,8 @@ export function createNumericXAxis( tick0, tickText, } = xAxisParams; - const dStartValue = typeof domainNRangeValues.dStartValue === 'number' ? domainNRangeValues.dStartValue : 0; - const dEndValue = typeof domainNRangeValues.dEndValue === 'number' ? domainNRangeValues.dEndValue : 0; + 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) From d0d8fb836498af7a476b797def5169d619f8ccca Mon Sep 17 00:00:00 2001 From: Anush Date: Wed, 19 Nov 2025 09:27:38 +0530 Subject: [PATCH 9/9] remove duplicate code --- .../DeclarativeChart/PlotlySchemaAdapter.ts | 52 ++++++------------- 1 file changed, 17 insertions(+), 35 deletions(-) diff --git a/packages/charts/react-charts/library/src/components/DeclarativeChart/PlotlySchemaAdapter.ts b/packages/charts/react-charts/library/src/components/DeclarativeChart/PlotlySchemaAdapter.ts index adaf767095680..011aec980aa8f 100644 --- a/packages/charts/react-charts/library/src/components/DeclarativeChart/PlotlySchemaAdapter.ts +++ b/packages/charts/react-charts/library/src/components/DeclarativeChart/PlotlySchemaAdapter.ts @@ -214,6 +214,18 @@ const getYMinMaxValues = (series: Data, layout: Partial | 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,13 +1498,7 @@ export const transformPlotlyJsonToVSBCProps = ( noOfCharsToTruncate: 20, showYAxisLablesTooltip: true, roundedTicks: true, - ...(input.layout?.xaxis?.range - ? { - xMinValue: input.layout.xaxis.range[0], - xMaxValue: input.layout.xaxis.range[1], - showRoundOffXTickValues: false, - } - : {}), + ...getXMinMaxValues(input.data[0], input.layout), ...getTitles(input.layout), ...getXAxisTickFormat(input.data[0], input.layout), ...yAxisTickFormat, @@ -1668,13 +1674,7 @@ export const transformPlotlyJsonToGVBCProps = ( roundCorners: true, showYAxisLables: true, roundedTicks: true, - ...(input.layout?.xaxis?.range - ? { - xMinValue: input.layout.xaxis.range[0], - xMaxValue: input.layout.xaxis.range[1], - showRoundOffXTickValues: false, - } - : {}), + ...getXMinMaxValues(processedInput.data[0], processedInput.layout), ...getTitles(processedInput.layout), ...getAxisCategoryOrderProps(processedInput.data, processedInput.layout), ...getYMinMaxValues(processedInput.data[0], processedInput.layout), @@ -1787,13 +1787,7 @@ export const transformPlotlyJsonToVBCProps = ( roundCorners: true, showYAxisLables: true, roundedTicks: true, - ...(input.layout?.xaxis?.range - ? { - xMinValue: input.layout.xaxis.range[0], - xMaxValue: input.layout.xaxis.range[1], - showRoundOffXTickValues: false, - } - : {}), + ...getXMinMaxValues(input.data[0], input.layout), ...getTitles(input.layout), ...getYMinMaxValues(input.data[0], input.layout), ...getAxisCategoryOrderProps(input.data, input.layout), @@ -2075,13 +2069,7 @@ const transformPlotlyJsonToScatterTraceProps = ( optimizeLargeData: numDataPoints > 1000, showYAxisLables: true, roundedTicks: true, - ...(input.layout?.xaxis?.range - ? { - xMinValue: input.layout.xaxis.range[0], - xMaxValue: input.layout.xaxis.range[1], - showRoundOffXTickValues: false, - } - : {}), + ...getXMinMaxValues(input.data[0], input.layout), ...getTitles(input.layout), ...getXAxisTickFormat(input.data[0], input.layout), ...yAxisTickFormat, @@ -2189,13 +2177,7 @@ export const transformPlotlyJsonToHorizontalBarWithAxisProps = ( hideLegend, roundCorners: true, roundedTicks: true, - ...(input.layout?.xaxis?.range - ? { - xMinValue: input.layout.xaxis.range[0], - xMaxValue: input.layout.xaxis.range[1], - showRoundOffXTickValues: false, - } - : {}), + ...getXMinMaxValues(input.data[0], input.layout), ...getTitles(input.layout), ...getAxisCategoryOrderProps(input.data, input.layout), ...getBarProps(input.data, input.layout, true),