diff --git a/src/__snapshots__/bar-x-series.visual.test.tsx-snapshots/Bar-x-series-Linear-X-axis-1-chromium-linux.png b/src/__snapshots__/bar-x-series.visual.test.tsx-snapshots/Bar-x-series-Linear-X-axis-1-chromium-linux.png index d9753105..b8689a27 100644 Binary files a/src/__snapshots__/bar-x-series.visual.test.tsx-snapshots/Bar-x-series-Linear-X-axis-1-chromium-linux.png and b/src/__snapshots__/bar-x-series.visual.test.tsx-snapshots/Bar-x-series-Linear-X-axis-1-chromium-linux.png differ diff --git a/src/__snapshots__/bar-x-series.visual.test.tsx-snapshots/Bar-x-series-Same-data-with-different-x-axis-type-1-chromium-linux.png b/src/__snapshots__/bar-x-series.visual.test.tsx-snapshots/Bar-x-series-Same-data-with-different-x-axis-type-1-chromium-linux.png new file mode 100644 index 00000000..970d3155 Binary files /dev/null and b/src/__snapshots__/bar-x-series.visual.test.tsx-snapshots/Bar-x-series-Same-data-with-different-x-axis-type-1-chromium-linux.png differ diff --git a/src/__snapshots__/bar-x-series.visual.test.tsx-snapshots/Bar-x-series-Same-data-with-different-x-axis-type-2-chromium-linux.png b/src/__snapshots__/bar-x-series.visual.test.tsx-snapshots/Bar-x-series-Same-data-with-different-x-axis-type-2-chromium-linux.png new file mode 100644 index 00000000..9620400c Binary files /dev/null and b/src/__snapshots__/bar-x-series.visual.test.tsx-snapshots/Bar-x-series-Same-data-with-different-x-axis-type-2-chromium-linux.png differ diff --git a/src/__snapshots__/bar-x-series.visual.test.tsx-snapshots/Bar-x-series-Same-data-with-different-x-axis-type-3-chromium-linux.png b/src/__snapshots__/bar-x-series.visual.test.tsx-snapshots/Bar-x-series-Same-data-with-different-x-axis-type-3-chromium-linux.png new file mode 100644 index 00000000..14a17894 Binary files /dev/null and b/src/__snapshots__/bar-x-series.visual.test.tsx-snapshots/Bar-x-series-Same-data-with-different-x-axis-type-3-chromium-linux.png differ diff --git a/src/__snapshots__/bar-x-series.visual.test.tsx-snapshots/Bar-x-series-Stacking-percent-Linear-X-axis-1-chromium-linux.png b/src/__snapshots__/bar-x-series.visual.test.tsx-snapshots/Bar-x-series-Stacking-percent-Linear-X-axis-1-chromium-linux.png index 690362c9..0f8ccdb1 100644 Binary files a/src/__snapshots__/bar-x-series.visual.test.tsx-snapshots/Bar-x-series-Stacking-percent-Linear-X-axis-1-chromium-linux.png and b/src/__snapshots__/bar-x-series.visual.test.tsx-snapshots/Bar-x-series-Stacking-percent-Linear-X-axis-1-chromium-linux.png differ diff --git a/src/__snapshots__/bar-x-series.visual.test.tsx-snapshots/Bar-x-series-x-null-values-nullMode-skip-1-chromium-linux.png b/src/__snapshots__/bar-x-series.visual.test.tsx-snapshots/Bar-x-series-x-null-values-nullMode-skip-1-chromium-linux.png index b2d7c0e2..6ed79cef 100644 Binary files a/src/__snapshots__/bar-x-series.visual.test.tsx-snapshots/Bar-x-series-x-null-values-nullMode-skip-1-chromium-linux.png and b/src/__snapshots__/bar-x-series.visual.test.tsx-snapshots/Bar-x-series-x-null-values-nullMode-skip-1-chromium-linux.png differ diff --git a/src/__snapshots__/bar-x-series.visual.test.tsx-snapshots/Bar-x-series-x-null-values-nullMode-zero-1-chromium-linux.png b/src/__snapshots__/bar-x-series.visual.test.tsx-snapshots/Bar-x-series-x-null-values-nullMode-zero-1-chromium-linux.png index 1abfba89..297b00b7 100644 Binary files a/src/__snapshots__/bar-x-series.visual.test.tsx-snapshots/Bar-x-series-x-null-values-nullMode-zero-1-chromium-linux.png and b/src/__snapshots__/bar-x-series.visual.test.tsx-snapshots/Bar-x-series-x-null-values-nullMode-zero-1-chromium-linux.png differ diff --git a/src/__tests__/bar-x-series.visual.test.tsx b/src/__tests__/bar-x-series.visual.test.tsx index 245fcbf4..9de2e771 100644 --- a/src/__tests__/bar-x-series.visual.test.tsx +++ b/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( + , + ); + 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( + ({x: d.x * day + startDate, y: d.y})), + }, + ], + }, + xAxis: {type: 'datetime'}, + }} + />, + ); + await expect(component.locator('svg')).toHaveScreenshot(); + + // categorical x-axis + await component.update( + , + ); + await expect(component.locator('svg')).toHaveScreenshot(); + }); + test.describe('Stacking percent', () => { test('Linear X-axis ', async ({mount}) => { const chartData: ChartData = { diff --git a/src/components/ChartInner/useChartInnerProps.ts b/src/components/ChartInner/useChartInnerProps.ts index ecb0efcb..3e4ab645 100644 --- a/src/components/ChartInner/useChartInnerProps.ts +++ b/src/components/ChartInner/useChartInnerProps.ts @@ -132,7 +132,6 @@ export function useChartInnerProps(props: Props) { boundsHeight, rangeSliderState, series: preparedSeries, - seriesOptions: preparedSeriesOptions, split: preparedSplit, xAxis, yAxis, diff --git a/src/hooks/useAxis/index.ts b/src/hooks/useAxis/index.ts index def9d469..c5017f74 100644 --- a/src/hooks/useAxis/index.ts +++ b/src/hooks/useAxis/index.ts @@ -53,7 +53,6 @@ export function useAxis(props: UseAxesProps) { xAxis, width, seriesData, - seriesOptions: preparedSeriesOptions, }); let estimatedBoundsHeight = boundsHeight ?? height; diff --git a/src/hooks/useAxis/x-axis.ts b/src/hooks/useAxis/x-axis.ts index c36ee787..0fc8576a 100644 --- a/src/hooks/useAxis/x-axis.ts +++ b/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 => { const hasAxisRelatedSeries = seriesData.some(isAxisRelatedSeries); @@ -235,7 +230,6 @@ export const getPreparedXAxis = async ({ await setLabelSettings({ axis: preparedXAxis, seriesData, - seriesOptions, width, autoRotation: xAxis?.labels?.autoRotation, }); diff --git a/src/hooks/useAxisScales/index.ts b/src/hooks/useAxisScales/index.ts index fac0149b..5a8f5f38 100644 --- a/src/hooks/useAxisScales/index.ts +++ b/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]); }; diff --git a/src/hooks/useRangeSlider/index.ts b/src/hooks/useRangeSlider/index.ts index 246240ee..8d4526ac 100644 --- a/src/hooks/useRangeSlider/index.ts +++ b/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, diff --git a/src/hooks/useShapes/bar-x/prepare-data.ts b/src/hooks/useShapes/bar-x/prepare-data.ts index b2bde3d6..8da5caf5 100644 --- a/src/hooks/useShapes/bar-x/prepare-data.ts +++ b/src/hooks/useShapes/bar-x/prepare-data.ts @@ -127,7 +127,7 @@ export const prepareBarXData = async (args: { ? getDataCategoryValue({axisDirection: 'x', categories, data: d}) : d.x; - if (xValue) { + if (typeof xValue !== 'undefined') { if (!data[xValue]) { data[xValue] = {}; }