Show usage count on map

This commit is contained in:
Paul Bienkowski 2022-03-16 22:06:06 +01:00
parent 85fcdea403
commit 6ef233a2a2
2 changed files with 48 additions and 34 deletions

View file

@ -22,6 +22,7 @@ const ROAD_ATTRIBUTE_OPTIONS = [
{value: 'distance_overtaker_max', key: 'distance_overtaker_max', text: 'Overtaker distance maximum'},
{value: 'distance_overtaker_median', key: 'distance_overtaker_median', text: 'Overtaker distance median'},
{value: 'overtaking_event_count', key: 'overtaking_event_count', text: 'Event count'},
{value: 'usage_count', key: 'usage_count', text: 'Usage count'},
]
function LayerSidebar({

View file

@ -1,67 +1,80 @@
import {useMemo} from 'react'
import {useSelector} from 'react-redux'
import produce from 'immer'
import _ from 'lodash'
import { useMemo } from "react";
import { useSelector } from "react-redux";
import produce from "immer";
import _ from "lodash";
type BaseMapStyle = 'positron' | 'bright'
type BaseMapStyle = "positron" | "bright";
type RoadAttribute =
| 'distance_overtaker_mean'
| 'distance_overtaker_min'
| 'distance_overtaker_max'
| 'distance_overtaker_median'
| 'overtaking_event_count'
| "distance_overtaker_mean"
| "distance_overtaker_min"
| "distance_overtaker_max"
| "distance_overtaker_median"
| "overtaking_event_count"
| "usage_count";
export type MapConfig = {
baseMap: {
style: BaseMapStyle
}
style: BaseMapStyle;
};
obsRoads: {
show: boolean
showUntagged: boolean
attribute: RoadAttribute
maxCount: number
}
show: boolean;
showUntagged: boolean;
attribute: RoadAttribute;
maxCount: number;
};
obsEvents: {
show: boolean
}
}
show: boolean;
};
};
export const initialState: MapConfig = {
baseMap: {
style: 'positron',
style: "positron",
},
obsRoads: {
show: true,
showUntagged: true,
attribute: 'distance_overtaker_median',
attribute: "distance_overtaker_median",
maxCount: 20,
},
obsEvents: {
show: false,
},
}
};
type MapConfigAction = {type: 'MAP_CONFIG.SET_FLAG'; payload: {flag: string; value: any}}
type MapConfigAction = {
type: "MAP_CONFIG.SET_FLAG";
payload: { flag: string; value: any };
};
export function setMapConfigFlag(flag: string, value: unknown): MapConfigAction {
return {type: 'MAP_CONFIG.SET_FLAG', payload: {flag, value}}
export function setMapConfigFlag(
flag: string,
value: unknown
): MapConfigAction {
return { type: "MAP_CONFIG.SET_FLAG", payload: { flag, value } };
}
export function useMapConfig() {
const mapConfig = useSelector((state) => state.mapConfig)
const result = useMemo(() => _.merge({}, initialState, mapConfig), [mapConfig])
return result
const mapConfig = useSelector((state) => state.mapConfig);
const result = useMemo(
() => _.merge({}, initialState, mapConfig),
[mapConfig]
);
return result;
}
export default function mapConfigReducer(state: MapConfig = initialState, action: MapConfigAction) {
export default function mapConfigReducer(
state: MapConfig = initialState,
action: MapConfigAction
) {
switch (action.type) {
case 'MAP_CONFIG.SET_FLAG':
case "MAP_CONFIG.SET_FLAG":
return produce(state, (draft) => {
_.set(draft, action.payload.flag, action.payload.value)
})
_.set(draft, action.payload.flag, action.payload.value);
});
default:
return state
return state;
}
}