Merge pull request #4831 from wri/FLAG-1035-fix-variables-in-the-inte…

…grated-deforestation-alerts-widget-for-translations-to-work-properly [FLAG-1035] Fix variables in the integrated deforestation alerts widget for translations to work properly
wri · Sep 9, 2024 · 8099792 · 8099792
2 parents 030e4cb + 0e9a986
commit 8099792
Show file tree

Hide file tree

Showing 13 changed files with 168 additions and 73 deletions.
diff --git a/components/map/components/legend/components/layer-select-menu/component.jsx b/components/map/components/legend/components/layer-select-menu/component.jsx
@@ -1,6 +1,7 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { trackEvent } from 'utils/analytics';
+import { translateText } from 'utils/lang';
 
 import { Tooltip } from 'react-tippy';
 import Tip from 'components/ui/tip';
@@ -32,8 +33,10 @@ class LayerSelectMenu extends PureComponent {
       <div className={`c-layer-select-menu ${className || ''}`}>
         <div className="selector">
           <button onClick={() => this.setState({ menuActive: !menuActive })}>
-            {activeLayer.name}
-            <span className="citation">{activeLayer.citation}</span>
+            {translateText(activeLayer.name)}
+            <span className="citation">
+              {translateText(activeLayer.citation)}
+            </span>
             <Icon
               icon={arrowDownIcon}
               className={`icon-arrow ${menuActive ? 'reverse' : ''}`}

diff --git a/components/widgets/fires/burned-area-cumulative/selectors.js b/components/widgets/fires/burned-area-cumulative/selectors.js
@@ -16,6 +16,7 @@ import {
   getDatesData,
   getChartConfig,
 } from 'components/widgets/utils/data';
+import { localizeWidgetSentenceDate } from 'utils/localize-date';
 
 const getAlerts = (state) => state.data && state.data.alerts;
 const getLatest = (state) => state.data && state.data.latest;
@@ -32,6 +33,7 @@ const getSentences = (state) => state.sentences || null;
 const getLocationName = (state) => state.locationLabel;
 const getOptionsSelected = (state) => state.optionsSelected;
 const getIndicator = (state) => state.indicator;
+const getLanguage = (state) => state.lang;
 
 export const getCompareYears = createSelector(
   [getCompareYear, getAllYears],
@@ -405,6 +407,7 @@ export const parseSentence = createSelector(
     getStartIndex,
     getOptionsSelected,
     getIndicator,
+    getLanguage,
   ],
   (
     raw_data,
@@ -414,7 +417,8 @@ export const parseSentence = createSelector(
     location,
     startIndex,
     options,
-    indicator
+    indicator,
+    language
   ) => {
     if (!data || isEmpty(data)) return null;
     const { allBurnWithInd, allBurn, thresholdStatement } = sentences;
@@ -486,12 +490,12 @@ export const parseSentence = createSelector(
       thresh && thresh > 0
         ? sentence + thresholdStatement
         : sentence.concat('.');
-    const formattedData = moment(date).format('Do of MMMM YYYY');
+
     const params = {
       location,
       indicator: indicatorLabel,
       thresh: `${thresh}%`,
-      date: formattedData,
+      date: localizeWidgetSentenceDate(date, language),
       latestYear,
       dataset_start_year: 2001,
       maxYear,

diff --git a/components/widgets/fires/burned-area/selectors.js b/components/widgets/fires/burned-area/selectors.js
@@ -10,6 +10,9 @@ import groupBy from 'lodash/groupBy';
 import max from 'lodash/max';
 import min from 'lodash/min';
 
+import { translateText } from 'utils/lang';
+import { localizeWidgetSentenceDate } from 'utils/localize-date';
+
 import {
   getStatsData,
   getDatesData,
@@ -29,6 +32,7 @@ const getLocationName = (state) => state.locationLabel;
 const getLang = (state) => state.lang || null;
 const getOptionsSelected = (state) => state.optionsSelected;
 const getIndicator = (state) => state.indicator;
+const getLanguage = (state) => state.lang;
 
 const MINGAP = 4;
 
@@ -357,6 +361,7 @@ export const parseSentence = createSelector(
     getOptionsSelected,
     getLang,
     getIndicator,
+    getLanguage,
   ],
   (
     raw_data,
@@ -368,7 +373,8 @@ export const parseSentence = createSelector(
     indexes,
     options,
     lang,
-    indicator
+    indicator,
+    language
   ) => {
     if (!data || isEmpty(data)) return null;
     const {
@@ -420,30 +426,30 @@ export const parseSentence = createSelector(
     const seasonMonth = moment(seasonStartDate).format('MMMM');
     const seasonDay = parseInt(moment(seasonStartDate).format('D'), 10);
 
-    let seasonStatement = `late ${seasonMonth}`;
+    let seasonStatement = translateText('late {seasonMonth}', { seasonMonth });
     if (seasonDay <= 10) {
-      seasonStatement = `early ${seasonMonth}`;
+      seasonStatement = translateText('early {seasonMonth}', { seasonMonth });
     } else if (seasonDay > 10 && seasonDay <= 20) {
-      seasonStatement = `mid-${seasonMonth}`;
+      seasonStatement = translateText('mid-{seasonMonth}', { seasonMonth });
     }
 
     const total = sumBy(slicedData, 'count');
     const colorRange = colors.ramp;
     let statusColor = colorRange[8];
     const { date } = lastDate || {};
 
-    let status = 'unusually low';
+    let status = translateText('unusually low');
     if (variance > 2) {
-      status = 'unusually high';
+      status = translateText('unusually high');
       statusColor = colorRange[0];
     } else if (variance <= 2 && variance > 1) {
-      status = 'high';
+      status = translateText('high');
       statusColor = colorRange[2];
     } else if (variance <= 1 && variance > -1) {
-      status = 'normal';
+      status = translateText('normal');
       statusColor = colorRange[4];
     } else if (variance <= -1 && variance > -2) {
-      status = 'low';
+      status = translateText('low');
       statusColor = colorRange[6];
     }
 
@@ -458,16 +464,15 @@ export const parseSentence = createSelector(
         ? sentence + thresholdStatement
         : sentence.concat('.');
 
-    const formattedData = moment(date).format('Do of MMMM YYYY');
     const params = {
       location,
       indicator: indicatorLabel,
       thresh: `${thresh}%`,
-      date: formattedData,
+      date: localizeWidgetSentenceDate(date, language),
       fires_season_start: seasonStatement,
       fire_season_length: sortedPeakWeeks.length,
-      start_date: moment(firstDate.date).format('Do of MMMM YYYY'),
-      end_date: moment(lastDate.date).format('Do of MMMM YYYY'),
+      start_date: localizeWidgetSentenceDate(firstDate.date, language),
+      end_date: localizeWidgetSentenceDate(lastDate.date, language),
       dataset_start_year: 2001,
       dataset: 'MODIS',
       area: {

diff --git a/components/widgets/fires/fire-alerts-simple/selectors.js b/components/widgets/fires/fire-alerts-simple/selectors.js
@@ -2,8 +2,8 @@
 import { createSelector, createStructuredSelector } from 'reselect';
 import isEmpty from 'lodash/isEmpty';
 import { formatNumber } from 'utils/format';
-
-import moment from 'moment';
+import { translateText } from 'utils/lang';
+import { localizeWidgetSentenceDate } from 'utils/localize-date';
 
 // get list data
 const selectAlerts = (state) => state.data && state.data.alerts;
@@ -13,6 +13,7 @@ const getIndicator = (state) => state.indicator || null;
 const getSettings = (state) => state.settings || null;
 const getLocationName = (state) => state.locationLabel;
 const getDataset = (state) => state.settings.dataset || null;
+const getLanguage = (state) => state.lang;
 
 export const parseData = createSelector([selectAlerts], (data) => {
   if (isEmpty(data)) return null;
@@ -53,11 +54,15 @@ export const parseConfig = createSelector(
       highConfidenceAlertPercentage,
     } = data;
     const alertsLabel = indicator
-      ? `Other alerts in ${indicator.label}`
-      : 'Other alerts';
+      ? translateText('Other alerts in {indicatorLabel}', {
+          indicatorLabel: indicator.label,
+        })
+      : translateText('Other alerts');
     const highConfidenceAlertsLabel = indicator
-      ? `High confidence alerts in ${indicator.label}`
-      : 'High confidence alerts';
+      ? translateText('High confidence alerts in {indicatorLabel}', {
+          indicatorLabel: indicator.label,
+        })
+      : translateText('High confidence alerts');
 
     const highConfidenceColour = colors.main;
     const otherColour = colors.otherColor; // hslShift(mainColour)
@@ -89,13 +94,14 @@ export const parseSentence = createSelector(
     selectSentences,
     getIndicator,
     getLocationName,
+    getLanguage,
   ],
-  (data, dataset, settings, sentences, indicator, location) => {
+  (data, dataset, settings, sentences, indicator, location, language) => {
     if (!data) return null;
     const startDate = settings.startDate;
     const endDate = settings.endDate;
-    const formattedStartDate = moment(startDate).format('Do of MMMM YYYY');
-    const formattedEndDate = moment(endDate).format('Do of MMMM YYYY');
+    const formattedStartDate = localizeWidgetSentenceDate(startDate, language);
+    const formattedEndDate = localizeWidgetSentenceDate(endDate, language);
     const params = {
       indicator: indicator && indicator.label,
       location,

diff --git a/components/widgets/fires/fires-alerts-cumulative/selectors.js b/components/widgets/fires/fires-alerts-cumulative/selectors.js
@@ -16,6 +16,7 @@ import {
   getDatesData,
   getChartConfig,
 } from 'components/widgets/utils/data';
+import { localizeWidgetSentenceDate } from 'utils/localize-date';
 
 const getAlerts = (state) => state.data && state.data.alerts;
 const getLatest = (state) => state.data && state.data.latest;
@@ -33,6 +34,7 @@ const getLocationName = (state) => state.locationLabel;
 const getOptionsSelected = (state) => state.optionsSelected;
 const getIndicator = (state) => state.indicator;
 const getSettings = (state) => state.settings;
+const getLanguage = (state) => state.lang;
 
 export const getCompareYears = createSelector(
   [getCompareYear, getAllYears],
@@ -430,6 +432,7 @@ export const parseSentence = createSelector(
     getOptionsSelected,
     getIndicator,
     getSettings,
+    getLanguage,
   ],
   (
     raw_data,
@@ -441,7 +444,8 @@ export const parseSentence = createSelector(
     startIndex,
     options,
     indicator,
-    settings
+    settings,
+    language
   ) => {
     if (!data || isEmpty(data)) return null;
 
@@ -532,11 +536,10 @@ export const parseSentence = createSelector(
           : allAlertsWithInd;
     }
 
-    const formattedData = moment(date).format('Do of MMMM YYYY');
     const params = {
       location,
       indicator: indicatorLabel,
-      date: formattedData,
+      date: localizeWidgetSentenceDate(date, language),
       latestYear,
       dataset_start_year: dataset === 'viirs' ? 2012 : 2001,
       maxYear,

diff --git a/components/widgets/fires/fires-alerts-historical-daily/selectors.js b/components/widgets/fires/fires-alerts-historical-daily/selectors.js
@@ -6,6 +6,7 @@ import sumBy from 'lodash/sumBy';
 import sortBy from 'lodash/sortBy';
 
 import { getChartConfig } from 'components/widgets/utils/data';
+import { localizeWidgetSentenceDate } from 'utils/localize-date';
 
 const getAlerts = (state) => state.data;
 const getColors = (state) => state.colors || null;
@@ -16,6 +17,7 @@ const getSentences = (state) => state.sentences || null;
 const getLocationObject = (state) => state.location;
 const getOptionsSelected = (state) => state.optionsSelected;
 const getIndicator = (state) => state.indicator;
+const getLanguage = (state) => state.lang;
 
 const zeroFillDays = (startDate, endDate) => {
   const start = moment(startDate);
@@ -89,6 +91,7 @@ export const parseSentence = createSelector(
     getOptionsSelected,
     getIndicator,
     getSettings,
+    getLanguage,
   ],
   (
     data,
@@ -99,7 +102,8 @@ export const parseSentence = createSelector(
     endDate,
     options,
     indicator,
-    settings
+    settings,
+    language
   ) => {
     if (!data) return null;
     const { initial, withInd, highConfidence } = sentences;
@@ -128,8 +132,8 @@ export const parseSentence = createSelector(
     const params = {
       location: location.label || '',
       indicator: indicatorLabel,
-      start_date: moment(startDate).format('Do of MMMM YYYY'),
-      end_date: moment(endDate).format('Do of MMMM YYYY'),
+      start_date: localizeWidgetSentenceDate(startDate, language),
+      end_date: localizeWidgetSentenceDate(endDate, language),
       dataset: dataset && dataset.label,
       total_alerts: {
         value: total ? formatNumber({ num: total, unit: ',' }) : 0,

diff --git a/components/widgets/fires/fires-alerts-historical-weekly/selectors.js b/components/widgets/fires/fires-alerts-historical-weekly/selectors.js
@@ -6,6 +6,8 @@ import isEmpty from 'lodash/isEmpty';
 import sumBy from 'lodash/sumBy';
 import sortBy from 'lodash/sortBy';
 
+import { localizeWidgetSentenceDate } from 'utils/localize-date';
+
 import { getChartConfig, getDatesData } from 'components/widgets/utils/data';
 
 const getAlerts = (state) => state.data && state.data.alerts;
@@ -17,6 +19,7 @@ const getOptionsSelected = (state) => state.optionsSelected;
 const getIndicator = (state) => state.indicator;
 const getStartIndex = (state) => state.settings.startIndex;
 const getEndIndex = (state) => state.settings.endIndex || null;
+const getLanguage = (state) => state.lang;
 
 const INITIAL_WINDOW_WEEKS = 3 * 52 + 1;
 
@@ -223,8 +226,9 @@ export const parseSentence = createSelector(
     getLocationObject,
     getOptionsSelected,
     getIndicator,
+    getLanguage,
   ],
-  (data, colors, sentences, location, options, indicator) => {
+  (data, colors, sentences, location, options, indicator, language) => {
     if (!data || !data.length) return null;
     const { initial, withInd, highConfidence } = sentences;
     const { confidence, dataset } = options;
@@ -244,8 +248,8 @@ export const parseSentence = createSelector(
     const params = {
       location: location.label || '',
       indicator: indicatorLabel,
-      start_date: moment(startDate).format('Do of MMMM YYYY'),
-      end_date: moment(endDate).format('Do of MMMM YYYY'),
+      start_date: localizeWidgetSentenceDate(startDate, language),
+      end_date: localizeWidgetSentenceDate(endDate, language),
       dataset: dataset && dataset.label,
       total_alerts: {
         value: total ? formatNumber({ num: total, unit: ',' }) : 0,

diff --git a/components/widgets/fires/fires-alerts-historical/selectors.js b/components/widgets/fires/fires-alerts-historical/selectors.js
@@ -5,6 +5,8 @@ import isEmpty from 'lodash/isEmpty';
 import sumBy from 'lodash/sumBy';
 import sortBy from 'lodash/sortBy';
 
+import { localizeWidgetSentenceDate } from 'utils/localize-date';
+
 import { getChartConfig } from 'components/widgets/utils/data';
 
 const getAlerts = (state) => state.data && state.data.alerts;
@@ -17,6 +19,7 @@ const getOptionsSelected = (state) => state.optionsSelected;
 const getIndicator = (state) => state.indicator;
 const getStartIndex = (state) => state.settings.startIndex;
 const getEndIndex = (state) => state.settings.endIndex || null;
+const getLanguage = (state) => state.lang;
 
 const zeroFillDays = (startDate, endDate) => {
   const start = moment(startDate);
@@ -164,8 +167,9 @@ export const parseSentence = createSelector(
     getLocationObject,
     getOptionsSelected,
     getIndicator,
+    getLanguage,
   ],
-  (data, colors, sentences, location, options, indicator) => {
+  (data, colors, sentences, location, options, indicator, language) => {
     if (!data || !data.length) return null;
     const { initial, withInd, highConfidence } = sentences;
     const { confidence, dataset } = options;
@@ -185,14 +189,15 @@ export const parseSentence = createSelector(
     const params = {
       location: location.label || '',
       indicator: indicatorLabel,
-      start_date: moment(startDate).format('Do of MMMM YYYY'),
-      end_date: moment(endDate).format('Do of MMMM YYYY'),
+      start_date: localizeWidgetSentenceDate(startDate, language),
+      end_date: localizeWidgetSentenceDate(endDate, language),
       dataset: dataset && dataset.label,
       total_alerts: {
         value: total ? format(',')(total) : 0,
         color: colors.main,
       },
     };
+
     return { sentence, params };
   }
 );