analytics/assets/js/dashboard/realtime.js

59 lines
2.4 KiB
JavaScript
Raw Normal View History

import React from 'react';
2021-07-22 10:33:16 +03:00
import Datepicker from './datepicker'
import SiteSwitcher from './site-switcher'
import Filters from './filters'
import VisitorGraph from './stats/visitor-graph'
import Sources from './stats/sources'
2021-07-22 10:33:16 +03:00
import Pages from './stats/pages'
import Countries from './stats/countries'
import Devices from './stats/devices'
import Conversions from './stats/conversions'
2021-07-22 10:33:16 +03:00
import { withPinnedHeader } from './pinned-header-hoc';
2021-07-22 10:33:16 +03:00
class Realtime extends React.Component {
renderConversions() {
if (this.props.site.hasGoals) {
return (
<div className="items-start justify-between block w-full mt-6 md:flex">
<Conversions site={this.props.site} query={this.props.query} title="Goal Conversions (last 30 min)" />
</div>
)
}
2021-07-22 10:33:16 +03:00
return null
}
render() {
const navClass = this.props.site.embedded ? 'relative' : 'sticky'
return (
<div className="mb-12">
2021-07-22 10:33:16 +03:00
<div id="stats-container-top"></div>
<div className={`${navClass} top-0 sm:py-3 py-2 z-9 ${this.props.stuck && !this.props.site.embedded ? 'z-10 fullwidth-shadow bg-gray-50 dark:bg-gray-850' : ''}`}>
<div className="items-center w-full flex">
<div className="flex items-center w-full">
<SiteSwitcher site={this.props.site} loggedIn={this.props.loggedIn} currentUserRole={this.props.currentUserRole} />
<Filters className="flex" site={this.props.site} query={this.props.query} history={this.props.history} />
</div>
2021-07-22 11:27:10 +03:00
<Datepicker site={this.props.site} query={this.props.query} />
2021-07-22 10:33:16 +03:00
</div>
</div>
<VisitorGraph site={this.props.site} query={this.props.query} timer={this.props.timer} />
<div className="items-start justify-between block w-full md:flex">
<Sources site={this.props.site} query={this.props.query} timer={this.props.timer} />
<Pages site={this.props.site} query={this.props.query} timer={this.props.timer} />
</div>
<div className="items-start justify-between block w-full md:flex">
<Countries site={this.props.site} query={this.props.query} timer={this.props.timer} />
<Devices site={this.props.site} query={this.props.query} timer={this.props.timer} />
</div>
{ this.renderConversions() }
</div>
)
}
}
2021-07-22 10:33:16 +03:00
export default withPinnedHeader(Realtime, '#stats-container-top');