analytics/assets/js/dashboard/historical.js
Uku Taht 232298d327
Realtime dashboard (#212)
* Auto-updating dashboard with realtime info

* Remove extra route

* Draw list of countries next to the map

* Nice animations

* Do not show bounce rates in realtime modals

* Update countries and devices in realtime

* Remove unused component

* Show total pageviews in the last 30 minutes

* Show proper labels

* Remove unnecessary z-index

* Fix label for main graph

* Fix compiler warnings

* Add tests

* Fix copy pluralizations

* Fix copy in countries modal

* Real-time -> Realtime

* Looser test assertion

* Show last 30 minutes conversions on realtime report

* Remove EventTarget API because it doesn't work on Safari

* Get referrer drilldown from sessions table

* Fix failing tests
2020-07-14 16:52:26 +03:00

49 lines
1.9 KiB
JavaScript

import React from 'react';
import Datepicker from './datepicker'
import Filters from './filters'
import CurrentVisitors from './stats/current-visitors'
import VisitorGraph from './stats/visitor-graph'
import Referrers from './stats/referrers'
import Pages from './stats/pages'
import Countries from './stats/countries'
import Devices from './stats/devices'
import Conversions from './stats/conversions'
export default class Historical extends React.Component {
renderConversions() {
if (this.props.site.hasGoals) {
return (
<div className="w-full block md:flex items-start justify-between mt-6">
<Conversions site={this.props.site} query={this.props.query} />
</div>
)
}
}
render() {
return (
<div className="mb-12">
<div className="w-full sm:flex justify-between items-center">
<div className="w-full flex items-center">
<h2 className="text-left mr-8 font-semibold text-xl">Analytics for <a href={`http://${this.props.site.domain}`} target="_blank">{this.props.site.domain}</a></h2>
<CurrentVisitors timer={this.props.timer} site={this.props.site} />
</div>
<Datepicker site={this.props.site} query={this.props.query} />
</div>
<Filters query={this.props.query} history={this.props.history} />
<VisitorGraph site={this.props.site} query={this.props.query} />
<div className="w-full block md:flex items-start justify-between">
<Referrers site={this.props.site} query={this.props.query} />
<Pages site={this.props.site} query={this.props.query} />
</div>
<div className="w-full block md:flex items-start justify-between">
<Countries site={this.props.site} query={this.props.query} />
<Devices site={this.props.site} query={this.props.query} />
</div>
{ this.renderConversions() }
</div>
)
}
}