diff --git a/src/components/GeographicMapChart/PointsLayer.js b/src/components/GeographicMapChart/PointsLayer.js index a01e35f3..626981fb 100644 --- a/src/components/GeographicMapChart/PointsLayer.js +++ b/src/components/GeographicMapChart/PointsLayer.js @@ -72,7 +72,7 @@ const PointGroup = ({ layer.size && layer.size.displayMetric && labelSize > 9 ? { + return cleanCityNamesMap[originalName]; +} + const CorrelationPrix = ({ data, width, @@ -47,27 +159,35 @@ const CorrelationPrix = ({ const [layout, setLayout] = useState(DEFAULTS.layout); const [colorBy, setColorBy] = useState(DEFAULTS.colorBy); + useEffect(() => { setLayout(callerProps?.layout || DEFAULTS.layout); setColorBy(callerProps?.colorby || DEFAULTS.colorBy); }, [callerProps?.layout, callerProps?.colorby]); - const originalData = data.get("wheat_correlations_cities.csv"); + const originalData = useMemo(() => data.get("wheat_correlations_cities.csv") + .map(datum => { + return { + ...datum, + label: datum.label || cleanCityName(datum.id) + } + }), [data]); + console.log(originalData.map(d => d.label).join('\n')) // const dataPoints = useMemo(() => { - let dataPoints; - switch (layout) { - case "network": - dataPoints = originalData.map((datum) => ({ - ...datum, - latitude: datum.networkLatitude, - longitude: datum.networkLongitude, - })); - break; - default: - dataPoints = originalData; - break; - } + let dataPoints; + switch (layout) { + case "network": + dataPoints = originalData.map((datum) => ({ + ...datum, + latitude: datum.networkLatitude, + longitude: datum.networkLongitude, + })); + break; + default: + dataPoints = originalData; + break; + } // }, [originalData, layout]); return ( @@ -119,7 +239,7 @@ const CorrelationPrix = ({ radiusRange: [5, 5], labelSizeRange: [14, 14], disableHover: true, - tooltip: (datum) => `${datum.market} (${datum.bassin})`, + tooltip: (datum) => `${datum.label} (${datum.bassin})`, }, ], }}