feat: allow individual series styling #170
Conversation
emmacunningham
added
enhancement
Codecov Report
@@ 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
Continue to review full report at Codecov.
|
| @@ -90,16 +90,24 @@ export interface Theme { | |||
| export interface BarSeriesStyle { | |||
| border: StrokeStyle & Visible; | |||
| } | |||
|
|
|||
| export type CustomBarSeriesStyle = BarSeriesStyle & Partial<Opacity>; | |||
There was a problem hiding this comment.
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.
emmacunningham
added
:chart
src/lib/series/rendering.ts
Outdated
| @@ -38,6 +46,7 @@ export interface PointGeometry { | |||
| }; | |||
| geometryId: GeometryId; | |||
| value: GeometryValue; | |||
| seriesPointStyle?: PointStyle; | |||
There was a problem hiding this comment.
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?
There was a problem hiding this comment.
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.
|
🎉 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))
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
Stylingin storybook:Bars
currently supported customizable options:
Lines
currently supported customizable options:
Areas
currently supported customizable options:
Checklist
Use
strikethroughsto remove checklist items you don't feel are applicable to this PR.