feat(legend): allow color picker component

.playground/playground.tsx

@@ -1,43 +1,54 @@
 import React from 'react';
-import { Chart, ScaleType, Position, Axis, getAxisId, timeFormatter, getSpecId, AreaSeries, Settings } from '../src';
-import { KIBANA_METRICS } from '../src/utils/data_samples/test_dataset_kibana';
-export class Playground extends React.Component {
-  chartRef: React.RefObject<Chart> = React.createRef();
-  onBrushEnd = (min: number, max: number) => {
-    // eslint-disable-next-line no-console
-    console.log({ min, max });
+import { Chart, ScaleType, Settings, BarSeries, DataGenerator, LegendColorPickerFn, Axis } from '../src';
+
+const dg = new DataGenerator();
+
+export class Playground extends React.Component<{}, { isSunburstShown: boolean }> {
+  state: any = {
+    colors: ['red'],
+  };
+
+  data = dg.generateGroupedSeries(10, 4, 'split');
+  customColor = '#0c7b93';
+  container?: HTMLDivElement;
+
+  legendColorPickerFn: LegendColorPickerFn = (anchor, onClose) => {
+    return (
+      <div id="colorPicker">
+        <span>Custom Color Picker</span>
+        <button
+          id="change"
+          onClick={() => {
+            this.setState<any>({ colors: [this.customColor] });
+            onClose();
+          }}
+        >
+          {this.customColor}
+        </button>
+        <button id="close" onClick={onClose}>
+          close
+        </button>
+      </div>
+    );
   };
 
   render() {
     return (
       <>
         <div className="chart">
-          <Chart className={'story-chart'}>
-            <Settings showLegend={true} />
-            <Axis
-              id={getAxisId('bottom')}
-              title={'timestamp per 1 minute'}
-              position={Position.Bottom}
-              showOverlappingTicks={true}
-              tickFormat={timeFormatter('HH:mm')}
-            />
-            <Axis
-              id={getAxisId('left')}
-              title={KIBANA_METRICS.metrics.kibana_os_load[0].metric.title}
-              position={Position.Left}
-              tickFormat={(d) => Number(d).toFixed(2)}
-            />
-
-            <AreaSeries
-              id={getSpecId('area')}
-              xScaleType={ScaleType.Time}
+          <Chart>
+            <Axis id="bottom" position="bottom" />
+            <Axis id="left" position="left" />
+            <Settings showLegend legendColorPicker={this.legendColorPickerFn} />
+            <BarSeries
+              id="areas"
+              xScaleType={ScaleType.Linear}
               yScaleType={ScaleType.Linear}
-              xAccessor={0}
-              yAccessors={[1]}
-              y0Accessors={[2]}
-              data={KIBANA_METRICS.metrics.kibana_os_load[0].data.map((d) => {
-                return [...d, d[1] - 10];
-              })}
+              xAccessor={'x'}
+              yAccessors={['y']}
+              splitSeriesAccessors={['g']}
+              customSeriesColors={this.state.colors}
+              data={this.data}
             />
           </Chart>
         </div>

package.json

@@ -56,6 +56,7 @@
     "@babel/preset-react": "^7.8.3",
     "@commitlint/cli": "^8.1.0",
     "@commitlint/config-conventional": "^8.1.0",
+    "@elastic/datemath": "^5.0.2",
     "@elastic/eui": "^16.0.1",
     "@mdx-js/loader": "^1.5.5",
     "@semantic-release/changelog": "^3.0.6",

scripts/setup_enzyme.ts

@@ -2,3 +2,5 @@ import { configure } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 
 configure({ adapter: new Adapter() });
+
+process.env.RNG_SEED = 'jest-unit-tests';

src/chart_types/xy_chart/state/selectors/get_tooltip_values_highlighted_geoms.ts

@@ -36,6 +36,10 @@ const EMPTY_VALUES = Object.freeze({
   highlightedGeometries: [],
 });
 
+export interface TooltipData {
+  header: TooltipValue | null;
+  values: TooltipValue[];
+}
 export interface TooltipAndHighlightedGeoms {
   tooltip: TooltipInfo;
   highlightedGeometries: IndexedGeometry[];

src/chart_types/xy_chart/state/utils.test.ts

@@ -327,11 +327,10 @@ describe('Chart State utils', () => {
     // 4 groups generated
     const data = dg.generateGroupedSeries(50, 4);
     const targetKey = 'spec{bar1}yAccessor{y}splitAccessors{g-b}';
-    const seriesColorOverrides = new Map([[targetKey, 'blue']]);
 
     describe('empty series collection and specs', () => {
       it('it should return an empty map', () => {
-        const actual = getCustomSeriesColors(MockSeriesSpecs.empty(), MockSeriesCollection.empty(), new Map());
+        const actual = getCustomSeriesColors(MockSeriesSpecs.empty(), MockSeriesCollection.empty());
 
         expect(actual.size).toBe(0);
       });
@@ -343,7 +342,7 @@ describe('Chart State utils', () => {
         const barSpec2 = MockSeriesSpec.bar({ id: specId2, data });
         const barSeriesSpecs = MockSeriesSpecs.fromSpecs([barSpec1, barSpec2]);
         const barSeriesCollection = MockSeriesCollection.fromSpecs(barSeriesSpecs);
-        const actual = getCustomSeriesColors(barSeriesSpecs, barSeriesCollection, new Map());
+        const actual = getCustomSeriesColors(barSeriesSpecs, barSeriesCollection);
 
         expect(actual.size).toBe(0);
       });
@@ -356,7 +355,7 @@ describe('Chart State utils', () => {
         const barSeriesCollection = MockSeriesCollection.fromSpecs(barSeriesSpecs);
 
         it('it should return color from customSeriesColors array', () => {
-          const actual = getCustomSeriesColors(barSeriesSpecs, barSeriesCollection, new Map());
+          const actual = getCustomSeriesColors(barSeriesSpecs, barSeriesCollection);
 
           expect(actual.size).toBe(4);
           barSeriesCollection.forEach(({ seriesIdentifier: { specId, key } }) => {
@@ -368,22 +367,6 @@ describe('Chart State utils', () => {
             }
           });
         });
-
-        it('it should return color from seriesColorOverrides', () => {
-          const actual = getCustomSeriesColors(barSeriesSpecs, barSeriesCollection, seriesColorOverrides);
-
-          expect(actual.size).toBe(4);
-          barSeriesCollection.forEach(({ seriesIdentifier: { specId, key } }) => {
-            const color = actual.get(key);
-            if (key === targetKey) {
-              expect(color).toBe('blue');
-            } else if (specId === specId1) {
-              expect(customSeriesColors).toContainEqual(color);
-            } else {
-              expect(color).toBeUndefined();
-            }
-          });
-        });
       });
 
       describe('with customSeriesColors function', () => {
@@ -400,18 +383,11 @@ describe('Chart State utils', () => {
         const barSeriesCollection = MockSeriesCollection.fromSpecs(barSeriesSpecs);
 
         it('it should return color from customSeriesColors function', () => {
-          const actual = getCustomSeriesColors(barSeriesSpecs, barSeriesCollection, new Map());
+          const actual = getCustomSeriesColors(barSeriesSpecs, barSeriesCollection);
 
           expect(actual.size).toBe(1);
           expect(actual.get(targetKey)).toBe('aquamarine');
         });
-
-        it('it should return color from seriesColorOverrides', () => {
-          const actual = getCustomSeriesColors(barSeriesSpecs, barSeriesCollection, seriesColorOverrides);
-
-          expect(actual.size).toBe(1);
-          expect(actual.get(targetKey)).toBe('blue');
-        });
       });
     });
   });

src/chart_types/xy_chart/state/utils.ts

@@ -123,24 +123,19 @@ export function updateDeselectedDataSeries(
 export function getCustomSeriesColors(
   seriesSpecs: BasicSeriesSpec[],
   seriesCollection: Map<string, SeriesCollectionValue>,
-  seriesColorOverrides: Map<string, string> = new Map(),
 ): Map<string, string> {
   const updatedCustomSeriesColors = new Map<string, string>();
   const counters = new Map<SpecId, number>();
 
   seriesCollection.forEach(({ seriesIdentifier }, seriesKey) => {
     const spec = getSpecsById(seriesSpecs, seriesIdentifier.specId);
 
-    if (!spec || !(spec.customSeriesColors || seriesColorOverrides.size > 0)) {
+    if (!spec || !spec.customSeriesColors) {
       return;
     }
 
     let color: string | undefined | null;
 
-    if (seriesColorOverrides.has(seriesKey)) {
-      color = seriesColorOverrides.get(seriesKey);
-    }
-
     if (!color && spec.customSeriesColors) {
       const counter = counters.get(seriesIdentifier.specId) || 0;
       color = Array.isArray(spec.customSeriesColors)

src/components/chart.tsx

@@ -1,7 +1,7 @@
 import React, { CSSProperties, createRef } from 'react';
 import classNames from 'classnames';
 import { Provider } from 'react-redux';
-import { createStore, Store } from 'redux';
+import { createStore, Store, Unsubscribe } from 'redux';
 import uuid from 'uuid';
 import { SpecsParser } from '../specs/specs_parser';
 import { ChartResizer } from './chart_resizer';
@@ -51,6 +51,7 @@ export class Chart extends React.Component<ChartProps, ChartState> {
   static defaultProps: ChartProps = {
     renderer: 'canvas',
   };
+  private unsubscribeToStore: Unsubscribe;
   private chartStore: Store<GlobalChartState>;
   private chartContainerRef: React.RefObject<HTMLDivElement>;
   private chartStageRef: React.RefObject<HTMLCanvasElement>;
@@ -77,11 +78,12 @@ export class Chart extends React.Component<ChartProps, ChartState> {
     const onElementOutCaller = createOnElementOutCaller();
     const onBrushEndCaller = createOnBrushEndCaller();
     const onPointerMoveCaller = createOnPointerMoveCaller();
-    this.chartStore.subscribe(() => {
+    this.unsubscribeToStore = this.chartStore.subscribe(() => {
       const state = this.chartStore.getState();
       if (!isInitialized(state)) {
         return;
       }
+
       const settings = getSettingsSpecSelector(state);
       if (this.state.legendPosition !== settings.legendPosition) {
         this.setState({
@@ -100,6 +102,10 @@ export class Chart extends React.Component<ChartProps, ChartState> {
     });
   }
 
+  componentWillUnmount() {
+    this.unsubscribeToStore();
+  }
+
   dispatchExternalPointerEvent(event: PointerEvent) {
     this.chartStore.dispatch(onExternalPointerEvent(event));
   }

src/components/legend/__snapshots__/legend.test.tsx.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Legend #legendColorPicker should match snapshot after onChange is called 1`] = `"<div class=\\"echLegendItem echLegendItem--right\\"><div class=\\"echLegendItem__color echLegendItem__color--changable\\" aria-label=\\"series color\\" title=\\"series color\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"16\\" height=\\"16\\" class=\\"echIcon\\" color=\\"#0c7b93\\" focusable=\\"false\\"><defs><circle id=\\"dot-a\\" cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></defs><g><use xlink:href=\\"#dot-a\\"></use></g></svg></div><div class=\\"echLegendItem__label echLegendItem__label--hasClickListener\\" title=\\"splita\\">splita</div></div><div class=\\"echLegendItem echLegendItem--right\\"><div class=\\"echLegendItem__color echLegendItem__color--changable\\" aria-label=\\"series color\\" title=\\"series color\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"16\\" height=\\"16\\" class=\\"echIcon\\" color=\\"#0c7b93\\" focusable=\\"false\\"><defs><circle id=\\"dot-a\\" cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></defs><g><use xlink:href=\\"#dot-a\\"></use></g></svg></div><div class=\\"echLegendItem__label echLegendItem__label--hasClickListener\\" title=\\"splitb\\">splitb</div></div><div class=\\"echLegendItem echLegendItem--right\\"><div class=\\"echLegendItem__color echLegendItem__color--changable\\" aria-label=\\"series color\\" title=\\"series color\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"16\\" height=\\"16\\" class=\\"echIcon\\" color=\\"#0c7b93\\" focusable=\\"false\\"><defs><circle id=\\"dot-a\\" cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></defs><g><use xlink:href=\\"#dot-a\\"></use></g></svg></div><div class=\\"echLegendItem__label echLegendItem__label--hasClickListener\\" title=\\"splitc\\">splitc</div></div><div class=\\"echLegendItem echLegendItem--right\\"><div class=\\"echLegendItem__color echLegendItem__color--changable\\" aria-label=\\"series color\\" title=\\"series color\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"16\\" height=\\"16\\" class=\\"echIcon\\" color=\\"#0c7b93\\" focusable=\\"false\\"><defs><circle id=\\"dot-a\\" cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></defs><g><use xlink:href=\\"#dot-a\\"></use></g></svg></div><div class=\\"echLegendItem__label echLegendItem__label--hasClickListener\\" title=\\"splitd\\">splitd</div></div>"`;
+
+exports[`Legend #legendColorPicker should match snapshot after onClose is called 1`] = `"<div class=\\"echLegendItem echLegendItem--right\\"><div class=\\"echLegendItem__color echLegendItem__color--changable\\" aria-label=\\"series color\\" title=\\"series color\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"16\\" height=\\"16\\" class=\\"echIcon\\" color=\\"red\\" focusable=\\"false\\"><defs><circle id=\\"dot-a\\" cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></defs><g><use xlink:href=\\"#dot-a\\"></use></g></svg></div><div class=\\"echLegendItem__label echLegendItem__label--hasClickListener\\" title=\\"splita\\">splita</div></div><div class=\\"echLegendItem echLegendItem--right\\"><div class=\\"echLegendItem__color echLegendItem__color--changable\\" aria-label=\\"series color\\" title=\\"series color\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"16\\" height=\\"16\\" class=\\"echIcon\\" color=\\"red\\" focusable=\\"false\\"><defs><circle id=\\"dot-a\\" cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></defs><g><use xlink:href=\\"#dot-a\\"></use></g></svg></div><div class=\\"echLegendItem__label echLegendItem__label--hasClickListener\\" title=\\"splitb\\">splitb</div></div><div class=\\"echLegendItem echLegendItem--right\\"><div class=\\"echLegendItem__color echLegendItem__color--changable\\" aria-label=\\"series color\\" title=\\"series color\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"16\\" height=\\"16\\" class=\\"echIcon\\" color=\\"red\\" focusable=\\"false\\"><defs><circle id=\\"dot-a\\" cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></defs><g><use xlink:href=\\"#dot-a\\"></use></g></svg></div><div class=\\"echLegendItem__label echLegendItem__label--hasClickListener\\" title=\\"splitc\\">splitc</div></div><div class=\\"echLegendItem echLegendItem--right\\"><div class=\\"echLegendItem__color echLegendItem__color--changable\\" aria-label=\\"series color\\" title=\\"series color\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"16\\" height=\\"16\\" class=\\"echIcon\\" color=\\"red\\" focusable=\\"false\\"><defs><circle id=\\"dot-a\\" cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></defs><g><use xlink:href=\\"#dot-a\\"></use></g></svg></div><div class=\\"echLegendItem__label echLegendItem__label--hasClickListener\\" title=\\"splitd\\">splitd</div></div>"`;
+
+exports[`Legend #legendColorPicker should render colorPicker when color is clicked 1`] = `"<div id=\\"colorPicker\\"><span>Custom Color Picker</span><button id=\\"change\\">#0c7b93</button><button id=\\"close\\">close</button></div>"`;
+
+exports[`Legend #legendColorPicker should render colorPicker when color is clicked 2`] = `"<div class=\\"echLegendItem echLegendItem--right\\"><div class=\\"echLegendItem__color echLegendItem__color--changable\\" aria-label=\\"series color\\" title=\\"series color\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"16\\" height=\\"16\\" class=\\"echIcon\\" color=\\"red\\" focusable=\\"false\\"><defs><circle id=\\"dot-a\\" cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></defs><g><use xlink:href=\\"#dot-a\\"></use></g></svg></div><div class=\\"echLegendItem__label echLegendItem__label--hasClickListener\\" title=\\"splita\\">splita</div></div><div id=\\"colorPicker\\"><span>Custom Color Picker</span><button id=\\"change\\">#0c7b93</button><button id=\\"close\\">close</button></div><div class=\\"echLegendItem echLegendItem--right\\"><div class=\\"echLegendItem__color echLegendItem__color--changable\\" aria-label=\\"series color\\" title=\\"series color\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"16\\" height=\\"16\\" class=\\"echIcon\\" color=\\"red\\" focusable=\\"false\\"><defs><circle id=\\"dot-a\\" cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></defs><g><use xlink:href=\\"#dot-a\\"></use></g></svg></div><div class=\\"echLegendItem__label echLegendItem__label--hasClickListener\\" title=\\"splitb\\">splitb</div></div><div class=\\"echLegendItem echLegendItem--right\\"><div class=\\"echLegendItem__color echLegendItem__color--changable\\" aria-label=\\"series color\\" title=\\"series color\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"16\\" height=\\"16\\" class=\\"echIcon\\" color=\\"red\\" focusable=\\"false\\"><defs><circle id=\\"dot-a\\" cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></defs><g><use xlink:href=\\"#dot-a\\"></use></g></svg></div><div class=\\"echLegendItem__label echLegendItem__label--hasClickListener\\" title=\\"splitc\\">splitc</div></div><div class=\\"echLegendItem echLegendItem--right\\"><div class=\\"echLegendItem__color echLegendItem__color--changable\\" aria-label=\\"series color\\" title=\\"series color\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"16\\" height=\\"16\\" class=\\"echIcon\\" color=\\"red\\" focusable=\\"false\\"><defs><circle id=\\"dot-a\\" cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></defs><g><use xlink:href=\\"#dot-a\\"></use></g></svg></div><div class=\\"echLegendItem__label echLegendItem__label--hasClickListener\\" title=\\"splitd\\">splitd</div></div>"`;

src/components/legend/_legend_item.scss

@@ -9,12 +9,16 @@ $legendItemVerticalPadding: $echLegendRowGap / 2;
   align-items: center;
   width: 100%;
 
-  &:hover {
-    .echLegendItem__label {
-      text-decoration: underline;
+  &:not(&--hidden) {
+    .echLegendItem__color--changable {
+      cursor: pointer;
     }
   }
 
+  &__label:hover {
+    text-decoration: underline;
+  }
+
   &__color {
     margin-right: $euiSizeXS;
   }