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

Improve display of road details

Browse source
This commit is contained in:
Paul Bienkowski 2021-11-30 22:04:34 +01:00
parent 61efdeb673
commit 7ad5fad056
1 changed files with 42 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
frontend/src/pages/MapPage.tsx
View file

@ -10,6 +10,7 @@ import {switchMap, distinctUntilChanged} from 'rxjs/operators'
import {Page} from 'components' import {Page} from 'components'
import {useConfig, Config} from 'config' import {useConfig, Config} from 'config'
import api from 'api'
import {roadsLayer, basemap} from '../mapstyles' import {roadsLayer, basemap} from '../mapstyles'
@ -103,6 +104,10 @@ export function CustomMap({
) )
} }
const UNITS = {distanceOvertaker: 'm', distanceStationary: 'm', speed: 'm/s'}
const LABELS = {distanceOvertaker: 'Overtaker', distanceStationary: 'Stationary', speed: 'Speed'}
const ZONE_COLORS = {urban: 'olive', rural: 'brown', motorway: 'purple'}
function CurrentRoadInfo({clickLocation}) { function CurrentRoadInfo({clickLocation}) {
const info = useObservable( const info = useObservable(
(_$, inputs$) => (_$, inputs$) =>
@ -139,43 +144,46 @@ function CurrentRoadInfo({clickLocation}) {
'No road found.' 'No road found.'
) : ( ) : (
<> <>
<Header as="h1">{loading ? '...' : info?.road.name || 'Unnamed way'}</Header> <Header as="h3">{loading ? '...' : info?.road.name || 'Unnamed way'}</Header>
<List> {info?.road.zone && (
<List.Item> <Label size="small" color={ZONE_COLORS[info?.road.zone]}>
<List.Header>Zone</List.Header>
{info?.road.zone} {info?.road.zone}
</List.Item> </Label>
<List.Item> )}
<List.Header>Tags</List.Header>
{info?.road.oneway && ( {info?.road.oneway && (
<Label size="small" color="blue"> <Label size="small" color="blue">
<Icon name="long arrow alternate right" fitted /> oneway <Icon name="long arrow alternate right" fitted /> oneway
</Label> </Label>
)} )}
</List.Item>
<List.Item> <Table size="small" compact>
<List.Header>Statistics</List.Header>
<Table size='small' compact>
<Table.Header> <Table.Header>
<Table.Row><Table.HeaderCell></Table.HeaderCell> <Table.Row>
<Table.HeaderCell>Property</Table.HeaderCell>
<Table.HeaderCell>n</Table.HeaderCell> <Table.HeaderCell>n</Table.HeaderCell>
<Table.HeaderCell>min</Table.HeaderCell> <Table.HeaderCell>min</Table.HeaderCell>
<Table.HeaderCell>q50</Table.HeaderCell> <Table.HeaderCell>q50</Table.HeaderCell>
<Table.HeaderCell>max</Table.HeaderCell> <Table.HeaderCell>max</Table.HeaderCell>
<Table.HeaderCell>mean</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 => <Table.Row key={prop}> {['distanceOvertaker', 'distanceStationary', 'speed'].map((prop) => (
<Table.Cell>{prop}</Table.Cell> <Table.Row key={prop}>
{['count', 'min', 'median', 'max', 'mean'].map(stat => <Table.Cell key={stat}>{info?.[prop]?.statistics?.[stat]?.toFixed(3)}</Table.Cell>)} <Table.Cell>{LABELS[prop]}</Table.Cell>
</Table.Row>)} {['count', 'min', 'median', 'max', 'mean'].map((stat) => (
<Table.Cell key={stat}>
{info?.[prop]?.statistics?.[stat]?.toFixed(stat === 'count' ? 0 : 3)}
</Table.Cell>
))}
<Table.Cell>{UNITS[prop]}</Table.Cell>
</Table.Row>
))}
</Table.Body> </Table.Body>
</Table> </Table>
</List.Item>
</List>
</> </>
) )