diff --git a/assets/js/dashboard/stats/devices/index.js b/assets/js/dashboard/stats/devices/index.js
index a8d455322350..e7c386dd1778 100644
--- a/assets/js/dashboard/stats/devices/index.js
+++ b/assets/js/dashboard/stats/devices/index.js
@@ -8,7 +8,6 @@ import OperatingSystems from './operating-systems'
import FadeIn from '../../fade-in'
import numberFormatter from '../../number-formatter'
import Bar from '../bar'
-import MoreLink from '../more-link'
import * as api from '../../api'
@@ -46,11 +45,6 @@ class ScreenSizes extends React.Component {
this.onVisible = this.onVisible.bind(this)
}
- onVisible() {
- this.fetchScreenSizes()
- if (this.props.timer) this.props.timer.onTick(this.fetchScreenSizes.bind(this))
- }
-
componentDidUpdate(prevProps) {
if (this.props.query !== prevProps.query) {
this.setState({loading: true, sizes: null})
@@ -58,11 +52,24 @@ class ScreenSizes extends React.Component {
}
}
+ onVisible() {
+ this.fetchScreenSizes()
+ if (this.props.timer) this.props.timer.onTick(this.fetchScreenSizes.bind(this))
+ }
+
+
fetchScreenSizes() {
- api.get(`/api/stats/${encodeURIComponent(this.props.site.domain)}/screen-sizes`, this.props.query)
+ api.get(
+ `/api/stats/${encodeURIComponent(this.props.site.domain)}/screen-sizes`,
+ this.props.query
+ )
.then((res) => this.setState({loading: false, sizes: res}))
}
+ label() {
+ return this.props.query.period === 'realtime' ? 'Current visitors' : 'Visitors'
+ }
+
renderScreenSize(size) {
const query = new URLSearchParams(window.location.search)
query.set('screen', size.name)
@@ -70,22 +77,31 @@ class ScreenSizes extends React.Component {
return (
-
-
+
+
{iconFor(size.name)} {size.name}
-
{numberFormatter(size.count)} ({size.percentage}%)
+
+ {numberFormatter(size.count)}
+ ({size.percentage}%)
+
)
}
- label() {
- return this.props.query.period === 'realtime' ? 'Current visitors' : 'Visitors'
- }
-
renderList() {
if (this.state.sizes && this.state.sizes.length > 0) {
return (
@@ -97,9 +113,14 @@ class ScreenSizes extends React.Component {
{ this.state.sizes && this.state.sizes.map(this.renderScreenSize.bind(this)) }
)
- } else {
- return No data yet
}
+ return (
+
+ No data yet
+
+ )
}
render() {
@@ -117,38 +138,66 @@ class ScreenSizes extends React.Component {
export default class Devices extends React.Component {
constructor(props) {
super(props)
- this.tabKey = 'deviceTab__' + props.site.domain
+ this.tabKey = `deviceTab__${ props.site.domain}`
const storedTab = storage.getItem(this.tabKey)
this.state = {
mode: storedTab || 'size'
}
}
- renderContent() {
- if (this.state.mode === 'size') {
- return
- } else if (this.state.mode === 'browser') {
- return
- } else if (this.state.mode === 'os') {
- return
- }
- }
-
+
setMode(mode) {
return () => {
storage.setItem(this.tabKey, mode)
this.setState({mode})
}
}
+
+ renderContent() {
+ switch (this.state.mode) {
+ case 'browser':
+ return
+ case 'os':
+ return (
+
+ )
+ case 'size':
+ default:
+ return (
+
+ )
+ }
+ }
renderPill(name, mode) {
const isActive = this.state.mode === mode
if (isActive) {
- return {name}
- } else {
- return {name}
+ return (
+
+ {name}
+
+ )
}
+
+ return (
+
+ {name}
+
+ )
}
render() {
@@ -158,16 +207,13 @@ export default class Devices extends React.Component {
Devices
-
{ this.renderPill('Size', 'size') }
{ this.renderPill('Browser', 'browser') }
{ this.renderPill('OS', 'os') }
-
{ this.renderContent() }
-
)