feat(xy)!: change `timeAxisLayerCount` the default from `0` to `2` #2582

walterra · 2025-01-13T14:08:58Z

Summary

timeAxisLayerCount: 2 is now the default to render multiple layers for time based axes. This feature was originally added in 2021 and now just a small set of consumers are using the legacy time axis.

BREAKING CHANGE

The timeAxisLayerCount options now defaults to 2 instead of 0.

Details

This includes some tricky changes: Because timeAxisLayerCount defaulted to 0, code in some places assumed that a change to 2 was only done by users when the x axis was then time based. Thus changing the default to 2 changed the calculated padding for all axis types.
On top of that this surfaced a limitation of this setting: When timeAxisLayerCount is set to 2, there was no check for axes if they were actually time based. This means this also affected vertical axes so the left and right margin would change. I think that's the reason why we see so many baseline changes in the playwright e2e image assertions.

Issues

This PR is part of elastic/kibana#193683

Checklist

The proper chart type label has been added (e.g. :xy, :partition)
The proper feature labels have been added (e.g. :interactions, :axis)
All related issues have been linked (i.e. closes #123, fixes #123)
New public API exports have been added to packages/charts/src/index.ts
Unit tests have been added or updated to match the most common scenarios
The proper documentation and/or storybook story has been added or updated
The code has been checked for cross-browser compatibility (Chrome, Firefox, Safari, Edge)
Visual changes have been tested with light and dark themes

nickofthyme · 2025-01-13T18:53:53Z

@walterra FYI, to update any playwright snapshots you can comment on the PR with..

buildkite update screenshots

This will run the ci in update mode and push a commit to your branch with the updated e2e screenshots, if any. The reason we need to run this in the CI is due to slight differences in the browser binaries between MacOS and linux ci agents. So to avoid this we only store screenshots generated from ci.

And to just trigger a re-run of the ci you can comment...

buildkite test this

storybook/stories/components/tooltip/10_cartesian_chart.story.tsx

walterra · 2025-01-20T14:26:24Z

storybook/stories/test_cases/21_domain_edges.story.tsx

@@ -81,24 +81,7 @@ export const Example: ChartsStory = (_, { title, description }) => {
            },


This still causes a baseline change, right padding in the lowest chart:

This reason for this regression: We now have to check for both timeAxisLayerCount > 0 and if the scale type is time, however, the lowest chart uses ordinal.

If I change the xScaleType of the BarSeries of the last chart to ScaleType.Time it looks correct:

With the update (c6fdc74) to use enableHistogramMode:true for time based x-axis the axis now render the same across all three charts:

walterra · 2025-01-20T15:46:36Z

docs/docs/api/specs/xy/axis.mdx

@@ -132,7 +132,7 @@ Show duplicated ticks

 ### `timeAxisLayerCount`
 - Type: <code>timeAxisLayerCount: number</code>
- Default: `0`
+- Default: `2`


Posting this here for reference to start a thread, because the affected example file has not been touched.

There's a baseline change for stories with custom markers. Previously the axis ticks and markers would render overlapping, now they render with additional offset. Is the new version ok? I'm not sure the original overlapping was intentional or a bug?

https://ech-e2e-ci--pr-2582-n5t2yfqp.web.app/e2e-report/#?testId=9cb55a84df16c692f1c3-042343d23333860efb20

walterra · 2025-01-24T08:21:43Z

packages/charts/src/chart_types/xy_chart/axes/axes_sizes.ts

 ) => {
  const { tickLine, axisTitle, axisPanelTitle, tickLabel } = axesStyles.get(axisSpec.id) ?? sharedAxesStyles;
  const horizontal = isHorizontalAxis(axisSpec.position);
  const maxLabelBoxGirth = horizontal ? maxLabelBboxHeight : maxLabelBboxWidth;
-  const allLayersGirth = getAllAxisLayersGirth(axisSpec.timeAxisLayerCount, maxLabelBoxGirth, horizontal);
+  const isMultilayerTimeAxis = isMultilayerTimeAxisFn({ axisSpec, scaleConfigs, rotation });


This could be named const multilayerTimeAxis = isMultilayerTimeAxis(...) instead, wdyt?

updated in b07adcf.

markov00 · 2025-01-27T11:08:27Z

packages/charts/src/chart_types/xy_chart/axes/axes_sizes.ts

 ) => {
  const { tickLine, axisTitle, axisPanelTitle, tickLabel } = axesStyles.get(axisSpec.id) ?? sharedAxesStyles;
  const horizontal = isHorizontalAxis(axisSpec.position);
  const maxLabelBoxGirth = horizontal ? maxLabelBboxHeight : maxLabelBboxWidth;
-  const allLayersGirth = getAllAxisLayersGirth(axisSpec.timeAxisLayerCount, maxLabelBoxGirth, horizontal);
+  const isMultilayerTimeAxis = isMultilayerTimeAxisFn({ axisSpec, scaleConfigs, rotation });


markov00 · 2025-01-27T11:13:59Z

packages/charts/src/chart_types/xy_chart/state/selectors/get_axis_styles.ts

+    alignment: {
+      vertical: Position.Bottom,
+      horizontal: Position.Left,
+    },


For some reason multiple tests shows centered aligned bars instead of left aligned bars. The first example is here https://ech-e2e-ci--pr-2582-n5t2yfqp.web.app/e2e-report/#?testId=4a59eca736035d93205f-0a486745228f4b4ff460

Do you mind checking and see why the bars are centered?

To me it looks like they were centered before too, it wasn't just as obvious because the date axis labels didn't have ticks. If you compare the grid and annotations they are the same in both charts, aren't they? It looks to me like BarSeries is always centered, and just HistogramBarSeries will left-align the bars. (Like the Rendering Bars example that already used timeAxisLayerCount=2.

Should we update examples with time axis to always use HistogramBarSeries? (If yes I'd prefer to do that in a follow up to make review easier for just that change)

Here's how the example renders now with using enableHistogramMode:true for charts with a time based x-axis. (c6fdc74)

packages/charts/src/chart_types/xy_chart/axes/axes_sizes.ts

packages/charts/src/chart_types/xy_chart/renderer/canvas/axes/tick.ts

packages/charts/src/chart_types/xy_chart/renderer/canvas/axes/tick_label.ts

packages/charts/src/chart_types/xy_chart/renderer/canvas/panels/title.ts

walterra · 2025-02-07T13:34:14Z

@markov00 I updated code related to multilayerTimeAxis so it's not recalculated that often. I pushed the calculation as far up as possible to the level of selectors, or where we iterate over all axes and need to calculate it for each axis.

… axis

…_utils

…ime axis

walterra · 2025-02-20T08:22:21Z

packages/charts/src/chart_types/xy_chart/specs/bar_series.ts

+  const constraints: Pick<typeof props, 'enableHistogramMode'> = {};
+
+  // enable histogram mode for time scales to align with the multi-layer time axis.
+  if (props.xScaleType === ScaleType.Time) {
+    constraints.enableHistogramMode = true;
+  }
+
+  useSpecFactory<BarSeriesSpec<D>>({ ...defaults, ...stripUndefined(props), ...overrides, ...constraints });


@markov00 Is this the right place to update enableHistogramMode internally? I saw the goal chart does something similar. Is this sufficient or do we also need to check for rotation (e.g. to be 0 or 180) here?

I think is fine checking just this, the rotation is not necessary I believe

elastic-datavis · 2025-02-20T08:33:01Z

✅ Successful Deployment (build#4562) - `c6fdc74`

walterra changed the title ~~make timeAxisLayerCount: 2 the default~~ feat(xy): make timeAxisLayerCount: 2 the default Jan 13, 2025

walterra self-assigned this Jan 13, 2025

walterra added :axis Axis related issue :xy Bar/Line/Area chart related labels Jan 13, 2025

walterra force-pushed the remove-legacy-time-axis-support branch from 6b22f3a to fd7ac96 Compare January 14, 2025 15:57

walterra commented Jan 15, 2025

View reviewed changes

storybook/stories/components/tooltip/10_cartesian_chart.story.tsx Show resolved Hide resolved

walterra changed the title ~~feat(xy): make timeAxisLayerCount: 2 the default~~ fix!(xy): change timeAxisLayerCount the default from 0 to 2 Jan 16, 2025

walterra changed the title ~~fix!(xy): change timeAxisLayerCount the default from 0 to 2~~ feat!(xy): change timeAxisLayerCount the default from 0 to 2 Jan 17, 2025

walterra changed the title ~~feat!(xy): change timeAxisLayerCount the default from 0 to 2~~ feat(xy)!: change timeAxisLayerCount the default from 0 to 2 Jan 17, 2025

walterra added kibana cross issue Has a Kibana issue counterpart and removed kibana cross issue Has a Kibana issue counterpart labels Jan 20, 2025

walterra commented Jan 20, 2025

View reviewed changes

walterra force-pushed the remove-legacy-time-axis-support branch from 3a7832f to abddedc Compare January 21, 2025 15:59

walterra marked this pull request as ready for review January 24, 2025 08:14

walterra commented Jan 24, 2025

View reviewed changes

markov00 reviewed Jan 27, 2025

View reviewed changes

walterra force-pushed the remove-legacy-time-axis-support branch from 2f97696 to 125b36b Compare January 30, 2025 10:16

walterra mentioned this pull request Jan 30, 2025

Remove visualization:useLegacyTimeAxis Advanced Setting elastic/kibana#193683

Open

3 tasks

markov00 reviewed Feb 5, 2025

View reviewed changes

packages/charts/src/chart_types/xy_chart/axes/axes_sizes.ts Outdated Show resolved Hide resolved

markov00 reviewed Feb 5, 2025

View reviewed changes

packages/charts/src/chart_types/xy_chart/renderer/canvas/axes/tick.ts Outdated Show resolved Hide resolved

markov00 reviewed Feb 5, 2025

View reviewed changes

packages/charts/src/chart_types/xy_chart/renderer/canvas/axes/tick_label.ts Outdated Show resolved Hide resolved

markov00 reviewed Feb 5, 2025

View reviewed changes

packages/charts/src/chart_types/xy_chart/renderer/canvas/panels/title.ts Outdated Show resolved Hide resolved

walterra force-pushed the remove-legacy-time-axis-support branch from 125b36b to fc7edea Compare February 7, 2025 10:42

walterra added 4 commits February 20, 2025 08:40

change default timeAxisLayerCount to 2, update matching default styles

5bda2dd

update defaults for timeAxisLayerCount

3024c20

update examples

6de88e4

fix style application

bf6f13d

walterra added 27 commits February 20, 2025 08:40

update snapshots

f406321

fix jest tests for axis_utils

1eb76a5

update packages/charts/api/charts.api.md

6206090

apply multilayer time axis style only to xy charts with time on the x…

507a484

… axis

update snapshots

bdc89a2

tweak getAxesStylesSelector to retain original default behavior

aa75d28

pass around scaleType to identify if x axis is of type time

53bb38d

fix jest tests for axis_utils

699c962

fix jest tests and update snapshots for utils/dimensions

326cb89

tweak var names

4a6f1cb

revert isVertical to vertical

f050825

update packages/charts/api/charts.api.md

e993704

pass on settingsSpec.rotation

4be69ef

fix x axis time scale check

c52a4c1

update snapshots

9337433

adds checks that isMultilayerTimeAxis needs to have chart rotation of 0.

5d05ade

change story axis from ordinal to time to fix padding

8ba9cd8

isMultilayerTimeAxisSelector

12f3d3b

isMultilayerTimeAxisSelector is now just isMultilayerTimeAxis in axis…

925c5ba

…_utils

provide chart rotation via settingsSpec

5ef3060

fix jest tests

3bda648

adds jest tests for isMultilayerTimeAxisFn

35791a0

delete leftover line

316102b

naming tweaks

93c761f

pass around less heavy args

93e77c5

refactor to individual args instead of options arg

f2645cb

enable histogram mode for time scales to align with the multi-layer t…

c6fdc74

…ime axis

walterra force-pushed the remove-legacy-time-axis-support branch from c3b3570 to c6fdc74 Compare February 20, 2025 08:14

walterra commented Feb 20, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(xy)!: change `timeAxisLayerCount` the default from `0` to `2` #2582

feat(xy)!: change `timeAxisLayerCount` the default from `0` to `2` #2582

walterra commented Jan 13, 2025 •

edited

Loading

nickofthyme commented Jan 13, 2025 •

edited

Loading

walterra Jan 20, 2025

walterra Jan 20, 2025

walterra Jan 20, 2025

walterra Feb 20, 2025

walterra Jan 20, 2025 •

edited

Loading

walterra Jan 24, 2025

markov00 Jan 27, 2025

walterra Feb 7, 2025

markov00 Jan 27, 2025

markov00 Jan 27, 2025

walterra Jan 27, 2025

walterra Feb 20, 2025

walterra commented Feb 7, 2025

walterra Feb 20, 2025

markov00 Feb 20, 2025

elastic-datavis bot commented Feb 20, 2025

		@@ -81,24 +81,7 @@ export const Example: ChartsStory = (_, { title, description }) => {
		},

feat(xy)!: change timeAxisLayerCount the default from 0 to 2 #2582

Are you sure you want to change the base?

feat(xy)!: change timeAxisLayerCount the default from 0 to 2 #2582

Conversation

walterra commented Jan 13, 2025 • edited Loading

Summary

BREAKING CHANGE

Details

Issues

Checklist

nickofthyme commented Jan 13, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

walterra Jan 20, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

walterra commented Feb 7, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

elastic-datavis bot commented Feb 20, 2025

✅ Successful Deployment (build#4562) - c6fdc74

feat(xy)!: change `timeAxisLayerCount` the default from `0` to `2` #2582

feat(xy)!: change `timeAxisLayerCount` the default from `0` to `2` #2582

walterra commented Jan 13, 2025 •

edited

Loading

nickofthyme commented Jan 13, 2025 •

edited

Loading

walterra Jan 20, 2025 •

edited

Loading

✅ Successful Deployment (build#4562) - `c6fdc74`