[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
2019-07-31 15:10:55 +03:00 · 2019-07-31 15:10:55 +03:00 · 48921a8f3a
parent fc5b0fb90c
commit 48921a8f3a
13 changed files with 196 additions and 168 deletions
--- 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",
--- 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`] = `
 >
  <ValidatedDualRange
    allowEmptyRange={true}
+    compressed={false}
    disabled={true}
+    fullWidth={false}
    showInput={true}
  />
 </FormRow>
@ -24,6 +26,8 @@ exports[`renders RangeControl 1`] = `
 >
  <ValidatedDualRange
    allowEmptyRange={true}
+    compressed={false}
+    fullWidth={false}
    id="mock-range-control"
    max={100}
    min={0}
--- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/pie.js
+++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/pie.js
@ -50,19 +50,32 @@ export default function HistogramVisType(Private) {
    },
    editorConfig: {
      collections: {
-        legendPositions: [{
-          value: 'left',
-          text: 'left',
-        }, {
-          value: 'right',
-          text: 'right',
-        }, {
-          value: 'top',
-          text: 'top',
-        }, {
-          value: 'bottom',
-          text: 'bottom',
-        }],
+        legendPositions: [
+          {
+            text: i18n.translate('kbnVislibVisTypes.pie.editorConfig.legendPositions.leftText', {
+              defaultMessage: 'Left'
+            }),
+            value: 'left'
+          },
+          {
+            text: i18n.translate('kbnVislibVisTypes.pie.editorConfig.legendPositions.rightText', {
+              defaultMessage: 'Right'
+            }),
+            value: 'right'
+          },
+          {
+            text: i18n.translate('kbnVislibVisTypes.pie.editorConfig.legendPositions.topText', {
+              defaultMessage: 'Top'
+            }),
+            value: 'top'
+          },
+          {
+            text: i18n.translate('kbnVislibVisTypes.pie.editorConfig.legendPositions.bottomText', {
+              defaultMessage: 'Bottom'
+            }),
+            value: 'bottom'
+          },
+        ],
      },
      optionsTemplate: PieOptions,
      schemas: new Schemas([
--- a/src/legacy/core_plugins/tagcloud/public/_tag_cloud.scss
+++ b/src/legacy/core_plugins/tagcloud/public/_tag_cloud.scss
@ -12,15 +12,3 @@
  text-align: center;
  font-weight: $euiFontWeightBold;
 }
-
-.tgcFontSizeSlider {
-  margin: $euiSize;
-
-  .noUi-connect {
-    background: $euiColorLightShade;
-  }
-}
-
-.tgcFontSizeSlider__input {
-  width: $euiSizeXXL * 2;
-}
--- a/src/legacy/core_plugins/tagcloud/public/components/tag_cloud_options.tsx
+++ b/src/legacy/core_plugins/tagcloud/public/components/tag_cloud_options.tsx
@ -0,0 +1,85 @@
+/*
+ * 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 { EuiPanel } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+
+import { ValidatedDualRange } from 'ui/validated_range';
+import { VisOptionsProps } from 'ui/vis/editors/default';
+import { SelectOption } from '../../../kbn_vislib_vis_types/public/controls/select';
+import { SwitchOption } from '../../../kbn_vislib_vis_types/public/controls/switch';
+
+function TagCloudOptions({ stateParams, setValue, vis }: VisOptionsProps) {
+  const handleFontSizeChange = ([minFontSize, maxFontSize]: string[]) => {
+    setValue('minFontSize', minFontSize);
+    setValue('maxFontSize', maxFontSize);
+  };
+  const fontSizeRangeLabel = i18n.translate('tagCloud.visParams.fontSizeLabel', {
+    defaultMessage: 'Font size range in pixels',
+  });
+
+  return (
+    <EuiPanel paddingSize="s">
+      <SelectOption
+        label={i18n.translate('tagCloud.visParams.textScaleLabel', {
+          defaultMessage: 'Text scale',
+        })}
+        options={vis.type.editorConfig.collections.scales}
+        paramName="scale"
+        value={stateParams.scale}
+        setValue={setValue}
+      />
+
+      <SelectOption
+        label={i18n.translate('tagCloud.visParams.orientationsLabel', {
+          defaultMessage: 'Orientations',
+        })}
+        options={vis.type.editorConfig.collections.orientations}
+        paramName="orientation"
+        value={stateParams.orientation}
+        setValue={setValue}
+      />
+
+      <ValidatedDualRange
+        allowEmptyRange={false}
+        aria-label={fontSizeRangeLabel}
+        compressed={true}
+        fullWidth={true}
+        label={fontSizeRangeLabel}
+        max={100}
+        min={1}
+        value={[stateParams.minFontSize, stateParams.maxFontSize]}
+        onChange={handleFontSizeChange}
+        showInput
+      />
+
+      <SwitchOption
+        label={i18n.translate('tagCloud.visParams.showLabelToggleLabel', {
+          defaultMessage: 'Show label',
+        })}
+        paramName="showLabel"
+        value={stateParams.showLabel}
+        setValue={setValue}
+      />
+    </EuiPanel>
+  );
+}
+
+export { TagCloudOptions };
--- 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: '<tagcloud-vis-params></tagcloud-vis-params>',
+      optionsTemplate: TagCloudOptions,
      schemas: new Schemas([
        {
          group: 'metrics',
--- a/src/legacy/core_plugins/tagcloud/public/tag_cloud_vis_params.html
+++ b/src/legacy/core_plugins/tagcloud/public/tag_cloud_vis_params.html
@ -1,49 +0,0 @@
-<div class="visEditorSidebar__section">
-  <div class="form-group">
-    <div class="form-group">
-      <label i18n-id="tagCloud.visParams.textScaleLabel" i18n-default-message="Text Scale"></label>
-      <select class="form-control" ng-model="editorState.params.scale" ng-options="mode for mode in config.collections.scales"></select>
-    </div>
-    <div class="form-group">
-      <label i18n-id="tagCloud.visParams.orientationsLabel" i18n-default-message="Orientations"></label>
-      <select class="form-control" ng-model="editorState.params.orientation" ng-options="mode for mode in config.collections.orientations"></select>
-    </div>
-    <div class="form-group">
-      <label i18n-id="tagCloud.visParams.fontSizeLabel" i18n-default-message="Font Size"></label>
-      <div class="tgcFontSizeSlider"></div>
-      <div class="kuiBar">
-        <div class="kuiBarSection">
-          <input
-            type="number"
-            min="1"
-            max="{{editorState.params.maxFontSize}}"
-            class="kuiTextInput tgcFontSizeSlider__input"
-            ng-model="editorState.params.minFontSize"
-            aria-label="{{ ::'tagCloud.visParams.minFontSizeAriaLabel' | i18n: { defaultMessage: 'Minimum tag font size' } }}"
-            aria-describedby="tagCloudFontSliderMinUnit"
-          >
-          <span id="tagCloudFontSliderMinUnit" aria-label="{{ ::'tagCloud.visParams.minPixelsAriaLabel' | i18n: { defaultMessage: 'pixels' } }}">px</span>
-        </div>
-        <div class="kuiBarSection">
-          <input
-            type="number"
-            min="{{editorState.params.minFontSize}}"
-            max="100"
-            class="kuiTextInput tgcFontSizeSlider__input"
-            ng-model="editorState.params.maxFontSize"
-            aria-label="{{ ::'tagCloud.visParams.maxFontSizeAriaLabel' | i18n: { defaultMessage: 'Maximum tag font size' } }}"
-            aria-describedby="tagCloudFontSliderMaxUnit"
-          >
-          <span id="tagCloudFontSliderMaxUnit" aria-label="{{ ::'tagCloud.visParams.maxPixelsAriaLabel' | i18n: { defaultMessage: 'pixels' } }}">px</span>
-        </div>
-      </div>
-    </div>
-    <div>
-      <label>
-        <input type="checkbox" value="{{hideLabel}}" ng-model="editorState.params.showLabel" name="showLabel"
-               ng-checked="editorState.params.showLabel">
-        <span i18n-id="tagCloud.visParams.showLabelToggleLabel" i18n-default-message="Show Label"></span>
-      </label>
-    </div>
-  </div>
-</div>
--- a/src/legacy/core_plugins/tagcloud/public/tag_cloud_vis_params.js
+++ b/src/legacy/core_plugins/tagcloud/public/tag_cloud_vis_params.js
@ -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]);
-          }
-        });
-      }
-    };
-  });
--- a/src/legacy/ui/public/validated_range/index.d.ts
+++ 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<EuiRangeProps> extends React.Component<EuiRangeProps> {
+  allowEmptyRange?: boolean;
+}
--- 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 (
      <EuiFormRow
+        compressed={compressed}
+        fullWidth={fullWidth}
        isInvalid={!this.state.isValid}
        error={this.state.errorMessage ? [this.state.errorMessage] : []}
+        label={label}
      >
        <EuiDualRange
+          compressed={compressed}
+          fullWidth={fullWidth}
          value={this.state.value}
          onChange={this._onChange}
          {...rest}
@ -90,8 +98,13 @@ export class ValidatedDualRange extends Component {

 ValidatedDualRange.propTypes = {
  allowEmptyRange: PropTypes.bool,
+  fullWidth: PropTypes.bool,
+  compressed: PropTypes.bool,
+  label: PropTypes.node,
 };

 ValidatedDualRange.defaultProps = {
-  allowEmptyRange: true
+  allowEmptyRange: true,
+  fullWidth: false,
+  compressed: false,
 };
--- a/x-pack/plugins/translations/translations/ja-JP.json
+++ b/x-pack/plugins/translations/translations/ja-JP.json
@ -2764,14 +2764,7 @@
    "tagCloud.vis.schemas.segmentTitle": "タグ",
    "tagCloud.vis.tagCloudDescription": "重要度に基づき大きさを変えた単語のグループ表示です。",
    "tagCloud.vis.tagCloudTitle": "タグクラウド",
-    "tagCloud.visParams.fontSizeLabel": "フォントサイズ",
-    "tagCloud.visParams.maxFontSizeAriaLabel": "最大タグフォントサイズ",
-    "tagCloud.visParams.maxPixelsAriaLabel": "ピクセル",
-    "tagCloud.visParams.minFontSizeAriaLabel": "最小タグフォントサイズ",
-    "tagCloud.visParams.minPixelsAriaLabel": "ピクセル",
    "tagCloud.visParams.orientationsLabel": "方向",
-    "tagCloud.visParams.showLabelToggleLabel": "ラベルを表示",
-    "tagCloud.visParams.textScaleLabel": "テキストスケール",
    "tileMap.baseMapsVisualization.childShouldImplementMethodErrorMessage": "子は data-update に対応できるようこのメソドを導入する必要があります",
    "tileMap.function.help": "タイルマップのビジュアライゼーションです",
    "tileMap.geohashLayer.mapTitle": "{mapType} マップタイプが認識されません",
--- a/x-pack/plugins/translations/translations/zh-CN.json
+++ b/x-pack/plugins/translations/translations/zh-CN.json
@ -2764,14 +2764,7 @@
    "tagCloud.vis.schemas.segmentTitle": "标记",
    "tagCloud.vis.tagCloudDescription": "一组字词，可根据其重要性调整大小",
    "tagCloud.vis.tagCloudTitle": "标签云图",
-    "tagCloud.visParams.fontSizeLabel": "字体大小",
-    "tagCloud.visParams.maxFontSizeAriaLabel": "标记字体最大大小",
-    "tagCloud.visParams.maxPixelsAriaLabel": "像素",
-    "tagCloud.visParams.minFontSizeAriaLabel": "标记字体最小大小",
-    "tagCloud.visParams.minPixelsAriaLabel": "像素",
    "tagCloud.visParams.orientationsLabel": "方向",
-    "tagCloud.visParams.showLabelToggleLabel": "显示标签",
-    "tagCloud.visParams.textScaleLabel": "文本比例",
    "tileMap.baseMapsVisualization.childShouldImplementMethodErrorMessage": "子函数应实现此方法以响应数据更新",
    "tileMap.function.help": "磁贴地图可视化",
    "tileMap.geohashLayer.mapTitle": "{mapType} 地图类型无法识别",
--- a/yarn.lock
+++ b/yarn.lock
@ -19953,11 +19953,6 @@ no-case@^2.2.0, no-case@^2.3.2:
  dependencies:
    lower-case "^1.1.1"

-no-ui-slider@1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/no-ui-slider/-/no-ui-slider-1.2.0.tgz#1f64f5a8b82e6786f3261d82b0cc99b598817e69"
-  integrity sha1-H2T1qLguZ4bzJh2CsMyZtZiBfmk=
-
 nock@10.0.6:
  version "10.0.6"
  resolved "https://registry.yarnpkg.com/nock/-/nock-10.0.6.tgz#e6d90ee7a68b8cfc2ab7f6127e7d99aa7d13d111"