feat: allow individual series styling #170

emmacunningham · 2019-04-12T17:21:56Z

Summary

close #138

This PR introduces the ability to customize the styles for a series independently from the main chart theme (which is shared across all series). If both a custom individual series style and custom chart theme are defined, precedence will be given to the custom series style (though the chart theme can still be used to change styles for the series which do not have their own custom series styles).

Currently, this supports the same set of customizable styling options as the main chart theme, but can be extended to cover additional styles currently not implemented as customizable.

The following examples can be found under Styling in storybook:

Bars

currently supported customizable options:

border stroke width
border stroke color
border visibility
bars opacity (currrently not configurable from chart theme, but seems something that TSVB allows as a series-specific customization)

Lines

currently supported customizable options:

line stroke width
line visibility
line opacity
point visibility
point radius
point opacity

Areas

currently supported customizable options:

line stroke width
line visibility
line opacity
point visibility
point radius
point opacity
area visibility
area opacity

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
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 · 2019-04-12T17:26:36Z

Codecov Report

Merging #170 into master will increase coverage by 0.35%.
The diff coverage is 100%.

@@            Coverage Diff             @@
##           master     #170      +/-   ##
==========================================
+ Coverage   96.26%   96.62%   +0.35%     
==========================================
  Files          36       36              
  Lines        1849     1867      +18     
  Branches      239      253      +14     
==========================================
+ Hits         1780     1804      +24     
+ Misses         60       54       -6     
  Partials        9        9

Impacted Files	Coverage Δ
src/lib/themes/theme.ts	`100% <ø> (ø)`	⬆️
src/lib/series/specs.ts	`100% <ø> (ø)`	⬆️
src/state/utils.ts	`91.37% <100%> (+0.15%)`	⬆️
src/lib/series/rendering.ts	`96.11% <100%> (+6.53%)`	⬆️
...onents/react_canvas/utils/rendering_props_utils.ts	`100% <100%> (ø)`	⬆️

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 c53dc4d...a38db49. Read the comment docs.

emmacunningham · 2019-04-12T17:47:54Z

src/lib/themes/theme.ts

@@ -90,16 +90,24 @@ export interface Theme {
 export interface BarSeriesStyle {
  border: StrokeStyle & Visible;
 }
+
+export type CustomBarSeriesStyle = BarSeriesStyle & Partial<Opacity>;


This was created because BarSeriesStyle currently does not have a way to control opacity of the bar elements itself outside of the hover-effects; if we want to change this and add opacity as a property directly on the BarSeriesStyle interface, I can get rid of this extra type.

markov00 · 2019-04-15T14:46:40Z

src/lib/series/rendering.ts

@@ -38,6 +46,7 @@ export interface PointGeometry {
  };
  geometryId: GeometryId;
  value: GeometryValue;
+  seriesPointStyle?: PointStyle;


Since we don't have individual style for each point, I think we can move this to the AreaGeometry and LineGeometry. Will avoid having this style copied to all data point and we can avoid checking for visibility on each datapoint on a line (we can just check it in the first series cycle. What do you think?

moved seriesPointStyle to AreaGeometry and LineGeometry. also moved the series-related style computation to when we iterate over each line/area (before this was happening for every point, even though they will all have the same styles (strokeWidth, radius, opacity) per line/area).

see f465807.

markov00

Code LGTM, tested locally

# [3.11.0](v3.10.2...v3.11.0) (2019-04-16) ### Bug Fixes * remove old specs with changed ids ([#167](#167)) ([6c4f705](6c4f705)) ### Features * allow individual series styling ([#170](#170)) ([c780d98](c780d98))

markov00 · 2019-04-16T14:15:13Z

🎉 This PR is included in version 3.11.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

# [3.11.0](elastic/elastic-charts@v3.10.2...v3.11.0) (2019-04-16) ### Bug Fixes * remove old specs with changed ids ([opensearch-project#167](elastic/elastic-charts#167)) ([61128e6](elastic/elastic-charts@61128e6)) ### Features * allow individual series styling ([opensearch-project#170](elastic/elastic-charts#170)) ([b26f4c9](elastic/elastic-charts@b26f4c9))

emmacunningham added 8 commits April 11, 2019 08:32

feat: add seriesStyle? to series specs

059f9fd

feat: set up stories for series styling

4044c64

docs: clean up styling stories

c8c2679

feat(bars): use theme style for bars unless spec style exists

0599a25

feat(bars): set custom opacity for bar series

a61d156

feat(lines): set custom line series style

846b3fb

docs(styling): add toggle for chartTheme only

cf7e1f2

feat(areas): set custom area styles by series

a38db49

emmacunningham added enhancement New feature or request wip work in progress :data Data/series/scales related issue labels Apr 12, 2019

emmacunningham commented Apr 12, 2019

View reviewed changes

emmacunningham removed the wip work in progress label Apr 12, 2019

emmacunningham requested a review from markov00 April 12, 2019 17:48

docs(styling): add chart theme toggle to custom bar story

85fb124

markov00 mentioned this pull request Apr 12, 2019

Roadmap #3

Closed

93 tasks

emmacunningham added :chart Chart element related issue and removed :data Data/series/scales related issue labels Apr 12, 2019

markov00 reviewed Apr 15, 2019

View reviewed changes

refactor: move point style props computation to line/area series

f465807

markov00 approved these changes Apr 16, 2019

View reviewed changes

emmacunningham merged commit c780d98 into elastic:master Apr 16, 2019

markov00 added the released Issue released publicly label Apr 16, 2019

markov00 mentioned this pull request Apr 18, 2019

Preparation for TSVB timeseries chart replacement #64

Closed

19 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: allow individual series styling #170

feat: allow individual series styling #170

emmacunningham commented Apr 12, 2019 •

edited

Loading

codecov-io commented Apr 12, 2019

emmacunningham Apr 12, 2019

markov00 Apr 15, 2019

emmacunningham Apr 15, 2019

markov00 left a comment

markov00 commented Apr 16, 2019

feat: allow individual series styling #170

feat: allow individual series styling #170

Conversation

emmacunningham commented Apr 12, 2019 • edited Loading

Summary

Bars

Lines

Areas

Checklist

codecov-io commented Apr 12, 2019

Codecov Report

emmacunningham Apr 12, 2019

Choose a reason for hiding this comment

markov00 Apr 15, 2019

Choose a reason for hiding this comment

emmacunningham Apr 15, 2019

Choose a reason for hiding this comment

markov00 left a comment

Choose a reason for hiding this comment

markov00 commented Apr 16, 2019

emmacunningham commented Apr 12, 2019 •

edited

Loading