Palette by terms

src/core/server/saved_objects/migrations/integration_tests/type_registrations.test.ts

@@ -64,6 +64,7 @@ const previouslyRegisteredTypes = [
   'legacy-url-alias',
   'lens',
   'lens-ui-telemetry',
+  'palette',
   'map',
   'maps-telemetry',
   'metrics-explorer-view',

src/plugins/charts/common/palette.ts

@@ -16,6 +16,7 @@ export interface CustomPaletteArguments {
   gradient: boolean;
   reverse?: boolean;
   stop?: number[];
+  term?: string[];
   range?: 'number' | 'percent';
   rangeMin?: number;
   rangeMax?: number;
@@ -26,6 +27,7 @@ export interface CustomPaletteState {
   colors: string[];
   gradient: boolean;
   stops: number[];
+  terms?: string[];
   range: 'number' | 'percent';
   rangeMin: number;
   rangeMax: number;
@@ -104,6 +106,15 @@ export function palette(): ExpressionFunctionDefinition<
         }),
         required: false,
       },
+      term: {
+        multi: true,
+        types: ['string'],
+        help: i18n.translate('charts.functions.palette.args.termHelpText', {
+          defaultMessage:
+            'The palette color terms. When used, it must be associated with each color.',
+        }),
+        required: false,
+      },
       continuity: {
         types: ['string'],
         options: ['above', 'below', 'all', 'none'],
@@ -142,13 +153,18 @@ export function palette(): ExpressionFunctionDefinition<
       },
     },
     fn: (input, args) => {
-      const { color, continuity, reverse, gradient, stop, range, rangeMin, rangeMax } = args;
+      const { color, continuity, reverse, gradient, stop, range, rangeMin, rangeMax, term } = args;
       const colors = ([] as string[]).concat(color || defaultCustomColors);
       const stops = ([] as number[]).concat(stop || []);
+      const terms = ([] as string[]).concat(term || []);
       if (stops.length > 0 && colors.length !== stops.length) {
         throw Error('When stop is used, each color must have an associated stop value.');
       }
 
+      if (terms.length > 0 && colors.length !== terms.length) {
+        throw Error('When term is used, each color must have an associated term value.');
+      }
+
       // If the user has defined stops, choose rangeMin/Max, provided by user or range,
       // taken from first/last element of ranges or default range (0 or 100).
       const calculateRange = (
@@ -165,6 +181,7 @@ export function palette(): ExpressionFunctionDefinition<
         name: 'custom',
         params: {
           colors: reverse ? colors.reverse() : colors,
+          terms,
           stops,
           range: range ?? 'percent',
           gradient,

src/plugins/charts/public/services/palettes/palettes.test.tsx

@@ -566,6 +566,7 @@ describe('palettes', () => {
               reverse: [false],
               continuity: ['above'],
               stop: [],
+              term: [],
               range: ['percent'],
               rangeMax: [],
               rangeMin: [],

src/plugins/charts/public/services/palettes/palettes.tsx

@@ -66,7 +66,7 @@ function buildRoundRobinCategoricalWithMappedColors(): Omit<PaletteDefinition, '
   return {
     id: 'default',
     getCategoricalColor: getColor,
-    getCategoricalColors: () => euiPaletteColorBlind(),
+    getCategoricalColors: (size?: number) => colors.slice(0, size ?? 10),
     toExpression: () => ({
       type: 'expression',
       chain: [
@@ -144,7 +144,7 @@ function buildSyncedKibanaPalette(
   return {
     id: 'kibana_palette',
     getCategoricalColor: getColor,
-    getCategoricalColors: () => colors.seedColors.slice(0, 10),
+    getCategoricalColors: (size?: number) => staticColors.slice(0, size ?? 10),
     toExpression: () => ({
       type: 'expression',
       chain: [
@@ -172,6 +172,7 @@ function buildCustomPalette(): PaletteDefinition {
         gradient: boolean;
         /** Stops values mark where colors end (non-inclusive value) */
         stops: number[];
+        terms: string[];
         /** Important: specify rangeMin/rangeMax if custom stops are defined! */
         rangeMax: number;
         rangeMin: number;
@@ -183,12 +184,19 @@ function buildCustomPalette(): PaletteDefinition {
     getCategoricalColor: (
       series: SeriesLayer[],
       chartConfiguration: ChartColorConfiguration = { behindText: false },
-      { colors, gradient }: { colors: string[]; gradient: boolean }
+      { colors, gradient, terms }: { colors: string[]; gradient: boolean; terms: string[] }
     ) => {
       const actualColors = gradient
         ? chroma.scale(colors).colors(series[0].totalSeriesAtDepth)
         : colors;
-      const outputColor = actualColors[series[0].rankAtDepth % actualColors.length];
+      let outputColor = actualColors[series[0].rankAtDepth % actualColors.length];
+
+      if (terms && terms.length > 0) {
+        const idx = terms.findIndex((term) => term === series[0].name);
+        if (idx !== -1) {
+          outputColor = colors[idx];
+        }
+      }
 
       if (!chartConfiguration.maxDepth || chartConfiguration.maxDepth === 1) {
         return outputColor;
@@ -205,11 +213,19 @@ function buildCustomPalette(): PaletteDefinition {
         gradient,
         stepped,
         stops,
-      }: { colors: string[]; gradient: boolean; stepped: boolean; stops: number[] } = {
+        terms,
+      }: {
+        colors: string[];
+        gradient: boolean;
+        stepped: boolean;
+        stops: number[];
+        terms: string[];
+      } = {
         colors: [],
         gradient: false,
         stepped: false,
         stops: [],
+        terms: [],
       }
     ) => {
       if (stepped) {
@@ -218,13 +234,21 @@ function buildCustomPalette(): PaletteDefinition {
         const finalStops = [...stops.map((stop) => (stop - offset) / range)];
         return chroma.scale(colors).domain(finalStops).colors(size);
       }
+      if (terms && terms.length > 0) {
+        const actualColors = gradient ? chroma.scale(colors).colors(terms.length) : colors;
+        return terms.map((term, index) => {
+          const outputColor = actualColors[index % actualColors.length];
+          return outputColor;
+        });
+      }
       return gradient ? chroma.scale(colors).colors(size) : colors;
     },
     canDynamicColoring: false,
     toExpression: ({
       colors,
       gradient,
       stops = [],
+      terms = [],
       rangeMax,
       rangeMin,
       rangeType = 'percent',
@@ -234,6 +258,7 @@ function buildCustomPalette(): PaletteDefinition {
       colors: string[];
       gradient: boolean;
       stops: number[];
+      terms: string[];
       rangeMax?: number;
       rangeMin?: number;
       rangeType: 'percent' | 'number';
@@ -251,6 +276,7 @@ function buildCustomPalette(): PaletteDefinition {
             reverse: [reverse],
             continuity: [continuity],
             stop: stops,
+            term: terms,
             range: [rangeType],
             rangeMax: rangeMax == null ? [] : [rangeMax],
             rangeMin: rangeMin == null ? [] : [rangeMin],

src/plugins/charts/server/plugin.ts

@@ -11,6 +11,7 @@ import { schema } from '@kbn/config-schema';
 import { CoreSetup, Plugin } from 'kibana/server';
 import { COLOR_MAPPING_SETTING, LEGACY_TIME_AXIS, palette, systemPalette } from '../common';
 import { ExpressionsServerSetup } from '../../expressions/server';
+import { setupSavedObjects } from './saved_objects';
 
 interface SetupDependencies {
   expressions: ExpressionsServerSetup;
@@ -20,6 +21,8 @@ export class ChartsServerPlugin implements Plugin<object, object> {
   public setup(core: CoreSetup, dependencies: SetupDependencies) {
     dependencies.expressions.registerFunction(palette);
     dependencies.expressions.registerFunction(systemPalette);
+    // setup palette saved objects type
+    setupSavedObjects(core);
     core.uiSettings.register({
       [COLOR_MAPPING_SETTING]: {
         name: i18n.translate('charts.advancedSettings.visualization.colorMappingTitle', {

src/plugins/charts/server/saved_objects.ts

@@ -0,0 +1,36 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { CoreSetup } from 'kibana/server';
+
+export function setupSavedObjects(core: CoreSetup) {
+  core.savedObjects.registerType({
+    name: 'palette',
+    hidden: false,
+    namespaceType: 'multiple-isolated',
+    management: {
+      icon: 'brush',
+      defaultSearchField: 'title',
+      importableAndExportable: true,
+      getTitle: (obj: { attributes: { title: string } }) => obj.attributes.title,
+    },
+    mappings: {
+      properties: {
+        title: {
+          type: 'text',
+        },
+        name: {
+          type: 'text',
+        },
+        params: {
+          type: 'flattened',
+        },
+      },
+    },
+  });
+}

x-pack/plugins/lens/common/constants.ts

@@ -13,6 +13,7 @@ export const PLUGIN_ID = 'lens';
 export const APP_ID = 'lens';
 export const LENS_EMBEDDABLE_TYPE = 'lens';
 export const DOC_TYPE = 'lens';
+export const PALETTE_DOC_TYPE = 'palette';
 export const NOT_INTERNATIONALIZED_PRODUCT_NAME = 'Lens Visualizations';
 export const BASE_API_URL = '/api/lens';
 export const LENS_EDIT_BY_VALUE = 'edit_by_value';

x-pack/plugins/lens/common/expressions/pie_chart/types.ts

@@ -6,7 +6,7 @@
  */
 
 import type { PaletteOutput } from '../../../../../../src/plugins/charts/common';
-import type { LensMultiTable, LayerType } from '../../types';
+import type { LensMultiTable, LayerType, CustomPaletteParams } from '../../types';
 
 export type PieChartTypes = 'donut' | 'pie' | 'treemap' | 'mosaic' | 'waffle';
 
@@ -32,7 +32,7 @@ export type PieLayerState = SharedPieLayerState & {
 export interface PieVisualizationState {
   shape: PieChartTypes;
   layers: PieLayerState[];
-  palette?: PaletteOutput;
+  palette?: PaletteOutput<CustomPaletteParams>;
 }
 
 export type PieExpressionArgs = SharedPieLayerState & {

x-pack/plugins/lens/common/expressions/xy_chart/layer_config.ts

@@ -7,7 +7,7 @@
 
 import type { PaletteOutput } from '../../../../../../src/plugins/charts/common';
 import type { ExpressionFunctionDefinition } from '../../../../../../src/plugins/expressions/common';
-import type { LayerType } from '../../types';
+import type { LayerType, CustomPaletteParams } from '../../types';
 import { layerTypes } from '../../constants';
 import { axisConfig, YConfig } from './axis_config';
 import type { SeriesType } from './series_type';
@@ -20,7 +20,7 @@ export interface XYLayerConfig {
   yConfig?: YConfig[];
   seriesType: SeriesType;
   splitAccessor?: string;
-  palette?: PaletteOutput;
+  palette?: PaletteOutput<CustomPaletteParams>;
   layerType: LayerType;
 }
 

x-pack/plugins/lens/common/types.ts

@@ -46,6 +46,11 @@ export interface ColorStop {
   stop: number;
 }
 
+export interface ColorTerm {
+  color: string;
+  term: string;
+}
+
 export interface CustomPaletteParams {
   name?: string;
   reverse?: boolean;
@@ -56,7 +61,10 @@ export interface CustomPaletteParams {
   rangeMax?: number;
   stops?: ColorStop[];
   colorStops?: ColorStop[];
+  colorTerms?: ColorTerm[];
   steps?: number;
+  title?: string;
+  paletteType?: string;
 }
 export type CustomPaletteParamsConfig = CustomPaletteParams & {
   maxSteps?: number;

x-pack/plugins/lens/public/datatable_visualization/components/dimension_editor.test.tsx

@@ -7,6 +7,7 @@
 
 import React from 'react';
 import { EuiButtonGroup, EuiComboBox, EuiFieldText } from '@elastic/eui';
+import type { SavedObjectsClientContract } from 'kibana/public';
 import { FramePublicAPI, Operation, VisualizationDimensionEditorProps } from '../../types';
 import { DatatableVisualizationState } from '../visualization';
 import { createMockDatasource, createMockFramePublicAPI } from '../../mocks';
@@ -24,6 +25,8 @@ describe('data table dimension editor', () => {
   let setState: (newState: DatatableVisualizationState) => void;
   let props: VisualizationDimensionEditorProps<DatatableVisualizationState> & {
     paletteService: PaletteRegistry;
+    savedObjectsClient: SavedObjectsClientContract;
+    canSavePalettes: boolean;
   };
 
   function testState(): DatatableVisualizationState {
@@ -60,6 +63,11 @@ describe('data table dimension editor', () => {
       },
     };
     setState = jest.fn();
+    const savedObjectsClient = {
+      find: jest.fn(() => Promise.resolve({ page: 1, total: 0, savedObjects: [] })),
+      create: jest.fn(() => Promise.resolve({ id: 'testid' })),
+      resolve: jest.fn(),
+    } as unknown as SavedObjectsClientContract;
     props = {
       accessor: 'foo',
       frame,
@@ -69,6 +77,8 @@ describe('data table dimension editor', () => {
       setState,
       paletteService: chartPluginMock.createPaletteRegistry(),
       panelRef: React.createRef(),
+      savedObjectsClient,
+      canSavePalettes: true,
     };
   });