[Lens] Support metric trendlines #141851

drewdaemon · 2022-09-26T19:21:18Z

Summary

resolve #135882

Screen.Recording.2022-10-10.at.2.04.21.PM.mov

Outstanding Issues

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

x-pack/plugins/lens/public/visualizations/metric/visualization.tsx

flash1293 · 2022-10-13T13:44:14Z

@markov00 keep in mind that this always happens if there are null data points between existing data points which is a common situation to occur if the date histogram interval drops below the sampling rate of the source data.

drewdaemon · 2022-10-13T17:47:45Z

@flash1293 this is ready for another look. I think we're getting close to ready for takeoff! 🚀

flash1293 · 2022-10-14T08:27:29Z

This looks almost good, there is just one thing I noticed that we should fix and I think it's easy to fix.
The secondary dimension is always synced, even if it's not referenced by the breakdown dimension and thus not required in the trendline layer.

This fails in the case of a reduced time range for the secondary metric:

I think this behavior makes sense for the primary metric - doing a trendline and a reduced time range at the same time is kind of exclusive, but I think showing a reduced-time-range secondary metric is very helpful to combine with a trendline.

It seems like the syncColumns logic in the datasource is almost smart enough already to do this - what we could do there is to check whether a synced terms column is referencing a column not available in the target layer and sync it over too.

drewdaemon · 2022-10-14T15:25:12Z

@KOTungseth I know you had some feedback on the PoC for this feature. Do you have any feedback on the copy here?

Mostly it's the supporting visualization button group and the messaging when one supporting visualization type is disabled.

flash1293

Tested and didn't find any problems anymore, LGTM once green. Awesome work!

Test failures seem simple to fix

kibana-ci · 2022-10-18T19:37:41Z

💚 Build Succeeded

Buildkite Build
Commit: 0bd4f99

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`expressionMetricVis`	61	62	+1
`lens`	933	935	+2
total			+3

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
`expressionMetricVis`	56	62	+6
`lens`	568	575	+7
`visualizations`	725	730	+5
total			+18

Async chunks

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

id	before	after	diff
`expressionMetricVis`	73.1KB	73.5KB	+432.0B
`lens`	1.3MB	1.3MB	+11.1KB
`visTypeGauge`	7.1KB	7.1KB	+19.0B
`visualizations`	268.2KB	268.2KB	+16.0B
total			+11.6KB

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
`expressionMetricVis`	0	1	+1
`lens`	45	46	+1
total			+2

Page load bundle

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

id	before	after	diff
`expressionMetricVis`	10.1KB	13.5KB	+3.4KB
`lens`	29.1KB	29.2KB	+168.0B
`visualizations`	53.4KB	53.7KB	+299.0B
total			+3.8KB

Unknown metric groups

API count

id	before	after	diff
`expressionMetricVis`	56	62	+6
`lens`	659	668	+9
`visualizations`	755	760	+5
total			+20

ESLint disabled line counts

id	before	after	diff
`lens`	21	20	-1

References to deprecated APIs

id	before	after	diff
`maps`	81	77	-4
`ml`	249	239	-10
total			-14

Total ESLint disabled count

id	before	after	diff
`lens`	24	23	-1

History

💔 Build #80797 failed ff1edb347897e834c9e88c68e0e67df90c454f27
💔 Build #80747 failed f86aafd
💔 Build #80725 failed e9d9c69
💚 Build #80495 succeeded 8ee436c
💔 Build #80445 failed 5b0dbe3

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

MichaelMarcialis

Hey, @andrewctate! It looks like I've arrived late, as this PR is merged now. Nonetheless, I have a handful of comments and questions that I've written up some below for your review. Hopefully we can address them in a follow-up PR:

In our last vis editors sync, we discussed potentially moving "Supporting visualization" (and the conditional "Bar direction" button group) into its own section within the primary metric configuration flyout, below "Appearance." With a section heading of "Supporting visualization, we could then change the "Supporting visualization" label for the button group to something shorter, like "Type." Is that being split off as a separate issue? Or did we decide against it after our discussion?
Adding a reduced time range to the primary or secondary metric while "Trend line" is selected causes an error to appear in the workspace. Can we instead automatically fallback to using "None" for the supporting visualization to avoid the error altogether? This would also be more consistent with how we handle maximum value dimensions being removed when "Bar" is selected.
Changing the supporting visualization type to "Trend line" and closing the flyout causes the visualization layer's previous "Clear" button to incorrectly change to a "Delete" button. Attempting to then delete the layer via this button causes a number problems to occur. For the metric type visualization, the action should always be clear. Delete shouldn't be an option, as metric visualizations only support a single layer.

MichaelMarcialis · 2022-10-18T20:55:29Z

x-pack/plugins/lens/public/visualizations/metric/dimension_editor.tsx

+            {
+              id: `${buttonIdPrefix}trendline`,
+              label: i18n.translate('xpack.lens.metric.supportingVisualization.trendline', {
+                defaultMessage: 'Trend line',


I noticed that this text gets truncated at smaller viewport sizes. Would it make sense to change Trend line to simply Line to avoid the truncation?

MichaelMarcialis · 2022-10-18T20:57:29Z

x-pack/plugins/lens/public/visualizations/metric/dimension_editor.tsx

+            isFullWidth
+            buttonSize="compressed"
+            legend={i18n.translate('xpack.lens.metric.progressDirectionLabel', {
+              defaultMessage: 'Bar direction',


Thoughts on changing this text from Bar direction to Bar orientation?

MichaelMarcialis · 2022-10-18T21:00:41Z

x-pack/plugins/lens/public/visualizations/metric/dimension_editor.tsx

+  if (!state.maxAccessor) {
+    supportingVisHelpTexts.push(
+      i18n.translate('xpack.lens.metric.summportingVis.needMaxDimension', {
+        defaultMessage: 'Add a maximum dimension to enable the progress bar.',


Suggest changing this text to: Bar visualizations require a maximum value to be defined.

How about:

To use bar charts, you must use a maximum value to enable the progress bar.

MichaelMarcialis · 2022-10-18T21:02:10Z

x-pack/plugins/lens/public/visualizations/metric/dimension_editor.tsx

+    supportingVisHelpTexts.push(
+      !hasDefaultTimeField
+        ? i18n.translate('xpack.lens.metric.supportingVis.needDefaultTimeField', {
+            defaultMessage: 'Use a data view with a default time field to enable trend lines.',


Suggest changing this text to: Line visualizations require use of a data view with a default time field.

I thought that, since we aim to give the user direction, the imperative voice was most appropriate. Could you clarify your reasoning?

Ultimately, I'll defer to @KOTungseth for all of my wording suggestions here. However, my reasoning for suggesting this direction (and moving away from imperative) was to put the name of the visualization being referenced first in the sentence for easier scanning (since there exists the possibility of showing multiple help text sentences across multiple visualization types (bar, line).

Okay, I'll implement your suggestions in #143781 and @KOTungseth can chime in there next week if she has time 👍

How about:

To create line charts, you must use a data view with a default time field.

I worry that "To create line charts" implies greater flexibility than we offer with the metric trend lines (on/off switch). I wonder if even getting away from calling them trend lines is a good idea (getting back to Michael's original feedback on the button itself).

WDYT? I ultimately defer to you 👍

MichaelMarcialis · 2022-10-18T21:10:24Z

x-pack/plugins/lens/public/visualizations/metric/dimension_editor.tsx

+        : metricHasReducedTimeRange
+        ? i18n.translate('xpack.lens.metric.supportingVis.metricHasReducedTimeRange', {
+            defaultMessage:
+              'Remove the reduced time range on this dimension to enable trend lines.',


Suggest changing this text to: Line visualizations cannot be used when a reduced time range is applied to the primary metric.

MichaelMarcialis · 2022-10-18T21:11:15Z

x-pack/plugins/lens/public/visualizations/metric/dimension_editor.tsx

+        : secondaryMetricHasReducedTimeRange
+        ? i18n.translate('xpack.lens.metric.supportingVis.secondaryMetricHasReducedTimeRange', {
+            defaultMessage:
+              'Remove the reduced time range on the secondary metric dimension to enable trend lines.',


Suggest changing this text to: Line visualizations cannot be used when a reduced time range is applied to the secondary metric

drewdaemon · 2022-10-19T16:53:49Z

Hi @MichaelMarcialis . I merged this PR because the functionality is complete and it was incurring a maintenance burden, but I'm not finished with the feature polishing. Thanks for your comments.

In our last vis editors sync, we discussed potentially moving "Supporting visualization" (and the conditional "Bar direction" button group) into its own section

This is still in the plans 👍

Adding a reduced time range to the primary or secondary metric while "Trend line" is selected causes an error to appear in the workspace. Can we instead automatically fallback to using "None" for the supporting visualization to avoid the error altogether? This would also be more consistent with how we handle maximum value dimensions being removed when "Bar" is selected.

I agree with you here. Falling back to "None" was my first choice. But, quite a bit of sleight of hand was required to deliver on the "layerless" trend line experience so the technical machinery isn't really comparable to the progress bar. Due to this, falling back to "None" (i.e. triggering the removal of the hidden trend line layer when a setting on a datasource operation changed) didn't look like a reasonable option from a technical perspective.

I was glad to get it at least to where the user clearly sees what action caused the problem and if they come at it in the other order, we handle it more gracefully with the disabled button and the help text. Happy to discuss further if you feel strongly.

Changing the supporting visualization type to "Trend line" and closing the flyout causes the visualization layer's previous "Clear" button to incorrectly change to a "Delete" button.

Excellent find. Here we see the true implementation leaking through. Created an issue here #143687

I'll wrap your copy suggestions up in another PR 👍

drewdaemon added 3 commits September 26, 2022 11:52

metric trendline in renderer

f513a60

restore secondary prefix behavior

4d69149

test metric_vis component trendline support

bddb43f

drewdaemon added the skip-ci label Sep 26, 2022

drewdaemon added 2 commits September 27, 2022 17:09

add trendline support to the metric vis

f71796d

resolve layer type mismatch

4168799

drewdaemon force-pushed the metric-trendlines branch from bc7709e to 4168799 Compare September 27, 2022 22:10

drewdaemon added 16 commits September 27, 2022 18:29

linked layers

f5e57a6

automatic time dimension support

ab21531

removing dimensions within reducer

75b38f5

Merge branch 'main' of github.com:elastic/kibana into metric-trendlines

880b875

update unit test

ede4952

add synced dimensions

0e4d03d

fix the breakdown-by case

a545712

hidden layer

959d7c8

pass inspector table IDs, update test

1f9ea5c

allow dimension editor to specify which layer to delete

ddad093

fix test

1f5c781

restore N/A behavior

ac5f33d

handle dataviews with no default time field

6e16f71

Merge branch 'main' of github.com:elastic/kibana into metric-trendlines

8cc8637

Adding trend a11y

c628c9c

correct the layer actions

402a4c5

drewdaemon commented Sep 30, 2022

View reviewed changes

x-pack/plugins/lens/public/visualizations/metric/visualization.tsx Show resolved Hide resolved

basic functional test

27e131e

drewdaemon removed the skip-ci label Oct 3, 2022

drewdaemon added 2 commits October 3, 2022 16:10

move hiding to group config

ae503fe

update tests and types

53bfcc6

drewdaemon added Team:Visualizations Visualization editors, elastic-charts and infrastructure Feature:Lens labels Oct 4, 2022

drewdaemon added 4 commits October 13, 2022 09:05

use NaN instead of null in elastic-charts

5f0367e

Merge branch 'main' of github.com:elastic/kibana into metric-trendlines

53c281b

fix applying collapse function

3ac1e01

safer typing for collapse functions

e2c0c45

drewdaemon added 2 commits October 14, 2022 08:32

Merge branch 'main' of github.com:elastic/kibana into metric-trendlines

5b0dbe3

gating trendlines if reduced time range is present

8ee436c

drewdaemon force-pushed the metric-trendlines branch from 0610ad5 to 8ee436c Compare October 14, 2022 15:31

drewdaemon added 4 commits October 17, 2022 08:10

Merge branch 'main' of github.com:elastic/kibana into metric-trendlines

3765150

remove unused import

b54775a

remove unused import

e9d9c69

fix some types

f86aafd

flash1293 approved these changes Oct 18, 2022

View reviewed changes

type collapse functions for convert-to-lens

d48b4b7

drewdaemon force-pushed the metric-trendlines branch from ff1edb3 to d48b4b7 Compare October 18, 2022 18:04

update functional tests

0bd4f99

drewdaemon merged commit 66041ca into elastic:main Oct 18, 2022

kibanamachine added v8.6.0 backport:skip This commit does not require backporting labels Oct 18, 2022

This was referenced Oct 18, 2022

[Lens] Metric grid: Trend line support #135882

Closed

[Lens] Metric trend PoC - toggle switch #138804

Closed

kc13greiner pushed a commit to kc13greiner/kibana that referenced this pull request Oct 18, 2022

[Lens] Support metric trendlines (elastic#141851)

fcc245e

MichaelMarcialis reviewed Oct 18, 2022

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Lens] Support metric trendlines #141851

[Lens] Support metric trendlines #141851

drewdaemon commented Sep 26, 2022 •

edited

Loading

flash1293 commented Oct 13, 2022

drewdaemon commented Oct 13, 2022

flash1293 commented Oct 14, 2022

drewdaemon commented Oct 14, 2022

flash1293 left a comment •

edited

Loading

kibana-ci commented Oct 18, 2022

API count

ESLint disabled line counts

References to deprecated APIs

Total ESLint disabled count

MichaelMarcialis left a comment

MichaelMarcialis Oct 18, 2022

MichaelMarcialis Oct 18, 2022

MichaelMarcialis Oct 18, 2022

KOTungseth Oct 24, 2022

MichaelMarcialis Oct 18, 2022

drewdaemon Oct 20, 2022 •

edited

Loading

MichaelMarcialis Oct 20, 2022 •

edited

Loading

drewdaemon Oct 21, 2022

KOTungseth Oct 24, 2022

drewdaemon Oct 26, 2022

MichaelMarcialis Oct 18, 2022

MichaelMarcialis Oct 18, 2022

drewdaemon commented Oct 19, 2022

[Lens] Support metric trendlines #141851

[Lens] Support metric trendlines #141851

Conversation

drewdaemon commented Sep 26, 2022 • edited Loading

Summary

Outstanding Issues

Checklist

flash1293 commented Oct 13, 2022

drewdaemon commented Oct 13, 2022

flash1293 commented Oct 14, 2022

drewdaemon commented Oct 14, 2022

flash1293 left a comment • edited Loading

Choose a reason for hiding this comment

kibana-ci commented Oct 18, 2022

💚 Build Succeeded

Metrics [docs]

Module Count

Public APIs missing comments

Async chunks

Public APIs missing exports

Page load bundle

API count

ESLint disabled line counts

References to deprecated APIs

Total ESLint disabled count

History

MichaelMarcialis left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

drewdaemon Oct 20, 2022 • edited Loading

Choose a reason for hiding this comment

MichaelMarcialis Oct 20, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

drewdaemon commented Oct 19, 2022

drewdaemon commented Sep 26, 2022 •

edited

Loading

flash1293 left a comment •

edited

Loading

drewdaemon Oct 20, 2022 •

edited

Loading

MichaelMarcialis Oct 20, 2022 •

edited

Loading