[Explore Vis] apply color group panel and save key instead of hex value for colors

src/plugins/explore/public/components/visualizations/area/area_vis_config.test.ts

@@ -25,7 +25,7 @@ describe('area_vis_config', () => {
 
       // Check threshold lines
       expect(defaultAreaChartStyles.thresholdOptions).toMatchObject({
-        baseColor: '#00BD6B',
+        baseColor: '#017D73',
         thresholds: [],
         thresholdStyle: ThresholdMode.Off,
       });

src/plugins/explore/public/components/visualizations/bar/bar_chart_utils.ts

@@ -14,6 +14,7 @@ import {
 import { applyAxisStyling, getSchemaByAxis } from '../utils/utils';
 import { BarChartStyle } from './bar_vis_config';
 import { getColors, DEFAULT_GREY } from '../theme/default_colors';
+import { resolveColor } from '../theme/color_utils';
 
 export const inferTimeIntervals = (data: Array<Record<string, any>>, field: string | undefined) => {
   if (!data || data.length === 0 || !field) {
@@ -146,7 +147,10 @@ export const buildThresholdColorEncoding = (
 
   const colorDomain = thresholdWithBase.reduce<number[]>((acc, val) => [...acc, val.value], []);
 
-  const colorRange = thresholdWithBase.reduce<string[]>((acc, val) => [...acc, val.color], []);
+  const colorRange = thresholdWithBase.reduce<string[]>(
+    (acc, val) => [...acc, resolveColor(val.color)],
+    []
+  );
 
   // exclusive for single numerical bucket bar
   if (!numericalField)

src/plugins/explore/public/components/visualizations/bar/bar_vis_config.test.ts

@@ -28,7 +28,7 @@ describe('bar_vis_config', () => {
 
         // Threshold and grid
         thresholdOptions: {
-          baseColor: '#00BD6B',
+          baseColor: '#017D73',
           thresholds: [],
           thresholdStyle: ThresholdMode.Off,
         },

src/plugins/explore/public/components/visualizations/bar_gauge/bar_gauge_utils.ts

@@ -5,6 +5,7 @@
 
 import { AxisColumnMappings, Threshold, VisFieldType } from '../types';
 import { BarGaugeChartStyle } from './bar_gauge_vis_config';
+import { resolveColor } from '../theme/color_utils';
 
 export const getBarOrientation = (
   styles: BarGaugeChartStyle,
@@ -117,14 +118,14 @@ export const generateParams = (
     if (i === 0) {
       result.push({
         name: `gradient${i}`,
-        value: thresholds[0]?.color,
+        value: resolveColor(thresholds[0]?.color),
       });
       continue;
     }
 
     const allStops = thresholds.slice(0, i + 1).map((t) => ({
       offset: normalizeData(t.value, start, end),
-      color: t.color,
+      color: resolveColor(t.color),
     }));
 
     const stops = [];

src/plugins/explore/public/components/visualizations/bar_gauge/bar_gauge_vis_config.test.ts

@@ -28,7 +28,7 @@ describe('createBarGaugeConfig', () => {
     const config = createBarGaugeConfig();
     const defaults = config.ui.style.defaults;
     expect(defaults.thresholdOptions).toMatchObject({
-      baseColor: '#00BD6B',
+      baseColor: '#017D73',
       thresholds: [],
     });
     expect(defaults.valueCalculation).toBe('last');

src/plugins/explore/public/components/visualizations/bar_gauge/to_expression.test.ts

@@ -20,6 +20,10 @@ jest.mock('../theme/default_colors', () => ({
   getColors: jest.fn(() => ({ text: 'black', statusGreen: 'green', backgroundShade: 'grey' })),
 }));
 
+jest.mock('../theme/color_utils', () => ({
+  resolveColor: jest.fn((color) => color),
+}));
+
 jest.mock('../utils/utils', () => ({
   getSchemaByAxis: jest.fn((axis) => axis?.schema || 'nominal'),
 }));

src/plugins/explore/public/components/visualizations/bar_gauge/to_expression.ts

@@ -8,6 +8,7 @@ import { BarGaugeChartStyle } from './bar_gauge_vis_config';
 import { VisColumn, AxisColumnMappings, VEGASCHEMA, Threshold, VisFieldType } from '../types';
 import { calculateValue } from '../utils/calculation';
 import { getColors } from '../theme/default_colors';
+import { resolveColor } from '../theme/color_utils';
 import { getSchemaByAxis } from '../utils/utils';
 import {
   getBarOrientation,
@@ -259,7 +260,7 @@ export const createBarGaugeSpec = (
             mark: {
               type: 'bar',
               clip: true,
-              color: threshold.color,
+              color: resolveColor(threshold.color),
             },
             encoding: {
               [`${processedSymbol}`]: {
@@ -330,7 +331,10 @@ export const createBarGaugeSpec = (
               type: 'threshold',
               //  last threshold which is just for max value capping in gradient mode
               domain: processedThresholds.map((t) => t.value),
-              range: [getColors().backgroundShade, ...processedThresholds.map((t) => t.color)],
+              range: [
+                getColors().backgroundShade,
+                ...processedThresholds.map((t) => resolveColor(t.color)),
+              ],
             },
             legend: null,
           },
@@ -373,7 +377,10 @@ export const createBarGaugeSpec = (
           scale: {
             type: 'threshold',
             domain: allThresholds.map((t) => t.value),
-            range: [getColors().backgroundShade, ...allThresholds.map((t) => t.color)],
+            range: [
+              getColors().backgroundShade,
+              ...allThresholds.map((t) => resolveColor(t.color)),
+            ],
           },
           legend: null,
         },

src/plugins/explore/public/components/visualizations/gauge/gauge_vis_config.test.tsx

@@ -31,7 +31,7 @@ describe('createGaugeConfig', () => {
     expect(defaults.showTitle).toBe(true);
     expect(defaults.title).toBe('');
     expect(defaults.thresholdOptions).toMatchObject({
-      baseColor: '#00BD6B',
+      baseColor: '#017D73',
       thresholds: [],
     });
     expect(defaults.valueCalculation).toBe('last');

src/plugins/explore/public/components/visualizations/gauge/to_expression.ts

@@ -14,6 +14,7 @@ import {
   getMaxAndMinBase,
 } from '../style_panel/threshold/threshold_utils';
 import { getColors, DEFAULT_GREY } from '../theme/default_colors';
+import { resolveColor } from '../theme/color_utils';
 import { getUnitById, showDisplayValue } from '../style_panel/unit/collection';
 
 export const createGauge = (
@@ -76,7 +77,7 @@ export const createGauge = (
   const fillColor =
     !targetThreshold || minBase > targetValue || minBase >= maxBase || !isValidNumber
       ? DEFAULT_GREY
-      : targetThreshold.color;
+      : resolveColor(targetThreshold.color);
 
   const ranges = generateRanges(mergedThresholds, maxBase);
 
@@ -112,7 +113,9 @@ export const createGauge = (
     { name: 'theta2_single_arc', value: 2 },
   ];
 
-  const rangeArcs = ranges.map((range) => generateArcExpression(range.min, range.max, range.color));
+  const rangeArcs = ranges.map((range) =>
+    generateArcExpression(range.min, range.max, resolveColor(range.color))
+  );
 
   const titleLayer = styleOptions.showTitle
     ? [

src/plugins/explore/public/components/visualizations/heatmap/heatmap_chart_utils.ts

@@ -8,6 +8,7 @@ import { AggregationType, VisColumn } from '../types';
 import { HeatmapChartStyle } from './heatmap_vis_config';
 
 import { getColors, DEFAULT_GREY } from '../theme/default_colors';
+import { resolveColor } from '../theme/color_utils';
 
 // isRegular=== true refers to 2 dimension and 1 metric heatmap.
 export const createLabelLayer = (
@@ -108,7 +109,7 @@ export const enhanceStyle = (
     ];
 
     const colorDomain = thresholdWithBase.map<number>((val) => val.value);
-    const colorRange = thresholdWithBase.map<string>((val) => val.color);
+    const colorRange = thresholdWithBase.map<string>((val) => resolveColor(val.color));
 
     // overwrite color scale type to quantize to map continuous domains to discrete output ranges
     markLayer.encoding.color.scale.type = 'threshold';

src/plugins/explore/public/components/visualizations/heatmap/heatmap_vis_config.test.ts

@@ -40,7 +40,7 @@ describe('createHeatmapeConfig', () => {
     expect(defaults.exclusive.maxNumberOfColors).toBe(4);
     expect(defaults.useThresholdColor).toBe(false);
     expect(defaults.thresholdOptions).toMatchObject({
-      baseColor: '#00BD6B',
+      baseColor: '#017D73',
       thresholds: [],
     });
 

src/plugins/explore/public/components/visualizations/histogram/histogram_vis_config.test.ts

@@ -24,7 +24,7 @@ describe('bar_vis_config', () => {
 
         // Threshold and grid
         thresholdOptions: {
-          baseColor: '#00BD6B',
+          baseColor: '#017D73',
           thresholds: [],
           thresholdStyle: ThresholdMode.Off,
         },

src/plugins/explore/public/components/visualizations/line/line_vis_config.test.ts

@@ -59,7 +59,7 @@ describe('line_vis_config', () => {
 
       // Verify threshold settings
       expect(defaults.thresholdOptions).toMatchObject({
-        baseColor: '#00BD6B',
+        baseColor: '#017D73',
         thresholds: [],
         thresholdStyle: ThresholdMode.Off,
       });
@@ -129,7 +129,7 @@ describe('line_vis_config', () => {
           addLegend: true,
           legendPosition: Positions.RIGHT,
           thresholdOptions: {
-            baseColor: '#00BD6B',
+            baseColor: '#017D73',
             thresholds: [],
             thresholdStyle: ThresholdMode.Solid,
           },

src/plugins/explore/public/components/visualizations/metric/metric_vis_config.test.tsx

@@ -32,7 +32,7 @@ describe('createMetrictmapeConfig', () => {
     expect(defaults.title).toBe('');
     expect(defaults.fontSize).toBe(undefined);
     expect(defaults.thresholdOptions).toMatchObject({
-      baseColor: '#00BD6B',
+      baseColor: '#017D73',
       thresholds: [],
     });
   });
@@ -48,7 +48,7 @@ describe('createMetrictmapeConfig', () => {
         title: '',
         fontSize: 60,
         useThresholdColor: false,
-        thresholdOptions: { thresholds: [], baseColor: '#00BD6B' },
+        thresholdOptions: { thresholds: [], baseColor: '#017D73' },
       },
       onStyleChange: jest.fn(),
       numericalColumns: [],

src/plugins/explore/public/components/visualizations/metric/to_expression.ts

@@ -8,6 +8,7 @@ import { VisColumn, VEGASCHEMA, AxisRole, AxisColumnMappings, Threshold } from '
 import { getTooltipFormat } from '../utils/utils';
 import { calculatePercentage, calculateValue } from '../utils/calculation';
 import { getColors } from '../theme/default_colors';
+import { resolveColor } from '../theme/color_utils';
 import { DEFAULT_OPACITY } from '../constants';
 import { getUnitById, showDisplayValue } from '../style_panel/unit/collection';
 import {
@@ -82,7 +83,7 @@ export const createSingleMetric = (
       calculatedValue
     );
 
-    const fillColor = useThresholdColor ? textColor : colorPalette.text;
+    const fillColor = useThresholdColor ? resolveColor(textColor) : colorPalette.text;
 
     return fillColor;
   }

src/plugins/explore/public/components/visualizations/scatter/scatter_vis_config.test.tsx

@@ -48,7 +48,7 @@ describe('createScatterConfig', () => {
     expect(defaults.titleOptions.show).toBe(false);
     expect(defaults.titleOptions.titleName).toBe('');
     expect(defaults.thresholdOptions).toMatchObject({
-      baseColor: '#00BD6B',
+      baseColor: '#017D73',
       thresholds: [],
       thresholdStyle: ThresholdMode.Off,
     });

src/plugins/explore/public/components/visualizations/style_panel/color_group_panel/color_group_button.tsx

@@ -35,7 +35,6 @@ export const ColorGroupButton: React.FC<ColorGroupButtonProps> = ({ buttonColor,
       closePopover={() => setPopover(false)}
       panelPaddingSize="s"
       anchorPosition="downLeft"
-      hasArrow={false}
     >
       <ColorGroupPanel color={buttonColor} onChange={onChange} onClose={() => setPopover(false)} />
     </EuiPopover>

src/plugins/explore/public/components/visualizations/style_panel/color_group_panel/color_group_panel.test.tsx

@@ -16,7 +16,11 @@ jest.mock('../../../visualizations/theme/color_utils', () => ({
       blue1: '#5885bfff',
     },
   }),
-  resolveColor: () => '#ff0000',
+  resolveColor: jest.fn((color) => color),
+}));
+
+jest.mock('../../../visualizations/theme/default_colors', () => ({
+  getColors: () => [],
 }));
 
 jest.mock('../../utils/use_debounced_value', () => ({

src/plugins/explore/public/components/visualizations/style_panel/color_group_panel/color_group_panel.tsx

@@ -16,6 +16,7 @@ import {
   EuiSpacer,
 } from '@elastic/eui';
 import { getColorGroups, resolveColor } from '../../../visualizations/theme/color_utils';
+import { getColors } from '../../../visualizations/theme/default_colors';
 import { useDebouncedValue } from '../../utils/use_debounced_value';
 import './color_group_panel.scss';
 
@@ -27,6 +28,16 @@ interface ColorGroupPanelProps {
 export const ColorGroupPanel: React.FC<ColorGroupPanelProps> = ({ color, onChange, onClose }) => {
   const colors = getColorGroups();
 
+  const defaultColors = getColors();
+
+  const THRESHOLD_COLORS = [
+    defaultColors.statusGreen,
+    defaultColors.statusYellow,
+    defaultColors.statusOrange,
+    defaultColors.statusRed,
+    defaultColors.statusBlue,
+  ];
+
   const [debouncedColor, setDebouncedColor] = useDebouncedValue<string | undefined>(
     color,
     (val) => onChange(val),
@@ -103,15 +114,20 @@ export const ColorGroupPanel: React.FC<ColorGroupPanelProps> = ({ color, onChang
       }),
       content: (
         <EuiPanel paddingSize="s" hasBorder={false} hasShadow={false}>
-          <EuiColorPicker
-            compressed
-            onChange={(val) => {
-              setDebouncedColor(val);
-              onClose();
-            }}
-            color={resolveColor(debouncedColor)}
-            display="inline"
-          />
+          <EuiFlexGroup justifyContent="center">
+            <EuiFlexItem grow={false}>
+              <EuiColorPicker
+                compressed
+                onChange={(val) => {
+                  setDebouncedColor(val);
+                  onClose();
+                }}
+                color={resolveColor(debouncedColor)}
+                display="inline"
+                swatches={THRESHOLD_COLORS}
+              />
+            </EuiFlexItem>
+          </EuiFlexGroup>
         </EuiPanel>
       ),
     },
@@ -127,6 +143,7 @@ export const ColorGroupPanel: React.FC<ColorGroupPanelProps> = ({ color, onChang
           size="s"
           autoFocus="selected"
           tabs={tabs}
+          expand={true}
         />
       ),
     },

src/plugins/explore/public/components/visualizations/style_panel/color_group_panel/select_color_button.tsx

@@ -31,7 +31,6 @@ export const SelectColorButton: React.FC<SelectColorButtonProps> = ({ onChange }
       closePopover={() => setPopover(false)}
       panelPaddingSize="s"
       anchorPosition="downLeft"
-      hasArrow={false}
     >
       <ColorGroupPanel onChange={onChange} onClose={() => setPopover(false)} />
     </EuiPopover>

src/plugins/explore/public/components/visualizations/style_panel/threshold/threshold_custom_values.test.tsx

@@ -36,7 +36,7 @@ describe('ThresholdCustomValues component', () => {
     fireEvent.click(screen.getByText('+ Add threshold'));
     expect(handleChange).toHaveBeenCalledWith([
       { value: 0, color: '#f8f8f8ff' },
-      { value: 100, color: '#FF6A3D' },
+      { value: 100, color: '#D76813' },
     ]);
   });