From d7c09e0ebdc4d0458b78142bff6b7c97fe485ba2 Mon Sep 17 00:00:00 2001 From: Robin de Mourat Date: Wed, 14 Aug 2024 16:33:55 +0200 Subject: [PATCH] internationalize numbers format --- .../AlluvialImportExport.js | 4 +- src/components/RadarChart/VisObject.js | 2 +- .../LongitudinalTradeChart.js | 41 ++++--------------- .../TradeDynamicsChart/TradeDynamicsChart.js | 2 + .../EffetsGuerreSurLevant.js | 6 +-- .../ExportationsSudEst/ExportationsSudEst.js | 4 +- .../GuerreEtCroissance/GuerreEtCroissance.js | 10 ++--- .../GuerreEtCroissance/LineSeries.js | 6 +-- src/visualizations/Intro/Legend.js | 12 +++--- src/visualizations/Intro/PartnersObjects.js | 20 ++++----- .../LevantNavigation/LevantNavigation.js | 8 ++-- .../PartDesEtrangersDansNavigation.js | 8 ++-- .../PartDesFrancaisDansProvenance.js | 10 ++--- .../StylesNavigation/StylesNavigation.js | 16 ++++---- 14 files changed, 63 insertions(+), 86 deletions(-) diff --git a/src/components/AlluvialImportExport/AlluvialImportExport.js b/src/components/AlluvialImportExport/AlluvialImportExport.js index 8178afff..33762a29 100644 --- a/src/components/AlluvialImportExport/AlluvialImportExport.js +++ b/src/components/AlluvialImportExport/AlluvialImportExport.js @@ -560,7 +560,7 @@ export default function AlluvialImportExport({ {isTooSmallForText === false && - {formatNumber(value) + ' lt.'} + {formatNumber(value, lang) + ' lt.'} } @@ -675,7 +675,7 @@ export default function AlluvialImportExport({ } - {isTooSmallForText === false && {`${formatNumber(value)} lt. ${isFraude ? ' (fraude ?)' : ''}`}} + {isTooSmallForText === false && {`${formatNumber(value, lang)} lt. ${isFraude ? ' (fraude ?)' : ''}`}} ) }) diff --git a/src/components/RadarChart/VisObject.js b/src/components/RadarChart/VisObject.js index 42d92a42..39d21e9f 100644 --- a/src/components/RadarChart/VisObject.js +++ b/src/components/RadarChart/VisObject.js @@ -106,7 +106,7 @@ const VisObject = ({ }) .map(([key, portion]) => `
  • - ${key} : ${(portion * 100).toFixed(2)}% (${formatNumber(absoluteData[key])} lt) + ${key} : ${(portion * 100).toFixed(2)}% (${formatNumber(absoluteData[key], lang)} lt)
    • `).join('\n') } diff --git a/src/components/TradeDynamicsChart/LongitudinalTradeChart.js b/src/components/TradeDynamicsChart/LongitudinalTradeChart.js index e96c3b8a..702f023d 100644 --- 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} : ${prettifyValue( - +datum[absoluteField] + data-tip={`${datum.year} : ${formatNumber( + parseInt(+datum[absoluteField]), lang )} 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} → ${prettifyValue( - +datum[absoluteField] + data-tip={`${datum.year} → ${formatNumber( + parseInt(+datum[absoluteField]), lang )} livres tournois
    ${ next.year - } → ${prettifyValue( - +next[absoluteField] + } → ${formatNumber( + parseInt(+next[absoluteField]), lang )} livres tournois
    (${ ratio > 0 ? "+" : "" }${Math.round(ratio * 100)}%)`} diff --git a/src/components/TradeDynamicsChart/TradeDynamicsChart.js b/src/components/TradeDynamicsChart/TradeDynamicsChart.js index 45c10142..6200a050 100644 --- 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 index 6b11f8e7..3fe47ab5 100644 --- 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 index bfff968f..5ac4c4e1 100644 --- 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.) : 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.) : null diff --git a/src/visualizations/GuerreEtCroissance/GuerreEtCroissance.js b/src/visualizations/GuerreEtCroissance/GuerreEtCroissance.js index 2de9eea2..91a21416 100644 --- 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 index 16ebeab4..2524939c 100644 --- 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))})` } /> { - translate('Intro', 'n-travels', lang, {count: formatNumber(maxShips)}) + translate('Intro', 'n-travels', lang, {count: formatNumber(maxShips, lang)}) } @@ -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)})} - {formatNumber(maxTonnage)} tx. + {formatNumber(maxTonnage, lang)} tx. - {formatNumber(maxTonnage / 2)} tx. + {formatNumber(maxTonnage / 2, lang)} tx. : @@ -218,7 +218,7 @@ const Legend = ({ y={3} className="legend-indicator" > - {formatNumber(maxAreaValue)} lt. + {formatNumber(maxAreaValue, lang)} lt. - {formatNumber(minAreaValue)} lt. + {formatNumber(minAreaValue, lang)} lt. diff --git a/src/visualizations/Intro/PartnersObjects.js b/src/visualizations/Intro/PartnersObjects.js index 078aa895..098707e9 100644 --- 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 index 81de9c2c..27d37e8d 100644 --- 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, ${count} navires se sont rendus depuis le port de ${port} vers port phocéen dans les sept années étudiées, pour un total estimé de ${formatNumber(tonnage)} tonneaux cumulés.` + // `Selon le registre des patentes de Marseille, ${count} navires se sont rendus depuis le port de ${port} vers port phocéen dans les sept années étudiées, pour un total estimé de ${formatNumber(tonnage, lang)} tonneaux cumulés.` } > - 40 000 tx. + {formatNumber(legendMaxTonnage, lang)} tx.

    @@ -322,7 +322,7 @@ export default function LevantNavigation({ className="legend-label" style={{ fontSize: gutter }} > - 20 000 tx. + {formatNumber(legendMinTonnage, lang)} tx.

    diff --git a/src/visualizations/PartDesEtrangersDansNavigation/PartDesEtrangersDansNavigation.js b/src/visualizations/PartDesEtrangersDansNavigation/PartDesEtrangersDansNavigation.js index 4f8bd25f..7a04bf3d 100644 --- a/src/visualizations/PartDesEtrangersDansNavigation/PartDesEtrangersDansNavigation.js +++ b/src/visualizations/PartDesEtrangersDansNavigation/PartDesEtrangersDansNavigation.js @@ -247,9 +247,9 @@ const flagToNationality = { {label} ({parseInt(tonnage / marseilleSum * 100)}%) diff --git a/src/visualizations/PartDesFrancaisDansProvenance/PartDesFrancaisDansProvenance.js b/src/visualizations/PartDesFrancaisDansProvenance/PartDesFrancaisDansProvenance.js index f933a37f..5e29ae2d 100644 --- 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)` } } /> diff --git a/src/visualizations/StylesNavigation/StylesNavigation.js b/src/visualizations/StylesNavigation/StylesNavigation.js index 02fc77fb..56e53cae 100644 --- a/src/visualizations/StylesNavigation/StylesNavigation.js +++ b/src/visualizations/StylesNavigation/StylesNavigation.js @@ -204,7 +204,7 @@ const Provinces = ({ xmlns="http://www.w3.org/1999/xhtml" className="legend-label" > - {translate('StylesNavigation', 'travels-tick', lang, {count: legendValues[0]})} + {translate('StylesNavigation', 'travels-tick', lang, {count: formatNumber(legendValues[0], lang)})}

    @@ -218,7 +218,7 @@ const Provinces = ({ xmlns="http://www.w3.org/1999/xhtml" className="legend-label" > - {translate('StylesNavigation', 'travels-tick', lang, {count: legendValues[1]})} + {translate('StylesNavigation', 'travels-tick', lang, {count: formatNumber(legendValues[1], lang)})}

    @@ -438,8 +438,8 @@ export default function StylesNavigation({ width: cellWidth, height: cellHeight, id: 'méditerranée', - title: translate('StylesNavigation', 'title-mediterrannee', lang, { count: formatNumber(travelsSums['méditerranée occidentale']) }), - // title: `Europe méditerranéenne (${formatNumber(travelsSums['méditerranée occidentale'])} voyages vers Marseille consignés en temps de paix)`, + title: translate('StylesNavigation', 'title-mediterrannee', lang, { count: formatNumber(travelsSums['méditerranée occidentale'], lang) }), + // title: `Europe méditerranéenne (${formatNumber(travelsSums['méditerranée occidentale'], lang)} voyages vers Marseille consignés en temps de paix)`, data: data.filter(({ category }) => category === 'méditerranée occidentale'), color: colors['méditerranée occidentale'], legendStep: 250, @@ -462,8 +462,8 @@ export default function StylesNavigation({ width: cellWidth, height: cellHeight, id: 'ponant', - title: translate('StylesNavigation', 'title-ponant', lang, { count: formatNumber(travelsSums['Ponant']) }), - // title: `Ponant et Terre-Neuve (${formatNumber(travelsSums['Ponant'])} voyages vers Marseille consignés en temps de paix)`, + title: translate('StylesNavigation', 'title-ponant', lang, { count: formatNumber(travelsSums['Ponant'], lang) }), + // title: `Ponant et Terre-Neuve (${formatNumber(travelsSums['Ponant'], lang)} voyages vers Marseille consignés en temps de paix)`, data: data.filter(({ category }) => category === 'Ponant'), color: colors['Ponant'], legendStep: 40, @@ -484,8 +484,8 @@ export default function StylesNavigation({ width: cellWidth, height: cellHeight, id: 'empire', - // title: `Empire ottoman et mer Noire (${formatNumber(travelsSums['empire ottoman'])} voyages vers Marseille consignés en temps de paix)`, - title: translate('StylesNavigation', 'title-ottoman', lang, { count: formatNumber(travelsSums['empire ottoman']) }), + // title: `Empire ottoman et mer Noire (${formatNumber(travelsSums['empire ottoman'], lang)} voyages vers Marseille consignés en temps de paix)`, + title: translate('StylesNavigation', 'title-ottoman', lang, { count: formatNumber(travelsSums['empire ottoman'], lang) }), data: data.filter(({ category }) => category === 'empire ottoman'), color: colors['empire ottoman'], tonnageValues,