Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

improved axis padding and visibility styles #714

Closed
nickofthyme opened this issue Jun 16, 2020 · 3 comments · Fixed by #711
Closed

improved axis padding and visibility styles #714

nickofthyme opened this issue Jun 16, 2020 · 3 comments · Fixed by #711
Labels
:axis Axis related issue enhancement New feature or request released on @19.10.x released Issue released publicly

Comments

@nickofthyme
Copy link
Collaborator

nickofthyme commented Jun 16, 2020 •
edited
Loading

Is your feature request related to a problem? Please describe.
More control over axis tick padding and visibility.

Describe the solution you'd like

  • hide/show axis ticks overall and independently for each axis
  • hide/show axis labels independently for each axis
  • hide/show axis title independently for each axis
  • hide/show axis line independently for each axis
  • Padding should be uniform around each element or defined by Padding type with relative orientation
  • Padding should be available independently around ticks, labels and title
interface Padding {
  inner?: number;
  outer?: number;
}

Describe alternatives you've considered
Currently able to set tickSize or tick visibility on the theme
@nickofthyme nickofthyme added enhancement New feature or request :axis Axis related issue labels Jun 16, 2020
@nickofthyme nickofthyme mentioned this issue Jun 16, 2020
Merged
4 tasks
@markov00 markov00 mentioned this issue Jun 16, 2020
Closed
27 tasks
@nickofthyme nickofthyme linked a pull request Jun 17, 2020 that will close this issue
feat(axis): improved axis styles #711
Merged
4 tasks
nickofthyme added a commit that referenced this issue Jul 19, 2020
@nickofthyme
feat(axis): improved axis styles (#711)
4f1a0b1 
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 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
markov00 pushed a commit that referenced this issue Jul 19, 2020
@semantic-release-bot
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
Copy link
Member

🎉 This issue has been resolved in version 19.10.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

@markov00 markov00 added the released Issue released publicly label Jul 19, 2020
nickofthyme added a commit that referenced this issue Jul 19, 2020
@nickofthyme
feat(axis): improved axis styles (#711)
3c46f9c 
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`
markov00 pushed a commit that referenced this issue Jul 19, 2020
@semantic-release-bot
chore(release): 20.0.0 [skip ci]
7ae03b8 
# [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
Copy link
Member

🎉 This issue has been resolved in version 20.0.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

@markov00
Copy link
Member

🎉 This issue has been resolved in version 19.10.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

AMoo-Miki pushed a commit to AMoo-Miki/OpenSearch-Dashboards that referenced this issue Feb 10, 2022
@semantic-release-bot
chore(release): 20.0.0 [skip ci]
bb145f8 
# [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`
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
:axis Axis related issue enhancement New feature or request released on @19.10.x released Issue released publicly
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat(axis): improved axis styles nickofthyme/elastic-charts
2 participants
@markov00 @nickofthyme