[XY axis] Implement new palette service

docs/development/plugins/expressions/public/kibana-plugin-plugins-expressions-public.executioncontext.issynccolorsenabled.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [kibana-plugin-plugins-expressions-public](./kibana-plugin-plugins-expressions-public.md) &gt; [ExecutionContext](./kibana-plugin-plugins-expressions-public.executioncontext.md) &gt; [isSyncColorsEnabled](./kibana-plugin-plugins-expressions-public.executioncontext.issynccolorsenabled.md)
+
+## ExecutionContext.isSyncColorsEnabled property
+
+Returns the state (true\|false) of the sync colors across panels switch.
+
+<b>Signature:</b>
+
+```typescript
+isSyncColorsEnabled?: () => boolean;
+```

docs/development/plugins/expressions/public/kibana-plugin-plugins-expressions-public.executioncontext.md

@@ -22,6 +22,7 @@ export interface ExecutionContext<InspectorAdapters extends Adapters = Adapters,
 |  [getSearchContext](./kibana-plugin-plugins-expressions-public.executioncontext.getsearchcontext.md) | <code>() =&gt; ExecutionContextSearch</code> | Get search context of the expression. |
 |  [getSearchSessionId](./kibana-plugin-plugins-expressions-public.executioncontext.getsearchsessionid.md) | <code>() =&gt; string &#124; undefined</code> | Search context in which expression should operate. |
 |  [inspectorAdapters](./kibana-plugin-plugins-expressions-public.executioncontext.inspectoradapters.md) | <code>InspectorAdapters</code> | Adapters for <code>inspector</code> plugin. |
+|  [isSyncColorsEnabled](./kibana-plugin-plugins-expressions-public.executioncontext.issynccolorsenabled.md) | <code>() =&gt; boolean</code> | Returns the state (true\|false) of the sync colors across panels switch. |
 |  [types](./kibana-plugin-plugins-expressions-public.executioncontext.types.md) | <code>Record&lt;string, ExpressionType&gt;</code> | A map of available expression types. |
 |  [variables](./kibana-plugin-plugins-expressions-public.executioncontext.variables.md) | <code>Record&lt;string, unknown&gt;</code> | Context variables that can be consumed using <code>var</code> and <code>var_set</code> functions. |
 

docs/development/plugins/expressions/server/kibana-plugin-plugins-expressions-server.executioncontext.issynccolorsenabled.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [kibana-plugin-plugins-expressions-server](./kibana-plugin-plugins-expressions-server.md) &gt; [ExecutionContext](./kibana-plugin-plugins-expressions-server.executioncontext.md) &gt; [isSyncColorsEnabled](./kibana-plugin-plugins-expressions-server.executioncontext.issynccolorsenabled.md)
+
+## ExecutionContext.isSyncColorsEnabled property
+
+Returns the state (true\|false) of the sync colors across panels switch.
+
+<b>Signature:</b>
+
+```typescript
+isSyncColorsEnabled?: () => boolean;
+```

docs/development/plugins/expressions/server/kibana-plugin-plugins-expressions-server.executioncontext.md

@@ -22,6 +22,7 @@ export interface ExecutionContext<InspectorAdapters extends Adapters = Adapters,
 |  [getSearchContext](./kibana-plugin-plugins-expressions-server.executioncontext.getsearchcontext.md) | <code>() =&gt; ExecutionContextSearch</code> | Get search context of the expression. |
 |  [getSearchSessionId](./kibana-plugin-plugins-expressions-server.executioncontext.getsearchsessionid.md) | <code>() =&gt; string &#124; undefined</code> | Search context in which expression should operate. |
 |  [inspectorAdapters](./kibana-plugin-plugins-expressions-server.executioncontext.inspectoradapters.md) | <code>InspectorAdapters</code> | Adapters for <code>inspector</code> plugin. |
+|  [isSyncColorsEnabled](./kibana-plugin-plugins-expressions-server.executioncontext.issynccolorsenabled.md) | <code>() =&gt; boolean</code> | Returns the state (true\|false) of the sync colors across panels switch. |
 |  [types](./kibana-plugin-plugins-expressions-server.executioncontext.types.md) | <code>Record&lt;string, ExpressionType&gt;</code> | A map of available expression types. |
 |  [variables](./kibana-plugin-plugins-expressions-server.executioncontext.variables.md) | <code>Record&lt;string, unknown&gt;</code> | Context variables that can be consumed using <code>var</code> and <code>var_set</code> functions. |
 

src/plugins/expressions/common/execution/execution.ts

@@ -183,6 +183,7 @@ export class Execution<
       logDatatable: (name: string, datatable: Datatable) => {
         inspectorAdapters.tables[name] = datatable;
       },
+      isSyncColorsEnabled: () => execution.params.syncColors,
       ...(execution.params as any).extraContext,
     };
   }

src/plugins/expressions/common/execution/types.ts

@@ -83,6 +83,11 @@ export interface ExecutionContext<
     type: string,
     id: string
   ) => Promise<SavedObject<T>>;
+
+  /**
+   * Returns the state (true|false) of the sync colors across panels switch.
+   */
+  isSyncColorsEnabled?: () => boolean;
 }
 
 /**

src/plugins/expressions/common/service/expressions_services.ts

@@ -70,6 +70,8 @@ export interface ExpressionExecutionParams {
 
   searchSessionId?: string;
 
+  syncColors?: boolean;
+
   inspectorAdapters?: Adapters;
 }
 

src/plugins/expressions/public/loader.ts

@@ -154,6 +154,7 @@ export class ExpressionLoader {
       inspectorAdapters: params.inspectorAdapters,
       searchSessionId: params.searchSessionId,
       debug: params.debug,
+      syncColors: params.syncColors,
     });
 
     const prevDataHandler = this.execution;
@@ -189,6 +190,7 @@ export class ExpressionLoader {
     if (params.searchSessionId && this.params) {
       this.params.searchSessionId = params.searchSessionId;
     }
+    this.params.syncColors = params.syncColors;
     this.params.debug = Boolean(params.debug);
 
     this.params.inspectorAdapters = (params.inspectorAdapters ||

src/plugins/expressions/public/public.api.md

@@ -143,6 +143,7 @@ export interface ExecutionContext<InspectorAdapters extends Adapters = Adapters,
     getSearchContext: () => ExecutionContextSearch;
     getSearchSessionId: () => string | undefined;
     inspectorAdapters: InspectorAdapters;
+    isSyncColorsEnabled?: () => boolean;
     types: Record<string, ExpressionType>;
     variables: Record<string, unknown>;
 }

src/plugins/expressions/server/server.api.md

@@ -141,6 +141,7 @@ export interface ExecutionContext<InspectorAdapters extends Adapters = Adapters,
     getSearchContext: () => ExecutionContextSearch;
     getSearchSessionId: () => string | undefined;
     inspectorAdapters: InspectorAdapters;
+    isSyncColorsEnabled?: () => boolean;
     types: Record<string, ExpressionType>;
     variables: Record<string, unknown>;
 }

src/plugins/vis_default_editor/public/components/controls/palette_picker.test.tsx

@@ -0,0 +1,59 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+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';
+
+describe('PalettePicker', function () {
+  let props: PalettePickerProps<'palette'>;
+  let component: ReactWrapper<PalettePickerProps<'palette'>>;
+
+  beforeAll(() => {
+    props = {
+      palettes: chartPluginMock.createPaletteRegistry(),
+      paramName: 'palette',
+      activePalette: {
+        type: 'palette',
+        name: 'kibana_palette',
+      },
+      setPalette: jest.fn(),
+    };
+  });
+
+  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');
+  });
+});

src/plugins/vis_default_editor/public/components/controls/palette_picker.tsx

@@ -0,0 +1,75 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+import { PaletteOutput, PaletteRegistry } from 'src/plugins/charts/public';
+import { EuiColorPalettePicker } from '@elastic/eui';
+import { EuiFormRow } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+
+export interface PalettePickerProps<ParamName extends string> {
+  activePalette?: PaletteOutput;
+  palettes: PaletteRegistry;
+  paramName: ParamName;
+  setPalette: (paramName: ParamName, value: PaletteOutput) => void;
+}
+
+export function PalettePicker<ParamName extends string>({
+  activePalette,
+  palettes,
+  paramName,
+  setPalette,
+}: PalettePickerProps<ParamName>) {
+  return (
+    <EuiFormRow
+      fullWidth
+      label={i18n.translate('visDefaultEditor.palettePicker.label', {
+        defaultMessage: 'Color palette',
+      })}
+    >
+      <EuiColorPalettePicker
+        fullWidth
+        data-test-subj="visEditorPalettePicker"
+        compressed
+        palettes={palettes
+          .getAll()
+          .filter(({ internal }) => !internal)
+          .map(({ id, title, getColors }) => {
+            return {
+              value: id,
+              title,
+              type: 'fixed',
+              palette: getColors(
+                10,
+                id === activePalette?.name ? activePalette?.params : undefined
+              ),
+            };
+          })}
+        onChange={(newPalette) => {
+          setPalette(paramName, {
+            type: 'palette',
+            name: newPalette,
+          });
+        }}
+        valueOfSelected={activePalette?.name || 'default'}
+        selectionDisplay={'palette'}
+      />
+    </EuiFormRow>
+  );
+}

src/plugins/vis_default_editor/public/index.ts

@@ -23,6 +23,7 @@ import { VisDefaultEditorPlugin } from './plugin';
 
 export { DefaultEditorController };
 export { useValidation } from './components/controls/utils';
+export { PalettePicker } from './components/controls/palette_picker';
 export * from './components/options';
 export { RangesParamEditor, RangeValues } from './components/controls/ranges';
 export * from './editor_size';

src/plugins/vis_type_xy/public/editor/components/options/point_series/elastic_charts_options.tsx

@@ -17,20 +17,26 @@
  * under the License.
  */
 
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 
 import { i18n } from '@kbn/i18n';
 import { METRIC_TYPE } from '@kbn/analytics';
 
-import { SelectOption, SwitchOption } from '../../../../../../vis_default_editor/public';
+import {
+  SelectOption,
+  SwitchOption,
+  PalettePicker,
+} from '../../../../../../vis_default_editor/public';
+import { PaletteRegistry } from '../../../../../../charts/public';
 
 import { ChartType } from '../../../../../common';
 import { VisParams } from '../../../../types';
 import { ValidationVisOptionsProps } from '../../common';
-import { getTrackUiMetric } from '../../../../services';
+import { getPalettesService, getTrackUiMetric } from '../../../../services';
 
 export function ElasticChartsOptions(props: ValidationVisOptionsProps<VisParams>) {
   const trackUiMetric = getTrackUiMetric();
+  const [palettesRegistry, setPalettesRegistry] = useState<PaletteRegistry | null>(null);
   const { stateParams, setValue, vis, aggs } = props;
 
   const hasLineChart = stateParams.seriesParams.some(
@@ -39,6 +45,14 @@ export function ElasticChartsOptions(props: ValidationVisOptionsProps<VisParams>
       aggs.aggs.find(({ id }) => id === paramId)?.enabled
   );
 
+  useEffect(() => {
+    const fetchPalettes = async () => {
+      const palettes = await getPalettesService().getPalettes();
+      setPalettesRegistry(palettes);
+    };
+    fetchPalettes();
+  }, []);
+
   return (
     <>
       <SwitchOption
@@ -77,6 +91,20 @@ export function ElasticChartsOptions(props: ValidationVisOptionsProps<VisParams>
           }}
         />
       )}
+
+      {palettesRegistry && (
+        <PalettePicker
+          palettes={palettesRegistry}
+          activePalette={stateParams.palette}
+          paramName="palette"
+          setPalette={(paramName, value) => {
+            if (trackUiMetric) {
+              trackUiMetric(METRIC_TYPE.CLICK, 'palette_selected');
+            }
+            setValue(paramName, value);
+          }}
+        />
+      )}
     </>
   );
 }

src/plugins/vis_type_xy/public/plugin.ts

@@ -29,10 +29,10 @@ import {
   setDataActions,
   setFormatService,
   setThemeService,
-  setColorsService,
   setTimefilter,
   setUISettings,
   setDocLinks,
+  setPalettesService,
   setTrackUiMetric,
 } from './services';
 import { visTypesDefinitions } from './vis_types';
@@ -77,8 +77,7 @@ export class VisTypeXyPlugin
     if (!core.uiSettings.get(LEGACY_CHARTS_LIBRARY, false)) {
       setUISettings(core.uiSettings);
       setThemeService(charts.theme);
-      setColorsService(charts.legacyColors);
-
+      setPalettesService(charts.palettes);
       [createVisTypeXyVisFn].forEach(expressions.registerFunction);
       expressions.registerRenderer(xyVisRenderer);
       visTypesDefinitions.forEach(visualizations.createBaseVisualization);

src/plugins/vis_type_xy/public/services.ts

@@ -43,9 +43,9 @@ export const [getThemeService, setThemeService] = createGetterSetter<ChartsPlugi
   'xy charts.theme'
 );
 
-export const [getColorsService, setColorsService] = createGetterSetter<
-  ChartsPluginSetup['legacyColors']
->('xy charts.color');
+export const [getPalettesService, setPalettesService] = createGetterSetter<
+  ChartsPluginSetup['palettes']
+>('xy charts.palette');
 
 export const [getDocLinks, setDocLinks] = createGetterSetter<DocLinksStart>('DocLinks');
 

src/plugins/vis_type_xy/public/types/param.ts

@@ -18,7 +18,7 @@
  */
 import { Fit, Position } from '@elastic/charts';
 
-import { Style, Labels } from '../../../charts/public';
+import { Style, Labels, PaletteOutput } from '../../../charts/public';
 import { SchemaConfig } from '../../../visualizations/public';
 
 import { ChartType } from '../../common';
@@ -156,5 +156,6 @@ export interface VisParams {
    * Add for detailed tooltip option
    */
   detailedTooltip?: boolean;
+  palette: PaletteOutput;
   fittingFunction?: Exclude<Fit, 'explicit'>;
 }