[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
This commit is contained in:
parent
fc5b0fb90c
commit
48921a8f3a
|
@ -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",
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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([
|
||||
|
|
|
@ -12,15 +12,3 @@
|
|||
text-align: center;
|
||||
font-weight: $euiFontWeightBold;
|
||||
}
|
||||
|
||||
.tgcFontSizeSlider {
|
||||
margin: $euiSize;
|
||||
|
||||
.noUi-connect {
|
||||
background: $euiColorLightShade;
|
||||
}
|
||||
}
|
||||
|
||||
.tgcFontSizeSlider__input {
|
||||
width: $euiSizeXXL * 2;
|
||||
}
|
||||
|
|
|
@ -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 };
|
|
@ -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'
|
||||
},
|
||||
optionsTemplate: '<tagcloud-vis-params></tagcloud-vis-params>',
|
||||
{
|
||||
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: TagCloudOptions,
|
||||
schemas: new Schemas([
|
||||
{
|
||||
group: 'metrics',
|
||||
|
|
|
@ -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>
|
|
@ -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]);
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
});
|
25
src/legacy/ui/public/validated_range/index.d.ts
vendored
Normal file
25
src/legacy/ui/public/validated_range/index.d.ts
vendored
Normal file
|
@ -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;
|
||||
}
|
|
@ -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,
|
||||
};
|
||||
|
|
|
@ -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} マップタイプが認識されません",
|
||||
|
|
|
@ -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} 地图类型无法识别",
|
||||
|
|
|
@ -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"
|
||||
|
|
Loading…
Reference in a new issue