diff --git a/src/legacy/core_plugins/kibana/public/__tests__/vis_type_vega/vega_graph.hjson b/src/legacy/core_plugins/kibana/public/__tests__/vis_type_vega/vega_graph.hjson deleted file mode 100644 index db19c937ca990..0000000000000 --- a/src/legacy/core_plugins/kibana/public/__tests__/vis_type_vega/vega_graph.hjson +++ /dev/null @@ -1,76 +0,0 @@ -{ - // Adapted from Vega's https://vega.github.io/vega/examples/stacked-area-chart/ - - $schema: https://vega.github.io/schema/vega/v5.json - data: [ - { - name: table - values: [ - {x: 0, y: 28, c: 0}, {x: 0, y: 55, c: 1}, {x: 1, y: 43, c: 0}, {x: 1, y: 91, c: 1}, - {x: 2, y: 81, c: 0}, {x: 2, y: 53, c: 1}, {x: 3, y: 19, c: 0}, {x: 3, y: 87, c: 1}, - {x: 4, y: 52, c: 0}, {x: 4, y: 48, c: 1}, {x: 5, y: 24, c: 0}, {x: 5, y: 49, c: 1}, - {x: 6, y: 87, c: 0}, {x: 6, y: 66, c: 1}, {x: 7, y: 17, c: 0}, {x: 7, y: 27, c: 1}, - {x: 8, y: 68, c: 0}, {x: 8, y: 16, c: 1}, {x: 9, y: 49, c: 0}, {x: 9, y: 15, c: 1} - ] - transform: [ - { - type: stack - groupby: ["x"] - sort: {field: "c"} - field: y - } - ] - } - ] - scales: [ - { - name: x - type: point - range: width - domain: {data: "table", field: "x"} - } - { - name: y - type: linear - range: height - nice: true - zero: true - domain: {data: "table", field: "y1"} - } - { - name: color - type: ordinal - range: category - domain: {data: "table", field: "c"} - } - ] - marks: [ - { - type: group - from: { - facet: {name: "series", data: "table", groupby: "c"} - } - marks: [ - { - type: area - from: {data: "series"} - encode: { - enter: { - interpolate: {value: "monotone"} - x: {scale: "x", field: "x"} - y: {scale: "y", field: "y0"} - y2: {scale: "y", field: "y1"} - fill: {scale: "color", field: "c"} - } - update: { - fillOpacity: {value: 1} - } - hover: { - fillOpacity: {value: 0.5} - } - } - } - ] - } - ] -} diff --git a/src/legacy/core_plugins/kibana/public/__tests__/vis_type_vega/vega_image_512.png b/src/legacy/core_plugins/kibana/public/__tests__/vis_type_vega/vega_image_512.png deleted file mode 100644 index cc28886794f03..0000000000000 Binary files a/src/legacy/core_plugins/kibana/public/__tests__/vis_type_vega/vega_image_512.png and /dev/null differ diff --git a/src/legacy/core_plugins/kibana/public/__tests__/vis_type_vega/vega_map_image_256.png b/src/legacy/core_plugins/kibana/public/__tests__/vis_type_vega/vega_map_image_256.png deleted file mode 100644 index ac455ada3900b..0000000000000 Binary files a/src/legacy/core_plugins/kibana/public/__tests__/vis_type_vega/vega_map_image_256.png and /dev/null differ diff --git a/src/legacy/core_plugins/kibana/public/__tests__/vis_type_vega/vega_map_test.hjson b/src/legacy/core_plugins/kibana/public/__tests__/vis_type_vega/vega_map_test.hjson deleted file mode 100644 index 633b8658ad849..0000000000000 --- a/src/legacy/core_plugins/kibana/public/__tests__/vis_type_vega/vega_map_test.hjson +++ /dev/null @@ -1,20 +0,0 @@ -# This graph creates a single rectangle for the whole graph on top of a map -# Note that the actual map tiles are not loaded -{ - $schema: https://vega.github.io/schema/vega/v5.json - config: { - kibana: {type: "map", mapStyle: false} - } - marks: [ - { - type: rect - encode: { - enter: { - fill: {value: "#0f0"} - width: {signal: "width"} - height: {signal: "height"} - } - } - } - ] -} diff --git a/src/legacy/core_plugins/kibana/public/__tests__/vis_type_vega/vega_tooltip_test.hjson b/src/legacy/core_plugins/kibana/public/__tests__/vis_type_vega/vega_tooltip_test.hjson deleted file mode 100644 index 77465c8b3f007..0000000000000 --- a/src/legacy/core_plugins/kibana/public/__tests__/vis_type_vega/vega_tooltip_test.hjson +++ /dev/null @@ -1,44 +0,0 @@ -# This graph creates a single rectangle for the whole graph, -# backed by a datum with two fields - fld1 & fld2 -# On mouse over, with 0 delay, it should show tooltip -{ - config: { - kibana: { - tooltips: { - // always center on the mark, not mouse x,y - centerOnMark: false - position: top - padding: 20 - } - } - } - data: [ - { - name: table - values: [ - { - title: This is a long title - fieldA: value of fld1 - fld2: 42 - } - ] - } - ] - $schema: https://vega.github.io/schema/vega/v5.json - marks: [ - { - from: {data: "table"} - type: rect - encode: { - enter: { - fill: {value: "#060"} - x: {signal: "0"} - y: {signal: "0"} - width: {signal: "width"} - height: {signal: "height"} - tooltip: {signal: "datum || null"} - } - } - } - ] -} diff --git a/src/legacy/core_plugins/kibana/public/__tests__/vis_type_vega/vega_visualization.js b/src/legacy/core_plugins/kibana/public/__tests__/vis_type_vega/vega_visualization.js deleted file mode 100644 index 30e7587707d2e..0000000000000 --- a/src/legacy/core_plugins/kibana/public/__tests__/vis_type_vega/vega_visualization.js +++ /dev/null @@ -1,362 +0,0 @@ -/* - * 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 Bluebird from 'bluebird'; -import expect from '@kbn/expect'; -import ngMock from 'ng_mock'; -import $ from 'jquery'; - -import 'leaflet/dist/leaflet.js'; -import 'leaflet-vega'; -// Will be replaced with new path when tests are moved -// eslint-disable-next-line @kbn/eslint/no-restricted-paths -import { createVegaVisualization } from '../../../../../../plugins/vis_type_vega/public/vega_visualization'; -import { ImageComparator } from 'test_utils/image_comparator'; - -import vegaliteGraph from '!!raw-loader!./vegalite_graph.hjson'; -import vegaliteImage256 from './vegalite_image_256.png'; -import vegaliteImage512 from './vegalite_image_512.png'; - -import vegaGraph from '!!raw-loader!./vega_graph.hjson'; -import vegaImage512 from './vega_image_512.png'; - -import vegaTooltipGraph from '!!raw-loader!./vega_tooltip_test.hjson'; - -import vegaMapGraph from '!!raw-loader!./vega_map_test.hjson'; -import vegaMapImage256 from './vega_map_image_256.png'; -// Will be replaced with new path when tests are moved -// eslint-disable-next-line @kbn/eslint/no-restricted-paths -import { VegaParser } from '../../../../../../plugins/vis_type_vega/public/data_model/vega_parser'; -// eslint-disable-next-line @kbn/eslint/no-restricted-paths -import { SearchAPI } from '../../../../../../plugins/vis_type_vega/public/data_model/search_api'; - -// eslint-disable-next-line @kbn/eslint/no-restricted-paths -import { createVegaTypeDefinition } from '../../../../../../plugins/vis_type_vega/public/vega_type'; -// TODO This is an integration test and thus requires a running platform. When moving to the new platform, -// this test has to be migrated to the newly created integration test environment. -// eslint-disable-next-line @kbn/eslint/no-restricted-paths -import { npStart } from 'ui/new_platform'; -// eslint-disable-next-line @kbn/eslint/no-restricted-paths -import { BaseVisType } from '../../../../../../plugins/visualizations/public/vis_types/base_vis_type'; -// eslint-disable-next-line @kbn/eslint/no-restricted-paths -import { ExprVis } from '../../../../../../plugins/visualizations/public/expressions/vis'; - -import { - setInjectedVars, - setData, - setSavedObjects, - setNotifications, - setKibanaMapFactory, - // eslint-disable-next-line @kbn/eslint/no-restricted-paths -} from '../../../../../../plugins/vis_type_vega/public/services'; -// eslint-disable-next-line @kbn/eslint/no-restricted-paths -import { ServiceSettings } from '../../../../../../plugins/maps_legacy/public/map/service_settings'; -// eslint-disable-next-line @kbn/eslint/no-restricted-paths -import { KibanaMap } from '../../../../../../plugins/maps_legacy/public/map/kibana_map'; - -const THRESHOLD = 0.1; -const PIXEL_DIFF = 30; - -describe('VegaVisualizations', () => { - let domNode; - let VegaVisualization; - let vis; - let imageComparator; - let vegaVisualizationDependencies; - let vegaVisType; - - setKibanaMapFactory((...args) => new KibanaMap(...args)); - setInjectedVars({ - emsTileLayerId: {}, - enableExternalUrls: true, - esShardTimeout: 10000, - }); - setData(npStart.plugins.data); - setSavedObjects(npStart.core.savedObjects); - setNotifications(npStart.core.notifications); - - const mockMapConfig = { - includeElasticMapsService: true, - proxyElasticMapsServiceInMaps: false, - tilemap: { - deprecated: { - config: { - options: { - attribution: '', - }, - }, - }, - options: { - attribution: '', - minZoom: 0, - maxZoom: 10, - }, - }, - regionmap: { - includeElasticMapsService: true, - layers: [], - }, - manifestServiceUrl: '', - emsFileApiUrl: 'https://vector.maps.elastic.co', - emsTileApiUrl: 'https://tiles.maps.elastic.co', - emsLandingPageUrl: 'https://maps.elastic.co/v7.7', - emsFontLibraryUrl: 'https://tiles.maps.elastic.co/fonts/{fontstack}/{range}.pbf', - emsTileLayerId: { - bright: 'road_map', - desaturated: 'road_map_desaturated', - dark: 'dark_map', - }, - }; - - beforeEach(ngMock.module('kibana')); - beforeEach( - ngMock.inject(() => { - const serviceSettings = new ServiceSettings(mockMapConfig, mockMapConfig.tilemap); - vegaVisualizationDependencies = { - serviceSettings, - core: { - uiSettings: npStart.core.uiSettings, - }, - plugins: { - data: { - query: { - timefilter: { - timefilter: {}, - }, - }, - }, - }, - }; - - vegaVisType = new BaseVisType(createVegaTypeDefinition(vegaVisualizationDependencies)); - VegaVisualization = createVegaVisualization(vegaVisualizationDependencies); - }) - ); - - describe('VegaVisualization - basics', () => { - beforeEach(async function () { - setupDOM('512px', '512px'); - imageComparator = new ImageComparator(); - - vis = new ExprVis({ - type: vegaVisType, - }); - }); - - afterEach(function () { - teardownDOM(); - imageComparator.destroy(); - }); - - it('should show vegalite graph and update on resize (may fail in dev env)', async function () { - let vegaVis; - try { - vegaVis = new VegaVisualization(domNode, vis); - - const vegaParser = new VegaParser( - vegaliteGraph, - new SearchAPI({ - search: npStart.plugins.data.search, - uiSettings: npStart.core.uiSettings, - injectedMetadata: npStart.core.injectedMetadata, - }) - ); - await vegaParser.parseAsync(); - - await vegaVis.render(vegaParser, vis.params, { data: true }); - const mismatchedPixels1 = await compareImage(vegaliteImage512); - expect(mismatchedPixels1).to.be.lessThan(PIXEL_DIFF); - - domNode.style.width = '256px'; - domNode.style.height = '256px'; - - await vegaVis.render(vegaParser, vis.params, { resize: true }); - const mismatchedPixels2 = await compareImage(vegaliteImage256); - expect(mismatchedPixels2).to.be.lessThan(PIXEL_DIFF); - } finally { - vegaVis.destroy(); - } - }); - - it('should show vega graph (may fail in dev env)', async function () { - let vegaVis; - try { - vegaVis = new VegaVisualization(domNode, vis); - const vegaParser = new VegaParser( - vegaGraph, - new SearchAPI({ - search: npStart.plugins.data.search, - uiSettings: npStart.core.uiSettings, - injectedMetadata: npStart.core.injectedMetadata, - }) - ); - await vegaParser.parseAsync(); - - await vegaVis.render(vegaParser, vis.params, { data: true }); - const mismatchedPixels = await compareImage(vegaImage512); - - expect(mismatchedPixels).to.be.lessThan(PIXEL_DIFF); - } finally { - vegaVis.destroy(); - } - }); - - it('should show vegatooltip on mouseover over a vega graph (may fail in dev env)', async () => { - let vegaVis; - try { - vegaVis = new VegaVisualization(domNode, vis); - const vegaParser = new VegaParser( - vegaTooltipGraph, - new SearchAPI({ - search: npStart.plugins.data.search, - uiSettings: npStart.core.uiSettings, - injectedMetadata: npStart.core.injectedMetadata, - }) - ); - await vegaParser.parseAsync(); - await vegaVis.render(vegaParser, vis.params, { data: true }); - - const $el = $(domNode); - const offset = $el.offset(); - - const event = new MouseEvent('mousemove', { - view: window, - bubbles: true, - cancelable: true, - clientX: offset.left + 10, - clientY: offset.top + 10, - }); - - $el.find('canvas')[0].dispatchEvent(event); - - await Bluebird.delay(10); - - let tooltip = document.getElementById('vega-kibana-tooltip'); - expect(tooltip).to.be.ok(); - expect(tooltip.innerHTML).to.be( - '

This is a long title

' + - '' + - '' + - '' + - '
fieldA:value of fld1
fld2:42
' - ); - - vegaVis.destroy(); - - tooltip = document.getElementById('vega-kibana-tooltip'); - expect(tooltip).to.not.be.ok(); - } finally { - vegaVis.destroy(); - } - }); - - it('should show vega blank rectangle on top of a map (vegamap)', async () => { - let vegaVis; - try { - vegaVis = new VegaVisualization(domNode, vis); - const vegaParser = new VegaParser( - vegaMapGraph, - new SearchAPI({ - search: npStart.plugins.data.search, - uiSettings: npStart.core.uiSettings, - injectedMetadata: npStart.core.injectedMetadata, - }) - ); - await vegaParser.parseAsync(); - - domNode.style.width = '256px'; - domNode.style.height = '256px'; - - await vegaVis.render(vegaParser, vis.params, { data: true }); - const mismatchedPixels = await compareImage(vegaMapImage256); - expect(mismatchedPixels).to.be.lessThan(PIXEL_DIFF); - } finally { - vegaVis.destroy(); - } - }); - - it('should add a small subpixel value to the height of the canvas to avoid getting it set to 0', async () => { - let vegaVis; - try { - vegaVis = new VegaVisualization(domNode, vis); - const vegaParser = new VegaParser( - `{ - "$schema": "https://vega.github.io/schema/vega/v5.json", - "marks": [ - { - "type": "text", - "encode": { - "update": { - "text": { - "value": "Test" - }, - "align": {"value": "center"}, - "baseline": {"value": "middle"}, - "xc": {"signal": "width/2"}, - "yc": {"signal": "height/2"} - fontSize: {value: "14"} - } - } - } - ] - }`, - new SearchAPI({ - search: npStart.plugins.data.search, - uiSettings: npStart.core.uiSettings, - injectedMetadata: npStart.core.injectedMetadata, - }) - ); - await vegaParser.parseAsync(); - - domNode.style.width = '256px'; - domNode.style.height = '256px'; - - await vegaVis.render(vegaParser, vis.params, { data: true }); - const vegaView = vegaVis._vegaView._view; - expect(vegaView.height()).to.be(250.00000001); - } finally { - vegaVis.destroy(); - } - }); - }); - - async function compareImage(expectedImageSource) { - const elementList = domNode.querySelectorAll('canvas'); - expect(elementList.length).to.equal(1); - const firstCanvasOnMap = elementList[0]; - return imageComparator.compareImage(firstCanvasOnMap, expectedImageSource, THRESHOLD); - } - - function setupDOM(width, height) { - domNode = document.createElement('div'); - domNode.style.top = '0'; - domNode.style.left = '0'; - domNode.style.width = width; - domNode.style.height = height; - domNode.style.position = 'fixed'; - domNode.style.border = '1px solid blue'; - domNode.style['pointer-events'] = 'none'; - document.body.appendChild(domNode); - } - - function teardownDOM() { - domNode.innerHTML = ''; - document.body.removeChild(domNode); - } -}); diff --git a/src/legacy/core_plugins/kibana/public/__tests__/vis_type_vega/vegalite_graph.hjson b/src/legacy/core_plugins/kibana/public/__tests__/vis_type_vega/vegalite_graph.hjson deleted file mode 100644 index 2132b0f77e6bc..0000000000000 --- a/src/legacy/core_plugins/kibana/public/__tests__/vis_type_vega/vegalite_graph.hjson +++ /dev/null @@ -1,45 +0,0 @@ -{ - $schema: https://vega.github.io/schema/vega-lite/v4.json - data: { - format: {property: "aggregations.time_buckets.buckets"} - values: { - aggregations: { - time_buckets: { - buckets: [ - {key: 1512950400000, doc_count: 0} - {key: 1513036800000, doc_count: 0} - {key: 1513123200000, doc_count: 0} - {key: 1513209600000, doc_count: 4545} - {key: 1513296000000, doc_count: 4667} - {key: 1513382400000, doc_count: 4660} - {key: 1513468800000, doc_count: 133} - {key: 1513555200000, doc_count: 0} - {key: 1513641600000, doc_count: 0} - {key: 1513728000000, doc_count: 0} - ] - } - } - status: 200 - } - } - mark: line - encoding: { - x: { - field: key - type: temporal - axis: null - } - y: { - field: doc_count - type: quantitative - axis: null - } - } - config: { - range: { - category: {scheme: "elastic"} - } - mark: {color: "#54B399"} - } - autosize: {type: "fit", contains: "padding"} -} diff --git a/src/legacy/core_plugins/kibana/public/__tests__/vis_type_vega/vegalite_image_256.png b/src/legacy/core_plugins/kibana/public/__tests__/vis_type_vega/vegalite_image_256.png deleted file mode 100644 index 8f2d146287b08..0000000000000 Binary files a/src/legacy/core_plugins/kibana/public/__tests__/vis_type_vega/vegalite_image_256.png and /dev/null differ diff --git a/src/legacy/core_plugins/kibana/public/__tests__/vis_type_vega/vegalite_image_512.png b/src/legacy/core_plugins/kibana/public/__tests__/vis_type_vega/vegalite_image_512.png deleted file mode 100644 index 82077a1096b99..0000000000000 Binary files a/src/legacy/core_plugins/kibana/public/__tests__/vis_type_vega/vegalite_image_512.png and /dev/null differ diff --git a/src/plugins/vis_type_tagcloud/public/components/tag_cloud_visualization.test.js b/src/plugins/vis_type_tagcloud/public/components/tag_cloud_visualization.test.js index 7f96066c16076..afdc273782709 100644 --- a/src/plugins/vis_type_tagcloud/public/components/tag_cloud_visualization.test.js +++ b/src/plugins/vis_type_tagcloud/public/components/tag_cloud_visualization.test.js @@ -122,8 +122,6 @@ describe('TagCloudVisualizationTest', () => { uiState: false, }); - domNode.style.width = '256px'; - domNode.style.height = '368px'; await tagcloudVisualization.render(dummyTableGroup, vis.params, { resize: true, params: false, diff --git a/src/plugins/vis_type_vega/public/__mocks__/services.ts b/src/plugins/vis_type_vega/public/__mocks__/services.ts deleted file mode 100644 index 4775241a66d50..0000000000000 --- a/src/plugins/vis_type_vega/public/__mocks__/services.ts +++ /dev/null @@ -1,57 +0,0 @@ -/* - * 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 { CoreStart, IUiSettingsClient, NotificationsStart, SavedObjectsStart } from 'kibana/public'; - -import { createGetterSetter } from '../../../kibana_utils/public'; -import { DataPublicPluginStart } from '../../../data/public'; -import { dataPluginMock } from '../../../data/public/mocks'; -import { coreMock } from '../../../../core/public/mocks'; - -export const [getData, setData] = createGetterSetter('Data'); -setData(dataPluginMock.createStartContract()); - -export const [getNotifications, setNotifications] = createGetterSetter( - 'Notifications' -); -setNotifications(coreMock.createStart().notifications); - -export const [getUISettings, setUISettings] = createGetterSetter('UISettings'); -setUISettings(coreMock.createStart().uiSettings); - -export const [getInjectedMetadata, setInjectedMetadata] = createGetterSetter< - CoreStart['injectedMetadata'] ->('InjectedMetadata'); -setInjectedMetadata(coreMock.createStart().injectedMetadata); - -export const [getSavedObjects, setSavedObjects] = createGetterSetter( - 'SavedObjects' -); -setSavedObjects(coreMock.createStart().savedObjects); - -export const [getInjectedVars, setInjectedVars] = createGetterSetter<{ - enableExternalUrls: boolean; - emsTileLayerId: unknown; -}>('InjectedVars'); -setInjectedVars({ - emsTileLayerId: {}, - enableExternalUrls: true, -}); - -export const getEnableExternalUrls = () => getInjectedVars().enableExternalUrls; -export const getEmsTileLayerId = () => getInjectedVars().emsTileLayerId; diff --git a/src/plugins/vis_type_vega/public/__snapshots__/vega_visualization.test.js.snap b/src/plugins/vis_type_vega/public/__snapshots__/vega_visualization.test.js.snap new file mode 100644 index 0000000000000..650d9c1b430f0 --- /dev/null +++ b/src/plugins/vis_type_vega/public/__snapshots__/vega_visualization.test.js.snap @@ -0,0 +1,9 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`VegaVisualizations VegaVisualization - basics should show vega blank rectangle on top of a map (vegamap) 1`] = `"
+−
"`; + +exports[`VegaVisualizations VegaVisualization - basics should show vega graph (may fail in dev env) 1`] = `"
"`; + +exports[`VegaVisualizations VegaVisualization - basics should show vegalite graph and update on resize (may fail in dev env) 1`] = `"
"`; + +exports[`VegaVisualizations VegaVisualization - basics should show vegalite graph and update on resize (may fail in dev env) 2`] = `"
"`; diff --git a/src/plugins/vis_type_vega/public/default_spec.ts b/src/plugins/vis_type_vega/public/default_spec.ts new file mode 100644 index 0000000000000..71f44b694a10e --- /dev/null +++ b/src/plugins/vis_type_vega/public/default_spec.ts @@ -0,0 +1,23 @@ +/* + * 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. + */ + +// @ts-ignore +import defaultSpec from '!!raw-loader!./default.spec.hjson'; + +export const getDefaultSpec = () => defaultSpec; diff --git a/src/plugins/vis_type_vega/public/test_utils/default.spec.json b/src/plugins/vis_type_vega/public/test_utils/default.spec.json new file mode 100644 index 0000000000000..8cf763647115f --- /dev/null +++ b/src/plugins/vis_type_vega/public/test_utils/default.spec.json @@ -0,0 +1,41 @@ +{ + "$schema": "https://vega.github.io/schema/vega-lite/v4.json", + "title": "Event counts from all indexes", + "data": { + "url": { + "%context%": true, + "%timefield%": "@timestamp", + "index": "_all", + "body": { + "aggs": { + "time_buckets": { + "date_histogram": { + "field": "@timestamp", + "interval": { "%autointerval%": true }, + "extended_bounds": { + "min": { "%timefilter%": "min" }, + "max": { "%timefilter%": "max" } + }, + "min_doc_count": 0 + } + } + }, + "size": 0 + } + }, + "format": { "property": "aggregations.time_buckets.buckets" } + }, + "mark": "line", + "encoding": { + "x": { + "field": "key", + "type": "temporal", + "axis": { "title": false } + }, + "y": { + "field": "doc_count", + "type": "quantitative", + "axis": { "title": "Document count" } + } + } +} diff --git a/src/plugins/vis_type_vega/public/test_utils/vega_graph.json b/src/plugins/vis_type_vega/public/test_utils/vega_graph.json new file mode 100644 index 0000000000000..babde96fd3dae --- /dev/null +++ b/src/plugins/vis_type_vega/public/test_utils/vega_graph.json @@ -0,0 +1,78 @@ +{ + "$schema": "https://vega.github.io/schema/vega/v5.json", + "data": [ + { + "name": "table", + "values": [ + {"x": 0, "y": 28, "c": 0}, {"x": 0, "y": 55, "c": 1}, {"x": 1, "y": 43, "c": 0}, {"x": 1, "y": 91, "c": 1}, + {"x": 2, "y": 81, "c": 0}, {"x": 2, "y": 53, "c": 1}, {"x": 3, "y": 19, "c": 0}, {"x": 3, "y": 87, "c": 1}, + {"x": 4, "y": 52, "c": 0}, {"x": 4, "y": 48, "c": 1}, {"x": 5, "y": 24, "c": 0}, {"x": 5, "y": 49, "c": 1}, + {"x": 6, "y": 87, "c": 0}, {"x": 6, "y": 66, "c": 1}, {"x": 7, "y": 17, "c": 0}, {"x": 7, "y": 27, "c": 1}, + {"x": 8, "y": 68, "c": 0}, {"x": 8, "y": 16, "c": 1}, {"x": 9, "y": 49, "c": 0}, {"x": 9, "y": 15, "c": 1} + ], + "transform": [ + { + "type": "stack", + "groupby": ["x"], + "sort": {"field": "c"}, + "field": "y" + } + ] + } + ], + "scales": [ + { + "name": "x", + "type": "point", + "range": "width", + "domain": {"data": "table", "field": "x"} + }, + { + "name": "y", + "type": "linear", + "range": "height", + "nice": true, + "zero": true, + "domain": {"data": "table", "field": "y1"} + }, + { + "name": "color", + "type": "ordinal", + "range": "category", + "domain": {"data": "table", "field": "c"} + } + ], + "marks": [ + { + "type": "group", + "from": { + "facet": {"name": "series", "data": "table", "groupby": "c"} + }, + "marks": [ + { + "type": "area", + "from": {"data": "series"}, + "encode": { + "enter": { + "interpolate": {"value": "monotone"}, + "x": {"scale": "x", "field": "x"}, + "y": {"scale": "y", "field": "y0"}, + "y2": {"scale": "y", "field": "y1"}, + "fill": {"scale": "color", "field": "c"} + }, + "update": { + "fillOpacity": {"value": 1} + }, + "hover": { + "fillOpacity": {"value": 0.5} + } + } + } + ] + } + ], + "autosize": { "type": "none" }, + "width": 512, + "height": 512, + "config": { "kibana": { "renderer": "svg" }} +} diff --git a/src/plugins/vis_type_vega/public/test_utils/vega_map_test.json b/src/plugins/vis_type_vega/public/test_utils/vega_map_test.json new file mode 100644 index 0000000000000..9100de38ae387 --- /dev/null +++ b/src/plugins/vis_type_vega/public/test_utils/vega_map_test.json @@ -0,0 +1,20 @@ +{ + "$schema": "https://vega.github.io/schema/vega/v5.json", + "config": { + "kibana": { "renderer": "svg", "type": "map", "mapStyle": false} + }, + "width": 512, + "height": 512, + "marks": [ + { + "type": "rect", + "encode": { + "enter": { + "fill": {"value": "#0f0"}, + "width": {"signal": "width"}, + "height": {"signal": "height"} + } + } + } + ] +} diff --git a/src/plugins/vis_type_vega/public/test_utils/vegalite_graph.json b/src/plugins/vis_type_vega/public/test_utils/vegalite_graph.json new file mode 100644 index 0000000000000..5394f009b074f --- /dev/null +++ b/src/plugins/vis_type_vega/public/test_utils/vegalite_graph.json @@ -0,0 +1,42 @@ +{ + "$schema": "https://vega.github.io/schema/vega-lite/v4.json", + "data": { + "format": {"property": "aggregations.time_buckets.buckets"}, + "values": { + "aggregations": { + "time_buckets": { + "buckets": [ + {"key": 1512950400000, "doc_count": 0}, + {"key": 1513036800000, "doc_count": 0}, + {"key": 1513123200000, "doc_count": 0}, + {"key": 1513209600000, "doc_count": 4545}, + {"key": 1513296000000, "doc_count": 4667}, + {"key": 1513382400000, "doc_count": 4660}, + {"key": 1513468800000, "doc_count": 133}, + {"key": 1513555200000, "doc_count": 0}, + {"key": 1513641600000, "doc_count": 0}, + {"key": 1513728000000, "doc_count": 0} + ] + } + }, + "status": 200 + } + }, + "mark": "line", + "encoding": { + "x": { + "field": "key", + "type": "temporal", + "axis": null + }, + "y": { + "field": "doc_count", + "type": "quantitative", + "axis": null + } + }, + "autosize": { "type": "fit" }, + "width": 512, + "height": 512, + "config": { "kibana": { "renderer": "svg" }} +} diff --git a/src/plugins/vis_type_vega/public/vega_type.ts b/src/plugins/vis_type_vega/public/vega_type.ts index 55ad134c05301..5825661f9001c 100644 --- a/src/plugins/vis_type_vega/public/vega_type.ts +++ b/src/plugins/vis_type_vega/public/vega_type.ts @@ -25,8 +25,7 @@ import { VegaVisEditor } from './components'; import { createVegaRequestHandler } from './vega_request_handler'; // @ts-ignore import { createVegaVisualization } from './vega_visualization'; -// @ts-ignore -import defaultSpec from '!!raw-loader!./default.spec.hjson'; +import { getDefaultSpec } from './default_spec'; export const createVegaTypeDefinition = (dependencies: VegaVisualizationDependencies) => { const requestHandler = createVegaRequestHandler(dependencies); @@ -40,7 +39,7 @@ export const createVegaTypeDefinition = (dependencies: VegaVisualizationDependen description: 'Vega and Vega-Lite are product names and should not be translated', }), icon: 'visVega', - visConfig: { defaults: { spec: defaultSpec } }, + visConfig: { defaults: { spec: getDefaultSpec() } }, editorConfig: { optionsTemplate: VegaVisEditor, enableAutoApply: true, diff --git a/src/plugins/vis_type_vega/public/vega_visualization.test.js b/src/plugins/vis_type_vega/public/vega_visualization.test.js new file mode 100644 index 0000000000000..a6ad6e4908bb4 --- /dev/null +++ b/src/plugins/vis_type_vega/public/vega_visualization.test.js @@ -0,0 +1,232 @@ +/* + * 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 $ from 'jquery'; + +import 'leaflet/dist/leaflet.js'; +import 'leaflet-vega'; +import { createVegaVisualization } from './vega_visualization'; + +import vegaliteGraph from './test_utils/vegalite_graph.json'; +import vegaGraph from './test_utils/vega_graph.json'; +import vegaMapGraph from './test_utils/vega_map_test.json'; + +import { VegaParser } from './data_model/vega_parser'; +import { SearchAPI } from './data_model/search_api'; + +import { createVegaTypeDefinition } from './vega_type'; + +import { + setInjectedVars, + setData, + setSavedObjects, + setNotifications, + setKibanaMapFactory, +} from './services'; +import { coreMock } from '../../../core/public/mocks'; +import { dataPluginMock } from '../../data/public/mocks'; +import { KibanaMap } from '../../maps_legacy/public/map/kibana_map'; + +jest.mock('./default_spec', () => ({ + getDefaultSpec: () => jest.requireActual('./test_utils/default.spec.json'), +})); + +jest.mock('./lib/vega', () => ({ + vega: jest.requireActual('vega'), + vegaLite: jest.requireActual('vega-lite'), +})); + +describe('VegaVisualizations', () => { + let domNode; + let VegaVisualization; + let vis; + let vegaVisualizationDependencies; + let vegaVisType; + + let mockWidth; + let mockedWidthValue; + let mockHeight; + let mockedHeightValue; + + const coreStart = coreMock.createStart(); + const dataPluginStart = dataPluginMock.createStartContract(); + + const setupDOM = (width = 512, height = 512) => { + mockedWidthValue = width; + mockedHeightValue = height; + domNode = document.createElement('div'); + + mockWidth = jest.spyOn($.prototype, 'width').mockImplementation(() => mockedWidthValue); + mockHeight = jest.spyOn($.prototype, 'height').mockImplementation(() => mockedHeightValue); + }; + + setKibanaMapFactory((...args) => new KibanaMap(...args)); + setInjectedVars({ + emsTileLayerId: {}, + enableExternalUrls: true, + esShardTimeout: 10000, + }); + setData(dataPluginStart); + setSavedObjects(coreStart.savedObjects); + setNotifications(coreStart.notifications); + + beforeEach(() => { + vegaVisualizationDependencies = { + core: coreMock.createSetup(), + plugins: { + data: dataPluginMock.createSetupContract(), + }, + }; + + vegaVisType = createVegaTypeDefinition(vegaVisualizationDependencies); + VegaVisualization = createVegaVisualization(vegaVisualizationDependencies); + }); + + describe('VegaVisualization - basics', () => { + beforeEach(async () => { + setupDOM(); + + vis = { + type: vegaVisType, + }; + }); + + afterEach(() => { + mockWidth.mockRestore(); + mockHeight.mockRestore(); + }); + + test('should show vegalite graph and update on resize (may fail in dev env)', async () => { + let vegaVis; + try { + vegaVis = new VegaVisualization(domNode, vis); + + const vegaParser = new VegaParser( + JSON.stringify(vegaliteGraph), + new SearchAPI({ + search: dataPluginStart.search, + uiSettings: coreStart.uiSettings, + injectedMetadata: coreStart.injectedMetadata, + }) + ); + await vegaParser.parseAsync(); + await vegaVis.render(vegaParser); + expect(domNode.innerHTML).toMatchSnapshot(); + + mockedWidthValue = 256; + mockedHeightValue = 256; + + await vegaVis._vegaView.resize(); + + expect(domNode.innerHTML).toMatchSnapshot(); + } finally { + vegaVis.destroy(); + } + }); + + test('should show vega graph (may fail in dev env)', async () => { + let vegaVis; + try { + vegaVis = new VegaVisualization(domNode, vis); + const vegaParser = new VegaParser( + JSON.stringify(vegaGraph), + new SearchAPI({ + search: dataPluginStart.search, + uiSettings: coreStart.uiSettings, + injectedMetadata: coreStart.injectedMetadata, + }) + ); + await vegaParser.parseAsync(); + + await vegaVis.render(vegaParser); + expect(domNode.innerHTML).toMatchSnapshot(); + } finally { + vegaVis.destroy(); + } + }); + + test('should show vega blank rectangle on top of a map (vegamap)', async () => { + let vegaVis; + try { + vegaVis = new VegaVisualization(domNode, vis); + const vegaParser = new VegaParser( + JSON.stringify(vegaMapGraph), + new SearchAPI({ + search: dataPluginStart.search, + uiSettings: coreStart.uiSettings, + injectedMetadata: coreStart.injectedMetadata, + }) + ); + await vegaParser.parseAsync(); + + mockedWidthValue = 256; + mockedHeightValue = 256; + + await vegaVis.render(vegaParser); + expect(domNode.innerHTML).toMatchSnapshot(); + } finally { + vegaVis.destroy(); + } + }); + + test('should add a small subpixel value to the height of the canvas to avoid getting it set to 0', async () => { + let vegaVis; + try { + vegaVis = new VegaVisualization(domNode, vis); + const vegaParser = new VegaParser( + `{ + "$schema": "https://vega.github.io/schema/vega/v5.json", + "marks": [ + { + "type": "text", + "encode": { + "update": { + "text": { + "value": "Test" + }, + "align": {"value": "center"}, + "baseline": {"value": "middle"}, + "xc": {"signal": "width/2"}, + "yc": {"signal": "height/2"} + fontSize: {value: "14"} + } + } + } + ] + }`, + new SearchAPI({ + search: dataPluginStart.search, + uiSettings: coreStart.uiSettings, + injectedMetadata: coreStart.injectedMetadata, + }) + ); + await vegaParser.parseAsync(); + + mockedWidthValue = 256; + mockedHeightValue = 256; + + await vegaVis.render(vegaParser); + const vegaView = vegaVis._vegaView._view; + expect(vegaView.height()).toBe(250.00000001); + } finally { + vegaVis.destroy(); + } + }); + }); +});