diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-with-linear-x-axis-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-with-linear-x-axis-visually-looks-correct-1-snap.png index 7a9ea69f22..8e2b4cdaec 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-with-linear-x-axis-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-with-linear-x-axis-visually-looks-correct-1-snap.png differ diff --git a/packages/charts/src/chart_types/xy_chart/state/selectors/get_api_scale_configs.ts b/packages/charts/src/chart_types/xy_chart/state/selectors/get_api_scale_configs.ts index a9fae4e248..d3d493b1a7 100644 --- a/packages/charts/src/chart_types/xy_chart/state/selectors/get_api_scale_configs.ts +++ b/packages/charts/src/chart_types/xy_chart/state/selectors/get_api_scale_configs.ts @@ -15,10 +15,9 @@ import { GroupId } from '../../../../utils/ids'; import { convertXScaleTypes } from '../../domains/x_domain'; import { coerceYScaleTypes } from '../../domains/y_domain'; import { X_SCALE_DEFAULT, Y_SCALE_DEFAULT } from '../../scales/scale_defaults'; -import { isHorizontalAxis, isVerticalAxis } from '../../utils/axis_type_utils'; +import { isXDomain } from '../../utils/axis_utils'; import { groupBy } from '../../utils/group_data_series'; import { AxisSpec, BasicSeriesSpec, CustomXDomain, XScaleType, YDomainRange } from '../../utils/specs'; -import { isHorizontalRotation } from '../utils/common'; import { getSpecDomainGroupId } from '../utils/spec'; import { getAxisSpecsSelector, getSeriesSpecsSelector } from './get_specs'; import { mergeYCustomDomainsByGroupId } from './merge_y_custom_domains'; @@ -54,19 +53,17 @@ export function getScaleConfigsFromSpecs( seriesSpecs: BasicSeriesSpec[], settingsSpec: SettingsSpec, ): ScaleConfigs { - const isHorizontalChart = isHorizontalRotation(settingsSpec.rotation); - // x axis - const xAxes = axisSpecs.filter((d) => isHorizontalChart === isHorizontalAxis(d.position)); - const xTicks = xAxes.reduce((acc, { ticks = X_SCALE_DEFAULT.desiredTickCount }) => { + const xAxesSpecs = axisSpecs.filter((spec) => isXDomain(spec.position, settingsSpec.rotation)); + const maxTickCountForXAxes = xAxesSpecs.reduce((acc, { ticks = X_SCALE_DEFAULT.desiredTickCount }) => { return Math.max(acc, ticks); - }, X_SCALE_DEFAULT.desiredTickCount); + }, -Infinity); const xScaleConfig = convertXScaleTypes(seriesSpecs); const x: ScaleConfigs['x'] = { customDomain: settingsSpec.xDomain, ...xScaleConfig, - desiredTickCount: xTicks, + desiredTickCount: Number.isFinite(maxTickCountForXAxes) ? maxTickCountForXAxes : X_SCALE_DEFAULT.desiredTickCount, }; // y axes @@ -80,16 +77,19 @@ export function getScaleConfigsFromSpecs( const customDomainByGroupId = mergeYCustomDomainsByGroupId(axisSpecs, settingsSpec.rotation); - const yAxes = axisSpecs.filter((d) => isHorizontalChart === isVerticalAxis(d.position)); + const yAxisSpecs = axisSpecs.filter((spec) => !isXDomain(spec.position, settingsSpec.rotation)); const y = Object.keys(scaleConfigsByGroupId).reduce((acc, groupId) => { - const axis = yAxes.find((yAxis) => yAxis.groupId === groupId); - const desiredTickCount = axis?.ticks ?? Y_SCALE_DEFAULT.desiredTickCount; - const scaleConfig = scaleConfigsByGroupId[groupId]; - const customDomain = customDomainByGroupId.get(groupId); + const maxTickCountYAxes = yAxisSpecs.reduce((maxTickCount, yAxis) => { + return yAxis.groupId === groupId + ? Math.max(maxTickCount, yAxis.ticks ?? Y_SCALE_DEFAULT.desiredTickCount) + : maxTickCount; + }, -Infinity); + const desiredTickCount = Number.isFinite(maxTickCountYAxes) ? maxTickCountYAxes : Y_SCALE_DEFAULT.desiredTickCount; + if (!acc[groupId]) { acc[groupId] = { - customDomain, - ...scaleConfig, + customDomain: customDomainByGroupId.get(groupId), + ...scaleConfigsByGroupId[groupId], desiredTickCount, }; } diff --git a/storybook/stories/area/3_with_linear.story.tsx b/storybook/stories/area/3_with_linear.story.tsx index 37f01cca6c..077fa382da 100644 --- a/storybook/stories/area/3_with_linear.story.tsx +++ b/storybook/stories/area/3_with_linear.story.tsx @@ -17,22 +17,22 @@ import { useBaseTheme } from '../../use_base_theme'; export const Example = () => { const start = KIBANA_METRICS.metrics.kibana_os_load[0].data[0][0]; const data = KIBANA_METRICS.metrics.kibana_os_load[0].data - .slice(0, 20) - .map((d) => [(d[0] - start) / 30000, clamp(d[1] - 10, 0, 3)]); + .slice(0, 21) + .map((d) => [(d[0] - start) / 30000, clamp(d[1], 0, 30)]); return ( - + `${d} sec`} /> `${Math.round(Number(d))}`} - ticks={7} + labelFormat={(d) => `${d.toFixed(0)}%`} + tickFormat={(d) => `${d.toFixed(1)}%`} + ticks={5} />