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/hooks/useAxisScales/index.ts

@@ -10,7 +10,6 @@ import type {
     PreparedSeries,
     PreparedSeriesOptions,
     PreparedSplit,
-    PreparedXAxis,
     RangeSliderState,
     ZoomState,
 } from '../../hooks';
@@ -29,7 +28,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';
@@ -330,43 +328,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;
 }
 
@@ -379,7 +350,7 @@ export function createXScale(args: {
     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 +372,7 @@ export function createXScale(args: {
 
     const range = getXScaleRange({
         boundsWidth,
-        series,
-        seriesOptions,
         hasZoomX,
-        axis,
     });
 
     switch (axis.order) {

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;
                         }