fix: bar-x with the similar data should be displayed the same for different types of axes

src/__tests__/bar-x-series.visual.test.tsx

@@ -27,6 +27,63 @@ test.describe('Bar-x series', () => {
         await expect(component.locator('svg')).toHaveScreenshot();
     });
 
+    test('Same data with different x-axis type', async ({mount}) => {
+        const points = [
+            {x: 0, y: 1},
+            {x: 1, y: 3},
+            {x: 2, y: 2},
+        ];
+        // linear x-axis
+        const component = await mount(
+            <ChartTestStory
+                data={{
+                    title: {text: 'linear x-axis'},
+                    series: {
+                        data: [{type: 'bar-x', name: '', data: points}],
+                    },
+                    xAxis: {type: 'linear'},
+                }}
+            />,
+        );
+        await expect(component.locator('svg')).toHaveScreenshot();
+
+        // datetime x-axis
+        const startDate = new Date('2000-10-10T00:00:00Z').getTime();
+        const day = 1000 * 60 * 60 * 24;
+        await component.update(
+            <ChartTestStory
+                data={{
+                    title: {text: 'datetime x-axis'},
+                    series: {
+                        data: [
+                            {
+                                type: 'bar-x',
+                                name: '',
+                                data: points.map((d) => ({x: d.x * day + startDate, y: d.y})),
+                            },
+                        ],
+                    },
+                    xAxis: {type: 'datetime'},
+                }}
+            />,
+        );
+        await expect(component.locator('svg')).toHaveScreenshot();
+
+        // categorical x-axis
+        await component.update(
+            <ChartTestStory
+                data={{
+                    title: {text: 'categorical x-axis'},
+                    series: {
+                        data: [{type: 'bar-x', name: '', data: points}],
+                    },
+                    xAxis: {type: 'category', categories: ['0', '1', '2']},
+                }}
+            />,
+        );
+        await expect(component.locator('svg')).toHaveScreenshot();
+    });
+
     test.describe('Stacking percent', () => {
         test('Linear X-axis ', async ({mount}) => {
             const chartData: ChartData = {

src/components/ChartInner/useChartInnerProps.ts

@@ -132,7 +132,6 @@ export function useChartInnerProps(props: Props) {
         boundsHeight,
         rangeSliderState,
         series: preparedSeries,
-        seriesOptions: preparedSeriesOptions,
         split: preparedSplit,
         xAxis,
         yAxis,

src/hooks/useAxis/index.ts

@@ -53,7 +53,6 @@ export function useAxis(props: UseAxesProps) {
                 xAxis,
                 width,
                 seriesData,
-                seriesOptions: preparedSeriesOptions,
             });
 
             let estimatedBoundsHeight = boundsHeight ?? height;

src/hooks/useAxis/x-axis.ts

@@ -27,7 +27,6 @@ import {
     wrapText,
 } from '../../utils';
 import {createXScale} from '../useAxisScales';
-import type {PreparedSeriesOptions} from '../useSeries/types';
 
 import {getPreparedRangeSlider} from './range-slider';
 import type {PreparedXAxis} from './types';
@@ -36,17 +35,15 @@ import {prepareAxisPlotLabel} from './utils';
 async function setLabelSettings({
     axis,
     seriesData,
-    seriesOptions,
     width,
     autoRotation = true,
 }: {
     axis: PreparedXAxis;
     seriesData: ChartSeries[];
-    seriesOptions: PreparedSeriesOptions;
     width: number;
     autoRotation?: boolean;
 }) {
-    const scale = createXScale({axis, series: seriesData, seriesOptions, boundsWidth: width});
+    const scale = createXScale({axis, series: seriesData, boundsWidth: width});
 
     if (!scale) {
         axis.labels.height = 0;
@@ -111,12 +108,10 @@ function getMaxPaddingBySeries({series}: {series: ChartSeries[]}) {
 export const getPreparedXAxis = async ({
     xAxis,
     seriesData,
-    seriesOptions,
     width,
 }: {
     xAxis?: ChartXAxis;
     seriesData: ChartSeries[];
-    seriesOptions: PreparedSeriesOptions;
     width: number;
 }): Promise<PreparedXAxis | null> => {
     const hasAxisRelatedSeries = seriesData.some(isAxisRelatedSeries);
@@ -235,7 +230,6 @@ export const getPreparedXAxis = async ({
     await setLabelSettings({
         axis: preparedXAxis,
         seriesData,
-        seriesOptions,
         width,
         autoRotation: xAxis?.labels?.autoRotation,
     });

src/hooks/useAxisScales/index.ts

@@ -8,9 +8,7 @@ import {DEFAULT_AXIS_TYPE, SERIES_TYPE} from '../../constants';
 import type {
     PreparedAxis,
     PreparedSeries,
-    PreparedSeriesOptions,
     PreparedSplit,
-    PreparedXAxis,
     RangeSliderState,
     ZoomState,
 } from '../../hooks';
@@ -29,7 +27,6 @@ import {
     isSeriesWithCategoryValues,
 } from '../../utils';
 import type {AxisDirection} from '../../utils';
-import {getBarXLayoutForNumericScale, groupBarXDataByXValue} from '../utils/bar-x';
 import {getBandSize} from '../utils/get-band-size';
 
 import {checkIsPointDomain, getMinMaxPropsOrState, hasOnlyMarkerSeries} from './utils';
@@ -43,7 +40,6 @@ type Args = {
     boundsWidth: number;
     boundsHeight: number;
     series: PreparedSeries[];
-    seriesOptions: PreparedSeriesOptions;
     xAxis: PreparedAxis | null;
     yAxis: PreparedAxis[];
     split: PreparedSplit;
@@ -330,43 +326,16 @@ function calculateXAxisPadding(series: (PreparedSeries | ChartSeries)[]) {
 }
 
 function isSeriesWithXAxisOffset(series: (PreparedSeries | ChartSeries)[]) {
-    const types = [SERIES_TYPE.Heatmap] as string[];
+    const types = [SERIES_TYPE.Heatmap, SERIES_TYPE.BarX] as string[];
     return series.some((s) => types.includes(s.type));
 }
 
-function getXScaleRange({
-    boundsWidth,
-    series,
-    seriesOptions,
-    hasZoomX,
-    axis,
-}: {
-    axis: PreparedAxis | ChartAxis;
-    boundsWidth: number;
-    series: (PreparedSeries | ChartSeries)[];
-    seriesOptions: PreparedSeriesOptions;
-    hasZoomX?: boolean;
-}) {
+function getXScaleRange({boundsWidth, hasZoomX}: {boundsWidth: number; hasZoomX?: boolean}) {
     const xAxisZoomPadding = boundsWidth * X_AXIS_ZOOM_PADDING;
     const xRange = [0, boundsWidth];
     const xRangeZoom = [0 + xAxisZoomPadding, boundsWidth - xAxisZoomPadding];
     const range = hasZoomX ? xRangeZoom : xRange;
 
-    const barXSeries = series.filter((s) => s.type === SERIES_TYPE.BarX);
-    if (barXSeries.length) {
-        const groupedData = groupBarXDataByXValue(barXSeries, axis as PreparedXAxis);
-        if (Object.keys(groupedData).length > 1) {
-            const {bandSize} = getBarXLayoutForNumericScale({
-                plotWidth: boundsWidth,
-                groupedData,
-                seriesOptions,
-            });
-
-            const offset = bandSize / 2;
-            return [range[0] + offset, range[1] - offset];
-        }
-    }
-
     return range;
 }
 
@@ -375,11 +344,10 @@ export function createXScale(args: {
     axis: PreparedAxis | ChartAxis;
     boundsWidth: number;
     series: (PreparedSeries | ChartSeries)[];
-    seriesOptions: PreparedSeriesOptions;
     rangeSliderState?: RangeSliderState;
     zoomStateX?: [number, number];
 }) {
-    const {axis, boundsWidth, series, seriesOptions, rangeSliderState, zoomStateX} = args;
+    const {axis, boundsWidth, series, rangeSliderState, zoomStateX} = args;
     const [xMinPropsOrState, xMaxPropsOrState] = getMinMaxPropsOrState({
         axis,
         maxValues: [zoomStateX?.[1], rangeSliderState?.max],
@@ -401,10 +369,7 @@ export function createXScale(args: {
 
     const range = getXScaleRange({
         boundsWidth,
-        series,
-        seriesOptions,
         hasZoomX,
-        axis,
     });
 
     switch (axis.order) {
@@ -588,17 +553,8 @@ export function createXScale(args: {
 }
 
 const createScales = (args: Args) => {
-    const {
-        boundsWidth,
-        boundsHeight,
-        rangeSliderState,
-        series,
-        seriesOptions,
-        split,
-        xAxis,
-        yAxis,
-        zoomState,
-    } = args;
+    const {boundsWidth, boundsHeight, rangeSliderState, series, split, xAxis, yAxis, zoomState} =
+        args;
     let visibleSeries = getOnlyVisibleSeries(series);
     // Reassign to all series in case of all series unselected,
     // otherwise we will get an empty space without grid
@@ -611,7 +567,6 @@ const createScales = (args: Args) => {
                   boundsWidth,
                   rangeSliderState,
                   series: visibleSeries,
-                  seriesOptions,
                   zoomStateX: zoomState?.x,
               })
             : undefined,
@@ -637,17 +592,8 @@ const createScales = (args: Args) => {
  * Uses to create scales for axis related series
  */
 export const useAxisScales = (args: Args): ReturnValue => {
-    const {
-        boundsWidth,
-        boundsHeight,
-        rangeSliderState,
-        series,
-        seriesOptions,
-        split,
-        xAxis,
-        yAxis,
-        zoomState,
-    } = args;
+    const {boundsWidth, boundsHeight, rangeSliderState, series, split, xAxis, yAxis, zoomState} =
+        args;
     return React.useMemo(() => {
         let xScale: ChartScale | undefined;
         let yScale: (ChartScale | undefined)[] | undefined;
@@ -659,7 +605,6 @@ export const useAxisScales = (args: Args): ReturnValue => {
                 boundsHeight,
                 rangeSliderState,
                 series,
-                seriesOptions,
                 split,
                 xAxis,
                 yAxis,
@@ -668,15 +613,5 @@ export const useAxisScales = (args: Args): ReturnValue => {
         }
 
         return {xScale, yScale};
-    }, [
-        boundsWidth,
-        boundsHeight,
-        rangeSliderState,
-        series,
-        seriesOptions,
-        split,
-        xAxis,
-        yAxis,
-        zoomState,
-    ]);
+    }, [boundsWidth, boundsHeight, rangeSliderState, series, split, xAxis, yAxis, zoomState]);
 };

src/hooks/useRangeSlider/index.ts

@@ -69,7 +69,6 @@ export function useRangeSlider(props: UseRangeSliderProps): PreparedRangeSliderP
         boundsHeight: preparedRangeSlider.height,
         boundsWidth,
         series: preparedSeries,
-        seriesOptions: preparedSeriesOptions,
         split: EMPTY_PREPARED_SPLIT,
         xAxis: preparedXAxis,
         yAxis: preparedYAxis,

src/hooks/useShapes/bar-x/prepare-data.ts

@@ -127,7 +127,7 @@
                     ? getDataCategoryValue({axisDirection: 'x', categories, data: d})
                     : d.x;
 
-            if (xValue) {
+            if (typeof xValue !== 'undefined') {
                 if (!data[xValue]) {
                     data[xValue] = {};
                 }
@@ -212,7 +212,7 @@
                         const xBandScale = xScale as ScaleBand<string>;
                         const xBandScaleDomain = xBandScale.domain();
 
                         if (xBandScaleDomain.indexOf(xValue as string) === -1) {
                             continue;
                         }