[Lens] Add color swatch to primary metric dimension (elastic#138053) (e…

…lastic#138265)

(cherry picked from commit 5322266)

Co-authored-by: Andrew Tate <andrew.tate@elastic.co>

x-pack/plugins/lens/public/visualizations/metric/dimension_editor.test.tsx

@@ -22,6 +22,7 @@ import { act } from 'react-dom/test-utils';
 import { EuiColorPickerOutput } from '@elastic/eui/src/components/color_picker/color_picker';
 import { createMockFramePublicAPI } from '../../mocks';
 import { chartPluginMock } from '@kbn/charts-plugin/public/mocks';
+import { euiLightVars } from '@kbn/ui-theme';
 
 jest.mock('lodash', () => {
   const original = jest.requireActual('lodash');
@@ -162,13 +163,13 @@ describe('dimension editor', () => {
         expect(harnessNoPalette.colorPicker.exists()).toBeTruthy();
       });
 
-      it('fills placeholder with default value', () => {
+      it('fills with default value', () => {
         const localHarness = getHarnessWithState({
           ...fullState,
           palette: undefined,
           color: undefined,
         });
-        expect(localHarness.colorPicker.props().placeholder).toBe('Auto');
+        expect(localHarness.colorPicker.props().color).toBe(euiLightVars.euiColorPrimary);
       });
 
       it('sets color', () => {

x-pack/plugins/lens/public/visualizations/metric/dimension_editor.tsx

@@ -38,7 +38,7 @@ import {
 } from '../../shared_components';
 import type { VisualizationDimensionEditorProps } from '../../types';
 import { defaultNumberPaletteParams, defaultPercentagePaletteParams } from './palette_config';
-import { DEFAULT_MAX_COLUMNS, MetricVisualizationState } from './visualization';
+import { DEFAULT_MAX_COLUMNS, getDefaultColor, MetricVisualizationState } from './visualization';
 import { CollapseSetting } from '../../shared_components/collapse_setting';
 
 type Props = VisualizationDimensionEditorProps<MetricVisualizationState> & {
@@ -379,7 +379,7 @@ function StaticColorControls({ state, setState }: Pick<Props, 'state' | 'setStat
     useDebouncedValue<string>(
       {
         onChange: setColor,
-        value: state.color || '',
+        value: state.color || getDefaultColor(!!state.maxAccessor),
       },
       { allowFalsyValue: true }
     );
@@ -390,12 +390,9 @@ function StaticColorControls({ state, setState }: Pick<Props, 'state' | 'setStat
         fullWidth
         data-test-subj="lnsMetric_colorpicker"
         compressed
-        isClearable={true}
+        isClearable={false}
         onChange={(color: string) => handleColorChange(color)}
         color={currentColor}
-        placeholder={i18n.translate('xpack.lens.metric.colorPlaceholder', {
-          defaultMessage: 'Auto',
-        })}
         aria-label={colorLabel}
         showAlpha={false}
         swatches={euiPaletteColorBlind()}

x-pack/plugins/lens/public/visualizations/metric/visualization.test.ts

@@ -8,7 +8,7 @@
 import { chartPluginMock } from '@kbn/charts-plugin/public/mocks';
 import { CustomPaletteParams, PaletteOutput } from '@kbn/coloring';
 import { ExpressionAstExpression, ExpressionAstFunction } from '@kbn/expressions-plugin/common';
-import { euiLightVars } from '@kbn/ui-theme';
+import { euiLightVars, euiThemeVars } from '@kbn/ui-theme';
 import { layerTypes } from '../..';
 import { createMockDatasource, createMockFramePublicAPI } from '../../mocks';
 import {
@@ -98,6 +98,24 @@ describe('metric visualization', () => {
         ]
       `);
 
+      expect(
+        visualization.getConfiguration({
+          state: { ...fullState, palette: undefined, color: undefined },
+          layerId: fullState.layerId,
+          frame: mockFrameApi,
+        }).groups[0].accessors
+      ).toMatchInlineSnapshot(`
+        Array [
+          Object {
+            "color": "#0077cc",
+            "columnId": "metric-col-id",
+            "triggerIcon": "color",
+          },
+        ]
+      `);
+    });
+
+    test('static coloring', () => {
       expect(
         visualization.getConfiguration({
           state: { ...fullState, palette: undefined },
@@ -107,9 +125,25 @@ describe('metric visualization', () => {
       ).toMatchInlineSnapshot(`
         Array [
           Object {
+            "color": "static-color",
             "columnId": "metric-col-id",
-            "palette": undefined,
-            "triggerIcon": undefined,
+            "triggerIcon": "color",
+          },
+        ]
+      `);
+
+      expect(
+        visualization.getConfiguration({
+          state: { ...fullState, color: undefined },
+          layerId: fullState.layerId,
+          frame: mockFrameApi,
+        }).groups[0].accessors
+      ).toMatchInlineSnapshot(`
+        Array [
+          Object {
+            "columnId": "metric-col-id",
+            "palette": Array [],
+            "triggerIcon": "colorBy",
           },
         ]
       `);
@@ -474,8 +508,8 @@ describe('metric visualization', () => {
               },
               datasourceLayers
             ) as ExpressionAstExpression
-          ).chain[1].arguments.color
-        ).toEqual([]);
+          ).chain[1].arguments.color[0]
+        ).toEqual(euiThemeVars.euiColorLightestShade);
       });
     });
   });

x-pack/plugins/lens/public/visualizations/metric/visualization.tsx

@@ -14,12 +14,12 @@ import { PaletteOutput, PaletteRegistry, CUSTOM_PALETTE, CustomPaletteParams } f
 import { ThemeServiceStart } from '@kbn/core/public';
 import { VIS_EVENT_TO_TRIGGER } from '@kbn/visualizations-plugin/public';
 import { LayoutDirection } from '@elastic/charts';
-import { euiLightVars } from '@kbn/ui-theme';
+import { euiLightVars, euiThemeVars } from '@kbn/ui-theme';
 import { KibanaThemeProvider } from '@kbn/kibana-react-plugin/public';
 import { LayerType } from '../../../common';
 import { getSuggestions } from './suggestions';
 import { LensIconChartMetric } from '../../assets/chart_metric';
-import { Visualization, OperationMetadata, DatasourceLayers } from '../../types';
+import { Visualization, OperationMetadata, DatasourceLayers, AccessorConfig } from '../../types';
 import { layerTypes } from '../../../common';
 import { GROUP_ID, LENS_METRIC_ID } from './constants';
 import { DimensionEditor } from './dimension_editor';
@@ -28,6 +28,9 @@ import { generateId } from '../../id_generator';
 
 export const DEFAULT_MAX_COLUMNS = 3;
 
+export const getDefaultColor = (hasMax: boolean) =>
+  hasMax ? euiLightVars.euiColorPrimary : euiThemeVars.euiColorLightestShade;
+
 export interface MetricVisualizationState {
   layerId: string;
   layerType: LayerType;
@@ -128,11 +131,7 @@ const toExpression = (
             state.breakdownByAccessor && !state.collapseFn ? [state.breakdownByAccessor] : [],
           subtitle: state.subtitle ? [state.subtitle] : [],
           progressDirection: state.progressDirection ? [state.progressDirection] : [],
-          color: state.color
-            ? [state.color]
-            : state.maxAccessor
-            ? [euiLightVars.euiColorPrimary]
-            : [],
+          color: [state.color || getDefaultColor(!!state.maxAccessor)],
           palette: state.palette?.params
             ? [
                 paletteService
@@ -217,15 +216,34 @@ export const getMetricVisualization = ({
   triggers: [VIS_EVENT_TO_TRIGGER.filter],
 
   getConfiguration(props) {
-    const hasColoring = props.state.palette != null;
-    const stops = props.state.palette?.params?.stops || [];
     const isSupportedMetric = (op: OperationMetadata) =>
       !op.isBucketed && supportedDataTypes.has(op.dataType);
 
     const isSupportedDynamicMetric = (op: OperationMetadata) =>
       !op.isBucketed && supportedDataTypes.has(op.dataType) && !op.isStaticValue;
 
+    const getPrimaryAccessorDisplayConfig = (): Partial<AccessorConfig> => {
+      const stops = props.state.palette?.params?.stops || [];
+      const hasStaticColoring = !!props.state.color;
+      const hasDynamicColoring = !!props.state.palette;
+      return hasDynamicColoring
+        ? {
+            triggerIcon: 'colorBy',
+            palette: stops.map(({ color }) => color),
+          }
+        : hasStaticColoring
+        ? {
+            triggerIcon: 'color',
+            color: props.state.color,
+          }
+        : {
+            triggerIcon: 'color',
+            color: getDefaultColor(!!props.state.maxAccessor),
+          };
+    };
+
     const isBucketed = (op: OperationMetadata) => op.isBucketed;
+
     return {
       groups: [
         {
@@ -238,8 +256,7 @@ export const getMetricVisualization = ({
             ? [
                 {
                   columnId: props.state.metricAccessor,
-                  triggerIcon: hasColoring ? 'colorBy' : undefined,
-                  palette: hasColoring ? stops.map(({ color }) => color) : undefined,
+                  ...getPrimaryAccessorDisplayConfig(),
                 },
               ]
             : [],
@@ -364,12 +381,13 @@ export const getMetricVisualization = ({
     return updated;
   },
 
-  removeDimension({ prevState, layerId, columnId }) {
+  removeDimension({ prevState, columnId }) {
     const updated = { ...prevState };
 
     if (prevState.metricAccessor === columnId) {
       delete updated.metricAccessor;
       delete updated.palette;
+      delete updated.color;
     }
     if (prevState.secondaryMetricAccessor === columnId) {
       delete updated.secondaryMetricAccessor;