Skip to content

Commit

Permalink
Merge pull request #13 from laem/debug
Browse files Browse the repository at this point in the history
v2
  • Loading branch information
laem authored Mar 3, 2020
2 parents 0c32134 + f65fe62 commit 43a89c0
Show file tree
Hide file tree
Showing 21 changed files with 8,545 additions and 9,706 deletions.
7 changes: 1 addition & 6 deletions .eslintrc.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ rules:
react/prop-types: 0
react/jsx-no-target-blank: 0
react/no-unescaped-entities: 0
react/display-name: 1
react/display-name: 0
react-hooks/rules-of-hooks: error
react-hooks/exhaustive-deps: warn
parser: babel-eslint
Expand All @@ -26,11 +26,6 @@ settings:
react:
version: 'detect'

overrides:
- files: ['*.test.js', 'cypress/integration/**/*.js']
env:
mocha: true

globals:
process: false

Expand Down
124 changes: 55 additions & 69 deletions Classement.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,21 @@ import APIUrl from './APIUrl'
import Logo from './Logo'
import villesList from './villesClassées'

export const normalizedScores = data => {
const million = 1000 * 1000
const pedestrianArea = data.pedestrianArea / million,
relativeArea = data.relativeArea / million,
area = data.geoAPI.surface / 100, // looks to be defined in the 'hectares' unit
percentage = (pedestrianArea / relativeArea) * 100
return { pedestrianArea, area, relativeArea, percentage }
}

export function Classement() {
let [villes, setVilles] = useState({})

useEffect(() => {
let promises = villesList.map(ville =>
fetch(APIUrl('score/' + ville)).then(yo => yo.json())
fetch(APIUrl('meta/' + ville)).then(yo => yo.json())
)
Promise.all(promises).then(data => {
let villes2 = data.reduce(
Expand All @@ -23,7 +32,7 @@ export function Classement() {

return (
<>
<Logo />
<Logo animate />
<div
css={`
max-width: 45rem;
Expand All @@ -34,16 +43,16 @@ export function Classement() {
font-weight: normal;
text-align: center;
}
ol {
> ol {
padding: 0;
margin-top: 2rem;
}
ol > li {
> ol > li {
list-style-type: none;
}
li > a {
> ol > li > a {
display: flex;
justify-content: space-between;
padding: 0.3rem 0.8rem;
Expand All @@ -54,7 +63,7 @@ export function Classement() {
0 1px 2px rgba(41, 117, 209, 0.24);
}
li > a:hover {
> ol > li > a:hover {
box-shadow: 0px 2px 4px -1px rgba(41, 117, 209, 0.2),
0px 4px 5px 0px rgba(41, 117, 209, 0.14),
0px 1px 10px 0px rgba(41, 117, 209, 0.12);
Expand All @@ -73,75 +82,52 @@ export function Classement() {
}
`}
>
<h2>Quelles grandes villes françaises sont les plus piétonnes 🚶‍♀️ ?</h2>
<h2>Quelles grandes villes françaises sont les plus piétonnes ?</h2>
{villesEntries.length === 0 && (
<p css="font-weight: 600; margin-top: 3rem; text-align: center">
Chargement en cours ⏳
</p>
)}
<ol>
{villesEntries
.map(([ville, data]) => {
if (!data || !data.geoData) return false
const pedestrianArea = data.pedestrianArea / (1000 * 1000),
area = data.geoData.surface / 100, // looks to be defined in the 'hectares' unit
score = pedestrianArea / area
return [ville, { ...data, score, pedestrianArea, area }]
})
.filter(Boolean)
.sort(([, { score: a1 }], [, { score: a2 }]) => a2 - a1)
.map(([ville, data], i) => {
return (
<li key={ville}>
<Link to={'/' + ville}>
<span css="width: 1.5rem; text-align: center">
{i > 2 ? i + 1 : { 0: '🥇', 1: '🥈', 2: '🥉' }[i]}&nbsp;
</span>
<div css="width: 8rem">{ville}</div>
<div css="width: 4rem;text-align: center">
<span css="font-weight: 600">
{(data.score * 100).toFixed(0)}
{true && (
<ol>
{villesEntries
.map(([ville, data]) => {
if (!data || !data.geoAPI) return false
return [ville, { ...data, ...normalizedScores(data) }]
})
.filter(Boolean)
.sort(([, { percentage: a1 }], [, { percentage: a2 }]) => a2 - a1)
.map(([ville, data], i) => {
return (
<li key={ville}>
<Link to={'/' + ville}>
<span css="width: 1.5rem; text-align: center">
{i > 2 ? i + 1 : { 0: '🥇', 1: '🥈', 2: '🥉' }[i]}&nbsp;
</span>
<small> %</small>
</div>
<div css="width: 8rem; text-align: right">
<span css="font-size: 80%; color: #1e3799">
{data.pedestrianArea.toFixed(1)} sur{' '}
{data.area.toFixed(1)} km²
</span>
</div>
</Link>
</li>
)
})}
</ol>
<div
css={`
margin-top: 2rem;
p {
font-size: 85%;
}
.badge {
background: #1e3799;
padding: 0 0.3rem;
color: white;
border-radius: 0.3rem;
margin: 0 0.1rem;
}
`}
>
<p>
La méthode de calcul des zones piétonnes est en version{' '}
<span className="badge">beta</span>. On remarquera par exemple que
les deux poumons verts de Paris mettent la capitale sur une autre
planète, et il pourrait être légitime de les exclure étant donné
qu'ils ne sont pas intégrés dans la ville.
</p>
<p>
Ces grands parcs mis à part, les scores sont probablement déjà
plutôt représentatifs de l'importance accordée aux piétons.
</p>
</div>
<div css="width: 8rem">{ville}</div>
<div css="width: 4rem;text-align: center">
<span css="font-weight: 600">
{data.percentage.toFixed(0)}
</span>
<small> %</small>
</div>
<div css="width: 8rem; text-align: left">
<span css="font-size: 80%; color: #1e3799">
{data.pedestrianArea.toFixed(1)} sur{' '}
{data.relativeArea.toFixed(1)} km²
</span>

{/* {data.meanStreetWidth +
' | ' +
data.streetsWithWidthCount}
*/}
</div>
</Link>
</li>
)
})}
</ol>
)}
</div>
</>
)
Expand Down
58 changes: 58 additions & 0 deletions DebugBlock.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
import React from 'react'

export default ({
ville,
exceptions,
toggleException,
debugData,
villeExceptions
}) => {
if (!debugData) return null
const { properties } = debugData
const [long, lat] = debugData.geometry.coordinates[0][0]
return (
<div
css={`
background: white;
width: 80%;
margin: 0 auto;
a {
margin: 0.3rem;
}
`}
>
{properties ? (
<>
{' '}
<blockquote>{JSON.stringify(properties, null, 2)}</blockquote>
<a
href={`http://maps.google.com/maps?q=&layer=c&cbll=${lat},${long}`}
target="_blank"
>
Vue Google StreetView
</a>
<a
href={`https://www.openstreetmap.org/${properties.id}`}
target="_blank"
>
Page OSM
</a>
<button onClick={() => toggleException(ville, properties.id)}>
{villeExceptions.includes(properties.id)
? 'Re-sélectionner'
: 'Mettre sur le banc'}
</button>
<button
onClick={() =>
navigator.clipboard.writeText(JSON.stringify(exceptions, null, 2))
}
>
Copier les exceptions
</button>
</>
) : (
"Cliquez sur une forme pour l'inspecter"
)}
</div>
)
}
44 changes: 44 additions & 0 deletions DebugMap.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
import React, { PureComponent } from 'react'
import { Layer, Feature } from 'react-mapbox-gl'

export default class DebugMap extends PureComponent {
render() {
const { villeExceptions, data, setDebugData } = this.props
return (
<>
<Layer
type="fill"
paint={{
'fill-color': 'red',
'fill-opacity': 0.5
}}
>
{data.polygons
.filter(f => villeExceptions.includes(f.properties.id))
.map(polygon => (
<Feature
onClick={() => setDebugData(polygon)}
coordinates={polygon.geometry.coordinates}
></Feature>
))}
</Layer>
<Layer
type="fill"
paint={{
'fill-color': 'blue',
'fill-opacity': 0.5
}}
>
{data.polygons
.filter(f => !villeExceptions.includes(f.properties.id))
.map(polygon => (
<Feature
onClick={() => setDebugData(polygon)}
coordinates={polygon.geometry.coordinates}
></Feature>
))}
</Layer>
</>
)
}
}
Loading

0 comments on commit 43a89c0

Please sign in to comment.