Translate heatmap and heatmap_options (#23812)

Translation of Heatmap visualization component

src/core_plugins/kbn_vislib_vis_types/public/controls/heatmap_options.html

@@ -1,8 +1,11 @@
 <div>
   <div class="kuiSideBarFormRow">
-    <label class="kuiSideBarFormRow__label" for="colorSchema">
-      Color Schema
-    </label>
+    <label
+      class="kuiSideBarFormRow__label"
+      for="colorSchema"
+      i18n-id="kbnVislibVisTypes.controls.heatmapOptions.colorSchemaLabel"
+      i18n-default-message="Color Schema"
+    ></label>
     <div class="kuiSideBarFormRow__control">
       <select
         id="colorSchema"
@@ -16,24 +19,30 @@
       ng-show="customColors"
       ng-click="resetColors()"
       kbn-accessible-click
-    >
-      reset colors
-    </div>
+      i18n-id="kbnVislibVisTypes.controls.heatmapOptions.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.heatmapOptions.reverseColorSchemaLabel"
+      i18n-default-message="Reverse Color Schema"
+    ></label>
     <div class="kuiSideBarFormRow__control">
       <input class="kuiCheckBox" id="invertColors" type="checkbox" ng-model="editorState.params.invertColors">
     </div>
   </div>
 
   <div class="kuiSideBarFormRow">
-    <label class="kuiSideBarFormRow__label" for="axisScale">
-      Color Scale
-    </label>
+    <label
+      class="kuiSideBarFormRow__label"
+      for="axisScale"
+      i18n-id="kbnVislibVisTypes.controls.heatmapOptions.colorScaleLabel"
+      i18n-default-message="Color Scale"
+    ></label>
     <div class="kuiSideBarFormRow__control">
       <select
         id="axisScale"
@@ -45,27 +54,36 @@
   </div>
 
   <div class="kuiSideBarFormRow">
-    <label class="kuiSideBarFormRow__label" for="defaultYExtents">
-      Scale to Data Bounds
-    </label>
+    <label
+      class="kuiSideBarFormRow__label"
+      for="defaultYExtents"
+      i18n-id="kbnVislibVisTypes.controls.heatmapOptions.scaleToDataBoundsLabel"
+      i18n-default-message="Scale to Data Bounds"
+    ></label>
     <div class="kuiSideBarFormRow__control">
       <input class="kuiCheckBox" id="defaultYExtents" type="checkbox" ng-model="editorState.params.valueAxes[0].scale.defaultYExtents">
     </div>
   </div>
 
   <div class="kuiSideBarFormRow" ng-if="!editorState.params.setColorRange">
-    <label class="kuiSideBarFormRow__label" for="percentageMode">
-      Percentage Mode
-    </label>
+    <label
+      class="kuiSideBarFormRow__label"
+      for="percentageMode"
+      i18n-id="kbnVislibVisTypes.controls.heatmapOptions.percentageModeLabel"
+      i18n-default-message="Percentage Mode"
+    ></label>
     <div class="kuiSideBarFormRow__control">
       <input class="kuiCheckBox" id="percentageMode" type="checkbox" ng-model="editorState.params.percentageMode">
     </div>
   </div>
 
   <div class="kuiSideBarFormRow" ng-if="!editorState.params.setColorRange">
-    <label class="kuiSideBarFormRow__label" for="colorsNumber">
-      Number of colors
-    </label>
+    <label
+      class="kuiSideBarFormRow__label"
+      for="colorsNumber"
+      i18n-id="kbnVislibVisTypes.controls.heatmapOptions.colorsNumberLabel"
+      i18n-default-message="Number of colors"
+    ></label>
     <div class="kuiSideBarFormRow__control">
       <input
         data-test-subj="heatmapOptionsColorsNumberInput"
@@ -94,9 +112,11 @@
           ng-class="{ 'fa-caret-down': showColorRange, 'fa-caret-right': !showColorRange }"
           class="kuiIcon fa-caret-right kuiSideBarCollapsibleTitle__caret"
         ></span>
-        <span class="kuiSideBarCollapsibleTitle__text">
-          Custom Ranges
-        </span>
+        <span
+          class="kuiSideBarCollapsibleTitle__text"
+          i18n-id="kbnVislibVisTypes.controls.heatmapOptions.customRangesTitle"
+          i18n-default-message="Custom Ranges"
+        ></span>
       </div>
       <input
         data-test-subj="heatmapEnableCustomRanges"
@@ -122,10 +142,18 @@
           ng-show="editorState.params.colorsRange.length">
           <tr>
             <th scope="col">
-              <label id="heatmapCustomRangeFrom">From</label>
+              <label
+                id="heatmapCustomRangeFrom"
+                i18n-id="kbnVislibVisTypes.controls.heatmapOptions.fromLabel"
+                i18n-default-message="From"
+              ></label>
             </th>
             <th scope="col" colspan="2">
-              <label id="heatmapCustomRangeTo">To</label>
+              <label
+                id="heatmapCustomRangeTo"
+                i18n-id="kbnVislibVisTypes.controls.heatmapOptions.toLabel"
+                i18n-default-message="To"
+              ></label>
             </th>
           </tr>
 
@@ -163,21 +191,29 @@
         </table>
 
         <div class="hintbox" ng-show="!editorState.params.colorsRange.length">
-          <p>
-            <span class="kuiIcon fa-danger text-danger"></span>
-            <strong>Required:</strong> You must specify at least one range.
-          </p>
+          <p
+            i18n-id="kbnVislibVisTypes.controls.heatmapOptions.specifiedRangeNumberWarningMessage"
+            i18n-default-message="{icon} {required} You must specify at least one range."
+            i18n-values="{
+              icon: '<span class=\'kuiIcon fa-danger text-danger\'></span>',
+              required: '<strong>' + requiredText + '</strong>'
+            }"
+          ></p>
         </div>
 
         <button
           ng-click="addRange()"
           class="kuiButton kuiButton--primary kuiButton--fullWidth"
           data-test-subj="heatmapAddRangeButton"
-        >
-          Add Range
-        </button>
+          i18n-id="kbnVislibVisTypes.controls.heatmapOptions.addRangeButtonLabel"
+          i18n-default-message="Add Range"
+        ></button>
         <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.heatmapOptions.howToChangeColorsDescription"
+          i18n-default-message="Note: colors can be changed in the legend"
+        ></div>
       </div>
     </div>
   </div>
@@ -198,9 +234,11 @@
           }"
           class="kuiIcon fa-caret-right kuiSideBarCollapsibleTitle__caret"
         ></span>
-        <span class="kuiSideBarCollapsibleTitle__text">
-          Show Labels
-        </span>
+        <span
+          class="kuiSideBarCollapsibleTitle__text"
+          i18n-id="kbnVislibVisTypes.controls.heatmapOptions.showLabelsTitle"
+          i18n-default-message="Show Labels"
+        ></span>
       </div>
       <input
         aria-label="Show labels"
@@ -217,27 +255,36 @@
     >
       <div class="kuiSideBarSection">
         <div class="kuiSideBarFormRow">
-          <label class="kuiSideBarFormRow__label" for="rotateLabels">
-            Rotate
-          </label>
+          <label
+            class="kuiSideBarFormRow__label"
+            for="rotateLabels"
+            i18n-id="kbnVislibVisTypes.controls.heatmapOptions.rotateLabel"
+            i18n-default-message="Rotate"
+          ></label>
           <div class="kuiSideBarFormRow__control">
             <input class="kuiCheckBox" id="rotateLabels" type="checkbox" ng-model="options.rotateLabels">
           </div>
         </div>
 
         <div class="kuiSideBarFormRow">
-          <label class="kuiSideBarFormRow__label" for="overwriteColor">
-            Overwrite automatic color
-          </label>
+          <label
+            class="kuiSideBarFormRow__label"
+            for="overwriteColor"
+            i18n-id="kbnVislibVisTypes.controls.heatmapOptions.overwriteAutomaticColorLabel"
+            i18n-default-message="Overwrite automatic color"
+          ></label>
           <div class="kuiSideBarFormRow__control">
             <input class="kuiCheckBox" id="overwriteColor" type="checkbox" ng-model="editorState.params.valueAxes[0].labels.overwriteColor">
           </div>
         </div>
 
         <div class="kuiSideBarFormRow" ng-show="editorState.params.valueAxes[0].labels.overwriteColor">
-          <label class="kuiSideBarFormRow__label" for="labelColor">
-            Color
-          </label>
+          <label
+            class="kuiSideBarFormRow__label"
+            for="labelColor"
+            i18n-id="kbnVislibVisTypes.controls.heatmapOptions.colorLabel"
+            i18n-default-message="Color"
+          ></label>
           <div class="kuiSideBarFormRow__control">
             <input
               id="labelColor"

src/core_plugins/kbn_vislib_vis_types/public/controls/heatmap_options.js

@@ -22,7 +22,7 @@ import heatmapOptionsTemplate from './heatmap_options.html';
 import _ from 'lodash';
 const module = uiModules.get('kibana');
 
-module.directive('heatmapOptions', function () {
+module.directive('heatmapOptions', function (i18n) {
   return {
     restrict: 'E',
     template: heatmapOptionsTemplate,
@@ -88,6 +88,10 @@ module.directive('heatmapOptions', function () {
       $scope.uiState.on('colorChanged', () => {
         $scope.customColors = true;
       });
+
+      $scope.requiredText = i18n('kbnVislibVisTypes.controls.heatmapOptions.requiredText', {
+        defaultMessage: 'Required:'
+      });
     }
   };
 });

src/core_plugins/kbn_vislib_vis_types/public/editors/heatmap.html

@@ -1,32 +1,43 @@
 <div class="kuiSideBarSection">
   <div class="kuiSideBarSectionTitle">
-    <div class="kuiSideBarSectionTitle__text">
-      Basic Settings
-    </div>
+    <div
+      class="kuiSideBarSectionTitle__text"
+      i18n-id="kbnVislibVisTypes.editors.heatmap.basicSettingsTitle"
+      i18n-default-message="Basic Settings"
+    ></div>
   </div>
 
   <div class="kuiSideBarFormRow">
-    <label class="kuiSideBarFormRow__label" for="addTooltip">
-      Show Tooltips
-    </label>
+    <label
+      class="kuiSideBarFormRow__label"
+      for="addTooltip"
+      i18n-id="kbnVislibVisTypes.editors.heatmap.showTooltipsLabel"
+      i18n-default-message="Show Tooltips"
+    ></label>
     <div class="kuiSideBarFormRow__control">
       <input class="kuiCheckBox" id="addTooltip" type="checkbox" ng-model="editorState.params.addTooltip">
     </div>
   </div>
 
   <div class="kuiSideBarFormRow">
-    <label class="kuiSideBarFormRow__label" for="enableHover">
-      Highlight
-    </label>
+    <label
+      class="kuiSideBarFormRow__label"
+      for="enableHover"
+      i18n-id="kbnVislibVisTypes.editors.heatmap.highlightLabel"
+      i18n-default-message="Highlight"
+    ></label>
     <div class="kuiSideBarFormRow__control">
       <input class="kuiCheckBox" id="enableHover" type="checkbox" ng-model="editorState.params.enableHover">
     </div>
   </div>
 
   <div class="kuiSideBarFormRow" ng-show="editorState.params.addLegend">
-    <label class="kuiSideBarFormRow__label" for="legendPosition">
-      Legend Position
-    </label>
+    <label
+      class="kuiSideBarFormRow__label"
+      for="legendPosition"
+      i18n-id="kbnVislibVisTypes.editors.heatmap.legendPositionLabel"
+      i18n-default-message="Legend Position"
+    ></label>
     <div class="kuiSideBarFormRow__control">
       <select
         id="legendPosition"
@@ -41,9 +52,11 @@
 <div class="kuiSideBarSection">
 
   <div class="kuiSideBarSectionTitle">
-    <div class="kuiSideBarSectionTitle__text">
-      Heatmap Settings
-    </div>
+    <div
+      class="kuiSideBarSectionTitle__text"
+      i18n-id="kbnVislibVisTypes.editors.heatmap.heatmapSettingsTitle"
+      i18n-default-message="Heatmap Settings"
+    ></div>
   </div>
 
   <heatmap-options></heatmap-options>

src/core_plugins/kbn_vislib_vis_types/public/heatmap.js

@@ -23,14 +23,14 @@ import { CATEGORY } from 'ui/vis/vis_category';
 import heatmapTemplate from './editors/heatmap.html';
 import { vislibColorMaps } from 'ui/vislib/components/color/colormaps';
 
-export default function HeatmapVisType(Private) {
+export default function HeatmapVisType(Private, i18n) {
   const VisFactory = Private(VisFactoryProvider);
 
   return VisFactory.createVislibVisualization({
     name: 'heatmap',
-    title: 'Heat Map',
+    title: i18n('kbnVislibVisTypes.heatmap.heatmapTitle', { defaultMessage: 'Heat Map' }),
     icon: 'visHeatmap',
-    description: 'Shade cells within a matrix',
+    description: i18n('kbnVislibVisTypes.heatmap.heatmapDescription', { defaultMessage: 'Shade cells within a matrix' }),
     category: CATEGORY.BASIC,
     visConfig: {
       defaults: {
@@ -86,7 +86,7 @@ export default function HeatmapVisType(Private) {
         {
           group: 'metrics',
           name: 'metric',
-          title: 'Value',
+          title: i18n('kbnVislibVisTypes.heatmap.metricTitle', { defaultMessage: 'Value' }),
           min: 1,
           max: 1,
           aggFilter: ['count', 'avg', 'median', 'sum', 'min', 'max', 'cardinality', 'std_dev', 'top_hits'],
@@ -97,23 +97,23 @@ export default function HeatmapVisType(Private) {
         {
           group: 'buckets',
           name: 'segment',
-          title: 'X-Axis',
+          title: i18n('kbnVislibVisTypes.heatmap.segmentTitle', { defaultMessage: 'X-Axis' }),
           min: 0,
           max: 1,
           aggFilter: ['!geohash_grid', '!filter']
         },
         {
           group: 'buckets',
           name: 'group',
-          title: 'Y-Axis',
+          title: i18n('kbnVislibVisTypes.heatmap.groupTitle', { defaultMessage: 'Y-Axis' }),
           min: 0,
           max: 1,
           aggFilter: ['!geohash_grid', '!filter']
         },
         {
           group: 'buckets',
           name: 'split',
-          title: 'Split Chart',
+          title: i18n('kbnVislibVisTypes.heatmap.splitTitle', { defaultMessage: 'Split Chart' }),
           min: 0,
           max: 1,
           aggFilter: ['!geohash_grid', '!filter']