[Vis: Default Editor] EUIficate 'Metrics & Axis' tab #43772

maryia-lapata · 2019-08-22T13:22:24Z

Summary

EUIfication of options tab Metrics & Axes in Area/Bar/Line vis.
Part of #38273.

For better understanding of components structure I added a schema in Tech details section.

This PR contains the following changes:

Euification of vislib-series, vislib-value-axes and vislib-category-axis directives.
for vis config:
- moved common collections and optionTabs into utils files;
- added enum types for category type, scale type, axis type, rotate, chart type, chart mode, interpolate mode, threshold line styles. Also their options were localized;
- options tab titles Metric & axes and Panel settings were localized;
- added thresholdLine config in Histogram bar;
- defined lineWidth for seriesParams as 2;
for PointSeriesOptions:
- renamed GridOptions to GridPanel;
- moved ThresholdLine setting into a separate component
for common components:
- added ValidationWrapper component for multifield validation support like in AggGroup since we're still bound by angularjs's ngForm;
- added data-test-subj, disabled , isInvalid and error props to NumberInputOption;
- added disabled prop to TruncateLabelsOption;
- added data-test-subj prop to TextInputOption ;
- now SelectOption allows value as number too (Rotate needs this);
labels were update using sentence case.
remove unused style .visEditorSidebar__formTitle;
old unit tests were removed. I'll add jest unit tests in a separate PR.

Screenshots

General view

Metrics

Line:

|

Area:

Y-Axes

3a) Disabled Show axes lines and labels

3b) Custom extends

3c) Validation

X-Axes

Tech details

1. MetricsAxisOptions

2. ChartOptions

Options

3. ValueAxisOptions

Use cases

1. From #24176 about Axis title:

- When an axis title is set manually, it will always override the custom label set on the agg - Otherwise, the axis title will be set to whatever the custom label is on the agg - If no custom label is specified on the agg, the axis title will be set to the default for the agg (i.e. whatever `aggConfig.makeLabel()` returns) - If the agg type is changed, axis titles are reset to `aggConfg.makeLabel()`

2. Y-Axis name should be changed to opposite when X-axis position is changed:

3. Y-Axis name should be changed when this Y-axis position is changed:

Checklist

Use ~~strikethroughs~~ to remove checklist items you don't feel are applicable to this PR.

This was checked for cross-browser compatibility, including a check against IE11
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

For maintainers

This was checked for breaking API changes and was labeled appropriately
This includes a feature addition or change that requires a release note and was labeled appropriately

elasticmachine · 2019-09-11T13:26:36Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

flash1293

LGTM besides always keeping "Show dots" enabled as discussed offline.

elasticmachine · 2019-09-12T14:27:35Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

cchaos

LGTM thanks @maryia-lapata!

elasticmachine · 2019-09-13T10:52:24Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

* EUIficate pointe-series and grid * Apply TS * Show grid on a panel * Remove extra space * Add TS * Use BasicOptions * Adjust func test * Add dataTestSubj prop to SelectOption * Use id instead of data-sest-subj * Disable show x-axis lines when there is histogram agg * Add tooltip for disabled 'Show x-axis lines' config * Add series_options.tsx * Migrate series * Improve changeValueAxis * Create CategoryAxisPanel * Create ValueAxesPanel * Create CustomExtentsOptions * File renaming * Use TruncateLabelsOption * Set min value * Add validation * Refactoring * Move types upper * Convert series logic * Convert valueAxes logic * Rename function * Add validation and refactoring * Adjust styles * Fix rotates * Apply config for other vis * Remove old directives * Fix useHook usage * Update vislib_vis_type.js * Fix * Move Threshold line panel into a separate component * Remove unused translations * Apply ui suggestions * Update functional tests * Remove angular unit test * Refactoring * Fix dependencies * Refactoring * Add validation * Add validation for other vis * Refactoring of onPositionChanged handler * Refactoring of addValueAxis * Get rid of a useEffect * Refactoring of updateAxisTitle * Update useCallback * Refactoring * Refactoring of collections config * Refactoring of setChartValueByIndex and setValueAxisByIndex * Update metrics_axes_options.tsx * Watch current tab for correct accordion height * Revert axis title logic * Fix axis id and name number * Fix code review comments * Fix functional tests * Update visualize_page.js * Move option tabs in common * Fix code review comments * Update index.tsx * Refactoring * Fix merge conflict * Show ThresholdPanel when it's configured * Fix passing a current tab to vis-options * Localize 'Count' text * Pass one axis to CategoryAxisPanel * Fix y-axis name number when x-axis position changed * Fix Y-axis name number when position Y-axis changed * Fix refresh loop * Re-organize controls * Apply code review comments * Refactoring * Fix extents empty value * Update y_extents.tsx * Fix code review comments * Fix updating several seriesParams when removing axis * Add thresholdLine config to horizontal bar * Refactoring * Reset grid.valueAxis when the axis deleted * Fix refresh loop * Set interpolate config for line * Enable "show dots"

…45621) * [Vis: Default Editor] EUIficate 'Metrics & Axis' tab (#43772) * EUIficate pointe-series and grid * Apply TS * Show grid on a panel * Remove extra space * Add TS * Use BasicOptions * Adjust func test * Add dataTestSubj prop to SelectOption * Use id instead of data-sest-subj * Disable show x-axis lines when there is histogram agg * Add tooltip for disabled 'Show x-axis lines' config * Add series_options.tsx * Migrate series * Improve changeValueAxis * Create CategoryAxisPanel * Create ValueAxesPanel * Create CustomExtentsOptions * File renaming * Use TruncateLabelsOption * Set min value * Add validation * Refactoring * Move types upper * Convert series logic * Convert valueAxes logic * Rename function * Add validation and refactoring * Adjust styles * Fix rotates * Apply config for other vis * Remove old directives * Fix useHook usage * Update vislib_vis_type.js * Fix * Move Threshold line panel into a separate component * Remove unused translations * Apply ui suggestions * Update functional tests * Remove angular unit test * Refactoring * Fix dependencies * Refactoring * Add validation * Add validation for other vis * Refactoring of onPositionChanged handler * Refactoring of addValueAxis * Get rid of a useEffect * Refactoring of updateAxisTitle * Update useCallback * Refactoring * Refactoring of collections config * Refactoring of setChartValueByIndex and setValueAxisByIndex * Update metrics_axes_options.tsx * Watch current tab for correct accordion height * Revert axis title logic * Fix axis id and name number * Fix code review comments * Fix functional tests * Update visualize_page.js * Move option tabs in common * Fix code review comments * Update index.tsx * Refactoring * Fix merge conflict * Show ThresholdPanel when it's configured * Fix passing a current tab to vis-options * Localize 'Count' text * Pass one axis to CategoryAxisPanel * Fix y-axis name number when x-axis position changed * Fix Y-axis name number when position Y-axis changed * Fix refresh loop * Re-organize controls * Apply code review comments * Refactoring * Fix extents empty value * Update y_extents.tsx * Fix code review comments * Fix updating several seriesParams when removing axis * Add thresholdLine config to horizontal bar * Refactoring * Reset grid.valueAxis when the axis deleted * Fix refresh loop * Set interpolate config for line * Enable "show dots" * Fix functional test

elasticmachine · 2019-09-17T14:14:22Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

maryia-lapata added 30 commits August 7, 2019 15:29

EUIficate pointe-series and grid

7113847

Merge branch 'master' into point-series

aa3ec42

Apply TS

950f4d5

Show grid on a panel

d120cb3

Remove extra space

5c02bda

Merge branch 'master' into point-series

2815308

Add TS

b5296a1

Use BasicOptions

7c04623

Adjust func test

581d200

Add dataTestSubj prop to SelectOption

79cac99

Merge branch 'master' into point-series

6f27b2d

Use id instead of data-sest-subj

44f061d

Disable show x-axis lines when there is histogram agg

162b5cd

Merge branch 'master' into point-series

a9ac07b

Add tooltip for disabled 'Show x-axis lines' config

b4ec159

Add series_options.tsx

c3e73d1

Merge branch 'master' into series-options

4273682

Migrate series

02ac64b

Improve changeValueAxis

c33df01

Merge branch 'master' into series-options

c3baff1

Create CategoryAxisPanel

7949329

Create ValueAxesPanel

d24335a

Create CustomExtentsOptions

abaaed5

File renaming

9516076

Use TruncateLabelsOption

be9612e

Set min value

e7d8885

Add validation

3993f10

Refactoring

46ec9e3

Merge branch 'master' into series-options

723f1f8

Move types upper

4e16fdf

This comment has been minimized.

Sign in to view

maryia-lapata added 2 commits September 10, 2019 12:20

Reset grid.valueAxis when the axis deleted

086c94c

Fix refresh loop

0bafa6f

This comment has been minimized.

Sign in to view

maryia-lapata requested review from cchaos, flash1293 and sulemanof September 10, 2019 12:27

Set interpolate config for line

4301f62

This comment has been minimized.

Sign in to view

Merge branch 'master' of github.com:elastic/kibana into series-options

b3127d5

Merge branch 'master' into series-options

da85bf5

flash1293 approved these changes Sep 12, 2019

View reviewed changes

Enable "show dots"

b4ab409

cchaos approved these changes Sep 13, 2019

View reviewed changes

maryia-lapata removed the request for review from sulemanof September 13, 2019 07:51

Merge branch 'master' of github.com:elastic/kibana into series-options

5df31a0

sulemanof requested review from sulemanof and removed request for sulemanof September 13, 2019 11:10

sulemanof approved these changes Sep 13, 2019

View reviewed changes

maryia-lapata merged commit 1223ab9 into elastic:master Sep 13, 2019

maryia-lapata deleted the series-options branch September 13, 2019 11:12

maryia-lapata mentioned this pull request Sep 13, 2019

[7.x] [Vis: Default Editor] EUIficate 'Metrics & Axis' tab (#43772) #45621

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Vis: Default Editor] EUIficate 'Metrics & Axis' tab #43772

[Vis: Default Editor] EUIficate 'Metrics & Axis' tab #43772

maryia-lapata commented Aug 22, 2019 •

edited

Loading

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

elasticmachine commented Sep 11, 2019

flash1293 left a comment

elasticmachine commented Sep 12, 2019

cchaos left a comment

elasticmachine commented Sep 13, 2019

elasticmachine commented Sep 17, 2019

[Vis: Default Editor] EUIficate 'Metrics & Axis' tab #43772

[Vis: Default Editor] EUIficate 'Metrics & Axis' tab #43772

Conversation

maryia-lapata commented Aug 22, 2019 • edited Loading

Summary

Checklist

For maintainers

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

elasticmachine commented Sep 11, 2019

💚 Build Succeeded

flash1293 left a comment

Choose a reason for hiding this comment

elasticmachine commented Sep 12, 2019

💚 Build Succeeded

cchaos left a comment

Choose a reason for hiding this comment

elasticmachine commented Sep 13, 2019

💚 Build Succeeded

elasticmachine commented Sep 17, 2019

💔 Build Failed

maryia-lapata commented Aug 22, 2019 •

edited

Loading