Merge pull request #505 from onaio/dashboard-translations

Dashboard translations

Author: kahummer

docs/translations/README.md

@@ -0,0 +1,59 @@
+# Translation Docs
+
+This directory contains documentation on translation configs and dependencies.
+
+## Translation Switcher
+
+All language configs reside inside APP object and will be responsible for driving the translation switcher.
+
+```json
+"languageSwitcherConfigs": {
+            "English": {
+                "param": "en"
+            },
+            "ជនជាតិខ្មែរ": {
+                "param": "khmer"
+            }
+        },
+```
+
+You can have the translation switcher on the map or have it on the superset iframe views. To choose this set this flag accordingly.
+
+```json
+"mapLanguageTranslation": false,
+```
+
+## Components Translations
+
+A look up object will be responsible for handling the various translations. The strings for the various components will reside in the languageTranslation object keyed by the language with the translations for the various strings as values.
+
+NB - The language key in languageTranslation object must match param value provided on languageSwitcherConfigs params.
+
+All components i.e legend, titlebar, layers, menu sections or subsections will require the entire string to be translated added to the lookup object, except for the popup which will require every individual string to be added on the lookup object.
+
+### Iframe translations
+
+The Iframe translation currently works by switching the iframe link and can be added to the languageTranslations lookup object as shown below
+
+```json
+"languageTranslations": {
+            "khmer": {
+                // Provide the full string for layers, titlebar, menu section and subsections.
+                "Domain 2: Capacity of the child protection system": "ជនជាតិខ្មែរ ជនជាតិខ្មែរ ជនជាតិខ្មែរ",
+                "Indicator 2.2 RCFs ": "ជនជាតិខ្មែរ ជនជាតិខ្មែរ",
+                "RCI": "ជនជា",
+                "Number of RCIs in the country (all residential care facilities)": "ជនជាតិខ្មែរ ជនជាតិខ្មែរ ជនជាតិខ្មែរ ជនជាតិខ្មែរ ជនជាតិខ្មែរ ជនជាតិខ្មែរ",
+                " Source: Inspection Database, 2018": "ជនជាតិខ្មែរ ជនជាតិខ្មែរ តិខ្មែរ ជនជា តិខ្មែរ",
+                // replace current iframe with the translated kind
+                "splashPage": {
+                    "link": "https://discover.ona.io/superset/dashboard/517/?standalone=true"
+                },
+                "Cambodia Child Protection Profile 2018": "ជនជាតិខ្មែរ",
+                // titlebar strings
+                "Powered by": "ជនជាតិខ្មែរ",
+                "Data Map": "ជនជា",
+                // popup strings (must be supplied individually)
+                "Mondul": "ជនជា"
+            }
+        },
+```

package.json

@@ -77,6 +77,7 @@
     "d3": "^4.13.0",
     "highcharts": "^6.0.4",
     "history": "^4.9.0",
+    "html2plaintext": "2.0.0",
     "i": "^0.3.6",
     "js-cookie": "^2.2.0",
     "jsx-loader": "^0.13.2",

src/index.js

@@ -80,5 +80,7 @@ gisida.localStorage = {};
 gisida.localStorage.loadState = require('./utils/localStorage').loadState;
 gisida.localStorage.saveState = require('./utils/localStorage').saveState;
 gisida.isTokenExpired = require('./utils/isTokenExpired').default;
+gisida.translationHook = require('./utils/translationHook').default;
+gisida.htmlTextTranslations = require('./utils/htmlTextTranslations').default;
 
 module.exports = gisida;

src/map/addPopUp.js

@@ -1,5 +1,6 @@
 import Mustache from 'mustache';
 import { getCurrentState } from '../store/actions/actions';
+import htmlTextTranslations from '../utils/htmlTextTranslations';
 import commaFormatting from './../utils/commaFormatting';
 
 /**
@@ -24,7 +25,8 @@ export default function addMousemoveEvent(mapId, mapboxGLMap, dispatch) {
     popup.remove();
     // Get layers from current state
     const currentState = dispatch(getCurrentState());
-    const { layers, timeseries, activeLayerId } = currentState[mapId];
+    const { layers, timeseries, activeLayerId, } = currentState[mapId];
+    const { APP: { languageTranslations }, CURRENTLANGUAGE } = currentState;
     // Generate list of active layers
     const activeLayers = [];
     Object.keys(layers).forEach(key => {
@@ -253,6 +255,8 @@ export default function addMousemoveEvent(mapId, mapboxGLMap, dispatch) {
 
     // Add popup if content exists
     if (content) {
+      /** Translate popup Values */
+      content = htmlTextTranslations(content, true, languageTranslations, CURRENTLANGUAGE)
       popup
         .setLngLat(map.unproject(e.point))
         .setHTML(content)

src/store/actions/actions.js

@@ -340,6 +340,14 @@ export const buildCategories = (groups, mapLayers) => ({
   mapLayers,
 });
 
+export const setLanguage = (mapId, language) => {
+  return { 
+    type: types.SET_LANGUAGE,
+    language,
+    mapId
+  }
+};
+
 export default {
   initApp,
   initStyles,
@@ -389,4 +397,5 @@ export default {
   fetchFormsError,
   logoutUser,
   buildCategories,
+  setLanguage,
 };

src/store/constants/actionTypes.js

@@ -29,6 +29,7 @@ export const TOGGLE_MENU = 'TOGGLE_MENU';
 export const RESET_FILTERED_LAYER = 'RESET_FILTERED_LAYER';
 export const TOGGLE_CATEGORIES = 'TOGGLE_CATEGORIES';
 export const BUILD_CATEGORIES = 'BUILD_CATEGORIES';
+export const SET_LANGUAGE = 'SET_LANGUAGE';
 
 // Auth action types
 export const INIT_AUTH = 'INIT_AUTH';

src/store/initStore.js

@@ -14,6 +14,7 @@ import {
   MAP,
   AUTH,
   CATEGORIES,
+  CURRENTLANGUAGE
 } from './reducers';
 
 import { loadJSON } from '../utils/files';
@@ -32,6 +33,7 @@ const defaultReducers = {
   AUTH,
   'map-1': MAP,
   CATEGORIES,
+  CURRENTLANGUAGE
 };
 
 /**

src/store/reducers/index.js

@@ -9,3 +9,4 @@ export { default as SUPERSET_CONFIGS } from './superset-config';
 export { default as MAP } from './map/';
 export { default as AUTH } from './auth';
 export { default as CATEGORIES } from './categories';
+export { default as CURRENTLANGUAGE } from './language'; 

src/store/reducers/language.js

@@ -0,0 +1,15 @@
+import { SET_LANGUAGE } from '../constants/actionTypes';
+
+export default function CURRENTLANGUAGE(state = {}, action) {
+  switch (action.type) {
+    case SET_LANGUAGE: {
+      return {
+        ...state,
+        ...action.language,
+        mapId: action.mapId,
+      };
+    }
+    default:
+      return state;
+  }
+}

src/types/actionsInterface.ts

@@ -47,4 +47,5 @@ export interface Actions {
     locationUpdated(MapId:string):AnyAction;
     setLocation(mapId:string, loc:any):AnyAction;
     toggleMapLocation(loc:any):AnyAction;
+    setLanguage(mapId:string, language:any):AnyAction;
 }