[Lens] Categorical color palettes

src/plugins/charts/common/index.ts

@@ -18,3 +18,4 @@
  */
 
 export const COLOR_MAPPING_SETTING = 'visualization:colorMapping';
+export * from './palette';

src/plugins/charts/common/palette.test.ts

@@ -0,0 +1,85 @@
+/*
+ * 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 { palette, defaultCustomColors } from './palette';
+import { ExecutionContext } from '../../expressions/common';
+
+describe('palette', () => {
+  const fn = (
+    context: null,
+    args: { color?: string[]; gradient?: boolean; reverse?: boolean } = {}
+  ) => {
+    return palette().fn(
+      context,
+      { gradient: false, reverse: false, ...args },
+      {} as ExecutionContext
+    );
+  };
+
+  it('results a palette', () => {
+    const result = fn(null);
+    expect(result).toHaveProperty('type', 'palette');
+  });
+
+  describe('args', () => {
+    describe('color', () => {
+      it('sets colors', () => {
+        const result = fn(null, { color: ['red', 'green', 'blue'] });
+        expect(result.params!.colors).toEqual(['red', 'green', 'blue']);
+      });
+
+      it('defaults to pault_tor_14 colors', () => {
+        const result = fn(null);
+        expect(result.params!.colors).toEqual(defaultCustomColors);
+      });
+    });
+
+    describe('gradient', () => {
+      it('sets gradient', () => {
+        let result = fn(null, { gradient: true });
+        expect(result.params).toHaveProperty('gradient', true);
+
+        result = fn(null, { gradient: false });
+        expect(result.params).toHaveProperty('gradient', false);
+      });
+
+      it('defaults to false', () => {
+        const result = fn(null);
+        expect(result.params).toHaveProperty('gradient', false);
+      });
+    });
+
+    describe('reverse', () => {
+      it('reverses order of the colors', () => {
+        const result = fn(null, { reverse: true });
+        expect(result.params!.colors).toEqual(defaultCustomColors.reverse());
+      });
+
+      it('keeps the original order of the colors', () => {
+        const result = fn(null, { reverse: false });
+        expect(result.params!.colors).toEqual(defaultCustomColors);
+      });
+
+      it(`defaults to 'false`, () => {
+        const result = fn(null);
+        expect(result.params!.colors).toEqual(defaultCustomColors);
+      });
+    });
+  });
+});

src/plugins/charts/common/palette.ts

@@ -0,0 +1,162 @@
+/*
+ * 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 { ExpressionFunctionDefinition } from 'src/plugins/expressions/common';
+import { i18n } from '@kbn/i18n';
+
+export interface CustomPaletteArguments {
+  color?: string[];
+  gradient: boolean;
+  reverse?: boolean;
+}
+
+export interface CustomPaletteState {
+  colors: string[];
+  gradient: boolean;
+}
+
+export interface SystemPaletteArguments {
+  name: string;
+  params: unknown;
+}
+
+export interface PaletteOutput<T = unknown> {
+  type: 'palette';
+  name: string;
+  params?: T;
+}
+export const defaultCustomColors = [
+  '#882E72',
+  '#B178A6',
+  '#D6C1DE',
+  '#1965B0',
+  '#5289C7',
+  '#7BAFDE',
+  '#4EB265',
+  '#90C987',
+  '#CAE0AB',
+  '#F7EE55',
+  '#F6C141',
+  '#F1932D',
+  '#E8601C',
+  '#DC050C',
+];
+
+export function palette(): ExpressionFunctionDefinition<
+  'palette',
+  null,
+  CustomPaletteArguments,
+  PaletteOutput<CustomPaletteState>
+> {
+  return {
+    name: 'palette',
+    aliases: [],
+    type: 'palette',
+    inputTypes: ['null'],
+    help: i18n.translate('charts.functions.paletteHelpText', {
+      defaultMessage: 'Creates a color palette.',
+    }),
+    args: {
+      color: {
+        aliases: ['_'],
+        multi: true,
+        types: ['string'],
+        help: i18n.translate('charts.functions.palette.args.colorHelpText', {
+          defaultMessage:
+            'The palette colors. Accepts an {html} color name, {hex}, {hsl}, {hsla}, {rgb}, or {rgba}.',
+          values: {
+            html: 'HTML',
+            rgb: 'RGB',
+            rgba: 'RGBA',
+            hex: 'HEX',
+            hsl: 'HSL',
+            hsla: 'HSLA',
+          },
+        }),
+        required: false,
+      },
+      gradient: {
+        types: ['boolean'],
+        default: false,
+        help: i18n.translate('charts.functions.palette.args.gradientHelpText', {
+          defaultMessage: 'Make a gradient palette where supported?',
+        }),
+        options: [true, false],
+      },
+      reverse: {
+        types: ['boolean'],
+        default: false,
+        help: i18n.translate('charts.functions.palette.args.reverseHelpText', {
+          defaultMessage: 'Reverse the palette?',
+        }),
+        options: [true, false],
+      },
+    },
+    fn: (input, args) => {
+      const { color, reverse, gradient } = args;
+      const colors = ([] as string[]).concat(color || defaultCustomColors);
+
+      return {
+        type: 'palette',
+        name: 'custom',
+        params: {
+          colors: reverse ? colors.reverse() : colors,
+          gradient,
+        },
+      };
+    },
+  };
+}
+
+export function systemPalette(): ExpressionFunctionDefinition<
+  'system_palette',
+  null,
+  SystemPaletteArguments,
+  PaletteOutput
+> {
+  return {
+    name: 'system_palette',
+    aliases: [],
+    type: 'palette',
+    inputTypes: ['null'],
+    help: i18n.translate('charts.functions.systemPaletteHelpText', {
+      defaultMessage: 'Creates a dynamic color palette.',
+    }),
+    args: {
+      name: {
+        types: ['string'],
+        help: i18n.translate('charts.functions.systemPalette.args.nameHelpText', {
+          defaultMessage: 'Name of the palette in the palette list',
+        }),
+      },
+      params: {
+        help: i18n.translate('charts.functions.systemPalette.args.paramsHelpText', {
+          defaultMessage: 'Palette specific params of the palette',
+        }),
+      },
+    },
+    fn: (input, args) => {
+      return {
+        type: 'palette',
+        name: args.name,
+        params: args.params,
+      };
+    },
+  };
+}

src/plugins/charts/kibana.json

@@ -3,5 +3,6 @@
   "version": "kibana",
   "server": true,
   "ui": true,
+  "requiredPlugins": ["expressions"],
   "requiredBundles": ["visDefaultEditor"]
 }

src/plugins/charts/public/index.ts

@@ -21,7 +21,13 @@ import { ChartsPlugin } from './plugin';
 
 export const plugin = () => new ChartsPlugin();
 
-export type ChartsPluginSetup = ReturnType<ChartsPlugin['setup']>;
-export type ChartsPluginStart = ReturnType<ChartsPlugin['start']>;
+export { ChartsPluginSetup, ChartsPluginStart } from './plugin';
 
 export * from './static';
+export * from './services/palettes/types';
+export {
+  PaletteOutput,
+  CustomPaletteArguments,
+  CustomPaletteState,
+  SystemPaletteArguments,
+} from '../common';

src/plugins/charts/public/mocks.ts

@@ -19,24 +19,28 @@
 
 import { ChartsPlugin } from './plugin';
 import { themeServiceMock } from './services/theme/mock';
-import { colorsServiceMock } from './services/colors/mock';
+import { colorsServiceMock } from './services/legacy_colors/mock';
+import { getPaletteRegistry, paletteServiceMock } from './services/palettes/mock';
 
 export type Setup = jest.Mocked<ReturnType<ChartsPlugin['setup']>>;
 export type Start = jest.Mocked<ReturnType<ChartsPlugin['start']>>;
 
 const createSetupContract = (): Setup => ({
-  colors: colorsServiceMock,
+  legacyColors: colorsServiceMock,
   theme: themeServiceMock,
+  palettes: paletteServiceMock.setup({} as any, {} as any),
 });
 
 const createStartContract = (): Start => ({
-  colors: colorsServiceMock,
+  legacyColors: colorsServiceMock,
   theme: themeServiceMock,
+  palettes: paletteServiceMock.setup({} as any, {} as any),
 });
 
 export { colorMapsMock } from './static/color_maps/mock';
 
 export const chartPluginMock = {
   createSetupContract,
   createStartContract,
+  createPaletteRegistry: getPaletteRegistry,
 };

src/plugins/charts/public/plugin.ts

@@ -18,16 +18,24 @@
  */
 
 import { Plugin, CoreSetup } from 'kibana/public';
+import { ExpressionsSetup } from '../../expressions/public';
+import { palette, systemPalette } from '../common';
 
-import { ThemeService, ColorsService } from './services';
+import { ThemeService, LegacyColorsService } from './services';
+import { PaletteService } from './services/palettes/service';
 
 export type Theme = Omit<ThemeService, 'init'>;
-export type Color = Omit<ColorsService, 'init'>;
+export type Color = Omit<LegacyColorsService, 'init'>;
+
+interface SetupDependencies {
+  expressions: ExpressionsSetup;
+}
 
 /** @public */
 export interface ChartsPluginSetup {
-  colors: Color;
+  legacyColors: Color;
   theme: Theme;
+  palettes: ReturnType<PaletteService['setup']>;
 }
 
 /** @public */
@@ -36,22 +44,30 @@ export type ChartsPluginStart = ChartsPluginSetup;
 /** @public */
 export class ChartsPlugin implements Plugin<ChartsPluginSetup, ChartsPluginStart> {
   private readonly themeService = new ThemeService();
-  private readonly colorsService = new ColorsService();
+  private readonly legacyColorsService = new LegacyColorsService();
+  private readonly paletteService = new PaletteService();
+
+  private palettes: undefined | ReturnType<PaletteService['setup']>;
 
-  public setup({ uiSettings }: CoreSetup): ChartsPluginSetup {
-    this.themeService.init(uiSettings);
-    this.colorsService.init(uiSettings);
+  public setup(core: CoreSetup, dependencies: SetupDependencies): ChartsPluginSetup {
+    dependencies.expressions.registerFunction(palette);
+    dependencies.expressions.registerFunction(systemPalette);
+    this.themeService.init(core.uiSettings);
+    this.legacyColorsService.init(core.uiSettings);
+    this.palettes = this.paletteService.setup(core, this.legacyColorsService);
 
     return {
-      colors: this.colorsService,
+      legacyColors: this.legacyColorsService,
       theme: this.themeService,
+      palettes: this.palettes,
     };
   }
 
   public start(): ChartsPluginStart {
     return {
-      colors: this.colorsService,
+      legacyColors: this.legacyColorsService,
       theme: this.themeService,
+      palettes: this.palettes!,
     };
   }
 }

src/plugins/charts/public/services/index.ts

@@ -17,5 +17,5 @@
  * under the License.
  */
 
-export { ColorsService } from './colors';
+export { LegacyColorsService } from './legacy_colors';
 export { ThemeService } from './theme';