feat: add color option to use series color

[nickofthyme]

Summary

Add ColorVariant type with Series and None

/**
 * Color varients that are unique to `@elastic/charts`. These go beyond the standard
 * static color allocations.
 */
export const ColorVariant = Object.freeze({
  /**
   * Uses series color. Rather than setting a static color, this will use the
   * default series color for a given series.
   */
  Series: '__use__series__color__' as '__use__series__color__',
  /**
   * Uses empty color, similar to transparent.
   */
  None: '__use__empty__color__' as '__use__empty__color__',
});
export type ColorVariant = $Values<typeof ColorVariant>;

• Series option can be used for any series-related color in the theme object
• None option can be used to set a default color value to transparent
• Refactor stringToRGB method to use opacity and OpacityFn
• Add helper method to process ColorVariant
• Update theme color string with Color type
• Refactor renderer styles to allow for new ColorVariant and OpacityFn

The following Theme properties that used to be Color are now Color | ColorVariant

• PointStyle.stroke
• PointStyle.fill
• LineStyle.stroke
• AreaStyle.fill
• RectStyle.fill
• RectBorderStyle.stroke

Example Stories

Area

const customTheme: PartialTheme = {
  areaSeriesStyle: {
    point: {
      visible: true,
      radius: 10,
      fill: ColorVariant.Series,
      stroke: ColorVariant.None,
      opacity: 0.5,
    },
    area: {
      opacity: 0.2,
    },
    line: {
      visible: false,
    },
  },
};

Line

const customTheme: PartialTheme = {
  lineSeriesStyle: {
    point: {
      radius: 10,
      fill: ColorVariant.Series,
      stroke: ColorVariant.None,
    },
  },
};

Bar

const customTheme: PartialTheme = {
  barSeriesStyle: {
    rect: {
      fill: ColorVariant.None,
    },
    rectBorder: {
      visible: true,
      strokeWidth: 10,
      stroke: ColorVariant.Series,
    },
  },
};

Update tests

Checklist

• Any consumer-facing exports were added to src/index.ts (and stories only import from ../src except for test data & storybook)
• 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

[codecov-io]

Codecov Report

Merging #630 into master will increase coverage by 8.39%.
The diff coverage is 88.07%.

@@            Coverage Diff             @@
##           master     #630      +/-   ##
==========================================
+ Coverage   66.44%   74.84%   +8.39%     
==========================================
  Files         240      253      +13     
  Lines        7012     7242     +230     
  Branches     1340     1371      +31     
==========================================
+ Hits         4659     5420     +761     
+ Misses       2337     1798     -539     
- Partials       16       24       +8     

Impacted Files	Coverage Δ
..._types/xy_chart/renderer/canvas/primitives/rect.ts	5.35% <0.00%> (-0.42%)	⬇️
src/mocks/specs/specs.ts	72.58% <61.90%> (ø)
...art_types/partition_chart/layout/utils/d3_utils.ts	96.87% <96.15%> (+42.32%)	⬆️
...ypes/partition_chart/layout/viewmodel/viewmodel.ts	88.70% <100.00%> (+74.77%)	⬆️
...s/partition_chart/state/selectors/picked_shapes.ts	100.00% <100.00%> (+80.76%)	⬆️
...hart_types/xy_chart/renderer/canvas/styles/area.ts	100.00% <100.00%> (+60.00%)	⬆️
...chart_types/xy_chart/renderer/canvas/styles/bar.ts	100.00% <100.00%> (+84.61%)	⬆️
...hart_types/xy_chart/renderer/canvas/styles/line.ts	100.00% <100.00%> (+60.00%)	⬆️
...art_types/xy_chart/renderer/canvas/styles/point.ts	100.00% <100.00%> (+75.00%)	⬆️
src/mocks/index.ts	100.00% <100.00%> (ø)
... and 44 more

---

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 2c1d224...a20be00. Read the comment docs.

[markov00]

Overall looks good, I've added few comments.
I've some doubts on this weird looking render: I wasn't able to reproduce the same image on chrome from a running storybook. Seems like we are missing the lineCap='square' when rendering the border

[markov00]

What is the benefit of having a generic type here? I think we don't want that to have someone using a different generic value other than Color here like StrokeStyle<number>

[nickofthyme]

Yeah I didn't need this but I thought this was shared between more interfaces on the theme.

The intent was to be able to add the ColorVariant as an option for color. But in some places in the theme that doesn't apply.

[nickofthyme]

Thanks for pointing out the linecap issue. I saw that in safari and firefox. Looks to be fixed with this 80da4fc.

[markov00]

Changes LGTM.
Ok to merge after fixing the rendering error on the debug react (caused by the linecap)