[Lens] Replace `expression_gauge` from `Goal` to `Bullet` #177766

nickofthyme · 2024-02-23T23:42:19Z

Summary

Migrates the Lens Bullet Horizontal and Bullet Vertical charts to the new design. Adds the Semi-circular Gauge, Arc Gauge and Circular Gauge chart types to Lens. See comparison between old and new designs below.

Horizontal Bullet

Vertical Bullet

Semi-circular Gauge

Arc Gauge

Circular Gauge

Details

Refactors Lens expression_gauge from Goal to Bullet

Replace chart render spec and map previous inputs accordingly
Add support for Arc, Major Arc and Circle gauges
Add option to select gauge type in vis options
Update convert to lens for gauge vis_type renderer
Update gauge sizing in Lens container
Deprecates centralMajor and centralMajorMode on expression_gauge function

closes #171903
closes #155131

Checklist

Delete any items that are not applicable to this PR.

Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
Documentation was added for features that require explanation or tutorials
Unit or functional tests were updated or added to match the most common scenarios
Any UI touched in this PR is usable by keyboard only (learn more about keyboard accessibility)
This was checked for cross-browser compatibility

- Replace chart render spec and map previous inputs accordingly - Add support for Arc, 2/3 Circle and Circle gauges - Add option to select gauge type in vis options - Update convert to lens for gauge vis_type renderer - Update gauge sizing in Lens container

- rename all naming related to 2/3rds circle to major arc - rename half circle icon to arc

src/plugins/chart_expressions/expression_gauge/public/components/gauge_component.tsx

...rverless/functional/test_suites/common/visualizations/group2/open_in_lens/agg_based/gauge.ts

package.json

src/plugins/chart_expressions/expression_gauge/public/components/gauge_component.tsx

package.json

src/plugins/chart_expressions/expression_gauge/public/components/utils/gauge_types.ts

x-pack/test/functional/apps/lens/group5/gauge.ts

x-pack/plugins/lens/public/visualizations/gauge/toolbar_component/index.tsx

mbondyra

This is wonderful! 😍 I have some design questions but nothing stopping this PR from merging. Love it, really.

Co-authored-by: Marco Vettorello <[email protected]>

MichaelMarcialis

Thanks for putting this together, @nickofthyme. It looks great! I've left a few comments below for your initial review. Let me know if you have any questions.

packages/kbn-chart-icons/src/assets/chart_gauge_arc.tsx

...plugins/chart_expressions/expression_gauge/public/components/utils/use_gauge_size_by_type.ts

nickofthyme · 2024-03-25T17:50:56Z

@elastic/kibana-design could I get a CO review please.

kibana-ci · 2024-03-25T21:49:18Z

💛 Build succeeded, but was flaky

Buildkite Build
Commit: eed2b7b

Failed CI Steps

Serverless Rule Management - Security Solution Cypress Tests #5

Test Failures

[job] [logs] Serverless Rule Management - Security Solution Cypress Tests #5 / Detection rules, bulk edit of rule actions Restricted action privileges User with no privileges can't add rule actions User with no privileges can't add rule actions

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`apm`	1671	1674	+3
`eventAnnotationListing`	499	502	+3
`expressionGauge`	89	90	+1
`expressionHeatmap`	157	160	+3
`expressionPartitionVis`	172	175	+3
`expressionTagcloud`	146	149	+3
`expressionXY`	232	235	+3
`infra`	1429	1432	+3
`lens`	1370	1373	+3
`maps`	1153	1156	+3
total			+28

Public APIs missing comments

Total count of every public API that lacks a comment. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats comments for more detailed information.

id	before	after	diff
`@kbn/chart-icons`	78	84	+6
`expressionGauge`	59	58	-1
`visualizations`	810	831	+21
total			+26

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
`expressionGauge`	19.0KB	22.5KB	+3.5KB
`lens`	1.4MB	1.4MB	+4.4KB
`visTypeGauge`	8.9KB	8.8KB	-106.0B
total			+7.8KB

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
`expressionGauge`	14.7KB	13.9KB	-836.0B
`kbnUiSharedDeps-npmDll`	6.3MB	6.3MB	+887.0B
`visTypeGauge`	10.8KB	11.2KB	+471.0B
`visualizations`	58.1KB	58.2KB	+150.0B
total			+672.0B

Unknown metric groups

API count

id	before	after	diff
`@kbn/chart-icons`	78	84	+6
`visualizations`	841	862	+21
total			+27

ESLint disabled line counts

id	before	after	diff
`visualizations`	15	17	+2

References to deprecated APIs

id	before	after	diff
`visTypeGauge`	1	2	+1

Total ESLint disabled count

id	before	after	diff
`visualizations`	17	19	+2

Unreferenced deprecated APIs

id	before	after	diff
`expressionGauge`	0	2	+2

History

💚 Build #199218 succeeded 7673c40
💛 Build #199077 was flaky a0918e9
💚 Build #198872 succeeded 4308b29
💔 Build #198859 failed 621a8dc
💔 Build #198851 failed 6c166f1
💔 Build #198832 failed f53b247

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

gvnmagni

Everything works fine, only two small things that don't affect the result of the review and that we can evaluate separately since they are not blockers:

We should evaluate the default height of panel for Horizontal gauges
Setting up a goals as 0 (zero) makes it disappear, since it gets in contrast with the zero baseline. We should consider which one is more important and evaluate that

Great job Nick! 🚀

nickofthyme · 2024-03-26T15:41:25Z

Thanks for pointing out the 0 issue for the goal value. This will be fixed on the charts side.

elasticmachine · 2024-04-24T09:02:14Z

Pinging @elastic/kibana-visualizations (Team:Visualizations)

nickofthyme added 15 commits February 22, 2024 12:30

add new chart type assets

52db73c

Merge branch 'main' into goal-to-bullet

2dc120a

Merge branch 'main' into goal-to-bullet

2ad4e1c

fix build error

0ce420d

fix i18n errors

7ec070e

test: fix jest test failures from changes

47345f5

test: fix failed fn tests

ca8d645

Merge branch 'main' into goal-to-bullet

302f72c

add collapsed state toggle for svl sidenav

030d76f

fix failing svl fn tests and jest snapshots

83a09a3

improve and cleanup naming

61ac654

- rename all naming related to 2/3rds circle to major arc - rename half circle icon to arc

Merge branch 'main' into goal-to-bullet

21890cf

fix naming error

3a6297f

Merge branch 'main' into goal-to-bullet

771c714

nickofthyme marked this pull request as ready for review March 12, 2024 16:54

nickofthyme requested review from a team as code owners March 12, 2024 16:54

nickofthyme added the release_note:feature Makes this part of the condensed release notes label Mar 12, 2024

markov00 reviewed Mar 13, 2024

View reviewed changes

mbondyra changed the title ~~Refactor Lens expression_gauge from Goal to Bullet~~ [Lens] Replace expression_gauge from Goal to Bullet Mar 13, 2024

mbondyra reviewed Mar 13, 2024

View reviewed changes

src/plugins/chart_expressions/expression_gauge/public/components/utils/gauge_types.ts Show resolved Hide resolved

mbondyra reviewed Mar 13, 2024

View reviewed changes

x-pack/test/functional/apps/lens/group5/gauge.ts Show resolved Hide resolved

mbondyra reviewed Mar 13, 2024

View reviewed changes

x-pack/plugins/lens/public/visualizations/gauge/toolbar_component/index.tsx Outdated Show resolved Hide resolved

pgayvallet approved these changes Mar 13, 2024

View reviewed changes

mbondyra approved these changes Mar 13, 2024

View reviewed changes

nickofthyme and others added 4 commits March 13, 2024 09:25

chore: apply suggestions from code review

650db67

Co-authored-by: Marco Vettorello <[email protected]>

chore: upgrade charts

d40842c

chore: simple pr comment fixes

8bb6f82

chore: improve null assertion on accessors

c3936fd

MichaelMarcialis reviewed Mar 19, 2024

View reviewed changes

nickofthyme added 9 commits March 21, 2024 12:34

Merge branch 'main' into goal-to-bullet

02e106c

remove type option from vis appearance options

4e1379a

chore: update chart naming and copy

af06fbb

simplify and minify new svgs

3861ad0

fix circular gauge aspect ratio

f53b247

fix missed naming changes

6c166f1

fix fn test value assertion

621a8dc

fix lazy list term for circle, update rounded value assertion

4f2c42f

Merge branch 'main' into goal-to-bullet

4308b29

This was referenced Mar 22, 2024

[Lens] Reduce chart switcher list items #179260

Closed

[Visualize-Lens] Provide migration for Visualize Goal to Lens Gauge #179320

Open

markov00 approved these changes Mar 25, 2024

View reviewed changes

markov00 and others added 2 commits March 25, 2024 09:44

Merge branch 'main' into goal-to-bullet

a0918e9

Merge branch 'main' into goal-to-bullet

7673c40

nickofthyme requested a review from markov00 March 25, 2024 17:48

markov00 approved these changes Mar 25, 2024

View reviewed changes

Merge branch 'main' into goal-to-bullet

eed2b7b

gvnmagni self-requested a review March 26, 2024 15:26

gvnmagni approved these changes Mar 26, 2024

View reviewed changes

nickofthyme merged commit af56452 into elastic:main Mar 26, 2024
35 checks passed

nickofthyme deleted the goal-to-bullet branch March 26, 2024 15:42

kibanamachine added v8.14.0 backport:skip This commit does not require backporting labels Mar 26, 2024

markov00 added Team:Visualizations Visualization editors, elastic-charts and infrastructure Feature:Lens labels Apr 24, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Lens] Replace `expression_gauge` from `Goal` to `Bullet` #177766

[Lens] Replace `expression_gauge` from `Goal` to `Bullet` #177766

nickofthyme commented Feb 23, 2024 •

edited

Loading

mbondyra left a comment

MichaelMarcialis left a comment

nickofthyme commented Mar 25, 2024

kibana-ci commented Mar 25, 2024

API count

ESLint disabled line counts

References to deprecated APIs

Total ESLint disabled count

Unreferenced deprecated APIs

gvnmagni left a comment •

edited by markov00

Loading

nickofthyme commented Mar 26, 2024

elasticmachine commented Apr 24, 2024

[Lens] Replace expression_gauge from Goal to Bullet #177766

[Lens] Replace expression_gauge from Goal to Bullet #177766

Conversation

nickofthyme commented Feb 23, 2024 • edited Loading

Summary

Horizontal Bullet

Vertical Bullet

Semi-circular Gauge

Arc Gauge

Circular Gauge

Details

Checklist

mbondyra left a comment

Choose a reason for hiding this comment

MichaelMarcialis left a comment

Choose a reason for hiding this comment

nickofthyme commented Mar 25, 2024

kibana-ci commented Mar 25, 2024

💛 Build succeeded, but was flaky

Failed CI Steps

Test Failures

Metrics [docs]

Module Count

Public APIs missing comments

Async chunks

Page load bundle

API count

ESLint disabled line counts

References to deprecated APIs

Total ESLint disabled count

Unreferenced deprecated APIs

History

gvnmagni left a comment • edited by markov00 Loading

Choose a reason for hiding this comment

nickofthyme commented Mar 26, 2024

elasticmachine commented Apr 24, 2024

[Lens] Replace `expression_gauge` from `Goal` to `Bullet` #177766

[Lens] Replace `expression_gauge` from `Goal` to `Bullet` #177766

nickofthyme commented Feb 23, 2024 •

edited

Loading

gvnmagni left a comment •

edited by markov00

Loading