feat: allow clearing colors from memory

api/charts.api.md

@@ -1048,7 +1048,7 @@ export type LegendColorPicker = ComponentType<LegendColorPickerProps>;
 export interface LegendColorPickerProps {
     anchor: HTMLElement;
     color: Color;
-    onChange: (color: Color) => void;
+    onChange: (color: Color | null) => void;
     onClose: () => void;
     seriesIdentifier: SeriesIdentifier;
 }

src/chart_types/xy_chart/utils/series.ts

@@ -694,16 +694,21 @@ function getHighestOverride(
   customColors: Map<SeriesKey, Color>,
   overrides: ColorOverrides,
 ): Color | undefined {
-  let color: Color | undefined = overrides.temporary[key];
+  const tempColor: Color | undefined | null = overrides.temporary[key];
 
-  if (color) {
-    return color;
+  if (tempColor) {
+    return tempColor;
   }
 
-  color = customColors.get(key);
+  const customColor: Color | undefined | null = customColors.get(key);
 
-  if (color) {
-    return color;
+  if (customColor) {
+    return customColor;
+  }
+
+  if (tempColor === null) {
+    // Use default color when temporary and custom colors are null
+    return;
   }
 
   return overrides.persisted[key];

src/components/legend/legend_item.tsx

@@ -110,6 +110,7 @@ interface LegendItemState {
 /** @internal */
 export class LegendListItem extends Component<LegendItemProps, LegendItemState> {
   static displayName = 'LegendItem';
+  shouldClearPersistedColor = false;
 
   colorRef = createRef<HTMLDivElement>();
   state: LegendItemState = {
@@ -183,17 +184,21 @@ export class LegendListItem extends Component<LegendItemProps, LegendItemState>
     const { seriesIdentifier, color } = item;
 
     const handleClose = () => {
-      setPersistedColorAction(seriesIdentifier.key, color);
+      setPersistedColorAction(seriesIdentifier.key, this.shouldClearPersistedColor ? null : color);
       clearTemporaryColorsAction();
       this.toggleIsOpen();
     };
+    const handleChange = (c: Color | null) => {
+      this.shouldClearPersistedColor = c === null;
+      setTemporaryColorAction(seriesIdentifier.key, c);
+    };
     if (ColorPicker && this.state.isOpen && this.colorRef.current) {
       return (
         <ColorPicker
           anchor={this.colorRef.current}
           color={color}
           onClose={handleClose}
-          onChange={(color: Color) => setTemporaryColorAction(seriesIdentifier.key, color)}
+          onChange={handleChange}
           seriesIdentifier={seriesIdentifier}
         />
       );

src/specs/settings.tsx

@@ -248,7 +248,7 @@ export interface LegendColorPickerProps {
   /**
    * Callback to update temporary color state
    */
-  onChange: (color: Color) => void;
+  onChange: (color: Color | null) => void;
   /**
    * Series id for the active series
    */

src/state/actions/colors.ts

@@ -36,13 +36,13 @@ interface ClearTemporaryColors {
 interface SetTemporaryColor {
   type: typeof SET_TEMPORARY_COLOR;
   key: SeriesKey;
-  color: Color;
+  color: Color | null;
 }
 
 interface SetPersistedColor {
   type: typeof SET_PERSISTED_COLOR;
   key: SeriesKey;
-  color: Color;
+  color: Color | null;
 }
 
 /** @internal */
@@ -51,12 +51,12 @@ export function clearTemporaryColors(): ClearTemporaryColors {
 }
 
 /** @internal */
-export function setTemporaryColor(key: SeriesKey, color: Color): SetTemporaryColor {
+export function setTemporaryColor(key: SeriesKey, color: Color | null): SetTemporaryColor {
   return { type: SET_TEMPORARY_COLOR, key, color };
 }
 
 /** @internal */
-export function setPersistedColor(key: SeriesKey, color: Color): SetPersistedColor {
+export function setPersistedColor(key: SeriesKey, color: Color | null): SetPersistedColor {
   return { type: SET_PERSISTED_COLOR, key, color };
 }
 

src/state/chart_state.ts

@@ -191,7 +191,7 @@ export interface ExternalEventsState {
 
 /** @internal */
 export interface ColorOverrides {
-  temporary: Record<SeriesKey, Color>;
+  temporary: Record<SeriesKey, Color | null>;
   persisted: Record<SeriesKey, Color>;
 }
 
@@ -399,10 +399,16 @@ export const chartStoreReducer = (chartId: string) => {
           ...state,
           colors: {
             ...state.colors,
-            persisted: {
-              ...state.colors.persisted,
-              [action.key]: action.color,
-            },
+            persisted:
+              action.color !== null
+                ? {
+                    ...state.colors.persisted,
+                    [action.key]: action.color,
+                  }
+                : (() => {
+                    const { [action.key]: removed, ...others } = state.colors.persisted;
+                    return others;
+                  })(),
           },
         };
       default:

stories/legend/9_color_picker.tsx

@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import { EuiColorPicker, EuiWrappingPopover, EuiButton, EuiSpacer } from '@elastic/eui';
+import { EuiColorPicker, EuiWrappingPopover, EuiButton, EuiSpacer, EuiFlexItem, EuiButtonEmpty } from '@elastic/eui';
 import { action } from '@storybook/addon-actions';
 import React, { useState } from 'react';
 
@@ -41,14 +41,19 @@ export const Example = () => {
         [seriesIdentifier.key]: color,
       });
     };
-    const handleChange = (color: Color) => {
-      onChange(color);
-      onChangeAction(color);
+    const handleChange = (c: Color | null) => {
+      onChange(c);
+      onChangeAction(c);
     };
     return (
       <EuiWrappingPopover isOpen button={anchor} closePopover={handleClose} anchorPosition="leftCenter">
         <EuiColorPicker display="inline" color={color} onChange={handleChange} />
         <EuiSpacer size="m" />
+        <EuiFlexItem grow={false}>
+          <EuiButtonEmpty size="s" onClick={() => handleChange(null)}>
+            Clear color
+          </EuiButtonEmpty>
+        </EuiFlexItem>
         <EuiButton fullWidth size="s" onClick={handleClose}>
           Done
         </EuiButton>