${counter.day} passages hier
10 | Voir les détails 11 | `; 12 | 13 | type Props = { 14 | counters: CounterStat[]; 15 | highlight: string; 16 | }; 17 | 18 | const options = (highlight: boolean, count: number, max: number) => { 19 | const colors = ['#20B4FF', '#8AD1A4', '#F5EE4A', '#FA7725', '#FE0000']; 20 | const scale = d3.scaleLinear( 21 | [0, max * 0.25, max * 0.5, max * 0.75, max], 22 | colors 23 | ); 24 | return { 25 | color: highlight ? '#CC8811' : scale(count), 26 | }; 27 | }; 28 | 29 | const buildMarker = ( 30 | counter: CounterStat, 31 | hl: boolean, 32 | max: number 33 | ): mapboxgl.Marker => 34 | new mapboxgl.Marker(options(hl, counter.day, max)) 35 | .setLngLat(counter.coordinates) 36 | .setPopup(new mapboxgl.Popup().setHTML(popupHTML(counter))); 37 | 38 | const Map = ({ counters, highlight }: Props) => { 39 | const [map, setMap] = useState(null); 40 | const [markers, setMarkers] = useState({}); 41 | const [lastMarker, setLastMarker] = useState(null); 42 | const mapContainer = useRef(null); 43 | const max = _.maxBy(counters, 'day').day; 44 | 45 | mapboxgl.accessToken = process.env.NEXT_PUBLIC_MAPBOX_TOKEN; 46 | 47 | // useEffect for the initialization of the map 48 | useEffect(() => { 49 | const newMap = new mapboxgl.Map({ 50 | container: mapContainer.current, 51 | style: 'mapbox://styles/mapbox/streets-v11', 52 | center: process.env.NEXT_PUBLIC_MAPBOX_CENTER.split(',').map( 53 | (c) => +c 54 | ) as [number, number], 55 | zoom: parseFloat(process.env.NEXT_PUBLIC_MAPBOX_ZOOM), 56 | }); 57 | newMap.addControl(new mapboxgl.NavigationControl()); 58 | newMap.on('load', () => { 59 | newMap.resize(); 60 | // We reverse to display the smallest counters on the bottom 61 | for (const counter of counters.slice().reverse()) { 62 | const marker = buildMarker(counter, false, max); 63 | marker.addTo(newMap); 64 | markers[counter.id] = marker; 65 | } 66 | setMap(newMap); 67 | }); 68 | }, [counters, markers, max]); 69 | 70 | // useEffect to handle the highlighted marker 71 | useEffect(() => { 72 | if (lastMarker !== null) { 73 | markers[lastMarker].remove(); 74 | } 75 | const counter = counters.find((counter) => counter.id === highlight); 76 | if (counter) { 77 | setLastMarker(highlight); 78 | const marker = buildMarker(counter, true, max); 79 | marker.addTo(map); 80 | markers[counter.id] = marker; 81 | setMarkers(markers); 82 | map.flyTo({ center: counter.coordinates, zoom: 13.5 }); 83 | } 84 | }, [highlight, counters, lastMarker, map, markers, max]); 85 | 86 | return ; 87 | }; 88 | 89 | export default Map; 90 | -------------------------------------------------------------------------------- /components/counter_tile.tsx: -------------------------------------------------------------------------------- 1 | import Link from 'next/link'; 2 | import { CounterStat } from '../lib/types.d'; 3 | 4 | const Num = ({ n }: { n: number }) => ( 5 | {n.toLocaleString('fr-FR')} 6 | ); 7 | 8 | const medal = (rank: number): string => { 9 | if (rank === 1) { 10 | return '🥇'; 11 | } else if (rank === 2) { 12 | return '🥈'; 13 | } else if (rank === 3) { 14 | return '🥉'; 15 | } 16 | return ''; 17 | }; 18 | 19 | type Props = { 20 | stat: CounterStat; 21 | avg: boolean; 22 | rank: number; 23 | counterCount: number; 24 | click: () => void; 25 | }; 26 | 27 | function Counter({ stat, avg, rank, counterCount, click }: Props) { 28 | const week = avg ? Math.round(stat.week / 7) : stat.week; 29 | const month = avg ? Math.round(stat.month / 30) : stat.month; 30 | const year = avg ? Math.round(stat.year / stat.daysThisYear) : stat.year; 31 | const total = avg ? Math.round(stat.total / stat.days) : stat.total; 32 | return ( 33 |43 | Voir la fréquentation détaillée{' '} 44 | 55 |
56 |Page générée le {buildTime}
82 |153 | Source :{' '} 154 | 155 | données ouvertes de la ville de Paris 156 | 157 |
158 |159 | Données sous licence{' '} 160 | ODbL 161 |
162 |163 | 164 | Code source de la page 165 | {' '} 166 | sous licence MIT 167 |
168 |Installé le {detail.date}
} 149 |Page générée le {buildTime}
180 |