Translate metric_vis (#23187)

* Translate metric_vis

* Close span tag

* Remove space code

* Update ids

* Translations for color mode list
This commit is contained in:
Maryia Lapata 2018-09-27 11:53:16 +03:00 committed by GitHub
parent 7c23374f2c
commit ecbcbb612a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 104 additions and 34 deletions

View file

@ -4,6 +4,7 @@
"inputControl":"src/core_plugins/input_control_vis",
"kbn": "src/core_plugins/kibana",
"markdownVis": "src/core_plugins/markdown_vis",
"metricVis": "src/core_plugins/metric_vis",
"statusPage": "src/core_plugins/status_page",
"xpack.idxMgmt": "x-pack/plugins/index_management"
},

View file

@ -32,16 +32,16 @@ import { MetricVisComponent } from './metric_vis_controller';
// register the provider with the visTypes registry
VisTypesRegistryProvider.register(MetricVisProvider);
function MetricVisProvider(Private) {
function MetricVisProvider(Private, i18n) {
const VisFactory = Private(VisFactoryProvider);
// return the visType object, which kibana will use to display and configure new
// Vis object of this type.
return VisFactory.createReactVisualization({
name: 'metric',
title: 'Metric',
title: i18n('metricVis.metricTitle', { defaultMessage: 'Metric' }),
icon: 'visMetric',
description: 'Display a calculation as a single number',
description: i18n('metricVis.metricDescription', { defaultMessage: 'Display a calculation as a single number' }),
category: CATEGORY.DATA,
visConfig: {
component: MetricVisComponent,
@ -73,7 +73,20 @@ function MetricVisProvider(Private) {
},
editorConfig: {
collections: {
metricColorMode: ['None', 'Labels', 'Background'],
metricColorMode: [
{
id: 'None',
label: i18n('metricVis.colorModes.noneOptionLabel', { defaultMessage: 'None' })
},
{
id: 'Labels',
label: i18n('metricVis.colorModes.labelsOptionLabel', { defaultMessage: 'Labels' })
},
{
id: 'Background',
label: i18n('metricVis.colorModes.backgroundOptionLabel', { defaultMessage: 'Background' })
}
],
colorSchemas: Object.keys(vislibColorMaps),
},
optionsTemplate: '<metric-vis-params></metric-vis-params>',
@ -81,7 +94,7 @@ function MetricVisProvider(Private) {
{
group: 'metrics',
name: 'metric',
title: 'Metric',
title: i18n('metricVis.schemas.metricTitle', { defaultMessage: 'Metric' }),
min: 1,
aggFilter: [
'!std_dev', '!geo_centroid',
@ -92,7 +105,7 @@ function MetricVisProvider(Private) {
}, {
group: 'buckets',
name: 'group',
title: 'Split Group',
title: i18n('metricVis.schemas.splitGroupTitle', { defaultMessage: 'Split Group' }),
min: 0,
max: 1,
aggFilter: ['!geohash_grid', '!filter']

View file

@ -1,8 +1,12 @@
<div class="kuiSideBarSection">
<div class="kuiSideBarFormRow">
<label class="kuiSideBarFormRow__label" for="percentageMode">
Percentage Mode
<label
class="kuiSideBarFormRow__label"
for="percentageMode"
i18n-id="metricVis.params.percentageModeLabel"
i18n-default-message="Percentage Mode"
>
</label>
<div class="kuiSideBarFormRow__control">
<input class="kuiCheckBox" id="percentageMode" type="checkbox" ng-model="editorState.params.metric.percentageMode">
@ -10,8 +14,12 @@
</div>
<div class="kuiSideBarFormRow">
<label class="kuiSideBarFormRow__label" for="showLabels">
Show Labels
<label
class="kuiSideBarFormRow__label"
for="showLabels"
i18n-id="metricVis.params.showLabelsLabel"
i18n-default-message="Show Labels"
>
</label>
<div class="kuiSideBarFormRow__control">
<input class="kuiCheckBox" id="showLabels" type="checkbox" ng-model="editorState.params.metric.labels.show">
@ -24,7 +32,7 @@
kbn-accessible-click
aria-expanded="{{!!showColorRange}}"
aria-controls="metricOptionsRanges"
aria-label="Toggle range options"
aria-label="{{'metricVis.params.ranges.toggleOptionsAriaLabel' | i18n: { defaultMessage: 'Toggle range options' } }}"
class="kuiSideBarCollapsibleTitle__label"
ng-click="showColorRange = !showColorRange"
>
@ -33,8 +41,11 @@
ng-class="{ 'fa-caret-down': showColorRange, 'fa-caret-right': !showColorRange }"
class="fa fa-caret-right kuiSideBarCollapsibleTitle__caret"
></span>
<span class="kuiSideBarCollapsibleTitle__text">
Ranges
<span
class="kuiSideBarCollapsibleTitle__text"
i18n-id="metricVis.params.rangesTitle"
i18n-default-message="Ranges"
>
</span>
</div>
</div>
@ -44,10 +55,20 @@
<table class="visEditorAgg__rangesTable form-group" ng-show="editorState.params.metric.colorsRange.length">
<tr>
<th scope="col">
<label id="metricOptionsCustomRangeFrom">From</label>
<label
id="metricOptionsCustomRangeFrom"
i18n-id="metricVis.params.ranges.fromLabel"
i18n-default-message="From"
>
</label>
</th>
<th scope="col" colspan="2">
<label id="metricOptionsCustomRangeTo">To</label>
<label
id="metricOptionsCustomRangeTo"
i18n-id="metricVis.params.ranges.toLabel"
i18n-default-message="To"
>
</label>
</th>
</tr>
@ -89,14 +110,21 @@
<div class="hintbox" ng-show="!editorState.params.metric.colorsRange.length">
<p>
<i class="fa fa-danger text-danger"></i>
<strong>Required:</strong> You must specify at least one range.
<span
i18n-id="metricVis.params.ranges.warning.specifyRangeDescription"
i18n-default-message="{strongRequiredDescripion} You must specify at least one range."
i18n-values="{ strongRequiredDescripion: '<strong>' + editorState.requiredDescription + '</strong>' }"
>
</span>
</p>
</div>
<div
ng-click="addRange()"
class="kuiButton kuiButton--primary kuiButton--fullWidth">
Add Range
class="kuiButton kuiButton--primary kuiButton--fullWidth"
i18n-id="metricVis.params.ranges.addRangeButtonLabel"
i18n-default-message="Add Range"
>
</div>
</div>
</div>
@ -107,7 +135,7 @@
kbn-accessible-click
aria-expanded="{{!!showColorOptions}}"
aria-controls="metricOptionsColors"
aria-label="Toggle color options"
aria-label="{{'metricVis.params.color.toggleOptionsAriaLabel' | i18n: { defaultMessage: 'Toggle color options' } }}"
class="kuiSideBarCollapsibleTitle__label"
ng-click="showColorOptions = !showColorOptions"
>
@ -119,29 +147,40 @@
}"
class="fa fa-caret-right kuiSideBarCollapsibleTitle__caret"
></span>
<span class="kuiSideBarCollapsibleTitle__text">
Color Options
<span
class="kuiSideBarCollapsibleTitle__text"
i18n-id="metricVis.params.color.colorOptionsTitle"
i18n-default-message="Color Options"
>
</span>
</div>
</div>
<div id="metricOptionsColors" ng-if="showColorOptions" class="kuiSideBarCollapsibleSection">
<div class="kuiSideBarSection">
<div class="kuiSideBarFormRow" ng-show="editorState.params.metric.colorsRange.length > 1">
<label class="kuiSideBarFormRow__label" for="metricColorMode">
Use Color For
<label
class="kuiSideBarFormRow__label"
for="metricColorMode"
i18n-id="metricVis.params.color.useForLabel"
i18n-default-message="Use Color For"
>
</label>
<div class="kuiSideBarFormRow__control">
<select
id="metricColorMode"
class="kuiSelect kuiSideBarSelect"
ng-model="editorState.params.metric.metricColorMode"
ng-options="mode for mode in collections.metricColorMode"
ng-options="mode.id as mode.label for mode in collections.metricColorMode"
></select>
</div>
</div>
<div class="kuiSideBarFormRow" ng-show="editorState.params.metric.metricColorMode !== 'None'">
<label class="kuiSideBarFormRow__label" for="colorSchema">
Color Schema
<label
class="kuiSideBarFormRow__label"
for="colorSchema"
i18n-id="metricVis.params.color.schemaLabel"
i18n-default-message="Color Schema"
>
</label>
<div class="kuiSideBarFormRow__control">
<select
@ -151,12 +190,20 @@
ng-options="mode for mode in collections.colorSchemas"
></select>
</div>
<div class="text-info text-center" ng-show="customColors" ng-click="resetColors()">reset colors</div>
<div class="text-info text-center" ng-show="customColors" ng-click="resetColors()"
i18n-id="metricVis.params.color.resetColorDescription"
i18n-default-message="reset colors"
>
</div>
</div>
<div class="kuiSideBarFormRow" ng-show="editorState.params.metric.metricColorMode !== 'None'">
<label class="kuiSideBarFormRow__label" for="invertColors">
Reverse Color Schema
<label
class="kuiSideBarFormRow__label"
for="invertColors"
i18n-id="metricVis.params.color.reverseSchemaLabel"
i18n-default-message="Reverse Color Schema"
>
</label>
<div class="kuiSideBarFormRow__control">
<input class="kuiCheckBox" id="invertColors" type="checkbox" ng-model="editorState.params.metric.invertColors">
@ -172,7 +219,7 @@
kbn-accessible-click
aria-expanded="{{!!showStyle}}"
aria-controls="metricOptionsStyle"
aria-label="Toggle style options"
aria-label="{{'metricVis.params.style.toggleOptionsAriaLabel' | i18n: { defaultMessage: 'Toggle style options' } }}"
class="kuiSideBarCollapsibleTitle__label"
ng-click="showStyle = !showStyle"
>
@ -184,8 +231,11 @@
}"
class="fa fa-caret-right kuiSideBarCollapsibleTitle__caret"
></span>
<span class="kuiSideBarCollapsibleTitle__text">
Style
<span
class="kuiSideBarCollapsibleTitle__text"
i18n-id="metricVis.params.style.styleTitle"
i18n-default-message="Style"
>
</span>
</div>
</div>
@ -195,7 +245,12 @@
<div class="kuiSideBarFormRow">
<label class="kuiSideBarFormRow__label" for="metricFontSize">
Font Size (<span ng-bind="editorState.params.metric.style.fontSize"></span>pt)
<span
i18n-id="metricVis.params.style.fontSizeLabel"
i18n-default-message="Font Size ({fontSize}pt)"
i18n-values="{ fontSize: editorState.params.metric.style.fontSize }"
>
</span>
</label>
<div class="kuiSideBarFormRow__control">
<input id="metricFontSize" type="range" ng-model="editorState.params.metric.style.fontSize" class="form-control" min="12" max="120" />

View file

@ -22,7 +22,7 @@ import metricVisParamsTemplate from './metric_vis_params.html';
import _ from 'lodash';
const module = uiModules.get('kibana');
module.directive('metricVisParams', function () {
module.directive('metricVisParams', function (i18n) {
return {
restrict: 'E',
template: metricVisParamsTemplate,
@ -80,6 +80,7 @@ module.directive('metricVisParams', function () {
$scope.customColors = true;
});
$scope.editorState.requiredDescription = i18n('metricVis.params.ranges.warning.requiredDescription', { defaultMessage: 'Required:' });
}
};
});