Skip to content

Commit

Permalink
Translate Gauge and Goal (elastic#23882)
Browse files Browse the repository at this point in the history 
* Translate Gauge and Goal

* fix some names, rewrite some code and add 'kbnVislibVisTypes' to '.i18nrc.json'

* add 'Required' translation

* fix 'requiredText' bug

* use \' instead of "

* update heatmap component

* Update gauge.js

* Update gauge.js

* Update gauge.js
  • Loading branch information
@tibmt @maryia-lapata
tibmt authored and maryia-lapata committed Oct 19, 2018
1 parent 4b9e13c commit cc75547
Show file tree
Hide file tree
Showing 4 changed files with 156 additions and 74 deletions.
199 changes: 137 additions & 62 deletions src/core_plugins/kbn_vislib_vis_types/public/controls/gauge_options.html
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,11 @@
<div class="kuiSideBarSection">
<div class="kuiSideBarFormRow">
<label class="kuiSideBarFormRow__label" for="gaugeType">
Gauge Type
</label>
<label
class="kuiSideBarFormRow__label"
for="gaugeType"
i18n-id="kbnVislibVisTypes.controls.gaugeOptions.gaugeTypeLabel"
i18n-default-message="Gauge Type"
></label>
<div class="kuiSideBarFormRow__control">
<select
id="gaugeType"
Expand All @@ -14,18 +17,24 @@
</div>

<div class="kuiSideBarFormRow">
<label class="kuiSideBarFormRow__label" for="percentageMode">
Percentage Mode
</label>
<label
class="kuiSideBarFormRow__label"
for="percentageMode"
i18n-id="kbnVislibVisTypes.controls.gaugeOptions.percentageModeLabel"
i18n-default-message="Percentage Mode"
></label>
<div class="kuiSideBarFormRow__control">
<input class="kuiCheckBox" id="percentageMode" type="checkbox" ng-model="editorState.params.gauge.percentageMode">
</div>
</div>

<div class="kuiSideBarFormRow" ng-hide="editorState.params.gauge.type === 'simple'">
<label class="kuiSideBarFormRow__label" for="verticalSplit">
Vertical Split
</label>
<label
class="kuiSideBarFormRow__label"
for="verticalSplit"
i18n-id="kbnVislibVisTypes.controls.gaugeOptions.verticalSplitLabel"
i18n-default-message="Vertical Split"
></label>
<div class="kuiSideBarFormRow__control">
<input class="kuiCheckBox" id="verticalSplit" type="checkbox" ng-model="editorState.params.gauge.verticalSplit">&nbsp;
<icon-tip
Expand All @@ -36,9 +45,12 @@
</div>

<div class="kuiSideBarFormRow">
<label class="kuiSideBarFormRow__label" for="displayWarnings">
Display warnings
</label>
<label
class="kuiSideBarFormRow__label"
for="displayWarnings"
i18n-id="kbnVislibVisTypes.controls.gaugeOptions.displayWarningsLabel"
i18n-default-message="Display warnings"
></label>

<div class="kuiSideBarFormRow__control">
<input class="kuiCheckBox" id="displayWarnings" type="checkbox" ng-model="editorState.params.isDisplayWarning">
Expand All @@ -51,27 +63,36 @@
</div>

<div class="kuiSideBarFormRow">
<label class="kuiSideBarFormRow__label" for="addLegend">
Show Legend
</label>
<label
class="kuiSideBarFormRow__label"
for="addLegend"
i18n-id="kbnVislibVisTypes.controls.gaugeOptions.showLegendLabel"
i18n-default-message="Show Legend"
></label>
<div class="kuiSideBarFormRow__control">
<input class="kuiCheckBox" id="addLegend" type="checkbox" ng-model="editorState.params.addLegend">
</div>
</div>

<div class="kuiSideBarFormRow">
<label class="kuiSideBarFormRow__label" for="showLabels">
Show Labels
</label>
<label
class="kuiSideBarFormRow__label"
for="showLabels"
i18n-id="kbnVislibVisTypes.controls.gaugeOptions.showLabelsLabel"
i18n-default-message="Show Labels"
></label>
<div class="kuiSideBarFormRow__control">
<input class="kuiCheckBox" id="showLabels" type="checkbox" ng-model="editorState.params.gauge.labels.show">
</div>
</div>

<div class="kuiSideBarFormRow" ng-show="editorState.params.gauge.labels.show">
<label class="kuiSideBarFormRow__label" for="subText">
Sub Text
</label>
<label
class="kuiSideBarFormRow__label"
for="subText"
i18n-id="kbnVislibVisTypes.controls.gaugeOptions.subTextLabel"
i18n-default-message="Sub Text"
></label>
<div class="kuiSideBarFormRow__control">
<input
id="subText"
Expand All @@ -87,9 +108,12 @@
ng-hide="editorState.params.gauge.type === 'simple'"
ng-show="editorState.params.gauge.colorsRange.length > 1"
>
<label class="kuiSideBarFormRow__label" for="extendRange">
Auto Extend Range
</label>
<label
class="kuiSideBarFormRow__label"
for="extendRange"
i18n-id="kbnVislibVisTypes.controls.gaugeOptions.autoExtendRangeLabel"
i18n-default-message="Auto Extend Range"
></label>
<div class="kuiSideBarFormRow__control">
<input class="kuiCheckBox" id="extendRange" type="checkbox" ng-model="editorState.params.gauge.extendRange">
&nbsp;
Expand All @@ -115,9 +139,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>
<span
class="kuiSideBarCollapsibleTitle__text"
i18n-id="kbnVislibVisTypes.controls.gaugeOptions.rangesTitle"
i18n-default-message="Ranges"
></span>
</div>
</div>

Expand All @@ -126,10 +152,18 @@
<table class="visEditorAgg__rangesTable form-group" ng-show="editorState.params.gauge.colorsRange.length">
<tr>
<th scope="col">
<label id="gaugeOptionsCustomRangeFrom">From</label>
<label
id="gaugeOptionsCustomRangeFrom"
i18n-id="kbnVislibVisTypes.controls.gaugeOptions.fromTitle"
i18n-default-message="From"
></label>
</th>
<th scope="col" colspan="2">
<label id="gaugeOptionsCustomRangeTo">To</label>
<label
id="gaugeOptionsCustomRangeTo"
i18n-id="kbnVislibVisTypes.controls.gaugeOptions.toTitle"
i18n-default-message="To"
></label>
</th>
</tr>

Expand Down Expand Up @@ -171,17 +205,26 @@
<div class="hintbox" ng-show="!editorState.params.gauge.colorsRange.length">
<p>
<i class="fa fa-danger text-danger"></i>
<strong>Required:</strong> You must specify at least one range.
<span
i18n-id="kbnVislibVisTypes.controls.gaugeOptions.specifiedRangeNumberWarningMessage"
i18n-default-message="{required} You must specify at least one range."
i18n-values="{ required: '<strong>' + requiredText + '</strong>' }"
></span>
</p>
</div>

<div
ng-click="addRange()"
class="kuiButton kuiButton--primary kuiButton--fullWidth">
Add Range
</div>
class="kuiButton kuiButton--primary kuiButton--fullWidth"
i18n-id="kbnVislibVisTypes.controls.gaugeOptions.addRangeTitle"
i18n-default-message="Add Range"
></div>
<div class="euiSpacer euiSpacer--s"></div>
<div class="text text-center text-info">Note: colors can be changed in the legend</div>
<div
class="text text-center text-info"
i18n-id="kbnVislibVisTypes.controls.gaugeOptions.howToChangeColorsDescription"
i18n-default-message="Note: colors can be changed in the legend"
></div>
</div>
</div>
</div>
Expand All @@ -203,17 +246,22 @@
}"
class="fa fa-caret-right kuiSideBarCollapsibleTitle__caret"
></span>
<span class="kuiSideBarCollapsibleTitle__text">
Color Options
</span>
<span
class="kuiSideBarCollapsibleTitle__text"
i18n-id="kbnVislibVisTypes.controls.gaugeOptions.colorOptionsTitle"
i18n-default-message="Color Options"
></span>
</div>
</div>
<div id="gaugeOptionsColors" ng-if="showColorOptions" class="kuiSideBarCollapsibleSection">
<div class="kuiSideBarSection">
<div class="kuiSideBarFormRow">
<label class="kuiSideBarFormRow__label" for="colorSchema">
Color Schema
</label>
<label
class="kuiSideBarFormRow__label"
for="colorSchema"
i18n-id="kbnVislibVisTypes.controls.gaugeOptions.colorSchemaLabel"
i18n-default-message="Color Schema"
></label>
<div class="kuiSideBarFormRow__control">
<select
id="colorSchema"
Expand All @@ -222,13 +270,22 @@
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="kbnVislibVisTypes.controls.gaugeOptions.resetColorsTitle"
i18n-default-message="reset colors"
></div>
</div>

<div class="kuiSideBarFormRow">
<label class="kuiSideBarFormRow__label" for="invertColors">
Reverse Color Schema
</label>
<label
class="kuiSideBarFormRow__label"
for="invertColors"
i18n-id="kbnVislibVisTypes.controls.gaugeOptions.reverseColorSchemaLabel"
i18n-default-message="Reverse Color Schema"
></label>
<div class="kuiSideBarFormRow__control">
<input class="kuiCheckBox" id="invertColors" type="checkbox" ng-model="editorState.params.gauge.invertColors">
</div>
Expand All @@ -255,37 +312,48 @@
}"
class="fa fa-caret-right kuiSideBarCollapsibleTitle__caret"
></span>
<span class="kuiSideBarCollapsibleTitle__text">
Style
</span>
<span
class="kuiSideBarCollapsibleTitle__text"
i18n-id="kbnVislibVisTypes.controls.gaugeOptions.styleTitle"
i18n-default-message="Style"
></span>
</div>
</div>
<div id="gaugeOptionsStyle" ng-if="showStyle" class="kuiSideBarCollapsibleSection">

<div class="kuiSideBarSection">
<div ng-hide="editorState.params.gauge.type === 'simple'">
<div class="kuiSideBarFormRow" ng-show="editorState.params.gauge.colorsRange.length > 1">
<label class="kuiSideBarFormRow__label" for="labelColor">
Color Labels
</label>
<label
class="kuiSideBarFormRow__label"
for="labelColor"
i18n-id="kbnVislibVisTypes.controls.gaugeOptions.colorLabelsLabel"
i18n-default-message="Color Labels"
></label>
<div class="kuiSideBarFormRow__control">
<input class="kuiCheckBox" id="labelColor" type="checkbox" ng-model="editorState.params.gauge.style.labelColor">
</div>
</div>
<div class="kuiSideBarFormRow">
<label class="kuiSideBarFormRow__label" for="showScale">
Show Scale
</label>
<label
class="kuiSideBarFormRow__label"
for="showScale"
i18n-id="kbnVislibVisTypes.controls.gaugeOptions.showScaleLabel"
i18n-default-message="Show Scale"
></label>
<div class="kuiSideBarFormRow__control">
<input class="kuiCheckBox" id="showScale" type="checkbox" ng-model="editorState.params.gauge.scale.show">
</div>
</div>
</div>
<div ng-show="editorState.params.gauge.type === 'simple'">
<div class="kuiSideBarFormRow">
<label class="kuiSideBarFormRow__label" for="gaugeColorMode">
Color
</label>
<label
class="kuiSideBarFormRow__label"
for="gaugeColorMode"
i18n-id="kbnVislibVisTypes.controls.gaugeOptions.colorLabel"
i18n-default-message="Color"
></label>
<div class="kuiSideBarFormRow__control">
<select
id="gaugeColorMode"
Expand All @@ -296,9 +364,12 @@
</div>
</div>
<div class="kuiSideBarFormRow">
<label class="kuiSideBarFormRow__label" for="backColor">
Back/Text Color
</label>
<label
class="kuiSideBarFormRow__label"
for="backColor"
i18n-id="kbnVislibVisTypes.controls.gaugeOptions.backTextColorLabel"
i18n-default-message="Back/Text Color"
></label>
<div class="kuiSideBarFormRow__control">
<input
id="backTextColor"
Expand All @@ -308,9 +379,13 @@
</div>
</div>
<div class="kuiSideBarFormRow">
<label class="kuiSideBarFormRow__label" for="showScale">
Font Size (<span ng-bind="editorState.params.gauge.style.fontSize"></span>pt)
</label>
<label
class="kuiSideBarFormRow__label"
for="showScale"
i18n-id="kbnVislibVisTypes.controls.gaugeOptions.fontSizeLabel"
i18n-default-message="Font Size ({fontSize}pt)"
i18n-values="{ fontSize: editorState.params.gauge.style.fontSize }"
></label>
<div class="kuiSideBarFormRow__control">
<input type="range" ng-model="editorState.params.gauge.style.fontSize" class="form-control" min="12" max="120" />
</div>
Expand Down
6 changes: 5 additions & 1 deletion src/core_plugins/kbn_vislib_vis_types/public/controls/gauge_options.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ import gaugeOptionsTemplate from './gauge_options.html';
import _ from 'lodash';
const module = uiModules.get('kibana');

module.directive('gaugeOptions', function () {
module.directive('gaugeOptions', function (i18n) {
return {
restrict: 'E',
template: gaugeOptionsTemplate,
Expand Down Expand Up @@ -107,6 +107,10 @@ module.directive('gaugeOptions', function () {
$scope.customColors = true;
});

$scope.requiredText = i18n('kbnVislibVisTypes.controls.gaugeOptions.requiredText', {
defaultMessage: 'Required:'
});

}
};
});
Loading

0 comments on commit cc75547

Please sign in to comment.