diff --git a/src/core_plugins/vega/public/__tests__/vegalite_graph.hjson b/src/core_plugins/vega/public/__tests__/vegalite_graph.hjson index ba39dfb97b0a..ebdc5a07af06 100644 --- a/src/core_plugins/vega/public/__tests__/vegalite_graph.hjson +++ b/src/core_plugins/vega/public/__tests__/vegalite_graph.hjson @@ -39,7 +39,7 @@ range: { category: {scheme: "elastic"} } - mark: {color: "#00A69B"} + mark: {color: "#00B3A4"} } autosize: {type: "fit", contains: "padding"} } diff --git a/src/core_plugins/vega/public/data_model/__tests__/vega_parser.js b/src/core_plugins/vega/public/data_model/__tests__/vega_parser.js index f0d5100733f1..e8f9989157ed 100644 --- a/src/core_plugins/vega/public/data_model/__tests__/vega_parser.js +++ b/src/core_plugins/vega/public/data_model/__tests__/vega_parser.js @@ -35,22 +35,22 @@ describe(`VegaParser._setDefaultColors`, () => { it(`vegalite`, test({}, true, { config: { range: { category: { scheme: 'elastic' } }, - mark: { color: '#00A69B' } + mark: { color: '#00B3A4' } } })); it(`vega`, test({}, false, { config: { range: { category: { scheme: 'elastic' } }, - arc: { fill: '#00A69B' }, - area: { fill: '#00A69B' }, - line: { stroke: '#00A69B' }, - path: { stroke: '#00A69B' }, - rect: { fill: '#00A69B' }, - rule: { stroke: '#00A69B' }, - shape: { stroke: '#00A69B' }, - symbol: { fill: '#00A69B' }, - trail: { fill: '#00A69B' } + arc: { fill: '#00B3A4' }, + area: { fill: '#00B3A4' }, + line: { stroke: '#00B3A4' }, + path: { stroke: '#00B3A4' }, + rect: { fill: '#00B3A4' }, + rule: { stroke: '#00B3A4' }, + shape: { stroke: '#00B3A4' }, + symbol: { fill: '#00B3A4' }, + trail: { fill: '#00B3A4' } } })); diff --git a/src/core_plugins/vega/public/data_model/vega_parser.js b/src/core_plugins/vega/public/data_model/vega_parser.js index efd94dd7ff9f..5dcadffe0f30 100644 --- a/src/core_plugins/vega/public/data_model/vega_parser.js +++ b/src/core_plugins/vega/public/data_model/vega_parser.js @@ -8,6 +8,10 @@ import hjson from 'hjson'; import { Utils } from './utils'; import { EmsFileParser } from './ems_file_parser'; import { UrlParser } from './url_parser'; +import { VISUALIZATION_COLORS } from '@elastic/eui'; + +// Set default single color to match other Kibana visualizations +const defaultColor = VISUALIZATION_COLORS[0]; const DEFAULT_SCHEMA = 'https://vega.github.io/schema/vega/v3.0.json'; @@ -369,10 +373,8 @@ export class VegaParser { // Default category coloring to the Elastic color scheme this._setDefaultValue({ scheme: 'elastic' }, 'config', 'range', 'category'); - // Set default single color to match other Kibana visualizations - const defaultColor = '#00A69B'; if (this.isVegaLite) { - // Vega-Lite: set default color, works for fill and strike -- config: { mark: { color: '#00A69B' }} + // Vega-Lite: set default color, works for fill and strike -- config: { mark: { color: '#00B3A4' }} this._setDefaultValue(defaultColor, 'config', 'mark', 'color'); } else { // Vega - global mark has very strange behavior, must customize each mark type individually diff --git a/src/core_plugins/vega/public/vega_view/vega_base_view.js b/src/core_plugins/vega/public/vega_view/vega_base_view.js index 59c69b9ebc58..dd161ac41618 100644 --- a/src/core_plugins/vega/public/vega_view/vega_base_view.js +++ b/src/core_plugins/vega/public/vega_view/vega_base_view.js @@ -2,11 +2,9 @@ import $ from 'jquery'; import * as vega from 'vega-lib'; import * as vegaLite from 'vega-lite'; import { Utils } from '../data_model/utils'; +import { VISUALIZATION_COLORS } from '@elastic/eui'; -//https://github.com/elastic/kibana/issues/13327 -vega.scheme('elastic', - ['#00B3A4', '#3185FC', '#DB1374', '#490092', '#FEB6DB', '#F98510', '#E6C220', '#BFA180', '#920000', '#461A0A'] -); +vega.scheme('elastic', VISUALIZATION_COLORS); const bypassToken = Symbol();