Vega 5 upgrade

package.json

@@ -274,9 +274,9 @@
     "uuid": "3.3.2",
     "val-loader": "^1.1.1",
     "validate-npm-package-name": "2.2.2",
-    "vega-lib": "4.3.0",
-    "vega-lite": "^2.6.0",
-    "vega-schema-url-parser": "1.0.0",
+    "vega": "^5.10.1",
+    "vega-lite": "^4.10.1",
+    "vega-schema-url-parser": "1.1.0",
     "vega-tooltip": "^0.12.0",
     "vision": "^5.3.3",
     "webpack": "^4.41.5",

src/legacy/core_plugins/vis_type_vega/public/__tests__/vegalite_graph.hjson

@@ -1,5 +1,5 @@
 {
-  $schema: https://vega.github.io/schema/vega-lite/v2.json
+  $schema: https://vega.github.io/schema/vega-lite/v3.json
   data: {
     format: {property: "aggregations.time_buckets.buckets"}
     values: {

src/legacy/core_plugins/vis_type_vega/public/data_model/vega_parser.js

@@ -18,8 +18,8 @@
  */
 
 import _ from 'lodash';
-import * as vega from 'vega-lib';
-import * as vegaLite from 'vega-lite';
+import { logger as vegaLogger, Warn, version as vegaVersion } from 'vega/build-es5/vega.js';
+import { version as vegaLiteVersion, compile } from 'vega-lite/build-es5/vega-lite.js';
 import schemaParser from 'vega-schema-url-parser';
 import versionCompare from 'compare-versions';
 import { EsQueryParser } from './es_query_parser';
@@ -33,7 +33,7 @@ import { i18n } from '@kbn/i18n';
 // 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';
+const DEFAULT_SCHEMA = 'https://vega.github.io/schema/vega/v5.0.json';
 
 const locToDirMap = {
   left: 'row-reverse',
@@ -116,10 +116,9 @@ export class VegaParser {
    */
   _compileVegaLite() {
     this.vlspec = this.spec;
-    // eslint-disable-next-line import/namespace
-    const logger = vega.logger(vega.Warn); // note: eslint has a false positive here
+    const logger = vegaLogger(Warn);
     logger.warn = this._onWarning.bind(this);
-    this.spec = vegaLite.compile(this.vlspec, logger).spec;
+    this.spec = compile(this.vlspec, logger).spec;
 
     // When using VL with the type=map and user did not provid their own projection settings,
     // remove the default projection that was generated by VegaLite compiler.
@@ -464,7 +463,7 @@ export class VegaParser {
 
     const schema = schemaParser(this.spec.$schema);
     const isVegaLite = schema.library === 'vega-lite';
-    const libVersion = isVegaLite ? vegaLite.version : vega.version;
+    const libVersion = isVegaLite ? vegaLiteVersion : vegaVersion;
 
     if (versionCompare(schema.version, libVersion) > 0) {
       this._onWarning(

src/legacy/core_plugins/vis_type_vega/public/vega_view/vega_base_view.js

@@ -20,8 +20,14 @@
 import $ from 'jquery';
 import moment from 'moment';
 import dateMath from '@elastic/datemath';
-import * as vega from 'vega-lib';
-import * as vegaLite from 'vega-lite';
+import {
+  scheme,
+  expressionFunction,
+  Warn,
+  loader as vegaLoader,
+  version as vegaVersion,
+} from 'vega/build-es5/vega.js';
+import { version as vegaLiteVersion } from 'vega-lite/build-es5/vega-lite.js';
 import { Utils } from '../data_model/utils';
 import { VISUALIZATION_COLORS } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
@@ -30,7 +36,7 @@ import { esFilters } from '../../../../../plugins/data/public';
 
 import { getEnableExternalUrls } from '../services';
 
-vega.scheme('elastic', VISUALIZATION_COLORS);
+scheme('elastic', VISUALIZATION_COLORS);
 
 // Vega's extension functions are global. When called,
 // we forward execution to the instance-specific handler
@@ -43,8 +49,8 @@ const vegaFunctions = {
 };
 
 for (const funcName of Object.keys(vegaFunctions)) {
-  if (!vega.expressionFunction(funcName)) {
-    vega.expressionFunction(funcName, function handlerFwd(...args) {
+  if (!expressionFunction(funcName)) {
+    expressionFunction(funcName, function handlerFwd(...args) {
       const view = this.context.dataflow;
       view.runAfter(() => view._kibanaView.vegaFunctionsHandler(funcName, ...args));
     });
@@ -132,13 +138,12 @@ export class VegaBaseView {
 
   createViewConfig() {
     const config = {
-      // eslint-disable-next-line import/namespace
-      logLevel: vega.Warn, // note: eslint has a false positive here
+      logLevel: Warn,
       renderer: this._parser.renderer,
     };
 
     // Override URL sanitizer to prevent external data loading (if disabled)
-    const loader = vega.loader();
+    const loader = vegaLoader();
     const originalSanitize = loader.sanitize.bind(loader);
     loader.sanitize = (uri, options) => {
       if (uri.bypassToken === bypassToken) {
@@ -378,8 +383,8 @@ export class VegaBaseView {
       }
       const debugObj = {};
       window.VEGA_DEBUG = debugObj;
-      window.VEGA_DEBUG.VEGA_VERSION = vega.version;
-      window.VEGA_DEBUG.VEGA_LITE_VERSION = vegaLite.version;
+      window.VEGA_DEBUG.VEGA_VERSION = vegaVersion;
+      window.VEGA_DEBUG.VEGA_LITE_VERSION = vegaLiteVersion;
       window.VEGA_DEBUG.view = view;
       window.VEGA_DEBUG.vega_spec = spec;
       window.VEGA_DEBUG.vegalite_spec = vlspec;

src/legacy/core_plugins/vis_type_vega/public/vega_view/vega_map_view.js

@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import * as vega from 'vega-lib';
+import vega from 'vega/build-es5/vega.js';
 import { i18n } from '@kbn/i18n';
 import { VegaBaseView } from './vega_base_view';
 import { VegaMapLayer } from './vega_map_layer';

src/legacy/core_plugins/vis_type_vega/public/vega_view/vega_view.js

@@ -17,15 +17,15 @@
  * under the License.
  */
 
-import * as vega from 'vega-lib';
+import { View, parse } from 'vega/build-es5/vega.js';
 import { VegaBaseView } from './vega_base_view';
 
 export class VegaView extends VegaBaseView {
   async _initViewCustomizations() {
     // In some cases, Vega may be initialized twice... TBD
     if (!this._$container) return;
 
-    const view = new vega.View(vega.parse(this._parser.spec), this._vegaViewConfig);
+    const view = new View(parse(this._parser.spec), this._vegaViewConfig);
     this.setDebugValues(view, this._parser.spec, this._parser.vlspec);
 
     view.warn = this.onWarn.bind(this);

src/optimize/dynamic_dll_plugin/dll_config_model.js

@@ -24,6 +24,7 @@ import webpackMerge from 'webpack-merge';
 import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 import TerserPlugin from 'terser-webpack-plugin';
 import * as UiSharedDeps from '@kbn/ui-shared-deps';
+import { DisallowedSyntaxPlugin } from '@kbn/optimizer';
 
 function generateDLL(config) {
   const {

x-pack/package.json

@@ -228,6 +228,7 @@
     "cronstrue": "^1.51.0",
     "cytoscape": "^3.10.0",
     "d3": "3.5.17",
+    "d3-array": "1.2.4",
     "d3-scale": "1.0.7",
     "dedent": "^0.7.0",
     "del": "^5.1.0",