diff --git a/package.json b/package.json
index 8c638f19b985..291186faa919 100644
--- a/package.json
+++ b/package.json
@@ -196,7 +196,6 @@
"moment-timezone": "^0.5.14",
"mustache": "2.3.2",
"ngreact": "0.5.1",
- "no-ui-slider": "1.2.0",
"node-fetch": "1.7.3",
"opn": "^5.4.0",
"oppsy": "^2.0.0",
diff --git a/src/legacy/core_plugins/input_control_vis/public/components/vis/__snapshots__/range_control.test.js.snap b/src/legacy/core_plugins/input_control_vis/public/components/vis/__snapshots__/range_control.test.js.snap
index efd58cdaff54..2e6c1058e160 100644
--- a/src/legacy/core_plugins/input_control_vis/public/components/vis/__snapshots__/range_control.test.js.snap
+++ b/src/legacy/core_plugins/input_control_vis/public/components/vis/__snapshots__/range_control.test.js.snap
@@ -9,7 +9,9 @@ exports[`disabled 1`] = `
>
@@ -24,6 +26,8 @@ exports[`renders RangeControl 1`] = `
>
{
+ setValue('minFontSize', minFontSize);
+ setValue('maxFontSize', maxFontSize);
+ };
+ const fontSizeRangeLabel = i18n.translate('tagCloud.visParams.fontSizeLabel', {
+ defaultMessage: 'Font size range in pixels',
+ });
+
+ return (
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export { TagCloudOptions };
diff --git a/src/legacy/core_plugins/tagcloud/public/tag_cloud_vis.js b/src/legacy/core_plugins/tagcloud/public/tag_cloud_vis.js
index 4aeddfb29cdc..ddb3a722333e 100644
--- a/src/legacy/core_plugins/tagcloud/public/tag_cloud_vis.js
+++ b/src/legacy/core_plugins/tagcloud/public/tag_cloud_vis.js
@@ -17,13 +17,13 @@
* under the License.
*/
-import './tag_cloud_vis_params';
import { i18n } from '@kbn/i18n';
import { VisFactoryProvider } from 'ui/vis/vis_factory';
import { Schemas } from 'ui/vis/editors/default/schemas';
import { TagCloudVisualization } from './tag_cloud_visualization';
import { VisTypesRegistryProvider } from 'ui/registry/vis_types';
import { Status } from 'ui/vis/update_status';
+import { TagCloudOptions } from './components/tag_cloud_options';
VisTypesRegistryProvider.register(function (Private) {
@@ -49,10 +49,48 @@ VisTypesRegistryProvider.register(function (Private) {
visualization: TagCloudVisualization,
editorConfig: {
collections: {
- scales: ['linear', 'log', 'square root'],
- orientations: ['single', 'right angled', 'multiple'],
+ scales: [
+ {
+ text: i18n.translate('tagCloud.vis.editorConfig.scales.linearText', {
+ defaultMessage: 'Linear'
+ }),
+ value: 'linear'
+ },
+ {
+ text: i18n.translate('tagCloud.vis.editorConfig.scales.logText', {
+ defaultMessage: 'Log'
+ }),
+ value: 'log'
+ },
+ {
+ text: i18n.translate('tagCloud.vis.editorConfig.scales.squareRootText', {
+ defaultMessage: 'Square root'
+ }),
+ value: 'square root'
+ },
+ ],
+ orientations: [
+ {
+ text: i18n.translate('tagCloud.vis.editorConfig.orientations.singleText', {
+ defaultMessage: 'Single'
+ }),
+ value: 'single'
+ },
+ {
+ text: i18n.translate('tagCloud.vis.editorConfig.orientations.rightAngledText', {
+ defaultMessage: 'Right angled'
+ }),
+ value: 'right angled'
+ },
+ {
+ text: i18n.translate('tagCloud.vis.editorConfig.orientations.multipleText', {
+ defaultMessage: 'Multiple'
+ }),
+ value: 'multiple'
+ },
+ ],
},
- optionsTemplate: '',
+ optionsTemplate: TagCloudOptions,
schemas: new Schemas([
{
group: 'metrics',
diff --git a/src/legacy/core_plugins/tagcloud/public/tag_cloud_vis_params.html b/src/legacy/core_plugins/tagcloud/public/tag_cloud_vis_params.html
deleted file mode 100644
index 529423e8359e..000000000000
--- a/src/legacy/core_plugins/tagcloud/public/tag_cloud_vis_params.html
+++ /dev/null
@@ -1,49 +0,0 @@
-
diff --git a/src/legacy/core_plugins/tagcloud/public/tag_cloud_vis_params.js b/src/legacy/core_plugins/tagcloud/public/tag_cloud_vis_params.js
deleted file mode 100644
index 9f0fd8088c05..000000000000
--- a/src/legacy/core_plugins/tagcloud/public/tag_cloud_vis_params.js
+++ /dev/null
@@ -1,69 +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 { uiModules } from 'ui/modules';
-import tagCloudVisParamsTemplate from './tag_cloud_vis_params.html';
-import noUiSlider from 'no-ui-slider';
-import 'no-ui-slider/css/nouislider.css';
-import 'no-ui-slider/css/nouislider.pips.css';
-import 'no-ui-slider/css/nouislider.tooltips.css';
-
-uiModules.get('kibana/table_vis')
- .directive('tagcloudVisParams', function () {
- return {
- restrict: 'E',
- template: tagCloudVisParamsTemplate,
- link: function ($scope, $element) {
- const sliderContainer = $element[0];
- const slider = sliderContainer.querySelector('.tgcFontSizeSlider');
- $scope.config = $scope.vis.type.editorConfig;
- noUiSlider.create(slider, {
- start: [$scope.editorState.params.minFontSize, $scope.editorState.params.maxFontSize],
- connect: true,
- step: 1,
- range: { 'min': 1, 'max': 100 },
- format: { to: (value) => parseInt(value), from: value => parseInt(value) }
- });
- slider.noUiSlider.on('slide', function () {
- const fontSize = slider.noUiSlider.get();
- $scope.$apply(() => {
- $scope.editorState.params.minFontSize = fontSize[0];
- $scope.editorState.params.maxFontSize = fontSize[1];
- });
- });
-
- /**
- * Whenever the params change (e.g. by hitting reset in the editor)
- * set the uislider value to the new value.
- */
- $scope.$watch('editorState.params.minFontSize', (val) => {
- val = parseInt(val);
- if (slider.noUiSlider.get()[0] !== val) {
- slider.noUiSlider.set([val, null]);
- }
- });
- $scope.$watch('editorState.params.maxFontSize', (val) => {
- val = parseInt(val);
- if (slider.noUiSlider.get()[1] !== val) {
- slider.noUiSlider.set([null, val]);
- }
- });
- }
- };
- });
diff --git a/src/legacy/ui/public/validated_range/index.d.ts b/src/legacy/ui/public/validated_range/index.d.ts
new file mode 100644
index 000000000000..50cacbc517be
--- /dev/null
+++ b/src/legacy/ui/public/validated_range/index.d.ts
@@ -0,0 +1,25 @@
+/*
+ * 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 React from 'react';
+import { EuiRangeProps } from '@elastic/eui';
+
+export class ValidatedDualRange extends React.Component {
+ allowEmptyRange?: boolean;
+}
diff --git a/src/legacy/ui/public/validated_range/validated_dual_range.js b/src/legacy/ui/public/validated_range/validated_dual_range.js
index 7adbb578a237..088d36dbb18f 100644
--- a/src/legacy/ui/public/validated_range/validated_dual_range.js
+++ b/src/legacy/ui/public/validated_range/validated_dual_range.js
@@ -66,6 +66,9 @@ export class ValidatedDualRange extends Component {
render() {
const {
+ compressed,
+ fullWidth,
+ label,
value, // eslint-disable-line no-unused-vars
onChange, // eslint-disable-line no-unused-vars
allowEmptyRange, // eslint-disable-line no-unused-vars
@@ -75,10 +78,15 @@ export class ValidatedDualRange extends Component {
return (