analytics/assets/js/dashboard/stats/current-visitors.js
Vignesh Joglekar 425975efec
Adds dark mode to entire dashboard (#467)
* Adds New Dark Mode Assets

* Moves triangle for dropdown to a reasonable position

* Majority .eex dark implementation

* Fixes Logo Positioning

* Adds theme flag to user schema, uses it

* Uses correct variables for theme applicator script

* Minor missed theme changes/fallbacks

* Individual Component Support + Theme Context

* Sources Tab Support

This was a pain to test D:

* Partial Stats Sections Support

* More of stats modules supported

* Modal +table support

* Improves some Flatpickr in light theme, supports dark theme

* Fixes missed settings tab colors

* Finishes Devices module support

* Fixes bar graph colors

* Better colorizes maps module

* Undoes colorized bars

(they looked bad, on second thought)

* Fixes loading indicator

* Finishes conversions module

* Adds changelog entry

The PR number could be wrong, will double check

* Fixes missed header color

* Fixes naming of migration and removes static alter

* Does migration correctly

As I said, my Elixir is pretty weak heh

* Adds support for spike notifications setting

* Improves contrast and visibility for email settings

* Resolves @ukutaht's comments on #467

* Fixes missing dark style

* Found one more missed dark element (shared links)

* Formatting fixes
2020-12-16 11:57:28 +02:00

40 lines
1.2 KiB
JavaScript

import React from 'react';
import { Link } from 'react-router-dom'
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() {
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">
<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
}
}
}