diff --git a/datascripts/fetch_content.py b/datascripts/fetch_content.py index 777c9bd8..cadfb9bb 100644 --- a/datascripts/fetch_content.py +++ b/datascripts/fetch_content.py @@ -510,8 +510,8 @@ def set_humain_quote_id(item_metas): for i, item in enumerate(summary): if i == 0: continue - print("item:") - print(item) + # print("item:") + # print(item) base_str = json.dumps(item, indent = 2, ensure_ascii=False)[:-2] base_str += ",\n"; component = "ScrollyPage" if '"navGroup": "primary"' in base_str and 'conclusion' not in base_str.lower() else "PlainPage" diff --git a/src/i18n/messages.yml b/src/i18n/messages.yml index 8c7cd40c..6d265291 100644 --- a/src/i18n/messages.yml +++ b/src/i18n/messages.yml @@ -14,7 +14,7 @@ menu: en: home atlas: fr: Atlas - en: visualizations atlas + en: Atlas about: title: fr: À propos @@ -22,7 +22,7 @@ about: atlas: title: fr: Atlas - en: Visualizations atlas + en: Atlas vizFocus: description: fr: De quoi s'agit t'il ? @@ -175,13 +175,13 @@ exportations-sud-est: StylesNavigation: title-mediterrannee: fr: Europe méditerranéenne (${count} voyages vers Marseille consignés en temps de paix) - en: Mediterrannean Europe (${count} voyages vers Marseille consignés en temps de paix) + en: Mediterrannean europe (${count} travels to Marseille consigned in peacetime) title-ponant: fr: Ponant et Terre-Neuve (${count} voyages vers Marseille consignés en temps de paix) - en: Ponant et Terre-Neuve (${count} voyages vers Marseille consignés en temps de paix) + en: Ponant and Newfoundland (${count} travels to Marseille consigned in peacetime) title-ottoman: fr: Empire ottoman et mer Noire (${count} voyages vers Marseille consignés en temps de paix) - en: Empire ottoman et mer Noire (${count} voyages vers Marseille consignés en temps de paix) + en: Ottoman empire and Black sea (${count} travels to Marseille consigned in peacetime) number-of-travels: fr: nombre de voyages en: number of travels @@ -199,13 +199,13 @@ StylesNavigation: en: number of steps steps-bar-tooltip: fr: Durant les années de paix disponibles dans les données (1749, 1769, 1787, 1789), ${count} navires sont venus à Marseille en faisant ${nb_steps} étapes. - en: Durant les années de paix disponibles dans les données (1749, 1769, 1787, 1789), ${count} navires sont venus à Marseille en faisant ${nb_steps} étapes. + en: During the years of peace available in the data (1749, 1769, 1787, 1789), ${count} ships came to Marseille making ${nb_steps}. tonnage-bar-tooltip: fr: Durant les années de paix disponibles dans les données (1749, 1769, 1787, 1789), ${count} navires d'un tonnage estimé à ${tonnage} tonneaux sont venus à Marseille. - en: Durant les années de paix disponibles dans les données (1749, 1769, 1787, 1789), ${count} navires d'un tonnage estimé à ${tonnage} tonneaux sont venus à Marseille. + en: During the years of peace available in the data (1749, 1769, 1787, 1789), ${count} ships with an estimated tonnage of ${tonnage} came to Marseille. intersection-tooltip: fr: Durant les années de paix disponibles dans les données (1749, 1769, 1787, 1789), ${count} navires d'un tonnage estimé à ${tonnage} tonneaux sont venus à Marseille en faisant ${nb_steps} étapes. - en: Durant les années de paix disponibles dans les données (1749, 1769, 1787, 1789), ${count} navires d'un tonnage estimé à ${tonnage} tonneaux sont venus à Marseille en faisant ${nb_steps} étapes. + en: During the years of peace available in the data (1749, 1769, 1787, 1789), ${count} ships with an estimated tonnage of ${tonnage} tonnes came to Marseille making ${nb_steps}. FonctionnementPortFranc: reseau-complet: fr: Réseau complet @@ -216,7 +216,7 @@ FonctionnementPortFranc: GuerreEtNavigation: atlas-title: fr: Les acteurs de la navigation à destination de Marseille (en tonnage estimé) - en: Les actors de la navigation à destination de Marseille (en tonnage estimé) + en: Shipping to Marseille (in estimated tonnage) WarTransferChart: peace-year: fr: année de paix @@ -241,23 +241,23 @@ WarTransferChart: en: at war, ennemy of France tooltip-peace: fr: Entre ${start} et ${end}, le tonnage cumulé estimé des navires du groupe ${group} est passé de ${from}% à ${to}% de la navigation vers Marseille. - en: Entre ${start} et ${end}, le tonnage cumulé estimé des navires du groupe ${group} est passé de ${from}% à ${to}% de la navigation vers Marseille. + en: Between ${start} and ${end}, the estimated cumulative tonnage of ${group} ships increased from ${from}% to ${to}% of shipping to Marseille. tooltip-war: fr: Entre ${start} et ${end}, le tonnage cumulé estimé des navires qui allaient devenir ${group} en ${end} est passé de ${from}% à ${to}% de la navigation vers Marseille. - en: Entre ${start} et ${end}, le tonnage cumulé estimé des navires qui allaient devenir ${group} en ${end} est passé de ${from}% à ${to}% de la navigation vers Marseille. + en: Between ${start} and ${end}, the estimated cumulative tonnage of the ships that were to become ${group} in ${end} rose from ${from}% to ${to}% of shipping to Marseille. Intro: title-navigo-world: fr: Pays étrangers de départ des navires à destination de Marseille en 1789 - en: Pays étrangers de départ des navires à destination de Marseille en 1789 + en: Foreign countries of departure for ships bound for Marseille in 1789 title-navigo-france: - fr: Sorties des 10 plus grands ports de France en 1787 - en: Sorties des 10 plus grands ports de France en 1787 + fr: Sorties des ${number} plus grands ports de France en 1787 + en: Departures from the ${number} top ports in France in 1787 title-trade-world: fr: Partenaires de commerce de Marseille en 1789 - en: Partenaires de commerce de Marseille en 1789 + en: Marseille's trading partners in 1789 title-trade-france: fr: Commerce des directions des fermes de France en 1789 - en: Commerce des directions des fermes de France en 1789 + en: Trade of the directions des fermes of France in 1789 scale: fr: Échelle en: Scale @@ -284,10 +284,10 @@ Intro: en: Display ${count} top ports number-of-travels: fr: nombre de voyages - en: nombre de voyages + en: number of travels mean-tonnage: fr: tonnage moyen - en: tonnage moyen + en: mean tonnage total-trade: fr: Commerce total en: Total trade @@ -296,20 +296,26 @@ Intro: en: ${count} travels tooltip-navigo-world: fr: ${nb_ships} voyages ont été effectués depuis les ports du partenaire ${partner} vers Marseille en 1789, pour un tonnage moyen de ${tonnage} tonneaux. - en: ${nb_ships} voyages ont été effectués depuis les ports du partenaire ${partner} vers Marseille en 1789, pour un tonnage moyen de ${tonnage} tonneaux. + en: ${nb_ships} travels were made from the ports of ${partner} to Marseille in 1789, for a mean tonnage of ${tonnage}. tooltip-navigo-france: fr: ${nb_ships} voyages ont été effectués depuis les ports du partenaire ${partner} vers Marseille en 1789, pour un tonnage moyen de ${tonnage} tonneaux. - en: ${nb_ships} voyages ont été effectués depuis les ports du partenaire ${partner} vers Marseille en 1789, pour un tonnage moyen de ${tonnage} tonneaux. + en: ${nb_ships} travels were made from the ports of ${partner} to Marseille in 1789, for a mean tonnage of ${tonnage}. tooltip-trade-world: fr: La direction des fermes de Marseille a effectué un commerce total de ${count} lt. avec le partenaire ${partner} en 1789. - en: La direction des fermes de Marseille a effectué un commerce total de ${count} lt. avec le partenaire ${partner} en 1789. + en: The direction des fermes of Marseille carried out a total trade of ${count} lt. with partner ${partner}. tooltip-trade-france: fr: La direction des fermes de ${partner} a effectué un commerce total de ${count} lt. en 1789. - en: La direction des fermes de ${partner} a effectué un commerce total de ${count} lt. en 1789. + en: The direction des fermes of ${partner} carried on a total trade of ${count} lt. in 1789. LevantNavigation: + title: + fr: Le Levant du point de vue de la navigation + en: The Levant from the point of view of navigation + legend-title: + fr: Légende + en: Legend tooltip: - fr: 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 ${tonnage} tonneaux cumulés. - en: Selon le register 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 ${tonnage} tonneaux cumulés. + fr: Selon le registre des patentes de Marseille, ${count} navires se sont rendus depuis le port de ${port} vers le port phocéen dans les sept années étudiées, pour un total estimé de ${tonnage} tonneaux cumulés. + en: According to the registre des patentes de Marseille, ${count} ships went from the port of ${port} to the port of Marseille in one of the seven years studies, for an estimated total tonnage of ${tonnage} tonneaux. MarseillePortStructurant: legend: fr: Légende @@ -319,10 +325,10 @@ MarseillePortStructurant: en: share of departures to Marseille legend-nb-departures: fr: nombre de départs en 1789 - en: number de départs en 1789 + en: number of departures in 1789 port-tooltip: fr: En 1789, ${count_total} navires sont partis du port de ${port}, dont ${count} (${ratio}%) vers Marseille. - en: En 1789, ${count_total} navires sont partis du port de ${port}, dont ${count} (${ratio}%) vers Marseille. + en: In 1789, ${count_total} ships left the port of ${port}, including ${count} (${ratio}%) for Marseille. DiversiteProduits: concentrated-trade: fr: commerce concentré @@ -332,23 +338,23 @@ DiversiteProduits: en: diversified trade tooltip: fr: En ${year}, la concentration des exports de la direction des fermes de ${direction} était de ${count}%. - en: En ${year}, la concentration des exports de la direction des fermes de ${direction} était de ${count}%. + en: In ${year}, the concentration of exports from ${direction} direction des fermes was ${count}%. PartDesEtrangersDansNavigation: comparison-row-title: fr: Part de navires étrangers partis de France en 1787 (tonnage cumulé) - en: Share de navires étrangers partis de France en 1787 (tonnage cumulé) + en: Share of foreign ships leaving France in 1787 (cumulative tonnage) marseille-row-title: fr: Pavillon des navires étrangers arrivés à Marseille en 1789 (tonnage cumulé estimé) - en: Pavillon des navires étrangers arrivés à Marseille en 1789 (tonnage cumulé estimé) + en: Flag of foreign ships arriving in Marseille in 1789 (estimated cumulative tonnage) ins: fr: entrées en: in top-row-tooltip: - fr: En 1789, un total de ${tonnage} tonneaux arrivant à Marseille a été pris en charge par des ${label} ((${pct}%) du total des étrangers). - en: En 1789, un total de ${tonnage} tonneaux arrivant à Marseille a été pris en charge par des ${label} ((${pct}%) du total des étrangers). + fr: En 1789, un total de ${tonnage} tonneaux arrivant à Marseille a été pris en charge par des ${label} (${pct}% du total des étrangers). + en: In 1789, a total of ${tonnage} tonneaux arriving in Marseille were handled by ${label} (${pct}% of the total number of foreigners). bottom-row-tooltip: - fr: En 1789, un total de ${tonnage} tonneaux arrivant à Marseille a été pris en charge par des ${label} ((${pct}%) du total des étrangers). - en: En 1789, un total de ${tonnage} tonneaux arrivant à Marseille a été pris en charge par des ${label} ((${pct}%) du total des étrangers). + fr: En 1789, un total de ${tonnage} tonneaux arrivant à Marseille a été pris en charge par des ${label} ((${pct}% du total des étrangers). + en: In 1789, a total of ${tonnage} tonneaux arriving in Marseille were handled by ${label} (${pct}% of the total number of foreigners). gênois: fr: gênois en: genoese @@ -391,4 +397,160 @@ PartDesEtrangersDansNavigation: CommentedImage: click-prompt: fr: Cliquer pour consulter - en: Click to expand \ No newline at end of file + en: Click to expand +PartDesFrancaisDansProvenance: + top-title: + fr: Part des navires français dans les provenances de voyages arrivés à Marseille + en: Share of French ships in the origin of voyages arriving in Marseille + top-y-axis: + fr: Part des n. français + en: Share of french sh. + top-tooltip: + fr: En ${year}, ${share}% des voyages partis de ports de ${state} et arrivés à Marseille étaient assurés par des navires français (${tonnage} tx. cumulés) + en: In ${year}, ${share}% of travels from ports of ${state} to Marseille were done by french ships (cumulative tonnage of ${tonnage}) + bottom-title: + fr: Tonnage estimé des navires français dans les provenances de voyages arrivés à Marseille + en: Estimated tonnage of French ships in the origins of voyages arriving in Marseille + bottom-tooltip: + fr: En ${year}, ${share}% des voyages partis de ports de ${state} et arrivés à Marseille étaient assurés par des navires français (${tonnage} tx. cumulés) + en: In ${year}, ${share}% of travels from ports of ${state} to Marseille were done by french ships (cumulative tonnage of ${tonnage}) + bottom-y-axis: + fr: Tonnage cum. + en: Cumulative t. + legend-title: + fr: Provenance du voyage + en: Origin of the trip + provenance-italy: + fr: Péninsule italienne + en: Italian peninsula + provenance-spain: + fr: Espagne + en: Spain + provenance-ottoman: + fr: Empire ottoman + en: Ottoman empire + provenance-dutch: + fr: Provinces-Unies + en: United provinces + provenance-uk: + fr: Grande-Bretagne et colonies (Terre-Neuve) + en: Great Britain and colonies (Newfoundland) + provenance-france: + fr: France + en: France + provenance-other: + fr: Autres + en: Others +EffetsGuerreSurLevant: + title: + fr: Principaux partenaires étrangers des importations de Marseille + en: Main foreign partners for Marseille imports + top-y-axis: + fr: valeur des import°s + en: imports value + top-x-axis: + fr: année + en: year + top-tooltip: + fr: En ${year}, Marseille a importé ${value} lt. depuis les partenaires ${particule} ${group} + en: In ${year}, Marseille imported ${value} lt. from partners of ${group} + bottom-y-axis: + fr: part des import°s + en: share of imports + bottom-x-axis: + fr: année + en: year + bottom-tooltip: + fr: En ${year}, Marseille a importé ${share}% de sa valeur depuis les partenaires ${group} + en: In ${year}, Marseille imported ${share}% of its value from partners of ${group} + group-levant-barbarie: + fr: Levant & Barbarie + en: Levant & Barbary + group-italie-espagne: + fr: Italie & Espagne + en: Italy & Spain + group-angleterre: + fr: Angleterre & Amérique du Nord + en: England & North America + group-colonies: + fr: Colonies françaises + en: French colonies + group-nord: + fr: Nord, Hollande & Flandres + en: North, Holland & Flanders + group-total: + fr: total + en: total +GuerreEtCroissance: + total: + fr: total + en: total + imports: + fr: importations + en: imports + exports: + fr: exportations + en: exports + total_no_colonial_product: + fr: total (sans produits coloniaux) + en: total (without colonial products) + total_no_colonial_trade: + fr: total (sans commerce colonial) + en: total (without colonial trade) + imports_no_colonial_product: + fr: importations (sans produits coloniaux) + en: imports (without colonial products) + exports_no_colonial_product: + fr: exportations (sans produits coloniaux) + en: exports (without colonial products) + imports_no_colonial_trade: + fr: importations (sans commerce colonial) + en: imports (without colonial trade) + exports_no_colonial_trade: + fr: exportations (sans commerce colonial) + en: exports (without colonial trade) + navigation: + fr: navigation de Marseille + en: Marseille navigation + legend-title: + fr: Légende + en: Legend + legend-slope: + fr: Projection d'une valeur estimée par régression à partir de la période de paix précédente + en: Projection of a value estimated by regression from the previous peace period + legend-growth: + fr: Croissance annuelle moyenne + en: Average annual growth + legend-loss: + fr: Moyenne de l'estimation de la perte ou du gain en temps de guerre + en: Average estimate of wartime loss or gain + navigation-interface-title: + fr: Données de navigation + en: Navigation data + navigation-interface-carriere: + fr: Sources de Carrière + en: Carrière sources + navigation-interface-arrivals: + fr: Nombre d'entrées (Navigocorpus) + en: Number of arrivals (Navigocorpus) + navigation-interface-tonnage: + fr: Tonnage estimé (Navigocorpus) + en: Estimated tonnage (Navigocorpus) + navigation-interface-distance: + fr: Distance (Navigocorpus) + en: Distance (Navigocorpus) + year: + fr: an + en: year + tooltip: + fr: En ${year}, valeur de ${value} lt. (perte de ${loss} lt.) + en: In ${year}, value of ${value} lt. (loss of ${loss} lt.) + filters-title: + fr: Afficher ... + en: Display ... + filters-directions-title: + fr: "Afficher les directions :" + en: "Display directions:" + filters-series-title: + fr: "Afficher les séries :" + en: "Display series:" \ No newline at end of file diff --git a/src/utils/colorPalettes.js b/src/utils/colorPalettes.js index ae825f14..c5a272d5 100644 --- a/src/utils/colorPalettes.js +++ b/src/utils/colorPalettes.js @@ -25,7 +25,7 @@ const colorsPalettes = { Provence: "#668EDB", Lyonnais: "#41BEA3", Languedoc: "#A7E6F9", - + Corse: "#514EEE", 'Isles de Corse': "#514EEE", }, @@ -174,21 +174,53 @@ const colorsPalettes = { provenanceCountries: { France: '#EE7993', 'Empire ottoman': '#019d2f', - 'Péninsule italienne': '#E27A0B', Espagne: '#E25C0B', 'Provinces-Unies': '#c8c8f0', 'Grande-Bretagne et colonies (Terre-Neuve)': '#c9072a', autre: '#c4c4c4', + fr: { + France: '#EE7993', + 'Empire ottoman': '#019d2f', + 'Péninsule italienne': '#E27A0B', + Espagne: '#E25C0B', + 'Provinces-Unies': '#c8c8f0', + 'Grande-Bretagne et colonies (Terre-Neuve)': '#c9072a', + Autres: '#c4c4c4', + }, + en: { + France: '#EE7993', + 'Ottoman empire': '#019d2f', + 'Italian peninsula': '#E27A0B', + Spain: '#E25C0B', + 'United provinces': '#c8c8f0', + 'Great Britain and colonies (Newfoundland)': '#c9072a', + Others: '#c4c4c4', + } }, partnersGrouped: { 'Levant & Barbarie': '#019d2f', 'Italie & Espagne': '#DFBD3A', 'Angleterre & Amérique du Nord': '#c9072a', 'Colonies françaises': '#E5881A', - // 'Colonies': '#E5881A', 'Nord, Hollande & Flandres': '#c8c8f0', 'total': '#c4c4c4', + en: { + 'Levant & Barbary': '#019d2f', + 'Italy & Spain': '#DFBD3A', + 'England & North America': '#c9072a', + 'French colonies': '#E5881A', + 'North, Holland & Flanders': '#c8c8f0', + 'total': '#c4c4c4', + }, + fr: { + 'Levant & Barbarie': '#019d2f', + 'Italie & Espagne': '#DFBD3A', + 'Angleterre & Amérique du Nord': '#c9072a', + 'Colonies françaises': '#E5881A', + 'Nord, Hollande & Flandres': '#c8c8f0', + 'total': '#c4c4c4', + } }, Marseille: 'red', warStatus: { diff --git a/src/visualizations/EffetsGuerreSurLevant/EffetsGuerreSurLevant.js b/src/visualizations/EffetsGuerreSurLevant/EffetsGuerreSurLevant.js index 1692a559..dee33411 100644 --- a/src/visualizations/EffetsGuerreSurLevant/EffetsGuerreSurLevant.js +++ b/src/visualizations/EffetsGuerreSurLevant/EffetsGuerreSurLevant.js @@ -5,13 +5,10 @@ import { formatNumber } from "../../utils/misc"; import BarChart from "../../components/BarChart"; import colorsPalettes from "../../utils/colorPalettes"; +import { useMemo } from "react"; -const {partnersGrouped: palette} = colorsPalettes; +const { partnersGrouped: palette } = colorsPalettes; -const orderMap = Object.keys(palette).reduce((res, key, i) => ({ - ...res, - [key]: i, -}), {}) export default function EffetsGuerreSurLevant({ data: inputData, @@ -19,15 +16,44 @@ export default function EffetsGuerreSurLevant({ height, lang }) { + const orderMap = Object.keys(palette[lang]).reduce((res, key, i) => ({ + ...res, + [key]: i, + }), {}) // const data = useMemo(() => - const data = (inputData.get('evolution-exports-levant.csv') || []) - .map(d => ({ - ...d, - year: +d.year, - value: +d.value, - order: orderMap[d.group], - orderReversed: -orderMap[d.group] - })) + const data = useMemo(() => (inputData.get('evolution-exports-levant.csv') || []) + .map(d => { + let translatedGroup; + switch (d.group) { + case 'Levant & Barbarie': + translatedGroup = translate('EffetsGuerreSurLevant', 'group-levant-barbarie', lang) + break; + case 'Italie & Espagne': + translatedGroup = translate('EffetsGuerreSurLevant', 'group-italie-espagne', lang) + break; + case 'Angleterre & Amérique du Nord': + translatedGroup = translate('EffetsGuerreSurLevant', 'group-angleterre', lang) + break; + case 'Colonies françaises': + translatedGroup = translate('EffetsGuerreSurLevant', 'group-colonies', lang) + break; + case 'Nord, Hollande & Flandres': + translatedGroup = translate('EffetsGuerreSurLevant', 'group-nord', lang) + break; + case 'total': + default: + translatedGroup = translate('EffetsGuerreSurLevant', 'group-total', lang) + break; + } + return { + ...d, + group: translatedGroup, + year: +d.year, + value: +d.value, + order: orderMap[d.group], + orderReversed: -orderMap[d.group] + } + }) .sort((a, b) => { if (a.year > b.year) { return 1; @@ -39,69 +65,14 @@ export default function EffetsGuerreSurLevant({ return 1; } return -1; - }) - // .filter(d => d.group !== 'total') - // , []); + }), [inputData, translate, lang]); const totalValuesMap = data.filter(d => d.group === 'total').reduce((res, { year, value }) => ({ ...res, [year]: value }), {}) - const messages = { - franceOverviewTitle: (start, end, kind, slope) => - translate("viz-1-A", "franceOverviewTitle", lang, { - start: start, - end: end, - kind, - slope, - }), - tradeEvolutionTitle: (cityName, start, end, kind, slope) => - translate("viz-1-A", "tradeEvolutionTitle", lang, { - cityName, - start, - end, - kind, - }), - // top90PctTitle: (cityName, start, end) => - // translate("viz-1-A", "top90PctTitle", lang, { - // cityName: cityName, - // start: start, - // end: end, - // }), - partInPct: (kind) => translate("viz-1-A", "partInPct", lang, { kind }), - absoluteValue: (kind) => - translate("viz-1-A", "absoluteValue", lang, { kind }), - regressionTitle: (slope) => - translate("viz-1-A", "regressionTitle", lang, { slope }), - // herfindalLegendTitle: () => - // translate("viz-1-A", "herfindalLegendTitle", lang), - // herfindal0: () => translate("viz-1-A", "herfindal0", lang), - // herfindal1: () => translate("viz-1-A", "herfindal1", lang), - barTooltip: (year, pct, city, herfindal) => - translate("viz-1-A", "barTooltip", lang, { - year: year, - pct: pct, - city: city, - herfindal: herfindal, - }), - productTooltip: (year, product, pct) => - translate("viz-1-A", "productTooltip", lang, { - year: year, - product: product, - pct: pct, - }), - sevenYearsWar: (year, product, pct) => - translate("viz-1-A", "sevenYearsWar", lang, { - year: year, - product: product, - pct: pct, - }), - austriaWar: () => translate("viz-1-A", "austriaWar", lang), - usIndependance: () => translate("viz-1-A", "usIndependance", lang), - }; - - const annotations = [ + const annotations = useMemo(() => [ { type: "span", @@ -109,7 +80,7 @@ export default function EffetsGuerreSurLevant({ end: 1748, row: 0.5, axis: 'x', - label: messages.austriaWar(), + label: translate("viz-1-A", "austriaWar", lang), }, { type: "span", @@ -117,7 +88,7 @@ export default function EffetsGuerreSurLevant({ end: 1763, axis: 'x', labelPosition: height / 10, - label: messages.sevenYearsWar(), + label: translate("viz-1-A", "sevenYearsWar", lang), }, { type: "span", @@ -126,9 +97,9 @@ export default function EffetsGuerreSurLevant({ labelPosition: height / 5, row: 3, axis: 'x', - label: messages.usIndependance(), + label: translate("viz-1-A", "usIndependance", lang), }, - ]; + ], [translate, lang]); return (
formatNumber(d) + ' lt.' }, - tooltip: d => `En ${d.year}, Marseille a importé ${formatNumber(parseInt(d.value))} lt. depuis les partenaires ${d.group === 'total' ? 'au' : 'de'} ${d.group}` + tooltip: d => translate('EffetsGuerreSurLevant', 'top-tooltip', lang, { + year: d.year, + value: formatNumber(parseInt(d.value)), + 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}` } } /> @@ -179,25 +156,30 @@ export default function EffetsGuerreSurLevant({ // annotations, color: { field: 'group', - palette + palette: palette[lang] }, hideLegend: true, x: { field: 'year', - title: 'année', + title: translate('EffetsGuerreSurLevant', 'bottom-x-axis', lang), tickFormat: d => d % 5 === 0 ? d : '', // domain: [1725, 1790] }, y: { field: 'value', - title: 'part des imports', + title: translate('EffetsGuerreSurLevant', 'bottom-y-axis', lang), tickFormat: d => d + '%', sort: { field: 'orderReversed', type: 'number' } }, - tooltip: d => `En ${d.year}, Marseille a importé ${parseInt(d.value)} % de sa valeur depuis les partenaires ${d.group}` + tooltip: d => translate('EffetsGuerreSurLevant', 'bottom-tooltip', lang, { + year: d.year, + share: parseInt(d.value), + group: d.group + }) + // `En ${d.year}, Marseille a importé ${parseInt(d.value)} % de sa valeur depuis les partenaires ${d.group}` } } /> diff --git a/src/visualizations/FonctionnementPortFranc/FonctionnementPortFranc.js b/src/visualizations/FonctionnementPortFranc/FonctionnementPortFranc.js index a0c136f2..d5b276c4 100644 --- a/src/visualizations/FonctionnementPortFranc/FonctionnementPortFranc.js +++ b/src/visualizations/FonctionnementPortFranc/FonctionnementPortFranc.js @@ -8,7 +8,7 @@ import translate from '../../utils/translate'; -const simplifiedData = ({width, height}) => ` +const simplifiedData = ({width, height, lang}) => lang === 'fr' ? ` @@ -36,9 +36,38 @@ const simplifiedData = ({width, height}) => ` +` : +` + + + + + + + + + + + + + + + + + + + + + + + + + + + `; -const completeData = ({width, height}) => ` +const completeData = ({width, height, lang}) => lang === 'fr' ? ` @@ -130,7 +159,100 @@ const completeData = ({width, height}) => ` -`; +` +: +` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +`; @@ -166,7 +288,7 @@ export default function FonctionnementPortFranc({
diff --git a/src/visualizations/GuerreEtCroissance/GuerreEtCroissance.js b/src/visualizations/GuerreEtCroissance/GuerreEtCroissance.js index cfc9f0e4..6a375194 100644 --- a/src/visualizations/GuerreEtCroissance/GuerreEtCroissance.js +++ b/src/visualizations/GuerreEtCroissance/GuerreEtCroissance.js @@ -1,328 +1,23 @@ import { groupBy, range } from "lodash"; -import { useEffect, useState } from "react" - -const seriesLabels = { - 'total': 'total', - 'imports': 'importations', - 'exports': 'exportations', - 'total_no_colonial_product': 'total (sans produits coloniaux)', - 'total_no_colonial_trade': 'total (sans commerce colonial)', - 'imports_no_colonial_product': 'importations (sans produits coloniaux)', - 'exports_no_colonial_product': 'exportations (sans produits coloniaux)', - 'imports_no_colonial_trade': 'importations (sans commerce colonial)', - 'exports_no_colonial_trade': 'exportations (sans commerce colonial)', - 'navigation': 'navigation de Marseille' -} +import React, { useEffect, useMemo, useState } from "react" import './GuerreEtCroissance.scss'; import { scaleLinear } from "d3-scale"; import { extent, max } from "d3-array"; import { formatNumber } from "../../utils/misc"; import ReactTooltip from "react-tooltip"; +import translate from "../../utils/translate"; +import LineSeries from "./LineSeries"; const MIN_YEAR = 1720; const MAX_YEAR = 1790; -const WARS = [ - { - start: 1744, - end: 1748, - name: 'succession Autriche' - }, - { - start: 1756, - end: 1763, - name: 'sept ans' - }, - { - start: 1776, - end: 1783, - name: 'indépendance américaine' - }, -]; - -const LineSeries = ({ - width, - height, - data: inputData, - xScale, - yDomain: initialYDomain, - gutter, - displayYTicks, - activeYear, - onSetActiveYear, - tickFormat, - id, -}) => { - if (!inputData || !inputData[0]) { - return null; - } - const data = inputData.filter(d => d.value > 0) - // .map(d => { - // let cleanSlope = 0; - // if (d.slope.length) { - // const part2 = d.slope.split(' ').pop(); - // cleanSlope = +part2.split('%')[0] - // } - // return { - // ...d, - // cleanSlope, - // } - // }) - let cleanSlope = 0; - if (inputData[0].slope.length) { - const part2 = inputData[0].slope.split(' ').pop(); - cleanSlope = +part2.split('%')[0] - } - const yDomain = initialYDomain || [0, max(data.map(d => d.value))]; - let yTickSpan = 50000000; - if (yDomain[1] <= 10000) { - yTickSpan = 500; - } else if (yDomain[1] <= 1000000) { - yTickSpan = 50000; - } else if (yDomain[1] <= 5000000) { - yTickSpan = 500000; - } - const avgMem = data[0].avg_loss_mem.split(' ').pop().replace('memoire', ''); - const slope = data[0].slope.split(' ').pop(); - // const avgNoMem = data[0].avg_loss_no_mem.split(' ').pop().replace('memoire', ''); - - const yScale = scaleLinear().domain(yDomain).range([height - gutter, gutter * 2]).nice(); - const yAxisTickValues = range(yDomain[0], yDomain[1] + yTickSpan, yTickSpan); - const endX = xScale(MAX_YEAR + 10); - let tickFontSize = width / 25; - if (tickFontSize < 6) { - tickFontSize = 6; - } - // const slopeExtent = extent(data.map(d => d.cleanSlope)); - // const slopeColorScale = scaleLinear().domain([-1.1, 3.5]).range(['red', 'green']) - const slopeColorScale = scaleLinear().domain([-1.1, 3.5]).range(['lightgrey', '#336D7C']); - const lossColorScale = scaleLinear().domain([-60, 60]).range(['#FEA43B', 'green']); - // console.log(data.map(d => !d.slope.length ? 0 : (d.slope.split(' ')[1].split('%')[0]))) - return ( - - - { - yAxisTickValues - .map(value => { - const y = yScale(value); - return ( - - - { - displayYTicks ? - <> - - - - {tickFormat(value)} - - - - : null - } - - - ) - }) - } - - { - WARS.map(({ start, end, name }) => { - const x1 = xScale(start); - const x2 = xScale(end); - return ( - - ) - }) - } - - { - activeYear ? - - : null - } - { - data - .map(({ year: year1, value: value1 }, index) => { - const next = data[index + 1]; - if (!next || next.year !== year1 + 1) { - return null; - } - const { year: year2, value: value2 } = next; - const x1 = xScale(year1); - const y1 = yScale(value1); - const x2 = xScale(year2); - const y2 = yScale(value2); - return ( - - ) - }) - } - { - inputData - .map(({ year: year1, peace_reg_memory: value1 }, index) => { - const next = inputData[index + 1]; - if (!next) { - return null; - } - const { year: year2, peace_reg_memory: value2 } = next; - if (value1 === 0 || value2 === 0) { - return null; - } - const x1 = xScale(year1); - const y1 = yScale(value1); - const x2 = xScale(year2); - const y2 = yScale(value2); - return ( - - ) - }) - } - - { - data - .map(({ year, value }) => { - const x = xScale(year); - const y = yScale(value); - const isActive = activeYear === year; - return ( - - onSetActiveYear(year)} - onMouseLeave={() => onSetActiveYear()} - data-for="guerre-tooltip" - data-tip={`En ${year}, valeur de ${formatNumber(parseInt(value))} (perte de ${formatNumber(parseInt(data.find(d => d.year === year).peace_reg_memory))})`} - /> - - - ) - }) - } - { - slope ? - -
- {slope} -
- - : null - } - - {/* - {slope} - */} - - {(+avgMem.split('%')[0] > 0 ? '+' : '') + avgMem} - - {/* - {avgNoMem} - */} - - ) -} - export default function GuerreEtCroissance({ width, height, data: inputData, callerProps = {}, + lang, atlasMode, }) { const { @@ -362,7 +57,9 @@ export default function GuerreEtCroissance({ useEffect(() => setVisibleSeries(series ? series.split(',').map(s => s.trim()) : defaultSeries), [series]); useEffect(() => setVisibleDirections(directions ? directions.split(',').map(d => d.trim()) : defaultDirections), [directions]); useEffect(() => setNavigationMetric(navigation_metric || defaultNavigationMetric), [navigation_metric]); - + useEffect(() => { + ReactTooltip.rebuild(); + }, [lang, visibleSeries, visibleDirections]) // const data = useMemo(() => { const cleanData = (inputData.get('impact-guerre-sur-croissance.csv') || []).map(datum => ({ ...datum, @@ -392,25 +89,25 @@ export default function GuerreEtCroissance({ { id: 'carrière', source: 'Carriere', - label: 'Carrière', + label: translate('GuerreEtCroissance', 'navigation-interface-carriere', lang), tickFormat: d => formatNumber(d) + ' u.' }, { id: 'entrées', source: 'Navigo entrées', - label: 'Nombre d\'entrées (Navigocorpus)', + label: translate('GuerreEtCroissance', 'navigation-interface-arrivals', lang), tickFormat: d => formatNumber(d) + ' u.' }, { id: 'tonnage', source: 'Navigo tonnage', - label: 'Tonnage estimé (Navigocorpus)', + label: translate('GuerreEtCroissance', 'navigation-interface-tonnage', lang), tickFormat: d => formatNumber(d) + ' tx.' }, { id: 'mileage', source: 'Navigo mileage_total', - label: 'Distance (Navigocorpus)', + label: translate('GuerreEtCroissance', 'navigation-interface-distance', lang), tickFormat: d => formatNumber(d) + ' m.' }, ]; @@ -418,7 +115,38 @@ export default function GuerreEtCroissance({ const activeNavigationTickFormat = navigationSources.find(({ id }) => id === navigationMetric).tickFormat; const xAxisValues = range(MIN_YEAR, MAX_YEAR + 20, 20); // const legendX = sideWidth + (visibleDirections.length >= 4 ? cellWidth * 2.5 : cellWidth * 1.5) + gutter * 2; + const seriesLabels = useMemo(() => { + return { + 'total': translate('GuerreEtCroissance', 'total', lang), + 'imports': translate('GuerreEtCroissance', 'imports', lang), + 'exports': translate('GuerreEtCroissance', 'exports', lang), + 'total_no_colonial_product': translate('GuerreEtCroissance', 'total_no_colonial_product', lang), + 'total_no_colonial_trade': translate('GuerreEtCroissance', 'total_no_colonial_trade', lang), + 'imports_no_colonial_product': translate('GuerreEtCroissance', 'imports_no_colonial_product', lang), + 'exports_no_colonial_product': translate('GuerreEtCroissance', 'exports_no_colonial_product', lang), + 'imports_no_colonial_trade': translate('GuerreEtCroissance', 'imports_no_colonial_trade', lang), + 'exports_no_colonial_trade': translate('GuerreEtCroissance', 'exports_no_colonial_trade', lang), + 'navigation': translate('GuerreEtCroissance', 'navigation', lang), + } + }, [translate, lang]); + const wars = [ + { + start: 1744, + end: 1748, + name: 'succession Autriche' + }, + { + start: 1756, + end: 1763, + name: 'sept ans' + }, + { + start: 1776, + end: 1783, + name: 'indépendance américaine' + }, + ]; return ( <> setActiveYear(y)} xScale={xScale} gutter={gutter} + seriesLabels={seriesLabels} + wars={wars} + lang={lang} displayYTicks /> : @@ -586,6 +317,9 @@ export default function GuerreEtCroissance({ activeYear={activeYear} onSetActiveYear={y => setActiveYear(y)} gutter={gutter} + seriesLabels={seriesLabels} + wars={wars} + lang={lang} displayYTicks={index === visibleDirections.length - 1} /> @@ -610,7 +344,7 @@ export default function GuerreEtCroissance({ className="navigation-ui-container" >

- ← Données de navigation + ← {translate('GuerreEtCroissance', 'navigation-interface-title', lang)}

    { @@ -648,7 +382,7 @@ export default function GuerreEtCroissance({ className="legend" >

    - Légende + {translate('GuerreEtCroissance', 'legend-title', lang)}

    • @@ -659,7 +393,7 @@ export default function GuerreEtCroissance({ display: 'inline-block', }} > - Projection d'une valeur estimée par régression à partir de la période de paix précédente + {translate('GuerreEtCroissance', 'legend-slope', lang)}
    • - +1%/an + +1%/{translate('GuerreEtCroissance', 'year', lang)} - Croissance annuelle moyenne + {translate('GuerreEtCroissance', 'legend-growth', lang)}
    • @@ -688,7 +422,7 @@ export default function GuerreEtCroissance({ +2% - Moyenne de l'estimation de la perte ou du gain en temps de guerre + {translate('GuerreEtCroissance', 'legend-loss', lang)}
@@ -723,18 +457,20 @@ export default function GuerreEtCroissance({ y={topLabelsHeight - 10} width={sideWidth * 1.5} height={height} - style={{pointerEvents: 'none'}} + style={{ pointerEvents: 'none' }} > -
+
- -

Afficher les directions :

+ +

+ {translate('GuerreEtCroissance', 'filters-directions-title', lang)} +

    { defaultDirections @@ -755,7 +491,9 @@ export default function GuerreEtCroissance({ }) }
-

Afficher les séries :

+

+ {translate('GuerreEtCroissance', 'filters-series-title', lang)} +

    { defaultSeries @@ -770,7 +508,7 @@ export default function GuerreEtCroissance({ } return (
  • - {series} + {translate('GuerreEtCroissance', series, lang)}
    • ) }) diff --git a/src/visualizations/GuerreEtCroissance/LineSeries.js b/src/visualizations/GuerreEtCroissance/LineSeries.js new file mode 100644 index 00000000..f26a6d19 --- /dev/null +++ b/src/visualizations/GuerreEtCroissance/LineSeries.js @@ -0,0 +1,299 @@ +import { range } from "lodash"; + +import './GuerreEtCroissance.scss'; +import { scaleLinear } from "d3-scale"; +import { max } from "d3-array"; +import { formatNumber } from "../../utils/misc"; +import translate from "../../utils/translate"; + +const MIN_YEAR = 1720; +const MAX_YEAR = 1790; + +const LineSeries = ({ + width, + height, + data: inputData, + xScale, + yDomain: initialYDomain, + seriesLabels, + gutter, + displayYTicks, + activeYear, + onSetActiveYear, + tickFormat, + lang, + wars, + id, +}) => { + if (!inputData || !inputData[0]) { + return null; + } + const data = inputData.filter(d => d.value > 0) + // .map(d => { + // let cleanSlope = 0; + // if (d.slope.length) { + // const part2 = d.slope.split(' ').pop(); + // cleanSlope = +part2.split('%')[0] + // } + // return { + // ...d, + // cleanSlope, + // } + // }) + let cleanSlope = 0; + if (inputData[0].slope.length) { + const part2 = inputData[0].slope.split(' ').pop(); + cleanSlope = +part2.split('%')[0] + } + const yDomain = initialYDomain || [0, max(data.map(d => d.value))]; + let yTickSpan = 50000000; + if (yDomain[1] <= 10000) { + yTickSpan = 500; + } else if (yDomain[1] <= 1000000) { + yTickSpan = 50000; + } else if (yDomain[1] <= 5000000) { + yTickSpan = 500000; + } + const avgMem = data[0].avg_loss_mem.split(' ').pop().replace('memoire', ''); + const slope = data[0].slope.split(' ').pop(); + // const avgNoMem = data[0].avg_loss_no_mem.split(' ').pop().replace('memoire', ''); + + const yScale = scaleLinear().domain(yDomain).range([height - gutter, gutter * 2]).nice(); + const yAxisTickValues = range(yDomain[0], yDomain[1] + yTickSpan, yTickSpan); + const endX = xScale(MAX_YEAR + 10); + let tickFontSize = width / 25; + if (tickFontSize < 6) { + tickFontSize = 6; + } + // const slopeExtent = extent(data.map(d => d.cleanSlope)); + // const slopeColorScale = scaleLinear().domain([-1.1, 3.5]).range(['red', 'green']) + const slopeColorScale = scaleLinear().domain([-1.1, 3.5]).range(['lightgrey', '#336D7C']); + const lossColorScale = scaleLinear().domain([-60, 60]).range(['#FEA43B', 'green']); + + + return ( + + + { + yAxisTickValues + .map(value => { + const y = yScale(value); + return ( + + + { + displayYTicks ? + <> + + + + {tickFormat(value)} + + + + : null + } + + + ) + }) + } + + { + wars.map(({ start, end, name }) => { + const x1 = xScale(start); + const x2 = xScale(end); + return ( + + ) + }) + } + + { + activeYear ? + + : null + } + { + data + .map(({ year: year1, value: value1 }, index) => { + const next = data[index + 1]; + if (!next || next.year !== year1 + 1) { + return null; + } + const { year: year2, value: value2 } = next; + const x1 = xScale(year1); + const y1 = yScale(value1); + const x2 = xScale(year2); + const y2 = yScale(value2); + return ( + + ) + }) + } + { + inputData + .map(({ year: year1, peace_reg_memory: value1 }, index) => { + const next = inputData[index + 1]; + if (!next) { + return null; + } + const { year: year2, peace_reg_memory: value2 } = next; + if (value1 === 0 || value2 === 0) { + return null; + } + const x1 = xScale(year1); + const y1 = yScale(value1); + const x2 = xScale(year2); + const y2 = yScale(value2); + return ( + + ) + }) + } + + { + data + .map(({ year, value }) => { + const x = xScale(year); + const y = yScale(value); + const isActive = activeYear === year; + return ( + + onSetActiveYear(year)} + onMouseLeave={() => onSetActiveYear()} + data-for="guerre-tooltip" + data-tip={ + translate('GuerreEtCroissance', 'tooltip', lang, { + year, + value: formatNumber(parseInt(value)), + loss: formatNumber(parseInt(data.find(d => d.year === year).peace_reg_memory)) + }) + // `En ${year}, valeur de ${formatNumber(parseInt(value))} (perte de ${formatNumber(parseInt(data.find(d => d.year === year).peace_reg_memory))})` + } + /> + + + ) + }) + } + { + slope ? + +
    + {slope} +
    +     + : null + } + + {/* + {slope} + */} + + {(+avgMem.split('%')[0] > 0 ? '+' : '') + avgMem} + + {/* + {avgNoMem} + */} +     + ) +} +export default LineSeries; \ No newline at end of file diff --git a/src/visualizations/Intro/Intro.js b/src/visualizations/Intro/Intro.js index a89603a6..29b2c939 100644 --- a/src/visualizations/Intro/Intro.js +++ b/src/visualizations/Intro/Intro.js @@ -47,7 +47,7 @@ const Intro = ({ if (dataScope === 'world') { title = translate('Intro', 'title-navigo-world', lang)// 'Pays étrangers de départ des navires à destination de Marseille en 1789'; } else { - title = translate('Intro', 'title-navigo-france', lang) // 'Sorties des 10 plus grands ports de France en 1787'; + title = translate('Intro', 'title-navigo-france', lang, {number: topPortsNumber}) // 'Sorties des 10 plus grands ports de France en 1787'; } } else { if (dataScope === 'world') { diff --git a/src/visualizations/LevantNavigation/LevantNavigation.js b/src/visualizations/LevantNavigation/LevantNavigation.js index b7eb9d20..23a77a07 100644 --- a/src/visualizations/LevantNavigation/LevantNavigation.js +++ b/src/visualizations/LevantNavigation/LevantNavigation.js @@ -6,7 +6,6 @@ import { useSpring, animated } from '@react-spring/web'; import ReactTooltip from 'react-tooltip'; import colorsPalettes from '../../utils/colorPalettes'; - const { provinces: provincesPalette } = colorsPalettes; import './LevantNavigation.scss'; @@ -126,7 +125,7 @@ export default function LevantNavigation({ {...{ width, height, - title: atlasMode ? 'Le Levant du point de vue de la navigation' : undefined, + title: atlasMode ? translate('LevantNavigation', 'title', lang) : undefined, projectionTemplate: 'Levant', className: `LevantNavigation ${atlasMode ? 'is-atlas-mode' : ''}`, layers: [ @@ -285,7 +284,7 @@ export default function LevantNavigation({ xmlns="http://www.w3.org/1999/xhtml" className="legend-title" > - Légende + {translate('LevantNavigation', 'legend-title', lang)} inputData.get('compare_french_ships_to_marseille_accross_time.csv') const data = (inputData.get('compare_french_ships_to_marseille_accross_time.csv') || []) - .map(d => ({ + .map(d => { + let translatedState; + switch(d.state) { + case 'Péninsule italienne': + translatedState = translate('PartDesFrancaisDansProvenance', 'provenance-italy', lang) + break; + case 'Espagne': + translatedState = translate('PartDesFrancaisDansProvenance', 'provenance-spain', lang) + break; + case 'Empire ottoman': + translatedState = translate('PartDesFrancaisDansProvenance', 'provenance-ottoman', lang) + break; + case 'Provinces-Unies': + translatedState = translate('PartDesFrancaisDansProvenance', 'provenance-dutch', lang) + break; + case 'Grande-Bretagne et colonies (Terre-Neuve)': + translatedState = translate('PartDesFrancaisDansProvenance', 'provenance-uk', lang) + break; + case 'France': + translatedState = translate('PartDesFrancaisDansProvenance', 'provenance-france', lang) + break; + case 'autre': + translatedState = translate('PartDesFrancaisDansProvenance', 'provenance-other', lang) + default: + break; + } + return { ...d, + state: translatedState, tonnage_french: +d.tonnage_french, share_of_french: +d.share_of_french * 100, order: -Object.keys(provenanceCountries).indexOf(d.state), year: +d.year - })) + }}) .sort((a, b) => { if (a.year > b.year) { return 1; } return -1; }) - // , [inputData]); + // , [inputData, lang]); return (
    d + '%', domain: [0, 100], - title: 'Part des n. français', + title: translate('PartDesFrancaisDansProvenance', 'top-y-axis', lang), sort: { type: 'number', field: 'order' } }, - tooltip: d => `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)` + tooltip: d => translate('PartDesFrancaisDansProvenance', 'top-tooltip', lang, { + year: d.year, + share: d.share_of_french.toFixed(2), + state: d.state, + tonnage: formatNumber(d.tonnage_french) + }) + // `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)` } } /> @@ -74,11 +110,11 @@ export default function PartDesFrancaisDansProvenance({ left: 120 }, data, - title: 'Tonnage estimé des navires français dans les provenances de voyages arrivés à Marseille', + title: translate('PartDesFrancaisDansProvenance', 'bottom-title', lang), layout: "groups", color: { field: 'state', - palette: provenanceCountries + palette: provenanceCountries[lang] }, x: { field: 'year' @@ -87,14 +123,20 @@ export default function PartDesFrancaisDansProvenance({ field: 'tonnage_french', tickFormat: d => formatNumber(d) + ' tx', // domain: [0, 100], - title: 'Tonnage cum.', + title: translate('PartDesFrancaisDansProvenance', 'bottom-y-axis', lang), sort: { type: 'number', field: 'order' } }, hideLegend: true, - tooltip: d => `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)` + tooltip: d => translate('PartDesFrancaisDansProvenance', 'bottom-tooltip', lang, { + year: d.year, + share: d.share_of_french.toFixed(2), + state: d.state, + tonnage: formatNumber(d.tonnage_french) + }) + // `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)` } } /> diff --git a/src/visualizations/StylesNavigation/StylesNavigation.js b/src/visualizations/StylesNavigation/StylesNavigation.js index 9a26a87d..92a71473 100644 --- a/src/visualizations/StylesNavigation/StylesNavigation.js +++ b/src/visualizations/StylesNavigation/StylesNavigation.js @@ -178,6 +178,7 @@ export default function StylesNavigation({ categorie } = callerProps; const [highlightedTonnage, setHighlightedTonnage] = useState(tonnage); + console.log(highlightedTonnage); const [highlightedSteps, setHighlightedSteps] = useState(steps); const [highlightedCategory, setHighlightedCategory] = useState(categorie); // reset from caller props change