Translations for Region Map (#23875)

add translations for region_map plugin

.i18nrc.json

@@ -6,6 +6,7 @@
     "kbnVislibVisTypes": "src/core_plugins/kbn_vislib_vis_types",
     "markdownVis": "src/core_plugins/markdown_vis",
     "metricVis": "src/core_plugins/metric_vis",
+    "regionMap": "src/core_plugins/region_map",
     "statusPage": "src/core_plugins/status_page",
     "tileMap": "src/core_plugins/tile_map",
     "tagCloud": "src/core_plugins/tagcloud",

src/core_plugins/region_map/public/choropleth_layer.js

@@ -21,6 +21,7 @@ import $ from 'jquery';
 import L from 'leaflet';
 import _ from 'lodash';
 import d3 from 'd3';
+import { i18n }  from '@kbn/i18n';
 import { KibanaMapLayer } from 'ui/vis/map/kibana_map_layer';
 import { truncatedColorMaps } from 'ui/vislib/components/color/truncated_colormaps';
 import * as topojson from 'topojson-client';
@@ -123,7 +124,10 @@ export default class ChoroplethLayer extends KibanaMapLayer {
           featureCollection = topojson.feature(data, features);//conversion to geojson
         } else {
           //should never happen
-          throw new Error('Unrecognized format ' + formatType);
+          throw new Error(i18n.translate('regionMap.choroplethLayer.unrecognizedFormatErrorMessage', {
+            defaultMessage: 'Unrecognized format {formatType}',
+            values: { formatType },
+          }));
         }
         this._sortedFeatures = featureCollection.features.slice();
         this._sortFeatures();
@@ -143,15 +147,23 @@ export default class ChoroplethLayer extends KibanaMapLayer {
 
         let errorMessage;
         if (e.status === 404) {
-          errorMessage = `Server responding with '404' when attempting to fetch ${geojsonUrl}.
-                          Make sure the file exists at that location.`;
+          errorMessage = i18n.translate('regionMap.choroplethLayer.downloadingVectorData404ErrorMessage', {
+            defaultMessage: 'Server responding with \'404\' when attempting to fetch {geojsonUrl}. \
+Make sure the file exists at that location.',
+            values: { geojsonUrl },
+          });
         } else {
-          errorMessage = `Cannot download ${geojsonUrl} file. Please ensure the
-CORS configuration of the server permits requests from the Kibana application on this host.`;
+          errorMessage = i18n.translate('regionMap.choroplethLayer.downloadingVectorDataErrorMessage', {
+            defaultMessage: 'Cannot download {geojsonUrl} file. Please ensure the \
+CORS configuration of the server permits requests from the Kibana application on this host.',
+            values: { geojsonUrl },
+          });
         }
 
         toastNotifications.addDanger({
-          title: 'Error downloading vector data',
+          title: i18n.translate('regionMap.choroplethLayer.downloadingVectorDataErrorMessageTitle', {
+            defaultMessage: 'Error downloading vector data',
+          }),
           text: errorMessage,
         });
 

src/core_plugins/region_map/public/region_map_vis.js

@@ -27,7 +27,7 @@ import { mapToLayerWithId } from './util';
 import { RegionMapsVisualizationProvider } from './region_map_visualization';
 import { Status } from 'ui/vis/update_status';
 
-VisTypesRegistryProvider.register(function RegionMapProvider(Private, regionmapsConfig, config) {
+VisTypesRegistryProvider.register(function RegionMapProvider(Private, regionmapsConfig, config, i18n) {
   const VisFactory = Private(VisFactoryProvider);
   const RegionMapsVisualization = Private(RegionMapsVisualizationProvider);
 
@@ -37,9 +37,9 @@ VisTypesRegistryProvider.register(function RegionMapProvider(Private, regionmaps
 
   return VisFactory.createBaseVisualization({
     name: 'region_map',
-    title: 'Region Map',
-    description: 'Show metrics on a thematic map. Use one of the provided base maps, or add your own. ' +
-    'Darker colors represent higher values.',
+    title: i18n('regionMap.mapVis.regionMapTitle', { defaultMessage: 'Region Map' }),
+    description: i18n('regionMap.mapVis.regionMapDescription', { defaultMessage: 'Show metrics on a thematic map. Use one of the \
+provided base maps, or add your own. Darker colors represent higher values.' }),
     category: CATEGORY.MAP,
     icon: 'visMapRegion',
     visConfig: {
@@ -65,16 +65,16 @@ VisTypesRegistryProvider.register(function RegionMapProvider(Private, regionmaps
       collections: {
         legendPositions: [{
           value: 'bottomleft',
-          text: 'bottom left',
+          text: i18n('regionMap.mapVis.regionMapEditorConfig.bottomLeftText', { defaultMessage: 'bottom left' }),
         }, {
           value: 'bottomright',
-          text: 'bottom right',
+          text: i18n('regionMap.mapVis.regionMapEditorConfig.bottomRightText', { defaultMessage: 'bottom right' }),
         }, {
           value: 'topleft',
-          text: 'top left',
+          text: i18n('regionMap.mapVis.regionMapEditorConfig.topLeftText', { defaultMessage: 'top left' }),
         }, {
           value: 'topright',
-          text: 'top right',
+          text: i18n('regionMap.mapVis.regionMapEditorConfig.topRightText', { defaultMessage: 'top right' }),
         }],
         colorSchemas: Object.keys(truncatedColorMaps),
         vectorLayers: vectorLayers
@@ -83,7 +83,7 @@ VisTypesRegistryProvider.register(function RegionMapProvider(Private, regionmaps
         {
           group: 'metrics',
           name: 'metric',
-          title: 'Value',
+          title: i18n('regionMap.mapVis.regionMapEditorConfig.schemas.metricTitle', { defaultMessage: 'Value' }),
           min: 1,
           max: 1,
           aggFilter: ['count', 'avg', 'sum', 'min', 'max', 'cardinality', 'top_hits',
@@ -96,7 +96,7 @@ VisTypesRegistryProvider.register(function RegionMapProvider(Private, regionmaps
           group: 'buckets',
           name: 'segment',
           icon: 'fa fa-globe',
-          title: 'shape field',
+          title: i18n('regionMap.mapVis.regionMapEditorConfig.schemas.segmentTitle', { defaultMessage: 'shape field' }),
           min: 1,
           max: 1,
           aggFilter: ['terms']

src/core_plugins/region_map/public/region_map_vis_params.html

@@ -1,15 +1,20 @@
 <div class="kuiSideBarSection">
   <div class="form-group">
     <div class="kuiSideBarSectionTitle">
-      <div class="kuiSideBarSectionTitle__text">
-        Layer Settings
-      </div>
+      <div
+        class="kuiSideBarSectionTitle__text"
+        i18n-id="regionMap.visParams.layerSettingsTitle"
+        i18n-default-message="Layer Settings"
+      ></div>
     </div>
 
     <div class="kuiSideBarFormRow">
-      <label class="kuiSideBarFormRow__label" for="regionMap">
-        Vector map
-      </label>
+      <label
+        class="kuiSideBarFormRow__label"
+        for="regionMap"
+        i18n-id="regionMap.visParams.vectorMapLabel"
+        i18n-default-message="Vector map"
+      ></label>
       <div class="kuiSideBarFormRow__control">
         <select
           id="regionMap"
@@ -22,53 +27,79 @@
     </div>
 
     <div class="form-group clearfix" ng-hide="!editorState.params.emsHotLink">
-        <a
-          class="rgmEMSLink pull-right"
-          target="_blank"
-          rel="noopener noreferrer"
-          ng-href="{{editorState.params.emsHotLink}}"
-          target="_blank"
-          title="Preview {{editorState.params.selectedLayer.name}} on the Elastic Maps Service"
-        ><icon aria-hidden size="'s'" type="'link'" /> Preview on EMS
-        </a>
+      <a
+        class="rgmEMSLink pull-right"
+        target="_blank"
+        rel="noopener noreferrer"
+        ng-href="{{editorState.params.emsHotLink}}"
+        target="_blank"
+        title="{{'regionMap.visParams.previewOnEMSLinkTitle' | i18n: {
+          defaultMessage: 'Preview {selectedLayerName} on the Elastic Maps Service',
+          values: { selectedLayerName: editorState.params.selectedLayer.name }
+        } }}"
+      >
+        <icon aria-hidden size="'s'" type="'link'" />
+        <span
+          i18n-id="regionMap.visParams.previewOnEMSLinkText"
+          i18n-default-message="Preview on EMS"
+        ></span>
+      </a>
     </div>
 
     <div class="kuiSideBarFormRow">
-      <label class="kuiSideBarFormRow__label" for="joinField">
-        Join field
-      </label>
+      <label
+        class="kuiSideBarFormRow__label"
+        for="joinField"
+        i18n-id="regionMap.visParams.joinFieldLabel"
+        i18n-default-message="Join field"
+      ></label>
       <div class="kuiSideBarFormRow__control">
         <select id="joinField"
           class="kuiSelect kuiSideBarSelect"
           ng-model="editorState.params.selectedJoinField"
           ng-options="field.description for field in editorState.params.selectedLayer.fields track by field.name"
         >
-          <option value=''>Select</option></select>
+          <option
+            value=''
+            i18n-id="regionMap.visParams.selectOptionLabel"
+            i18n-default-message="Select"
+          ></option>
+        </select>
       </div>
     </div>
     <div class="kuiSideBarFormRow">
-      <label class="kuiSideBarFormRow__label" for="displayWarnings">
-        Display warnings
-      </label>
+      <label
+        class="kuiSideBarFormRow__label"
+        for="displayWarnings"
+        i18n-id="regionMap.visParams.displayWarningsLabel"
+        i18n-default-message="Display warnings"
+      ></label>
 
       <div class="kuiSideBarFormRow__control">
         <input id="displayWarnings" type="checkbox" ng-model="editorState.params.isDisplayWarning">
         &nbsp;
         <icon-tip
-          content="'Turns on/off warnings. When turned on, warning will be shown for each term that cannot be matched to a shape in the vector layer based on the join field. When turned off, these warnings will be turned off.'"
+          content="{{::'regionMap.visParams.switchWarningsTipText' | i18n: {
+            defaultMessage: '&quot;Turns on/off warnings. When turned on, warning will be shown for each term that cannot be matched to a shape in the vector layer based on the join field. When turned off, these warnings will be turned off.&quot;'
+          } }}"
           position="'right'"
         ></icon-tip>
       </div>
     </div>
     <div class="kuiSideBarFormRow">
-      <label class="kuiSideBarFormRow__label" for="onlyShowMatchingShapes">
-        Show all shapes
-      </label>
+      <label
+        class="kuiSideBarFormRow__label"
+        for="onlyShowMatchingShapes"
+        i18n-id="regionMap.visParams.showAllShapesLabel"
+        i18n-default-message="Show all shapes"
+      ></label>
       <div class="kuiSideBarFormRow__control">
         <input id="onlyShowMatchingShapes" type="checkbox" ng-model="editorState.params.showAllShapes">
         &nbsp;
         <icon-tip
-          content="'Turning this off only shows the shapes that were matched with a corresponding term'"
+          content="{{::'regionMap.visParams.turnOffShowingAllShapesTipText' | i18n: {
+            defaultMessage: '&quot;Turning this off only shows the shapes that were matched with a corresponding term&quot;'
+          } }}"
           position="'right'"
         ></icon-tip>
       </div>
@@ -79,12 +110,19 @@
 <div class="kuiSideBarSection">
 
   <div class="kuiSideBarSectionTitle">
-    <div class="kuiSideBarSectionTitle__text">Style settings</div>
+    <div
+      class="kuiSideBarSectionTitle__text"
+      i18n-id="regionMap.visParams.styleSettingsLabel"
+      i18n-default-message="Style settings"
+    ></div>
   </div>
   <div class="kuiSideBarFormRow" >
-    <label class="kuiSideBarFormRow__label" for="colorSchema">
-      Color Schema
-    </label>
+    <label
+      class="kuiSideBarFormRow__label"
+      for="colorSchema"
+      i18n-id="regionMap.visParams.colorSchemaLabel"
+      i18n-default-message="Color Schema"
+    ></label>
     <div class="kuiSideBarFormRow__control">
       <select
         id="colorSchema"
@@ -95,9 +133,12 @@
     </div>
   </div>
   <div class="kuiSideBarFormRow" >
-    <label class="kuiSideBarFormRow__label" for="outlineWeight">
-      Outline weight
-    </label>
+    <label
+      class="kuiSideBarFormRow__label"
+      for="outlineWeight"
+      i18n-id="regionMap.visParams.outlineWeightLabel"
+      i18n-default-message="Outline weight"
+    ></label>
     <div class="kuiSideBarFormRow__control">
       <input
         id="outlineWeight"

src/core_plugins/region_map/public/region_map_visualization.js

@@ -26,7 +26,7 @@ import AggResponsePointSeriesTooltipFormatterProvider from './tooltip_formatter'
 import 'ui/vis/map/service_settings';
 import { toastNotifications } from 'ui/notify';
 
-export function RegionMapsVisualizationProvider(Private, config) {
+export function RegionMapsVisualizationProvider(Private, config, i18n) {
 
   const tooltipFormatter = Private(AggResponsePointSeriesTooltipFormatterProvider);
   const BaseMapsVisualization = Private(BaseMapsVisualizationProvider);
@@ -161,8 +161,19 @@ export function RegionMapsVisualizationProvider(Private, config) {
         const shouldShowWarning = this._vis.params.isDisplayWarning && config.get('visualization:regionmap:showWarnings');
         if (event.mismatches.length > 0 && shouldShowWarning) {
           toastNotifications.addWarning({
-            title: `Unable to show ${event.mismatches.length} ${event.mismatches.length > 1 ? 'results' : 'result'} on map`,
-            text: `Ensure that each of these term matches a shape on that shape's join field: ${event.mismatches.join(', ')}`,
+            title: i18n('regionMap.visualization.unableToShowMismatchesWarningTitle', {
+              defaultMessage: 'Unable to show {mismatchesLength} {oneMismatch, plural, one {result} other {results}} on map',
+              values: {
+                mismatchesLength: event.mismatches.length,
+                oneMismatch: event.mismatches.length > 1 ? 0 : 1,
+              },
+            }),
+            text: i18n('regionMap.visualization.unableToShowMismatchesWarningText', {
+              defaultMessage: 'Ensure that each of these term matches a shape on that shape\'s join field: {mismatches}',
+              values: {
+                mismatches: event.mismatches.join(', '),
+              },
+            }),
           });
         }
       });