[TSVB] Integrates the color service

src/plugins/vis_type_timeseries/common/types.ts

@@ -25,7 +25,7 @@ export type PanelSchema = TypeOf<typeof panel>;
 export type VisPayload = TypeOf<typeof visPayloadSchema>;
 export type FieldObject = TypeOf<typeof fieldObject>;
 
-interface PanelData {
+export interface PanelData {
   id: string;
   label: string;
   data: Array<[number, number]>;
@@ -57,3 +57,8 @@ export interface SanitizedFieldType {
   type: string;
   label?: string;
 }
+
+export enum PALETTES {
+  GRADIENT = 'gradient',
+  RAINBOW = 'rainbow',
+}

src/plugins/vis_type_timeseries/common/vis_schema.ts

@@ -172,6 +172,10 @@ export const seriesItems = schema.object({
   series_interval: stringOptionalNullable,
   series_drop_last_bucket: numberIntegerOptional,
   split_color_mode: stringOptionalNullable,
+  palette: schema.object({
+    type: stringRequired,
+    name: stringRequired,
+  }),
   split_filters: schema.maybe(schema.arrayOf(splitFiltersItems)),
   split_mode: stringRequired,
   stacked: stringRequired,

src/plugins/vis_type_timeseries/public/application/components/palette_picker.test.tsx

@@ -0,0 +1,64 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+import React from 'react';
+import { mountWithIntl } from '@kbn/test/jest';
+import { ReactWrapper } from 'enzyme';
+import { PalettePicker, PalettePickerProps } from './palette_picker';
+import { chartPluginMock } from '../../../../charts/public/mocks';
+import { EuiColorPalettePicker } from '@elastic/eui';
+import { PALETTES } from '../../../common/types';
+
+describe('PalettePicker', function () {
+  let props: PalettePickerProps;
+  let component: ReactWrapper<PalettePickerProps>;
+
+  beforeAll(() => {
+    props = {
+      palettes: chartPluginMock.createPaletteRegistry(),
+      activePalette: {
+        type: 'palette',
+        name: 'kibana_palette',
+      },
+      setPalette: jest.fn(),
+      color: '#68BC00',
+    };
+  });
+
+  it('renders the EuiPalettePicker', () => {
+    component = mountWithIntl(<PalettePicker {...props} />);
+    expect(component.find(EuiColorPalettePicker).length).toBe(1);
+  });
+
+  it('renders the default palette if not activePalette is given', function () {
+    const { activePalette, ...newProps } = props;
+    component = mountWithIntl(<PalettePicker {...newProps} />);
+    const palettePicker = component.find(EuiColorPalettePicker);
+    expect(palettePicker.props().valueOfSelected).toBe('default');
+  });
+
+  it('renders the activePalette palette if given', function () {
+    component = mountWithIntl(<PalettePicker {...props} />);
+    const palettePicker = component.find(EuiColorPalettePicker);
+    expect(palettePicker.props().valueOfSelected).toBe('kibana_palette');
+  });
+
+  it('renders two additional palettes, rainbow and gradient', function () {
+    component = mountWithIntl(<PalettePicker {...props} />);
+    const palettePicker = component.find(EuiColorPalettePicker);
+    expect(palettePicker.props().palettes).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          value: PALETTES.RAINBOW,
+        }),
+        expect.objectContaining({
+          value: PALETTES.GRADIENT,
+        }),
+      ])
+    );
+  });
+});

src/plugins/vis_type_timeseries/public/application/components/palette_picker.tsx

@@ -0,0 +1,95 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import { PaletteOutput, PaletteRegistry } from 'src/plugins/charts/public';
+import { EuiColorPalettePicker } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { rainbowColors } from '../lib/rainbow_colors';
+import { computeGradientFinalColor } from '../lib/compute_gradient_final_color';
+import { PALETTES } from '../../../common/types';
+
+export interface PalettePickerProps {
+  activePalette?: PaletteOutput;
+  palettes: PaletteRegistry;
+  setPalette: (value: PaletteOutput) => void;
+  color: string;
+}
+
+export function PalettePicker({ activePalette, palettes, setPalette, color }: PalettePickerProps) {
+  const finalGradientColor = computeGradientFinalColor(color);
+
+  return (
+    <EuiColorPalettePicker
+      fullWidth
+      data-test-subj="visEditorPalettePicker"
+      compressed
+      palettes={[
+        ...palettes
+          .getAll()
+          .filter(({ internal }) => !internal)
+          .map(({ id, title, getColors }) => {
+            return {
+              value: id,
+              title,
+              type: 'fixed' as const,
+              palette: getColors(10),
+            };
+          }),
+        {
+          value: PALETTES.GRADIENT,
+          title: i18n.translate('visTypeTimeseries.timeSeries.gradientLabel', {
+            defaultMessage: 'Gradient',
+          }),
+          type: 'fixed',
+          palette: palettes
+            .get('custom')
+            .getColors(10, { colors: [color, finalGradientColor], gradient: true }),
+        },
+        {
+          value: PALETTES.RAINBOW,
+          title: i18n.translate('visTypeTimeseries.timeSeries.rainbowLabel', {
+            defaultMessage: 'Rainbow',
+          }),
+          type: 'fixed',
+          palette: palettes
+            .get('custom')
+            .getColors(10, { colors: rainbowColors.slice(0, 10), gradient: false }),
+        },
+      ]}
+      onChange={(newPalette) => {
+        if (newPalette === PALETTES.RAINBOW) {
+          setPalette({
+            type: 'palette',
+            name: PALETTES.RAINBOW,
+            params: {
+              colors: rainbowColors,
+              gradient: false,
+            },
+          });
+        } else if (newPalette === PALETTES.GRADIENT) {
+          setPalette({
+            type: 'palette',
+            name: PALETTES.GRADIENT,
+            params: {
+              colors: [color, finalGradientColor],
+              gradient: true,
+            },
+          });
+        } else {
+          setPalette({
+            type: 'palette',
+            name: newPalette,
+          });
+        }
+      }}
+      valueOfSelected={activePalette?.name || 'default'}
+      selectionDisplay={'palette'}
+    />
+  );
+}

src/plugins/vis_type_timeseries/public/application/components/timeseries_visualization.tsx

@@ -25,6 +25,7 @@ interface TimeseriesVisualizationProps {
   model: TimeseriesVisParams;
   visData: TimeseriesVisData;
   uiState: PersistedState;
+  syncColors: boolean;
 }
 
 function TimeseriesVisualization({
@@ -34,6 +35,7 @@ function TimeseriesVisualization({
   handlers,
   uiState,
   getConfig,
+  syncColors,
 }: TimeseriesVisualizationProps) {
   const onBrush = useCallback(
     (gte: string, lte: string) => {
@@ -91,6 +93,7 @@ function TimeseriesVisualization({
         uiState={uiState}
         onBrush={onBrush}
         onUiState={handleUiState}
+        syncColors={syncColors}
       />
     );
   }

src/plugins/vis_type_timeseries/public/application/components/vis_types/index.ts

@@ -54,4 +54,5 @@ export interface TimeseriesVisProps {
   uiState: PersistedState;
   visData: TimeseriesVisData;
   getConfig: IUiSettingsClient['get'];
+  syncColors: boolean;
 }

src/plugins/vis_type_timeseries/public/application/components/vis_types/timeseries/config.js

@@ -7,7 +7,7 @@
  */
 
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { DataFormatPicker } from '../../data_format_picker';
 import { createSelectHandler } from '../../lib/create_select_handler';
 import { YesNo } from '../../yes_no';
@@ -28,7 +28,8 @@ import {
 } from '@elastic/eui';
 import { FormattedMessage, injectI18n } from '@kbn/i18n/react';
 import { SeriesConfigQueryBarWithIgnoreGlobalFilter } from '../../series_config_query_bar_with_ignore_global_filter';
-
+import { PalettePicker } from '../../palette_picker';
+import { getChartsSetup } from '../../../../services';
 import { isPercentDisabled } from '../../lib/stacked';
 import { STACKED_OPTIONS } from '../../../visualizations/constants/chart';
 
@@ -41,7 +42,6 @@ export const TimeseriesConfig = injectI18n(function (props) {
     point_size: '',
     value_template: '{{value}}',
     offset_time: '',
-    split_color_mode: 'kibana',
     axis_min: '',
     axis_max: '',
     stacked: STACKED_OPTIONS.NONE,
@@ -124,33 +124,23 @@ export const TimeseriesConfig = injectI18n(function (props) {
   const selectedChartTypeOption = chartTypeOptions.find((option) => {
     return model.chart_type === option.value;
   });
+  const { palettes } = getChartsSetup();
+  const [palettesRegistry, setPalettesRegistry] = useState(null);
 
-  const splitColorOptions = [
-    {
-      label: intl.formatMessage({
-        id: 'visTypeTimeseries.timeSeries.defaultPaletteLabel',
-        defaultMessage: 'Default palette',
-      }),
-      value: 'kibana',
-    },
-    {
-      label: intl.formatMessage({
-        id: 'visTypeTimeseries.timeSeries.rainbowLabel',
-        defaultMessage: 'Rainbow',
-      }),
-      value: 'rainbow',
-    },
-    {
-      label: intl.formatMessage({
-        id: 'visTypeTimeseries.timeSeries.gradientLabel',
-        defaultMessage: 'Gradient',
-      }),
-      value: 'gradient',
-    },
-  ];
-  const selectedSplitColorOption = splitColorOptions.find((option) => {
-    return model.split_color_mode === option.value;
-  });
+  useEffect(() => {
+    const fetchPalettes = async () => {
+      const palettesService = await palettes.getPalettes();
+      setPalettesRegistry(palettesService);
+    };
+    fetchPalettes();
+  }, [palettes]);
+
+  const handlePaletteChange = (val) => {
+    props.onChange({
+      split_color_mode: null,
+      palette: val,
+    });
+  };
 
   let type;
 
@@ -342,6 +332,14 @@ export const TimeseriesConfig = injectI18n(function (props) {
       ? props.model.series_index_pattern
       : props.indexPatternForQuery;
 
+  const initialPalette = {
+    ...model.palette,
+    name:
+      model.split_color_mode === 'kibana'
+        ? 'kibana_palette'
+        : model.split_color_mode || model.palette.name,
+  };
+
   return (
     <div className="tvbAggRow">
       <EuiFlexGroup gutterSize="s">
@@ -420,25 +418,26 @@ export const TimeseriesConfig = injectI18n(function (props) {
           <EuiSpacer size="s" />
           <YesNo value={model.hide_in_legend} name="hide_in_legend" onChange={props.onChange} />
         </EuiFlexItem>
-        <EuiFlexItem grow={true}>
-          <EuiFormRow
-            id={htmlId('splitColor')}
-            label={
-              <FormattedMessage
-                id="visTypeTimeseries.timeSeries.splitColorThemeLabel"
-                defaultMessage="Split color theme"
+        {palettesRegistry && (
+          <EuiFlexItem grow={true}>
+            <EuiFormRow
+              id={htmlId('splitColor')}
+              label={
+                <FormattedMessage
+                  id="visTypeTimeseries.timeSeries.splitColorThemeLabel"
+                  defaultMessage="Split color theme"
+                />
+              }
+            >
+              <PalettePicker
+                palettes={palettesRegistry}
+                activePalette={initialPalette}
+                setPalette={handlePaletteChange}
+                color={model.color}
               />
-            }
-          >
-            <EuiComboBox
-              isClearable={false}
-              options={splitColorOptions}
-              selectedOptions={selectedSplitColorOption ? [selectedSplitColorOption] : []}
-              onChange={handleSelectChange('split_color_mode')}
-              singleSelection={{ asPlainText: true }}
-            />
-          </EuiFormRow>
-        </EuiFlexItem>
+            </EuiFormRow>
+          </EuiFlexItem>
+        )}
       </EuiFlexGroup>
 
       <EuiHorizontalRule margin="s" />

src/plugins/vis_type_timeseries/public/application/components/vis_types/timeseries/vis.js

@@ -132,7 +132,7 @@ class TimeseriesVisualization extends Component {
   };
 
   render() {
-    const { model, visData, onBrush } = this.props;
+    const { model, visData, onBrush, syncColors } = this.props;
     const series = get(visData, `${model.id}.series`, []);
     const interval = getInterval(visData, model);
     const yAxisIdGenerator = htmlIdGenerator('yaxis');
@@ -182,6 +182,9 @@ class TimeseriesVisualization extends Component {
           seriesDataRow.groupId = groupId;
           seriesDataRow.yScaleType = yScaleType;
           seriesDataRow.hideInLegend = Boolean(seriesGroup.hide_in_legend);
+          seriesDataRow.palette = seriesGroup.palette;
+          seriesDataRow.baseColor = seriesGroup.color;
+          seriesDataRow.isSplitByTerms = seriesGroup.split_mode === 'terms';
         });
 
       if (isCustomDomain) {
@@ -223,6 +226,7 @@ class TimeseriesVisualization extends Component {
           xAxisLabel={getAxisLabelString(interval)}
           xAxisFormatter={this.xAxisFormatter(interval)}
           annotations={this.prepareAnnotations()}
+          syncColors={syncColors}
         />
       </div>
     );