feat(legend): allow color picker component

[nickofthyme]

Summary

Add option to pass color picker component to chart.

Closes #538

Elastic charts will maintain the color selection in memory beyond chart updates. However, to persist colors beyond browser refresh the consumer would need to manage the color state and use the color prop on the SeriesSpec to assign a color via the SeriesColorAccessor.

with FunctionComponent<LegendColorPickerProps>

<Chart>
  <Settings
    showLegend
    legendColorPicker={({ anchor, onClose, color, seriesIdentifier }) => (
      <MyCustomColorPicker
        anchor={anchor}
        onClose={onClose}
        color={color}
        seriesIdentifier={seriesIdentifier}
      />
    )}
  />
</Chart>

or with Component<LegendColorPickerProps>

<Chart>
  <Settings
    showLegend
    legendColorPicker={MyCustomColorPicker}
  />
</Chart>

where

export interface LegendColorPickerProps {
  /**
   * Anchor used to position picker
   */
  anchor: HTMLDivElement;
  /**
   * Current color of the given series
   */
  color: string;
  /**
   * Callback to close color picker and set persistent color
   */
  onClose: () => void;
  /**
   * Callback to update temporary color state
   */
  onChange: (color: string) => void;
  /**
   * Series id for the active series
   */
  seriesIdentifier: XYChartSeriesIdentifier;
}
export type LegendColorPicker = ComponentType<LegendColorPickerProps>;

The button argument is the legend item that should be used as the button prop for EuiPopover as the positioning reference.

Remove seriesColorOverrides logic which was deprecated, now unused, back when the color picker was removed from elastic charts.

Demo usage with EuiColorPicker and EuiWrappingPopover

http://localhost:9001/?path=/story/legend--color-picker

Code

elastic-charts/stories/legend/9_color_picker.tsx

Lines 13 to 58 in 400a70b

	export const example = () => {
	const [colors, setColors] = useState<Record<SeriesKey, string>>({});
	const renderColorPicker: LegendColorPicker = ({ anchor, color, onClose, seriesIdentifier, onChange }) => {
	const handleClose = () => {
	onClose();
	onCloseAction();
	setColors({
	...colors,
	[seriesIdentifier.key]: color,
	});
	};
	const handleChange = (color: string) => {
	onChangeAction(color);
	onChange(color);
	};
	return (
	<EuiWrappingPopover isOpen button={anchor} closePopover={handleClose}>
	<EuiColorPicker display="inline" color={color} onChange={handleChange}></EuiColorPicker>
	<EuiSpacer size="m" />
	<EuiButton fullWidth size="s" onClick={handleClose}>
	Done
	</EuiButton>
	</EuiWrappingPopover>
	);
	};
	return (
	<Chart className="story-chart">
	<Settings showLegend legendColorPicker={renderColorPicker} />
	<Axis id="bottom" position={Position.Bottom} title="Bottom axis" showOverlappingTicks={true} />
	<Axis id="left2" title="Left axis" position={Position.Left} tickFormat={(d: any) => Number(d).toFixed(2)} />
	<BarSeries
	id="bars 1"
	xScaleType={ScaleType.Linear}
	yScaleType={ScaleType.Linear}
	xAccessor="x"
	yAccessors={['y']}
	splitSeriesAccessors={['g']}
	data={BARCHART_1Y1G}
	color={({ key }) => colors[key] ?? null}
	/>
	</Chart>
	);
	};

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

[markov00]

I've added few comments that needs to be addressed before going on with this feature

[markov00]

LGTM, I've added few minor comments.
I think it will be great if you can also add a small example of the picker in storybook (maybe, you can just wait for #557 to be merged before adding it)

[codecov-io]

Codecov Report

❗ No coverage uploaded for pull request base (master@e376620). Click here to learn what that means.
The diff coverage is 90.9%.

@@            Coverage Diff            @@
##             master     #545   +/-   ##
=========================================
  Coverage          ?   72.09%           
=========================================
  Files             ?      213           
  Lines             ?     6197           
  Branches          ?     1185           
=========================================
  Hits              ?     4468           
  Misses            ?     1710           
  Partials          ?       19

Impacted Files	Coverage Δ
src/utils/geometry.ts	100% <ø> (ø)
...art_types/xy_chart/annotations/annotation_utils.ts	100% <ø> (ø)
src/state/chart_state.ts	85.45% <ø> (ø)
...s/xy_chart/state/selectors/get_series_color_map.ts	100% <ø> (ø)
src/components/legend/legend_item.tsx	95.71% <0%> (ø)
src/specs/settings.tsx	100% <100%> (ø)
src/chart_types/xy_chart/rendering/rendering.ts	97.39% <100%> (ø)
src/chart_types/xy_chart/legend/legend.ts	92.1% <100%> (ø)
src/chart_types/xy_chart/state/utils.ts	96.38% <100%> (ø)
src/state/actions/colors.ts	88.88% <100%> (ø)
... and 2 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 e376620...5cf51e4. Read the comment docs.

[markov00]

Changes LGTM, now I'm going through the manual test

[markov00]

I think we should rethink the implementation, see my comments below

[nickofthyme]

jenkins retest this

[markov00]

Everything looks great! Thanks for the cleanup on the docs also.
I've left just some very minor details comments

[markov00]

customSeriesColors => color or customColors

[markov00]

Suggested change

	clearTemporaryColors: () => void;
	setTemporaryColor: (key: SeriesKey, color: string) => void;
	setPersistedColor: (key: SeriesKey, color: string) => void;
	clearTemporaryColors: typeof clearTemporaryColors;
	setTemporaryColor: typeof setTemporaryColor;
	setPersistedColor: typeof setPersistedColor;

[nickofthyme]

I tried this but for some reason there was a type error last time, idk but it's fixed 👍

[markov00]

Suggested change

	color: string;
	color: Color;

[markov00]

Suggested change

	onChange: (color: string) => void;
	onChange: (color: Color) => void;

[markov00]

Please add a description of the mechanism here:

example.story = {
  parameters: {
    info: {
      text: 'Elastic charts will maintain the color selection in memory beyond chart updates. However, to persist colors beyond browser refresh the consumer would need to manage the color state and use the color prop on the` SeriesSpec` to assign a color via the `SeriesColorAccessor`.',
    },
  },
};

[markov00]

nit: just to keep consistency on the code between the handleChange and the handleClose

Suggested change

	onChangeAction(color);
	onChange(color);
	onChange(color);
	onChangeAction(color);