feat(xy)!: change `timeAxisLayerCount` the default from `0` to `2` by walterra · Pull Request #2582 · elastic/elastic-charts

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

Fixes #2125

This PR is part of elastic/kibana#193683

close elastic/kibana#221512

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

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

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

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

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

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.

…ime axis

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

walterra · 2025-03-05T13:28:13Z

buildkite update screenshots

nickofthyme

Overall LGTM. I would just ask that we swap out the manual object creation with the equivalent mocks in the unit tests.

packages/charts/src/chart_types/xy_chart/utils/axis_utils.test.ts

packages/charts/src/chart_types/xy_chart/utils/dimensions.test.ts

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

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

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

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

nickofthyme

Thanks for the changes! LGTM

BREAKING CHANGE: The timeAxisLayerCount options now defaults to 2 instead of 0. The multilayer time axis is now the default style.

# [70.0.0](v69.2.0...v70.0.0) (2025-03-26) ### Features * **xy:** change timeAxisLayerCount the default from 0 to 2 ([#2582](#2582)) ([81c32c7](81c32c7)) ### BREAKING CHANGES * **xy:** The timeAxisLayerCount options now defaults to 2 instead of 0. The multilayer time axis is now the default style.

…o `2` (#2582)" This reverts commit 6863e6e.

…to `2` (#2582)" This reverts commit 6863e6e.

## [69.2.1](v69.2.0...v69.2.1) (2025-03-28) ### Reverts * "feat(xy)!: change `timeAxisLayerCount` the default from `0` to `2` ([#2582](#2582))" ([a9d3fcb](a9d3fcb))

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

storybook/stories/test_cases/21_domain_edges.story.tsx Show resolved Hide resolved

walterra commented Jan 20, 2025

View reviewed changes

docs/docs/api/specs/xy/axis.mdx Show resolved Hide resolved

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

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

markov00 reviewed Jan 27, 2025

View reviewed changes

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

packages/charts/src/chart_types/xy_chart/state/selectors/get_axis_styles.ts Show resolved Hide resolved

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

[meta] Remove Legacy elastic-charts time axis in favour of multi-layer time axis elastic/kibana#193683

Closed

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 7 commits February 20, 2025 08:47

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

packages/charts/src/chart_types/xy_chart/specs/bar_series.ts Show resolved Hide resolved

markov00 and others added 3 commits March 4, 2025 19:55

fix storybook stories

be42e14

Merge branch 'main' into remove-legacy-time-axis-support

59004d5

fix import

4337d98

test(vrt): update screenshots [skip ci]

261324f

nickofthyme approved these changes Mar 10, 2025

View reviewed changes

markov00 approved these changes Mar 11, 2025

View reviewed changes

packages/charts/src/chart_types/xy_chart/specs/bar_series.ts Show resolved Hide resolved

walterra added 3 commits March 11, 2025 11:14

use mock spec

bc499cb

use MockGlobalSpec.settings

4f9927d

remove isXAxis

f161d88

nickofthyme approved these changes Mar 11, 2025

View reviewed changes

walterra merged commit 6863e6e into elastic:main Mar 11, 2025
14 checks passed

walterra deleted the remove-legacy-time-axis-support branch March 11, 2025 16:36

markov00 added a commit that referenced this pull request Mar 26, 2025

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

81c32c7

BREAKING CHANGE: The timeAxisLayerCount options now defaults to 2 instead of 0. The multilayer time axis is now the default style.

markov00 added a commit that referenced this pull request Mar 28, 2025

Revert "feat(xy)!: change timeAxisLayerCount the default from 0 t…

c61fffe

…o `2` (#2582)" This reverts commit 6863e6e.

markov00 added a commit that referenced this pull request Mar 28, 2025

revert: "feat(xy)!: change timeAxisLayerCount the default from 0 …

a9d3fcb

…to `2` (#2582)" This reverts commit 6863e6e.

nickofthyme pushed a commit that referenced this pull request Mar 28, 2025

chore(release): 69.2.1 [skip ci]

47e7108

## [69.2.1](v69.2.0...v69.2.1) (2025-03-28) ### Reverts * "feat(xy)!: change `timeAxisLayerCount` the default from `0` to `2` ([#2582](#2582))" ([a9d3fcb](a9d3fcb))

markov00 mentioned this pull request Apr 29, 2025

[cartesian] Use only multi-layer time axis style #2125

Closed

markov00 mentioned this pull request May 26, 2025

[ElasticCharts] Use multi-layer time axis as default time axis elastic/kibana#221512

Closed

andrimal mentioned this pull request Sep 24, 2025

[9.0] Update dependency @elastic/charts to v69.2.3 to fix partition nested tooltip colors elastic/kibana#236348

Closed

3 tasks

Conversation

walterra commented Jan 13, 2025 • edited by markov00 Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

BREAKING CHANGE

Details

Issues

Checklist

Uh oh!

nickofthyme commented Jan 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

walterra commented Feb 7, 2025

Uh oh!

Uh oh!

walterra commented Mar 5, 2025

Uh oh!

nickofthyme left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

nickofthyme left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

walterra commented Jan 13, 2025 •

edited by markov00

Loading

nickofthyme commented Jan 13, 2025 •

edited

Loading