Skip to content

Commit

Permalink
Use elevation to show selected stats parameter
Browse files Browse the repository at this point in the history
  • Loading branch information
@tituomin
tituomin committed Feb 11, 2022
1 parent 312b4f0 commit e3104c1
Show file tree
Hide file tree
Showing 5 changed files with 76 additions and 9 deletions.
3 changes: 2 additions & 1 deletion analytics/client/locales/fi.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,5 +27,6 @@
"show-reflexive-trips": "Näytä valittuun alueeseen kohdistuvat matkat",
"transport-mode-share-km": "Kulkumuodon osuus matkasuoritteesta %",
"transport-mode-share-trips": "Kulkumuodon osuus matkoista %",
"transport-modes": "Kulkumuoto"
"transport-modes": "Kulkumuoto",
"choose-property": "Valitse tilastollinen muuttuja"
}
11 changes: 11 additions & 0 deletions analytics/client/src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,6 +98,13 @@ export function MocafAnalytics({ transportModes, areaTypes, visualisationGuideCo
key: ['visualisationState', 'trips', 'selectedArea'],
payload: area
})};
const setStatisticsKey = (property) => {
dispatch({
type: 'set',
key: 'statisticsKey',
payload: property ?? null
})};


const weekSubset = userChoiceState.weekSubset;
let visComponent;
Expand All @@ -108,6 +115,8 @@ export function MocafAnalytics({ transportModes, areaTypes, visualisationGuideCo
<TransportModeShareMap
areaType={areaType}
areaData={areaData}
statisticsKey={userChoiceState.statisticsKey}
setStatisticsKey={setStatisticsKey}
selectedTransportMode={selectedTransportMode}
transportModes={transportModes}
rangeLength={rangeLength}
Expand All @@ -134,6 +143,8 @@ export function MocafAnalytics({ transportModes, areaTypes, visualisationGuideCo
<TransportModeShareMap
areaType={areaType}
areaData={areaData}
statisticsKey={userChoiceState.statisticsKey}
setStatisticsKey={setStatisticsKey}
quantity={userChoiceState.analyticsQuantity}
selectedTransportMode={selectedTransportMode}
transportModes={transportModes}
Expand Down
48 changes: 40 additions & 8 deletions analytics/client/src/Map.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,19 +5,20 @@ import { useTranslation } from 'react-i18next';
import DeckGL from '@deck.gl/react';
import { StyledSpinnerNext as Spinner } from 'baseui/spinner';
import { Layer } from 'baseui/layer';
import {Select, TYPE} from 'baseui/select';
import chroma from 'chroma-js';
import numbro from 'numbro';

import 'maplibre-gl/dist/maplibre-gl.css';

import { MAP_STYLE, getInitialView, getCursor } from './mapUtils';
import { useAreaTopo } from './data';
import { useAreaTopo, areaTypeStatsBoundaries } from './data';
import { AreaPopup, AreaToAreaPopup } from './Popup';
import ColorLegend from './ColorLegend';



function AreaMap({ geoData, getFillColor, getElevation, getTooltip, colorStateKey, weekSubset, selectedArea, setSelectedArea, Popup, scales }) {
function AreaMap({ geoData, getFillColor, getElevation, getTooltip, colorStateKey, weekSubset, selectedArea, setSelectedArea, Popup, scales, selector, statisticsKey }) {
const { bbox, geojson } = geoData;
const [hoverInfo, setHoverInfo] = useState({});
const initialView = getInitialView(bbox);
Expand All @@ -33,7 +34,7 @@ function AreaMap({ geoData, getFillColor, getElevation, getTooltip, colorStateKe
pickable: true,
stroked: true,
filled: true,
//extruded: !!getElevation,
extruded: !!getElevation,
getFillColor: getFillColor,
getLineColor: getLineColor,
lineWidthMinPixels: 1,
Expand All @@ -42,10 +43,11 @@ function AreaMap({ geoData, getFillColor, getElevation, getTooltip, colorStateKe
onClick: (setSelectedArea != null && ((info) => {
setSelectedArea(info?.object?.properties?.id);
})),
//getElevation,
getElevation,
updateTriggers: {
getFillColor: colorStateKey,
getLineColor: hoverInfo?.object?.properties?.id,
getElevation: statisticsKey
}
})
];
Expand All @@ -63,6 +65,7 @@ function AreaMap({ geoData, getFillColor, getElevation, getTooltip, colorStateKe
return (
<div>
<Layer>
{ selector }
{ elements && <ColorLegend title={title} elements={elements} /> }
{ hoverInfo.object && (
<Popup
Expand All @@ -86,6 +89,23 @@ function AreaMap({ geoData, getFillColor, getElevation, getTooltip, colorStateKe
);
}

function StatsPropertySelector ({ properties, selectedProperty, setSelectedProperty }) {
const { t } = useTranslation();
return <div style={{position: 'absolute', bottom: 20, right: 20}}>
<Select
closeOnSelect={true}
ignoreCase={true}
searchable={true}
labelKey='description'
valueKey='identifier'
type={TYPE.search}
value={selectedProperty.identifier != null ? [selectedProperty]: null}
placeholder={t('choose-property')}
onChange={params => setSelectedProperty(params.value[0]?.identifier)}
options={properties}
/></div>;
};

const AREA_ALPHA = 1;

export function TransportModeShareMap({ areaType,
Expand All @@ -96,14 +116,16 @@ export function TransportModeShareMap({ areaType,
weekSubset,
selectedArea,
setSelectedArea,
quantity
quantity,
statisticsKey,
setStatisticsKey
}) {
const geoData = useAreaTopo(areaType);
if (!geoData) return <Spinner />;

const modeId = selectedTransportMode.identifier;
const modeById = new Map(transportModes.map(m => [m.identifier, m]));
const areasById = new Map(areaType.areas.map(area => [parseInt(area.id), {...area}]))
const statisticsBoundaries = areaTypeStatsBoundaries(areaType, statisticsKey);

let getFillColor = d => [0, 0, 0, 0];
let getElevation;
Expand Down Expand Up @@ -138,8 +160,8 @@ export function TransportModeShareMap({ areaType,
getElevation = (d) => {
const id = d.properties.id;
const area = areasById.get(id);
const val = area.data[modeId];
return (val - minLength) / (maxLength - minLength) * 5000;
const val = area.properties.find(v => v.identifier === statisticsKey);
return (val.value - statisticsBoundaries.min) / (statisticsBoundaries.max - statisticsBoundaries.min) * 1000;
};
getFillColor = (d) => {
const id = d.properties.id;
Expand Down Expand Up @@ -184,10 +206,20 @@ export function TransportModeShareMap({ areaType,
];
return { area: {name, identifier}, rel, transportMode: selectedTransportMode?.name, abs, syntheticModes, total, selectedArea: areasById.get(selectedArea) };
};
const selector = statisticsBoundaries != null ? (
<StatsPropertySelector
properties={areaType.propertiesMeta}
selectedProperty={{identifier: statisticsKey}}
setSelectedProperty={setStatisticsKey} />) :
null;

return (
<AreaMap
selector={selector}
statisticsKey={statisticsKey}
scales={scales}
geoData={geoData}
getElevation={statisticsKey == null || statisticsBoundaries == null ? null : getElevation}
Popup={quantity === 'trips' ? AreaToAreaPopup : AreaPopup }
getFillColor={getFillColor}
colorStateKey={colorStateKey}
Expand Down
22 changes: 22 additions & 0 deletions analytics/client/src/data.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -336,3 +336,25 @@ export function usePoiGeojson(poiType) {
}, [poiType.id]);
return poiAreaData;
}

export function areaTypeStatsBoundaries(areaType, statisticsKey) {
if (areaType.propertiesMeta == null) {
return null;
}
const boundaries = {
max: Number.MIN_VALUE, min: Number.MAX_VALUE
};
for (const area of areaType.areas) {
for (let {identifier, value} of area.properties) {
if (identifier !== statisticsKey) {
continue;
}
if (value > boundaries.max) { boundaries.max = value; }
if (value < boundaries.min) { boundaries.min = value; }
if (identifier === statisticsKey) {
break;
}
}
}
return boundaries;
}
1 change: 1 addition & 0 deletions analytics/client/src/userChoiceReducer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ export function initializeUserChoiceState ([initialAreaType, areaTypes]) {
areaTypes,
modalVisible: false,
visualisationState: { trips: { selectedArea: null } },
statisticsKey: null,
};
defaults.dateRange = areaTypeDateRange(
defaults.analyticsQuantity,
Expand Down

0 comments on commit e3104c1

Please sign in to comment.