fathom/assets/js/pages/dashboard.js

77 lines
2.8 KiB
JavaScript

'use strict'
import { h, Component } from 'preact';
import LogoutButton from '../components/LogoutButton.js';
import Realtime from '../components/Realtime.js';
import DatePicker from '../components/DatePicker.js';
import CountWidget from '../components/CountWidget.js';
import Table from '../components/Table.js';
import Chart from '../components/Chart.js';
import { bind } from 'decko';
class Dashboard extends Component {
constructor(props) {
super(props)
this.state = {
period: (window.location.hash.substring(2) || 'week'),
before: 0,
after: 0,
}
}
@bind
changePeriod(s) {
this.setState({ period: s.period, before: s.before, after: s.after })
window.history.replaceState(this.state, null, `#!${s.period}`)
}
render(props, state) {
return (
<div class="app-page wrapper">
<header class="section">
<nav class="main-nav animated fadeInDown">
<ul>
<li class="logo"><a href="/">Fathom</a></li>
<li class="visitors"><Realtime onError={props.onLogout} /></li>
<li class="spacer">&middot;</li>
<li class="signout"><LogoutButton onSuccess={props.onLogout} /></li>
</ul>
</nav>
</header>
<section class="section animated fadeInUp delayed_02s">
<nav class="date-nav">
<DatePicker onChange={this.changePeriod} value={state.period} />
</nav>
<div class="boxes">
<div class="box box-totals animated fadeInUp delayed_03s">
<CountWidget title="Unique visitors" endpoint="stats/site/visitors" before={state.before} after={state.after} />
<CountWidget title="Page views" endpoint="stats/site/pageviews" before={state.before} after={state.after} />
<CountWidget title="Avg time on site" endpoint="stats/site/duration" format="duration" before={state.before} after={state.after} />
<CountWidget title="Bounce rate" endpoint="stats/site/bounces" format="percentage" before={state.before} after={state.after} />
</div>
<div class="boxes-col">
<div class="box box-graph">
<Chart before={state.before} after={state.after} />
</div>
<div class="box box-pages animated fadeInUp delayed_04s">
<Table endpoint="stats/pages" headers={["Top pages", "Views", "Uniques"]} before={state.before} after={state.after} />
</div>
<div class="box box-referrers animated fadeInUp delayed_04s">
<Table endpoint="stats/referrers" headers={["Top referrers", "Views", "Uniques"]} before={state.before} after={state.after} showHostname="true" />
</div>
</div>
</div>
</section>
<footer class="section"></footer>
</div>
)}
}
export default Dashboard