pub-solar/obs-portal
5
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

frontend: Flip table in road details panel and make it easier to read

Browse source
This commit is contained in:
Paul Bienkowski 2022-04-06 21:04:01 +02:00
parent 04bf99b7cb
commit cb6c94f7a5
1 changed files with 26 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
frontend/src/pages/MapPage/RoadInfo.tsx
View file

@ -11,7 +11,16 @@ import api from 'api'
import styles from './styles.module.less' import styles from './styles.module.less'
const UNITS = {distanceOvertaker: 'm', distanceStationary: 'm', speed: 'km/h'} const UNITS = {distanceOvertaker: 'm', distanceStationary: 'm', speed: 'km/h'}
const LABELS = {distanceOvertaker: 'Overtaker', distanceStationary: 'Stationary', speed: 'Speed'} const LABELS = {
distanceOvertaker: 'Left',
distanceStationary: 'Right',
speed: 'Speed',
count: 'No. of Measurements',
min: 'Minimum',
median: 'Median',
max: 'Maximum',
mean: 'Average',
}
const ZONE_COLORS = {urban: 'olive', rural: 'brown', motorway: 'purple'} const ZONE_COLORS = {urban: 'olive', rural: 'brown', motorway: 'purple'}
const CARDINAL_DIRECTIONS = ['north', 'north-east', 'east', 'south-east', 'south', 'south-west', 'west', 'north-west'] const CARDINAL_DIRECTIONS = ['north', 'north-east', 'east', 'south-east', 'south', 'south-west', 'west', 'north-west']
const getCardinalDirection = (bearing) => const getCardinalDirection = (bearing) =>
@ -26,23 +35,26 @@ function RoadStatsTable({data}) {
<Table size="small" compact> <Table size="small" compact>
<Table.Header> <Table.Header>
<Table.Row> <Table.Row>
<Table.HeaderCell>Property</Table.HeaderCell> <Table.HeaderCell textAlign="right"></Table.HeaderCell>
<Table.HeaderCell>n</Table.HeaderCell> {['distanceOvertaker', 'distanceStationary', 'speed'].map((prop) => (
<Table.HeaderCell>min</Table.HeaderCell> <Table.HeaderCell key={prop} textAlign="right">
<Table.HeaderCell>q50</Table.HeaderCell> {LABELS[prop]}
<Table.HeaderCell>max</Table.HeaderCell> </Table.HeaderCell>
<Table.HeaderCell>mean</Table.HeaderCell> ))}
<Table.HeaderCell>unit</Table.HeaderCell>
</Table.Row> </Table.Row>
</Table.Header> </Table.Header>
<Table.Body> <Table.Body>
{['distanceOvertaker', 'distanceStationary', 'speed'].map((prop) => ( {['count', 'min', 'median', 'max', 'mean'].map((stat) => (
<Table.Row key={prop}> <Table.Row key={stat}>
<Table.Cell>{LABELS[prop]}</Table.Cell> <Table.Cell>{LABELS[stat]}</Table.Cell>
{['count', 'min', 'median', 'max', 'mean'].map((stat) => ( {['distanceOvertaker', 'distanceStationary', 'speed'].map((prop) => (
<Table.Cell key={stat}>{((data[prop]?.statistics?.[stat]) * ((prop === `speed` && stat != 'count') ? 3.6 : 1)).toFixed(stat === 'count' ? 0 : 2)}</Table.Cell> <Table.Cell key={prop} textAlign="right">
{(data[prop]?.statistics?.[stat] * (prop === `speed` && stat != 'count' ? 3.6 : 1)).toFixed(
stat === 'count' ? 0 : 2
)}
{stat !== 'count' && ` ${UNITS[prop]}`}
</Table.Cell>
))} ))}
<Table.Cell>{UNITS[prop]}</Table.Cell>
</Table.Row> </Table.Row>
))} ))}
</Table.Body> </Table.Body>