import React from 'react'; import { Link } from 'react-router-dom' import * as storage from '../../storage' import LazyLoader from '../../lazy-loader' import Browsers from './browsers' import OperatingSystems from './operating-systems' import FadeIn from '../../fade-in' import numberFormatter from '../../number-formatter' import Bar from '../bar' import * as api from '../../api' import * as url from '../../url' const EXPLANATION = { 'Mobile': 'up to 576px', 'Tablet': '576px to 992px', 'Laptop': '992px to 1440px', 'Desktop': 'above 1440px', } function iconFor(screenSize) { if (screenSize === 'Mobile') { return ( ) } else if (screenSize === 'Tablet') { return ( ) } else if (screenSize === 'Laptop') { return ( ) } else if (screenSize === 'Desktop') { return ( ) } } class ScreenSizes extends React.Component { constructor(props) { super(props) this.state = {loading: true} this.onVisible = this.onVisible.bind(this) } componentDidUpdate(prevProps) { if (this.props.query !== prevProps.query) { this.setState({loading: true, sizes: null}) this.fetchScreenSizes() } } 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 ) .then((res) => this.setState({loading: false, sizes: res})) } showConversionRate() { return !!this.props.query.filters.goal } label() { return this.props.query.period === 'realtime' ? 'Current visitors' : 'Visitors' } renderScreenSize(size) { const query = new URLSearchParams(window.location.search) query.set('screen', size.name) const maxWidthDeduction = this.showConversionRate() ? "10rem" : "5rem" return (
{iconFor(size.name)} {size.name} {numberFormatter(size.visitors)} ({size.percentage}%) {this.showConversionRate() && {numberFormatter(size.conversion_rate)}%}
) } renderList() { if (this.state.sizes && this.state.sizes.length > 0) { return (
Screen size
{ this.label() } {this.showConversionRate() && CR}
{ this.state.sizes && this.state.sizes.map(this.renderScreenSize.bind(this)) }
) } return (
No data yet
) } render() { return ( { this.state.loading &&
} { this.renderList() }
) } } export default class Devices extends React.Component { constructor(props) { super(props) this.tabKey = `deviceTab__${ props.site.domain}` const storedTab = storage.getItem(this.tabKey) this.state = { mode: storedTab || 'size' } } 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}
  • ) } return (
  • {name}
  • ) } render() { return (

    Devices

      { this.renderPill('Size', 'size') } { this.renderPill('Browser', 'browser') } { this.renderPill('OS', 'os') }
    { this.renderContent() }
    ) } }