analytics/assets/js/dashboard/stats/current-visitors.js
Vignesh Joglekar 8174f1d135
Mobile/Filter Overflow UX Improvements (#503)
* Initial Implementation

Still needs clear all functionality, various styles and spacing, and overall cleanup

* Second pass

Most of the styling issues are still present, but collapsing/expanding logic should be complete

* Third pass

* Refactors, comments, cleans up filters code

* Flatpickr color+placement changes

* Last(?) pass on UI

* Actually fixes sticky dates without breaking navigation

* Changelog

* Puts this back where it goes

* Updates based on @ukutaht's comments

- Removes Screenclass hook in favor of simple viewport size storage
- Uses class-based component
- Removes recheck variable in favor of tri-state wrapped
- General formatting & code cleanup
2020-12-29 11:00:41 +02:00

43 lines
1.3 KiB
JavaScript

import React from 'react';
import { Link } from 'react-router-dom'
import { countFilters } from '../query';
export default class CurrentVisitors extends React.Component {
constructor(props) {
super(props)
this.state = {currentVisitors: null}
}
componentDidMount() {
this.updateCount()
this.props.timer.onTick(this.updateCount.bind(this))
}
updateCount() {
return fetch(`/api/stats/${encodeURIComponent(this.props.site.domain)}/current-visitors`)
.then( response => {
if (!response.ok) { throw response }
return response.json()
})
.then((res) => this.setState({currentVisitors: res}))
}
render() {
if (countFilters(this.props.query) !== 0) { return null }
const { currentVisitors } = this.state;
if (currentVisitors !== null) {
return (
<Link to={`/${encodeURIComponent(this.props.site.domain)}?period=realtime`} className="block text-sm font-bold text-gray-500 dark:text-gray-300 mr-auto ml-2">
<svg className="w-2 mr-2 fill-current text-green-500 inline" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<circle cx="8" cy="8" r="8"/>
</svg>
{currentVisitors} current visitor{currentVisitors === 1 ? '' : 's'}
</Link>
)
} else {
return null
}
}
}