Continuing to migrate content to msg catalogue

Continuing #233, this commit moves more of the JavaScript-managed text
into the message catalogue

app/javascript/components/data-view-graph.vue

@@ -130,6 +130,7 @@ export default {
           theme: this.theme,
           location: this.$store.state.location,
           zoom: this.zoom,
+          i18n: this._i18n
         },
       );
     },

app/javascript/components/data-view.vue

@@ -8,7 +8,7 @@
         v-model='activeTab'
         @tab-click='onChangeTab'
       >
-        <el-tab-pane label='See data graph' :name='`graphs-tab-${indicator.slug}-${theme.slug}`'>
+        <el-tab-pane :label='$t("js.action.data_graph")' :name='`graphs-tab-${indicator.slug}-${theme.slug}`'>
           <data-view-graph
             :theme='theme'
             :indicator='indicator'
@@ -17,7 +17,7 @@
           >
           </data-view-graph>
         </el-tab-pane>
-        <el-tab-pane label='See data table' :name='`data-tab-${indicator.slug}-${theme.slug}`'>
+        <el-tab-pane :label='$t("js.action.data_table")' :name='`data-tab-${indicator.slug}-${theme.slug}`'>
           <data-view-table
             :statistics='availableStatistics'
             :indicator='indicator'
@@ -33,7 +33,7 @@
           >
           </data-view-download>
         </el-tab-pane>
-        <el-tab-pane label='Compare with location ...' :name='`compare-tab-${indicator.slug}-${theme.slug}`'>
+        <el-tab-pane :label='$t("js.action.compare")' :name='`compare-tab-${indicator.slug}-${theme.slug}`'>
           <p v-if='selectedLocation'>
             You can see how {{ selectedLocation.labels.en }} compares to
             other places:

app/javascript/presenters/data-graph.js

@@ -410,15 +410,17 @@ function prepareOverlay (projection, graphConfig) {
 
 /** Generate a warning when there is no data to display */
 function warnNoData (graphConfig) {
+  const locale = graphConfig.i18n.locale
   const label = graphConfig.theme.label.toLocaleLowerCase()
-  const location = graphConfig.location.labels.en
+  const location = graphConfig.location.labels[locale]
+  const text = graphConfig.i18n.t('js.graph.no_data', { label, location })
 
   graphConfig
     .rootElem
     .append('text')
     .attr('x', 35)
     .attr('y', 50)
-    .text(`Sorry, there is no ${label} data available for ${location}. Please select a different location.`)
+    .text(text)
     .attr('font-size', '15px')
     .attr('font-style', 'italic')
     .attr('fill', '#303030')

config/locales/en.yml

@@ -132,7 +132,12 @@ en:
   js:
     action:
       download: "* Download this data"
+      data_graph: "* See data graph"
+      data_table: "* See data table"
+      compare: "* Compare with location ..."
 
+    graph:
+      no_data: "* Sorry, there is no %{label} data available for %{location}. Please select a different location."
 # old-------------
 
   index: