mirror of https://github.com/status-im/fathom.git
45 lines
1.6 KiB
JavaScript
45 lines
1.6 KiB
JavaScript
|
'use strict'
|
||
|
|
||
|
import { h, render, Component } from 'preact';
|
||
|
import LogoutButton from '../components/LogoutButton.js';
|
||
|
import Pageviews from '../components/Pageviews.js';
|
||
|
import Realtime from '../components/Realtime.js';
|
||
|
import Graph from '../components/Graph.js';
|
||
|
import DatePicker from '../components/DatePicker.js';
|
||
|
import Table from '../components/Table.js';
|
||
|
|
||
|
class Dashboard extends Component {
|
||
|
constructor(props) {
|
||
|
super(props)
|
||
|
|
||
|
this.state = {
|
||
|
period: 7
|
||
|
}
|
||
|
}
|
||
|
|
||
|
render() {
|
||
|
return (<div class="container">
|
||
|
<header class="header cf">
|
||
|
<h1 class="pull-left">Ana <small>open web analytics</small></h1>
|
||
|
<div class="pull-right">
|
||
|
<LogoutButton onSuccess={this.props.onLogout} />
|
||
|
</div>
|
||
|
</header>
|
||
|
<Realtime />
|
||
|
<div class="clear">
|
||
|
<DatePicker period={this.state.period} onChoose={(p) => { this.setState({ period: p })}} />
|
||
|
</div>
|
||
|
<Graph period={this.state.period} />
|
||
|
<div>
|
||
|
<Pageviews period={this.state.period} />
|
||
|
<Table period={this.state.period} endpoint="languages" title="Languages" headers={["#", "Language", "Count", "%"]} />
|
||
|
<Table period={this.state.period} endpoint="screen-resolutions" title="Screen Resolutions" headers={["#", "Screen Resolution", "Count", "%"]} />
|
||
|
<Table period={this.state.period} endpoint="countries" title="Countries" headers={["#", "Country", "Count", "%"]} />
|
||
|
<Table period={this.state.period} endpoint="browsers" title="Browsers" headers={["#", "Browser", "Count", "%"]} />
|
||
|
</div>
|
||
|
</div>)
|
||
|
}
|
||
|
}
|
||
|
|
||
|
export default Dashboard
|