internationalize numbers format

medialab · Aug 14, 2024 · d7c09e0 · d7c09e0
1 parent 2f76179
commit d7c09e0
Show file tree

Hide file tree

Showing 14 changed files with 63 additions and 86 deletions.
diff --git a/src/components/AlluvialImportExport/AlluvialImportExport.js b/src/components/AlluvialImportExport/AlluvialImportExport.js
@@ -560,7 +560,7 @@ export default function AlluvialImportExport({
 
                 {isTooSmallForText === false &&
                   <text x={-5} y={5} className="number-label left">
-                    {formatNumber(value) + ' lt.'}
+                    {formatNumber(value, lang) + ' lt.'}
                   </text>
                 }
               </g>
@@ -675,7 +675,7 @@ export default function AlluvialImportExport({
                       </>
 
                   }
-                  {isTooSmallForText === false && <text x={5} y={5} className="number-label right">{`${formatNumber(value)} lt. ${isFraude ? ' (fraude ?)' : ''}`}</text>}
+                  {isTooSmallForText === false && <text x={5} y={5} className="number-label right">{`${formatNumber(value, lang)} lt. ${isFraude ? ' (fraude ?)' : ''}`}</text>}
                 </g>
               )
             })

diff --git a/src/components/RadarChart/VisObject.js b/src/components/RadarChart/VisObject.js
@@ -106,7 +106,7 @@ const VisObject = ({
           })
           .map(([key, portion]) => `
             <li>
-              <strong>${key}</strong> : <strong>${(portion * 100).toFixed(2)}% (${formatNumber(absoluteData[key])} lt)</strong>
+              <strong>${key}</strong> : <strong>${(portion * 100).toFixed(2)}% (${formatNumber(absoluteData[key], lang)} lt)</strong>
             </li>
           `).join('\n')
         }

diff --git a/src/components/TradeDynamicsChart/LongitudinalTradeChart.js b/src/components/TradeDynamicsChart/LongitudinalTradeChart.js
@@ -8,36 +8,10 @@ import cx from "classnames";
 import ReactTooltip from "react-tooltip";
 
 import colorsPalettes from "../../utils/colorPalettes";
-import { fixSvgDimension } from "../../utils/misc";
+import { fixSvgDimension, formatNumber } from "../../utils/misc";
 
 const {marseilleColor} = colorsPalettes;
 
-/**
- * Improve the display of numbers
- * @param {string|number} str - the number to prettify
- * @returns {string}
- */
-const prettifyValue = (str) => {
-  const inted = Math.round(+str) + "";
-  let finalStr = "";
-  let count = 0;
-  for (let i = inted.length - 1; i >= 0; i--) {
-    const char = inted[i];
-    count++;
-
-    finalStr = char + finalStr;
-    if (count === 3) {
-      count = 0;
-      finalStr = " " + finalStr;
-    }
-  }
-  if (finalStr[0] === ",") {
-    finalStr = finalStr.slice(1);
-  }
-
-  return finalStr;
-};
-
 /**
  * Displays a double diagram displaying a histogram and a linechart, with optional additional annotations
  * @param {array} data
@@ -88,6 +62,7 @@ const LongitudinalTradeChart = ({
   colorScaleMessages,
   annotations = [],
   margins,
+  lang,
 }) => {
   const data = useMemo(
     () =>
@@ -441,8 +416,8 @@ const LongitudinalTradeChart = ({
                         r: width * 0.005,
                       }}
                       fill={"transparent"}
-                      data-tip={`${datum.year} : <strong>${prettifyValue(
-                        +datum[absoluteField]
+                      data-tip={`${datum.year} : <strong>${formatNumber(
+                        parseInt(+datum[absoluteField]), lang
                       )}</strong> livres tournois.`}
                       data-for={cityName}
                       data-class="bar-tooltip"
@@ -508,12 +483,12 @@ const LongitudinalTradeChart = ({
                         stroke={colorsPalettes.generic.accent1}
                         title={`${datum.year}-${next.year}`}
                         strokeWidth={2}
-                        data-tip={`${datum.year} → <strong>${prettifyValue(
-                          +datum[absoluteField]
+                        data-tip={`${datum.year} → <strong>${formatNumber(
+                          parseInt(+datum[absoluteField]), lang
                         )}</strong> livres tournois <br/>${
                           next.year
-                        } → <strong>${prettifyValue(
-                          +next[absoluteField]
+                        } → <strong>${formatNumber(
+                          parseInt(+next[absoluteField]), lang
                         )}</strong> livres tournois<br/><i>(${
                           ratio > 0 ? "+" : ""
                         }${Math.round(ratio * 100)}%)</i>`}

diff --git a/src/components/TradeDynamicsChart/TradeDynamicsChart.js b/src/components/TradeDynamicsChart/TradeDynamicsChart.js
@@ -184,6 +184,7 @@ const TradeDynamicsChart = (props) => {
             {...{
               startYear,
               endYear,
+              lang,
             }}
           />
         );
@@ -227,6 +228,7 @@ const TradeDynamicsChart = (props) => {
             {...{
               startYear,
               endYear,
+              lang
             }}
           />
         );

diff --git a/src/visualizations/EffetsGuerreSurLevant/EffetsGuerreSurLevant.js b/src/visualizations/EffetsGuerreSurLevant/EffetsGuerreSurLevant.js
@@ -124,15 +124,15 @@ export default function EffetsGuerreSurLevant({
             title: translate('EffetsGuerreSurLevant', 'top-y-axis', lang),
             // tickSpan: 100000000,
             // domain: [0, 200000000],
-            tickFormat: d => formatNumber(d) + ' lt.'
+            tickFormat: d => formatNumber(d, lang) + ' lt.'
           },
           tooltip: d => translate('EffetsGuerreSurLevant', 'top-tooltip', lang, {
             year: d.year,
-            value: formatNumber(parseInt(d.value)),
+            value: formatNumber(parseInt(d.value), lang),
             particule: d.group === 'total' ? 'au' : 'de',
             group: d.group
           })
-          // `En ${d.year}, Marseille a importé ${formatNumber(parseInt(d.value))} lt. depuis les partenaires ${d.group === 'total' ? 'au' : 'de'} ${d.group}`
+          // `En ${d.year}, Marseille a importé ${formatNumber(parseInt(d.value, lang))} lt. depuis les partenaires ${d.group === 'total' ? 'au' : 'de'} ${d.group}`
         }
         }
       />

diff --git a/src/visualizations/ExportationsSudEst/ExportationsSudEst.js b/src/visualizations/ExportationsSudEst/ExportationsSudEst.js
@@ -296,7 +296,7 @@ export default function ExportationsSudEst({
                         y={0}
                         fontSize={nationalFontScale(value)}
                       >
-                        {label === 'inconnue' ? translate('exportations-sud-est', 'unknown', lang) : label} ({formatNumber(parseInt(value))} lt.)
+                        {label === 'inconnue' ? translate('exportations-sud-est', 'unknown', lang) : label} ({formatNumber(parseInt(value), lang)} lt.)
                       </Text>
                     </G>
                     : null
@@ -347,7 +347,7 @@ export default function ExportationsSudEst({
                         y={0}
                         fontSize={localFontScale(value)}
                       >
-                        {label} ({formatNumber(parseInt(value))} lt.)
+                        {label} ({formatNumber(parseInt(value), lang)} lt.)
                       </Text>
                     </G>
                     : null

diff --git a/src/visualizations/GuerreEtCroissance/GuerreEtCroissance.js b/src/visualizations/GuerreEtCroissance/GuerreEtCroissance.js
@@ -98,28 +98,28 @@ export default function GuerreEtCroissance({
       id: 'carrière',
       source: 'Carriere',
       label: translate('GuerreEtCroissance', 'navigation-interface-carriere', lang),
-      tickFormat: d => formatNumber(d) + ' u.',
+      tickFormat: d => formatNumber(d, lang) + ' u.',
       unit: 'u.',
     },
     {
       id: 'entrées',
       source: 'Navigo entrées',
       label: translate('GuerreEtCroissance', 'navigation-interface-arrivals', lang),
-      tickFormat: d => formatNumber(d) + ' u.',
+      tickFormat: d => formatNumber(d, lang) + ' u.',
       unit: 'u.',
     },
     {
       id: 'tonnage',
       source: 'Navigo tonnage',
       label: translate('GuerreEtCroissance', 'navigation-interface-tonnage', lang),
-      tickFormat: d => formatNumber(d) + ' tx.',
+      tickFormat: d => formatNumber(d, lang) + ' tx.',
       unit: 'tx.',
     },
     {
       id: 'mileage',
       source: 'Navigo mileage_total',
       label: translate('GuerreEtCroissance', 'navigation-interface-distance', lang),
-      tickFormat: d => formatNumber(d) + ' m.',
+      tickFormat: d => formatNumber(d, lang) + ' m.',
       unit: 'm.',
     },
   ];
@@ -346,7 +346,7 @@ export default function GuerreEtCroissance({
                                   data={data[seriesId].filter(d => d.direction_ferme === direction)}
                                   xScale={xScale}
                                   yDomain={[0, 350000000]}
-                                  tickFormat={d => formatNumber(d / 1000) + ' k lt.'}
+                                  tickFormat={d => formatNumber(d / 1000, lang) + ' k lt.'}
                                   activeYear={activeYear}
                                   onSetActiveYear={y => setActiveYear(y)}
                                   gutter={gutter}

diff --git a/src/visualizations/GuerreEtCroissance/LineSeries.js b/src/visualizations/GuerreEtCroissance/LineSeries.js
@@ -227,10 +227,10 @@ const LineSeries = ({
                     translate('GuerreEtCroissance', 'tooltip', lang, {
                       year,
                       unit,
-                      value: formatNumber(parseInt(value)),
-                      loss: formatNumber(parseInt(data.find(d => d.year === year).peace_reg_memory))
+                      value: formatNumber(parseInt(value, lang)),
+                      loss: formatNumber(parseInt(data.find(d => d.year === year, lang).peace_reg_memory))
                     })
-                    // `En ${year}, valeur de ${formatNumber(parseInt(value))} (perte de ${formatNumber(parseInt(data.find(d => d.year === year).peace_reg_memory))})`
+                    // `En ${year}, valeur de ${formatNumber(parseInt(value, lang))} (perte de ${formatNumber(parseInt(data.find(d => d.year === year, lang).peace_reg_memory))})`
                   }
                 />
                 <circle

diff --git a/src/visualizations/Intro/Legend.js b/src/visualizations/Intro/Legend.js
@@ -113,7 +113,7 @@ const Legend = ({
 
             >
               {
-                translate('Intro', 'n-travels', lang, {count: formatNumber(maxShips)})
+                translate('Intro', 'n-travels', lang, {count: formatNumber(maxShips, lang)})
               }
             </text>
 
@@ -130,7 +130,7 @@ const Legend = ({
               className="legend-indicator"
 
             >
-              {translate('Intro', 'n-travels', lang, {count: formatNumber(maxShips / 2)})}
+              {translate('Intro', 'n-travels', lang, {count: formatNumber(maxShips / 2, lang)})}
             </text>
 
             <line
@@ -169,7 +169,7 @@ const Legend = ({
               y={triangleHeight * 1.5 + 9}
               className={'legend-indicator'}
             >
-              {formatNumber(maxTonnage)} tx.
+              {formatNumber(maxTonnage, lang)} tx.
             </text>
             <line
               x1={width * .75}
@@ -183,7 +183,7 @@ const Legend = ({
               y={triangleHeight * 1.5 + 9}
               className={'legend-indicator'}
             >
-              {formatNumber(maxTonnage / 2)} tx.
+              {formatNumber(maxTonnage / 2, lang)} tx.
             </text>
           </>
           :
@@ -218,7 +218,7 @@ const Legend = ({
                 y={3}
                 className="legend-indicator"
               >
-                {formatNumber(maxAreaValue)} lt.
+                {formatNumber(maxAreaValue, lang)} lt.
               </text>
             </g>
             <circle
@@ -243,7 +243,7 @@ const Legend = ({
                 y={3}
                 className="legend-indicator"
               >
-                {formatNumber(minAreaValue)} lt.
+                {formatNumber(minAreaValue, lang)} lt.
               </text>
             </g>
           </>

diff --git a/src/visualizations/Intro/PartnersObjects.js b/src/visualizations/Intro/PartnersObjects.js
@@ -125,31 +125,31 @@ const PartnersObjects = ({
         let tooltipText = '';
         if (dataType === 'toflit18') {
           if (dataScope === 'world') {
-            // tooltipText = `La direction des fermes de Marseille a effectué un commerce total de ${formatNumber(parseInt(toflit_value))} lt. avec le partenaire ${partner} en 1789.`
+            // tooltipText = `La direction des fermes de Marseille a effectué un commerce total de ${formatNumber(parseInt(toflit_value, lang))} lt. avec le partenaire ${partner} en 1789.`
             tooltipText = translate('Intro', 'tooltip-trade-world', lang, {
-              count: formatNumber(parseInt(toflit_value)),
+              count: formatNumber(parseInt(toflit_value), lang),
               partner
             });
           } else {
-            // tooltipText = `La direction des fermes de ${partner} a effectué un commerce total de ${formatNumber(parseInt(toflit_value))} lt. en 1789.`
+            // tooltipText = `La direction des fermes de ${partner} a effectué un commerce total de ${formatNumber(parseInt(toflit_value, lang))} lt. en 1789.`
             tooltipText = translate('Intro', 'tooltip-trade-france', lang, {
-              count: formatNumber(parseInt(toflit_value)),
+              count: formatNumber(parseInt(toflit_value), lang),
               partner
             });
           }
         } else {
           if (dataScope === 'world') {
-            // tooltipText = `${formatNumber(parseInt(navigo_nb_ships))} voyages ont été effectués depuis les ports du partenaire ${partner} vers Marseille en 1789, pour un tonnage moyen de ${formatNumber(parseInt(navigo_mean_tonnage))} tonneaux.`
+            // tooltipText = `${formatNumber(parseInt(navigo_nb_ships, lang))} voyages ont été effectués depuis les ports du partenaire ${partner} vers Marseille en 1789, pour un tonnage moyen de ${formatNumber(parseInt(navigo_mean_tonnage, lang))} tonneaux.`
             tooltipText = translate('Intro', 'tooltip-navigo-world', lang, {
-              nb_ships: formatNumber(parseInt(navigo_nb_ships)),
-              tonnage: formatNumber(parseInt(navigo_mean_tonnage)),
+              nb_ships: formatNumber(parseInt(navigo_nb_ships, lang)),
+              tonnage: formatNumber(parseInt(navigo_mean_tonnage, lang)),
               partner
             });
           } else {
-            // tooltipText = `${formatNumber(parseInt(navigo_nb_ships))} voyages ont été effectués depuis le port de ${partner} en 1787, pour un tonnage moyen de ${formatNumber(parseInt(navigo_mean_tonnage))} tonneaux.`
+            // tooltipText = `${formatNumber(parseInt(navigo_nb_ships, lang))} voyages ont été effectués depuis le port de ${partner} en 1787, pour un tonnage moyen de ${formatNumber(parseInt(navigo_mean_tonnage, lang))} tonneaux.`
             tooltipText = translate('Intro', 'tooltip-navigo-france', lang, {
-              nb_ships: formatNumber(parseInt(navigo_nb_ships)),
-              tonnage: formatNumber(parseInt(navigo_mean_tonnage)),
+              nb_ships: formatNumber(parseInt(navigo_nb_ships, lang)),
+              tonnage: formatNumber(parseInt(navigo_mean_tonnage, lang)),
               partner
             });
           }

diff --git a/src/visualizations/LevantNavigation/LevantNavigation.js b/src/visualizations/LevantNavigation/LevantNavigation.js
@@ -203,9 +203,9 @@ export default function LevantNavigation({
                               translate('LevantNavigation', 'tooltip', lang, {
                                 count,
                                 port,
-                                tonnage: formatNumber(tonnage)
+                                tonnage: formatNumber(tonnage, lang)
                               })
-                              // `Selon le registre des patentes de Marseille, <strong>${count}&nbsp;navires</strong> se sont rendus depuis le port de <strong>${port}</strong> vers port phocéen dans les sept années étudiées, pour un total estimé de <strong>${formatNumber(tonnage)} tonneaux</strong> cumulés.`
+                              // `Selon le registre des patentes de Marseille, <strong>${count}&nbsp;navires</strong> se sont rendus depuis le port de <strong>${port}</strong> vers port phocéen dans les sept années étudiées, pour un total estimé de <strong>${formatNumber(tonnage, lang)} tonneaux</strong> cumulés.`
                             }
                           >
                             <circle
@@ -307,7 +307,7 @@ export default function LevantNavigation({
                         className="legend-label"
                         style={{ fontSize: gutter }}
                       >
-                        40 000 tx.
+                        {formatNumber(legendMaxTonnage, lang)} tx.
                       </p>
                     </foreignObject>
 
@@ -322,7 +322,7 @@ export default function LevantNavigation({
                         className="legend-label"
                         style={{ fontSize: gutter }}
                       >
-                        20 000 tx.
+                        {formatNumber(legendMinTonnage, lang)} tx.
                       </p>
                     </foreignObject>
 

diff --git a/src/visualizations/PartDesEtrangersDansNavigation/PartDesEtrangersDansNavigation.js b/src/visualizations/PartDesEtrangersDansNavigation/PartDesEtrangersDansNavigation.js
@@ -247,9 +247,9 @@ const flagToNationality = {
                     <g transform={`translate(${marseilleXOffset - width}, ${0})`}
                     data-for="part-etrangers-tooltip"
                           data-tip={
-                            // `En 1789, un total de ${formatNumber(tonnage)} tonneaux arrivant à Marseille a été pris en charge par des ${label} ((${parseInt(tonnage / marseilleSum * 100)}%) du total des étrangers).`
+                            // `En 1789, un total de ${formatNumber(tonnage, lang)} tonneaux arrivant à Marseille a été pris en charge par des ${label} ((${parseInt(tonnage / marseilleSum * 100)}%) du total des étrangers).`
                             translate('PartDesEtrangersDansNavigation', 'top-row-tooltip', lang, {
-                              tonnage: formatNumber(tonnage),
+                              tonnage: formatNumber(tonnage, lang),
                               label,
                               pct: parseInt(tonnage / marseilleSum * 100)
                             })
@@ -277,11 +277,11 @@ const flagToNationality = {
                           data-for="part-etrangers-tooltip"
                           data-tip={
                             translate('PartDesEtrangersDansNavigation', 'bottom-row-tooltip', lang, {
-                                tonnage: formatNumber(tonnage),
+                                tonnage: formatNumber(tonnage, lang),
                                 label,
                                 pct: parseInt(tonnage / marseilleSum * 100)
                             })
-                            // `En 1789, un total de ${formatNumber(tonnage)} tonneaux arrivant à Marseille a été pris en charge par des ${label} ((${parseInt(tonnage / marseilleSum * 100)}%) du total des étrangers).`
+                            // `En 1789, un total de ${formatNumber(tonnage, lang)} tonneaux arrivant à Marseille a été pris en charge par des ${label} ((${parseInt(tonnage / marseilleSum * 100)}%) du total des étrangers).`
                           }
                         >
                           {label} ({parseInt(tonnage / marseilleSum * 100)}%)

diff --git a/src/visualizations/PartDesFrancaisDansProvenance/PartDesFrancaisDansProvenance.js b/src/visualizations/PartDesFrancaisDansProvenance/PartDesFrancaisDansProvenance.js
@@ -95,9 +95,9 @@ export default function PartDesFrancaisDansProvenance({
             year: d.year,
             share: d.share_of_french.toFixed(2),
             state: d.state,
-            tonnage: formatNumber(d.tonnage_french)
+            tonnage: formatNumber(d.tonnage_french, lang)
           })
-            // `En ${d.year}, ${d.share_of_french.toFixed(2)}% des voyages partis de ports de ${d.state} et arrivés à Marseille étaient assurés par des navires français (${formatNumber(d.tonnage_french)} tx. cumulés)`
+            // `En ${d.year}, ${d.share_of_french.toFixed(2)}% des voyages partis de ports de ${d.state} et arrivés à Marseille étaient assurés par des navires français (${formatNumber(d.tonnage_french, lang)} tx. cumulés)`
         }
         }
       />
@@ -121,7 +121,7 @@ export default function PartDesFrancaisDansProvenance({
           },
           y: {
             field: 'tonnage_french',
-            tickFormat: d => formatNumber(d) + ' tx',
+            tickFormat: d => formatNumber(d, lang) + ' tx',
             // domain: [0, 100],
             title: translate('PartDesFrancaisDansProvenance', 'bottom-y-axis', lang),
             sort: {
@@ -134,9 +134,9 @@ export default function PartDesFrancaisDansProvenance({
             year: d.year,
             share: d.share_of_french.toFixed(2),
             state: d.state,
-            tonnage: formatNumber(d.tonnage_french)
+            tonnage: formatNumber(d.tonnage_french, lang)
           })
-            // `En ${d.year}, ${d.share_of_french.toFixed(2)}% des voyages partis de ports de ${d.state} et arrivés à Marseille étaient assurés par des navires français (${formatNumber(d.tonnage_french)} tx. cumulés)`
+            // `En ${d.year}, ${d.share_of_french.toFixed(2)}% des voyages partis de ports de ${d.state} et arrivés à Marseille étaient assurés par des navires français (${formatNumber(d.tonnage_french, lang)} tx. cumulés)`
         }
         }
       />