feat: add composite stats column

For #348. Came out of phetsims/qa#869.
phetsims · Feb 8, 2023 · be0eb18 · be0eb18
1 parent 9c142f6
commit be0eb18
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 27 deletions.
diff --git a/src/client/components/StatsInfoButton.jsx b/src/client/components/StatsInfoButton.jsx
@@ -8,7 +8,18 @@
 
 import infoCircle from '../img/info-circle.svg';
 
-const StatsInfoButton = ( { statsString } ) => {
+const StatsInfoButton = ( { reportObject } ) => {
+  const hasSharedStrings = reportObject.numSharedStrings !== null;
+  let sharedStatsString = 'N/A';
+  if ( hasSharedStrings ) {
+    sharedStatsString = `${reportObject.percentShared}% (${reportObject.numSharedTranslatedStrings} of ${reportObject.numSharedStrings})`;
+  }
+  const simSpecificStatsString = `${reportObject.percentSimSpecific}% (${reportObject.numSimSpecificTranslatedStrings} of ${reportObject.numSimSpecificStrings})`;
+  const commonStatsString = `${reportObject.percentCommon}% (${reportObject.numCommonTranslatedStrings} of ${reportObject.numCommonStrings})`;
+  const statsString = `Statistics for ${reportObject.simTitle}:
+      Sim-Specific Strings: ${simSpecificStatsString}  
+      Shared Strings: ${sharedStatsString}
+      Common Strings: ${commonStatsString}`;
   const buttonStyle = {
     marginRight: '6px',
     padding: '0'

diff --git a/src/client/components/TranslationReportTable.jsx b/src/client/components/TranslationReportTable.jsx
@@ -86,7 +86,7 @@ const TranslationReportTable = ( { locale, localeName, wantsUntranslated } ) =>
           <th>Translated Strings
             {
               reportPopulated && reportRows.length > 1
-              ? <SortButton onClick={() => handleSortButtonClick( 'gonna need to change this' )}/>
+              ? <SortButton onClick={() => handleSortButtonClick( SortKeyEnum.TOTAL_STRINGS )}/>
               : <></>
             }
           </th>

diff --git a/src/client/js/SortKeyEnum.js b/src/client/js/SortKeyEnum.js
@@ -10,7 +10,7 @@
 
 const SortKeyEnum = {
   SIM_TITLE: [ 'simTitle' ],
-  TOTAL_STRINGS: [ 'percentTotal, totalTranslatedStrings' ],
+  TOTAL_STRINGS: [ 'percentTotal', 'totalStrings' ],
   SIM_SPECIFIC_PERCENT: [ 'percentSimSpecific', 'numSimSpecificStrings' ],
   COMMON_PERCENT: [ 'percentCommon', 'numCommonStrings' ],
   SHARED_PERCENT: [ 'percentShared', 'numSharedStrings' ]

diff --git a/src/client/jsx/getSortedTranslationReportRows.jsx b/src/client/jsx/getSortedTranslationReportRows.jsx
@@ -10,9 +10,9 @@
 import { Link } from 'react-router-dom';
 import getMinutesElapsed from '../../common/getMinutesElapsed.js';
 import publicConfig from '../../common/publicConfig.js';
+import StatsInfoButton from '../components/StatsInfoButton.jsx';
 import alertErrorMessage from '../js/alertErrorMessage.js';
 import SortDirectionEnum from '../js/SortDirectionEnum.js';
-import SortKeyEnum from '../js/SortKeyEnum.js';
 
 /**
  * Return an array of translation report objects (i.e. stats used to make translation report rows) that have
@@ -163,18 +163,13 @@ const getSortedTranslationReportRows = (
       pendingUpdate = '(pending update) ';
     }
 
-    const hasSharedStrings = item.numSharedStrings !== null;
-    let sharedJsx = <td>N/A</td>;
-    if ( hasSharedStrings ) {
-      sharedJsx = <td>{pendingUpdate}{item[ SortKeyEnum.SHARED_PERCENT[ 0 ] ]}% ({item.numSharedTranslatedStrings} of {item.numSharedStrings})</td>;
-    }
-
     translationReportJsx.push(
       <tr key={item.simName}>
-        <td><Link to={`/translate/${locale}/${item.simName}`}>{item.simTitle}</Link></td>
-        <td>{pendingUpdate}{item[ SortKeyEnum.SIM_SPECIFIC_PERCENT[ 0 ] ]}% ({item.numSimSpecificTranslatedStrings} of {item.numSimSpecificStrings})</td>
-        {sharedJsx}
-        <td>{pendingUpdate}{item[ SortKeyEnum.COMMON_PERCENT[ 0 ] ]}% ({item.numCommonTranslatedStrings} of {item.numCommonStrings})</td>
+        <td><Link to={`/translate/${locale}/${item.simName}`}>{item.simTitle}</Link>{pendingUpdate}</td>
+        <td>
+          <StatsInfoButton reportObject={item}/>
+          {item.percentTotal}% ({item.totalTranslatedStrings} of {item.totalStrings})
+        </td>
       </tr>
     );
   }

diff --git a/src/client/jsx/getTranslationReportRows.jsx b/src/client/jsx/getTranslationReportRows.jsx
@@ -75,24 +75,12 @@ const getTranslationReportRows = (
       pendingUpdate = ' (pending update)';
     }
 
-    // Create the row JSX.
-    const hasSharedStrings = reportObject.numSharedStrings !== null;
-    let sharedStatsString = 'N/A';
-    if ( hasSharedStrings ) {
-      sharedStatsString = `${reportObject.percentShared}% (${reportObject.numSharedTranslatedStrings} of ${reportObject.numSharedStrings})`;
-    }
-    const simSpecificStatsString = `${reportObject.percentSimSpecific}% (${reportObject.numSimSpecificTranslatedStrings} of ${reportObject.numSimSpecificStrings})`;
-    const commonStatsString = `${reportObject.percentCommon}% (${reportObject.numCommonTranslatedStrings} of ${reportObject.numCommonStrings})`;
-    const statsString = `Statistics for ${reportObject.simTitle}:
-      Sim-Specific Strings: ${simSpecificStatsString}  
-      Shared Strings: ${sharedStatsString}
-      Common Strings: ${commonStatsString}`;
     if ( Object.keys( translationReportJsx ).includes( reportObject.simName ) ) {
       translationReportJsx[ reportObject.simName ] = (
         <tr key={reportObject.simName}>
           <td><Link to={`/translate/${locale}/${reportObject.simName}`}>{reportObject.simTitle}</Link>{pendingUpdate}</td>
           <td>
-            <StatsInfoButton statsString={statsString}/>
+            <StatsInfoButton reportObject={reportObject}/>
             {reportObject.percentTotal}% ({reportObject.totalTranslatedStrings} of {reportObject.totalStrings})
           </td>
         </tr>