feat(series): set custom series colors through spec prop

[emmacunningham]

Summary

close #39

This PR adds the ability to specify a custom series colors through a prop on the series spec.

Each series can now receive an optional prop customSeriesColor: Map<DataSeriesColorValues, string>, where the key is used to identify the series and the string is a representation of the color. Under the Stylings section of Storyboard, there is an example of this in action.

The color picker in the legend is also still usable to customize a series color; on color picker update, the customSeriesColor prop for the corresponding series is updated.

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]

Codecov Report

Merging #95 into master will increase coverage by 0.56%.
The diff coverage is 100%.

@@            Coverage Diff             @@
##           master      #95      +/-   ##
==========================================
+ Coverage   88.07%   88.63%   +0.56%     
==========================================
  Files          28       28              
  Lines        1132     1144      +12     
  Branches      118      118              
==========================================
+ Hits          997     1014      +17     
+ Misses        125      120       -5     
  Partials       10       10

Impacted Files	Coverage Δ
src/lib/series/specs.ts	100% <ø> (ø)	⬆️
src/state/utils.ts	72.72% <100%> (+1.93%)	⬆️
src/lib/series/series.ts	92.96% <100%> (-0.11%)	⬇️
src/state/chart_state.ts	98.94% <100%> (+0.03%)	⬆️
src/lib/axes/canvas_text_bbox_calculator.ts	100% <0%> (+31.25%)	⬆️

---

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 dcee68e...2ab4a66. Read the comment docs.

[markov00]

Code LGTM. Tested locally and works fine
One minor thing to notice: if, in the future we want to to have a sort of JSON schema for the spec, how do you think we can serialize Map<DataSeriesColorsValues, string>

[emmacunningham]

@markov00 for serializing the Map<DataSeriesColorsValues, string> prop: there are a few options I've thought about. The current implementation has the advantage that it makes it easier for the downstream user to define than need to know more specifics about the internals of the library. But if we want to have a JSON schema for the spec, then the user could define an Array of:

{
  dataSeriesColorValues: DataSeriesColorValues;
  color: string
}

This still allows the user to define in terms of DataSeriesColorValues (instead of needing to know more about the chart internals and forming the string series key themselves) while providing a bit of type safety to how they are defining these so that we at least get both a specId and colorValues to uniquely identify the series. We would need to then change the way that updating the props works; because currently it is a map, we can just set the customSeriesColors map using the key when there is an update. Using this new data structure, we'd need to iterate through the array for the spec and then find if a config with a matching DataSeriesColorValues exists.

Another option would be to have this prop be an object (one advantage is that the updating logic would remain about the same, unlike the option above):

{
  [seriesKey: string]: string;
}

where the seriesKey property is the stringified form of the DataSeriesColorValues and the value is string representing color. The drawback to this is that the user would need to be able to form the seriesKey, though we do have a function that they could call on DataSeriesColorValues to generate this string.

[markov00]

🎉 This PR is included in version 3.1.0 🎉

The release is available on:

• GitHub release
• npm package (@latest dist-tag)

Your semantic-release bot 📦🚀