refactor: series identifications throughout library

[nickofthyme]

Summary

BREAKING CHANGE: GeometryId is now SeriesIdentifier (see below for type)

customSeriesColors prop on SeriesSpec which used to take a CustomSeriesColorsMap but now expects a CustomSeriesColors type

The CustomSeriesColors gives the user flexibility and full insight into what series is being assigned a given color.

export type SeriesColorsArray = string[]; // array of colors
export type SeriesColorAccessorFn = (seriesIdentifier: SeriesIdentifier) => string | null;
export type CustomSeriesColors = SeriesColorsArray | SeriesColorAccessorFn;

Returning null will use the default color value.

LegendItemListener now passes the SeriesIdentifier type as the first callback argument

- export type LegendItemListener = (dataSeriesIdentifiers: DataSeriesColorsValues | null) => void;
+ export type LegendItemListener = (series: SeriesIdentifier | null) => void;

Fixes: #325

If it involves visual changes include a screenshot or gif.

From now on we should use the more specific SeriesIdentifier type below in place of GeometryId to identify a particular series. This gives all the information to the consumer of the Chart to change anything for a given series (i.e. name, color, styles, hide/show, etc.)

export interface SeriesIdentifier {
  key: string;
  specId: SpecId;
  yAccessor: string | number;
  splitAccessors: Map<string | number, string | number>;
  seriesKeys: any[];
}

Before

const barCustomSeriesColors: CustomSeriesColorsMap = new Map();
const barDataSeriesColorValues: DataSeriesColorsValues = {
  colorValues: ['cloudflare.com', 'direct-cdn', 'y2'],
  specId: getSpecId('bars'),
};
barCustomSeriesColors.set(barDataSeriesColorValues, 'aquamarine');

const data = [
  { x: 0, g1: 'cdn.google.com', g2: 'direct-cdn', y1: 1, y2: 4 },
  // ...
]

return (
  <Chart>
    {/* ... */}
    <BarSeries
      id={getSpecId('bars')}
      xAccessor="x"
      yAccessors={['y1', 'y2']}
      splitSeriesAccessors={['g1', 'g2']}
      customSeriesColors={barCustomSeriesColors}
      data={data}
    />
  </Chart>
);

After

As function accessor

const barSeriesColorAccesor: CustomSeriesColors = ({ specId, yAccessor, splitAccessors }) => {
  if (
    specId === getSpecId('bars') &&
    yAccessor === 'y1' &&
    splitAccessors.get('g1') === 'cloudflare.com' &&
    splitAccessors.get('g2') === 'direct-cdn'
  ) {
    return 'aquamarine';
  }

  return null;
};

const data = [
  { x: 0, g1: 'cdn.google.com', g2: 'direct-cdn', y1: 1, y2: 4 },
  // ...
]

return (
  <Chart>
    {/* ... */}
    <BarSeries
      id={getSpecId('bars')}
      xAccessor="x"
      yAccessors={['y1', 'y2']}
      splitSeriesAccessors={['g1', 'g2']}
      customSeriesColors={barSeriesColorAccesor}
      data={data}
    />
  </Chart>
);

As array of colors

The array of colors will chose a color from the array based on the count index. In the example below the first series in the spec with be 'red', second 'white' and so on.

const data = [
  { x: 0, g1: 'cdn.google.com', g2: 'direct-cdn', y1: 1, y2: 4 },
  // ...
]

return (
  <Chart>
    {/* ... */}
    <BarSeries
      id={getSpecId('bars')}
      xAccessor="x"
      yAccessors={['y1', 'y2']}
      splitSeriesAccessors={['g1', 'g2']}
      customSeriesColors={['red', 'white', 'blue']}
      data={data}
    />
  </Chart>
);

Internally all series are now identified with the seriesKey generated from the getSeriesKey method.

Change naming for all series to use SeriesIdentifier and SeriesIdentifier.key

• Tooltip series visbility @rshen91 (Hide series on tooltip #325)
• Custom series colors @nickofthyme (Allow series color to be defined at spec level #179)
• Custom series and sub-series naming/labels @nickofthyme (Allow customization of sub series names #245)
• Check to remove DataSeriesColorValues (renamed SeriesCollectionValue)

Closes #325, #179 and #245

Checklist

• 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]

Codecov Report

Merging #419 into master will decrease coverage by 0.38%.
The diff coverage is 80.07%.

@@            Coverage Diff             @@
##           master     #419      +/-   ##
==========================================
- Coverage   84.11%   83.72%   -0.39%     
==========================================
  Files         168      169       +1     
  Lines        4784     4849      +65     
  Branches      917      970      +53     
==========================================
+ Hits         4024     4060      +36     
- Misses        744      774      +30     
+ Partials       16       15       -1

Impacted Files	Coverage Δ
src/specs/settings.tsx	100% <ø> (ø)	⬆️
..._types/xy_chart/renderer/canvas/bar_geometries.tsx	25.71% <ø> (ø)	⬆️
src/index.ts	100% <ø> (ø)	⬆️
...chart_types/xy_chart/utils/stacked_series_utils.ts	97.53% <ø> (ø)	⬆️
src/state/chart_state.ts	79.59% <ø> (ø)	⬆️
src/mocks/series/series.ts	81.96% <ø> (ø)	⬆️
src/utils/themes/theme.ts	100% <ø> (ø)	⬆️
...rt_types/xy_chart/utils/nonstacked_series_utils.ts	100% <ø> (ø)	⬆️
src/chart_types/xy_chart/utils/specs.ts	100% <ø> (ø)	⬆️
src/chart_types/xy_chart/renderer/dom/tooltips.tsx	69.69% <0%> (-2.18%)	⬇️
... and 26 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 3013c41...37e71e0. Read the comment docs.

[markov00]

Blocking this until we fix the fact that different SeriesIdentifiers can possibly have the same Key

[nickofthyme]

What is __webpack_hash__ ? An autogenerated hash?

[markov00]

???????? never so that before

[markov00]

I think you did it :D

[nickofthyme]

Really???? Idk @rshen91 do you know what this is ☝️?

[rshen91]

I'm not sure what it is but I'm sure I accidentally imported it or something 😅.

[rshen91]

Commit 74aa3f5 to remove!

[nickofthyme]

Yaaay!!! 🎉

[markov00]

🎉 This PR is included in version 15.0.0 🎉

The release is available on:

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

Your semantic-release bot 📦🚀