feat: allow clearing series colors from memory (opensearch-project#899)

AMoo-Miki · Nov 12, 2020 · e97f4ab · e97f4ab
1 parent 3e2c739
commit e97f4ab
Show file tree

Hide file tree

Showing 8 changed files with 44 additions and 23 deletions.
diff --git a/packages/osd-charts/api/charts.api.md b/packages/osd-charts/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;
 }

diff --git a/...ies-test-ts-legend-stories-should-render-color-picker-on-mouse-click-1-snap.png b/...ies-test-ts-legend-stories-should-render-color-picker-on-mouse-click-1-snap.png
diff --git a/packages/osd-charts/src/chart_types/xy_chart/utils/series.ts b/packages/osd-charts/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];

diff --git a/packages/osd-charts/src/components/legend/legend_item.tsx b/packages/osd-charts/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}
  />
  );

diff --git a/packages/osd-charts/src/specs/settings.tsx b/packages/osd-charts/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
  */

diff --git a/packages/osd-charts/src/state/actions/colors.ts b/packages/osd-charts/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 };
 }
 

diff --git a/packages/osd-charts/src/state/chart_state.ts b/packages/osd-charts/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:

diff --git a/packages/osd-charts/stories/legend/9_color_picker.tsx b/packages/osd-charts/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>