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(bullet): new design style and implementation #2156

Merged
merged 91 commits into from
Nov 9, 2023

Conversation

nickofthyme
Copy link
Collaborator

@nickofthyme nickofthyme commented Aug 31, 2023

Summary

Major overhaul of the design of bullet chart, now with a brand new chart implementation under the hood.

Screen.Recording.2023-11-08.at.07.44.18.PM.mp4

Details

The new design includes a Bullet as a Metric feature that automatically converts crammed bullet charts in to an equivalent but simplified version as a Metric. These breakpoints are based on the subtype used and the contents of the title and subtitle.

No breaking changes but this does deprecate the old Goal spec in favor of this new Bullet spec.

Issues

Old Goal/Gauge chart issue fixed by new implementation

closes #2095 - To consider fixing last ticks to right/top across bullet and all axes charts in the future
closes #1845 - Now uses a custom tooltip with active, target and current value
closes #1703 - No longer applies
closes #1648 - Complete redesign of chart
closes #1626 - No longer applies
closes #1604 - No longer applies
closes #1601 - No longer applies except for ask for common label
closes #1600 - No longer applies
closes #1508 - Better use of space in new design
closes #1507 - Improved title/subtitle spacing logic
closes #1497 - Better context for out of bound values
closes #1496 - Always shows current value in header
closes #1235 - Supports SM, may need to add support for #2002
closes #1186 - We still need to improve tick overlapping, see #2236
closes #827 - No longer applies

To discuss

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 dark, light themes

markov00 and others added 11 commits August 30, 2023 14:50
- Add angular bullet subtype
- Add size types for angular subtype with dynamic placement
- Improve and centralize maxTicks logic
- Separate subtype implementations
- A debug rendering
- Simplify value/target label formatting with postfix
- Add angular story
@nickofthyme nickofthyme added enhancement New feature or request :styling Styling related issue :Lens Kibana Lens related issue :goal/gauge (old) Old Goal/Gauge chart related issues labels Aug 31, 2023
@nickofthyme nickofthyme changed the title Bullet redesign feat(bullet): new design style and implementation Aug 31, 2023
- add reverse option to angular bull
- update angle limiting sized for grid
- add bandColors and angular tick padding the theme
- add configurable tick snap step
- tweaks to add pointer events next
- add tooltip with active, target and actual values
- derive active hovered value
- shared active values across SM panels
- add targetFormatter
- fix target/value header formatting
- add locale to wrapText in bullet layout calcs
- add hover titles to metric progress bar and target
- make progress size style more clear
- remove conditional rendering of active value, use tooltip none instead
- move reverse option to BulletDatum options
@nickofthyme nickofthyme added :bullet Bullet chart related issues :new chart type New chart type related feature request and removed :goal/gauge (old) Old Goal/Gauge chart related issues labels Nov 8, 2023
@nickofthyme
Copy link
Collaborator Author

buildkite update screenshots

@nickofthyme nickofthyme merged commit fca6cdd into elastic:main Nov 9, 2023
13 checks passed
@nickofthyme nickofthyme deleted the bullet-redesign branch November 9, 2023 17:04
nickofthyme pushed a commit that referenced this pull request Nov 20, 2023
# [61.1.0](v61.0.0...v61.1.0) (2023-11-20)

### Bug Fixes

* **deps:** update dependency @elastic/eui to v91 ([#2233](#2233)) ([e89f623](e89f623))
* **metric:** add option to set empty cell background color ([#2247](#2247)) ([6a9fb86](6a9fb86))
* **metric:** background color for bar with interactions ([#2248](#2248)) ([dcb56fa](dcb56fa))

### Features

* **bullet:** improve header layout and positioning ([#2243](#2243)) ([b3a95d2](b3a95d2))
* **bullet:** new design style and implementation ([#2156](#2156)) ([fca6cdd](fca6cdd))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment