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.

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

feat: customize number of axis ticks #319

Merged
merged 4 commits into from
Aug 21, 2019
Merged

Conversation

markov00
Copy link
Member

Summary

This PR add the possibility to customize the number of ticks displayed on each axis.

A ticks parameter is added to the Axis component. The number specified is not always fully respected as the real number of displayed ticks because the scale function computes ticks that are uniformly spaced with human-readable values (such as multiples of powers of 10), and are guaranteed to be within the extent of the domain (see https://github.com/d3/d3-scale#continuous_ticks)

Aug-17-2019 00-11-16

Checklist

Use strikethroughs to remove checklist items you don't feel are 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
  • Each commit follows the convention

@markov00 markov00 mentioned this pull request Aug 16, 2019
25 tasks
@codecov-io
Copy link

codecov-io commented Aug 16, 2019

Codecov Report

Merging #319 into master will increase coverage by <.01%.
The diff coverage is 100%.

Impacted file tree graph

@@            Coverage Diff             @@
##           master     #319      +/-   ##
==========================================
+ Coverage   98.04%   98.04%   +<.01%     
==========================================
  Files          37       37              
  Lines        2715     2716       +1     
  Branches      636      631       -5     
==========================================
+ Hits         2662     2663       +1     
  Misses         48       48              
  Partials        5        5
Impacted Files Coverage Δ
src/chart_types/xy_chart/utils/specs.ts 100% <ø> (ø) ⬆️
src/utils/scales/scale_continuous.ts 94.06% <100%> (-0.1%) ⬇️
src/chart_types/xy_chart/utils/scales.ts 100% <100%> (ø) ⬆️
src/chart_types/xy_chart/store/utils.ts 96.7% <100%> (ø) ⬆️
src/chart_types/xy_chart/utils/axis_utils.ts 100% <100%> (ø) ⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update f9f13dd...8406289. Read the comment docs.

@markov00 markov00 requested a review from nickofthyme August 16, 2019 23:03
@markov00 markov00 added :axis Axis related issue enhancement New feature or request labels Aug 16, 2019
Copy link
Collaborator

@nickofthyme nickofthyme left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested locally, looks great.

What is the logic that determines where to place the tick when one tick is desired like this 👇 and is there a way to center that tick, bandwidth? for example on a max scale of 30 should be 15.

Also shouldn't there always be a max tick? Seems like a separate thing/option i.e.

  • show max/min tick
  • show X number of ticks between min and max

image

@markov00
Copy link
Member Author

Hey @nickofthyme so we are using https://github.com/d3/d3-scale#continuous_ticks to generate human readable ticks on axis. This unfortunately doesn't allows us directly to specify to show min and max labels but we can add that manually on the code. We can do that my adding also the nice feature https://github.com/d3/d3-scale#continuous_nice that will round the domain to a nicer value and it generally shows the max value (the min is always displayed)

@markov00 markov00 merged commit 2b838d7 into elastic:master Aug 21, 2019
markov00 pushed a commit that referenced this pull request Aug 21, 2019
# [10.0.0](v9.2.1...v10.0.0) (2019-08-21)

### Bug Fixes

* **tooltip:** ie11 flex sizing ([#334](#334)) ([abaa472](abaa472)), closes [#332](#332)
* decuple brush cursor from chart rendering ([#331](#331)) ([789f85a](789f85a)), closes [elastic/kibana#36517](elastic/kibana#36517)
* remove clippings from chart geometries ([#320](#320)) ([ed6d0e5](ed6d0e5)), closes [#20](#20)

### Features

* auto legend resize ([#316](#316)) ([659d27e](659d27e)), closes [#268](#268)
* customize number of axis ticks ([#319](#319)) ([2b838d7](2b838d7))
* **theme:** base theme prop ([#333](#333)) ([a9ff5e1](a9ff5e1)), closes [#292](#292)

### BREAKING CHANGES

* **theme:** remove `baseThemeType` prop on `Settings` component and `BaseThemeTypes` type.
* `theme.legend.spacingBuffer` added to `Theme` type. Controls the width buffer between the legend label and value.
@markov00
Copy link
Member Author

🎉 This PR is included in version 10.0.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

@markov00 markov00 added the released Issue released publicly label Aug 21, 2019
@markov00 markov00 deleted the axis-ticks branch November 25, 2020 11:43
AMoo-Miki pushed a commit to AMoo-Miki/OpenSearch-Dashboards that referenced this pull request Feb 10, 2022
# [10.0.0](elastic/elastic-charts@v9.2.1...v10.0.0) (2019-08-21)

### Bug Fixes

* **tooltip:** ie11 flex sizing ([opensearch-project#334](elastic/elastic-charts#334)) ([2683333](elastic/elastic-charts@2683333)), closes [opensearch-project#332](elastic/elastic-charts#332)
* decuple brush cursor from chart rendering ([opensearch-project#331](elastic/elastic-charts#331)) ([b5b8dde](elastic/elastic-charts@b5b8dde)), closes [elastic/kibana#36517](elastic/kibana#36517)
* remove clippings from chart geometries ([opensearch-project#320](elastic/elastic-charts#320)) ([497efa4](elastic/elastic-charts@497efa4)), closes [opensearch-project#20](elastic/elastic-charts#20)

### Features

* auto legend resize ([opensearch-project#316](elastic/elastic-charts#316)) ([be4a53d](elastic/elastic-charts@be4a53d)), closes [opensearch-project#268](elastic/elastic-charts#268)
* customize number of axis ticks ([opensearch-project#319](elastic/elastic-charts#319)) ([a7a4ecd](elastic/elastic-charts@a7a4ecd))
* **theme:** base theme prop ([opensearch-project#333](elastic/elastic-charts#333)) ([0b38770](elastic/elastic-charts@0b38770)), closes [opensearch-project#292](elastic/elastic-charts#292)

### BREAKING CHANGES

* **theme:** remove `baseThemeType` prop on `Settings` component and `BaseThemeTypes` type.
* `theme.legend.spacingBuffer` added to `Theme` type. Controls the width buffer between the legend label and value.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
:axis Axis related issue enhancement New feature or request released Issue released publicly
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants