Merge pull request #134 from laem/rev

Visualisation des réseaux structurants

.gitignore

@@ -7,3 +7,4 @@ dist/
 .env
 .next/
 web/.next/
+web/.env.local

brouterRequest.js

@@ -2,9 +2,9 @@ import http from 'http'
 import https from 'https'
 
 const host =
-	process.env.NODE_ENV === 'production'
-		? 'https://brouter.osc-fr1.scalingo.io'
-		: 'http://localhost:17777'
+	process.env.LOCAL_ROUTER === 'true'
+		? 'http://localhost:17777'
+		: 'https://brouter.osc-fr1.scalingo.io'
 
 export default (query) => {
 	const url = `${host}/brouter?lonlats=${query}&profile=safety&alternativeidx=0&format=geojson`

computeCycling.js

@@ -27,16 +27,15 @@ const createBikeRouterQuery = (from, to) =>
 
 const createItinerary = (from, to) => {
 	const query = createBikeRouterQuery([from.lat, from.lon], [to.lat, to.lon])
-	return brouterRequest(
-		query,
-		(json) =>
-			console.log('brouter response') || {
-				...json,
-				fromPoint: from.id,
-				toPoint: to.id,
-				backboneRide: to.tags.amenity === 'townhall',
-			}
-	)
+	return brouterRequest(query).then((json) => {
+		console.log('brouter response')
+		return {
+			...json,
+			fromPoint: from.id,
+			toPoint: to.id,
+			backboneRide: to.tags.amenity === 'townhall',
+		}
+	})
 }
 
 export const segmentGeoJSON = (geojson) => {
@@ -185,6 +184,7 @@ export const isValidRide = (ride) =>
 export default async (ville, inform = () => null) => {
 	inform({ loading: `Les points vont être téléchargés` })
 	const points = await pointsProcess(ville)
+	console.log('Un point', points[0])
 	inform({ loading: `Points téléchargés : ${points.length} points` })
 	const pointsCenter = computePointsCenter(points)
 

cyclingPointsRequests.js

@@ -1,4 +1,4 @@
-const OverpassInstance = 'https://overpass-api.de/api/interpreter'
+export const OverpassInstance = 'https://overpass-api.de/api/interpreter'
 //const OverpassInstance = 'https://overpass.kumi.systems/api/interpreter'
 
 const testHasLevel = (name) => /.+\.\d$/.test(name)

isSafePath.js

@@ -26,3 +26,6 @@ export const isSafePathV2Diff = (tags) =>
 
 // cycleway=share_busway, cycleway=lane are not considered safe segments
 // cycleway=shared_lane is not strong enough, there is no priority given to bikes, it's just a reminder
+
+export const isVoieVerte = (tags) =>
+	tags.includes('highway=path') && tags.includes('bicycle=designated')

lineStringDistance.ts

@@ -0,0 +1,22 @@
+import point from 'turf-point'
+import distance from '@turf/distance'
+
+export default function (coordinates) {
+	const result = coordinates.reduce(
+		(memo, next) => {
+			if (!memo.lastPoint) return { total: 0, lastPoint: next }
+			const newDistance = distanceBetweenPoints(memo.lastPoint, next)
+
+			return { total: memo.total + newDistance, lastPoint: next }
+		},
+		{ total: 0, lastPoint: null }
+	)
+	return result.total
+}
+
+const distanceBetweenPoints = (latLng, latLng2) => {
+	var from = point(latLng)
+	var to = point(latLng2)
+
+	return distance(from, to)
+}

package.json

@@ -8,8 +8,8 @@
 	"scripts": {
 		"clean": "rm -rf cache/*",
 		"s": "DEBUG=socket* node -r esm server.js",
+		"start-local-router": "LOCAL_ROUTER=true node --insecure-http-parser --optimize_for_size --max_old_space_size=3200 -r esm server.js --watch",
 		"start": "node --insecure-http-parser --optimize_for_size --max_old_space_size=3200 -r esm server.js --watch",
-		"start-prod": "NODE_ENV=production node --insecure-http-parser --optimize_for_size --max_old_space_size=3200 -r esm server.js",
 		"comment": "https://devcenter.heroku.com/articles/node-memory-use"
 	},
 	"reactSnap": {
@@ -40,6 +40,7 @@
 		"@turf/center": "^6.5.0",
 		"@turf/distance": "^6.5.0",
 		"@turf/helpers": "^6.5.0",
+		"@turf/length": "^6.5.0",
 		"@vercel/analytics": "^1.1.1",
 		"apicache": "^1.6.3",
 		"aws-sdk": "^2.1233.0",

pointsRequest.js

@@ -4,11 +4,12 @@ import { polygon } from '@turf/helpers'
 import point from 'turf-point'
 import { createTurfPointCollection } from './cyclingGeoStudio'
 import { shuffleArray } from './utils'
-import APIUrl from './web/app/APIUrl'
+
+const APIUrl = 'http://localhost:' + (process.env.PORT || 3000)
 
 export const pointsRequest = async (city, randomFilter = 100) => {
-	const townhallUrl = `${APIUrl}points/${city}/townhalls`
-	const transportUrl = APIUrl + `points/${city}/stops`
+	const townhallUrl = `${APIUrl}/points/${city}/townhalls`
+	const transportUrl = APIUrl + `/points/${city}/stops`
 	try {
 		const townhallResponse = await fetch(townhallUrl),
 			townhallPoints = await townhallResponse.json()

segmentsSafeDistance.ts

@@ -0,0 +1,27 @@
+import isSafePath from './isSafePath'
+import lineStringDistance from './lineStringDistance'
+
+export default function (segments, safeExtension) {
+	const { safe, unsafe } = segments.reduce(
+		(memo, next) => {
+			const coordinates = next.geometry.coordinates
+			const segmentDistance = lineStringDistance(coordinates)
+			const distance = segmentDistance * (next.properties.rides?.length || 0)
+			const safe =
+				isSafePath(next.properties.tags) ||
+				(safeExtension && safeExtension(next.properties.tags))
+			if (!safeExtension && safe !== next.properties.isSafePath)
+				return new Error(
+					"Le serveur et le client ne sont pas d'accord sur le caractère sécurisé du segment"
+				)
+
+			return {
+				safe: memo.safe + (safe ? distance : 0),
+				unsafe: memo.unsafe + (safe ? 0 : distance),
+			}
+		},
+		{ safe: 0, unsafe: 0 }
+	)
+
+	return (safe / (safe + unsafe)) * 100
+}

server.js

@@ -27,7 +27,7 @@ app.use(
 )
 app.use(compression())
 
-let port = process.env.PORT
+const port = process.env.PORT
 
 const httpServer = app.listen(port, function () {
 	console.log(
@@ -50,7 +50,7 @@ const cache = apicache.options({
 
 const onlyStatus200 = (req, res) => res.statusCode === 200
 
-console.log('io initialisaed')
+console.log('io initialised')
 
 io.on('connection', (socket) => {
 	console.log('a user connected')

web/CyclableScoreVignette.tsx

@@ -54,7 +54,7 @@ export default ({ data, margin = '' }) => {
 				title={`${score.toFixed(2)} % des km testés sont cyclables`}
 				css={`
 					text-align: center;
-					margin: 0 2rem;
+					margin: 0 2vw;
 					${margin && `margin: ${margin} !important;`}
 					@media (min-width: 800px) {
 						font-size: 260%;
@@ -74,6 +74,10 @@ export default ({ data, margin = '' }) => {
 					small {
 						font-size: 50%;
 					}
+					@media (max-width: 800px) {
+						font-size: 120%;
+						width: 3.5rem;
+					}
 				`}
 			>
 				<div>
@@ -88,7 +92,7 @@ export default ({ data, margin = '' }) => {
 					/10
 				</span>
 			</div>
-			<Evolution data={data} />
+			{data.previousData && <Evolution data={data} />}
 		</Wrapper>
 	)
 }

web/app/APIUrl.js

@@ -1,4 +1,3 @@
-const url = `https://api.villes.plus/`
-//const url = `http://localhost:3000/`
+const url = process.env.NEXT_PUBLIC_API_URL || `https://api.villes.plus/`
 
 export default url

web/app/CityResult.js

@@ -5,7 +5,7 @@ import villesList from '../villesClassées'
 import CityNumericResult from './CityNumericResult'
 import { Content, ImageWrapper, Li, Title } from './CityResultUI'
 
-const métropoleToVille = villesList.reduce(
+export const métropoleToVille = villesList.reduce(
 	(memo, next) =>
 		typeof next === 'string'
 			? { ...memo, [next]: next }

web/app/CityResultUI.ts

@@ -37,10 +37,10 @@ export const ImageWrapper = styled.div`
 	position: relative;
 `
 export const SmallImageWrapper = styled.div`
-	width: 90%;
-	height: 6rem;
+	width: 100%;
+	height: 4.5rem;
 	@media (min-width: 800px) {
-		height: 8rem;
+		height: 7rem;
 	}
 	img {
 		border-radius: 1rem;
@@ -54,6 +54,7 @@ export const ImageAndScoreWrapper = styled.div`
 	display: flex;
 	justify-content: start;
 	align-items: center;
+	width: calc(11rem + 30vw);
 `
 export const LoadingMessage = styled.div`
 	margin: 0.6rem;