mirror of
https://github.com/elastic/kibana.git
synced 2025-04-23 09:19:04 -04:00
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:
parent
7c23374f2c
commit
ecbcbb612a
4 changed files with 104 additions and 34 deletions
|
@ -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"
|
||||
},
|
||||
|
|
|
@ -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']
|
||||
|
|
|
@ -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" />
|
||||
|
|
|
@ -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:' });
|
||||
}
|
||||
};
|
||||
});
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue