[Lens] Add ability to set colors for y-axis series

x-pack/plugins/lens/public/xy_visualization/state_helpers.ts

@@ -5,7 +5,7 @@
  */
 
 import { EuiIconType } from '@elastic/eui/src/components/icon/icon';
-import { SeriesType, visualizationTypes } from './types';
+import { SeriesType, visualizationTypes, LayerConfig, YConfig } from './types';
 
 export function isHorizontalSeries(seriesType: SeriesType) {
   return seriesType === 'bar_horizontal' || seriesType === 'bar_horizontal_stacked';
@@ -24,3 +24,12 @@ export function getIconForSeries(type: SeriesType): EuiIconType {
 
   return (definition.icon as EuiIconType) || 'empty';
 }
+
+export const getSeriesColor = (layer: LayerConfig, accessor: string) => {
+  if (layer.splitAccessor) {
+    return null;
+  }
+  return (
+    layer?.yConfig?.find((yConfig: YConfig) => yConfig.forAccessor === accessor)?.color || null
+  );
+};

x-pack/plugins/lens/public/xy_visualization/to_expression.ts

@@ -188,7 +188,8 @@ export const buildExpression = (
                               function: 'lens_xy_yConfig',
                               arguments: {
                                 forAccessor: [yConfig.forAccessor],
-                                axisMode: [yConfig.axisMode],
+                                axisMode: yConfig.axisMode ? [yConfig.axisMode] : [],
+                                color: yConfig.color ? [yConfig.color] : [],
                               },
                             },
                           ],

x-pack/plugins/lens/public/xy_visualization/types.ts

@@ -100,6 +100,10 @@ export const yAxisConfig: ExpressionFunctionDefinition<
       options: ['auto', 'left', 'right'],
       help: 'The axis mode of the metric',
     },
+    color: {
+      types: ['string'],
+      help: 'The color of the series',
+    },
   },
   fn: function fn(input: unknown, args: YConfig) {
     return {
@@ -195,6 +199,7 @@ export type YAxisMode = 'auto' | 'left' | 'right';
 export interface YConfig {
   forAccessor: string;
   axisMode?: YAxisMode;
+  color?: string;
 }
 
 export interface LayerConfig {

x-pack/plugins/lens/public/xy_visualization/xy_config_panel.tsx

@@ -4,12 +4,21 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
+import React, { useState } from 'react';
 import { i18n } from '@kbn/i18n';
-import { EuiButtonGroup, EuiFormRow, htmlIdGenerator } from '@elastic/eui';
+import { debounce } from 'lodash';
+import {
+  EuiButtonGroup,
+  EuiFormRow,
+  htmlIdGenerator,
+  EuiForm,
+  EuiColorPicker,
+  EuiColorPickerProps,
+  EuiToolTip,
+} from '@elastic/eui';
 import { State, SeriesType, visualizationTypes, YAxisMode } from './types';
 import { VisualizationDimensionEditorProps, VisualizationLayerWidgetProps } from '../types';
-import { isHorizontalChart, isHorizontalSeries } from './state_helpers';
+import { isHorizontalChart, isHorizontalSeries, getSeriesColor } from './state_helpers';
 import { trackUiEvent } from '../lens_ui_telemetry';
 
 type UnwrapArray<T> = T extends Array<infer P> ? P : T;
@@ -70,70 +79,151 @@ export function LayerContextMenu(props: VisualizationLayerWidgetProps<State>) {
 
 const idPrefix = htmlIdGenerator()();
 
-export function DimensionEditor({
-  state,
-  setState,
-  layerId,
-  accessor,
-}: VisualizationDimensionEditorProps<State>) {
+export function DimensionEditor(props: VisualizationDimensionEditorProps<State>) {
+  const { state, setState, layerId, accessor } = props;
   const index = state.layers.findIndex((l) => l.layerId === layerId);
   const layer = state.layers[index];
   const axisMode =
     (layer.yConfig &&
       layer.yConfig?.find((yAxisConfig) => yAxisConfig.forAccessor === accessor)?.axisMode) ||
     'auto';
+
   return (
-    <EuiFormRow
-      display="columnCompressed"
-      label={i18n.translate('xpack.lens.xyChart.axisSide.label', {
-        defaultMessage: 'Axis side',
-      })}
-    >
-      <EuiButtonGroup
-        legend={i18n.translate('xpack.lens.xyChart.axisSide.label', {
+    <EuiForm>
+      <EuiFormRow
+        display="columnCompressed"
+        fullWidth
+        label={i18n.translate('xpack.lens.xyChart.seriesColor.label', {
+          defaultMessage: 'Series color',
+        })}
+      >
+        <ColorPicker {...props} />
+      </EuiFormRow>
+      <EuiFormRow
+        display="columnCompressed"
+        fullWidth
+        label={i18n.translate('xpack.lens.xyChart.axisSide.label', {
           defaultMessage: 'Axis side',
         })}
-        name="axisSide"
-        buttonSize="compressed"
-        className="eui-displayInlineBlock"
-        options={[
-          {
-            id: `${idPrefix}auto`,
-            label: i18n.translate('xpack.lens.xyChart.axisSide.auto', {
-              defaultMessage: 'Auto',
-            }),
-          },
-          {
-            id: `${idPrefix}left`,
-            label: i18n.translate('xpack.lens.xyChart.axisSide.left', {
-              defaultMessage: 'Left',
-            }),
-          },
-          {
-            id: `${idPrefix}right`,
-            label: i18n.translate('xpack.lens.xyChart.axisSide.right', {
-              defaultMessage: 'Right',
-            }),
-          },
-        ]}
-        idSelected={`${idPrefix}${axisMode}`}
-        onChange={(id) => {
-          const newMode = id.replace(idPrefix, '') as YAxisMode;
-          const newYAxisConfigs = [...(layer.yConfig || [])];
-          const existingIndex = newYAxisConfigs.findIndex(
-            (yAxisConfig) => yAxisConfig.forAccessor === accessor
-          );
-          if (existingIndex !== -1) {
-            newYAxisConfigs[existingIndex].axisMode = newMode;
-          } else {
-            newYAxisConfigs.push({
-              forAccessor: accessor,
-              axisMode: newMode,
-            });
-          }
-          setState(updateLayer(state, { ...layer, yConfig: newYAxisConfigs }, index));
-        }}
-      />
-    </EuiFormRow>
+      >
+        <EuiButtonGroup
+          legend={i18n.translate('xpack.lens.xyChart.axisSide.label', {
+            defaultMessage: 'Axis side',
+          })}
+          name="axisSide"
+          buttonSize="compressed"
+          className="eui-displayInlineBlock"
+          options={[
+            {
+              id: `${idPrefix}auto`,
+              label: i18n.translate('xpack.lens.xyChart.axisSide.auto', {
+                defaultMessage: 'Auto',
+              }),
+            },
+            {
+              id: `${idPrefix}left`,
+              label: i18n.translate('xpack.lens.xyChart.axisSide.left', {
+                defaultMessage: 'Left',
+              }),
+            },
+            {
+              id: `${idPrefix}right`,
+              label: i18n.translate('xpack.lens.xyChart.axisSide.right', {
+                defaultMessage: 'Right',
+              }),
+            },
+          ]}
+          idSelected={`${idPrefix}${axisMode}`}
+          onChange={(id) => {
+            const newMode = id.replace(idPrefix, '') as YAxisMode;
+            const newYAxisConfigs = [...(layer.yConfig || [])];
+            const existingIndex = newYAxisConfigs.findIndex(
+              (yAxisConfig) => yAxisConfig.forAccessor === accessor
+            );
+            if (existingIndex !== -1) {
+              newYAxisConfigs[existingIndex].axisMode = newMode;
+            } else {
+              newYAxisConfigs.push({
+                forAccessor: accessor,
+                axisMode: newMode,
+              });
+            }
+            setState(updateLayer(state, { ...layer, yConfig: newYAxisConfigs }, index));
+          }}
+        />
+      </EuiFormRow>
+    </EuiForm>
   );
 }
+
+const tooltipContent = {
+  auto: i18n.translate('xpack.lens.configPanel.color.tooltip.auto', {
+    defaultMessage: 'Lens automatically picks colors for you unless you specify a custom color.',
+  }),
+  custom: i18n.translate('xpack.lens.configPanel.color.tooltip.custom', {
+    defaultMessage: 'Clear the custom color to return to “Auto” mode.',
+  }),
+  disabled: i18n.translate('xpack.lens.configPanel.color.tooltip.disabled', {
+    defaultMessage:
+      'Individual series cannot be custom colored when the layer includes a “Break down by“',
+  }),
+};
+
+const ColorPicker = ({
+  state,
+  setState,
+  layerId,
+  accessor,
+}: VisualizationDimensionEditorProps<State>) => {
+  const index = state.layers.findIndex((l) => l.layerId === layerId);
+  const layer = state.layers[index];
+  const disabled = !!layer.splitAccessor;
+
+  const [color, setColor] = useState(getSeriesColor(layer, accessor));
+
+  const handleColor: EuiColorPickerProps['onChange'] = (text, output) => {
+    setColor(text);
+    if (output.isValid || text === '') {
+      updateColorInState(text, output);
+    }
+  };
+
+  const updateColorInState: EuiColorPickerProps['onChange'] = debounce((text, output) => {
+    const newYConfigs = [...(layer.yConfig || [])];
+    const existingIndex = newYConfigs.findIndex((yConfig) => yConfig.forAccessor === accessor);
+    if (existingIndex !== -1) {
+      if (text === '') {
+        delete newYConfigs[existingIndex].color;
+      } else {
+        newYConfigs[existingIndex].color = output.hex;
+      }
+    } else {
+      newYConfigs.push({
+        forAccessor: accessor,
+        color: output.hex,
+      });
+    }
+    setState(updateLayer(state, { ...layer, yConfig: newYConfigs }, index));
+  }, 256);
+
+  return (
+    <EuiToolTip
+      position="top"
+      content={
+        disabled ? tooltipContent.disabled : color ? tooltipContent.custom : tooltipContent.auto
+      }
+      delay="long"
+      anchorClassName="eui-displayBlock"
+    >
+      <EuiColorPicker
+        compressed
+        onChange={handleColor}
+        color={disabled ? '' : color}
+        disabled={disabled}
+        aria-label={i18n.translate('xpack.lens.xyChart.seriesColor.label', {
+          defaultMessage: 'Series color',
+        })}
+      />
+    </EuiToolTip>
+  );
+};