* Translations for Tag Cloud (#24065) * Translate pie and vaslib_basic_options (#23761) (#24124) Translate pie and vislib_basic_options * [I18n] Add one-time binding to angularjs i18n (#23499) (#23965) * Add one-time binding to angularjs i18n * Add watcher for values property * Watch values field only if it is provided * Fix ci * Translations for Tag Cloud (#24065)
This commit is contained in:
parent
a9f7cfc148
commit
4410598f81
|
@ -7,6 +7,7 @@
|
|||
"markdownVis": "src/core_plugins/markdown_vis",
|
||||
"metricVis": "src/core_plugins/metric_vis",
|
||||
"statusPage": "src/core_plugins/status_page",
|
||||
"tagCloud": "src/core_plugins/tagcloud",
|
||||
"xpack.idxMgmt": "x-pack/plugins/index_management"
|
||||
},
|
||||
"exclude": [
|
||||
|
|
|
@ -18,6 +18,7 @@
|
|||
*/
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import { FormattedMessage } from '@kbn/i18n/react';
|
||||
|
||||
export class FeedbackMessage extends Component {
|
||||
|
||||
|
@ -30,10 +31,16 @@ export class FeedbackMessage extends Component {
|
|||
return (
|
||||
<div className="tagcloud-notifications" >
|
||||
<div className="tagcloud-truncated-message" style={{ display: this.state.shouldShowTruncate ? 'block' : 'none' }}>
|
||||
The number of tags has been truncated to avoid long draw times.
|
||||
<FormattedMessage
|
||||
id="tagCloud.feedbackMessage.truncatedTagsDescription"
|
||||
defaultMessage="The number of tags has been truncated to avoid long draw times."
|
||||
/>
|
||||
</div>
|
||||
<div className="tagcloud-incomplete-message" style={{ display: this.state.shouldShowIncomplete ? 'block' : 'none' }}>
|
||||
The container is too small to display the entire cloud. Tags might be cropped or omitted.
|
||||
<FormattedMessage
|
||||
id="tagCloud.feedbackMessage.tooSmallContainerDescription"
|
||||
defaultMessage="The container is too small to display the entire cloud. Tags might be cropped or omitted."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
@ -26,15 +26,17 @@ import { TagCloudVisualization } from './tag_cloud_visualization';
|
|||
import { VisTypesRegistryProvider } from 'ui/registry/vis_types';
|
||||
import { Status } from 'ui/vis/update_status';
|
||||
|
||||
VisTypesRegistryProvider.register(function (Private) {
|
||||
VisTypesRegistryProvider.register(function (Private, i18n) {
|
||||
|
||||
const VisFactory = Private(VisFactoryProvider);
|
||||
|
||||
return VisFactory.createBaseVisualization({
|
||||
name: 'tagcloud',
|
||||
title: 'Tag Cloud',
|
||||
title: i18n('tagCloud.vis.tagCloudTitle', { defaultMessage: 'Tag Cloud' }),
|
||||
icon: 'visTagCloud',
|
||||
description: 'A group of words, sized according to their importance',
|
||||
description: i18n('tagCloud.vis.tagCloudDescription', {
|
||||
defaultMessage: 'A group of words, sized according to their importance'
|
||||
}),
|
||||
category: CATEGORY.OTHER,
|
||||
visConfig: {
|
||||
defaults: {
|
||||
|
@ -57,7 +59,7 @@ VisTypesRegistryProvider.register(function (Private) {
|
|||
{
|
||||
group: 'metrics',
|
||||
name: 'metric',
|
||||
title: 'Tag Size',
|
||||
title: i18n('tagCloud.vis.schemas.metricTitle', { defaultMessage: 'Tag Size' }),
|
||||
min: 1,
|
||||
max: 1,
|
||||
aggFilter: ['!std_dev', '!percentiles', '!percentile_ranks', '!derivative', '!geo_bounds', '!geo_centroid'],
|
||||
|
@ -69,7 +71,7 @@ VisTypesRegistryProvider.register(function (Private) {
|
|||
group: 'buckets',
|
||||
name: 'segment',
|
||||
icon: 'fa fa-cloud',
|
||||
title: 'Tags',
|
||||
title: i18n('tagCloud.vis.schemas.segmentTitle', { defaultMessage: 'Tags' }),
|
||||
min: 1,
|
||||
max: 1,
|
||||
aggFilter: ['terms', 'significant_terms']
|
||||
|
|
|
@ -1,15 +1,15 @@
|
|||
<div class="kuiSideBarSection">
|
||||
<div class="form-group">
|
||||
<div class="form-group">
|
||||
<label>Text Scale</label>
|
||||
<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>Orientations</label>
|
||||
<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>Font Size</label>
|
||||
<label i18n-id="tagCloud.visParams.fontSizeLabel" i18n-default-message="Font Size"></label>
|
||||
<div class="tag-cloud-fontsize-slider"></div>
|
||||
<div class="kuiBar">
|
||||
<div class="kuiBarSection">
|
||||
|
@ -19,10 +19,10 @@
|
|||
max="{{editorState.params.maxFontSize}}"
|
||||
class="kuiTextInput tag-cloud-fontsize-slider__input"
|
||||
ng-model="editorState.params.minFontSize"
|
||||
aria-label="Minimum tag font size"
|
||||
aria-label="{{ ::'tagCloud.visParams.minFontSizeAriaLabel' | i18n: { defaultMessage: 'Minimum tag font size' } }}"
|
||||
aria-describedby="tagCloudFontSliderMinUnit"
|
||||
>
|
||||
<span id="tagCloudFontSliderMinUnit" aria-label="pixels">px</span>
|
||||
<span id="tagCloudFontSliderMinUnit" aria-label="{{ ::'tagCloud.visParams.minPixelsAriaLabel' | i18n: { defaultMessage: 'pixels' } }}">px</span>
|
||||
</div>
|
||||
<div class="kuiBarSection">
|
||||
<input
|
||||
|
@ -31,10 +31,10 @@
|
|||
max="100"
|
||||
class="kuiTextInput tag-cloud-fontsize-slider__input"
|
||||
ng-model="editorState.params.maxFontSize"
|
||||
aria-label="Maximum tag font size"
|
||||
aria-label="{{ ::'tagCloud.visParams.maxFontSizeAriaLabel' | i18n: { defaultMessage: 'Maximum tag font size' } }}"
|
||||
aria-describedby="tagCloudFontSliderMaxUnit"
|
||||
>
|
||||
<span id="tagCloudFontSliderMaxUnit" aria-label="pixels">px</span>
|
||||
<span id="tagCloudFontSliderMaxUnit" aria-label="{{ ::'tagCloud.visParams.maxPixelsAriaLabel' | i18n: { defaultMessage: 'pixels' } }}">px</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -42,7 +42,7 @@
|
|||
<label>
|
||||
<input type="checkbox" value="{{hideLabel}}" ng-model="editorState.params.showLabel" name="showLabel"
|
||||
ng-checked="editorState.params.showLabel">
|
||||
Show Label
|
||||
<span i18n-id="tagCloud.visParams.showLabelToggleLabel" i18n-default-message="Show Label"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -23,7 +23,7 @@ import { take } from 'rxjs/operators';
|
|||
import { render, unmountComponentAtNode } from 'react-dom';
|
||||
import React from 'react';
|
||||
|
||||
|
||||
import { I18nProvider } from '@kbn/i18n/react';
|
||||
import { Label } from './label';
|
||||
import { FeedbackMessage } from './feedback_message';
|
||||
|
||||
|
@ -57,7 +57,7 @@ export class TagCloudVisualization {
|
|||
this._feedbackNode = document.createElement('div');
|
||||
this._containerNode.appendChild(this._feedbackNode);
|
||||
this._feedbackMessage = React.createRef();
|
||||
render(<FeedbackMessage ref={this._feedbackMessage} />, this._feedbackNode);
|
||||
render(<I18nProvider><FeedbackMessage ref={this._feedbackMessage} /></I18nProvider>, this._feedbackNode);
|
||||
|
||||
this._labelNode = document.createElement('div');
|
||||
this._containerNode.appendChild(this._labelNode);
|
||||
|
|
Loading…
Reference in a new issue