feat(axis): improved axis styles #711

nickofthyme · 2020-06-15T23:15:10Z

Summary

closes #714, #312

Type Changes

Adds visibility to axisTitle, axisLine and tickLabel
Adds inner and outer properties to TextStyle.padding. Still accepts number

BREAKING CHANGES

property name changes:

AxisSpec.gridLineStyle => AxisSpec.gridLine
AxisSpec.gridLineStyle => AxisSpec.gridLine

type changes:

AxisSpec.tickLabelRotation => AxisStyle.tickLabel.rotation
AxisSpec.tickPadding => AxisStyle.tickLine.padding
AxisSpec.tickSize => AxisStyle.tickLine.size
AxisStyle.tickLabelPadding => AxisStyle.tickLabel.padding
GridLineConfig => GridLineStyle
AxisSpec.style => RecursivePartial<AxisStyle> (new AxisStyle type)
AxisConfig.axisLineStyle => AxisStyle.axisLine
AxisConfig.axisTitleStyle => AxisStyle.axisTitle
AxisConfig.tickLabelStyle => AxisStyle.tickLabel
AxisConfig.tickLineStyle => AxisStyle.tickLine
GridLineStyle requires all properties
deprecate AxisSpec.showGridLines in favor of AxisSpec.gridLine.visible

Axis improvements

Hide axis but show gridlines

hide axis titles, labels, ticks and line independently

add inner and outer padding to tick labels

add inner and outer padding to axes titles

transform offsets relative to local reference (i.e. rotated coordinates)

transform offsets relative to global reference

add tick label horizontal and vertical alignment

Checklist

Delete any items that are not applicable to this PR.

Any consumer-facing exports were added to src/index.ts (and stories only import from ../src except for test data & storybook)
This was checked for cross-browser compatibility, including a check against IE11
Proper documentation or storybook story was added for features that require explanation or tutorials
Unit tests were updated or added to match the most common scenarios

- add visibility to ticks, labels, line and overall axis - add style overrides for each axis that override theme axis styles - improve padding controls for axis titles, labels and ticks - add tick label offsets to tweek final position of tick labels

api/charts.api.md

src/chart_types/xy_chart/renderer/canvas/axes/index.ts

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

src/chart_types/xy_chart/renderer/canvas/primitives/text.ts

src/chart_types/xy_chart/specs/axis.tsx

src/utils/themes/theme.ts

src/chart_types/xy_chart/utils/specs.ts

src/utils/commons.ts

src/chart_types/xy_chart/utils/axis_utils.ts

- update api docs and types - fix gridline visibility to use theme or showGridline prop - only translate canvas context when needed - remove stale properties - fix naming from latest variable and type changes - improve type descriptions - update theme values to match old padding theme config - fix type errors in stories

markov00

Tested locally and works great!
I've left a comment on my previous review and I want to ask if, on the same PR, you think it's worth also removing/deprecating these two props showOverlappingTicks and showOverlappingLabels moving these to the style

nickofthyme · 2020-07-16T15:19:22Z

Tested locally and works great!
I've left a comment on my previous review and I want to ask if, on the same PR, you think it's worth also removing/deprecating these two props showOverlappingTicks and showOverlappingLabels moving these to the style

Yeah I think we punt this decision until we make gridlines a first-class-citizen. I would also like to see nicing and a major/minor tick function like we talked about. Or even tick intervals like excel does.

Excel tick config

markov00

LGTM

# [19.10.0](v19.9.0...v19.10.0) (2020-07-19) ### Features * **axis:** improved axis styles ([#711](#711)) ([4f1a0b1](4f1a0b1)), closes [#714](#714) [#312](#312)

Axis improvements - Hide axis but show gridlines - hide axis titles, labels, ticks and line independently - add inner and outer padding to tick labels - add inner and outer padding to axes titles - transform offsets relative to local reference (i.e. rotated coordinates) - transform offsets relative to global reference - add tick label horizontal and vertical alignment closes #714, #312 BREAKING CHANGE: - `AxisSpec.gridLineStyle` => `AxisSpec.gridLine` - `AxisSpec.gridLineStyle` => `AxisSpec.gridLine` - `AxisSpec.tickLabelRotation` => `AxisStyle.tickLabel.rotation` - `AxisSpec.tickPadding` => `AxisStyle.tickLine.padding` - `AxisSpec.tickSize` => `AxisStyle.tickLine.size` - `AxisStyle.tickLabelPadding` => `AxisStyle.tickLabel.padding` - `GridLineConfig` => `GridLineStyle` - `AxisSpec.style` => `RecursivePartial<AxisStyle>` (new `AxisStyle` type) - `AxisConfig.axisLineStyle` => `AxisStyle.axisLine` - `AxisConfig.axisTitleStyle` => `AxisStyle.axisTitle` - `AxisConfig.tickLabelStyle` => `AxisStyle.tickLabel` - `AxisConfig.tickLineStyle` => `AxisStyle.tickLine` - `GridLineStyle` requires all properties - deprecate `AxisSpec.showGridLines` in favor of `AxisSpec.gridLine.visible`

# [20.0.0](v19.9.1...v20.0.0) (2020-07-19) ### Features * **axis:** improved axis styles ([#711](#711)) ([3c46f9c](3c46f9c)), closes [#714](#714) [#312](#312) ### BREAKING CHANGES * **axis:** - `AxisSpec.gridLineStyle` => `AxisSpec.gridLine` - `AxisSpec.gridLineStyle` => `AxisSpec.gridLine` - `AxisSpec.tickLabelRotation` => `AxisStyle.tickLabel.rotation` - `AxisSpec.tickPadding` => `AxisStyle.tickLine.padding` - `AxisSpec.tickSize` => `AxisStyle.tickLine.size` - `AxisStyle.tickLabelPadding` => `AxisStyle.tickLabel.padding` - `GridLineConfig` => `GridLineStyle` - `AxisSpec.style` => `RecursivePartial<AxisStyle>` (new `AxisStyle` type) - `AxisConfig.axisLineStyle` => `AxisStyle.axisLine` - `AxisConfig.axisTitleStyle` => `AxisStyle.axisTitle` - `AxisConfig.tickLabelStyle` => `AxisStyle.tickLabel` - `AxisConfig.tickLineStyle` => `AxisStyle.tickLine` - `GridLineStyle` requires all properties - deprecate `AxisSpec.showGridLines` in favor of `AxisSpec.gridLine.visible`

markov00 · 2020-07-20T13:51:57Z

🎉 This PR is included in version 20.0.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

This reverts commit 4f1a0b1.

# [20.0.0](elastic/elastic-charts@v19.9.1...v20.0.0) (2020-07-19) ### Features * **axis:** improved axis styles ([opensearch-project#711](elastic/elastic-charts#711)) ([e736aad](elastic/elastic-charts@e736aad)), closes [opensearch-project#714](elastic/elastic-charts#714) [opensearch-project#312](elastic/elastic-charts#312) ### BREAKING CHANGES * **axis:** - `AxisSpec.gridLineStyle` => `AxisSpec.gridLine` - `AxisSpec.gridLineStyle` => `AxisSpec.gridLine` - `AxisSpec.tickLabelRotation` => `AxisStyle.tickLabel.rotation` - `AxisSpec.tickPadding` => `AxisStyle.tickLine.padding` - `AxisSpec.tickSize` => `AxisStyle.tickLine.size` - `AxisStyle.tickLabelPadding` => `AxisStyle.tickLabel.padding` - `GridLineConfig` => `GridLineStyle` - `AxisSpec.style` => `RecursivePartial<AxisStyle>` (new `AxisStyle` type) - `AxisConfig.axisLineStyle` => `AxisStyle.axisLine` - `AxisConfig.axisTitleStyle` => `AxisStyle.axisTitle` - `AxisConfig.tickLabelStyle` => `AxisStyle.tickLabel` - `AxisConfig.tickLineStyle` => `AxisStyle.tickLine` - `GridLineStyle` requires all properties - deprecate `AxisSpec.showGridLines` in favor of `AxisSpec.gridLine.visible`

nickofthyme changed the title ~~Axis label styles~~ feat(axis): improved label styles Jun 15, 2020

markov00 mentioned this pull request Jun 15, 2020

[meta] Vislib chart replacement #66

Closed

27 tasks

nickofthyme mentioned this pull request Jun 17, 2020

Replace line, area and bar charts with elastic charts elastic/kibana#57584

Closed

23 tasks

nickofthyme linked an issue Jun 17, 2020 that may be closed by this pull request

improved axis padding and visibility styles #714

Closed

nickofthyme force-pushed the axis-label-styles branch from 6651716 to 99149f9 Compare June 26, 2020 19:21

nickofthyme force-pushed the axis-label-styles branch from 99149f9 to 6a192c8 Compare July 8, 2020 15:47

nickofthyme force-pushed the axis-label-styles branch from 6a192c8 to 8e4ccb8 Compare July 13, 2020 14:30

nickofthyme changed the title ~~feat(axis): improved label styles~~ feat(axis): improved axis styles Jul 13, 2020

fix: tick label visibliy calculations

5c4e86f

nickofthyme requested a review from markov00 July 13, 2020 15:09

markov00 added the breaking change label Jul 13, 2020

markov00 reviewed Jul 13, 2020

View reviewed changes

nickofthyme added 2 commits July 14, 2020 15:59

test: update snapshots with padding changes

d9886d2

nickofthyme mentioned this pull request Jul 15, 2020

[Lens] X axis styling options elastic/kibana#68315

Closed

nickofthyme added 5 commits July 15, 2020 15:04

fix: axis title visibility

0c82eaa

chore: prevent logging via Logger in test env

a3b6b15

test: fix broken tests from changes

7aa9529

chore: cleanup imports

099b9c9

Merge branch 'master' into axis-label-styles

23eca43

nickofthyme marked this pull request as ready for review July 15, 2020 22:25

nickofthyme added 3 commits July 15, 2020 18:30

refactor: cleanup gridLineStyles logic

84cc2bb

test: update test screenshots

2781dfe

fix: bad tick formatting

7588bbd

markov00 self-requested a review July 16, 2020 09:33

markov00 reviewed Jul 16, 2020

View reviewed changes

nickofthyme requested a review from markov00 July 16, 2020 15:13

nickofthyme added 2 commits July 16, 2020 10:44

fix: types

50c6fad

docs: update the api from latest changes

e865194

markov00 approved these changes Jul 17, 2020

View reviewed changes

nickofthyme added 5 commits July 17, 2020 12:01

Merge branch 'master' into axis-label-styles

7ca4f53

test: update vrt screenshots after merge with master

30c9ca8

Merge branch 'master' into axis-label-styles

a39a6cd

test: update flacky screenshot

83e7cd5

test: skip flacky screenshot

1923d16

nickofthyme merged commit 4f1a0b1 into elastic:master Jul 19, 2020

markov00 pushed a commit that referenced this pull request Jul 19, 2020

chore(release): 19.10.0 [skip ci]

4c74ee7

# [19.10.0](v19.9.0...v19.10.0) (2020-07-19) ### Features * **axis:** improved axis styles ([#711](#711)) ([4f1a0b1](4f1a0b1)), closes [#714](#714) [#312](#312)

markov00 added the released Issue released publicly label Jul 19, 2020

markov00 added the released on @19.10.x label Jul 20, 2020

nickofthyme added a commit that referenced this pull request Jul 20, 2020

Revert "feat(axis): improved axis styles (#711)"

e395e1b

This reverts commit 4f1a0b1.

elastic deleted a comment from markov00 Jul 20, 2020

nickofthyme removed the released on @19.10.x label Jul 20, 2020

nickofthyme deleted the axis-label-styles branch July 20, 2020 15:14

markov00 mentioned this pull request Aug 26, 2020

Axes tick labels should be hide-able #312

Closed

1 task

nickofthyme mentioned this pull request Sep 18, 2020

fix(axis): style overrides not applied to axis dimensions #829

Merged

2 tasks

nickofthyme mentioned this pull request Oct 10, 2023

fix(axis): always render tickLine unless visible is false #2194

Merged

4 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(axis): improved axis styles #711

feat(axis): improved axis styles #711

nickofthyme commented Jun 15, 2020 •

edited

Loading

markov00 left a comment

nickofthyme commented Jul 16, 2020

markov00 left a comment

markov00 commented Jul 20, 2020 •

edited by nickofthyme

Loading

feat(axis): improved axis styles #711

feat(axis): improved axis styles #711

Conversation

nickofthyme commented Jun 15, 2020 • edited Loading

Summary

Checklist

markov00 left a comment

Choose a reason for hiding this comment

nickofthyme commented Jul 16, 2020

markov00 left a comment

Choose a reason for hiding this comment

markov00 commented Jul 20, 2020 • edited by nickofthyme Loading

nickofthyme commented Jun 15, 2020 •

edited

Loading

markov00 commented Jul 20, 2020 •

edited by nickofthyme

Loading