From b7eef03a34a3533b022f3739c326b967d5a3946d Mon Sep 17 00:00:00 2001 From: Alison Goryachev Date: Tue, 28 Jan 2020 08:33:18 -0500 Subject: [PATCH 01/45] [Index Management] Fix errors with validation (#56072) --- .../detail_panel/edit_settings_json/edit_settings_json.js | 3 ++- .../index_actions_context_menu.js | 7 ++++--- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/x-pack/legacy/plugins/index_management/public/app/sections/home/index_list/detail_panel/edit_settings_json/edit_settings_json.js b/x-pack/legacy/plugins/index_management/public/app/sections/home/index_list/detail_panel/edit_settings_json/edit_settings_json.js index f9e398e384a83..4f2d0b3de96b7 100644 --- a/x-pack/legacy/plugins/index_management/public/app/sections/home/index_list/detail_panel/edit_settings_json/edit_settings_json.js +++ b/x-pack/legacy/plugins/index_management/public/app/sections/home/index_list/detail_panel/edit_settings_json/edit_settings_json.js @@ -67,7 +67,8 @@ export class EditSettingsJson extends React.PureComponent { const editor = (this.editor = createAceEditor(this.aceDiv, prettyJson, false, settingsKeys)); const session = editor.getSession(); session.on('changeAnnotation', () => { - this.setState({ valid: session.getAnnotations().length === 0 }); + const isEmptyString = session.getValue() === ''; + this.setState({ valid: !isEmptyString && session.getAnnotations().length === 0 }); }); } } diff --git a/x-pack/legacy/plugins/index_management/public/app/sections/home/index_list/index_actions_context_menu/index_actions_context_menu.js b/x-pack/legacy/plugins/index_management/public/app/sections/home/index_list/index_actions_context_menu/index_actions_context_menu.js index 938e5961a8db4..ea1fcdc51fc4d 100644 --- a/x-pack/legacy/plugins/index_management/public/app/sections/home/index_list/index_actions_context_menu/index_actions_context_menu.js +++ b/x-pack/legacy/plugins/index_management/public/app/sections/home/index_list/index_actions_context_menu/index_actions_context_menu.js @@ -13,7 +13,7 @@ import { EuiButton, EuiCallOut, EuiContextMenu, - EuiFieldText, + EuiFieldNumber, EuiForm, EuiFormRow, EuiPopover, @@ -368,7 +368,7 @@ export class IndexActionsContextMenu extends Component { - { this.setState({ forcemergeSegments: event.target.value }); }} + min={1} name="maxNumberSegments" /> From e237c9cf33c252d3f3ca1214368baf7c3b87142a Mon Sep 17 00:00:00 2001 From: Walter Rafelsberger Date: Tue, 28 Jan 2020 14:52:24 +0100 Subject: [PATCH 02/45] [ML] Fix persist/restore of time/refreshInterval in data visualizer. (#56122) Fixes persist/restore of time/refreshInterval in data visualizer. --- .../datavisualizer/index_based/page.tsx | 40 +++++++++++++++++-- 1 file changed, 37 insertions(+), 3 deletions(-) diff --git a/x-pack/legacy/plugins/ml/public/application/datavisualizer/index_based/page.tsx b/x-pack/legacy/plugins/ml/public/application/datavisualizer/index_based/page.tsx index 721b8a458efc1..268cd86da74fd 100644 --- a/x-pack/legacy/plugins/ml/public/application/datavisualizer/index_based/page.tsx +++ b/x-pack/legacy/plugins/ml/public/application/datavisualizer/index_based/page.tsx @@ -41,6 +41,7 @@ import { useKibanaContext, SavedSearchQuery } from '../../contexts/kibana'; import { kbnTypeToMLJobType } from '../../util/field_types_utils'; import { timeBasedIndexCheck, getQueryFromSavedSearch } from '../../util/index_utils'; import { TimeBuckets } from '../../util/time_buckets'; +import { useUrlState } from '../../util/url_state'; import { FieldRequestConfig, FieldVisConfig } from './common'; import { ActionsPanel } from './components/actions_panel'; import { FieldsPanel } from './components/fields_panel'; @@ -102,6 +103,26 @@ export const Page: FC = () => { const dataLoader = new DataLoader(currentIndexPattern, kibanaConfig); + const [globalState, setGlobalState] = useUrlState('_g'); + useEffect(() => { + if (globalState?.time !== undefined) { + timefilter.setTime({ + from: globalState.time.from, + to: globalState.time.to, + }); + } + }, [globalState?.time?.from, globalState?.time?.to]); + useEffect(() => { + if (globalState?.refreshInterval !== undefined) { + timefilter.setRefreshInterval(globalState.refreshInterval); + } + }, [globalState?.refreshInterval?.pause, globalState?.refreshInterval?.value]); + + const [lastRefresh, setLastRefresh] = useState(0); + useEffect(() => { + loadOverallStats(); + }, [lastRefresh]); + useEffect(() => { if (currentIndexPattern.timeFieldName !== undefined) { timefilter.enableTimeRangeSelector(); @@ -175,7 +196,13 @@ export const Page: FC = () => { const timeUpdateSubscription = merge( timefilter.getTimeUpdate$(), mlTimefilterRefresh$ - ).subscribe(loadOverallStats); + ).subscribe(() => { + setGlobalState({ + time: timefilter.getTime(), + refreshInterval: timefilter.getRefreshInterval(), + }); + setLastRefresh(Date.now()); + }); return () => { timeUpdateSubscription.unsubscribe(); }; @@ -231,9 +258,16 @@ export const Page: FC = () => { const tf = timefilter as any; let earliest; let latest; + + const activeBounds = tf.getActiveBounds(); + + if (currentIndexPattern.timeFieldName !== undefined && activeBounds === undefined) { + return; + } + if (currentIndexPattern.timeFieldName !== undefined) { - earliest = tf.getActiveBounds().min.valueOf(); - latest = tf.getActiveBounds().max.valueOf(); + earliest = activeBounds.min.valueOf(); + latest = activeBounds.max.valueOf(); } try { From 22117abf495b10f6a8cd44ab192cd4907f9a0e75 Mon Sep 17 00:00:00 2001 From: Joe Reuter Date: Tue, 28 Jan 2020 15:02:04 +0100 Subject: [PATCH 03/45] fix tutorial documentation (#55996) --- docs/developer/add-data-guide.asciidoc | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/docs/developer/add-data-guide.asciidoc b/docs/developer/add-data-guide.asciidoc index aec44a9537ee8..e00e46868bb2d 100644 --- a/docs/developer/add-data-guide.asciidoc +++ b/docs/developer/add-data-guide.asciidoc @@ -11,23 +11,24 @@ Each tutorial contains three sets of instructions: [float] === Creating a new tutorial -// TODO: update path to where the directory must be created on the new platform -1. Create a new directory in the link:https://github.com/elastic/kibana/tree/master/src/legacy/core_plugins/kibana/server/tutorials[tutorials directory]. -2. In the new directory, create a file called `index.js` that exports a function. -The function must return a JavaScript object that conforms to the link:https://github.com/elastic/kibana/blob/master/src/plugins/home/server/services/tutorials/lib/tutorial_schema.ts[tutorial schema]. -// TODO: update path to where the tutorial must be registered on the new platform -3. Register the tutorial in link:https://github.com/elastic/kibana/blob/master/src/legacy/core_plugins/kibana/server/tutorials/register.js[register.js] by calling `server.newPlatform.setup.plugins.home.tutorials.registerTutorial(myFuncImportedFromIndexJs)`. -// TODO: update path to where the image assets must be added on the new platform +1. Create a new directory in the link:https://github.com/elastic/kibana/tree/master/src/plugins/home/server/tutorials[tutorials directory]. +2. In the new directory, create a file called `index.ts` that exports a function. +The function must return a function object that conforms to the `TutorialSchema` interface link:https://github.com/elastic/kibana/blob/master/src/plugins/home/server/services/tutorials/lib/tutorial_schema.ts[tutorial schema]. +3. Register the tutorial in link:https://github.com/elastic/kibana/blob/master/src/plugins/home/server/tutorials/register.ts[register.ts] by adding it to the `builtInTutorials`. +// TODO update path once assets are migrated 4. Add image assets to the link:https://github.com/elastic/kibana/tree/master/src/legacy/core_plugins/kibana/public/home/tutorial_resources[tutorial_resources directory]. 5. Run Kibana locally to preview the tutorial. 6. Create a PR and go through the review process to get the changes approved. +If you are creating a new plugin and the tutorial is only related to that plugin, you can also place the `TutorialSchema` object into your plugin folder. Add `home` to the `requiredPlugins` list in your `kibana.json` file. +Then register the tutorial object by calling `home.tutorials.registerTutorial(tutorialObject)` in the `setup` lifecycle of your server plugin. + [float] ==== Variables String values can contain variables that are substituted when rendered. Variables are specified by `{}`. For example: `{config.docs.version}` is rendered as `6.2` when running the tutorial in Kibana 6.2. -link:https://github.com/elastic/kibana/blob/master/src/legacy/core_plugins/kibana/public/home/components/tutorial/replace_template_strings.js#L23[Provided variables] +link:https://github.com/elastic/kibana/blob/master/src/legacy/core_plugins/kibana/public/home/np_ready/components/tutorial/replace_template_strings.js#L23[Provided variables] [float] ==== Markdown From 05ed2d63b590de425d33718aa56f5f3d5b3b9b90 Mon Sep 17 00:00:00 2001 From: Nick Partridge Date: Tue, 28 Jan 2020 08:13:56 -0600 Subject: [PATCH 04/45] Charts plugin (combining ui/color_maps and EuiUtils) (#55469) * Combine ui/color_maps and EuiUtils into new Charts plugin * EuiUtils is now the theme service * ui/color_maps is now the colorMaps service * Fix all imports of each to pull from new Charts plugin * Add theme methods to both setup and start contracts * Move and jestify heatMapColors tests * Convert remaining js files to ts * Move vis/color to Charts plugin * Update missed visTypeVislib naming --- .i18nrc.json | 1 + .../kibana/public/discover/build_services.ts | 6 +- .../np_ready/angular/directives/histogram.tsx | 8 +- .../kibana/public/discover/plugin.ts | 4 +- .../core_plugins/kibana/public/kibana.js | 1 - .../region_map/public/choropleth_layer.js | 3 +- .../region_map/public/region_map_type.js | 4 +- .../public/region_map_visualization.js | 2 +- .../tile_map/public/markers/scaled_circles.js | 13 +- .../tile_map/public/tile_map_type.js | 4 +- .../components/metric_vis_component.test.tsx | 4 +- .../components/metric_vis_component.tsx | 6 +- .../vis_type_metric/public/legacy.ts | 1 + .../vis_type_metric/public/legacy_imports.ts | 2 - .../public/metric_vis_fn.test.ts | 3 +- .../vis_type_metric/public/metric_vis_fn.ts | 2 +- .../public/metric_vis_type.test.ts | 4 +- .../vis_type_metric/public/metric_vis_type.ts | 7 +- .../vis_type_metric/public/plugin.ts | 11 +- .../vis_type_metric/public/types.ts | 2 +- .../public/components/__tests__/tag_cloud.js | 28 +- .../__tests__/tag_cloud_visualization.js | 11 +- .../public/components/tag_cloud.js | 16 +- .../components/tag_cloud_visualization.js | 226 ++++++------ .../vis_type_tagcloud/public/legacy.ts | 1 + .../vis_type_tagcloud/public/plugin.ts | 21 +- .../public/tag_cloud_type.ts | 9 +- .../core_plugins/vis_type_vislib/index.ts | 4 +- .../vis_type_vislib/public/area.ts | 4 +- .../public/components/common/color_schema.tsx | 3 +- .../components/options/gauge/ranges_panel.tsx | 2 +- .../vis_type_vislib/public/gauge.ts | 7 +- .../vis_type_vislib/public/goal.ts | 7 +- .../vis_type_vislib/public/heatmap.ts | 7 +- .../vis_type_vislib/public/histogram.ts | 4 +- .../vis_type_vislib/public/horizontal_bar.ts | 4 +- .../vis_type_vislib/public/index.ts | 2 +- .../vis_type_vislib/public/legacy.ts | 15 +- .../vis_type_vislib/public/legacy_imports.ts | 1 - .../vis_type_vislib/public/line.ts | 4 +- .../vis_type_vislib/public/pie.ts | 4 +- .../vis_type_vislib/public/pie_fn.test.ts | 2 +- .../vis_type_vislib/public/pie_fn.ts | 7 +- .../vis_type_vislib/public/plugin.ts | 38 +- .../vis_type_vislib/public/types.ts | 2 +- .../public/utils/collections.ts | 3 +- .../vis_type_vislib/public/vis_controller.tsx | 4 +- .../public/vis_type_vislib_vis_fn.ts | 2 +- .../__tests__/lib/fixtures/_vis_fixture.js | 15 +- .../vis_type_vislib/public/vislib/lib/data.js | 12 +- .../public/vislib/lib/vis_config.js | 4 +- .../vis_type_vislib/public/vislib/vis.js | 2 +- .../vislib/visualizations/gauges/meter.js | 2 +- .../vislib/visualizations/point_series.js | 2 +- .../point_series/heatmap_chart.js | 3 +- .../public/new_platform/__mocks__/helpers.ts | 3 + .../new_platform/new_platform.karma_mock.js | 15 + .../ui/public/new_platform/new_platform.ts | 5 +- .../public/vis/__tests__/components/color.js | 343 ------------------ .../ui/public/vis/components/color/color.js | 47 --- src/plugins/charts/README.md | 97 +++++ src/plugins/{eui_utils => charts}/kibana.json | 2 +- src/plugins/charts/public/index.ts | 27 ++ src/plugins/charts/public/mocks.ts | 42 +++ src/plugins/charts/public/plugin.ts | 57 +++ .../public/services/colors/color_palette.ts} | 19 +- .../public/services/colors/colors.test.ts | 140 +++++++ .../charts/public/services/colors/colors.ts | 74 ++++ .../services/colors/colors_palette.test.ts | 87 +++++ .../public/services/colors}/index.ts | 5 +- .../services/colors/mapped_colors.test.ts | 163 +++++++++ .../public/services/colors/mapped_colors.ts} | 67 ++-- .../charts/public/services/colors/mock.ts | 28 ++ .../services/colors/seed_colors.test.ts | 26 ++ .../public/services/colors/seed_colors.ts} | 5 +- .../charts/public/services}/index.ts | 7 +- .../charts/public/services/theme/index.ts | 20 + .../charts/public/services/theme/mock.ts | 29 ++ .../public/services/theme/theme.test.tsx} | 54 +-- .../charts/public/services/theme/theme.ts | 63 ++++ .../public/static}/color_maps/color_maps.ts | 26 +- .../static/color_maps/heatmap_color.test.ts} | 75 ++-- .../static/color_maps/heatmap_color.ts} | 25 +- .../charts/public/static/color_maps/index.ts | 29 ++ .../charts/public/static/color_maps/mock.ts | 31 ++ .../color_maps/truncated_color_maps.ts} | 22 +- .../charts/public/static/index.ts} | 2 +- src/plugins/eui_utils/README.md | 67 ---- src/plugins/eui_utils/public/eui_utils.ts | 61 ---- .../dashboard_mode/public/dashboard_viewer.js | 1 - .../public/layers/joins/inner_join.test.js | 2 +- .../ems_file_source/ems_file_source.test.js | 2 +- .../layers/sources/es_term_source.test.js | 2 +- .../maps/public/layers/styles/color_utils.js | 10 +- .../public/layers/styles/color_utils.test.js | 2 + .../components/heatmap_style_editor.test.js | 2 + .../properties/dynamic_color_property.test.js | 1 + .../layers/styles/vector/vector_style.test.js | 2 + .../threshold/visualization.tsx | 2 +- .../translations/translations/ja-JP.json | 12 +- .../translations/translations/zh-CN.json | 12 +- .../helpers/app_context.mock.tsx | 4 +- x-pack/plugins/watcher/kibana.json | 2 +- .../watcher/public/application/app.tsx | 3 +- .../watch_visualization.tsx | 4 +- x-pack/plugins/watcher/public/plugin.ts | 9 +- x-pack/plugins/watcher/public/types.ts | 4 +- 107 files changed, 1453 insertions(+), 952 deletions(-) delete mode 100644 src/legacy/ui/public/vis/__tests__/components/color.js delete mode 100644 src/legacy/ui/public/vis/components/color/color.js create mode 100644 src/plugins/charts/README.md rename src/plugins/{eui_utils => charts}/kibana.json (73%) create mode 100644 src/plugins/charts/public/index.ts create mode 100644 src/plugins/charts/public/mocks.ts create mode 100644 src/plugins/charts/public/plugin.ts rename src/{legacy/ui/public/vis/components/color/color_palette.js => plugins/charts/public/services/colors/color_palette.ts} (90%) create mode 100644 src/plugins/charts/public/services/colors/colors.test.ts create mode 100644 src/plugins/charts/public/services/colors/colors.ts create mode 100644 src/plugins/charts/public/services/colors/colors_palette.test.ts rename src/plugins/{eui_utils/public => charts/public/services/colors}/index.ts (84%) create mode 100644 src/plugins/charts/public/services/colors/mapped_colors.test.ts rename src/{legacy/ui/public/vis/components/color/mapped_colors.js => plugins/charts/public/services/colors/mapped_colors.ts} (61%) create mode 100644 src/plugins/charts/public/services/colors/mock.ts create mode 100644 src/plugins/charts/public/services/colors/seed_colors.test.ts rename src/{legacy/ui/public/vis/components/color/seed_colors.js => plugins/charts/public/services/colors/seed_colors.ts} (96%) rename src/{legacy/ui/public/color_maps => plugins/charts/public/services}/index.ts (84%) create mode 100644 src/plugins/charts/public/services/theme/index.ts create mode 100644 src/plugins/charts/public/services/theme/mock.ts rename src/plugins/{eui_utils/public/eui_utils.test.tsx => charts/public/services/theme/theme.test.tsx} (57%) create mode 100644 src/plugins/charts/public/services/theme/theme.ts rename src/{legacy/ui/public => plugins/charts/public/static}/color_maps/color_maps.ts (99%) rename src/{legacy/core_plugins/vis_type_vislib/public/vislib/__tests__/components/heatmap_color.js => plugins/charts/public/static/color_maps/heatmap_color.test.ts} (53%) rename src/{legacy/ui/public/color_maps/heatmap_color.js => plugins/charts/public/static/color_maps/heatmap_color.ts} (81%) create mode 100644 src/plugins/charts/public/static/color_maps/index.ts create mode 100644 src/plugins/charts/public/static/color_maps/mock.ts rename src/{legacy/ui/public/color_maps/truncated_color_maps.js => plugins/charts/public/static/color_maps/truncated_color_maps.ts} (67%) rename src/{legacy/ui/public/vis/components/color/index.js => plugins/charts/public/static/index.ts} (95%) delete mode 100644 src/plugins/eui_utils/README.md delete mode 100644 src/plugins/eui_utils/public/eui_utils.ts diff --git a/.i18nrc.json b/.i18nrc.json index f03ced2b85093..4c115296b5b3e 100644 --- a/.i18nrc.json +++ b/.i18nrc.json @@ -12,6 +12,7 @@ "embeddableExamples": "examples/embeddable_examples", "share": "src/plugins/share", "home": "src/plugins/home", + "charts": "src/plugins/charts", "esUi": "src/plugins/es_ui_shared", "devTools": "src/plugins/dev_tools", "expressions": "src/plugins/expressions", diff --git a/src/legacy/core_plugins/kibana/public/discover/build_services.ts b/src/legacy/core_plugins/kibana/public/discover/build_services.ts index bc2436ecdf5ea..f9265323b2dcb 100644 --- a/src/legacy/core_plugins/kibana/public/discover/build_services.ts +++ b/src/legacy/core_plugins/kibana/public/discover/build_services.ts @@ -32,10 +32,10 @@ import { } from 'src/plugins/data/public'; import { createSavedSearchesLoader } from './saved_searches'; import { DiscoverStartPlugins } from './plugin'; -import { EuiUtilsStart } from '../../../../../plugins/eui_utils/public'; import { SharePluginStart } from '../../../../../plugins/share/public'; import { SavedSearch } from './np_ready/types'; import { DocViewsRegistry } from './np_ready/doc_views/doc_views_registry'; +import { ChartsPluginStart } from '../../../../../plugins/charts/public'; export interface DiscoverServices { addBasePath: (path: string) => string; @@ -45,7 +45,7 @@ export interface DiscoverServices { data: DataPublicPluginStart; docLinks: DocLinksStart; docViewsRegistry: DocViewsRegistry; - eui_utils: EuiUtilsStart; + theme: ChartsPluginStart['theme']; filterManager: FilterManager; indexPatterns: IndexPatternsContract; inspector: unknown; @@ -77,7 +77,7 @@ export async function buildServices( data: plugins.data, docLinks: core.docLinks, docViewsRegistry, - eui_utils: plugins.eui_utils, + theme: plugins.charts.theme, filterManager: plugins.data.query.filterManager, getSavedSearchById: async (id: string) => savedObjectService.get(id), getSavedSearchUrlById: async (id: string) => savedObjectService.urlFor(id), diff --git a/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/directives/histogram.tsx b/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/directives/histogram.tsx index b83ac5b4a7795..4d387f44c3d57 100644 --- a/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/directives/histogram.tsx +++ b/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/directives/histogram.tsx @@ -114,13 +114,13 @@ export class DiscoverHistogram extends Component this.setState({ chartsTheme })); + this.subscription = getServices().theme.chartsTheme$.subscribe( + (chartsTheme: EuiChartThemeType['theme']) => this.setState({ chartsTheme }) + ); } componentWillUnmount() { diff --git a/src/legacy/core_plugins/kibana/public/discover/plugin.ts b/src/legacy/core_plugins/kibana/public/discover/plugin.ts index 0897f62574e93..77135f6a98173 100644 --- a/src/legacy/core_plugins/kibana/public/discover/plugin.ts +++ b/src/legacy/core_plugins/kibana/public/discover/plugin.ts @@ -27,7 +27,7 @@ import { IEmbeddableStart, IEmbeddableSetup } from '../../../../../plugins/embed import { getInnerAngularModule, getInnerAngularModuleEmbeddable } from './get_inner_angular'; import { setAngularModule, setServices } from './kibana_services'; import { NavigationPublicPluginStart as NavigationStart } from '../../../../../plugins/navigation/public'; -import { EuiUtilsStart } from '../../../../../plugins/eui_utils/public'; +import { ChartsPluginStart } from '../../../../../plugins/charts/public'; import { buildServices } from './build_services'; import { SharePluginStart } from '../../../../../plugins/share/public'; import { KibanaLegacySetup } from '../../../../../plugins/kibana_legacy/public'; @@ -56,7 +56,7 @@ export interface DiscoverStartPlugins { uiActions: IUiActionsStart; embeddable: IEmbeddableStart; navigation: NavigationStart; - eui_utils: EuiUtilsStart; + charts: ChartsPluginStart; data: DataPublicPluginStart; share: SharePluginStart; inspector: any; diff --git a/src/legacy/core_plugins/kibana/public/kibana.js b/src/legacy/core_plugins/kibana/public/kibana.js index bd947b9cb9d7f..50f1702a2a6d0 100644 --- a/src/legacy/core_plugins/kibana/public/kibana.js +++ b/src/legacy/core_plugins/kibana/public/kibana.js @@ -52,7 +52,6 @@ import './visualize/legacy'; import './dashboard/legacy'; import './management'; import './dev_tools'; -import 'ui/color_maps'; import 'ui/agg_response'; import 'ui/agg_types'; import { showAppRedirectNotification } from 'ui/notify'; diff --git a/src/legacy/core_plugins/region_map/public/choropleth_layer.js b/src/legacy/core_plugins/region_map/public/choropleth_layer.js index 8132976fcbc69..e637a217bfbc3 100644 --- a/src/legacy/core_plugins/region_map/public/choropleth_layer.js +++ b/src/legacy/core_plugins/region_map/public/choropleth_layer.js @@ -23,11 +23,12 @@ import _ from 'lodash'; import d3 from 'd3'; import { i18n } from '@kbn/i18n'; import { KibanaMapLayer } from 'ui/vis/map/kibana_map_layer'; -import { truncatedColorMaps } from 'ui/color_maps'; import * as topojson from 'topojson-client'; import { toastNotifications } from 'ui/notify'; import * as colorUtil from 'ui/vis/map/color_util'; +import { truncatedColorMaps } from '../../../../plugins/charts/public'; + const EMPTY_STYLE = { weight: 1, opacity: 0.6, diff --git a/src/legacy/core_plugins/region_map/public/region_map_type.js b/src/legacy/core_plugins/region_map/public/region_map_type.js index 39353a379ce52..c6c345782d5f5 100644 --- a/src/legacy/core_plugins/region_map/public/region_map_type.js +++ b/src/legacy/core_plugins/region_map/public/region_map_type.js @@ -19,11 +19,11 @@ import React from 'react'; import { i18n } from '@kbn/i18n'; import { Schemas } from 'ui/vis/editors/default/schemas'; -import { truncatedColorSchemas as colorSchemas } from 'ui/color_maps'; import { mapToLayerWithId } from './util'; import { createRegionMapVisualization } from './region_map_visualization'; import { Status } from '../../visualizations/public'; import { RegionMapOptions } from './components/region_map_options'; +import { truncatedColorSchemas } from '../../../../plugins/charts/public'; // TODO: reference to TILE_MAP plugin should be removed import { ORIGIN } from '../../tile_map/common/origin'; @@ -60,7 +60,7 @@ provided base maps, or add your own. Darker colors represent higher values.', editorConfig: { optionsTemplate: props => , collections: { - colorSchemas, + colorSchemas: truncatedColorSchemas, vectorLayers: [], tmsLayers: [], }, diff --git a/src/legacy/core_plugins/region_map/public/region_map_visualization.js b/src/legacy/core_plugins/region_map/public/region_map_visualization.js index f9a5793ca8137..8b5812052a395 100644 --- a/src/legacy/core_plugins/region_map/public/region_map_visualization.js +++ b/src/legacy/core_plugins/region_map/public/region_map_visualization.js @@ -19,11 +19,11 @@ import { i18n } from '@kbn/i18n'; import ChoroplethLayer from './choropleth_layer'; -import { truncatedColorMaps } from 'ui/color_maps'; import { getFormat } from 'ui/visualize/loader/pipeline_helpers/utilities'; import { toastNotifications } from 'ui/notify'; import { TileMapTooltipFormatter } from './tooltip_formatter'; +import { truncatedColorMaps } from '../../../../plugins/charts/public'; // TODO: reference to TILE_MAP plugin should be removed import { BaseMapsVisualizationProvider } from '../../tile_map/public/base_maps_visualization'; diff --git a/src/legacy/core_plugins/tile_map/public/markers/scaled_circles.js b/src/legacy/core_plugins/tile_map/public/markers/scaled_circles.js index fe29d9b6aad21..88d6db82946c7 100644 --- a/src/legacy/core_plugins/tile_map/public/markers/scaled_circles.js +++ b/src/legacy/core_plugins/tile_map/public/markers/scaled_circles.js @@ -22,9 +22,10 @@ import _ from 'lodash'; import d3 from 'd3'; import $ from 'jquery'; import { EventEmitter } from 'events'; -import { truncatedColorMaps } from 'ui/color_maps'; import * as colorUtil from 'ui/vis/map/color_util'; +import { truncatedColorMaps } from '../../../../../plugins/charts/public'; + export class ScaledCirclesMarkers extends EventEmitter { constructor( featureCollection, @@ -87,7 +88,7 @@ export class ScaledCirclesMarkers extends EventEmitter { const quantizeDomain = min !== max ? [min, max] : d3.scale.quantize().domain(); - this._legendColors = makeLegendColors(this._colorRamp); + this._legendColors = this.getLegendColors(); this._legendQuantizer = d3.scale .quantize() .domain(quantizeDomain) @@ -222,11 +223,11 @@ export class ScaledCirclesMarkers extends EventEmitter { getBounds() { return this._leafletLayer.getBounds(); } -} -function makeLegendColors(colorRampKey) { - const colorRamp = _.get(truncatedColorMaps[colorRampKey], 'value'); - return colorUtil.getLegendColors(colorRamp); + getLegendColors() { + const colorRamp = _.get(truncatedColorMaps[this._colorRamp], 'value'); + return colorUtil.getLegendColors(colorRamp); + } } function makeColorDarker(color) { diff --git a/src/legacy/core_plugins/tile_map/public/tile_map_type.js b/src/legacy/core_plugins/tile_map/public/tile_map_type.js index c58c226f0aba0..b4fca3009352a 100644 --- a/src/legacy/core_plugins/tile_map/public/tile_map_type.js +++ b/src/legacy/core_plugins/tile_map/public/tile_map_type.js @@ -21,7 +21,6 @@ import React from 'react'; import { i18n } from '@kbn/i18n'; import { Schemas } from 'ui/vis/editors/default/schemas'; -import { truncatedColorSchemas as colorSchemas } from 'ui/color_maps'; import { convertToGeoJson } from 'ui/vis/map/convert_to_geojson'; import { createTileMapVisualization } from './tile_map_visualization'; @@ -29,6 +28,7 @@ import { Status } from '../../visualizations/public'; import { TileMapOptions } from './components/tile_map_options'; import { MapTypes } from './map_types'; import { supportsCssFilters } from './css_filters'; +import { truncatedColorSchemas } from '../../../../plugins/charts/public'; export function createTileMapTypeDefinition(dependencies) { const CoordinateMapsVisualization = createTileMapVisualization(dependencies); @@ -63,7 +63,7 @@ export function createTileMapTypeDefinition(dependencies) { responseHandler: convertToGeoJson, editorConfig: { collections: { - colorSchemas, + colorSchemas: truncatedColorSchemas, legendPositions: [ { value: 'bottomleft', diff --git a/src/legacy/core_plugins/vis_type_metric/public/components/metric_vis_component.test.tsx b/src/legacy/core_plugins/vis_type_metric/public/components/metric_vis_component.test.tsx index 901273ccbeb95..ada9e8c248a02 100644 --- a/src/legacy/core_plugins/vis_type_metric/public/components/metric_vis_component.test.tsx +++ b/src/legacy/core_plugins/vis_type_metric/public/components/metric_vis_component.test.tsx @@ -20,12 +20,12 @@ import React from 'react'; import { shallow } from 'enzyme'; -import { MetricVisComponent } from './metric_vis_component'; import { Vis } from '../legacy_imports'; +import { MetricVisComponent, MetricVisComponentProps } from './metric_vis_component'; jest.mock('ui/new_platform'); -type Props = MetricVisComponent['props']; +type Props = MetricVisComponentProps; const baseVisData = { columns: [{ id: 'col-0', name: 'Count' }], diff --git a/src/legacy/core_plugins/vis_type_metric/public/components/metric_vis_component.tsx b/src/legacy/core_plugins/vis_type_metric/public/components/metric_vis_component.tsx index 3a6d60a89e610..df563306ef832 100644 --- a/src/legacy/core_plugins/vis_type_metric/public/components/metric_vis_component.tsx +++ b/src/legacy/core_plugins/vis_type_metric/public/components/metric_vis_component.tsx @@ -22,15 +22,16 @@ import React, { Component } from 'react'; import { isColorDark } from '@elastic/eui'; -import { getHeatmapColors, getFormat, Vis } from '../legacy_imports'; +import { getFormat, Vis } from '../legacy_imports'; import { MetricVisValue } from './metric_vis_value'; import { fieldFormats } from '../../../../../plugins/data/public'; import { Context } from '../metric_vis_fn'; import { KibanaDatatable } from '../../../../../plugins/expressions/public'; +import { getHeatmapColors } from '../../../../../plugins/charts/public'; import { VisParams, MetricVisMetric } from '../types'; import { SchemaConfig } from '../../../visualizations/public'; -interface MetricVisComponentProps { +export interface MetricVisComponentProps { visParams: VisParams; visData: Context; vis: Vis; @@ -50,7 +51,6 @@ export class MetricVisComponent extends Component { const to = isPercentageMode ? Math.round((100 * range.to) / max) : range.to; labels.push(`${from} - ${to}`); }); - return labels; } diff --git a/src/legacy/core_plugins/vis_type_metric/public/legacy.ts b/src/legacy/core_plugins/vis_type_metric/public/legacy.ts index 65179ae1315c6..87355c57926b6 100644 --- a/src/legacy/core_plugins/vis_type_metric/public/legacy.ts +++ b/src/legacy/core_plugins/vis_type_metric/public/legacy.ts @@ -27,6 +27,7 @@ import { plugin } from '.'; const plugins: Readonly = { expressions: npSetup.plugins.expressions, visualizations: visualizationsSetup, + charts: npSetup.plugins.charts, }; const pluginInstance = plugin({} as PluginInitializerContext); diff --git a/src/legacy/core_plugins/vis_type_metric/public/legacy_imports.ts b/src/legacy/core_plugins/vis_type_metric/public/legacy_imports.ts index 93dfd76e16b16..6f02407919baa 100644 --- a/src/legacy/core_plugins/vis_type_metric/public/legacy_imports.ts +++ b/src/legacy/core_plugins/vis_type_metric/public/legacy_imports.ts @@ -18,8 +18,6 @@ */ export { Vis, VisParams } from 'ui/vis'; -export { vislibColorMaps, colorSchemas, ColorSchemas } from 'ui/color_maps'; -export { getHeatmapColors } from 'ui/color_maps'; export { getFormat } from 'ui/visualize/loader/pipeline_helpers/utilities'; export { VisOptionsProps } from 'ui/vis/editors/default'; // @ts-ignore diff --git a/src/legacy/core_plugins/vis_type_metric/public/metric_vis_fn.test.ts b/src/legacy/core_plugins/vis_type_metric/public/metric_vis_fn.test.ts index cdd8c2e5b05b3..389b0f53916d0 100644 --- a/src/legacy/core_plugins/vis_type_metric/public/metric_vis_fn.test.ts +++ b/src/legacy/core_plugins/vis_type_metric/public/metric_vis_fn.test.ts @@ -18,8 +18,7 @@ */ import { createMetricVisFn } from './metric_vis_fn'; - -// eslint-disable-next-line +// eslint-disable-next-line @kbn/eslint/no-restricted-paths import { functionWrapper } from '../../../../plugins/expressions/public/functions/tests/utils'; jest.mock('ui/new_platform'); diff --git a/src/legacy/core_plugins/vis_type_metric/public/metric_vis_fn.ts b/src/legacy/core_plugins/vis_type_metric/public/metric_vis_fn.ts index 4ebd8bf97c55a..644de88021c1f 100644 --- a/src/legacy/core_plugins/vis_type_metric/public/metric_vis_fn.ts +++ b/src/legacy/core_plugins/vis_type_metric/public/metric_vis_fn.ts @@ -19,7 +19,6 @@ import { i18n } from '@kbn/i18n'; -import { vislibColorMaps, ColorSchemas } from './legacy_imports'; import { ExpressionFunction, KibanaDatatable, @@ -29,6 +28,7 @@ import { } from '../../../../plugins/expressions/public'; import { ColorModes } from '../../vis_type_vislib/public'; import { visType, DimensionsVisParam, VisParams } from './types'; +import { ColorSchemas, vislibColorMaps } from '../../../../plugins/charts/public'; export type Context = KibanaDatatable; diff --git a/src/legacy/core_plugins/vis_type_metric/public/metric_vis_type.test.ts b/src/legacy/core_plugins/vis_type_metric/public/metric_vis_type.test.ts index c2b7e6da3f7bd..4f535c62f56a0 100644 --- a/src/legacy/core_plugins/vis_type_metric/public/metric_vis_type.test.ts +++ b/src/legacy/core_plugins/vis_type_metric/public/metric_vis_type.test.ts @@ -29,7 +29,7 @@ import { setup as visualizationsSetup, start as visualizationsStart, } from '../../visualizations/public/np_ready/public/legacy'; -import { metricVisTypeDefinition } from './metric_vis_type'; +import { createMetricVisTypeDefinition } from './metric_vis_type'; jest.mock('ui/new_platform'); @@ -37,7 +37,7 @@ describe('metric_vis - createMetricVisTypeDefinition', () => { let vis: Vis; beforeAll(() => { - visualizationsSetup.types.createReactVisualization(metricVisTypeDefinition); + visualizationsSetup.types.createReactVisualization(createMetricVisTypeDefinition()); (npStart.plugins.data.fieldFormats.getType as jest.Mock).mockImplementation(() => { return fieldFormats.UrlFormat; }); diff --git a/src/legacy/core_plugins/vis_type_metric/public/metric_vis_type.ts b/src/legacy/core_plugins/vis_type_metric/public/metric_vis_type.ts index ee7ead0b7331b..0b8d9b17659f4 100644 --- a/src/legacy/core_plugins/vis_type_metric/public/metric_vis_type.ts +++ b/src/legacy/core_plugins/vis_type_metric/public/metric_vis_type.ts @@ -22,9 +22,10 @@ import { i18n } from '@kbn/i18n'; import { MetricVisComponent } from './components/metric_vis_component'; import { MetricVisOptions } from './components/metric_vis_options'; import { ColorModes } from '../../vis_type_vislib/public'; -import { Schemas, AggGroupNames, colorSchemas, ColorSchemas } from './legacy_imports'; +import { Schemas, AggGroupNames } from './legacy_imports'; +import { ColorSchemas, colorSchemas } from '../../../../plugins/charts/public'; -export const metricVisTypeDefinition = { +export const createMetricVisTypeDefinition = () => ({ name: 'metric', title: i18n.translate('visTypeMetric.metricTitle', { defaultMessage: 'Metric' }), icon: 'visMetric', @@ -121,4 +122,4 @@ export const metricVisTypeDefinition = { }, ]), }, -}; +}); diff --git a/src/legacy/core_plugins/vis_type_metric/public/plugin.ts b/src/legacy/core_plugins/vis_type_metric/public/plugin.ts index 413f846d78991..082fab47e573c 100644 --- a/src/legacy/core_plugins/vis_type_metric/public/plugin.ts +++ b/src/legacy/core_plugins/vis_type_metric/public/plugin.ts @@ -22,12 +22,14 @@ import { Plugin as ExpressionsPublicPlugin } from '../../../../plugins/expressio import { VisualizationsSetup } from '../../visualizations/public'; import { createMetricVisFn } from './metric_vis_fn'; -import { metricVisTypeDefinition } from './metric_vis_type'; +import { createMetricVisTypeDefinition } from './metric_vis_type'; +import { ChartsPluginSetup } from '../../../../plugins/charts/public'; /** @internal */ export interface MetricVisPluginSetupDependencies { expressions: ReturnType; visualizations: VisualizationsSetup; + charts: ChartsPluginSetup; } /** @internal */ @@ -38,9 +40,12 @@ export class MetricVisPlugin implements Plugin { this.initializerContext = initializerContext; } - public setup(core: CoreSetup, { expressions, visualizations }: MetricVisPluginSetupDependencies) { + public setup( + core: CoreSetup, + { expressions, visualizations, charts }: MetricVisPluginSetupDependencies + ) { expressions.registerFunction(createMetricVisFn); - visualizations.types.createReactVisualization(metricVisTypeDefinition); + visualizations.types.createReactVisualization(createMetricVisTypeDefinition()); } public start(core: CoreStart) { diff --git a/src/legacy/core_plugins/vis_type_metric/public/types.ts b/src/legacy/core_plugins/vis_type_metric/public/types.ts index 34cb1b209a3ae..298eebf23027d 100644 --- a/src/legacy/core_plugins/vis_type_metric/public/types.ts +++ b/src/legacy/core_plugins/vis_type_metric/public/types.ts @@ -17,10 +17,10 @@ * under the License. */ -import { ColorSchemas } from './legacy_imports'; import { Range } from '../../../../plugins/expressions/public'; import { SchemaConfig } from '../../visualizations/public'; import { ColorModes, Labels, Style } from '../../vis_type_vislib/public'; +import { ColorSchemas } from '../../../../plugins/charts/public'; export const visType = 'metric'; diff --git a/src/legacy/core_plugins/vis_type_tagcloud/public/components/__tests__/tag_cloud.js b/src/legacy/core_plugins/vis_type_tagcloud/public/components/__tests__/tag_cloud.js index 4d4363377563d..136fe51674bf1 100644 --- a/src/legacy/core_plugins/vis_type_tagcloud/public/components/__tests__/tag_cloud.js +++ b/src/legacy/core_plugins/vis_type_tagcloud/public/components/__tests__/tag_cloud.js @@ -26,6 +26,14 @@ import { fromNode, delay } from 'bluebird'; import { ImageComparator } from 'test_utils/image_comparator'; import simpleloadPng from './simpleload.png'; +// Replace with mock when converting to jest tests +// eslint-disable-next-line @kbn/eslint/no-restricted-paths +import { seedColors } from '../../../../../../plugins/charts/public/services/colors/seed_colors'; + +const colors = { + seedColors, +}; + describe('tag cloud tests', function() { const minValue = 1; const maxValue = 9; @@ -124,7 +132,7 @@ describe('tag cloud tests', function() { )}`, function() { beforeEach(async function() { setupDOM(); - tagCloud = new TagCloud(domNode); + tagCloud = new TagCloud(domNode, colors); tagCloud.setData(test.data); tagCloud.setOptions(test.options); await fromNode(cb => tagCloud.once('renderComplete', cb)); @@ -156,7 +164,7 @@ describe('tag cloud tests', function() { //TagCloud takes at least 600ms to complete (due to d3 animation) //renderComplete should only notify at the last one - tagCloud = new TagCloud(domNode); + tagCloud = new TagCloud(domNode, colors); tagCloud.setData(baseTest.data); tagCloud.setOptions(baseTest.options); @@ -188,7 +196,7 @@ describe('tag cloud tests', function() { describe('should use the latest state before notifying (when modifying options multiple times)', function() { beforeEach(async function() { setupDOM(); - tagCloud = new TagCloud(domNode); + tagCloud = new TagCloud(domNode, colors); tagCloud.setData(baseTest.data); tagCloud.setOptions(baseTest.options); tagCloud.setOptions(logScaleTest.options); @@ -215,7 +223,7 @@ describe('tag cloud tests', function() { describe('should use the latest state before notifying (when modifying data multiple times)', function() { beforeEach(async function() { setupDOM(); - tagCloud = new TagCloud(domNode); + tagCloud = new TagCloud(domNode, colors); tagCloud.setData(baseTest.data); tagCloud.setOptions(baseTest.options); tagCloud.setData(trimDataTest.data); @@ -245,7 +253,7 @@ describe('tag cloud tests', function() { counter = 0; setupDOM(); return new Promise((resolve, reject) => { - tagCloud = new TagCloud(domNode); + tagCloud = new TagCloud(domNode, colors); tagCloud.setData(baseTest.data); tagCloud.setOptions(baseTest.options); @@ -291,7 +299,7 @@ describe('tag cloud tests', function() { describe('should show correct data when state-updates are interleaved with resize event', function() { beforeEach(async function() { setupDOM(); - tagCloud = new TagCloud(domNode); + tagCloud = new TagCloud(domNode, colors); tagCloud.setData(logScaleTest.data); tagCloud.setOptions(logScaleTest.options); @@ -329,7 +337,7 @@ describe('tag cloud tests', function() { setupDOM(); domNode.style.width = '1px'; domNode.style.height = '1px'; - tagCloud = new TagCloud(domNode); + tagCloud = new TagCloud(domNode, colors); tagCloud.setData(baseTest.data); tagCloud.setOptions(baseTest.options); await fromNode(cb => tagCloud.once('renderComplete', cb)); @@ -355,7 +363,7 @@ describe('tag cloud tests', function() { domNode.style.width = '1px'; domNode.style.height = '1px'; - tagCloud = new TagCloud(domNode); + tagCloud = new TagCloud(domNode, colors); tagCloud.setData(baseTest.data); tagCloud.setOptions(baseTest.options); await fromNode(cb => tagCloud.once('renderComplete', cb)); @@ -380,7 +388,7 @@ describe('tag cloud tests', function() { describe(`tags should no longer fit after making container smaller`, function() { beforeEach(async function() { setupDOM(); - tagCloud = new TagCloud(domNode); + tagCloud = new TagCloud(domNode, colors); tagCloud.setData(baseTest.data); tagCloud.setOptions(baseTest.options); await fromNode(cb => tagCloud.once('renderComplete', cb)); @@ -412,7 +420,7 @@ describe('tag cloud tests', function() { }); it('should render simple image', async function() { - tagCloud = new TagCloud(domNode); + tagCloud = new TagCloud(domNode, colors); tagCloud.setData(baseTest.data); tagCloud.setOptions(baseTest.options); diff --git a/src/legacy/core_plugins/vis_type_tagcloud/public/components/__tests__/tag_cloud_visualization.js b/src/legacy/core_plugins/vis_type_tagcloud/public/components/__tests__/tag_cloud_visualization.js index 0cd1fdf1d7103..75cad3bc167bf 100644 --- a/src/legacy/core_plugins/vis_type_tagcloud/public/components/__tests__/tag_cloud_visualization.js +++ b/src/legacy/core_plugins/vis_type_tagcloud/public/components/__tests__/tag_cloud_visualization.js @@ -22,11 +22,15 @@ import ngMock from 'ng_mock'; import LogstashIndexPatternStubProvider from 'fixtures/stubbed_logstash_index_pattern'; import { Vis } from 'ui/vis'; import { ImageComparator } from 'test_utils/image_comparator'; -import { TagCloudVisualization } from '../tag_cloud_visualization'; +import { createTagCloudVisualization } from '../tag_cloud_visualization'; import basicdrawPng from './basicdraw.png'; import afterresizePng from './afterresize.png'; import afterparamChange from './afterparamchange.png'; +// Replace with mock when converting to jest tests +// eslint-disable-next-line @kbn/eslint/no-restricted-paths +import { seedColors } from '../../../../../../plugins/charts/public/services/colors/seed_colors'; + const THRESHOLD = 0.65; const PIXEL_DIFF = 64; @@ -55,6 +59,11 @@ describe('TagCloudVisualizationTest', function() { { 'col-0': 'BR', 'col-1': 3 }, ], }; + const TagCloudVisualization = createTagCloudVisualization({ + colors: { + seedColors, + }, + }); beforeEach(ngMock.module('kibana')); beforeEach( diff --git a/src/legacy/core_plugins/vis_type_tagcloud/public/components/tag_cloud.js b/src/legacy/core_plugins/vis_type_tagcloud/public/components/tag_cloud.js index 5bd64ec000a6a..f5084fd92cfee 100644 --- a/src/legacy/core_plugins/vis_type_tagcloud/public/components/tag_cloud.js +++ b/src/legacy/core_plugins/vis_type_tagcloud/public/components/tag_cloud.js @@ -19,7 +19,6 @@ import d3 from 'd3'; import d3TagCloud from 'd3-cloud'; -import { seedColors } from 'ui/vis/components/color/seed_colors'; import { EventEmitter } from 'events'; const ORIENTATIONS = { @@ -38,7 +37,7 @@ const D3_SCALING_FUNCTIONS = { }; export class TagCloud extends EventEmitter { - constructor(domNode) { + constructor(domNode, colors) { super(); //DOM @@ -55,6 +54,7 @@ export class TagCloud extends EventEmitter { this._spiral = 'archimedean'; //layout shape this._timeInterval = 1000; //time allowed for layout algorithm this._padding = 5; + this._seedColors = colors.seedColors; //OPTIONS this._orientation = 'single'; @@ -208,7 +208,7 @@ export class TagCloud extends EventEmitter { enteringTags.style('font-style', this._fontStyle); enteringTags.style('font-weight', () => this._fontWeight); enteringTags.style('font-family', () => this._fontFamily); - enteringTags.style('fill', getFill); + enteringTags.style('fill', this.getFill.bind(this)); enteringTags.attr('text-anchor', () => 'middle'); enteringTags.attr('transform', affineTransform); enteringTags.attr('data-test-subj', getDisplayText); @@ -369,6 +369,11 @@ export class TagCloud extends EventEmitter { }; return debug; } + + getFill(tag) { + const colorScale = d3.scale.ordinal().range(this._seedColors); + return colorScale(tag.text); + } } TagCloud.STATUS = { COMPLETE: 0, INCOMPLETE: 1 }; @@ -402,11 +407,6 @@ function getSizeInPixels(tag) { return `${tag.size}px`; } -const colorScale = d3.scale.ordinal().range(seedColors); -function getFill(tag) { - return colorScale(tag.text); -} - function hashWithinRange(str, max) { str = JSON.stringify(str); let hash = 0; diff --git a/src/legacy/core_plugins/vis_type_tagcloud/public/components/tag_cloud_visualization.js b/src/legacy/core_plugins/vis_type_tagcloud/public/components/tag_cloud_visualization.js index 7d6e8252d86d9..f2163abbbc723 100644 --- a/src/legacy/core_plugins/vis_type_tagcloud/public/components/tag_cloud_visualization.js +++ b/src/legacy/core_plugins/vis_type_tagcloud/public/components/tag_cloud_visualization.js @@ -31,130 +31,132 @@ import { FeedbackMessage } from './feedback_message'; const MAX_TAG_COUNT = 200; -export class TagCloudVisualization { - constructor(node, vis) { - this._containerNode = node; - - const cloudRelativeContainer = document.createElement('div'); - cloudRelativeContainer.classList.add('tgcVis'); - cloudRelativeContainer.setAttribute('style', 'position: relative'); - const cloudContainer = document.createElement('div'); - cloudContainer.classList.add('tgcVis'); - cloudContainer.setAttribute('data-test-subj', 'tagCloudVisualization'); - this._containerNode.classList.add('visChart--vertical'); - cloudRelativeContainer.appendChild(cloudContainer); - this._containerNode.appendChild(cloudRelativeContainer); - - this._vis = vis; - this._truncated = false; - this._tagCloud = new TagCloud(cloudContainer); - this._tagCloud.on('select', event => { - if (!this._visParams.bucket) { - return; - } - this._vis.API.events.filter({ - table: event.meta.data, - column: 0, - row: event.meta.rowIndex, +export function createTagCloudVisualization({ colors }) { + return class TagCloudVisualization { + constructor(node, vis) { + this._containerNode = node; + + const cloudRelativeContainer = document.createElement('div'); + cloudRelativeContainer.classList.add('tgcVis'); + cloudRelativeContainer.setAttribute('style', 'position: relative'); + const cloudContainer = document.createElement('div'); + cloudContainer.classList.add('tgcVis'); + cloudContainer.setAttribute('data-test-subj', 'tagCloudVisualization'); + this._containerNode.classList.add('visChart--vertical'); + cloudRelativeContainer.appendChild(cloudContainer); + this._containerNode.appendChild(cloudRelativeContainer); + + this._vis = vis; + this._truncated = false; + this._tagCloud = new TagCloud(cloudContainer, colors); + this._tagCloud.on('select', event => { + if (!this._visParams.bucket) { + return; + } + this._vis.API.events.filter({ + table: event.meta.data, + column: 0, + row: event.meta.rowIndex, + }); }); - }); - this._renderComplete$ = Rx.fromEvent(this._tagCloud, 'renderComplete'); - - this._feedbackNode = document.createElement('div'); - this._containerNode.appendChild(this._feedbackNode); - this._feedbackMessage = React.createRef(); - render( - - - , - this._feedbackNode - ); - - this._labelNode = document.createElement('div'); - this._containerNode.appendChild(this._labelNode); - this._label = React.createRef(); - render(