From 1a67b0c2db1ccce2c0abd3b11ce2f89e8252e78b Mon Sep 17 00:00:00 2001 From: Robin de Mourat Date: Wed, 14 Aug 2024 11:37:53 +0200 Subject: [PATCH] add a constant color to marseille --- .../LongitudinalTradeChart.js | 13 ++++--- .../TradeDynamicsChart/TradeDynamicsChart.js | 17 ++++++--- .../TradeDynamicsChart.scss | 6 ++++ src/i18n/messages.yml | 4 +-- src/utils/colorPalettes.js | 2 ++ src/visualizations/Intro/Intro.js | 35 +++++++++++++++++++ src/visualizations/Intro/PartnersObjects.js | 14 +++++--- .../LevantNavigation/LevantNavigation.js | 4 +-- .../MarseillePortStructurant.js | 11 +++--- .../PartDesEtrangersDansNavigation.js | 7 ++-- .../StylesNavigation/StylesNavigation.js | 4 +-- 11 files changed, 90 insertions(+), 27 deletions(-) diff --git a/src/components/TradeDynamicsChart/LongitudinalTradeChart.js b/src/components/TradeDynamicsChart/LongitudinalTradeChart.js index df9c34a5..e96c3b8a 100644 --- a/src/components/TradeDynamicsChart/LongitudinalTradeChart.js +++ b/src/components/TradeDynamicsChart/LongitudinalTradeChart.js @@ -10,6 +10,8 @@ import ReactTooltip from "react-tooltip"; import colorsPalettes from "../../utils/colorPalettes"; import { fixSvgDimension } from "../../utils/misc"; +const {marseilleColor} = colorsPalettes; + /** * Improve the display of numbers * @param {string|number} str - the number to prettify @@ -92,6 +94,7 @@ const LongitudinalTradeChart = ({ inputData.filter((d) => (+d.year >= startYear) & (+d.year <= endYear)), [startYear, endYear, inputData] ); + const isMarseille = title.includes('Marseille'); const headerRef = useRef(null); const footerRef = useRef(null); const [height, setHeight] = useState(wholeHeight); @@ -162,7 +165,7 @@ const LongitudinalTradeChart = ({ style={{ background: axisLeftTitle && axisLeftTitle.length - ? colorsPalettes.generic.accent2 + ? isMarseille ? marseilleColor: colorsPalettes.generic.accent2 : undefined, marginLeft: margins.left, }} @@ -225,21 +228,21 @@ const LongitudinalTradeChart = ({ x2={margins.left} y1={yShareScale(value)} y2={yShareScale(value)} - stroke={colorsPalettes.generic.accent2} + stroke={isMarseille ? marseilleColor : colorsPalettes.generic.accent2} /> {Math.round(+value * 100) + "%"} @@ -378,7 +381,7 @@ const LongitudinalTradeChart = ({ fill={ herfindhalField && d[herfindhalField] ? herfindhalColorScale(+d[herfindhalField]) - : colorsPalettes.generic.accent2 + : isMarseille ? marseilleColor : colorsPalettes.generic.accent2 } // opacity={herfindhalField && d[herfindhalField] // ? herfindhalOpacityScale(+d[herfindhalField]) diff --git a/src/components/TradeDynamicsChart/TradeDynamicsChart.js b/src/components/TradeDynamicsChart/TradeDynamicsChart.js index df5862a4..45c10142 100644 --- a/src/components/TradeDynamicsChart/TradeDynamicsChart.js +++ b/src/components/TradeDynamicsChart/TradeDynamicsChart.js @@ -9,6 +9,15 @@ import { useEffect, useState } from "react"; import { omit } from "lodash"; import ReactTooltip from "react-tooltip"; +const formatKind = (kind, lang) => { + if (lang === 'fr') { + if (kind === 'exports') { + return 'exportations'; + } else return 'importations'; + } + return kind; +} + /** * Configurable wrapper for main viz #1 * @param {number} width @@ -82,9 +91,9 @@ const TradeDynamicsChart = (props) => { // start: start, // end: end, // }), - partInPct: (kind) => translate("viz-1-A", "partInPct", lang, { kind }), + partInPct: (kind) => translate("viz-1-A", "partInPct", lang, { kind: formatKind(kind, lang) }), absoluteValue: (kind) => - translate("viz-1-A", "absoluteValue", lang, { kind }), + translate("viz-1-A", "absoluteValue", lang, { kind: formatKind(kind, lang) }), regressionTitle: (slope) => translate("viz-1-A", "regressionTitle", lang, { slope }), // herfindalLegendTitle: () => @@ -163,7 +172,7 @@ const TradeDynamicsChart = (props) => { absoluteField="value" regressionField="reg" slopeField="slope" - title={messages.franceOverviewTitle(startYear, endYear, kind)} + title={messages.franceOverviewTitle(startYear, endYear, formatKind(kind, lang))} axisLeftTitle={""} axisRightTitle={messages.absoluteValue(kind)} regressionTitle={messages.regressionTitle( @@ -195,7 +204,7 @@ const TradeDynamicsChart = (props) => { regressionField={`${kind}_${regression}`} slopeField={`${kind}_slope`} //herfindhalField="product_revolutionempire_exports_herfindahl" - title={messages.tradeEvolutionTitle(row, startYear, endYear, kind)} + title={messages.tradeEvolutionTitle(row, startYear, endYear, formatKind(kind, lang))} axisLeftTitle={ kind.includes("colonial") ? undefined : messages.partInPct(kind) } diff --git a/src/components/TradeDynamicsChart/TradeDynamicsChart.scss b/src/components/TradeDynamicsChart/TradeDynamicsChart.scss index dbda4734..f28a59bd 100644 --- a/src/components/TradeDynamicsChart/TradeDynamicsChart.scss +++ b/src/components/TradeDynamicsChart/TradeDynamicsChart.scss @@ -17,6 +17,12 @@ } } + .chart-header { + .visualization-title::first-letter { + text-transform: capitalize; + } + } + h3 { margin-top: 0; margin-bottom: 0.5rem; diff --git a/src/i18n/messages.yml b/src/i18n/messages.yml index 6d265291..7ec60892 100644 --- a/src/i18n/messages.yml +++ b/src/i18n/messages.yml @@ -54,10 +54,10 @@ vizContainer: en: Back to main visualization viz-1-A: franceOverviewTitle: - fr: France ${kind}, ${start}-${end} + fr: ${kind} de la France, ${start}-${end} en: France ${kind}, ${start}-${end} tradeEvolutionTitle: - fr: ${cityName} ${kind}, ${start}-${end} + fr: ${kind} de ${cityName}, ${start}-${end} en: ${cityName} ${kind}, ${start}-${end} partInPct: fr: part des ${kind} fr diff --git a/src/utils/colorPalettes.js b/src/utils/colorPalettes.js index c5a272d5..f2cdbcfd 100644 --- a/src/utils/colorPalettes.js +++ b/src/utils/colorPalettes.js @@ -1,4 +1,6 @@ const colorsPalettes = { + marseilleColor: '#0d94d6', + genericObjectColor: '#ec9712', // orange ui: { colorText: "#403d3d", colorAccent: "#34495e", diff --git a/src/visualizations/Intro/Intro.js b/src/visualizations/Intro/Intro.js index 29b2c939..c9d1ebe6 100644 --- a/src/visualizations/Intro/Intro.js +++ b/src/visualizations/Intro/Intro.js @@ -2,6 +2,7 @@ import { useEffect, useState, useMemo } from 'react'; import GeographicMapChart from '../../components/GeographicMapChart' import { extent, min, max } from "d3-array"; import { scaleLinear } from "d3-scale"; +import palettes from '../../utils/colorPalettes'; import './Intro.scss'; import PartnersObjects from './PartnersObjects'; @@ -10,6 +11,8 @@ import SliderRange from '../../components/SliderRange/SliderRange'; import ReactTooltip from 'react-tooltip'; import translate from '../../utils/translate'; +const {marseilleColor} = palettes; + const Intro = ({ data, width, @@ -137,6 +140,7 @@ const Intro = ({ } } + const MARSEILLE_COORDS = [ 5.2158406, 43.280477 ]; return ( <> @@ -176,6 +180,37 @@ const Intro = ({ } /> }, + { + type: 'custom', + data: [], + renderObjects: ({projection}) => { + const [marseilleX, marseilleY] = projection(MARSEILLE_COORDS); + if (dataScope !== 'world') { + return null; + } + return ( + + + + Marseille + + + ) + } + } ] }} diff --git a/src/visualizations/Intro/PartnersObjects.js b/src/visualizations/Intro/PartnersObjects.js index 7b44f6c9..078aa895 100644 --- a/src/visualizations/Intro/PartnersObjects.js +++ b/src/visualizations/Intro/PartnersObjects.js @@ -2,7 +2,9 @@ import { extent, max } from "d3-array"; import { scaleLinear } from "d3-scale"; import { formatNumber } from "../../utils/misc"; import translate from "../../utils/translate"; +import colorsPalettes from "../../utils/colorPalettes"; +const {marseilleColor, genericObjectColor} = colorsPalettes; const PartnersObjects = ({ // data, projection, @@ -152,6 +154,9 @@ const PartnersObjects = ({ }); } } + if (partner === 'Marseille') { + console.log('ok marseille', [latitude, longitude]) + } return ( @@ -182,7 +187,7 @@ const PartnersObjects = ({ cx={0} cy={0} r={dataType === 'toflit18' ? radius : max([triangleWidth, triangleHeight]) / 2 + 5} - fill={dataType === 'toflit18' ? "red" : "rgba(0,0,0,0.07)"} + fill={dataType === 'toflit18' ? partner === 'Marseille' ? marseilleColor : genericObjectColor : "rgba(0,0,0,0.07)"} /> { dataType === 'navigo' && @@ -191,13 +196,14 @@ const PartnersObjects = ({ > } - + diff --git a/src/visualizations/LevantNavigation/LevantNavigation.js b/src/visualizations/LevantNavigation/LevantNavigation.js index 23a77a07..81de9c2c 100644 --- a/src/visualizations/LevantNavigation/LevantNavigation.js +++ b/src/visualizations/LevantNavigation/LevantNavigation.js @@ -6,7 +6,7 @@ import { useSpring, animated } from '@react-spring/web'; import ReactTooltip from 'react-tooltip'; import colorsPalettes from '../../utils/colorPalettes'; -const { provinces: provincesPalette } = colorsPalettes; +const { provinces: provincesPalette, marseilleColor } = colorsPalettes; import './LevantNavigation.scss'; import { extent } from 'd3-array'; @@ -250,7 +250,7 @@ export default function LevantNavigation({ x={-width / 100} y={-width / 100} transform={'rotate(45)'} - fill="red" + fill={marseilleColor} stroke="white" /> diff --git a/src/visualizations/MarseillePortStructurant/MarseillePortStructurant.js b/src/visualizations/MarseillePortStructurant/MarseillePortStructurant.js index 11c513ce..2f818182 100644 --- a/src/visualizations/MarseillePortStructurant/MarseillePortStructurant.js +++ b/src/visualizations/MarseillePortStructurant/MarseillePortStructurant.js @@ -9,7 +9,7 @@ import GeographicMapChart from '../../components/GeographicMapChart'; import colorsPalettes from '../../utils/colorPalettes'; -const { provinces: provincesPalette } = colorsPalettes; +const { provinces: provincesPalette, marseilleColor } = colorsPalettes; import './MarseillePortStructurant.scss'; import { min, max } from 'd3-array'; @@ -40,7 +40,6 @@ const labelsCoordinates = { "Bastia": [43, 9], } -const MARSEILLE_COLOR = "red"; const Provinces = ({ data: inputData, projection, @@ -216,7 +215,7 @@ const MapObjects = ({ y={objectY - objectWidth / 2 + 1} width={objectWidth * ratio_to_marseille} height={objectWidth - 2} - fill={MARSEILLE_COLOR} + fill={marseilleColor} />