[Lens] Add metric Viz config options, title position and sizing by shahzad31 · Pull Request #124124 · elastic/kibana

shahzad31 · 2022-01-31T14:29:31Z

Summary

Adds options to set title position and sizing in the metric viz

i am hoping this makes sense, we need to use this User experience app.

Potential use cases

ghudgins · 2022-01-31T15:40:08Z

related to #120386

markov00 · 2022-01-31T16:59:30Z

x-pack/plugins/lens/common/expressions/metric_chart/metric_chart.ts

+    titleSize: {
+      types: ['string'],
+      help: i18n.translate('xpack.lens.metric.titleSize.help', {
+        defaultMessage: 'The chart title size.',
+      }),
+    },
+    titlePosition: {
+      types: ['string'],
+      help: i18n.translate('xpack.lens.metric.titlePosition.help', {
+        defaultMessage: 'The chart title position.',
+      }),
+    },
+    titleAlignPosition: {
+      types: ['string'],
+      help: i18n.translate('xpack.lens.metric.titleAlignPosition.help', {
+        defaultMessage: 'The chart title align position.',
+      }),
+    },


I have doubts on the namings here. title is usually referred to the title of the chart (the one that appears on the dashboard on the top/left corner of the embeddable).
In this case, this is a label on the visualization. In the Lens editor is called Display name so I think we should align the two namings.

Currently, the terms used for these text-based elements in Lens are contextual depending on the current visualization and where the text is used. For example, we use all of the following in difference circumstances:

Display name: Used as text for layer dimension items. Also used as to supply default text for XY visualization axis names and single metric visualization titles.

Title: Used as the primary text in for single metric visualizations.

Subtitle: Used as the secondary text in for single metric visualizations.

Axis name: Used for text adjacent to axes in in XY visualizations.

Label: Used for text on individual pie/donut slices and text anchored to ticks in XY visualizations.

Dashboards does use the term "panel title" for top-left text in a dashboard panel. While there could be some potential for confusion between Lens' usage of "title" and Dashboard's usage of "panel title", I don't think it's a huge concern at the moment for the following reasons:

Dashboard's term is prefixed with the word "panel".

I don't believe there is a current situation where these two terms would exist simultaneously (i.e. editing a panel title and editing a visualization title). However, this may change in the future depending on the direction that the seamless UX endeavor goes.

For the time being, I'm personally fine with the term "title" in this circumstance, but I will defer to others if they feel strongly about it.

@MichaelMarcialis I'm a bit confused because I don't see where in Lens you are using the words title and subtitle in the single metric visualizations.

I see a Display name field that I can change to change the metric name, but I don't see any title or subtitle in any of our options. The only place I see the title word is in the CSS class name.
In the other metric vis (aggregated) I can see a Custom label that can be used to change the metric name.

This is actually badly aligned with the option to show and hide that name called Show title

The title is used on the Axis instead, where you can configure the Axis title in the top menu that changes the Display name of the vertical or horizontal axis.

When I think of a title, to me always refers to something more descriptive like: Memory consumption in the last week and is more suitable to be places on the top-left part of the visualization (aka panel title). A label instead, is used in various places and contains usually less information, just a tag: RAM, CPU %, really similar to what name is about.

As always is a matter of consistency across the interface and I don't see that neither with the term title or the label.
cc @gvnmagni

x-pack/plugins/lens/public/metric_visualization/metric_config_panel/title_aize_option.tsx

x-pack/plugins/lens/public/metric_visualization/expression.scss

x-pack/plugins/lens/common/expressions/metric_chart/metric_chart.ts

MichaelMarcialis

Thanks for putting this together, @shahzad31! Left you a few comments and questions for your review.

MichaelMarcialis · 2022-01-31T19:38:18Z

x-pack/plugins/lens/common/expressions/metric_chart/metric_chart.ts

+    titleSize: {
+      types: ['string'],
+      help: i18n.translate('xpack.lens.metric.titleSize.help', {
+        defaultMessage: 'The chart title size.',
+      }),
+    },
+    titlePosition: {
+      types: ['string'],
+      help: i18n.translate('xpack.lens.metric.titlePosition.help', {
+        defaultMessage: 'The chart title position.',
+      }),
+    },
+    titleAlignPosition: {
+      types: ['string'],
+      help: i18n.translate('xpack.lens.metric.titleAlignPosition.help', {
+        defaultMessage: 'The chart title align position.',
+      }),
+    },


Currently, the terms used for these text-based elements in Lens are contextual depending on the current visualization and where the text is used. For example, we use all of the following in difference circumstances:

Display name: Used as text for layer dimension items. Also used as to supply default text for XY visualization axis names and single metric visualization titles.

Title: Used as the primary text in for single metric visualizations.

Subtitle: Used as the secondary text in for single metric visualizations.

Axis name: Used for text adjacent to axes in in XY visualizations.

Label: Used for text on individual pie/donut slices and text anchored to ticks in XY visualizations.

Dashboards does use the term "panel title" for top-left text in a dashboard panel. While there could be some potential for confusion between Lens' usage of "title" and Dashboard's usage of "panel title", I don't think it's a huge concern at the moment for the following reasons:

Dashboard's term is prefixed with the word "panel".

I don't believe there is a current situation where these two terms would exist simultaneously (i.e. editing a panel title and editing a visualization title). However, this may change in the future depending on the direction that the seamless UX endeavor goes.

For the time being, I'm personally fine with the term "title" in this circumstance, but I will defer to others if they feel strongly about it.

x-pack/plugins/lens/public/metric_visualization/metric_config_panel/visual_options_popover.tsx

x-pack/plugins/lens/common/expressions/metric_chart/metric_chart.ts

x-pack/plugins/lens/public/metric_visualization/metric_config_panel/title_align_option.tsx

x-pack/plugins/lens/public/metric_visualization/metric_config_panel/title_position_option.tsx

x-pack/plugins/lens/public/metric_visualization/metric_config_panel/visual_options_popover.tsx

shahzad31 · 2022-02-01T13:40:55Z

Thanks @markov00 and @MichaelMarcialis i have address most of your feedback

Converted Align select to Button groups
Remove left/right positions items
Using EuiFontSize now
Since size/align apply to both, have remove title prefix from them
Removed EuiHorizentalRule
Updated class name to better reflect
Changed the title to Appearance

MichaelMarcialis

Thanks so much for addressing those comments, @shahzad31! After re-reviewing, I have a few additional comments.

Also, if it's cool with you, I took a quick design pass at the appearance toolbar menu (see image below). Changes include:

Tightened up a bit of the vertical space by consolidating the size and alignment options to a single form row.
Changed the title position select component to a button group.
Provided new prepend/append buttons to increase/decrease the text size as a faster alternative (in addition to being able to open the text size select dropdown as they can currently).

Any interest in making these changes as part of this PR? FYI, for the sake of space, I did end up changing the text size names back to abbreviations. Apologies for the back-and-forth on that!

x-pack/plugins/lens/common/expressions/metric_chart/metric_chart.ts

x-pack/plugins/lens/public/metric_visualization/auto_scale.tsx

x-pack/plugins/lens/public/metric_visualization/expression.scss

shahzad31 · 2022-02-02T16:22:11Z

@MichaelMarcialis Sure, i like the update, will push the changes.

shahzad31 · 2022-02-04T09:01:42Z

@MichaelMarcialis i have updated , there is one small issue when XXL is selected, First row bit overflows, i am not sure, if we need to increase popover width.

MichaelMarcialis

Hey, @shahzad31. Thanks so much for making those suggested changes. Apologies for my delayed response; I'm just returning from PTO.

This looks great. Upon re-review, the majority of issues I discovered were those related to the form fields overflowing outside of the popover, which you mentioned earlier. Below is a list of suggested changes that should resolve that issue. In addition to these changes, you'll need to also change the width of the popovers via the toolbar_popover.scss styles (as it's currently too narrow to house these updated form elements). I used 440px in my quick mockups, so feel free to use that assuming it doesn't break anything.

Otherwise, I'm good to approve this, assuming those changes get made. Thanks so much again!

MichaelMarcialis · 2022-02-10T18:26:45Z

x-pack/plugins/lens/public/metric_visualization/metric_config_panel/align_options.tsx

+    <EuiButtonGroup
+      legend={i18n.translate('xpack.lens.metricChart.titleAlignLabel', {
+        defaultMessage: 'Align',
+      })}
+      options={alignButtonIcons}
+      idSelected={state.textAlign ?? 'center'}
+      onChange={(id) => {
+        setState({ ...state, textAlign: id as MetricState['textAlign'] });
+      }}
+      isIconOnly
+    />


Add prop buttonSize="compressed" to match the rest of the UI.

Suggested change

<EuiButtonGroup

legend={i18n.translate('xpack.lens.metricChart.titleAlignLabel', {

defaultMessage: 'Align',

})}

options={alignButtonIcons}

idSelected={state.textAlign ?? 'center'}

onChange={(id) => {

setState({ ...state, textAlign: id as MetricState['textAlign'] });

}}

isIconOnly

/>

<EuiButtonGroup

legend={i18n.translate('xpack.lens.metricChart.titleAlignLabel', {

defaultMessage: 'Align',

})}

options={alignButtonIcons}

idSelected={state.textAlign ?? 'center'}

onChange={(id) => {

setState({ ...state, textAlign: id as MetricState['textAlign'] });

}}

isIconOnly

buttonSize="compressed"

/>

MichaelMarcialis · 2022-02-10T18:28:43Z

x-pack/plugins/lens/public/metric_visualization/metric_config_panel/title_position_option.tsx

+      <EuiButtonGroup
+        isFullWidth={true}
+        data-test-subj="lnsMissingValuesSelect"
+        legend="This is a basic group"
+        options={titlePositions}
+        idSelected={state.titlePosition ?? 'top'}
+        onChange={(value) => {
+          setState({ ...state, titlePosition: value as MetricState['titlePosition'] });
+        }}
+      />


Add prop buttonSize="compressed" to match the rest of the UI.

Suggested change

<EuiButtonGroup

isFullWidth={true}

data-test-subj="lnsMissingValuesSelect"

legend="This is a basic group"

options={titlePositions}

idSelected={state.titlePosition ?? 'top'}

onChange={(value) => {

setState({ ...state, titlePosition: value as MetricState['titlePosition'] });

}}

/>

<EuiButtonGroup

isFullWidth

data-test-subj="lnsMissingValuesSelect"

legend="This is a basic group"

options={titlePositions}

idSelected={state.titlePosition ?? 'top'}

onChange={(value) => {

setState({ ...state, titlePosition: value as MetricState['titlePosition'] });

}}

buttonSize="compressed"

/>

MichaelMarcialis · 2022-02-10T18:36:52Z

x-pack/plugins/lens/public/metric_visualization/metric_config_panel/text_formatting_options.tsx

+        </>
+      }
+    >
+      <EuiFlexGroup gutterSize="s">


Apply prop responsive={false} to prevent breaking at small viewport sizes.

Suggested change

<EuiFlexGroup gutterSize="s">

<EuiFlexGroup gutterSize="s" responsive={false}>

MichaelMarcialis · 2022-02-10T18:45:41Z

x-pack/plugins/lens/public/metric_visualization/metric_config_panel/text_formatting_options.tsx

+        <EuiFlexItem>
+          <SizeOptions state={state} setState={setState} />
+        </EuiFlexItem>
+        <EuiFlexItem>


Prevent flex item growing with grow={false} prop.

Suggested change

<EuiFlexItem>

<EuiFlexItem grow={false}>

MichaelMarcialis · 2022-02-10T18:53:59Z

x-pack/plugins/lens/public/metric_visualization/metric_config_panel/title_position_option.tsx

+    <EuiFormRow
+      display="columnCompressed"
+      label={
+        <>
+          {i18n.translate('xpack.lens.metricChart.titlePositionLabel', {
+            defaultMessage: 'Title position',
+          })}
+        </>
+      }
+    >


Add fullWidth prop to match previous form row.

Suggested change

<EuiFormRow

display="columnCompressed"

label={

<>

{i18n.translate('xpack.lens.metricChart.titlePositionLabel', {

defaultMessage: 'Title position',

})}

</>

}

>

<EuiFormRow

display="columnCompressed"

fullWidth

label={

<>

{i18n.translate('xpack.lens.metricChart.titlePositionLabel', {

defaultMessage: 'Title position',

})}

</>

}

>

MichaelMarcialis · 2022-02-10T19:05:03Z

x-pack/plugins/lens/public/metric_visualization/metric_config_panel/size_options.tsx

+    <EuiSuperSelect
+      append={
+        <EuiButtonIcon
+          iconType="plus"
+          onClick={() => changeSize(1)}
+          isDisabled={currSizeIndex === titleSizes.length - 1}
+        />
+      }
+      prepend={
+        <EuiButtonIcon
+          iconType="minus"
+          onClick={() => changeSize(-1)}
+          isDisabled={currSizeIndex === 0}
+        />
+      }
+      data-test-subj="lnsMetricSizeSelect"
+      compressed
+      options={titleSizes.map((position) => {
+        return {
+          value: position.id,
+          dropdownDisplay: position.label,
+          inputDisplay: position.label,
+        };
+      })}
+      valueOfSelected={state.size ?? 'xl'}
+      onChange={(value) => {
+        setState({ ...state, size: value });
+      }}
+      itemLayoutAlign="top"
+      hasDividers
+    />


Add fullWidth prop to ensure the component fills the available space.

Suggested change

<EuiSuperSelect

append={

<EuiButtonIcon

iconType="plus"

onClick={() => changeSize(1)}

isDisabled={currSizeIndex === titleSizes.length - 1}

/>

}

prepend={

<EuiButtonIcon

iconType="minus"

onClick={() => changeSize(-1)}

isDisabled={currSizeIndex === 0}

/>

}

data-test-subj="lnsMetricSizeSelect"

compressed

options={titleSizes.map((position) => {

return {

value: position.id,

dropdownDisplay: position.label,

inputDisplay: position.label,

};

})}

valueOfSelected={state.size ?? 'xl'}

onChange={(value) => {

setState({ ...state, size: value });

}}

itemLayoutAlign="top"

hasDividers

/>

<EuiSuperSelect

append={

<EuiButtonIcon

iconType="plus"

onClick={() => changeSize(1)}

isDisabled={currSizeIndex === titleSizes.length - 1}

/>

}

prepend={

<EuiButtonIcon

iconType="minus"

onClick={() => changeSize(-1)}

isDisabled={currSizeIndex === 0}

/>

}

data-test-subj="lnsMetricSizeSelect"

compressed

options={titleSizes.map((position) => {

return {

value: position.id,

dropdownDisplay: position.label,

inputDisplay: position.label,

};

})}

valueOfSelected={state.size ?? 'xl'}

onChange={(value) => {

setState({ ...state, size: value });

}}

itemLayoutAlign="top"

hasDividers

fullWidth

/>

flash1293 · 2022-02-11T09:05:01Z

@elasticmachine merge upstream

…etric

flash1293

Thank you so much for working on this @shahzad31 ! This will do wonders for Lens based dashboards.

I left two smallish issues, but otherwise it looks great to me

flash1293 · 2022-02-11T09:20:22Z

x-pack/plugins/lens/public/metric_visualization/auto_scale.tsx

+                alignLeft: textAlign === 'left',
+                alignRight: textAlign === 'right',
+                alignCenter: textAlign === 'center',
+                [`titleSize${(size ?? 'xl').toUpperCase()}`]: true,


Any reason why the default size isn't handled on the toExpression level like position and alignment?

removed default here because we use default font size in class lnsMetricExpression__value and don't needed to add this class if size is not defained.

flash1293 · 2022-02-11T09:23:16Z

x-pack/plugins/lens/public/metric_visualization/visualization.tsx

        arguments: {
          title: [attributes?.title || ''],
+          size: [state?.size || ''],
+          titlePosition: [state?.titlePosition || 'top'],


Not opposed to default to "top" for new visualizations, but the old default was "bottom". So if we want to keep the default value here we have to add a migration to add in the bottom for the existing ones.

Why we decide to use top as default? It can confuse users because previously we show label in the bottom in any case, is not?

flash1293 · 2022-02-11T09:26:33Z

Also it seems like the default font size was slightly larger on old versions:

Not a blocker for me but as FYI

VladLasitsa · 2022-02-15T10:38:05Z

@elasticmachine merge upstream

VladLasitsa · 2022-02-15T12:28:48Z

Also it seems like the default font size was slightly larger on old versions:

Not a blocker for me but as FYI

It's because previously we used euiSize but now we are using euiFontSize. From my perspective using of euiFontSize is more correct.

…ring

flash1293

LGTM, great job!

kibana-ci · 2022-02-15T17:28:29Z

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`lens`	735	741	+6

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
`lens`	345	348	+3

Async chunks

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

id	before	after	diff
`lens`	1.0MB	1.1MB	+8.3KB

Page load bundle

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

id	before	after	diff
`lens`	43.0KB	43.5KB	+485.0B

Unknown metric groups

API count

id	before	after	diff
`lens`	396	399	+3

History

💔 Build #24266 failed cd89b4e
💔 Build #24225 failed b139f93
💚 Build #24172 succeeded 321f8f3
💚 Build #23393 succeeded 71c3162
💚 Build #22716 succeeded 3bfdf0b
💔 Build #22520 failed a0514f8

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

ryankeairns · 2022-02-16T15:46:17Z

Thanks for this @shahzad31 ! This will really help us in improving the visual appearance of dashboards.

Add lens config options

dbdc290

shahzad31 marked this pull request as ready for review January 31, 2022 15:17

shahzad31 requested review from a team as code owners January 31, 2022 15:17

markov00 reviewed Jan 31, 2022

View reviewed changes

MichaelMarcialis reviewed Jan 31, 2022

View reviewed changes

shahzad31 added 5 commits February 1, 2022 10:38

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

b093f5e

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

ba3448e

wip

932545d

Pr feedback

b3329c2

simplify align

e1b2643

shahzad31 requested review from MichaelMarcialis and markov00 February 1, 2022 13:41

shahzad31 added release_note:enhancement v8.1.0 labels Feb 1, 2022

shahzad31 added 2 commits February 1, 2022 15:16

improve typing

c1934ed

update typing

b0aaec6

MichaelMarcialis reviewed Feb 1, 2022

View reviewed changes

shahzad31 added v8.2.0 and removed v8.1.0 labels Feb 2, 2022

This was referenced Feb 2, 2022

[Dashboard] [META] Aesthetic by default #118429

Open

Metric + micro combo visualization elastic/elastic-charts#1578

Closed

shahzad31 added 3 commits February 3, 2022 17:50

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

00328a7

PR feedback

da64340

Design PR feedback

5ebd718

flash1293 added the Feature:Lens label Feb 8, 2022

dej611 mentioned this pull request Feb 8, 2022

[Lens] Switch to unified metric renderer #123797

Closed

shahzad31 added 4 commits February 8, 2022 16:55

snapshot

9384fa1

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

a0514f8

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

b9f7a61

update snap

3bfdf0b

shahzad31 requested a review from MichaelMarcialis February 9, 2022 12:27

MichaelMarcialis approved these changes Feb 10, 2022

View reviewed changes

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

159ffd0

kibanamachine and others added 3 commits February 11, 2022 04:05

Merge branch 'main' into lens-metric

05c8b50

design suggestions

56c0bb4

Merge branch 'lens-metric' of github.com:shahzad31/kibana into lens-m…

71c3162

…etric

flash1293 reviewed Feb 11, 2022

View reviewed changes

Merge branch 'main' into lens-metric

321f8f3

VladLasitsa added 4 commits February 15, 2022 16:05

Use bottom as default position for title and some other small refacto…

b139f93

…ring

Fix test

e4d3b03

Fix shapshot

cd89b4e

Fix shapshot

8726fb8

flash1293 approved these changes Feb 15, 2022

View reviewed changes

VladLasitsa merged commit b7b5088 into elastic:main Feb 16, 2022

shahzad31 deleted the lens-metric branch February 16, 2022 15:47

MichaelMarcialis mentioned this pull request Feb 24, 2022

[Lens] "Text formatting" form row overflowing toolbar popover on metric visualizations #126376

Closed

flash1293 mentioned this pull request Mar 23, 2022

[Lens] Improve metric alignment #120386

Closed

rajvi-patel-22 mentioned this pull request Feb 14, 2023

[Lens Migration] Migrate visualizations to lens for ActiveMQ, Spring Boot and WebSphere Application Server elastic/integrations#5250

Closed

9 tasks

kush-elastic mentioned this pull request Feb 17, 2023

[Lens Migration] Migrate visualizations for Cassandra, CouchBase, Oracle WebLogic and Salesforce to lens elastic/integrations#5311

Closed

9 tasks

	<EuiFlexGroup gutterSize="s">
	<EuiFlexGroup gutterSize="s" responsive={false}>

Conversation

shahzad31 commented Jan 31, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Uh oh!

ghudgins commented Jan 31, 2022

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

MichaelMarcialis left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

shahzad31 commented Feb 1, 2022

Uh oh!

MichaelMarcialis left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

shahzad31 commented Feb 2, 2022

Uh oh!

shahzad31 commented Feb 4, 2022

Uh oh!

MichaelMarcialis left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

flash1293 commented Feb 11, 2022

Uh oh!

flash1293 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

flash1293 commented Feb 11, 2022

Uh oh!

VladLasitsa commented Feb 15, 2022

Uh oh!

VladLasitsa commented Feb 15, 2022

Uh oh!

shahzad31 commented Jan 31, 2022 •

edited

Loading

MichaelMarcialis left a comment •

edited

Loading