From 1823f9eda057f1acd315035a72a9a387d8f871c7 Mon Sep 17 00:00:00 2001
From: Tuomas Suutari <tuomas.suutari@anders.fi>
Date: Fri, 9 Feb 2018 11:34:54 +0200
Subject: [PATCH] Dashboard: Implement initial version of the app

Following features are currently implemented:

 * A Map showing parking regions (ParkingRegionMap)

    - Map shows usage of each region by a color from green to red

    - Map shows more info about a region by clicking a region

    - Regions can be selected by clicking them on the map

 * Region can be selected or deselected from a dropdown (RegionSelector)

 * Possibility to select a date and time of interest; by default uses
   the current time (TimeSelect)

   - Time updates automatically every 5 minutes

There is also some static non-updating dummy UI components shown to
demonstrate features that will be implemented in the future:

  * A table that will list currently active parkings

  * A bar diagram that will show histogram of the parking counts from
    last 24h (or whatever time range is selected)

Layout is implemented with Bootstrap 4.

Map is implemented using Leaflet.

API communication is done with Axios.
---
 dashboard/.indium                             |   0
 dashboard/LICENSE                             |  21 ++
 dashboard/package.json                        |  35 +-
 dashboard/public/index.html                   |   2 +-
 dashboard/src/App.css                         |  28 --
 dashboard/src/App.tsx                         |  22 --
 dashboard/src/actions.ts                      |  65 ++++
 dashboard/src/api/index.ts                    |  66 ++++
 dashboard/src/api/types.ts                    |  60 ++++
 .../src/components/CalendarContainer.d.ts     |  12 +
 .../src/components/ParkingRegionsMap.css      |   3 +
 .../src/components/ParkingRegionsMap.tsx      | 199 ++++++++++++
 dashboard/src/components/RegionSelector.css   |   5 +
 dashboard/src/components/RegionSelector.tsx   |  47 +++
 dashboard/src/components/TimeSelect.css       |  26 ++
 dashboard/src/components/TimeSelect.tsx       | 197 +++++++++++
 dashboard/src/components/types.ts             |  29 ++
 dashboard/src/components/utils.ts             |   5 +
 dashboard/src/config.ts                       |   6 +
 dashboard/src/containers/App.tsx              |   9 +
 dashboard/src/containers/Dashboard.css        |  19 ++
 dashboard/src/containers/Dashboard.tsx        | 261 +++++++++++++++
 dashboard/src/containers/ParkingRegionsMap.ts |  48 +++
 dashboard/src/containers/RegionSelector.ts    |  35 ++
 dashboard/src/containers/TimeSelect.ts        |  35 ++
 dashboard/src/converters.ts                   |  30 ++
 dashboard/src/dispatchers.ts                  |  86 +++++
 dashboard/src/global.d.ts                     |   3 +
 dashboard/src/index.tsx                       |  47 ++-
 dashboard/src/logo.svg                        |   7 -
 dashboard/src/reducers.ts                     | 107 ++++++
 dashboard/src/types.ts                        |  37 +++
 dashboard/tsconfig.json                       |   1 +
 dashboard/yarn.lock                           | 305 +++++++++++++++++-
 34 files changed, 1790 insertions(+), 68 deletions(-)
 create mode 100644 dashboard/.indium
 create mode 100644 dashboard/LICENSE
 delete mode 100644 dashboard/src/App.css
 delete mode 100644 dashboard/src/App.tsx
 create mode 100644 dashboard/src/actions.ts
 create mode 100644 dashboard/src/api/index.ts
 create mode 100644 dashboard/src/api/types.ts
 create mode 100644 dashboard/src/components/CalendarContainer.d.ts
 create mode 100644 dashboard/src/components/ParkingRegionsMap.css
 create mode 100644 dashboard/src/components/ParkingRegionsMap.tsx
 create mode 100644 dashboard/src/components/RegionSelector.css
 create mode 100644 dashboard/src/components/RegionSelector.tsx
 create mode 100644 dashboard/src/components/TimeSelect.css
 create mode 100644 dashboard/src/components/TimeSelect.tsx
 create mode 100644 dashboard/src/components/types.ts
 create mode 100644 dashboard/src/components/utils.ts
 create mode 100644 dashboard/src/config.ts
 create mode 100644 dashboard/src/containers/App.tsx
 create mode 100644 dashboard/src/containers/Dashboard.css
 create mode 100644 dashboard/src/containers/Dashboard.tsx
 create mode 100644 dashboard/src/containers/ParkingRegionsMap.ts
 create mode 100644 dashboard/src/containers/RegionSelector.ts
 create mode 100644 dashboard/src/containers/TimeSelect.ts
 create mode 100644 dashboard/src/converters.ts
 create mode 100644 dashboard/src/dispatchers.ts
 create mode 100644 dashboard/src/global.d.ts
 delete mode 100644 dashboard/src/logo.svg
 create mode 100644 dashboard/src/reducers.ts
 create mode 100644 dashboard/src/types.ts

diff --git a/dashboard/.indium b/dashboard/.indium
new file mode 100644
index 00000000..e69de29b
diff --git a/dashboard/LICENSE b/dashboard/LICENSE
new file mode 100644
index 00000000..5f031604
--- /dev/null
+++ b/dashboard/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017-2018, City of Helsinki
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/dashboard/package.json b/dashboard/package.json
index bad72a06..35874e76 100644
--- a/dashboard/package.json
+++ b/dashboard/package.json
@@ -2,10 +2,32 @@
   "name": "parkkidash",
   "version": "0.1.0",
   "private": true,
+  "license": "MIT",
   "dependencies": {
+    "axios": "^0.17.1",
+    "bootstrap": "^4.0.0",
+    "chart.js": "^2.7.1",
+    "chroma-js": "^1.3.4",
+    "font-awesome": "^4.7.0",
+    "jquery": "^3.3.1",
+    "leaflet": "^1.3.1",
+    "lodash": "^4.17.4",
+    "moment": "^2.20.1",
+    "popper.js": "^1.12.9",
+    "prop-types": "^15.6.0",
     "react": "^16.2.0",
+    "react-chartjs-2": "^2.7.0",
+    "react-datetime": "^2.10.3",
     "react-dom": "^16.2.0",
-    "react-scripts-ts": "2.13.0"
+    "react-leaflet": "^1.8.0",
+    "react-redux": "^5.0.6",
+    "react-scripts-ts": "2.13.0",
+    "react-select": "^1.2.1",
+    "react-table": "^6.7.6",
+    "reactstrap": "^5.0.0-beta",
+    "redux": "^3.7.2",
+    "redux-logger": "^3.0.6",
+    "redux-thunk": "^2.2.0"
   },
   "scripts": {
     "start": "react-scripts-ts start",
@@ -14,10 +36,21 @@
     "eject": "react-scripts-ts eject"
   },
   "devDependencies": {
+    "@types/axios": "^0.14.0",
+    "@types/chart.js": "^2.7.6",
+    "@types/chroma-js": "^1.3.3",
     "@types/jest": "^22.1.1",
+    "@types/leaflet": "^1.2.5",
+    "@types/lodash": "^4.14.98",
     "@types/node": "^9.4.0",
     "@types/react": "^16.0.35",
     "@types/react-dom": "^16.0.3",
+    "@types/react-leaflet": "^1.1.4",
+    "@types/react-redux": "^5.0.14",
+    "@types/react-select": "^1.2.0",
+    "@types/react-table": "^6.7.2",
+    "@types/reactstrap": "^5.0.12",
+    "@types/redux-logger": "^3.0.5",
     "typescript": "^2.6.2"
   }
 }
diff --git a/dashboard/public/index.html b/dashboard/public/index.html
index ed0ebafa..251d409c 100644
--- a/dashboard/public/index.html
+++ b/dashboard/public/index.html
@@ -19,7 +19,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Parkkidash</title>
   </head>
   <body>
     <noscript>
diff --git a/dashboard/src/App.css b/dashboard/src/App.css
deleted file mode 100644
index c5c6e8a6..00000000
--- a/dashboard/src/App.css
+++ /dev/null
@@ -1,28 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 80px;
-}
-
-.App-header {
-  background-color: #222;
-  height: 150px;
-  padding: 20px;
-  color: white;
-}
-
-.App-title {
-  font-size: 1.5em;
-}
-
-.App-intro {
-  font-size: large;
-}
-
-@keyframes App-logo-spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
-}
diff --git a/dashboard/src/App.tsx b/dashboard/src/App.tsx
deleted file mode 100644
index 921bb811..00000000
--- a/dashboard/src/App.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import * as React from 'react';
-import './App.css';
-
-const logo = require('./logo.svg');
-
-class App extends React.Component {
-  render() {
-    return (
-      <div className="App">
-        <header className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <h1 className="App-title">Welcome to React</h1>
-        </header>
-        <p className="App-intro">
-          To get started, edit <code>src/App.tsx</code> and save to reload.
-        </p>
-      </div>
-    );
-  }
-}
-
-export default App;
diff --git a/dashboard/src/actions.ts b/dashboard/src/actions.ts
new file mode 100644
index 00000000..58eb65ad
--- /dev/null
+++ b/dashboard/src/actions.ts
@@ -0,0 +1,65 @@
+import { Moment } from 'moment';
+
+import { RegionList, RegionStatsList } from './api/types';
+import { MapViewport } from './components/types';
+
+interface SetMapViewportAction {
+    type: 'SET_MAP_VIEWPORT';
+    viewport: MapViewport;
+}
+export function setMapViewport(viewport: MapViewport): SetMapViewportAction {
+    return {type: 'SET_MAP_VIEWPORT', viewport};
+}
+
+interface SetDataTimeAction {
+    type: 'SET_DATA_TIME';
+    time: Moment;
+}
+export function setDataTime(time: Moment): SetDataTimeAction {
+    return {type: 'SET_DATA_TIME', time};
+}
+
+interface SetAutoUpdateAction {
+    type: 'SET_AUTO_UPDATE';
+    value: boolean;
+}
+export function setAutoUpdate(value: boolean): SetAutoUpdateAction {
+    return {type: 'SET_AUTO_UPDATE', value};
+}
+
+interface SetSelectedRegionAction {
+    type: 'SET_SELECTED_REGION';
+    regionId: string|null;
+}
+export function setSelectedRegion(regionId: string|null):
+SetSelectedRegionAction {
+    return {type: 'SET_SELECTED_REGION', regionId};
+}
+
+interface ReceiveRegionStatsAction {
+    type: 'RECEIVE_REGION_STATS';
+    data: RegionStatsList;
+    time: Moment;
+}
+export function receiveRegionStats(
+    data: RegionStatsList,
+    time: Moment
+): ReceiveRegionStatsAction {
+    return {type: 'RECEIVE_REGION_STATS', data, time};
+}
+
+interface ReceiveRegionInfoAction {
+    type: 'RECEIVE_REGION_INFO';
+    data: RegionList;
+}
+export function receiveRegionInfo(data: RegionList): ReceiveRegionInfoAction {
+    return {type: 'RECEIVE_REGION_INFO', data};
+}
+
+export type Action =
+    SetMapViewportAction |
+    SetDataTimeAction |
+    SetAutoUpdateAction |
+    SetSelectedRegionAction |
+    ReceiveRegionStatsAction |
+    ReceiveRegionInfoAction;
diff --git a/dashboard/src/api/index.ts b/dashboard/src/api/index.ts
new file mode 100644
index 00000000..03eda678
--- /dev/null
+++ b/dashboard/src/api/index.ts
@@ -0,0 +1,66 @@
+import * as axios from 'axios';
+import { Moment } from 'moment';
+
+import { RegionList, RegionStatsList } from './types';
+
+interface SuccessCallback<T> {
+    (response: axios.AxiosResponse<T>): void;
+}
+
+interface ErrorHandler {
+    (error: axios.AxiosError): void;
+}
+
+export class Api {
+    public endpoints = {
+        regions: '/monitoring/v1/region/',
+        regionStats: '/monitoring/v1/region_statistics/',
+    };
+
+    private axios: axios.AxiosInstance;
+
+    constructor(baseUrl?: string) {
+        this.axios = axios.default.create({baseURL: baseUrl});
+    }
+
+    setBaseUrl(baseUrl: string) {
+        this.axios.defaults.baseURL = baseUrl;
+    }
+
+    fetchRegions(
+        callback: SuccessCallback<RegionList>,
+        errorHandler: ErrorHandler
+    ) {
+        this._fetchAllPages(this.endpoints.regions, callback, errorHandler);
+    }
+
+    fetchRegionStats(
+        time: Moment,
+        callback: SuccessCallback<RegionStatsList>,
+        errorHandler: ErrorHandler
+    ) {
+        const timeParam = (time) ? '?time=' + time.toISOString() : '';
+        this._fetchAllPages(this.endpoints.regionStats + timeParam,
+                            callback, errorHandler);
+    }
+
+    private _fetchAllPages(
+        url: string,
+        callback: SuccessCallback<{}>,
+        errorHandler: ErrorHandler
+    ) {
+        this.axios.get(url)
+            .then((response) => {
+                callback(response);
+                const nextUrl = response.data.next;
+                if (nextUrl) {
+                    this._fetchAllPages(nextUrl, callback, errorHandler);
+                }
+            })
+            .catch(errorHandler);
+    }
+}
+
+const api = new Api();
+
+export default api;
diff --git a/dashboard/src/api/types.ts b/dashboard/src/api/types.ts
new file mode 100644
index 00000000..557d97cd
--- /dev/null
+++ b/dashboard/src/api/types.ts
@@ -0,0 +1,60 @@
+import * as geojson from 'geojson';
+
+//////////////////////////////////////////////////////////////////////
+// Primitive types
+
+type Url = string;
+type ParkingAreaId = string;
+type RegionId = string;
+
+//////////////////////////////////////////////////////////////////////
+// Helper interfaces
+
+interface PaginatedList {
+    count: number;
+    next: Url|null;
+    previous: Url|null;
+}
+
+// Type of the Features returned by the API
+interface ApiFeature<I extends string, P> extends
+geojson.Feature<geojson.MultiPolygon, P> {
+    type: 'Feature';
+    geometry: geojson.MultiPolygon;
+    id: I;
+    properties: P|null;
+}
+
+// Type of the Feature Collections returned by the API
+interface ApiFeatureCollection<I extends string, P> extends
+geojson.FeatureCollection<geojson.MultiPolygon, P> {
+    type: 'FeatureCollection';
+    features: Array<ApiFeature<I, P>>;
+}
+
+//////////////////////////////////////////////////////////////////////
+// Exported API interfaces
+
+export type Region = ApiFeature<RegionId, RegionProperties>;
+
+export interface RegionList extends
+ApiFeatureCollection<RegionId, RegionProperties>,
+PaginatedList {
+}
+
+export interface RegionProperties {
+    name: string;
+    capacity_estimate: number;
+    area_km2: number;
+    spots_per_km2: number;
+    parking_areas: ParkingAreaId[];
+}
+
+export interface RegionStatsList extends PaginatedList {
+    results: RegionStats[];
+}
+
+export interface RegionStats {
+    id: RegionId;
+    parking_count: number;
+}
diff --git a/dashboard/src/components/CalendarContainer.d.ts b/dashboard/src/components/CalendarContainer.d.ts
new file mode 100644
index 00000000..b79be166
--- /dev/null
+++ b/dashboard/src/components/CalendarContainer.d.ts
@@ -0,0 +1,12 @@
+declare module 'react-datetime/src/CalendarContainer' {
+    import * as React from 'react';
+
+    interface Props {
+        view: string;  // 'years'|'months'|'days'|'time';
+        viewProps: any;
+        onClickOutside: () => void;
+    }
+
+    export default class CalendarContainer extends React.Component<Props> {
+    }
+}
diff --git a/dashboard/src/components/ParkingRegionsMap.css b/dashboard/src/components/ParkingRegionsMap.css
new file mode 100644
index 00000000..8575fb24
--- /dev/null
+++ b/dashboard/src/components/ParkingRegionsMap.css
@@ -0,0 +1,3 @@
+.leaflet-container {
+    min-height: 10rem;
+}
diff --git a/dashboard/src/components/ParkingRegionsMap.tsx b/dashboard/src/components/ParkingRegionsMap.tsx
new file mode 100644
index 00000000..58f21f55
--- /dev/null
+++ b/dashboard/src/components/ParkingRegionsMap.tsx
@@ -0,0 +1,199 @@
+import * as chroma from 'chroma-js';
+import * as geojson from 'geojson';
+import * as Leaflet from 'leaflet';
+import * as React from 'react';
+import * as ReactLeaflet from 'react-leaflet';
+
+import { MapViewport, Point, Region, RegionProperties } from './types';
+
+import './ParkingRegionsMap.css';
+
+// Add viewport props to the allowed props for Map component, since
+// they are missing from the latest libdefs available.
+// See https://github.com/DefinitelyTyped/DefinitelyTyped/issues/22125
+interface Viewport { center: Point; zoom: number; }
+interface MapProps extends ReactLeaflet.MapProps {
+    onViewportChange?: (viewport: Viewport) => void;
+    onViewportChanged?: (viewport: Viewport) => void;
+    viewport?: Viewport;
+}
+class Map extends ReactLeaflet.Map<MapProps> {}
+
+export interface Props {
+    center: Point;
+    zoom: number;
+    regions?: Region[];
+    onRegionClicked?: (region: Region) => void;
+    onViewportChanged?: (viewport: MapViewport) => void;
+}
+
+export default class ParkingRegionsMap extends React.Component<Props> {
+    private map?: ReactLeaflet.Map;
+
+    render() {
+        const geoJsonElement = this.props.regions ? (
+            <ReactLeaflet.GeoJSON
+                key={getKeyForRegions(this.props.regions)}
+                data={getFeatureCollection(this.props.regions)}
+                style={getStyleForRegion}
+                onEachFeature={this.bindPopupToRegion}
+            />
+        ) : null;
+        const osmAttribution = (
+            '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a>'
+            + ' contributors');
+        return (
+            <Map
+                center={this.props.center}
+                zoom={this.props.zoom}
+                onViewportChanged={this.handleViewportChange}
+                ref={(component: ReactLeaflet.Map) => {
+                        this.map = component; }}
+            >
+                <ReactLeaflet.TileLayer
+                    url="//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+                    attribution={osmAttribution}
+                />
+                <ReactLeaflet.ScaleControl
+                    metric={true}
+                    imperial={false}
+                    maxWidth={150}
+                />
+                {geoJsonElement}
+            </Map>);
+    }
+
+    private bindPopupToRegion = (
+        region: Region,
+        layer: Leaflet.Layer
+    ): void => {
+        const props = region.properties;
+        if (!props) {
+            return;
+        }
+        const capacityEstimateFromArea = Math.round(props.areaKm2 * 1000);
+        const capacity = props.capacityEstimate || capacityEstimateFromArea;
+        const count = props.parkingCount || 0;
+        const parkingsPerKm2 = count / props.areaKm2;
+        const usagePercentage = 100 * count / capacity;
+        layer.on('click', (event) => {
+            if (this.props.onRegionClicked) {
+                this.props.onRegionClicked(region);
+            }
+        });
+        layer.bindTooltip(props.name);
+        const text = `
+            <h3>${props.name}</h3>
+            <b>Pinta-ala</b>:
+              ${props.areaKm2.toFixed(2)} km<sup>2</sup><br>
+            <b>Arvioitu kapasiteetti</b>:
+              ${props.capacityEstimate}<br>
+            <b>Arvioitu kapasiteetti (pinta-ala)</b>:
+              ${capacityEstimateFromArea}<br>
+            <b>Paikkoja per km<sup>2</sup></b>:
+              ${props.spotsPerKm2.toFixed(2)}<br>
+            <hr>
+            <b>Pysäköintejä</b>:
+              ${props.parkingCount || 0}<br>
+            <b>Pysäköintejä per km<sup>2</sup></b>:
+              ${parkingsPerKm2.toFixed(2)}<br>
+            <b>Käyttöaste</b>:
+              ${usagePercentage.toFixed(2)}&nbsp;%<br>
+            `;
+        layer.bindPopup(text);
+    }
+
+    private handleViewportChange = (viewport: Viewport) => {
+        if (!this.map || !this.props.onViewportChanged) {
+            return;
+        }
+
+        const boundsObj = this.map.leafletElement.getBounds();
+        const ne = boundsObj.getNorthEast();
+        const sw = boundsObj.getSouthWest();
+        const bounds = {
+            neLat: ne.lat, neLng: ne.lng,
+            swLat: sw.lat, swLng: sw.lng};
+        const {center, zoom} = viewport;
+        this.props.onViewportChanged({bounds, center, zoom});
+    }
+}
+
+function getKeyForRegions(regions: Region[]): string {
+    if (!regions) {
+        return '';
+    }
+    if (!regions.length) {
+        return 'empty';
+    }
+    let lengthSum = 0;
+    let selectedId = '';
+    for (let region of regions) {
+        if (region.properties) {
+            lengthSum += Object.keys(region.properties).length || 0;
+            lengthSum += region.properties.parkingCount || 0;
+            if (region.properties.isSelected) {
+                selectedId = region.id;
+            }
+        }
+    }
+    const lastRegion = regions[regions.length - 1];
+    return `${regions.length}/${lengthSum}/${lastRegion.id}/${selectedId}`;
+}
+
+interface RegionCollection extends
+geojson.FeatureCollection<geojson.MultiPolygon, RegionProperties> {
+    features: Array<Region>;
+}
+
+function getFeatureCollection(regions: Region[]): RegionCollection {
+    return {type: 'FeatureCollection', features: regions};
+}
+
+function getStyleForRegion(region: Region) {
+    const props = region.properties;
+    const isSelected = (props && props.isSelected);
+    const borderWeight = (isSelected) ? 3 : 1;
+    const borderColor = (isSelected) ? '#0000ff' : '#000000';
+    const borderOpacity = (isSelected) ? 0.8 : 0.6;
+    const fillColor = getColorForRegion(props);
+    const fillOpacity = getOpacityForRegion(props);
+    return {
+        dashArray: (isSelected) ? undefined : '3',
+        weight: borderWeight,
+        color: borderColor,
+        opacity: borderOpacity,
+        fillColor: fillColor,
+        fillOpacity: fillOpacity,
+    };
+}
+
+function getColorForRegion(props?: RegionProperties|null): string|undefined {
+    const usage = getUsageFactorForRegion(props);
+    return (usage != null) ? getColorFromGreenToRed(usage) : undefined;
+}
+
+function getOpacityForRegion(props?: RegionProperties|null): number {
+    const usageFactor = getUsageFactorForRegion(props);
+    if (usageFactor == null) {
+        return 0;
+    }
+    const usageFactor0To1 = Math.min(Math.max(usageFactor, 0), 1);
+    return 0.25 + (usageFactor0To1 / 2);
+}
+
+function getUsageFactorForRegion(
+    props?: RegionProperties|null
+): number|undefined {
+    if (!props || !props.parkingCount || !props.areaKm2) {
+        return undefined;
+    }
+
+    const parkingsPerKm2 = props.parkingCount / props.areaKm2;
+    return parkingsPerKm2 / 100.0;
+}
+
+function getColorFromGreenToRed(ratio: number): string {
+    const truncated = Math.min(Math.max(ratio, 0), 1);
+    return chroma.scale(['#6d1', '#c21'])(truncated).hex();
+}
diff --git a/dashboard/src/components/RegionSelector.css b/dashboard/src/components/RegionSelector.css
new file mode 100644
index 00000000..fa412b16
--- /dev/null
+++ b/dashboard/src/components/RegionSelector.css
@@ -0,0 +1,5 @@
+.region-selector .Select-menu-outer {
+    /* Make sure the select dropdown is over the Leaflet map container,
+     * which uses very high z-index values for its components. */
+    z-index: 1000000;
+}
diff --git a/dashboard/src/components/RegionSelector.tsx b/dashboard/src/components/RegionSelector.tsx
new file mode 100644
index 00000000..45913b0e
--- /dev/null
+++ b/dashboard/src/components/RegionSelector.tsx
@@ -0,0 +1,47 @@
+import * as React from 'react';
+import Select from 'react-select';
+
+import './RegionSelector.css';
+
+type RegionId = string;
+type RegionTuple = [RegionId, string];  // id, name
+
+interface Item {
+    value: RegionId;
+    label: string;
+}
+
+export interface Props {
+    regions: RegionTuple[];
+    selectedRegion?: RegionId;
+    onRegionChanged?: (regionId: RegionId|null, name: string|null) => void;
+}
+
+class RegionSelect extends Select<RegionId> {
+}
+
+export default class RegionSelector extends React.Component<Props> {
+    render() {
+        const options = this.props.regions.map(([id, name]) => {
+            return {value: id, label: name};
+        });
+        return (
+            <RegionSelect
+                className="region-selector"
+                value={this.props.selectedRegion}
+                options={options}
+                onChange={this.handleItemChange}
+                placeholder="Valitse alue..."
+            />);
+    }
+
+    private handleItemChange = (item: Item) => {
+        if (this.props.onRegionChanged) {
+            if (item) {
+                this.props.onRegionChanged(item.value, item.label);
+            } else {
+                this.props.onRegionChanged(null, null);
+            }
+        }
+    }
+}
diff --git a/dashboard/src/components/TimeSelect.css b/dashboard/src/components/TimeSelect.css
new file mode 100644
index 00000000..1f9985be
--- /dev/null
+++ b/dashboard/src/components/TimeSelect.css
@@ -0,0 +1,26 @@
+.time-select .rdt .form-control {
+    min-width: 10em;
+    max-width: 10em;
+}
+
+.time-select .rdt .input-group {
+    justify-content: center;
+}
+
+.time-select .rdt .rdtPicker {
+    top: 2rem;
+}
+
+@media screen and (max-width: 28rem) {
+    .time-select .update-button .text {
+        display: none;
+    }
+}
+
+.time-select .shift-buttons .btn {
+    min-width: 3.6em;
+}
+
+.time-select .shift-buttons .btn-group {
+    margin: 0.5rem 0.2rem;
+}
diff --git a/dashboard/src/components/TimeSelect.tsx b/dashboard/src/components/TimeSelect.tsx
new file mode 100644
index 00000000..dc795968
--- /dev/null
+++ b/dashboard/src/components/TimeSelect.tsx
@@ -0,0 +1,197 @@
+import * as moment from 'moment';
+import * as ReactDatetime from 'react-datetime';
+import CalendarContainer from 'react-datetime/src/CalendarContainer';
+import * as React from 'react';
+import { Button, ButtonGroup, Input, InputGroup,
+         InputGroupButton, Row, Col } from 'reactstrap';
+
+import 'react-datetime/css/react-datetime.css';
+
+import './TimeSelect.css';
+
+export interface Props extends ReactDatetime.DatetimepickerProps {
+    autoUpdate?: boolean;
+    onAutoUpdateChange?: (newValue: boolean) => void;
+}
+
+// The implementation of AutoUpdatingDatetime needs to know more
+// internals of the ReactDatetime than is exported by the TS type
+// definitions.  Make them visible by definining a couple extended
+// interfaces.
+interface ExtendedReactDatetime extends ReactDatetime {
+    getInitialState: () => {};
+    getStateFromProps: (props: Props) => {};
+    onInputKey: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    onInputChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    handleClickOutside: () => void;
+}
+interface ReactDatetimeInt {
+    openCalendar?: (event: React.SyntheticEvent<HTMLElement>) => void;
+    onInputChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+const ReactDatetimeProto = ReactDatetime.prototype as ExtendedReactDatetime;
+
+class AutoUpdatingDatetime extends ReactDatetime {
+    static defaultProps = {
+        className: '',
+        defaultValue: '',
+        inputProps: {},
+        input: true,
+        onFocus: () => undefined,
+        onBlur: () => undefined,
+        onChange: () => undefined,
+        onViewModeChange: () => undefined,
+        timeFormat: true,
+        timeConstraints: {},
+        dateFormat: true,
+        strictParsing: true,
+        closeOnSelect: false,
+        closeOnTab: true,
+        utc: false,
+
+        onAutoUpdateChange: (newValue: boolean) => undefined,
+        autoUpdate: false,
+    };
+
+    getInitialState() {
+        return {
+            ...ReactDatetimeProto.getInitialState.call(this),
+            autoUpdate: AutoUpdatingDatetime.defaultProps.autoUpdate,
+        };
+    }
+
+    getStateFromProps = (props: Props) => (
+        this.getStateFromPropsOverride(props))
+
+    getStateFromPropsOverride(props: Props) {
+        return {
+            ...ReactDatetimeProto.getStateFromProps.call(this, props),
+            autoUpdate: props.autoUpdate,
+        };
+    }
+
+    handleUpdateButtonClick = (
+        event: React.SyntheticEvent<HTMLButtonElement>
+    ) => {
+        const newAutoUpdate = !(this.state as {autoUpdate?: boolean}).autoUpdate;
+        this.setState({autoUpdate: newAutoUpdate} as {}, () => {
+            const props = (this.props as Props);
+            if (props.onAutoUpdateChange) {
+                return props.onAutoUpdateChange(newAutoUpdate);
+            }
+        });
+    }
+
+    handleInputKey(event: React.KeyboardEvent<HTMLInputElement>) {
+        if (event.key === 'Enter') {
+            const {inputValue, inputFormat} = this.state;
+            // Parse the input value to moment object in non-strict mode
+            const time = moment(inputValue, inputFormat, false);
+            if (time.isValid()) {
+                this.setTimeValue(time);
+            }
+        }
+        ReactDatetimeProto.onInputKey.call(this, event);
+    }
+
+    setTimeValue(time: moment.Moment) {
+        const event = {target: {value: time.format(this.state.inputFormat)}};
+        ReactDatetimeProto.onInputChange.call(this, event);
+    }
+
+    render() {
+        let className = 'rdt' + ((this.state.open) ? ' rdtOpen' : '');
+        const icon = ((this.state as Props).autoUpdate) ? 'clock-o' : 'circle-o';
+        const iconClass = 'fa fa-' + icon;
+        const inputProps = {
+            key: 'i',
+            type: 'text' as 'text',
+            className: 'form-control',
+            onFocus: (this as ReactDatetimeInt).openCalendar,
+            onChange: (this as ReactDatetimeInt).onInputChange,
+            onKeyDown: this.handleInputKey.bind(this),
+            value: this.state.inputValue,
+        };
+
+        const getComponentProps = (this as {getComponentProps?: () => {}}).getComponentProps;
+        const componentProps = (getComponentProps) ? getComponentProps() : {};
+        const handleClickOutside = ReactDatetimeProto.handleClickOutside.bind(this);
+
+        return (
+            <div className={className}>
+                <InputGroup>
+                    <Input {...inputProps}/>
+                    <div key="dt" className="rdtPicker">
+                        <CalendarContainer
+                            view={(this.state as {currentView?: string}).currentView || ''}
+                            viewProps={componentProps}
+                            onClickOutside={handleClickOutside}
+                        />
+                    </div>
+                    <InputGroupButton>
+                        <Button
+                            onClick={this.handleUpdateButtonClick}
+                            className="update-button"
+                            color="info"
+                            outline={true}
+                            active={(this.state as {autoUpdate?: boolean}).autoUpdate}
+                        >
+                            <i className={iconClass}/>
+                            <span className="text"> Pidä ajan tasalla</span>
+                        </Button>
+                    </InputGroupButton>
+                </InputGroup>
+            </div>
+        );
+    }
+}
+
+export default class TimeSelect extends React.Component<Props> {
+    datetime?: AutoUpdatingDatetime;
+
+    shiftTime(minutes: number) {
+        if (this.datetime) {
+            const currentTime = this.datetime.props.value;
+            if (currentTime != null && moment.isMoment(currentTime)) {
+                const newTime = currentTime.clone().add(minutes, 'minutes');
+                this.datetime.setTimeValue(newTime);
+            }
+        }
+    }
+
+    render() {
+        const timeShiftButton = (label: string, minutes: number) => (
+            <Button onClick={this.shiftTime.bind(this, minutes)}>
+                {label}
+            </Button>);
+        const datetimeProps = this.props;
+        return (
+            <div className="time-select text-center">
+                <Row className="justify-content-center">
+                    <Col className="justify-content-center">
+                        <AutoUpdatingDatetime
+                            {...datetimeProps}
+                            ref={(component: AutoUpdatingDatetime) => {
+                                    this.datetime = component; }}
+                        />
+                    </Col>
+                </Row>
+                <Row>
+                    <Col className="shift-buttons">
+                        <ButtonGroup size="sm" className="btn-group-left">
+                            {timeShiftButton('-1 vk', -7 * 24 * 60)}
+                            {timeShiftButton('-1 pv', -1 * 24 * 60)}
+                            {timeShiftButton('-1 t', -60)}
+                        </ButtonGroup>
+                        <ButtonGroup size="sm" className="btn-group-right">
+                            {timeShiftButton('+1 t', 60)}
+                            {timeShiftButton('+1 pv', 1 * 24 * 60)}
+                            {timeShiftButton('+1 vk', 7 * 24 * 60)}
+                        </ButtonGroup>
+                    </Col>
+                </Row>
+            </div>
+        );
+    }
+}
diff --git a/dashboard/src/components/types.ts b/dashboard/src/components/types.ts
new file mode 100644
index 00000000..d9168ed4
--- /dev/null
+++ b/dashboard/src/components/types.ts
@@ -0,0 +1,29 @@
+import * as geojson from 'geojson';
+
+export type Point = [number, number];
+
+export interface MapViewport {
+    center: Point;
+    zoom: number;
+    bounds?: {
+        neLat: number;
+        neLng: number;
+        swLat: number;
+        swLng: number;
+    };
+}
+
+export interface Region extends
+geojson.Feature<geojson.MultiPolygon, RegionProperties> {
+    id: string;
+}
+
+export interface RegionProperties {
+    name: string;
+    capacityEstimate: number;
+    areaKm2: number;
+    spotsPerKm2: number;
+    parkingAreas?: string[];
+    parkingCount?: number;
+    isSelected?: boolean;
+}
diff --git a/dashboard/src/components/utils.ts b/dashboard/src/components/utils.ts
new file mode 100644
index 00000000..d3a81159
--- /dev/null
+++ b/dashboard/src/components/utils.ts
@@ -0,0 +1,5 @@
+import { Region } from './types';
+
+export function getRegionName(region: Region) {
+    return (region.properties) ? region.properties.name : '';
+}
diff --git a/dashboard/src/config.ts b/dashboard/src/config.ts
new file mode 100644
index 00000000..381f2bed
--- /dev/null
+++ b/dashboard/src/config.ts
@@ -0,0 +1,6 @@
+export const isDev: boolean = (process.env.NODE_ENV === 'development');
+
+export const apiBaseUrl: string = process.env.REACT_APP_API_URL || (
+    (isDev)
+        ? 'http://localhost:8000/'
+        : 'https://api.parkkiopas.fi/');
diff --git a/dashboard/src/containers/App.tsx b/dashboard/src/containers/App.tsx
new file mode 100644
index 00000000..9bdf598e
--- /dev/null
+++ b/dashboard/src/containers/App.tsx
@@ -0,0 +1,9 @@
+import * as React from 'react';
+
+import Dashboard from './Dashboard';
+
+export default class App extends React.Component<{}> {
+    render() {
+        return (<Dashboard/>);
+    }
+}
diff --git a/dashboard/src/containers/Dashboard.css b/dashboard/src/containers/Dashboard.css
new file mode 100644
index 00000000..87b2f592
--- /dev/null
+++ b/dashboard/src/containers/Dashboard.css
@@ -0,0 +1,19 @@
+.dashboard .card-body {
+    padding: 0.5rem;
+}
+
+.dashboard .map-card .card-body {
+    padding: 0;
+}
+
+.map-card .leaflet-container {
+    height: 60vh;
+}
+
+.dashboard .card {
+    margin: 0.5rem 0;
+}
+
+.dashboard .parking-histogram {
+    height: 40vh;
+}
diff --git a/dashboard/src/containers/Dashboard.tsx b/dashboard/src/containers/Dashboard.tsx
new file mode 100644
index 00000000..7a87e40e
--- /dev/null
+++ b/dashboard/src/containers/Dashboard.tsx
@@ -0,0 +1,261 @@
+import { Dispatch } from 'redux';
+import * as React from 'react';
+import { connect } from 'react-redux';
+
+import { Bar } from 'react-chartjs-2';
+import { Card, CardHeader, CardBody, Container, Row, Col } from 'reactstrap';
+
+import * as dispatchers from '../dispatchers';
+import { RootState } from '../types';
+import ParkingRegionsMap from './ParkingRegionsMap';
+import TimeSelect from './TimeSelect';
+import RegionSelector from  './RegionSelector';
+
+import ReactTable from 'react-table';
+import 'react-table/react-table.css';
+
+import './Dashboard.css';
+
+const bar = {
+    labels: ['16', '18', '20', '22', '0', '2', '4', '6', '8', '10', '12', '14'],
+    datasets: [
+        {
+            backgroundColor: 'rgba(255,99,132,0.2)',
+            borderColor: 'rgba(255,99,132,1)',
+            borderWidth: 1,
+            hoverBackgroundColor: 'rgba(255,99,132,0.4)',
+            hoverBorderColor: 'rgba(255,99,132,1)',
+            data: [108, 95, 75, 35, 25, 21, 28, 35, 89, 81, 92, 99]
+        }
+    ]
+};
+
+interface Props {
+    autoUpdate: boolean;
+    onUpdate: () => void;
+}
+
+type TimerId = number;
+
+class Dashboard extends React.Component<Props> {
+    timer: TimerId|null = null;
+    timerInterval: number = 1000; // 1 second
+
+    componentDidMount() {
+        if (this.props.autoUpdate && !this.timer) {
+            this.enableAutoUpdate();
+        }
+    }
+
+    componentWillReceiveProps(nextProps: Props) {
+        if (nextProps.autoUpdate && !this.timer) {
+            this.enableAutoUpdate();
+        }
+        if (!nextProps.autoUpdate && this.timer) {
+            this.disableAutoUpdate();
+        }
+    }
+
+    enableAutoUpdate() {
+        this.autoUpdate();
+        if (this.timer) {
+            return;  // Was already enabled
+        }
+        this.timer = window.setInterval(
+            this.autoUpdate.bind(this), this.timerInterval);
+    }
+
+    disableAutoUpdate() {
+        if (!this.timer) {
+            return;  // Was already disabled
+        }
+        window.clearInterval(this.timer);
+        this.timer = null;
+    }
+
+    autoUpdate() {
+        if (this.props.onUpdate) {
+            this.props.onUpdate();
+        }
+    }
+
+    render() {
+
+        const data = [
+            {
+                'id': '49df2003-ffac-4cf9-82d4-ef152bb0f539',
+                'operator': 'Lippuautomaatit',
+                'zone': 1,
+                'area': 'Parking Area 3526',
+                'terminal': 620,
+                'start': '2.5.2018 14:18:05',
+                'end': '2.5.2018, 15:48:05',
+                'regnum': 'ABC-123',
+                'created': '2.5.2018 14:18:12',
+                'modified': '2.5.2018 14:18:12',
+            },
+            {
+                'id': 'c0e45595-aecd-4c83-b80e-6940dcfee667',
+                'operator': 'Lippuautomaatit',
+                'zone': 2,
+                'area': 'Parking Area 4012',
+                'terminal': 120,
+                'start': '2.5.2018 14:08:35',
+                'end': '2.5.2018, 14:28:35',
+                'regnum': 'CBA-456',
+                'created': '2.5.2018 14:08:42',
+                'modified': '2.5.2018 14:08:42',
+            },
+            {
+                'id': 'b68d7e75-c4d9-49e1-9767-7816b7a24b13',
+                'operator': 'EasyPark',
+                'zone': 1,
+                'area': '-',
+                'terminal': undefined,
+                'start': '2.5.2018 14:02:55',
+                'end': '2.5.2018, 16:32:55',
+                'regnum': 'XYZ-987',
+                'created': '2.5.2018 14:02:59',
+                'modified': '2.5.2018 14:03:05',
+            },
+            {
+                'id': '051dabe8-ae2e-459f-97fe-cde4daf2de3b',
+                'operator': 'Lippuautomaatit',
+                'zone': 1,
+                'area': 'Parking Area 2359',
+                'terminal': 95,
+                'start': '2.5.2018 14:01:22',
+                'end': '2.5.2018, 14:21:22',
+                'regnum': 'KKK-333',
+                'created': '2.5.2018 14:01:23',
+                'modified': '2.5.2018 14:01:23',
+            },
+            {
+                'id': 'e8cd6df7-11d4-4fa2-9343-33450dd29e48',
+                'operator': 'Witrafi',
+                'zone': 2,
+                'area': 'Parking Area 3374',
+                'terminal': undefined,
+                'start': '2.5.2018 13:59:45',
+                'end': '2.5.2018, 15:28:06',
+                'regnum': 'ABC-123',
+                'created': '2.5.2018 13:59:46',
+                'modified': '2.5.2018 15:28:07',
+            },
+            {
+                'id': '78fff1e1-9a76-4870-8637-be32561b6aed',
+                'operator': 'ParkMan',
+                'zone': 3,
+                'area': '-',
+                'terminal': undefined,
+                'start': '2.5.2018 13:59:32',
+                'end': '2.5.2018, 14:38:35',
+                'regnum': 'ZZZ-444',
+                'created': '2.5.2018 13:59:32',
+                'modified': '2.5.2018 14:38:36',
+            },
+        ];
+
+        const columns = [
+            {
+                Header: 'Tunniste',
+                accessor: 'id',
+            }, {
+                Header: 'Rekisterinumero',
+                accessor: 'regnum',
+            }, {
+                Header: 'Operaattori',
+                accessor: 'operator',
+            }, {
+                Header: 'Maksuvyöhyke',
+                accessor: 'zone',
+            }, {
+                Header: 'Pysäköintialue',
+                accessor: 'area',
+            }, {
+                Header: 'Lippuautomaatin numero',
+                accessor: 'terminal',
+            }, {
+                Header: 'Aloitusaika',
+                accessor: 'start',
+            }, {
+                Header: 'Loppumisaika',
+                accessor: 'end',
+            }, {
+                Header: 'Luotu',
+                accessor: 'created',
+            }, {
+                Header: 'Päivitetty',
+                accessor: 'modified',
+            },
+        ];
+
+        return (
+            <main className="main">
+                <Container fluid={true} className="dashboard">
+                    <Row>
+                        <Col xl="7" lg="6" md="6" sm="12">
+                            <Card>
+                                <CardBody>
+                                    <TimeSelect/>
+                                </CardBody>
+                            </Card>
+                            <Card className="parking-histogram">
+                                <CardHeader>Pysäköintimäärät, viimeiset 24 t</CardHeader>
+                                <CardBody>
+                                    <Bar
+                                        data={bar}
+                                        options={{
+                                            maintainAspectRatio: false,
+                                            legend: {display: false},
+                                            scales: {yAxes: [{ticks: {min: 0}}]}
+                                        }}
+                                    />
+                                </CardBody>
+                            </Card>
+                        </Col>
+                        <Col xl="5" lg="6" md="6" sm="12">
+                            <Card>
+                                <CardBody>
+                                    <RegionSelector/>
+                                </CardBody>
+                            </Card>
+                            <Card className="map-card">
+                                <CardBody>
+                                    <ParkingRegionsMap/>
+                                </CardBody>
+                            </Card>
+                        </Col>
+                    </Row>
+                    <Row>
+                        <Col>
+                            <Card>
+                                <CardHeader>Viimeiset pysäköinnit</CardHeader>
+                                <CardBody>
+                                    <ReactTable data={data} columns={columns} />
+                                </CardBody>
+                            </Card>
+                        </Col>
+                    </Row>
+                </Container>
+            </main>
+        );
+    }
+}
+
+function mapStateToProps(state: RootState): Partial<Props> {
+    return {
+        autoUpdate: state.autoUpdate,
+    };
+}
+
+function mapDispatchToProps(dispatch: Dispatch<RootState>): Partial<Props> {
+    return {
+        onUpdate: () => dispatch(dispatchers.updateData()),
+    };
+}
+
+const ConnectedDashboard = connect(
+    mapStateToProps, mapDispatchToProps)(Dashboard);
+
+export default ConnectedDashboard;
diff --git a/dashboard/src/containers/ParkingRegionsMap.ts b/dashboard/src/containers/ParkingRegionsMap.ts
new file mode 100644
index 00000000..1d0085c3
--- /dev/null
+++ b/dashboard/src/containers/ParkingRegionsMap.ts
@@ -0,0 +1,48 @@
+import * as _ from 'lodash';
+import { connect } from 'react-redux';
+import { Dispatch } from 'redux';
+
+import ParkingRegionsMap, { Props } from '../components/ParkingRegionsMap';
+import { Region, MapViewport } from '../components/types';
+import * as dispatchers from '../dispatchers';
+import { RootState } from '../types';
+
+function mapStateToProps(state: RootState): Partial<Props> {
+    const viewState = state.views.parkingRegionMap;
+    return {
+        center: viewState.center,
+        zoom: viewState.zoom,
+        regions: getRegions(state),
+    };
+}
+
+function getRegions(state: RootState): Region[] {
+    const {dataTime, regions, regionUsageHistory} = state;
+    const currentRegionUsageMap = (
+        (dataTime != null) ? regionUsageHistory[dataTime] : {}) || {};
+    const enrichedRegions = _.entries(regions).map(
+        ([id, region]: [string, Region]): Region => {
+            const properties = (region.properties) ? {
+                ...region.properties,
+                ...currentRegionUsageMap[id],
+                isSelected: (id === state.selectedRegion),
+            } : null;
+            return {...region, properties};
+        });
+    return enrichedRegions;
+}
+
+function mapDispatchToProps(dispatch: Dispatch<RootState>): Partial<Props> {
+    return {
+        onRegionClicked: (region: Region) => {
+            dispatch(dispatchers.setSelectedRegion(region.id));
+        },
+        onViewportChanged: (viewport: MapViewport) => (
+            dispatch(dispatchers.setMapViewport(viewport))),
+    };
+}
+
+const ConnectedParkingRegionsMap = connect(
+    mapStateToProps, mapDispatchToProps)(ParkingRegionsMap);
+
+export default ConnectedParkingRegionsMap;
diff --git a/dashboard/src/containers/RegionSelector.ts b/dashboard/src/containers/RegionSelector.ts
new file mode 100644
index 00000000..a6d73122
--- /dev/null
+++ b/dashboard/src/containers/RegionSelector.ts
@@ -0,0 +1,35 @@
+import { Dispatch } from 'redux';
+import { connect } from 'react-redux';
+import * as _ from 'lodash';
+
+import RegionSelector, { Props } from '../components/RegionSelector';
+import { Region } from '../components/types';
+import { getRegionName } from '../components/utils';
+import * as dispatchers from '../dispatchers';
+import { RootState } from '../types';
+
+function mapStateToProps(state: RootState): Partial<Props> {
+    function getRegionPair([id, region]: [string, Region]): [string, string] {
+        return [id, getRegionName(region)];
+    }
+
+    return {
+        regions: _.sortBy(
+            _.entries(state.regions).map(getRegionPair),
+            [([id, name]: [string, string]) => ([!name, name])]),
+        selectedRegion: state.selectedRegion || undefined,
+    };
+}
+
+function mapDispatchToProps(dispatch: Dispatch<RootState>): Partial<Props> {
+    return {
+        onRegionChanged: (id: string, name: string) => {
+            return dispatch(dispatchers.setSelectedRegion(id));
+        },
+    };
+}
+
+const ConnectedRegionSelector = connect(
+    mapStateToProps, mapDispatchToProps)(RegionSelector);
+
+export default ConnectedRegionSelector;
diff --git a/dashboard/src/containers/TimeSelect.ts b/dashboard/src/containers/TimeSelect.ts
new file mode 100644
index 00000000..c478207e
--- /dev/null
+++ b/dashboard/src/containers/TimeSelect.ts
@@ -0,0 +1,35 @@
+import * as moment from 'moment';
+import { Dispatch } from 'redux';
+import { connect } from 'react-redux';
+
+import TimeSelect, { Props } from '../components/TimeSelect';
+import * as dispatchers from '../dispatchers';
+import { RootState } from '../types';
+
+function mapStateToProps(state: RootState): Partial<Props> {
+    return {
+        value: (state.dataTime) ? moment(state.dataTime) : undefined,
+        autoUpdate: state.autoUpdate,
+        timeConstraints: {
+            minutes: {min: 0, max: 59, step: 5},
+            seconds: undefined
+        },
+    };
+}
+
+function mapDispatchToProps(dispatch: Dispatch<RootState>): Partial<Props> {
+    return {
+        onChange: (time: moment.Moment) => {
+            dispatch(dispatchers.setAutoUpdate(false));
+            return dispatch(dispatchers.setDataTime(time));
+        },
+        onAutoUpdateChange: (value) => {
+            return dispatch(dispatchers.setAutoUpdate(value));
+        },
+    };
+}
+
+const ConnectedTimeSelect = connect(
+    mapStateToProps, mapDispatchToProps)(TimeSelect);
+
+export default ConnectedTimeSelect;
diff --git a/dashboard/src/converters.ts b/dashboard/src/converters.ts
new file mode 100644
index 00000000..02e96742
--- /dev/null
+++ b/dashboard/src/converters.ts
@@ -0,0 +1,30 @@
+/** Functions for converting API data to UI types. */
+
+import * as api from './api/types';
+import * as uic from './components/types';
+import * as ui from './types';
+
+export function convertRegion(region: api.Region): uic.Region {
+    const p = region.properties;
+    const properties = (p) ? {
+        name: p.name,
+        capacityEstimate: p.capacity_estimate,
+        areaKm2: p.area_km2,
+        spotsPerKm2: p.spots_per_km2,
+        parkingAreas: p.parking_areas,
+    } : null;
+    return {
+        id: region.id,
+        type: region.type,
+        geometry: region.geometry,
+        properties
+    };
+}
+
+export function convertRegionStats(
+    regionStats: api.RegionStats
+): ui.RegionUsageInfo {
+    return {
+        parkingCount: regionStats.parking_count,
+    };
+}
diff --git a/dashboard/src/dispatchers.ts b/dashboard/src/dispatchers.ts
new file mode 100644
index 00000000..2b3623db
--- /dev/null
+++ b/dashboard/src/dispatchers.ts
@@ -0,0 +1,86 @@
+import { Dispatch } from 'redux';
+import * as moment from 'moment';
+
+import * as actions from './actions';
+import api from './api';
+import { MapViewport } from './components/types';
+import { RootState } from './types';
+
+const updateInterval = 5 * 60 * 1000;  // 5 minutes in ms
+
+export function setMapViewport(viewport: MapViewport) {
+    return (dispatch: Dispatch<RootState>) => {
+        dispatch(actions.setMapViewport(viewport));
+    };
+}
+
+export function updateData() {
+    return (dispatch: Dispatch<RootState>) => {
+        dispatch(setDataTime(moment()));
+    };
+}
+
+export function setDataTime(time?: moment.Moment) {
+    return (dispatch: Dispatch<RootState>, getState: () => RootState) => {
+        if (time && typeof time === 'object' && time.isValid()) {
+            const {dataTime} = getState();
+            const roundedTime = roundTime(time, updateInterval);
+            if (!dataTime || roundedTime.valueOf() !== dataTime) {
+                dispatch(actions.setDataTime(roundedTime));
+                dispatch(fetchRegionStats(roundedTime));
+            }
+        }
+    };
+}
+
+function roundTime(time: moment.Moment, precision: number): moment.Moment {
+    return moment(Math.floor(time.valueOf() / precision) * precision);
+}
+
+export function setAutoUpdate(value: boolean) {
+    return (dispatch: Dispatch<RootState>) => {
+        dispatch(actions.setAutoUpdate(value));
+    };
+}
+
+export function setSelectedRegion(regionId: string) {
+    return (dispatch: Dispatch<RootState>) => {
+        dispatch(actions.setSelectedRegion(regionId));
+    };
+}
+
+export function fetchRegionStats(time: moment.Moment) {
+    return (dispatch: Dispatch<RootState>, getState: () => RootState) => {
+        const {regions, regionUsageHistory} = getState();
+        const timestamp = time.valueOf();
+        if (timestamp in regionUsageHistory) {
+            return;
+        }
+        api.fetchRegionStats(
+            time,
+            (response) => {
+                const results = response.data.results || [];
+                const needsRegion = results.some(
+                    (x: {id: string}) => (!(x.id in regions)));
+                if (needsRegion) {
+                    dispatch(fetchRegions());
+                }
+                dispatch(actions.receiveRegionStats(response.data, time));
+            },
+            (error) => {
+                alert('Region statistics fetch failed: ' + error);
+            });
+    };
+}
+
+export function fetchRegions() {
+    return (dispatch: Dispatch<RootState>) => {
+        api.fetchRegions(
+            (response) => {
+                dispatch(actions.receiveRegionInfo(response.data));
+            },
+            (error) => {
+                alert('Region fetch failed: ' + error);
+            });
+    };
+}
diff --git a/dashboard/src/global.d.ts b/dashboard/src/global.d.ts
new file mode 100644
index 00000000..98422abb
--- /dev/null
+++ b/dashboard/src/global.d.ts
@@ -0,0 +1,3 @@
+declare interface Window {
+    __REDUX_DEVTOOLS_EXTENSION_COMPOSE__?: any;
+}
diff --git a/dashboard/src/index.tsx b/dashboard/src/index.tsx
index 1c66245a..f513abf9 100644
--- a/dashboard/src/index.tsx
+++ b/dashboard/src/index.tsx
@@ -1,11 +1,48 @@
+import * as Leaflet from 'leaflet';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import App from './App';
-import registerServiceWorker from './registerServiceWorker';
+import * as ReactRedux from 'react-redux';
+import * as Redux from 'redux';
+import * as ReduxLogger from 'redux-logger';
+import thunkMiddleware from 'redux-thunk';
+
+// Configure Moment.js to use Finnish locale
+import 'moment/locale/fi';
+
 import './index.css';
+import api from './api';
+import * as config from './config';
+import App from './containers/App';
+import rootReducer from './reducers';
+import registerServiceWorker from './registerServiceWorker';
+
+import 'bootstrap/dist/css/bootstrap.css';
+import 'font-awesome/css/font-awesome.min.css';
+import 'react-select/dist/react-select.css';
+
+import 'leaflet/dist/leaflet.css';
+
+Leaflet.Icon.Default.imagePath =
+    '//cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/images/';
+
+// Construct store with middlewares and enchancers
+const middlewares: Redux.Middleware[] = [thunkMiddleware];
+if (config.isDev) {
+    middlewares.push(ReduxLogger.createLogger());
+}
+const composeEnhancers = (
+    (config.isDev && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__)
+    || Redux.compose);
+const storeEnhancer = Redux.applyMiddleware(...middlewares);
+const store = Redux.createStore(rootReducer, composeEnhancers(storeEnhancer));
+
+// Configure API base URL
+api.setBaseUrl(config.apiBaseUrl);
 
 ReactDOM.render(
-  <App />,
-  document.getElementById('root') as HTMLElement
-);
+    <ReactRedux.Provider store={store}>
+        <App />
+    </ReactRedux.Provider>,
+    document.getElementById('root') as HTMLElement);
+
 registerServiceWorker();
diff --git a/dashboard/src/logo.svg b/dashboard/src/logo.svg
deleted file mode 100644
index 6b60c104..00000000
--- a/dashboard/src/logo.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
-    <g fill="#61DAFB">
-        <path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
-        <circle cx="420.9" cy="296.5" r="45.7"/>
-        <path d="M520.5 78.1z"/>
-    </g>
-</svg>
diff --git a/dashboard/src/reducers.ts b/dashboard/src/reducers.ts
new file mode 100644
index 00000000..ca2c59a2
--- /dev/null
+++ b/dashboard/src/reducers.ts
@@ -0,0 +1,107 @@
+import * as _ from 'lodash';
+import { combineReducers } from 'redux';
+
+import { Action } from './actions';
+import * as conv from './converters';
+import {
+    ParkingRegionMapState, RegionsMap, RegionUsageHistory,
+    RootState, ViewState } from './types';
+
+// View state reducers ///////////////////////////////////////////////
+
+const initialParkingRegionMapState: ParkingRegionMapState = {
+    bounds: undefined,
+    center: [60.17, 24.94],
+    zoom: 12,
+};
+
+function parkingRegionMap(
+    state: ParkingRegionMapState = initialParkingRegionMapState,
+    action: Action
+): ParkingRegionMapState {
+    if (action.type === 'SET_MAP_VIEWPORT') {
+        return {...state, ...action.viewport};
+    }
+    return state;
+}
+
+const views: ((state: ViewState, action: Action) => ViewState) =
+    combineReducers({
+        parkingRegionMap,
+    });
+
+// Helper for creating simple data reducer
+function makeReducer<T>(
+    actionType: string,
+    valueKey: string,
+    defaultValue: T,
+): ((state: T, action: Action) => T) {
+    function reducer(state: T = defaultValue, action: Action): T {
+        if (action.type === actionType) {
+            return action[valueKey];
+        }
+        return state;
+    }
+    return reducer;
+}
+
+// Data reducers /////////////////////////////////////////////////////
+
+function dataTime(state: number|null = null, action: Action) {
+    if (action.type === 'SET_DATA_TIME') {
+        return action.time.valueOf();
+    }
+    return state;
+}
+
+const autoUpdate = makeReducer<boolean>('SET_AUTO_UPDATE', 'value', true);
+const selectedRegion = makeReducer<string|null>(
+    'SET_SELECTED_REGION', 'regionId', null);
+
+function regions(state: RegionsMap = {}, action: Action): RegionsMap {
+    if (action.type === 'RECEIVE_REGION_INFO') {
+        const newRegions = mapByIdAndApply(
+            action.data.features, conv.convertRegion);
+        return {...state, ...newRegions};
+    }
+    return state;
+}
+
+function regionUsageHistory(
+    state: RegionUsageHistory = {},
+    action: Action
+): RegionUsageHistory {
+    if (action.type === 'RECEIVE_REGION_STATS') {
+        const timestamp = action.time.valueOf();
+        const oldStats = state[timestamp] || {};
+        const newStats = mapByIdAndApply(
+            action.data.results, conv.convertRegionStats);
+        return {...state, ...{[timestamp]: {...oldStats, ...newStats}}};
+    }
+    return state;
+}
+
+interface Mapped<T> {
+    [id: string]: T;
+}
+
+function mapByIdAndApply<T>(
+    objects: ReadonlyArray<{id: string}>,
+    converter: ((x: {id: string}) => T)
+): Mapped<T> {
+    return _.assign({}, ...objects.map((x) => ({[x.id]: converter(x)})));
+}
+
+// Root reducer //////////////////////////////////////////////////////
+
+const rootReducer: ((state: RootState, action: Action) => RootState) =
+    combineReducers({
+        views,
+        dataTime,
+        autoUpdate,
+        selectedRegion,
+        regions,
+        regionUsageHistory,
+    });
+
+export default rootReducer;
diff --git a/dashboard/src/types.ts b/dashboard/src/types.ts
new file mode 100644
index 00000000..2e51abf3
--- /dev/null
+++ b/dashboard/src/types.ts
@@ -0,0 +1,37 @@
+import { Region, MapViewport } from './components/types';
+
+export interface RootState {
+    views: ViewState;
+
+    dataTime: number|null; // milliseconds
+    autoUpdate: boolean;
+
+    selectedRegion: string|null;  // regionId
+
+    regions: RegionsMap;
+
+    regionUsageHistory: RegionUsageHistory;
+}
+
+export interface ViewState {
+    parkingRegionMap: ParkingRegionMapState;
+}
+
+export interface ParkingRegionMapState extends MapViewport {
+}
+
+export interface RegionsMap {
+    [regionId: string]: Region;
+}
+
+export interface RegionUsageHistory {
+    [time: number]: RegionUsageMap;
+}
+
+export interface RegionUsageMap {
+    [regionId: string]: RegionUsageInfo;
+}
+
+export interface RegionUsageInfo {
+    parkingCount: number;
+}
diff --git a/dashboard/tsconfig.json b/dashboard/tsconfig.json
index 85973541..bfc6196f 100644
--- a/dashboard/tsconfig.json
+++ b/dashboard/tsconfig.json
@@ -1,6 +1,7 @@
 {
   "compilerOptions": {
     "outDir": "build/dist",
+    "baseUrl": ".",
     "module": "esnext",
     "target": "es5",
     "lib": ["es6", "dom"],
diff --git a/dashboard/yarn.lock b/dashboard/yarn.lock
index cd70ad48..9fa7e19b 100644
--- a/dashboard/yarn.lock
+++ b/dashboard/yarn.lock
@@ -2,10 +2,38 @@
 # yarn lockfile v1
 
 
+"@types/axios@^0.14.0":
+  version "0.14.0"
+  resolved "https://registry.yarnpkg.com/@types/axios/-/axios-0.14.0.tgz#ec2300fbe7d7dddd7eb9d3abf87999964cafce46"
+  dependencies:
+    axios "*"
+
+"@types/chart.js@^2.7.6":
+  version "2.7.6"
+  resolved "https://registry.yarnpkg.com/@types/chart.js/-/chart.js-2.7.6.tgz#144f2da83b0e39e3cfa388c62aa6245d71d16109"
+
+"@types/chroma-js@^1.3.3":
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/@types/chroma-js/-/chroma-js-1.3.3.tgz#2f8ddbaed996166c23305f8c6ff0784bea5c2a87"
+
+"@types/geojson@*":
+  version "7946.0.1"
+  resolved "https://registry.yarnpkg.com/@types/geojson/-/geojson-7946.0.1.tgz#1fc41280e42f08f0d568401a556bc97c34f5262e"
+
 "@types/jest@^22.1.1":
   version "22.1.1"
   resolved "https://registry.yarnpkg.com/@types/jest/-/jest-22.1.1.tgz#231d7c60ed130200af9e96c82469ed25b59a7ea2"
 
+"@types/leaflet@*", "@types/leaflet@^1.2.5":
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/@types/leaflet/-/leaflet-1.2.5.tgz#b172502c298849cadd034314dabfc936beff7636"
+  dependencies:
+    "@types/geojson" "*"
+
+"@types/lodash@^4.14.98":
+  version "4.14.98"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.98.tgz#aaf012ae443e657e7885e605a4c1b340db160609"
+
 "@types/node@*", "@types/node@^9.4.0":
   version "9.4.0"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-9.4.0.tgz#b85a0bcf1e1cc84eb4901b7e96966aedc6f078d1"
@@ -17,10 +45,48 @@
     "@types/node" "*"
     "@types/react" "*"
 
+"@types/react-leaflet@^1.1.4":
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/@types/react-leaflet/-/react-leaflet-1.1.4.tgz#75b46ae80282883614962be5d59d1774e90cab25"
+  dependencies:
+    "@types/leaflet" "*"
+    "@types/react" "*"
+
+"@types/react-redux@^5.0.14":
+  version "5.0.14"
+  resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-5.0.14.tgz#f3fc30dcbb2d20455a714f591cc27f77b4df09bb"
+  dependencies:
+    "@types/react" "*"
+    redux "^3.6.0"
+
+"@types/react-select@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@types/react-select/-/react-select-1.2.0.tgz#2f29154fabbc530fd83858c7f24a34cf4e3d3869"
+  dependencies:
+    "@types/react" "*"
+
+"@types/react-table@^6.7.2":
+  version "6.7.2"
+  resolved "https://registry.yarnpkg.com/@types/react-table/-/react-table-6.7.2.tgz#7f2d6ed219e80f452bcb162bb27d3e289268f8b1"
+  dependencies:
+    "@types/react" "*"
+
 "@types/react@*", "@types/react@^16.0.35":
   version "16.0.35"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-16.0.35.tgz#7ce8a83cad9690fd965551fc513217a74fc9e079"
 
+"@types/reactstrap@^5.0.12":
+  version "5.0.12"
+  resolved "https://registry.yarnpkg.com/@types/reactstrap/-/reactstrap-5.0.12.tgz#6c8f011dc160be8454fe7504bd14fd76b2d16998"
+  dependencies:
+    "@types/react" "*"
+
+"@types/redux-logger@^3.0.5":
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/@types/redux-logger/-/redux-logger-3.0.5.tgz#d1a02758f90845899cd304aa0912daeba2028eb6"
+  dependencies:
+    redux "^3.6.0"
+
 abab@^1.0.3:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/abab/-/abab-1.0.4.tgz#5faad9c2c07f60dd76770f71cf025b62a63cfd4e"
@@ -307,6 +373,13 @@ aws4@^1.2.1, aws4@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.6.0.tgz#83ef5ca860b2b32e4a0deedee8c771b9db57471e"
 
+axios@*, axios@^0.17.1:
+  version "0.17.1"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.17.1.tgz#2d8e3e5d0bdbd7327f91bc814f5c57660f81824d"
+  dependencies:
+    follow-redirects "^1.2.5"
+    is-buffer "^1.1.5"
+
 babel-code-frame@6.26.0, babel-code-frame@^6.11.0, babel-code-frame@^6.22.0, babel-code-frame@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.26.0.tgz#63fd43f7dc1e3bb7ce35947db8fe369a3f58c74b"
@@ -555,6 +628,10 @@ boom@5.x.x:
   dependencies:
     hoek "4.x.x"
 
+bootstrap@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.0.0.tgz#ceb03842c145fcc1b9b4e15da2a05656ba68469a"
+
 boxen@^1.2.1:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/boxen/-/boxen-1.3.0.tgz#55c6c39a8ba58d9c61ad22cd877532deb665a20b"
@@ -768,6 +845,10 @@ center-align@^0.1.1:
     align-text "^0.1.3"
     lazy-cache "^1.0.3"
 
+chain-function@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/chain-function/-/chain-function-1.0.0.tgz#0d4ab37e7e18ead0bdc47b920764118ce58733dc"
+
 chalk@1.1.3, chalk@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
@@ -790,6 +871,26 @@ chardet@^0.4.0:
   version "0.4.2"
   resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.4.2.tgz#b5473b33dc97c424e5d98dc87d55d4d8a29c8bf2"
 
+chart.js@^2.7.1:
+  version "2.7.1"
+  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-2.7.1.tgz#ae90b4aa4ff1f02decd6b1a2a8dabfd73c9f9886"
+  dependencies:
+    chartjs-color "~2.2.0"
+    moment "~2.18.0"
+
+chartjs-color-string@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/chartjs-color-string/-/chartjs-color-string-0.5.0.tgz#8d3752d8581d86687c35bfe2cb80ac5213ceb8c1"
+  dependencies:
+    color-name "^1.0.0"
+
+chartjs-color@~2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/chartjs-color/-/chartjs-color-2.2.0.tgz#84a2fb755787ed85c39dd6dd8c7b1d88429baeae"
+  dependencies:
+    chartjs-color-string "^0.5.0"
+    color-convert "^0.5.3"
+
 chokidar@^1.6.0, chokidar@^1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-1.7.0.tgz#798e689778151c8076b4b360e5edd28cda2bb468"
@@ -805,6 +906,10 @@ chokidar@^1.6.0, chokidar@^1.7.0:
   optionalDependencies:
     fsevents "^1.0.0"
 
+chroma-js@^1.3.4:
+  version "1.3.6"
+  resolved "https://registry.yarnpkg.com/chroma-js/-/chroma-js-1.3.6.tgz#22dd7220ef6b55dcfcb8ef92982baaf55dced45d"
+
 ci-info@^1.0.0:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-1.1.2.tgz#03561259db48d0474c8bdc90f5b47b068b6bbfb4"
@@ -822,6 +927,10 @@ clap@^1.0.9:
   dependencies:
     chalk "^1.1.3"
 
+classnames@^2.2.3, classnames@^2.2.4, classnames@^2.2.5:
+  version "2.2.5"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.5.tgz#fb3801d453467649ef3603c7d61a02bd129bde6d"
+
 clean-css@4.1.x:
   version "4.1.9"
   resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.1.9.tgz#35cee8ae7687a49b98034f70de00c4edd3826301"
@@ -876,6 +985,10 @@ code-point-at@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
 
+color-convert@^0.5.3:
+  version "0.5.3"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-0.5.3.tgz#bdb6c69ce660fadffe0b0007cc447e1b9f7282bd"
+
 color-convert@^1.3.0, color-convert@^1.9.0:
   version "1.9.1"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.1.tgz#c1261107aeb2f294ebffec9ed9ecad529a6097ed"
@@ -1058,6 +1171,14 @@ create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
+create-react-class@^15.5.2:
+  version "15.6.3"
+  resolved "https://registry.yarnpkg.com/create-react-class/-/create-react-class-15.6.3.tgz#2d73237fb3f970ae6ebe011a9e66f46dbca80036"
+  dependencies:
+    fbjs "^0.8.9"
+    loose-envify "^1.3.1"
+    object-assign "^4.1.1"
+
 cross-spawn@5.1.0, cross-spawn@^5.0.1:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-5.1.0.tgz#e8bd0efee58fcff6f8f94510a0a554bbfa235449"
@@ -1238,6 +1359,10 @@ decamelize@^1.0.0, decamelize@^1.1.1, decamelize@^1.1.2:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
 
+deep-diff@^0.3.5:
+  version "0.3.8"
+  resolved "https://registry.yarnpkg.com/deep-diff/-/deep-diff-0.3.8.tgz#c01de63efb0eec9798801d40c7e0dae25b582c84"
+
 deep-equal@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.0.1.tgz#f5d260292b660e084eff4cdbc9f08ad3247448b5"
@@ -1377,6 +1502,10 @@ dom-converter@~0.1:
   dependencies:
     utila "~0.3"
 
+dom-helpers@^3.2.0:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.3.1.tgz#fc1a4e15ffdf60ddde03a480a9c0fece821dd4a6"
+
 dom-serializer@0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.1.0.tgz#073c697546ce0780ce23be4a28e293e40bc30c82"
@@ -1811,7 +1940,7 @@ fb-watchman@^2.0.0:
   dependencies:
     bser "^2.0.0"
 
-fbjs@^0.8.16:
+fbjs@^0.8.16, fbjs@^0.8.9:
   version "0.8.16"
   resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.16.tgz#5e67432f550dc41b572bf55847b8aca64e5337db"
   dependencies:
@@ -1889,6 +2018,16 @@ flatten@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.2.tgz#dae46a9d78fbe25292258cc1e780a41d95c03782"
 
+follow-redirects@^1.2.5:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.4.1.tgz#d8120f4518190f55aac65bb6fc7b85fcd666d6aa"
+  dependencies:
+    debug "^3.1.0"
+
+font-awesome@^4.7.0:
+  version "4.7.0"
+  resolved "https://registry.yarnpkg.com/font-awesome/-/font-awesome-4.7.0.tgz#8fa8cf0411a1a31afd07b06d2902bb9fc815a133"
+
 for-in@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
@@ -2261,6 +2400,10 @@ hoek@4.x.x:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/hoek/-/hoek-4.2.0.tgz#72d9d0754f7fe25ca2d01ad8f8f9a9449a89526d"
 
+hoist-non-react-statics@^2.2.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.3.1.tgz#343db84c6018c650778898240135a1420ee22ce0"
+
 home-or-tmp@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/home-or-tmp/-/home-or-tmp-2.0.0.tgz#e36c3f2d2cae7d746a857e38d18d5f32a7882db8"
@@ -2482,7 +2625,7 @@ interpret@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.1.0.tgz#7ed1b1410c6a0e0f78cf95d3b8440c63f78b8614"
 
-invariant@^2.2.2:
+invariant@^2.0.0, invariant@^2.2.2:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.2.tgz#9e1f56ac0acdb6bf303306f338be3b204ae60360"
   dependencies:
@@ -3002,6 +3145,10 @@ jest@20.0.4:
   dependencies:
     jest-cli "^20.0.4"
 
+jquery@^3.3.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.3.1.tgz#958ce29e81c9790f31be7792df5d4d95fc57fbca"
+
 js-base64@^2.1.9:
   version "2.4.3"
   resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.4.3.tgz#2e545ec2b0f2957f41356510205214e98fad6582"
@@ -3159,6 +3306,10 @@ lcid@^1.0.0:
   dependencies:
     invert-kv "^1.0.0"
 
+leaflet@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.3.1.tgz#86f336d2fb0e2d0ff446677049a5dc34cf0ea60e"
+
 leven@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/leven/-/leven-2.1.0.tgz#c2e7a9f772094dee9d34202ae8acce4687875580"
@@ -3217,6 +3368,10 @@ locate-path@^2.0.0:
     p-locate "^2.0.0"
     path-exists "^3.0.0"
 
+lodash-es@^4.0.0, lodash-es@^4.2.0, lodash-es@^4.2.1:
+  version "4.17.4"
+  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.4.tgz#dcc1d7552e150a0640073ba9cb31d70f032950e7"
+
 lodash._reinterpolate@~3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
@@ -3237,6 +3392,10 @@ lodash.isfunction@^3.0.8:
   version "3.0.8"
   resolved "https://registry.yarnpkg.com/lodash.isfunction/-/lodash.isfunction-3.0.8.tgz#4db709fc81bc4a8fd7127a458a5346c5cdce2c6b"
 
+lodash.isobject@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/lodash.isobject/-/lodash.isobject-3.0.2.tgz#3c8fb8d5b5bf4bf90ae06e14f2a530a4ed935e1d"
+
 lodash.isstring@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/lodash.isstring/-/lodash.isstring-4.0.1.tgz#d527dfb5456eca7cc9bb95d5daeaf88ba54a5451"
@@ -3262,11 +3421,15 @@ lodash.templatesettings@^4.0.0:
   dependencies:
     lodash._reinterpolate "~3.0.0"
 
+lodash.tonumber@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/lodash.tonumber/-/lodash.tonumber-4.0.3.tgz#0b96b31b35672793eb7f5a63ee791f1b9e9025d9"
+
 lodash.uniq@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
 
-"lodash@>=3.5 <5", lodash@^4.14.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.3.0:
+"lodash@>=3.5 <5", lodash@^4.0.0, lodash@^4.14.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0:
   version "4.17.4"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
 
@@ -3470,6 +3633,14 @@ mkdirp@0.5.x, "mkdirp@>=0.5 0", mkdirp@^0.5.1, mkdirp@~0.5.0, mkdirp@~0.5.1:
   dependencies:
     minimist "0.0.8"
 
+moment@^2.20.1:
+  version "2.20.1"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.20.1.tgz#d6eb1a46cbcc14a2b2f9434112c1ff8907f313fd"
+
+moment@~2.18.0:
+  version "2.18.1"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.18.1.tgz#c36193dd3ce1c2eed2adb7c802dbbc77a81b1c0f"
+
 ms@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
@@ -3657,6 +3828,10 @@ object-assign@4.1.1, object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
 
+object-assign@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-3.0.0.tgz#9bedd5ca0897949bca47e7ff408062d549f587f2"
+
 object-keys@^1.0.8:
   version "1.0.11"
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.0.11.tgz#c54601778ad560f1142ce0e01bcca8b56d13426d"
@@ -3939,6 +4114,10 @@ pkg-dir@^2.0.0:
   dependencies:
     find-up "^2.1.0"
 
+popper.js@^1.12.5, popper.js@^1.12.9:
+  version "1.12.9"
+  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.12.9.tgz#0dfbc2dff96c451bb332edcfcfaaf566d331d5b3"
+
 portfinder@^1.0.9:
   version "1.0.13"
   resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.13.tgz#bb32ecd87c27104ae6ee44b5a3ccbf0ebb1aede9"
@@ -4285,7 +4464,7 @@ promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
-prop-types@^15.6.0:
+prop-types@^15.5.10, prop-types@^15.5.7, prop-types@^15.5.8, prop-types@^15.6.0:
   version "15.6.0"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.0.tgz#ceaf083022fc46b4a35f69e13ef75aed0d639856"
   dependencies:
@@ -4409,6 +4588,22 @@ rc@^1.0.1, rc@^1.1.6, rc@^1.1.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
+react-chartjs-2@^2.7.0:
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/react-chartjs-2/-/react-chartjs-2-2.7.0.tgz#14925143f7e5c59dc631d0d8279255b031c5561a"
+  dependencies:
+    lodash "^4.17.4"
+    prop-types "^15.5.8"
+
+react-datetime@^2.10.3:
+  version "2.12.0"
+  resolved "https://registry.yarnpkg.com/react-datetime/-/react-datetime-2.12.0.tgz#9226a11730b7be1273c12f018a4d5613496e831c"
+  dependencies:
+    create-react-class "^15.5.2"
+    object-assign "^3.0.0"
+    prop-types "^15.5.7"
+    react-onclickoutside "^6.5.0"
+
 react-dev-utils@4.2.1:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-4.2.1.tgz#9f2763e7bafa1a1b9c52254d2a479deec280f111"
@@ -4445,6 +4640,42 @@ react-error-overlay@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-3.0.0.tgz#c2bc8f4d91f1375b3dad6d75265d51cd5eeaf655"
 
+react-input-autosize@^2.1.2:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/react-input-autosize/-/react-input-autosize-2.2.1.tgz#ec428fa15b1592994fb5f9aa15bb1eb6baf420f8"
+  dependencies:
+    prop-types "^15.5.8"
+
+react-leaflet@^1.8.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/react-leaflet/-/react-leaflet-1.8.0.tgz#e33ba704910e2ad86dd29b5a4a52acb7030fe2c4"
+  dependencies:
+    lodash "^4.0.0"
+    lodash-es "^4.0.0"
+    warning "^3.0.0"
+
+react-onclickoutside@^6.5.0:
+  version "6.7.1"
+  resolved "https://registry.yarnpkg.com/react-onclickoutside/-/react-onclickoutside-6.7.1.tgz#6a5b5b8b4eae6b776259712c89c8a2b36b17be93"
+
+react-popper@^0.7.2:
+  version "0.7.5"
+  resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-0.7.5.tgz#71c25946f291db381231281f6b95729e8b801596"
+  dependencies:
+    popper.js "^1.12.5"
+    prop-types "^15.5.10"
+
+react-redux@^5.0.6:
+  version "5.0.6"
+  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-5.0.6.tgz#23ed3a4f986359d68b5212eaaa681e60d6574946"
+  dependencies:
+    hoist-non-react-statics "^2.2.1"
+    invariant "^2.0.0"
+    lodash "^4.2.0"
+    lodash-es "^4.2.0"
+    loose-envify "^1.1.0"
+    prop-types "^15.5.10"
+
 react-scripts-ts@2.13.0:
   version "2.13.0"
   resolved "https://registry.yarnpkg.com/react-scripts-ts/-/react-scripts-ts-2.13.0.tgz#d5493035e6d521030f0d3e5e8e5b5872f7df1a28"
@@ -4482,6 +4713,31 @@ react-scripts-ts@2.13.0:
   optionalDependencies:
     fsevents "1.1.2"
 
+react-select@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/react-select/-/react-select-1.2.1.tgz#a2fe58a569eb14dcaa6543816260b97e538120d1"
+  dependencies:
+    classnames "^2.2.4"
+    prop-types "^15.5.8"
+    react-input-autosize "^2.1.2"
+
+react-table@^6.7.6:
+  version "6.7.6"
+  resolved "https://registry.yarnpkg.com/react-table/-/react-table-6.7.6.tgz#3f9e3b308328ceb04ef93a47babefaba2619c905"
+  dependencies:
+    classnames "^2.2.5"
+
+react-transition-group@^2.2.0:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.2.1.tgz#e9fb677b79e6455fd391b03823afe84849df4a10"
+  dependencies:
+    chain-function "^1.0.0"
+    classnames "^2.2.5"
+    dom-helpers "^3.2.0"
+    loose-envify "^1.3.1"
+    prop-types "^15.5.8"
+    warning "^3.0.0"
+
 react@^16.2.0:
   version "16.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-16.2.0.tgz#a31bd2dab89bff65d42134fa187f24d054c273ba"
@@ -4491,6 +4747,18 @@ react@^16.2.0:
     object-assign "^4.1.1"
     prop-types "^15.6.0"
 
+reactstrap@^5.0.0-beta:
+  version "5.0.0-beta"
+  resolved "https://registry.yarnpkg.com/reactstrap/-/reactstrap-5.0.0-beta.tgz#0372acae7665ec3396abe87e5cdddf3077e98995"
+  dependencies:
+    classnames "^2.2.3"
+    lodash.isfunction "^3.0.8"
+    lodash.isobject "^3.0.2"
+    lodash.tonumber "^4.0.3"
+    prop-types "^15.5.8"
+    react-popper "^0.7.2"
+    react-transition-group "^2.2.0"
+
 read-pkg-up@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-1.0.1.tgz#9d63c13276c065918d57f002a57f40a1b643fb02"
@@ -4578,6 +4846,25 @@ reduce-function-call@^1.0.1:
   dependencies:
     balanced-match "^0.4.2"
 
+redux-logger@^3.0.6:
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/redux-logger/-/redux-logger-3.0.6.tgz#f7555966f3098f3c88604c449cf0baf5778274bf"
+  dependencies:
+    deep-diff "^0.3.5"
+
+redux-thunk@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.2.0.tgz#e615a16e16b47a19a515766133d1e3e99b7852e5"
+
+redux@^3.6.0, redux@^3.7.2:
+  version "3.7.2"
+  resolved "https://registry.yarnpkg.com/redux/-/redux-3.7.2.tgz#06b73123215901d25d065be342eb026bc1c8537b"
+  dependencies:
+    lodash "^4.2.1"
+    lodash-es "^4.2.1"
+    loose-envify "^1.1.0"
+    symbol-observable "^1.0.3"
+
 regenerate@^1.2.1:
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.3.3.tgz#0c336d3980553d755c39b586ae3b20aa49c82b7f"
@@ -5235,6 +5522,10 @@ sw-toolbox@^3.4.0:
     path-to-regexp "^1.0.1"
     serviceworker-cache-polyfill "^4.0.0"
 
+symbol-observable@^1.0.3:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
+
 symbol-tree@^3.2.1:
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.2.tgz#ae27db38f660a7ae2e1c3b7d1bc290819b8519e6"
@@ -5643,6 +5934,12 @@ walker@~1.0.5:
   dependencies:
     makeerror "1.0.x"
 
+warning@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/warning/-/warning-3.0.0.tgz#32e5377cb572de4ab04753bdf8821c01ed605b7c"
+  dependencies:
+    loose-envify "^1.0.0"
+
 watch@~0.10.0:
   version "0.10.0"
   resolved "https://registry.yarnpkg.com/watch/-/watch-0.10.0.tgz#77798b2da0f9910d595f1ace5b0c2258521f21dc"