fix: persisted color via color picker (#1265)

elastic · Jul 28, 2021 · 4205a7f · 4205a7f
1 parent 156662a
commit 4205a7f
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 7 deletions.
diff --git a/packages/charts/src/state/chart_state.ts b/packages/charts/src/state/chart_state.ts
@@ -382,13 +382,20 @@ export const chartStoreReducer = (chartId: string) => {
           },
         };
       case SET_PERSISTED_COLOR:
+        const persisted = action.keys.reduce<Record<string, Color>>((acc, curr) => {
+          if (action.color) {
+            acc[curr] = action.color;
+          } else {
+            delete acc[curr];
+          }
+          return acc;
+        }, state.colors.persisted);
+
         return {
           ...state,
           colors: {
             ...state.colors,
-            persisted: Object.fromEntries(
-              Object.entries(state.colors.persisted).filter(([key]) => !action.keys.includes(key)),
-            ),
+            persisted,
           },
         };
       default:

diff --git a/stories/legend/11_legend_actions.tsx b/stories/legend/11_legend_actions.tsx
@@ -16,6 +16,9 @@ import {
   EuiSpacer,
   EuiButton,
   PopoverAnchorPosition,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiButtonIcon,
 } from '@elastic/eui';
 import { boolean } from '@storybook/addon-knobs';
 import React, { useState } from 'react';
@@ -127,9 +130,30 @@ export const renderEuiColorPicker = (anchorPosition: PopoverAnchorPosition): Leg
   <EuiWrappingPopover isOpen button={anchor} closePopover={onClose} anchorPosition={anchorPosition} ownFocus>
     <EuiColorPicker display="inline" color={color} onChange={onChange} />
     <EuiSpacer size="m" />
-    <EuiButton fullWidth size="s" onClick={onClose}>
-      Done
-    </EuiButton>
+    <EuiFlexGroup gutterSize="none" alignItems="center" direction="row">
+      <EuiFlexItem grow={false}>
+        <EuiButton size="s" fill onClick={onClose} title="Confirm color selection">
+          Done
+        </EuiButton>
+      </EuiFlexItem>
+
+      <EuiFlexItem>
+        <EuiSpacer size="m" />
+      </EuiFlexItem>
+
+      <EuiFlexItem grow={false}>
+        <EuiButtonIcon
+          display="base"
+          iconType="cross"
+          color="danger"
+          title="Clear color selection"
+          onClick={() => {
+            onChange(null);
+            onClose();
+          }}
+        />
+      </EuiFlexItem>
+    </EuiFlexGroup>
   </EuiWrappingPopover>
 );
 

diff --git a/stories/line/14_point_shapes.tsx b/stories/line/14_point_shapes.tsx
@@ -66,7 +66,7 @@ export const Example = () => {
         yScaleType={ScaleType.Linear}
         xAccessor={0}
         yAccessors={[1]}
-        color="lightgray"
+        color="lightgray" // never overridden
         pointStyleAccessor={(datum) => {
           return {
             shape: shapes[datum.datum[2] % shapes.length],