Create vis_type_xy plugin to replace histogram, area and line charts #78154

nickofthyme · 2020-09-22T13:57:55Z

Summary

Release Notes: Use elastic chart library for bar/area/line charts in Visualize

Adds new implementation for area, line and histogram vis types using @elastic/charts in visualize.

closes #77186 closes #63531 closes #51553 closes #39061 closes #29147 closes #13093 closes #12999 closes #4215 closes #59076 closes #41887 closes #43251 closes #45602

Future tasks:

Add telemetry Add telemetry to vis_type_xy plugin #82493
Use new color palette charts service Refactor vis_type_xy plugin to use palette service #82495
Add small multiples support Small multiples in vis_type_xy plugin #82496
Match vislib sorting of series Match vislib sorting of series in vis_type_xy #82497
Add unit tests Add unit tests to vis_type_xy plugin #82498
Improve bar value styles Improve bar value styles on vis_type_xy charts #82853

Problematic case:

using back button on this vis causes error with minInterval link
axis disappear when assigned metric is hidden link
using min value greater than max of data throws error link

UI changes to current vislib (flag disabled)

Ability to change any axis position to enable rotation. Before the y (aka values) axes were blocked to horizontal/vertical depending on the x (aka category) axis position
Show option for Show values on chart only when bar chart exists

UI changes to new (flag enabled)

Show detailed tooltip to match the current vislib tooltip
Allow fitting functions for line and area charts to fill null/missing values
New eui color palette
Hovering on chart element highlights hovered element and not the whole series like current vislib

UI changes to discover

Allow brushing final bucket, even beyond the end domain range. Currently brushing beyond will just set the value to the start of the last bucket.

Other notable changes:

Moves vis editor components, collections and types to vis_type_xy plugin
Moves interval and endzones logic and components from discover to charts plugin
Moves current time logic from discover to charts plugin
Moves vislib plugin expression functions from build_pipeline to vis_type_vislib plugin
Moves vislib vis type definitions for histogram, horizontal_bar, area and line vis types into vis_type_xy plugin and referenced from vis_type_vislib plugin.
Adds vis migration for area, line and histogram vis types to add the properties isVislibChart and detailedTooltip, used for backwards compatibility with vislib.

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
This was checked for keyboard-only and screenreader accessibility
This renders correctly on smaller devices using a responsive layout. (You can test this in your browser)
This was checked for cross-browser compatibility

Release Notes

Replaces legacy visualize chart library with @elastic/charts. Toggled via advanced settings.

- move editor config components from vislib to xy plugin - import editor values from xy to vislib - move vislib type definitions to xy plugin and reference from vislib - refactor types to be consistent with elastic-charts

- add toExpression method on visType - move vislib expression build into vislib plugin - update vis types for toExpressionAst method

- add color picker component - remove unused methods from MappedColors class - add legend toggle component - add elastic charts click transforms for filter and brush events

- add detailed tooltip option to render vislib style tooltip - add fitting functions for area and line charts - fix endzones to work with detailed tooltip - make detailed tooltip default for all old vislib types

closes elastic#77186

- add extra loop with newChartUI enabled - update visChart pageObject to conform to either vislib or elastic charts - update visEditor pageObject to conform to either vislib or elastic charts - update services to account for changes from xy plugin and typescriptification - convert all visualize functional tests to typescript

- update tests to use either vislib or elastic charts - add loop for newChartUI tests

- refactor series filter logic to allow fn accessors - cleanup filter logic to reuse code - fix filters on _all buckets with no x metric

nickofthyme · 2020-12-17T00:06:00Z

Thanks @nickofthyme , clicking ranges works now. However I think there's still some bug in there - if ranges are used as split series it just says "No data" - using vislib it renders fine:

Sorry for the delay but this required changes in elastic charts to work. See changes in 8e7b5d0

Now when using ranges as split series with no x metric you will see something like...

Also when using ranges as split series with range x metric you will see something like...

All filters are working, still shows duplicated per #66595

stratoula · 2020-12-17T12:41:35Z

@nickofthyme I am going to review this until the end of the week. Just FYI, there is this PR which if it is merged you may need to do some small adjustments on yours.

stratoula · 2020-12-17T14:26:19Z

The split series with range indeed works now. But when I add Date Histogram on x-axis I see a blank chart (no error on the console). Same configuration with vislib works. It seems to fail only with Date Histogram.

vislib

es-charts

I can also replicate it when I add terms on split series.

nickofthyme · 2020-12-17T18:01:27Z

The split series with range indeed works now. But when I add Date Histogram on x-axis I see a blank chart (no error on the console). Same configuration with vislib works. It seems to fail only with Date Histogram.

@stratoula Good catch! See 6417be1

Fixed...

...and fixed...

nickofthyme · 2020-12-17T22:14:40Z

@ryankeairns Could you approve this as the @elastic/kibana-core-ui member? Please and thank you.

stratoula

LGTM! I did a final test and I can't find any more bugs! Thank you @nickofthyme, great work ❤️

stratoula · 2020-12-18T10:22:32Z

test/api_integration/apis/saved_objects/find.js

-                    migrationVersion: {
-                      visualization: '7.11.0',
-                    },
+                    migrationVersion: resp.body.saved_objects[0].migrationVersion,


ryankeairns

The CSS changes look good (and very minor). I see there have been some adjustments for things like spacing, padding, etc., so I'll make a note to do another visual pass (post-merge) and touch up any remaining small bits.

Great work!

…harts (#78154) (#86534)

kibanamachine · 2021-03-16T19:00:21Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request
Commit: 03e93de
Pipeline Steps (look for red circles / failed steps)
Interpreting CI Failures

Failed CI Steps

Metrics [docs]

‼️ ERROR: no builds found for mergeBase sha [755dc7e]

History

💚 Build #95296 succeeded 03e93de
💚 Build #95232 succeeded 30c2d13
💚 Build #95207 succeeded 6417be1
💚 Build #95055 succeeded 8e7b5d0

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

nickofthyme added 9 commits September 21, 2020 09:44

refactor endzone, current time and interval logic into chart plugin

49b95fc

enable xy plugin and upgrade elastic charts

72bf93f

refactor build pipeline to move vislib expression into plugin

1ee0ccd

- add toExpression method on visType - move vislib expression build into vislib plugin - update vis types for toExpressionAst method

Update charts plugin

8132244

- add color picker component - remove unused methods from MappedColors class - add legend toggle component - add elastic charts click transforms for filter and brush events

update vislib plugin setup with latest replacement vis types

767067a

Add implementation for area, line and bar charts

7440a85

Add vis migration to add properties for vislib replacement

41723e8

update metrics axes tests with update position logic

e89596b

nickofthyme added Feature:Vislib Vislib chart implementation Feature:Plugins release_note:enhancement v7.10.0 v8.0.0 labels Sep 22, 2020

nickofthyme requested a review from markov00 September 22, 2020 14:30

nickofthyme mentioned this pull request Sep 22, 2020

Replace line, area and bar charts with elastic charts #57584

Closed

23 tasks

nickofthyme added 4 commits September 22, 2020 16:28

add detailedTooltip and fittingFunctions for xy plugin

fbba7e3

- add detailed tooltip option to render vislib style tooltip - add fitting functions for area and line charts - fix endzones to work with detailed tooltip - make detailed tooltip default for all old vislib types

fix endzones for line and area charts and combined with bars

b7b51d5

show fitting function option when any line/area chart is enabled

ce2ad79

move vis_type_xy enable config to advanced setting

e18757b

closes elastic#77186

nickofthyme linked an issue Sep 28, 2020 that may be closed by this pull request

Move vis_type_xy enablement config to advanced settings #77186

Closed

nickofthyme added 9 commits September 28, 2020 13:03

refactor toExpresstion to use toExpressionAst

42eb7b9

fix date range aggType to format on xAccessor not tickFormatter

4255b8c

fix default x axis label rotation

99c9b45

update elastic charts

95527c0

fix render count to update vis container

9c1cc1e

Update getting started functional tests

fc2a4b3

- update tests to use either vislib or elastic charts - add loop for newChartUI tests

convert discover functional tests and pageObjects to typescript

d89fac6

convert functional tests, services and pageObjects to typescript

4194315

Allow functional accessors (range) accessors on split series

8e7b5d0

- refactor series filter logic to allow fn accessors - cleanup filter logic to reuse code - fix filters on _all buckets with no x metric

nickofthyme added 3 commits December 17, 2020 10:23

add value to filterBucket event data

9ef8717

fix stacked/normal area/line series groupings

8f9b440

fix minInterval error on date histogram values

6417be1

Merge branch 'master' into vislib-replacement-pt-1

30c2d13

nickofthyme requested a review from ryankeairns December 17, 2020 22:13

fix title padding and chart margins

03e93de

stratoula approved these changes Dec 18, 2020

View reviewed changes

stratoula reviewed Dec 18, 2020

View reviewed changes

ryankeairns approved these changes Dec 18, 2020

View reviewed changes

nickofthyme merged commit ddea10e into elastic:master Dec 18, 2020

nickofthyme deleted the vislib-replacement-pt-1 branch December 18, 2020 14:38

nickofthyme mentioned this pull request Dec 18, 2020

[7.x] Create vis_type_xy plugin to replace histogram, area and line charts (#78154) #86534

Merged

nickofthyme added a commit that referenced this pull request Dec 19, 2020

[7.x] Create vis_type_xy plugin to replace histogram, area and line c…

8656337

…harts (#78154) (#86534)

legrego mentioned this pull request Jan 4, 2021

Change default setting for only_publish_changed legrego/homeassistant-elasticsearch#127

Closed

This was referenced Mar 1, 2021

[XY Charts] fix partial histogram endzones annotations #93091

Merged

Broken area chart on unordered ranges on x axis #77883

Closed

nickofthyme mentioned this pull request Apr 5, 2021

Scale to Data Bounds margin applied only to lower bound #44272

Closed

nickofthyme restored the vislib-replacement-pt-1 branch September 1, 2021 14:13

nickofthyme deleted the vislib-replacement-pt-1 branch November 18, 2021 14:35

nickofthyme restored the vislib-replacement-pt-1 branch November 18, 2021 14:43

nickofthyme deleted the vislib-replacement-pt-1 branch November 18, 2021 14:45

nickofthyme restored the vislib-replacement-pt-1 branch November 18, 2021 14:46

nickofthyme deleted the vislib-replacement-pt-1 branch November 18, 2021 15:03

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Create vis_type_xy plugin to replace histogram, area and line charts #78154

Create vis_type_xy plugin to replace histogram, area and line charts #78154

nickofthyme commented Sep 22, 2020 •

edited by timroes

Loading

nickofthyme commented Dec 17, 2020

stratoula commented Dec 17, 2020

stratoula commented Dec 17, 2020 •

edited

Loading

nickofthyme commented Dec 17, 2020

nickofthyme commented Dec 17, 2020 •

edited

Loading

stratoula left a comment

stratoula Dec 18, 2020

ryankeairns left a comment

kibanamachine commented Mar 16, 2021 •

edited

Loading

Create vis_type_xy plugin to replace histogram, area and line charts #78154

Create vis_type_xy plugin to replace histogram, area and line charts #78154

Conversation

nickofthyme commented Sep 22, 2020 • edited by timroes Loading

Summary

UI changes to current vislib (flag disabled)

UI changes to new (flag enabled)

UI changes to discover

Other notable changes:

Checklist

Release Notes

nickofthyme commented Dec 17, 2020

stratoula commented Dec 17, 2020

stratoula commented Dec 17, 2020 • edited Loading

nickofthyme commented Dec 17, 2020

nickofthyme commented Dec 17, 2020 • edited Loading

stratoula left a comment

Choose a reason for hiding this comment

stratoula Dec 18, 2020

Choose a reason for hiding this comment

ryankeairns left a comment

Choose a reason for hiding this comment

kibanamachine commented Mar 16, 2021 • edited Loading

💔 Build Failed

Failed CI Steps

Metrics [docs]

History

nickofthyme commented Sep 22, 2020 •

edited by timroes

Loading

stratoula commented Dec 17, 2020 •

edited

Loading

nickofthyme commented Dec 17, 2020 •

edited

Loading

kibanamachine commented Mar 16, 2021 •

edited

Loading