Skip to content

Commit

Permalink
feat: allow clearing series colors from memory (opensearch-project#899)
Browse files Browse the repository at this point in the history
  • Loading branch information
nickofthyme authored Nov 12, 2020
1 parent 3e2c739 commit e97f4ab
Show file tree
Hide file tree
Showing 8 changed files with 44 additions and 23 deletions.
2 changes: 1 addition & 1 deletion packages/osd-charts/api/charts.api.md
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
17 changes: 11 additions & 6 deletions packages/osd-charts/src/chart_types/xy_chart/utils/series.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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];
Expand Down
9 changes: 7 additions & 2 deletions packages/osd-charts/src/components/legend/legend_item.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,7 @@ interface LegendItemState {
/** @internal */
export class LegendListItem extends Component<LegendItemProps, LegendItemState> {
static displayName = 'LegendItem';
shouldClearPersistedColor = false;

colorRef = createRef<HTMLDivElement>();
state: LegendItemState = {
Expand Down Expand Up @@ -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}
/>
);
Expand Down
2 changes: 1 addition & 1 deletion packages/osd-charts/src/specs/settings.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
*/
Expand Down
8 changes: 4 additions & 4 deletions packages/osd-charts/src/state/actions/colors.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
Expand All @@ -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 };
}

Expand Down
16 changes: 11 additions & 5 deletions packages/osd-charts/src/state/chart_state.ts
Original file line number Diff line number Diff line change
Expand Up @@ -191,7 +191,7 @@ export interface ExternalEventsState {

/** @internal */
export interface ColorOverrides {
temporary: Record<SeriesKey, Color>;
temporary: Record<SeriesKey, Color | null>;
persisted: Record<SeriesKey, Color>;
}

Expand Down Expand Up @@ -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:
Expand Down
13 changes: 9 additions & 4 deletions packages/osd-charts/stories/legend/9_color_picker.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -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>
Expand Down

0 comments on commit e97f4ab

Please sign in to comment.