[Lens] Add ability to set colors for y-axis series #70311

mbondyra · 2020-06-30T12:12:43Z

Summary

Fixes #53660

This PR adds ability to change the colors for Y-axis series.

The color stays default when it's not defined by user or when there's a breakdown by defined.

Checklist

cchaos · 2020-06-30T20:30:45Z

Here are some mocks to help you with those 3 different states.

Auto/default color (we don’t know the hex value)
Custom color, the user has decided to override the default color
Auto/default color and user can’t change it because of a split-by

The only thing crucially missing from the EUI side in the EuiColorPicker component is the ability to customize the placeholder text which displays as "Transparent" but we want "Auto". I'll get the EUI side rolling but maybe there's a workaround?

elasticmachine · 2020-07-01T20:27:42Z

Pinging @elastic/kibana-app (Team:KibanaApp)

cchaos · 2020-07-01T21:43:39Z

Looks great to me, functionally. As FYI, I've created an issue for the placeholder and isClearable props on EuiColorPicker. elastic/eui#3683 We'll be sure it gets in for 7.9

cchaos

It's also fun to see the suggestions update 😄

Here are some design suggestions to get the form to take up the full width.

x-pack/plugins/lens/public/xy_visualization/xy_config_panel.tsx

flash1293

This looks great, thanks a lot @mbondyra ! Tested in Firefox and works as expected, LGTM. I left two small nits.

Side note: I noticed a bug when switching between xy chart types (e.g. bar -> line) when multiple axes are configured, but it's very possible this is not caused by this PR:

Create a chart with two axes
Switch between bar/line/area
Renders with an error
Change axis side back to auto, then pick the same side again, now it works

I will look into this separately

x-pack/plugins/lens/public/xy_visualization/xy_config_panel.tsx

…s-colors

cchaos

Looks great! I'll get the EUI portion followed up when we have it in Kibana. Just a couple suggestions to fix some layouts, but then it's gtg, from my side.

x-pack/plugins/lens/public/xy_visualization/xy_config_panel.tsx

kibanamachine · 2020-07-03T09:06:04Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: 212effa

Build metrics

✅ unchanged

History

💔 Build #58509 failed 20a9a40
💔 Build #58456 failed 6ef0f29
💚 Build #58261 succeeded 952fa77
💚 Build #58229 succeeded d2179b8
💔 Build #58185 failed b8aa364

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

* master: (199 commits) [Telemetry] Add documentation about Application Usage (elastic#70624) [Ingest Manager] Improve agent unenrollment with unenroll action (elastic#70031) Handle timeouts on creating templates (elastic#70635) [Lens] Add ability to set colors for y-axis series (elastic#70311) [Uptime] Use elastic charts donut (elastic#70364) [Ingest Manager] Update registry URL to point to snapshot registry (elastic#70687) [Composable template] Create / Edit wizard (elastic#70220) [APM] Optimize services overview (elastic#69648) [Ingest Pipelines] Load from json (elastic#70297) [Rum Dashbaord] Rum selected service view (elastic#70579) [Uptime] Prevent duplicate requests on load for index status (elastic#70585) [ML] Changing shared module setup function parameters (elastic#70589) [Ingest Manager] Add ability to sort to agent configs and package configs (elastic#70676) [Alerting] document requirements for developing new action types (elastic#69164) Fixed adding an extra space character on selecting alert variable in action text fields (elastic#70028) [Maps] show vector tile labels on top (elastic#69444) chore(NA): upgrade to lodash@4 (elastic#69868) Add Snapshot Restore README with quick-testing steps. (elastic#70494) [EPM] Use higher priority than default templates (elastic#70640) [Maps] Fix cannot select Solid fill-color when removing fields (elastic#70621) ...

* master: [Lens] Fitting functions (elastic#69820) [Telemetry] Add documentation about Application Usage (elastic#70624) [Ingest Manager] Improve agent unenrollment with unenroll action (elastic#70031) Handle timeouts on creating templates (elastic#70635) [Lens] Add ability to set colors for y-axis series (elastic#70311) [Uptime] Use elastic charts donut (elastic#70364) [Ingest Manager] Update registry URL to point to snapshot registry (elastic#70687) [Composable template] Create / Edit wizard (elastic#70220) [APM] Optimize services overview (elastic#69648)

mbondyra force-pushed the lens/axis-colors branch from c797d76 to 7554ef5 Compare June 30, 2020 13:27

mbondyra added Feature:Lens release_note:enhancement Team:Visualizations Visualization editors, elastic-charts and infrastructure v7.9.0 v8.0.0 labels Jun 30, 2020

mbondyra added 7 commits July 1, 2020 18:57

axis colors

446eb18

refactor: don't read palette yourself

9287271

compressed picker

8febc84

feat: custom color Picker

cf54304

typecheck

6ab4f36

refactoring & tests

9aa3fca

removing caret-color

8b80ff1

mbondyra force-pushed the lens/axis-colors branch from 9d9c9bd to 8b80ff1 Compare July 1, 2020 17:53

mbondyra added 2 commits July 1, 2020 20:42

aaand back to ColorPicker

9cf9232

expression fix

9f42172

mbondyra force-pushed the lens/axis-colors branch from 8ef1024 to 9f42172 Compare July 1, 2020 19:12

mbondyra added 2 commits July 1, 2020 21:23

color fix

4720a98

tests added to xy_expression

6a54049

mbondyra marked this pull request as ready for review July 1, 2020 20:27

mbondyra requested a review from a team July 1, 2020 20:27

mbondyra requested review from wylieconlon and flash1293 July 1, 2020 20:28

types

144cf1b

cchaos suggested changes Jul 1, 2020

View reviewed changes

mbondyra added 2 commits July 2, 2020 08:32

design review

71ce160

types

a3fb6b7

flash1293 approved these changes Jul 2, 2020

View reviewed changes

x-pack/plugins/lens/public/xy_visualization/xy_config_panel.tsx Outdated Show resolved Hide resolved

x-pack/plugins/lens/public/xy_visualization/xy_config_panel.tsx Outdated Show resolved Hide resolved

mbondyra changed the title ~~[Lens] Set colors for y-axis series~~ [Lens] Add ability to set colors for y-axis series Jul 2, 2020

addressing Joe's comment

b8aa364

flash1293 reviewed Jul 2, 2020

View reviewed changes

x-pack/plugins/lens/public/xy_visualization/xy_config_panel.tsx Outdated Show resolved Hide resolved

mbondyra added 2 commits July 2, 2020 13:23

+memo

81c0ba9

Merge commit '1cfc9356bd36c54b8005089decc36970c11c101d' into lens/axi…

d2179b8

…s-colors

mbondyra force-pushed the lens/axis-colors branch from f8e942a to d2179b8 Compare July 2, 2020 12:31

tooltip design change

952fa77

mbondyra requested a review from cchaos July 2, 2020 17:51

cchaos approved these changes Jul 2, 2020

View reviewed changes

x-pack/plugins/lens/public/xy_visualization/xy_config_panel.tsx Show resolved Hide resolved

x-pack/plugins/lens/public/xy_visualization/xy_config_panel.tsx Outdated Show resolved Hide resolved

x-pack/plugins/lens/public/xy_visualization/xy_config_panel.tsx Outdated Show resolved Hide resolved

cr

20a9a40

mbondyra force-pushed the lens/axis-colors branch from 6ef0f29 to 20a9a40 Compare July 2, 2020 21:08

removing non existing prop

212effa

mbondyra merged commit a916e0a into elastic:master Jul 3, 2020

flash1293 mentioned this pull request Jul 3, 2020

[7.x] [Lens] Add ability to set colors for y-axis series (#70311) #70719

Merged

flash1293 pushed a commit to flash1293/kibana that referenced this pull request Jul 3, 2020

[Lens] Add ability to set colors for y-axis series (elastic#70311)

55683eb

flash1293 added a commit that referenced this pull request Jul 3, 2020

[Lens] Add ability to set colors for y-axis series (#70311) (#70719)

2c0651e

mbondyra deleted the lens/axis-colors branch July 9, 2020 14:32

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Lens] Add ability to set colors for y-axis series #70311

[Lens] Add ability to set colors for y-axis series #70311

mbondyra commented Jun 30, 2020 •

edited

Loading

cchaos commented Jun 30, 2020

elasticmachine commented Jul 1, 2020

cchaos commented Jul 1, 2020

cchaos left a comment

flash1293 left a comment •

edited

Loading

cchaos left a comment

kibanamachine commented Jul 3, 2020

[Lens] Add ability to set colors for y-axis series #70311

[Lens] Add ability to set colors for y-axis series #70311

Conversation

mbondyra commented Jun 30, 2020 • edited Loading

Summary

Checklist

cchaos commented Jun 30, 2020

elasticmachine commented Jul 1, 2020

cchaos commented Jul 1, 2020

cchaos left a comment

Choose a reason for hiding this comment

flash1293 left a comment • edited Loading

Choose a reason for hiding this comment

cchaos left a comment

Choose a reason for hiding this comment

kibanamachine commented Jul 3, 2020

💚 Build Succeeded

Build metrics

History

mbondyra commented Jun 30, 2020 •

edited

Loading

flash1293 left a comment •

edited

Loading