Update location hash when choosing time period & parse on component init.

assets/js/components/CountWidget.js

@@ -41,6 +41,7 @@ class CountWidget extends Component {
   }
 
   renderPercentage() {
+    // wait for request to finish
     if( ! this.state.previousCount ) {
       return '';
     }
@@ -58,7 +59,6 @@ class CountWidget extends Component {
         {loadingOverlay}
         <h4 class="">{this.props.title}</h4>
         <div class="big tiny-margin">{numbers.formatWithComma(this.state.count)} {this.renderPercentage()}</div>
-        <div class="muted">last {this.props.period} days</div>
       </div>
     )
   }

assets/js/components/DatePicker.js

@@ -2,7 +2,7 @@
 
 import { h, render, Component } from 'preact';
 
-var availablePeriods = [
+const availablePeriods = [
   {
     id: 7,
     label: 'Last 7 days'

assets/js/pages/dashboard.js

@@ -29,8 +29,15 @@ class Dashboard extends Component {
     super(props)
 
     this.state = {
-      period: 7
+      period: parseInt(window.location.hash.substring(2)) || 7
     }
+
+    this.onPeriodChoose = this.onPeriodChoose.bind(this)
+  }
+
+  onPeriodChoose(p) {
+    this.setState({ period: p })
+    window.history.replaceState(this.state, null, `#!${p}`)
   }
 
   render() {
@@ -40,7 +47,7 @@ class Dashboard extends Component {
       <div class="container">
         <Realtime />
         <div class="clear">
-          <DatePicker period={this.state.period} onChoose={(p) => { this.setState({ period: p })}} />
+          <DatePicker period={this.state.period} onChoose={this.onPeriodChoose} />
         </div>
         <div class="row">
           <div class="col-2">