diff --git a/src/plugins/charts/public/mocks.ts b/src/plugins/charts/public/mocks.ts index be8abb0dec22f..aa7518d1df9f1 100644 --- a/src/plugins/charts/public/mocks.ts +++ b/src/plugins/charts/public/mocks.ts @@ -10,7 +10,6 @@ import { ChartsPlugin } from './plugin'; import { themeServiceMock } from './services/theme/mock'; import { activeCursorMock } from './services/active_cursor/mock'; -import { colorsServiceMock } from './services/legacy_colors/mock'; import { getPaletteRegistry, paletteServiceMock } from './services/palettes/mock'; export { MOCK_SPARKLINE_THEME } from './services/theme/mock'; @@ -19,16 +18,14 @@ export type Setup = jest.Mocked>; export type Start = jest.Mocked>; const createSetupContract = (): Setup => ({ - legacyColors: colorsServiceMock, theme: themeServiceMock, - palettes: paletteServiceMock.setup({} as any), + palettes: paletteServiceMock.setup(), }); const createStartContract = (): Start => ({ - legacyColors: colorsServiceMock, theme: themeServiceMock, activeCursor: activeCursorMock, - palettes: paletteServiceMock.setup({} as any), + palettes: paletteServiceMock.setup(), }); export const chartPluginMock = { diff --git a/src/plugins/charts/public/plugin.ts b/src/plugins/charts/public/plugin.ts index 40dfaf2925a81..4d058c3beea32 100644 --- a/src/plugins/charts/public/plugin.ts +++ b/src/plugins/charts/public/plugin.ts @@ -11,7 +11,7 @@ import { Plugin, CoreSetup } from '@kbn/core/public'; import { ExpressionsSetup } from '@kbn/expressions-plugin/public'; import { palette, systemPalette } from '../common'; -import { ThemeService, LegacyColorsService } from './services'; +import { ThemeService } from './services'; import { PaletteService } from './services/palettes/service'; import { ActiveCursor } from './services/active_cursor'; @@ -21,7 +21,6 @@ interface SetupDependencies { /** @public */ export interface ChartsPluginSetup { - legacyColors: Omit; theme: Omit; palettes: ReturnType; } @@ -34,7 +33,6 @@ export type ChartsPluginStart = ChartsPluginSetup & { /** @public */ export class ChartsPlugin implements Plugin { private readonly themeService = new ThemeService(); - private readonly legacyColorsService = new LegacyColorsService(); private readonly paletteService = new PaletteService(); private readonly activeCursor = new ActiveCursor(); @@ -44,13 +42,11 @@ export class ChartsPlugin implements Plugin(); - -describe('Vislib Color Service', () => { - const colors = new LegacyColorsService(); - colors.init(); - - let color: any; - let previousConfig: any; - - const arr = ['good', 'better', 'best', 'never', 'let', 'it', 'rest']; - const arrayOfNumbers = [1, 2, 3, 4, 5]; - const arrayOfUndefinedValues = [undefined, undefined, undefined]; - const arrayOfObjects = [{}, {}, {}]; - const arrayOfBooleans = [true, false, true]; - const arrayOfNullValues = [null, null, null]; - const emptyObject = {}; - const nullValue = null; - - beforeEach(() => { - previousConfig = config.get(COLOR_MAPPING_SETTING); - config.set(COLOR_MAPPING_SETTING, {}); - color = colors.createColorLookupFunction(arr, {}); - }); - - afterEach(() => { - config.set(COLOR_MAPPING_SETTING, previousConfig); - }); - - it('should throw error if not initialized', () => { - const colorsBad = new LegacyColorsService(); - - expect(() => colorsBad.createColorLookupFunction(arr, {})).toThrowError(); - }); - - it('should throw an error if input is not an array', () => { - expect(() => { - // @ts-expect-error - colors.createColorLookupFunction(200); - }).toThrowError(); - - expect(() => { - // @ts-expect-error - colors.createColorLookupFunction('help'); - }).toThrowError(); - - expect(() => { - // @ts-expect-error - colors.createColorLookupFunction(true); - }).toThrowError(); - - expect(() => { - colors.createColorLookupFunction(); - }).toThrowError(); - - expect(() => { - // @ts-expect-error - colors.createColorLookupFunction(nullValue); - }).toThrowError(); - - expect(() => { - // @ts-expect-error - colors.createColorLookupFunction(emptyObject); - }).toThrowError(); - }); - - describe('when array is not composed of numbers, strings, or undefined values', () => { - it('should throw an error', () => { - expect(() => { - // @ts-expect-error - colors.createColorLookupFunction(arrayOfObjects); - }).toThrowError(); - - expect(() => { - // @ts-expect-error - colors.createColorLookupFunction(arrayOfBooleans); - }).toThrowError(); - - expect(() => { - // @ts-expect-error - colors.createColorLookupFunction(arrayOfNullValues); - }).toThrowError(); - }); - }); - - describe('when input is an array of strings, numbers, or undefined values', () => { - it('should not throw an error', () => { - expect(() => { - colors.createColorLookupFunction(arr); - }).not.toThrowError(); - - expect(() => { - colors.createColorLookupFunction(arrayOfNumbers); - }).not.toThrowError(); - - expect(() => { - // @ts-expect-error - colors.createColorLookupFunction(arrayOfUndefinedValues); - }).not.toThrowError(); - }); - }); - - it('should be a function', () => { - expect(typeof colors.createColorLookupFunction).toBe('function'); - }); - - it('should return a function', () => { - expect(typeof color).toBe('function'); - }); - - it('should return the first hex color in the seed colors array', () => { - expect(color(arr[0])).toBe(seedColors[0]); - }); - - it('should return the value from the mapped colors', () => { - expect(color(arr[1])).toBe(colors.mappedColors.get(arr[1])); - }); - - it('should return the value from the specified color mapping overrides', () => { - const colorFn = colors.createColorLookupFunction(arr, { good: 'red' }); - expect(colorFn('good')).toBe('red'); - }); -}); diff --git a/src/plugins/charts/public/services/legacy_colors/colors.ts b/src/plugins/charts/public/services/legacy_colors/colors.ts deleted file mode 100644 index 0c79a45c83aa0..0000000000000 --- a/src/plugins/charts/public/services/legacy_colors/colors.ts +++ /dev/null @@ -1,62 +0,0 @@ -/* - * 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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public - * License v3.0 only", or the "Server Side Public License, v 1". - */ - -import _ from 'lodash'; - -import { MappedColors } from '../mapped_colors'; -import { seedColors } from '../../static/colors'; - -/** - * Accepts an array of strings or numbers that are used to create a - * a lookup table that associates the values (key) with a hex color (value). - * Returns a function that accepts a value (i.e. a string or number) - * and returns a hex color associated with that value. - */ -export class LegacyColorsService { - private _mappedColors?: MappedColors; - - public readonly seedColors = seedColors; - - public get mappedColors() { - if (!this._mappedColors) { - throw new Error('ColorService not yet initialized'); - } - - return this._mappedColors; - } - - init() { - this._mappedColors = new MappedColors(); - } - - createColorLookupFunction( - arrayOfStringsOrNumbers?: Array, - colorMapping: Partial> = {} - ) { - if (!Array.isArray(arrayOfStringsOrNumbers)) { - throw new Error( - `createColorLookupFunction expects an array but recived: ${typeof arrayOfStringsOrNumbers}` - ); - } - - arrayOfStringsOrNumbers.forEach(function (val) { - if (!_.isString(val) && !_.isNumber(val) && !_.isUndefined(val)) { - throw new TypeError( - 'createColorLookupFunction expects an array of strings, numbers, or undefined values' - ); - } - }); - - this.mappedColors.mapKeys(arrayOfStringsOrNumbers); - - return (value: string | number) => { - return colorMapping[value] || this.mappedColors.get(value); - }; - } -} diff --git a/src/plugins/charts/public/services/legacy_colors/colors_palette.test.ts b/src/plugins/charts/public/services/legacy_colors/colors_palette.test.ts deleted file mode 100644 index b055256ca8b2d..0000000000000 --- a/src/plugins/charts/public/services/legacy_colors/colors_palette.test.ts +++ /dev/null @@ -1,87 +0,0 @@ -/* - * 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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public - * License v3.0 only", or the "Server Side Public License, v 1". - */ - -import { seedColors } from '../../static/colors'; -import { createColorPalette } from '../../static/colors'; - -describe('Color Palette', () => { - const num1 = 45; - const num2 = 72; - const num3 = 90; - const string = 'Welcome'; - const bool = true; - const nullValue = null; - const emptyArr: [] = []; - const emptyObject = {}; - let colorPalette: string[]; - - beforeEach(() => { - colorPalette = createColorPalette(num1); - }); - - it('should throw an error if input is not a number', () => { - expect(() => { - // @ts-expect-error - createColorPalette(string); - }).toThrowError(); - - expect(() => { - // @ts-expect-error - createColorPalette(bool); - }).toThrowError(); - - expect(() => { - // @ts-expect-error - createColorPalette(nullValue); - }).toThrowError(); - - expect(() => { - // @ts-expect-error - createColorPalette(emptyArr); - }).toThrowError(); - - expect(() => { - // @ts-expect-error - createColorPalette(emptyObject); - }).toThrowError(); - - expect(() => { - // @ts-expect-error - createColorPalette(); - }).toThrowError(); - }); - - it('should be a function', () => { - expect(typeof createColorPalette).toBe('function'); - }); - - it('should return an array', () => { - expect(colorPalette).toBeInstanceOf(Array); - }); - - it('should return an array of the same length as the input', () => { - expect(colorPalette.length).toBe(num1); - }); - - it('should return the seed color array when input length is 72', () => { - expect(createColorPalette(num2)[71]).toBe(seedColors[71]); - }); - - it('should return an array of the same length as the input when input is greater than 72', () => { - expect(createColorPalette(num3).length).toBe(num3); - }); - - it('should create new darker colors when input is greater than 72', () => { - expect(createColorPalette(num3)[72]).not.toEqual(seedColors[0]); - }); - - it('should create new colors and convert them correctly', () => { - expect(createColorPalette(num3)[72]).toEqual('#404ABF'); - }); -}); diff --git a/src/plugins/charts/public/services/legacy_colors/index.ts b/src/plugins/charts/public/services/legacy_colors/index.ts deleted file mode 100644 index da06062e1f8c5..0000000000000 --- a/src/plugins/charts/public/services/legacy_colors/index.ts +++ /dev/null @@ -1,10 +0,0 @@ -/* - * 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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public - * License v3.0 only", or the "Server Side Public License, v 1". - */ - -export { LegacyColorsService } from './colors'; diff --git a/src/plugins/charts/public/services/legacy_colors/mock.ts b/src/plugins/charts/public/services/legacy_colors/mock.ts deleted file mode 100644 index f85e0aa5e1fa6..0000000000000 --- a/src/plugins/charts/public/services/legacy_colors/mock.ts +++ /dev/null @@ -1,22 +0,0 @@ -/* - * 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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public - * License v3.0 only", or the "Server Side Public License, v 1". - */ - -import { LegacyColorsService } from './colors'; - -const colors = new LegacyColorsService(); -colors.init(); - -export const colorsServiceMock: LegacyColorsService = { - createColorLookupFunction: jest.fn(colors.createColorLookupFunction.bind(colors)), - mappedColors: { - mapKeys: jest.fn(), - get: jest.fn(), - getColorFromConfig: jest.fn(), - }, -} as any; diff --git a/src/plugins/charts/public/services/mapped_colors/mapped_colors.test.ts b/src/plugins/charts/public/services/mapped_colors/mapped_colors.test.ts index 82e5b11998642..73e02a2404ab9 100644 --- a/src/plugins/charts/public/services/mapped_colors/mapped_colors.test.ts +++ b/src/plugins/charts/public/services/mapped_colors/mapped_colors.test.ts @@ -8,75 +8,21 @@ */ import _ from 'lodash'; -import Color from 'color'; - -import { COLOR_MAPPING_SETTING } from '../../../common'; -import { seedColors } from '../../static/colors'; import { MappedColors } from './mapped_colors'; -// Local state for config -const config = new Map(); - describe('Mapped Colors', () => { const mappedColors = new MappedColors(); - let previousConfig: any; beforeEach(() => { - previousConfig = config.get(COLOR_MAPPING_SETTING); mappedColors.purge(); }); - afterEach(() => { - config.set(COLOR_MAPPING_SETTING, previousConfig); - }); - it('should properly map keys to unique colors', () => { - config.set(COLOR_MAPPING_SETTING, {}); - const arr = [1, 2, 3, 4, 5]; mappedColors.mapKeys(arr); expect(_(mappedColors.mapping).values().uniq().size()).toBe(arr.length); }); - it('should not include colors used by the config', () => { - const newConfig = { bar: seedColors[0] }; - config.set(COLOR_MAPPING_SETTING, newConfig); - - const arr = ['foo', 'baz', 'qux']; - mappedColors.mapKeys(arr); - - const colorValues = _(mappedColors.mapping).values(); - expect(colorValues).not.toContain(seedColors[0]); - expect(colorValues.uniq().size()).toBe(arr.length); - }); - - it('should create a unique array of colors even when config is set', () => { - const newConfig = { bar: seedColors[0] }; - config.set(COLOR_MAPPING_SETTING, newConfig); - - const arr = ['foo', 'bar', 'baz', 'qux']; - mappedColors.mapKeys(arr); - - const expectedSize = _(arr).difference(_.keys(newConfig)).size(); - expect(_(mappedColors.mapping).values().uniq().size()).toBe(expectedSize); - expect(mappedColors.get(arr[0])).not.toBe(seedColors[0]); - }); - - it('should treat different formats of colors as equal', () => { - const color = new Color(seedColors[0]); - const rgb = `rgb(${color.red()}, ${color.green()}, ${color.blue()})`; - const newConfig = { bar: rgb }; - config.set(COLOR_MAPPING_SETTING, newConfig); - - const arr = ['foo', 'bar', 'baz', 'qux']; - mappedColors.mapKeys(arr); - - const expectedSize = _(arr).difference(_.keys(newConfig)).size(); - expect(_(mappedColors.mapping).values().uniq().size()).toBe(expectedSize); - expect(mappedColors.get(arr[0])).not.toBe(seedColors[0]); - expect(mappedColors.get('bar')).toBe(seedColors[0]); - }); - it('should have a flush method that moves the current map to the old map', function () { const arr = [1, 2, 3, 4, 5]; mappedColors.mapKeys(arr); diff --git a/src/plugins/charts/public/services/palettes/palettes.test.tsx b/src/plugins/charts/public/services/palettes/palettes.test.tsx index ead33f6d099b6..666032cbcfc30 100644 --- a/src/plugins/charts/public/services/palettes/palettes.test.tsx +++ b/src/plugins/charts/public/services/palettes/palettes.test.tsx @@ -7,14 +7,10 @@ * License v3.0 only", or the "Server Side Public License, v 1". */ -import type { PaletteDefinition } from '@kbn/coloring'; -import { createColorPalette as createLegacyColorPalette } from '../..'; -import { buildPalettes } from './palettes'; -import { colorsServiceMock } from '../legacy_colors/mock'; +import { palettes } from './palettes'; import { euiPaletteColorBlind, euiPaletteColorBlindBehindText } from '@elastic/eui'; describe('palettes', () => { - const palettes: Record = buildPalettes(colorsServiceMock); describe('default palette', () => { describe('syncColors: false', () => { it('should return different colors based on behind text flag', () => { @@ -294,147 +290,6 @@ describe('palettes', () => { }); }); - describe('legacy palette', () => { - const palette = palettes.kibana_palette; - - beforeEach(() => { - (colorsServiceMock.mappedColors.mapKeys as jest.Mock).mockClear(); - (colorsServiceMock.mappedColors.getColorFromConfig as jest.Mock).mockReset(); - (colorsServiceMock.mappedColors.get as jest.Mock).mockClear(); - }); - - describe('syncColors: false', () => { - it('should not query legacy color service', () => { - palette.getCategoricalColor( - [ - { - name: 'abc', - rankAtDepth: 0, - totalSeriesAtDepth: 10, - }, - ], - { - syncColors: false, - } - ); - expect(colorsServiceMock.mappedColors.mapKeys).not.toHaveBeenCalled(); - expect(colorsServiceMock.mappedColors.get).not.toHaveBeenCalled(); - }); - - it('should respect the advanced settings color mapping', () => { - const configColorGetter = colorsServiceMock.mappedColors.getColorFromConfig as jest.Mock; - configColorGetter.mockImplementation(() => 'blue'); - const result = palette.getCategoricalColor( - [ - { - name: 'abc', - rankAtDepth: 2, - totalSeriesAtDepth: 10, - }, - { - name: 'def', - rankAtDepth: 0, - totalSeriesAtDepth: 10, - }, - ], - { - syncColors: false, - } - ); - expect(result).toEqual('blue'); - expect(configColorGetter).toHaveBeenCalledWith('abc'); - }); - - it('should return a color from the legacy palette based on position of first series', () => { - const result = palette.getCategoricalColor( - [ - { - name: 'abc', - rankAtDepth: 2, - totalSeriesAtDepth: 10, - }, - { - name: 'def', - rankAtDepth: 0, - totalSeriesAtDepth: 10, - }, - ], - { - syncColors: false, - } - ); - expect(result).toEqual(createLegacyColorPalette(20)[2]); - }); - }); - - describe('syncColors: true', () => { - it('should query legacy color service', () => { - palette.getCategoricalColor( - [ - { - name: 'abc', - rankAtDepth: 0, - totalSeriesAtDepth: 10, - }, - ], - { - syncColors: true, - } - ); - expect(colorsServiceMock.mappedColors.mapKeys).toHaveBeenCalledWith(['abc']); - expect(colorsServiceMock.mappedColors.get).toHaveBeenCalledWith('abc'); - }); - - it('should respect the advanced settings color mapping', () => { - const configColorGetter = colorsServiceMock.mappedColors.getColorFromConfig as jest.Mock; - configColorGetter.mockImplementation(() => 'blue'); - const result = palette.getCategoricalColor( - [ - { - name: 'abc', - rankAtDepth: 2, - totalSeriesAtDepth: 10, - }, - { - name: 'def', - rankAtDepth: 0, - totalSeriesAtDepth: 10, - }, - ], - { - syncColors: false, - } - ); - expect(result).toEqual('blue'); - expect(configColorGetter).toHaveBeenCalledWith('abc'); - }); - - it('should always use root series', () => { - palette.getCategoricalColor( - [ - { - name: 'abc', - rankAtDepth: 0, - totalSeriesAtDepth: 10, - }, - { - name: 'def', - rankAtDepth: 0, - totalSeriesAtDepth: 10, - }, - ], - { - syncColors: true, - } - ); - expect(colorsServiceMock.mappedColors.mapKeys).toHaveBeenCalledTimes(1); - expect(colorsServiceMock.mappedColors.mapKeys).toHaveBeenCalledWith(['abc']); - expect(colorsServiceMock.mappedColors.get).toHaveBeenCalledTimes(1); - expect(colorsServiceMock.mappedColors.get).toHaveBeenCalledWith('abc'); - }); - }); - }); - describe('custom palette', () => { const palette = palettes.custom; it('should return different colors based on rank at current series', () => { diff --git a/src/plugins/charts/public/services/palettes/palettes.tsx b/src/plugins/charts/public/services/palettes/palettes.tsx index 512606762d536..6956050e0dc67 100644 --- a/src/plugins/charts/public/services/palettes/palettes.tsx +++ b/src/plugins/charts/public/services/palettes/palettes.tsx @@ -23,19 +23,20 @@ import { } from '@elastic/eui'; import type { ChartColorConfiguration, PaletteDefinition, SeriesLayer } from '@kbn/coloring'; import { flatten, zip } from 'lodash'; -import { ChartsPluginSetup, createColorPalette as createLegacyColorPalette } from '../..'; +import { createColorPalette as createLegacyColorPalette } from '../..'; import { lightenColor } from './lighten_color'; -import { LegacyColorsService } from '../legacy_colors'; import { MappedColors } from '../mapped_colors'; import { workoutColorForValue } from './helpers'; -function buildRoundRobinCategoricalWithMappedColors(): Omit { - const colors = euiPaletteColorBlind({ rotations: 2 }); - const behindTextColors = euiPaletteColorBlindBehindText({ rotations: 2 }); +function buildRoundRobinCategoricalWithMappedColors( + id = 'default', + colors = euiPaletteColorBlind({ rotations: 2 }), + behindTextColors = euiPaletteColorBlindBehindText({ rotations: 2 }) +): Omit { const behindTextColorMap: Record = Object.fromEntries( zip(colors, behindTextColors) ); - const mappedColors = new MappedColors(undefined, (num: number) => { + const mappedColors = new MappedColors((num: number) => { return flatten(new Array(Math.ceil(num / 10)).fill(colors)).map((color) => color.toLowerCase()); }); function getColor( @@ -61,9 +62,9 @@ function buildRoundRobinCategoricalWithMappedColors(): Omit euiPaletteColorBlind(), + getCategoricalColors: () => colors.slice(0, 10), toExpression: () => ({ type: 'expression', chain: [ @@ -71,7 +72,7 @@ function buildRoundRobinCategoricalWithMappedColors(): Omit { - const staticColors = createLegacyColorPalette(20); - function getColor(series: SeriesLayer[], chartConfiguration: ChartColorConfiguration = {}) { - let outputColor: string; - if (chartConfiguration.syncColors) { - colors.mappedColors.mapKeys([series[0].name]); - outputColor = colors.mappedColors.get(series[0].name); - } else { - const configColor = colors.mappedColors.getColorFromConfig(series[0].name); - outputColor = configColor || staticColors[series[0].rankAtDepth % staticColors.length]; - } - - if (!chartConfiguration.maxDepth || chartConfiguration.maxDepth === 1) { - return outputColor; - } - - return lightenColor(outputColor, series.length, chartConfiguration.maxDepth); - } - return { - id: 'kibana_palette', - getCategoricalColor: getColor, - getCategoricalColors: () => colors.seedColors.slice(0, 10), - toExpression: () => ({ - type: 'expression', - chain: [ - { - type: 'function', - function: 'system_palette', - arguments: { - name: ['kibana_palette'], - }, - }, - ], - }), - }; -} - function buildCustomPalette(): PaletteDefinition { return { id: 'custom', @@ -258,54 +220,50 @@ function buildCustomPalette(): PaletteDefinition { } as PaletteDefinition; } -export const buildPalettes: ( - legacyColorsService: LegacyColorsService -) => Record = (legacyColorsService) => { - return { - default: { - title: i18n.translate('charts.palettes.defaultPaletteLabel', { defaultMessage: 'Default' }), - ...buildRoundRobinCategoricalWithMappedColors(), - }, - status: { - title: i18n.translate('charts.palettes.statusLabel', { defaultMessage: 'Status' }), - ...buildGradient('status', euiPaletteForStatus), - }, - temperature: { - title: i18n.translate('charts.palettes.temperatureLabel', { defaultMessage: 'Temperature' }), - ...buildGradient('temperature', euiPaletteForTemperature), - }, - complementary: { - title: i18n.translate('charts.palettes.complementaryLabel', { - defaultMessage: 'Complementary', - }), - ...buildGradient('complementary', euiPaletteComplementary), - }, - negative: { - title: i18n.translate('charts.palettes.negativeLabel', { defaultMessage: 'Negative' }), - ...buildGradient('negative', euiPaletteRed), - }, - positive: { - title: i18n.translate('charts.palettes.positiveLabel', { defaultMessage: 'Positive' }), - ...buildGradient('positive', euiPaletteGreen), - }, - cool: { - title: i18n.translate('charts.palettes.coolLabel', { defaultMessage: 'Cool' }), - ...buildGradient('cool', euiPaletteCool), - }, - warm: { - title: i18n.translate('charts.palettes.warmLabel', { defaultMessage: 'Warm' }), - ...buildGradient('warm', euiPaletteWarm), - }, - gray: { - title: i18n.translate('charts.palettes.grayLabel', { defaultMessage: 'Gray' }), - ...buildGradient('gray', euiPaletteGray), - }, - kibana_palette: { - title: i18n.translate('charts.palettes.kibanaPaletteLabel', { - defaultMessage: 'Compatibility', - }), - ...buildSyncedKibanaPalette(legacyColorsService), - }, - custom: buildCustomPalette() as PaletteDefinition, - }; +export const palettes: Record = { + default: { + title: i18n.translate('charts.palettes.defaultPaletteLabel', { defaultMessage: 'Default' }), + ...buildRoundRobinCategoricalWithMappedColors(), + }, + status: { + title: i18n.translate('charts.palettes.statusLabel', { defaultMessage: 'Status' }), + ...buildGradient('status', euiPaletteForStatus), + }, + temperature: { + title: i18n.translate('charts.palettes.temperatureLabel', { defaultMessage: 'Temperature' }), + ...buildGradient('temperature', euiPaletteForTemperature), + }, + complementary: { + title: i18n.translate('charts.palettes.complementaryLabel', { + defaultMessage: 'Complementary', + }), + ...buildGradient('complementary', euiPaletteComplementary), + }, + negative: { + title: i18n.translate('charts.palettes.negativeLabel', { defaultMessage: 'Negative' }), + ...buildGradient('negative', euiPaletteRed), + }, + positive: { + title: i18n.translate('charts.palettes.positiveLabel', { defaultMessage: 'Positive' }), + ...buildGradient('positive', euiPaletteGreen), + }, + cool: { + title: i18n.translate('charts.palettes.coolLabel', { defaultMessage: 'Cool' }), + ...buildGradient('cool', euiPaletteCool), + }, + warm: { + title: i18n.translate('charts.palettes.warmLabel', { defaultMessage: 'Warm' }), + ...buildGradient('warm', euiPaletteWarm), + }, + gray: { + title: i18n.translate('charts.palettes.grayLabel', { defaultMessage: 'Gray' }), + ...buildGradient('gray', euiPaletteGray), + }, + kibana_palette: { + title: i18n.translate('charts.palettes.kibanaPaletteLabel', { + defaultMessage: 'Compatibility', + }), + ...buildRoundRobinCategoricalWithMappedColors('kibana_palette', createLegacyColorPalette(20)), + }, + custom: buildCustomPalette() as PaletteDefinition, }; diff --git a/src/plugins/charts/public/services/palettes/service.ts b/src/plugins/charts/public/services/palettes/service.ts index 920486c9dcbb5..778bee94d47d8 100644 --- a/src/plugins/charts/public/services/palettes/service.ts +++ b/src/plugins/charts/public/services/palettes/service.ts @@ -11,7 +11,6 @@ import type { PaletteRegistry, PaletteDefinition } from '@kbn/coloring'; import { getActivePaletteName } from '@kbn/coloring'; import type { ExpressionsSetup } from '@kbn/expressions-plugin/public'; import type { ChartsPluginSetup } from '../..'; -import type { LegacyColorsService } from '../legacy_colors'; export interface PaletteSetupPlugins { expressions: ExpressionsSetup; @@ -22,12 +21,12 @@ export class PaletteService { private palettes: Record> | undefined = undefined; constructor() {} - public setup(colorsService: LegacyColorsService) { + public setup() { return { getPalettes: async (): Promise => { if (!this.palettes) { - const { buildPalettes } = await import('./palettes'); - this.palettes = buildPalettes(colorsService); + const { palettes } = await import('./palettes'); + this.palettes = palettes; } return { get: (name: string) => { diff --git a/x-pack/plugins/translations/translations/fr-FR.json b/x-pack/plugins/translations/translations/fr-FR.json index 0008cac9a55dd..ec5e426f38b71 100644 --- a/x-pack/plugins/translations/translations/fr-FR.json +++ b/x-pack/plugins/translations/translations/fr-FR.json @@ -406,9 +406,6 @@ "cellActions.extraActionsAriaLabel": "Actions supplémentaires", "cellActions.showMoreActionsLabel": "Plus d'actions", "cellActions.youAreInADialogContainingOptionsScreenReaderOnly": "Vous êtes dans une boîte de dialogue contenant des options pour le champ {fieldName}. Appuyez sur Tab pour naviguer entre les options. Appuyez sur Échap pour quitter.", - "charts.advancedSettings.visualization.colorMappingText": "Mappe des valeurs à des couleurs spécifiques dans les graphiques avec la palette Compatibilité.", - "charts.advancedSettings.visualization.colorMappingTextDeprecation": "Ce paramètre est déclassé et ne sera plus compatible avec les futures versions.", - "charts.advancedSettings.visualization.colorMappingTitle": "Mapping des couleurs", "charts.advancedSettings.visualization.useLegacyTimeAxis.deprecation": "Ce paramètre est déclassé et ne sera plus compatible avec les futures versions.", "charts.advancedSettings.visualization.useLegacyTimeAxis.description": "Active l'axe de temps hérité pour les graphiques dans Lens, Discover, Visualize et TSVB", "charts.advancedSettings.visualization.useLegacyTimeAxis.name": "Axe de temps hérité pour les graphiques", diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json index 1d90ec5e84fd9..446a6ac5fb97e 100644 --- a/x-pack/plugins/translations/translations/ja-JP.json +++ b/x-pack/plugins/translations/translations/ja-JP.json @@ -406,9 +406,6 @@ "cellActions.extraActionsAriaLabel": "追加のアクション", "cellActions.showMoreActionsLabel": "さらにアクションを表示", "cellActions.youAreInADialogContainingOptionsScreenReaderOnly": "フィールド {fieldName} のオプションを含む、ダイアログを表示しています。Tab を押すと、オプションを操作します。Escapeを押すと、終了します。", - "charts.advancedSettings.visualization.colorMappingText": "互換性パレットを使用して、グラフで値を特定の色にマッピングします。", - "charts.advancedSettings.visualization.colorMappingTextDeprecation": "この設定はサポートが終了し、将来のバージョンではサポートされません。", - "charts.advancedSettings.visualization.colorMappingTitle": "カラーマッピング", "charts.advancedSettings.visualization.useLegacyTimeAxis.deprecation": "この設定はサポートが終了し、将来のバージョンではサポートされません。", "charts.advancedSettings.visualization.useLegacyTimeAxis.description": "Lens、Discover、Visualize、およびTSVBでグラフのレガシー時間軸を有効にします", "charts.advancedSettings.visualization.useLegacyTimeAxis.name": "レガシーグラフ時間軸", diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json index 30eb1f0c0fc2a..9abff2ad7ee04 100644 --- a/x-pack/plugins/translations/translations/zh-CN.json +++ b/x-pack/plugins/translations/translations/zh-CN.json @@ -402,9 +402,6 @@ "cellActions.extraActionsAriaLabel": "附加操作", "cellActions.showMoreActionsLabel": "更多操作", "cellActions.youAreInADialogContainingOptionsScreenReaderOnly": "您在对话框中，其中包含 {fieldName} 字段的选项。按 tab 键导航选项。按 escape 退出。", - "charts.advancedSettings.visualization.colorMappingText": "使用兼容性调色板将值映射到图表中的特定颜色。", - "charts.advancedSettings.visualization.colorMappingTextDeprecation": "此设置已过时，在未来版本中将不受支持。", - "charts.advancedSettings.visualization.colorMappingTitle": "颜色映射", "charts.advancedSettings.visualization.useLegacyTimeAxis.deprecation": "此设置已过时，在未来版本中将不受支持。", "charts.advancedSettings.visualization.useLegacyTimeAxis.description": "在 Lens、Discover、Visualize 和 TSVB 中为图表启用旧版时间轴", "charts.advancedSettings.visualization.useLegacyTimeAxis.name": "旧版图表时间轴",