From 48921a8f3aa7be3dd106d4bd479d36f95f353a19 Mon Sep 17 00:00:00 2001 From: Daniil Suleiman <31325372+sulemanof@users.noreply.github.com> Date: Wed, 31 Jul 2019 15:10:55 +0300 Subject: [PATCH] [Vis: Default editor] EUIficate tag cloud options tab (#42070) * EUIficate pie chart options tab * Fix tests * Size titles down to xs * Use FormattedMessage * EUIficate tag_cloud_vis options tab * Get rid of ticks in the range * Update snapshots * Fix comments * Change label * Create a components folder --- package.json | 1 - .../__snapshots__/range_control.test.js.snap | 4 + .../kbn_vislib_vis_types/public/pie.js | 39 ++++++--- .../tagcloud/public/_tag_cloud.scss | 12 --- .../public/components/tag_cloud_options.tsx | 85 +++++++++++++++++++ .../tagcloud/public/tag_cloud_vis.js | 46 +++++++++- .../tagcloud/public/tag_cloud_vis_params.html | 49 ----------- .../tagcloud/public/tag_cloud_vis_params.js | 69 --------------- .../ui/public/validated_range/index.d.ts | 25 ++++++ .../validated_range/validated_dual_range.js | 15 +++- .../translations/translations/ja-JP.json | 7 -- .../translations/translations/zh-CN.json | 7 -- yarn.lock | 5 -- 13 files changed, 196 insertions(+), 168 deletions(-) create mode 100644 src/legacy/core_plugins/tagcloud/public/components/tag_cloud_options.tsx delete mode 100644 src/legacy/core_plugins/tagcloud/public/tag_cloud_vis_params.html delete mode 100644 src/legacy/core_plugins/tagcloud/public/tag_cloud_vis_params.js create mode 100644 src/legacy/ui/public/validated_range/index.d.ts 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 @@ -
-
-
- - -
-
- - -
-
- -
-
-
- - px -
-
- - px -
-
-
-
- -
-
-
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 (