feat: text improvements by monfera · Pull Request #524 · elastic/elastic-charts

monfera · 2020-01-23T23:53:30Z

Summary

This PR

adds font configurability for the values separately from label text
adds the ability to use the parent information in accessor functions
adds a sortIndex for accessors which represents the index of the shape among the children of its parent, in decreasing value (size) order
adds a straightforward way to display (formatted) values in linked annotations - previously it was only possible via the label formatter
ensures that fill text color inversion takes into account the opacity in a possible rgba() color string
adds stories (see below for screenshots)
moves utilities out of stories
adds type improvements (tighter and simpler typing) and solves a couple of code todos
ensures that fill text is only ever rendered for a shape if the entirety of the text, including the formatted value, fits

Label vs value formatting:

Opacity lowered outer ring story:

Combined example for:

more convenient value rendering in the linked label
categorical color use (here, colorbrewer2.org by Cynthia Brewer et al)

Combined example for

cyclical color
color determination based on the mean angle of the sector: rather distinct colors in the inner ring, while related, yet distinct colors in the outer ring

Combined example for

treemap coloring: colorbrewer2.org
different formatting for the values

Combined example for

treemap coloring: color pick at Layer 1 but it's perturbed at Layer 2 for distinct rectangle colors
formatting of valueFont for treemaps
text color inversion for treemap in both Layers

Checklist

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

Any consumer-facing exports were added to src/index.ts (and stories only import from ../src except for test data & storybook)
This was checked for cross-browser compatibility, including a check against IE11
Proper documentation or storybook story was added for features that require explanation or tutorials
Unit tests were updated or added to match the most common scenarios
Each commit follows the convention

codecov-io · 2020-01-23T23:56:57Z

Codecov Report

Merging #524 into master will increase coverage by 0.06%.
The diff coverage is 16.66%.

@@            Coverage Diff             @@
##           master     #524      +/-   ##
==========================================
+ Coverage   75.21%   75.28%   +0.06%     
==========================================
  Files         193      193              
  Lines        5806     5793      -13     
  Branches     1078     1113      +35     
==========================================
- Hits         4367     4361       -6     
+ Misses       1423     1416       -7     
  Partials       16       16

Impacted Files	Coverage Δ
...ypes/partition_chart/renderer/canvas/partition.tsx	`43.47% <16.66%> (-0.59%)`	⬇️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update e66dfd0...3073676. Read the comment docs.

- hierarchical data: parent, sortIndex - tighter types - font color inversion now considers rgba() opacity, if any - a couple of todo-s solved: - removed some code duplication (shape fill calculation) - eliminated the need to index-join childrenNodes and quadViewModel

markov00

I've left few comments on the code and I think there are also few issues on the following screenshots:

we should avoid having scrollbars on the snapshot: integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-sunburst-sunburst-three-layers-visually-looks-correct-1-snap.png

looks like it is clipped on the bottom side:
integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-treemap-two-layers-stress-test-visually-looks-correct-1-snap.png

src/chart_types/partition_chart/layout/types/config_types.ts

src/chart_types/partition_chart/layout/types/types.ts

src/index.ts

markov00

Changes LGTM

# [17.0.0](v16.2.1...v17.0.0) (2020-01-30) ### Bug Fixes * **brush:** rotate brush on rotated charts ([#528](#528)) ([985ac21](985ac21)), closes [#527](#527) ### Features * text improvements ([#524](#524)) ([6e61700](6e61700)) * **listeners:** add seriesIdentifiers to element listeners ([#525](#525)) ([027d008](027d008)), closes [#419](#419) [#505](#505) ### BREAKING CHANGES * **listeners:** the `onElementOver` and the `onElementClick` are now called with `Array<[GeometryValue, SeriesIdentifier]>` instead of `Array<GeometryValue>` * renames in `Partition` charts— `Layers`: `fillLabel.formatter`->`fillLabel.valueFormatter`; type `FillLabel`-> `FillLabelConfig` Non-breaking changes: * feat: the values in linked labels are rendered, just like they have been in the sectors (formerly, the value could optionally be put in the link label accessor itself) * feat: font styling is possible separately for values: `valueFormatter` configs * test: opacity decrease example; coloring examples * feat: hierarchical data (`parent`, `sortIndex`) is made available to accessors (see stories, helpful with eg. coloring) * refactor: tighter types; other code improvements

markov00 · 2020-01-30T20:20:19Z

🎉 This PR is included in version 17.0.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

# [17.0.0](elastic/elastic-charts@v16.2.1...v17.0.0) (2020-01-30) ### Bug Fixes * **brush:** rotate brush on rotated charts ([opensearch-project#528](elastic/elastic-charts#528)) ([b6c3302](elastic/elastic-charts@b6c3302)), closes [opensearch-project#527](elastic/elastic-charts#527) ### Features * text improvements ([opensearch-project#524](elastic/elastic-charts#524)) ([f7b53c8](elastic/elastic-charts@f7b53c8)) * **listeners:** add seriesIdentifiers to element listeners ([opensearch-project#525](elastic/elastic-charts#525)) ([643ef1b](elastic/elastic-charts@643ef1b)), closes [opensearch-project#419](elastic/elastic-charts#419) [opensearch-project#505](elastic/elastic-charts#505) ### BREAKING CHANGES * **listeners:** the `onElementOver` and the `onElementClick` are now called with `Array<[GeometryValue, SeriesIdentifier]>` instead of `Array<GeometryValue>` * renames in `Partition` charts— `Layers`: `fillLabel.formatter`->`fillLabel.valueFormatter`; type `FillLabel`-> `FillLabelConfig` Non-breaking changes: * feat: the values in linked labels are rendered, just like they have been in the sectors (formerly, the value could optionally be put in the link label accessor itself) * feat: font styling is possible separately for values: `valueFormatter` configs * test: opacity decrease example; coloring examples * feat: hierarchical data (`parent`, `sortIndex`) is made available to accessors (see stories, helpful with eg. coloring) * refactor: tighter types; other code improvements

monfera added 4 commits January 23, 2020 18:02

refactor: open potential for per-word font styling

066b360

chore: minor rename of formatter to valueFormatter

8de8e0e

feat: valueFormatter

e43fa15

feat: opacity decrease example

a4f6352

monfera added the enhancement New feature or request label Jan 23, 2020

monfera self-assigned this Jan 23, 2020

markov00 added the wip work in progress label Jan 24, 2020

monfera added 4 commits January 24, 2020 11:27

feat: convenient value formatting in linked labels

f4e0634

chore: type simplifications

e66dfd0

Merge remote-tracking branch 'origin/master' into text-improvements

05331e3

monfera removed the wip work in progress label Jan 24, 2020

monfera requested a review from markov00 January 24, 2020 22:25

test: checking in snapshots

d7a8544

markov00 reviewed Jan 28, 2020

View reviewed changes

src/chart_types/partition_chart/layout/types/config_types.ts Show resolved Hide resolved

src/chart_types/partition_chart/layout/types/types.ts Show resolved Hide resolved

src/index.ts Show resolved Hide resolved

test: restored story view sizes

3073676

markov00 self-requested a review January 29, 2020 09:36

markov00 approved these changes Jan 29, 2020

View reviewed changes

monfera requested a review from markov00 January 29, 2020 12:28

monfera merged commit 6e61700 into elastic:master Jan 29, 2020

monfera deleted the text-improvements branch January 29, 2020 23:28

markov00 added the released Issue released publicly label Jan 30, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: text improvements#524

feat: text improvements#524
monfera merged 10 commits intoelastic:masterfrom
monfera:text-improvements

monfera commented Jan 23, 2020 •

edited

Loading

Uh oh!

codecov-io commented Jan 23, 2020 •

edited

Loading

Uh oh!

markov00 left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

markov00 left a comment

Uh oh!

markov00 commented Jan 30, 2020

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

monfera commented Jan 23, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Checklist

Uh oh!

codecov-io commented Jan 23, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

markov00 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

markov00 left a comment

Choose a reason for hiding this comment

Uh oh!

markov00 commented Jan 30, 2020

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

monfera commented Jan 23, 2020 •

edited

Loading

codecov-io commented Jan 23, 2020 •

edited

Loading