Skip to content

Commit

Permalink
[Vis: Default editor] EUIficate tag cloud options tab (elastic#42070)
Browse files Browse the repository at this point in the history
* 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
  • Loading branch information
sulemanof committed Jul 31, 2019
1 parent 9f83008 commit 859a4eb
Show file tree
Hide file tree
Showing 13 changed files with 196 additions and 168 deletions.
1 change: 0 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -195,7 +195,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",
Expand Down

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

39 changes: 26 additions & 13 deletions src/legacy/core_plugins/kbn_vislib_vis_types/public/pie.js
Original file line number Diff line number Diff line change
Expand Up @@ -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([
Expand Down
12 changes: 0 additions & 12 deletions src/legacy/core_plugins/tagcloud/public/_tag_cloud.scss
Original file line number Diff line number Diff line change
Expand Up @@ -12,15 +12,3 @@
text-align: center;
font-weight: $euiFontWeightBold;
}

.tgcFontSizeSlider {
margin: $euiSize;

.noUi-connect {
background: $euiColorLightShade;
}
}

.tgcFontSizeSlider__input {
width: $euiSizeXXL * 2;
}
Original file line number Diff line number Diff line change
@@ -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 };
46 changes: 42 additions & 4 deletions src/legacy/core_plugins/tagcloud/public/tag_cloud_vis.js
Original file line number Diff line number Diff line change
Expand Up @@ -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) {

Expand All @@ -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',
Expand Down
49 changes: 0 additions & 49 deletions src/legacy/core_plugins/tagcloud/public/tag_cloud_vis_params.html

This file was deleted.

69 changes: 0 additions & 69 deletions src/legacy/core_plugins/tagcloud/public/tag_cloud_vis_params.js

This file was deleted.

25 changes: 25 additions & 0 deletions src/legacy/ui/public/validated_range/index.d.ts
Original file line number Diff line number Diff line change
@@ -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;
}
Loading

0 comments on commit 859a4eb

Please sign in to comment.