[Maps] use EuiColorPalettePicker (#69190) (#71510)

* [Maps] use EuiColorPalettePicker and Eui palettes

* use new ramps to create mb style

* update ColorMapSelect to use EuiColorPalettePicker

* move color_utils test to color_palettes

* clean up heatmap constants

* tslint

* fix test expects

* fix merge mistake

* update jest expects

* remove .chromium folder

* another jest expect update

* remove charts from kibana.json

* remove unneeded jest.mock

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

Author: nreese

x-pack/plugins/maps/kibana.json

@@ -21,7 +21,6 @@
   "server": true,
   "extraPublicDirs": ["common/constants"],
   "requiredBundles": [
-    "charts",
     "kibanaReact",
     "kibanaUtils",
     "savedObjects"

x-pack/plugins/maps/public/classes/sources/es_geo_grid_source/clusters_layer_wizard.tsx

@@ -28,7 +28,7 @@ import {
   VECTOR_STYLES,
   STYLE_TYPE,
 } from '../../../../common/constants';
-import { COLOR_GRADIENTS } from '../../styles/color_utils';
+import { NUMERICAL_COLOR_PALETTES } from '../../styles/color_palettes';
 
 export const clustersLayerWizardConfig: LayerWizard = {
   categories: [LAYER_WIZARD_CATEGORY.ELASTICSEARCH],
@@ -57,7 +57,7 @@ export const clustersLayerWizardConfig: LayerWizard = {
                 name: COUNT_PROP_NAME,
                 origin: FIELD_ORIGIN.SOURCE,
               },
-              color: COLOR_GRADIENTS[0].value,
+              color: NUMERICAL_COLOR_PALETTES[0].value,
               type: COLOR_MAP_TYPE.ORDINAL,
             },
           },

x-pack/plugins/maps/public/classes/sources/es_pew_pew_source/point_2_point_layer_wizard.tsx

@@ -18,7 +18,7 @@ import {
   VECTOR_STYLES,
   STYLE_TYPE,
 } from '../../../../common/constants';
-import { COLOR_GRADIENTS } from '../../styles/color_utils';
+import { NUMERICAL_COLOR_PALETTES } from '../../styles/color_palettes';
 // @ts-ignore
 import { CreateSourceEditor } from './create_source_editor';
 import { LayerWizard, RenderWizardArguments } from '../../layers/layer_wizard_registry';
@@ -50,7 +50,7 @@ export const point2PointLayerWizardConfig: LayerWizard = {
                 name: COUNT_PROP_NAME,
                 origin: FIELD_ORIGIN.SOURCE,
               },
-              color: COLOR_GRADIENTS[0].value,
+              color: NUMERICAL_COLOR_PALETTES[0].value,
             },
           },
           [VECTOR_STYLES.LINE_WIDTH]: {

x-pack/plugins/maps/public/classes/styles/_index.scss

@@ -1,4 +1,4 @@
-@import 'components/color_gradient';
+@import 'heatmap/components/legend/color_gradient';
 @import 'vector/components/style_prop_editor';
 @import 'vector/components/color/color_stops';
 @import 'vector/components/symbol/icon_select';

x-pack/plugins/maps/public/classes/styles/color_palettes.test.ts

@@ -0,0 +1,58 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import {
+  getColorRampCenterColor,
+  getOrdinalMbColorRampStops,
+  getColorPalette,
+} from './color_palettes';
+
+describe('getColorPalette', () => {
+  it('Should create RGB color ramp', () => {
+    expect(getColorPalette('Blues')).toEqual([
+      '#ecf1f7',
+      '#d9e3ef',
+      '#c5d5e7',
+      '#b2c7df',
+      '#9eb9d8',
+      '#8bacd0',
+      '#769fc8',
+      '#6092c0',
+    ]);
+  });
+});
+
+describe('getColorRampCenterColor', () => {
+  it('Should get center color from color ramp', () => {
+    expect(getColorRampCenterColor('Blues')).toBe('#9eb9d8');
+  });
+});
+
+describe('getOrdinalMbColorRampStops', () => {
+  it('Should create color stops for custom range', () => {
+    expect(getOrdinalMbColorRampStops('Blues', 0, 1000)).toEqual([
+      0,
+      '#ecf1f7',
+      125,
+      '#d9e3ef',
+      250,
+      '#c5d5e7',
+      375,
+      '#b2c7df',
+      500,
+      '#9eb9d8',
+      625,
+      '#8bacd0',
+      750,
+      '#769fc8',
+      875,
+      '#6092c0',
+    ]);
+  });
+
+  it('Should snap to end of color stops for identical range', () => {
+    expect(getOrdinalMbColorRampStops('Blues', 23, 23)).toEqual([23, '#6092c0']);
+  });
+});

x-pack/plugins/maps/public/classes/styles/color_palettes.ts

@@ -0,0 +1,172 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import tinycolor from 'tinycolor2';
+import {
+  // @ts-ignore
+  euiPaletteForStatus,
+  // @ts-ignore
+  euiPaletteForTemperature,
+  // @ts-ignore
+  euiPaletteCool,
+  // @ts-ignore
+  euiPaletteWarm,
+  // @ts-ignore
+  euiPaletteNegative,
+  // @ts-ignore
+  euiPalettePositive,
+  // @ts-ignore
+  euiPaletteGray,
+  // @ts-ignore
+  euiPaletteColorBlind,
+} from '@elastic/eui/lib/services';
+import { EuiColorPalettePickerPaletteProps } from '@elastic/eui';
+
+export const DEFAULT_HEATMAP_COLOR_RAMP_NAME = 'theclassic';
+
+export const DEFAULT_FILL_COLORS: string[] = euiPaletteColorBlind();
+export const DEFAULT_LINE_COLORS: string[] = [
+  ...DEFAULT_FILL_COLORS.map((color: string) => tinycolor(color).darken().toHexString()),
+  // Explicitly add black & white as border color options
+  '#000',
+  '#FFF',
+];
+
+const COLOR_PALETTES: EuiColorPalettePickerPaletteProps[] = [
+  {
+    value: 'Blues',
+    palette: euiPaletteCool(8),
+    type: 'gradient',
+  },
+  {
+    value: 'Greens',
+    palette: euiPalettePositive(8),
+    type: 'gradient',
+  },
+  {
+    value: 'Greys',
+    palette: euiPaletteGray(8),
+    type: 'gradient',
+  },
+  {
+    value: 'Reds',
+    palette: euiPaletteNegative(8),
+    type: 'gradient',
+  },
+  {
+    value: 'Yellow to Red',
+    palette: euiPaletteWarm(8),
+    type: 'gradient',
+  },
+  {
+    value: 'Green to Red',
+    palette: euiPaletteForStatus(8),
+    type: 'gradient',
+  },
+  {
+    value: 'Blue to Red',
+    palette: euiPaletteForTemperature(8),
+    type: 'gradient',
+  },
+  {
+    value: DEFAULT_HEATMAP_COLOR_RAMP_NAME,
+    palette: [
+      'rgb(65, 105, 225)', // royalblue
+      'rgb(0, 256, 256)', // cyan
+      'rgb(0, 256, 0)', // lime
+      'rgb(256, 256, 0)', // yellow
+      'rgb(256, 0, 0)', // red
+    ],
+    type: 'gradient',
+  },
+  {
+    value: 'palette_0',
+    palette: euiPaletteColorBlind(),
+    type: 'fixed',
+  },
+  {
+    value: 'palette_20',
+    palette: euiPaletteColorBlind({ rotations: 2 }),
+    type: 'fixed',
+  },
+  {
+    value: 'palette_30',
+    palette: euiPaletteColorBlind({ rotations: 3 }),
+    type: 'fixed',
+  },
+];
+
+export const NUMERICAL_COLOR_PALETTES = COLOR_PALETTES.filter(
+  (palette: EuiColorPalettePickerPaletteProps) => {
+    return palette.type === 'gradient';
+  }
+);
+
+export const CATEGORICAL_COLOR_PALETTES = COLOR_PALETTES.filter(
+  (palette: EuiColorPalettePickerPaletteProps) => {
+    return palette.type === 'fixed';
+  }
+);
+
+export function getColorPalette(colorPaletteId: string): string[] {
+  const colorPalette = COLOR_PALETTES.find(({ value }: EuiColorPalettePickerPaletteProps) => {
+    return value === colorPaletteId;
+  });
+  return colorPalette ? (colorPalette.palette as string[]) : [];
+}
+
+export function getColorRampCenterColor(colorPaletteId: string): string | null {
+  if (!colorPaletteId) {
+    return null;
+  }
+  const palette = getColorPalette(colorPaletteId);
+  return palette.length === 0 ? null : palette[Math.floor(palette.length / 2)];
+}
+
+// Returns an array of color stops
+// [ stop_input_1: number, stop_output_1: color, stop_input_n: number, stop_output_n: color ]
+export function getOrdinalMbColorRampStops(
+  colorPaletteId: string,
+  min: number,
+  max: number
+): Array<number | string> | null {
+  if (!colorPaletteId) {
+    return null;
+  }
+
+  if (min > max) {
+    return null;
+  }
+
+  const palette = getColorPalette(colorPaletteId);
+  if (palette.length === 0) {
+    return null;
+  }
+
+  if (max === min) {
+    // just return single stop value
+    return [max, palette[palette.length - 1]];
+  }
+
+  const delta = max - min;
+  return palette.reduce(
+    (accu: Array<number | string>, stopColor: string, idx: number, srcArr: string[]) => {
+      const stopNumber = min + (delta * idx) / srcArr.length;
+      return [...accu, stopNumber, stopColor];
+    },
+    []
+  );
+}
+
+export function getLinearGradient(colorStrings: string[]): string {
+  const intervals = colorStrings.length;
+  let linearGradient = `linear-gradient(to right, ${colorStrings[0]} 0%,`;
+  for (let i = 1; i < intervals - 1; i++) {
+    linearGradient = `${linearGradient} ${colorStrings[i]} \
+      ${Math.floor((100 * i) / (intervals - 1))}%,`;
+  }
+  return `${linearGradient} ${colorStrings[colorStrings.length - 1]} 100%)`;
+}