[WIP] Part-to-whole comparison chart guidelines #3387

cchaos · 2020-04-24T19:11:27Z

Upgrades Charts to v. 19.2.0

Pie/Donut/Sunburst/Treemap guidelines

Mostly talks about Pie/Donut charts specifically, but the guidelines apply to most "part-to-whole" comparison charts.

Palette changes

euiPaletteColorBlind() now accepts two other parameters.

sortBy: 'default' | 'natural' for sorting the colors based on the color wheel
sortShift: number for shifting the starting point of the color wheel (defaults to the green position -100

The EuiChartThemeType now has a partition key specifically for Partition charts that have specific configs.

Breaking Changes

A. The euiPaletteColorBlind() function was becoming unwieldly with the amount of parameters it can accept. It just wasn't scalable as a simple parameters. Now, the function has one parameter of the object type.

// Before
euiPaletteColorBlind(2)
// After
euiPaletteColorBlind({ rotations: 2 })

B. The sort order for the EUI_CHARTS_THEME_LIGHT/DARK color blind palette now defaults to the "natural" sort order. This means all EUI themed charts, will have a slightly different sorting of colors.

Note to consumers: While this is a breaking change, unless you used the default sort order to match your categories against, there shouldn't be a significant difference.

Other changes

i. Updates the homepage card listing to add one for Charts, Text, and Page layout. Also, I exported the images slightly different than before so they're a bit better looking in dark mode.

ii. Adds RecursivePartial<> TS utility for allowing recursive object keys to be optional

iii. Changed EuiImage's caption prop to also allow for non-strings, like html elements. I ran into this trying to pass <small>Caption</small> as the prop to make the text smaller.

Checklist

Check against all themes for compatibility in both light and dark modes
Checked in mobile
Checked in ~~IE11~~ and Firefox
Props have proper autodocs
Added documentation examples
Added or updated jest tests
Checked for breaking changes and labeled appropriately
Checked for accessibility including keyboard-only and screenreader modes
A changelog entry exists and is marked appropriately

cchaos · 2020-04-24T20:48:40Z

retest

kibanamachine · 2020-04-24T21:08:39Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_3387/

kibanamachine · 2020-04-24T21:42:33Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_3387/

myasonik · 2020-04-24T22:14:28Z

Can you add this page to the a11y tests? (I realized we should have been doing this on every PR that adds a new page until the testing runs all page by default...)

Looks like there'll be just one duplicate ID issue to fix.

kibanamachine · 2020-04-28T18:08:54Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_3387/

kibanamachine · 2020-05-04T21:09:56Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_3387/

kibanamachine · 2020-05-04T21:35:30Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_3387/

snide · 2020-05-05T04:43:52Z

Couple quick ones for dark mode. Will do a larger code / copy review tomorrow.

Dark mode

src-docs/src/views/elastic_charts/treemap.js

wylieconlon

The comments I got on pie charts in Lens indicated that the correct default is to show the percent value instead of the numeric value inside the slices, and since it's already supported by the chart library I think you could show both options.

src-docs/src/views/elastic_charts/treemap.js

kibanamachine · 2020-05-05T20:29:24Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_3387/

miukimiu

Amazing work! I really like all the explanations and all the interactions. 😍

I just found two small typos. All the rest looks good to me! 🎉

src-docs/src/views/elastic_charts/pie_example.js

src-docs/src/views/elastic_charts/pie_alts.js

kibanamachine · 2020-05-06T17:52:56Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_3387/

snide

This is fantastic. Left some small grammatical suggestions. Verified previous comments about dark mode were fixed. Looks good to merge once you're happy with it.

src-docs/src/views/elastic_charts/pie_example.js

kibanamachine · 2020-05-06T22:57:42Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_3387/

kibanamachine · 2020-05-06T23:20:58Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_3387/

markov00

Thank you Caroline for this, I've left a few minor comments but everything else is great.

package.json

src-docs/src/views/elastic_charts/pie_example.js

src/components/common.ts

kibanamachine · 2020-05-07T16:40:34Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_3387/

…lette

Co-authored-by: Elizabet Oliveira <elizabet.oliveira@elastic.co>

Co-authored-by: Dave Snider <dave.snider@gmail.com>

kibanamachine · 2020-05-07T17:06:43Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_3387/

kibanamachine · 2020-05-08T15:47:09Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_3387/

cchaos · 2020-05-08T18:37:06Z

retest

kibanamachine · 2020-05-08T18:57:33Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_3387/

cchaos force-pushed the docs/charts/pie branch from f8f0dc8 to 7609482 Compare April 28, 2020 17:47

cchaos added the breaking change label May 4, 2020

cchaos marked this pull request as ready for review May 4, 2020 21:08

cchaos force-pushed the docs/charts/pie branch from 9eb6edd to 83e525f Compare May 4, 2020 21:14

cchaos requested review from miukimiu, thompsongl and snide and removed request for miukimiu May 5, 2020 12:59

wylieconlon reviewed May 5, 2020

View reviewed changes

src-docs/src/views/elastic_charts/treemap.js Show resolved Hide resolved

wylieconlon reviewed May 5, 2020

View reviewed changes

src-docs/src/views/elastic_charts/treemap.js Show resolved Hide resolved

miukimiu approved these changes May 6, 2020

View reviewed changes

src-docs/src/views/elastic_charts/pie_example.js Outdated Show resolved Hide resolved

src-docs/src/views/elastic_charts/pie_alts.js Outdated Show resolved Hide resolved

snide approved these changes May 6, 2020

View reviewed changes

markov00 approved these changes May 7, 2020

View reviewed changes

cchaos added 3 commits May 7, 2020 12:46

Upgraded Charts to 18.1.0

1e5cc72

Started page for Pie

c987fb8

Starting addition to theme

cf66292

cchaos and others added 19 commits May 7, 2020 12:46

Finalize text and copy code

0394e5a

Change pie to partition and fix? TS

7027ee8

[EuiImage] Update caption prop type from string to ReactNode

bf3c768

[euiPaletteColorBlind] Add ability to set sort order and shift

b4e8be2

[Breaking] Altering euiPaletteColorBlind and default chart theme pa…

d43b243

…lette

Added/Updated cards on home page

b06e0e8

Fixing all usages of theme to use the Natural order

8dead6b

cl

c5ea7cf

Fixing dark mode and percent values

38e6af2

Update src-docs/src/views/elastic_charts/pie_example.js

781178e

Co-authored-by: Elizabet Oliveira <elizabet.oliveira@elastic.co>

Update src-docs/src/views/elastic_charts/pie_alts.js

5e67cac

Co-authored-by: Elizabet Oliveira <elizabet.oliveira@elastic.co>

Update src-docs/src/views/elastic_charts/pie_example.js

1c7a21f

Co-authored-by: Dave Snider <dave.snider@gmail.com>

Update src-docs/src/views/elastic_charts/pie_example.js

aee7a44

Co-authored-by: Dave Snider <dave.snider@gmail.com>

Review feedback

f3887f8

Update src-docs/src/views/elastic_charts/pie_example.js

be4e671

Co-authored-by: Dave Snider <dave.snider@gmail.com>

Update src-docs/src/views/elastic_charts/pie_example.js

14bf37d

Co-authored-by: Dave Snider <dave.snider@gmail.com>

Prettier

b15411e

Charts team review feedback and upgrade to 19.2.0

ff404d1

cl

d93add8

cchaos force-pushed the docs/charts/pie branch from d553f98 to d93add8 Compare May 7, 2020 16:46

cl

10040c1

cchaos and others added 2 commits May 8, 2020 11:23

Upgrade charts to 19.3 and fix isInfinite

1be59d8

Merge branch 'master' into docs/charts/pie

4b33bfc

cchaos merged commit 826bdb5 into elastic:master May 8, 2020

thompsongl mentioned this pull request Jun 3, 2020

Upgrade EUI to v24.1.0 elastic/kibana#68141

Merged

cchaos deleted the docs/charts/pie branch September 11, 2020 15:39

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[WIP] Part-to-whole comparison chart guidelines #3387

[WIP] Part-to-whole comparison chart guidelines #3387

cchaos commented Apr 24, 2020 •

edited

Loading

cchaos commented Apr 24, 2020

kibanamachine commented Apr 24, 2020

kibanamachine commented Apr 24, 2020

myasonik commented Apr 24, 2020

kibanamachine commented Apr 28, 2020

kibanamachine commented May 4, 2020

kibanamachine commented May 4, 2020

snide commented May 5, 2020

wylieconlon left a comment

kibanamachine commented May 5, 2020

miukimiu left a comment

kibanamachine commented May 6, 2020

snide left a comment

kibanamachine commented May 6, 2020

kibanamachine commented May 6, 2020

markov00 left a comment

kibanamachine commented May 7, 2020

kibanamachine commented May 7, 2020

kibanamachine commented May 8, 2020

cchaos commented May 8, 2020

kibanamachine commented May 8, 2020

[WIP] Part-to-whole comparison chart guidelines #3387

[WIP] Part-to-whole comparison chart guidelines #3387

Conversation

cchaos commented Apr 24, 2020 • edited Loading

Pie/Donut/Sunburst/Treemap guidelines

Palette changes

Breaking Changes

Other changes

Checklist

cchaos commented Apr 24, 2020

kibanamachine commented Apr 24, 2020

kibanamachine commented Apr 24, 2020

myasonik commented Apr 24, 2020

kibanamachine commented Apr 28, 2020

kibanamachine commented May 4, 2020

kibanamachine commented May 4, 2020

snide commented May 5, 2020

Dark mode

wylieconlon left a comment

Choose a reason for hiding this comment

kibanamachine commented May 5, 2020

miukimiu left a comment

Choose a reason for hiding this comment

kibanamachine commented May 6, 2020

snide left a comment

Choose a reason for hiding this comment

kibanamachine commented May 6, 2020

kibanamachine commented May 6, 2020

markov00 left a comment

Choose a reason for hiding this comment

kibanamachine commented May 7, 2020

kibanamachine commented May 7, 2020

kibanamachine commented May 8, 2020

cchaos commented May 8, 2020

kibanamachine commented May 8, 2020

cchaos commented Apr 24, 2020 •

edited

Loading