analytics/assets/js/dashboard/index.js
Uku Taht 8a4d0a91d1
WIP: New UI updates (#19)
* WIP: New UI idea

* Remove hover styling if things are not clickable

* Improve mobile view

* Remove dead code

* Fade in tabs

* Update landing page with new style

* Fix countries test

* Fix alignment in conversions report
2020-02-10 15:17:00 +02:00

72 lines
2.4 KiB
JavaScript

import React from 'react';
import { withRouter } from 'react-router-dom'
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'
import {parseQuery} from './query'
class Stats extends React.Component {
constructor(props) {
super(props)
this.state = {query: parseQuery(props.location.search, this.props.site)}
}
componentDidUpdate(prevProps) {
if (prevProps.location.search !== this.props.location.search) {
this.setState({query: parseQuery(this.props.location.search, this.props.site)})
}
}
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.state.query} />
</div>
)
}
}
forgotten() {
return (
<div>
<OperatingSystems site={this.props.site} query={this.state.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">Analytics for <a href={`//${this.props.site.domain}`} target="_blank">{this.props.site.domain}</a></h2>
<CurrentVisitors site={this.props.site} />
</div>
<Datepicker site={this.props.site} query={this.state.query} />
</div>
<Filters query={this.state.query} history={this.props.history} />
<VisitorGraph site={this.props.site} query={this.state.query} />
<div className="w-full block md:flex items-start justify-between">
<Referrers site={this.props.site} query={this.state.query} />
<Pages site={this.props.site} query={this.state.query} />
</div>
<div className="w-full block md:flex items-start justify-between">
<Countries site={this.props.site} query={this.state.query} />
<Devices site={this.props.site} query={this.state.query} />
</div>
{ this.renderConversions() }
</div>
)
}
}
export default withRouter(Stats)