[dashboard/statistics] Translate Recruitment widget (#10059)

This translates the recruitment widget (the last widget) on the LORIS
dashboard, so that the entire dashboard is now translated (The
recruitment widget had been waiting on #9937 to be merged before
translating it.). Japanese is used as a test language.

It also fixes a regression on the study progression translation
introduced by #9937 as new filters that are shared between the two were
added.

Author: driusan

locale/ja/LC_MESSAGES/loris.po

@@ -232,6 +232,9 @@ msgstr "詳細フィルターを非表示"
 msgid "Language"
 msgstr "言語"
 
+msgid "Ethnicity"
+msgstr "民族"
+
 # Data table strings
 msgid "{{pageCount}} rows displayed of {{totalCount}}."
 msgstr "{{totalCount}}行中{{pageCount}}行を表示"
@@ -332,3 +335,8 @@ msgstr "{{months}}ヶ月"
 
 msgid "{{years}} years old"
 msgstr "{{years}}歳"
+
+# Other generic terms
+msgid "Loading..."
+msgstr "読み込み中..."
+

locale/loris.pot

@@ -231,6 +231,9 @@ msgstr ""
 msgid "Language"
 msgstr ""
 
+msgid "Ethnicity"
+msgstr ""
+
 # Data table strings
 msgid "{{pageCount}} rows displayed of {{totalCount}}."
 msgstr ""
@@ -331,3 +334,8 @@ msgstr ""
 
 msgid "{{years}} years old"
 msgstr ""
+
+# Other generic terms
+msgid "Loading..."
+msgstr ""
+

modules/dashboard/test/DashboardTest.php

@@ -409,17 +409,17 @@ public function testDashboardRecruitmentView()
             )
         )->getText();
 
-        $this->assertStringContainsString("Recruitment - overall", $assertText1);
+        $this->assertStringContainsString("Recruitment — Overall", $assertText1);
         $this->assertStringContainsString(
-            "Recruitment - site breakdown",
+            "Recruitment — Site Breakdown",
             $assertText2
         );
         $this->assertStringContainsString(
-            "Recruitment - project breakdown",
+            "Recruitment — Project Breakdown",
             $assertText3
         );
         $this->assertStringContainsString(
-            "Recruitment - cohort breakdown",
+            "Recruitment — Cohort Breakdown",
             $assertText4
         );
     }

modules/statistics/jsx/WidgetIndex.js

@@ -61,6 +61,7 @@ const WidgetIndex = (props) => {
                       }
                     );
                     setupCharts(
+                      t,
                       false,
                       {
                         [section]: {
@@ -86,6 +87,7 @@ const WidgetIndex = (props) => {
             onClick ={() => {
               setModalChart(chartDetails[section][chartID]);
               setupCharts(
+                t,
                 true,
                 {
                   [section]:
@@ -185,7 +187,7 @@ const WidgetIndex = (props) => {
     setChartDetails
   ) => {
     // Unload all charts in the section first
-    unloadCharts(chartDetails, section);
+    unloadCharts(t, chartDetails, section);
 
     // Clear cached data from chartDetails to prevent old data from showing
     let clearedChartDetails = {...chartDetails};
@@ -215,7 +217,9 @@ const WidgetIndex = (props) => {
           ...clearedChartDetails[section][chart],
           filters: queryString,
         };
-        const chartPromise = setupCharts(false,
+        const chartPromise = setupCharts(
+          t,
+          false,
           {[section]: {[chart]: newChart}},
           t('Total', {ns: 'loris'}),
         ).then(

modules/statistics/jsx/widgets/helpers/chartBuilder.js

@@ -107,7 +107,7 @@ const createPieChart = (columns, id, targetModal, colours) => {
   return newChart;
 }
 
-const createBarChart = (labels, columns, id, targetModal, colours, dataType) => {
+const createBarChart = (t, labels, columns, id, targetModal, colours, dataType) => {
   let newChart = c3.generate({
     bindto: targetModal ? targetModal : id,
     data: {
@@ -134,7 +134,7 @@ const createBarChart = (labels, columns, id, targetModal, colours, dataType) =>
       },
       y: {
         label: {
-          text: 'Candidates registered',
+          text: t('Candidates registered', { ns: 'statistics'}),
           position: 'inner-top'
         },
       },
@@ -254,10 +254,11 @@ const getChartData = async (target, filters) => {
 
 /**
  * unloadCharts - unload all charts in a section to clear their data
+ * @param {t} The i18next translation callback
  * @param {object} chartDetails
  * @param {string} section
  */
-const unloadCharts = (chartDetails, section) => {
+const unloadCharts = (t, chartDetails, section) => {
   Object.keys(chartDetails[section]).forEach((chartID) => {
     const chart = chartDetails[section][chartID].chartObject;
     if (chart && typeof chart.unload === 'function') {
@@ -266,7 +267,7 @@ const unloadCharts = (chartDetails, section) => {
     // Clear the chart container completely
     const element = document.getElementById(chartID);
     if (element) {
-      element.innerHTML ='<p>Loading...</p>';
+      element.innerHTML ='<p>' + t('Loading...', {ns: 'loris'}) + '</p>';
     }
   });
 };
@@ -278,7 +279,7 @@ const unloadCharts = (chartDetails, section) => {
  * This is determined by the original chart type of the data provided from the API
  * If data was provided as a Pie, and the requested chartType is Bar, then the data will be reformatted
  */
-const setupCharts = async (targetIsModal, chartDetails, totalLabel) => {
+const setupCharts = async (t, targetIsModal, chartDetails, totalLabel) => {
   const chartPromises = [];
   let newChartDetails = {...chartDetails}
   Object.keys(chartDetails).forEach((section) => {
@@ -314,7 +315,7 @@ const setupCharts = async (targetIsModal, chartDetails, totalLabel) => {
           if (chart.chartType === 'pie') {
             chartObject = createPieChart(columns, `#${chartID}`, targetIsModal && '#dashboardModal', colours);
           } else if (chart.chartType === 'bar') {
-            chartObject = createBarChart(labels, columns, `#${chartID}`, targetIsModal && '#dashboardModal', colours, chart.dataType);
+            chartObject = createBarChart(t, labels, columns, `#${chartID}`, targetIsModal && '#dashboardModal', colours, chart.dataType);
           } else if (chart.chartType === 'line') {
             chartObject = createLineChart(chartData, columns, `#${chartID}`, chart.label, targetIsModal && '#dashboardModal', chart.titlePrefix);
           }
@@ -382,4 +383,4 @@ export {
   // recruitment.js and studyProgression.js
   setupCharts,
   unloadCharts,
-};
+};

modules/statistics/jsx/widgets/helpers/progressbarBuilder.js

@@ -1,10 +1,11 @@
 /**
  * progressBarBuilder - generates the graph content.
  *
- * @param  {object} data - data needed to generate the graph content.
+ * @param {function} t - i18next React translation callback
+ * @param {object} data - data needed to generate the graph content.
  * @return {JSX.Element} the charts to render to the widget panel.
  */
-const progressBarBuilder = (data) => {
+const progressBarBuilder = (t, data) => {
   let title;
   let content;
   title = <h5>
@@ -54,14 +55,23 @@ const progressBarBuilder = (data) => {
               </div>
           }
           <p className ='pull-right small target'>
-        Target: {data['recruitment_target']}
+            {t(
+              'Target: {{target}}',
+              {'target': data['recruitment_target'], 'ns': 'statistics'}
+            )}
           </p>
         </div>
         {
           data['recruitment_target'] &&
             <small>
-              Recruitment target of {data['recruitment_target']} was reached.
-              {' '}{data['total_recruitment']} total participants.
+              {t(
+                'Recruitment target of {{target}} was reached.',
+                {'target': data['recruitment_target'], 'ns': 'statistics'}
+              )}
+              {' '}{t(
+                '{{total}} total participants.',
+                {'total': data['total_recruitment'], 'ns': 'statistics'}
+              )}
             </small>
         }
       </div>
@@ -112,18 +122,27 @@ const progressBarBuilder = (data) => {
           {
             data['recruitment_target'] ?
               <p className ='pull-right small target'>
-                Target: {data['recruitment_target']}
+                {t(
+                  'Target: {{target}}',
+                  {'target': data['recruitment_target'], 'ns': 'statistics'}
+                )}
               </p>
               : <p className ='pull-right small target'>
-                No target set
+                {t('No target set', {ns: 'statistics'})}
               </p>
           }
         </div>
         {
           data['recruitment_target'] &&
             <small>
-            Recruitment target of {data['recruitment_target']} not reached.
-              {' '}{data['total_recruitment']} total participants.
+              {t(
+                'Recruitment target of {{target}} was not reached.',
+                {'target': data['recruitment_target'], 'ns': 'statistics'}
+              )}
+              {' '}{t(
+                '{{total}} total participants.',
+                {'total': data['total_recruitment'], 'ns': 'statistics'}
+              )}
             </small>
         }
       </>

modules/statistics/jsx/widgets/helpers/queryChartForm.js

@@ -90,7 +90,7 @@ const QueryChartForm = (props) => {
               {t('Project', {ns: 'loris'})}</label>
             <SelectElement
               name ='selectedProjects'
-              options ={{__clear__: '-- Clear Selection --',
+              options ={{__clear__: clearSelection,
                 ...options.projects}}
               multiple ={true}
               emptyOption ={false}
@@ -110,7 +110,7 @@ const QueryChartForm = (props) => {
           <div>
             <label style ={{fontWeight: 'bold',
               marginBottom: '5px',
-              display: 'block'}}>{t('Cohort', {ns: 'loris'})}</label>
+              display: 'block'}}>{t('Cohort', {ns: 'loris', count: 1})}</label>
             <SelectElement
               name ='selectedCohorts'
               options ={{__clear__: clearSelection,
@@ -155,7 +155,7 @@ const QueryChartForm = (props) => {
           <div>
             <label style ={{fontWeight: 'bold',
               marginBottom: '5px',
-              display: 'block'}}>Visit</label>
+              display: 'block'}}>{t('Visit', {ns: 'loris'})}</label>
             <SelectElement
               name ='selectedVisits'
               options ={{__clear__: clearSelection,
@@ -203,7 +203,8 @@ const QueryChartForm = (props) => {
         <div>
           <label style ={{fontWeight: 'bold',
             marginBottom: '5px',
-            display: 'block'}}>Date Registered</label>
+            display: 'block'}}>
+            {t('Date Registered', {ns: 'statistics'})}</label>
           <DateElement
             name='dateRegisteredStart'
             value={formDataObj['dateRegisteredStart'] || ''}
@@ -213,7 +214,7 @@ const QueryChartForm = (props) => {
             style={{width: '100%', padding: '8px',
               borderRadius: '5px',
               border: '1px solid #ccc'}}
-            label={'Range Start'}
+            label={t('Range Start', {ns: 'statistics'})}
           />
           <DateElement
             name='dateRegisteredEnd'
@@ -224,7 +225,7 @@ const QueryChartForm = (props) => {
             style={{width: '100%', padding: '8px',
               borderRadius: '5px',
               border: '1px solid #ccc'}}
-            label={'Range End'}
+            label={t('Range End', {ns: 'statistics'})}
           />
         </div>
       </div>