[Visualize] New heatmap implementation with elastic-charts #118338

stratoula · 2021-11-11T13:59:12Z

Summary

Part of #118516
Part of #103633
Partially fixes #30681 (adds a grid)
Closes #13926
Closes #10648
Closes #12666

PR's output

Creates a new visTypeHeatmap plugin with the new implementation of the visualize heatmap chart. The new implementation is using the elastic-charts library and is NOT the default. In order to enable it, you have to switch off the corresponding switch from the advanced settings.
Creates a new expressionHeatmap plugin which has the expression function and renderer of the heatmap chart. These are used by both Lens and Visualize editors 🎉

Vislib heatmap vs New implementation

Color scale (is not working correctly in vislib) is not supported
Rotate and overwrite color values are not supported
We always scale to data bounds. This is super important and the main reason that the users might encounter some differences between the charts (the charts that have the Scale to data bounds switch off

For the above, we will expect the user's feedback and decide if we would like to support them in the future

Small multiples are not yet supported
Highlight range in hover is not yet supported
X and Y axis titles are not supported yet
Heatmap visualization does not show empty buckets with date histogram Heatmap visualization does not show empty buckets with date histogram #100301

The above are blocked from EC side and we would like to support them in order to make the new implementation the default

Screenshots

dynamic ranges

percentage mode

custom ranges and overwrite color

Checklist

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)
Any UI touched in this PR does not create any new axe failures (run axe in browser: FF, Chrome)
This renders correctly on smaller devices using a responsive layout. (You can test this in your browser)
This was checked for cross-browser compatibility

stratoula · 2021-11-15T07:06:59Z

@elasticmachine merge upstream

stratoula · 2021-11-23T09:08:10Z

Hey, @stratoula. This is looking great so far! I'm leaving you a few comments and questions below for your review. Thanks!

Is it typical for Kibana to have deprecated advanced settings that are enabled by default? I was just curious, as it felt odd to not default to the new elastic charts heatmap (if the previous implementation has been officially deprecated). Alternatively, we could also flip it so that the new heatmap implementation is a beta/experimental feature that is off by default (that makes more sense in my head). Thoughts?

You are right! I removed the deprecated message. This should be deprecated when the new implementation is the default.

I believe we also have this issue in Lens, but I noticed that lengthy y-axis labels can cause the available horizontal space for the visualization to be extremely small. Do we have any ability to truncate or break lines for these labels?

Yes this also exists in Lens. @markov00 is this possible? I would suggest if this is possible to address it in different PR though.

There doesn't appear to be any whitespace around the edges of the visualization. This has the potential to cause collisions between the visualization and the bottom-left legend toggle button. Is it possible to bake in some whitespace into the visualization to avoid such collisions?

I added more padding and I think it looks better now. A note here: One thing missing are the axis titles. When they will be supported it will give more space to the axis and we won't have this kind of problems.

stratoula · 2021-11-24T10:55:57Z

@elasticmachine merge upstream

mbondyra

Retested thoroughly and couldn't find anything wrong! Code LGTM 👌🏼

src/plugins/chart_expressions/expression_heatmap/common/types/expression_functions.ts

dej611

Tested in Safari and all works fine 👍

stratoula · 2021-11-25T14:07:11Z

@MichaelMarcialis are you ok with the current status? I need your approval to merge :D

stratoula · 2021-11-29T07:20:31Z

@elasticmachine merge upstream

stratoula · 2021-11-30T10:15:12Z

@elasticmachine merge upstream

kibana-ci · 2021-11-30T11:31:14Z

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`charts`	65	66	+1
`expressionHeatmap`	-	29	+29
`lens`	683	672	-11
`visTypeHeatmap`	-	16	+16
`visTypeVislib`	186	184	-2
`visualize`	61	62	+1
total			+34

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
`charts`	278	281	+3
`expressionHeatmap`	-	109	+109
`visTypeHeatmap`	-	3	+3
total			+115

Async chunks

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

id	before	after	diff
`lens`	967.9KB	961.3KB	-6.7KB
`visTypeHeatmap`	-	7.1KB	+7.1KB
`visTypeVislib`	359.4KB	354.7KB	-4.7KB
`visualize`	50.1KB	51.5KB	+1.3KB
total			-2.9KB

Public APIs missing exports

Total count of every type that is part of your API that should be exported but is not. This will cause broken links in the API documentation system. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats exports for more detailed information.

id	before	after	diff
`charts`	3	4	+1
`expressionHeatmap`	-	3	+3
`visTypeHeatmap`	-	2	+2
total			+6

Page load bundle

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

id	before	after	diff
`charts`	56.2KB	56.6KB	+412.0B
`expressionHeatmap`	-	26.5KB	+26.5KB
`lens`	44.2KB	40.3KB	-3.9KB
`visDefaultEditor`	19.3KB	19.4KB	+48.0B
`visTypeHeatmap`	-	10.1KB	+10.1KB
`visTypeVislib`	20.1KB	18.6KB	-1.5KB
total			+31.7KB

Unknown metric groups

API count

id	before	after	diff
`charts`	310	313	+3
`expressionHeatmap`	-	113	+113
`visTypeHeatmap`	-	3	+3
total			+119

async chunk count

id	before	after	diff
`visTypeHeatmap`	-	1	+1
`visTypeVislib`	4	3	-1
total			-0

History

💚 Build #9496 succeeded 0db6c8b
💚 Build #9286 succeeded bbd96e1
💚 Build #9155 succeeded 2865d3f
💔 Build #9128 failed 118abe1
💔 Build #9122 failed 473bb99
💚 Build #9050 succeeded 8653a82

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

MichaelMarcialis

Thanks for making those changes, @stratoula. I have one last question below, but nothing worth holding you up over. Approving.

The question I have is regarding the legend toggle button. With the new padding you've added to the visualization container, should we remove the padding to the .visLegend__toggle button in order to reduce the chance of overlapping with the visualization and to keep it's position consistent with other legend toggle buttons (such as those in XY charts)?

stratoula · 2021-11-30T16:55:39Z

Discussed offline with Michael, just adding it here for visibility. The .visLegend__toggle is used by the vislib heatmap, vislib pie and gauge/goal. I have made no changes to the vislib component so we could remove the padding from the toggle legend button but I suggest to do it in another PR as is irrelevant with the changes we made here

MichaelMarcialis · 2021-11-30T17:40:09Z

@stratoula: Ignore my question above. I had forgotten to disable the legacy heatmaps in advanced settings. What you have here is good. Thanks again!

…18338) * [WIP][Heatmap] Creates implementation with elastic-charts * Fix types and connection with vislib * Add coloring options * Brush, click events, coloring etc * Cleaning up the expression function * Add legend picker, fix sorting and other fixes * Further fixes * Use the shared expression to Lens and cleanup * PrepareLogTables for new expression function * Use common renderer and expression function with lens * Fix i18n * Small tweaks * Add unit tests * Adds a unit test to the heatmap component * update plugin list * Fix types * Fix types * update limits * Change to the expression function * Cleanup translations * Refactor to use vis * Fix types * further cleanup of the translations * register new setting * Fix sorting for histogram * Adds functional tests for the new nisualize heatmap * Cleanup * Fix * Apply PR comments * Address PR comments * Fix i18n * Fix i18n * Makes the <Heatmap /> id dynamic * reverse * fix translation file * Apply design PR comments * Fix package * More fixes * Fix brush problem Co-authored-by: Kibana Machine <[email protected]>

stratoula and others added 22 commits October 26, 2021 11:49

[WIP][Heatmap] Creates implementation with elastic-charts

3eb8164

Fix types and connection with vislib

ccacd81

Add coloring options

6f34e16

Merge branch 'elastic:main' into new-heatmap-implementation

fcde81f

Brush, click events, coloring etc

5201475

Cleaning up the expression function

f65fcdc

Merge branch 'main' into new-heatmap-implementation

0394bd4

Add legend picker, fix sorting and other fixes

9db7641

Merge with main and resolve conflicts

51d8b5a

Further fixes

4e2048e

Use the shared expression to Lens and cleanup

722db2d

PrepareLogTables for new expression function

1e0a5a7

Use common renderer and expression function with lens

4a3e6d8

Fix i18n

b82e4ca

Merge with master and resolve conflicts

d29bc79

Small tweaks

e964a47

Add unit tests

91ef099

Adds a unit test to the heatmap component

57acd71

update plugin list

d2c02e7

Fix types

981a97e

Fix types

446e664

update limits

ac0dd4a

elastic deleted a comment from kibanamachine Nov 12, 2021

Change to the expression function

173acb2

kibanamachine and others added 5 commits November 15, 2021 02:07

Merge branch 'main' into new-heatmap-implementation

7284abd

Cleanup translations

dabe1e7

Refactor to use vis

4f5b082

Fix types

3c943b2

further cleanup of the translations

d2ff5d0

stratoula added 2 commits November 23, 2021 11:08

Apply design PR comments

fc0bfb4

Merge with master and resolve conflicts

808856d

kibanamachine and others added 5 commits November 24, 2021 05:56

Merge branch 'main' into new-heatmap-implementation

0bb4c7f

Merge with main, resolve conflicts, adds theme provider

8653a82

Merge with main and resolve conflicts

473bb99

Fix package

118abe1

More fixes

2865d3f

mbondyra approved these changes Nov 25, 2021

View reviewed changes

mbondyra reviewed Nov 25, 2021

View reviewed changes

src/plugins/chart_expressions/expression_heatmap/common/types/expression_functions.ts Outdated Show resolved Hide resolved

Fix brush problem

bbd96e1

dej611 approved these changes Nov 25, 2021

View reviewed changes

Merge branch 'main' into new-heatmap-implementation

0db6c8b

Merge branch 'main' into new-heatmap-implementation

01d4ac9

MichaelMarcialis approved these changes Nov 30, 2021

View reviewed changes

stratoula merged commit fea4d2a into elastic:main Nov 30, 2021

kibanamachine added the backport:skip This commit does not require backporting label Nov 30, 2021

stratoula mentioned this pull request Nov 30, 2021

Full grid and "-" values on heatmap #30681

Open

flash1293 mentioned this pull request Jan 26, 2022

Switch to unified gauge renderer #123800

Closed

adrien-cahoreau mentioned this pull request Apr 29, 2022

[BUG] Heatmap Y-axis does not sort correctly opensearch-project/OpenSearch-Dashboards#882

Open

markov00 mentioned this pull request Sep 23, 2024

Remove visualization:visualize:legacyHeatmapChartsLibrary from Advanced Setting #193681

Open

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Visualize] New heatmap implementation with elastic-charts #118338

[Visualize] New heatmap implementation with elastic-charts #118338

stratoula commented Nov 11, 2021 •

edited

Loading

stratoula commented Nov 15, 2021

stratoula commented Nov 23, 2021

stratoula commented Nov 24, 2021

mbondyra left a comment

dej611 left a comment

stratoula commented Nov 25, 2021

stratoula commented Nov 29, 2021

stratoula commented Nov 30, 2021

kibana-ci commented Nov 30, 2021

API count

async chunk count

MichaelMarcialis left a comment •

edited

Loading

stratoula commented Nov 30, 2021

MichaelMarcialis commented Nov 30, 2021

[Visualize] New heatmap implementation with elastic-charts #118338

[Visualize] New heatmap implementation with elastic-charts #118338

Conversation

stratoula commented Nov 11, 2021 • edited Loading

Summary

PR's output

Vislib heatmap vs New implementation

Screenshots

Checklist

stratoula commented Nov 15, 2021

stratoula commented Nov 23, 2021

stratoula commented Nov 24, 2021

mbondyra left a comment

Choose a reason for hiding this comment

dej611 left a comment

Choose a reason for hiding this comment

stratoula commented Nov 25, 2021

stratoula commented Nov 29, 2021

stratoula commented Nov 30, 2021

kibana-ci commented Nov 30, 2021

💚 Build Succeeded

Metrics [docs]

Module Count

Public APIs missing comments

Async chunks

Public APIs missing exports

Page load bundle

API count

async chunk count

History

MichaelMarcialis left a comment • edited Loading

Choose a reason for hiding this comment

stratoula commented Nov 30, 2021

MichaelMarcialis commented Nov 30, 2021

stratoula commented Nov 11, 2021 •

edited

Loading

MichaelMarcialis left a comment •

edited

Loading