analytics/assets/js/dashboard/realtime.js
Vignesh Joglekar b64f9de51a
Adds sticky header row (site selection, date, filters) (#472)
* 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

* Add initial implementation for sticky header

* Minor mobile formatting improvements

* Finishes (probably) pinned header feature

* Adds changelog entry for pinned header

* Updates PR number in sticky header changelog entry

* Wraps up code cleanup + feature

* Merge conflicts are hard, apparently

* Removes extraneous tailwind variants

* Fixes mentioned issues

* Removes option to unsticky
* py-3
* Tailwind in CSS
2020-12-22 15:39:14 +02:00

56 lines
2.2 KiB
JavaScript

import React from 'react';
import Datepicker from './datepicker'
import SiteSwitcher from './site-switcher'
import Filters from './filters'
import CurrentVisitors from './stats/current-visitors'
import VisitorGraph from './stats/visitor-graph'
import Sources from './stats/sources'
import Pages from './stats/pages'
import Countries from './stats/countries'
import Devices from './stats/devices'
import Conversions from './stats/conversions'
import { withPinnedHeader } from './pinned-header-hoc';
class Realtime extends React.Component {
renderConversions() {
if (this.props.site.hasGoals) {
return (
<div className="w-full block md:flex items-start justify-between mt-6">
<Conversions site={this.props.site} query={this.props.query} title="Goal Conversions (last 30 min)" />
</div>
)
}
}
render() {
return (
<div className="mb-12">
<div id="stats-container-top"></div>
<div className={`sticky top-0 bg-gray-50 dark:bg-gray-850 py-3 z-9 ${this.props.stuck ? 'z-10 fullwidth-shadow' : ''}`}>
<div className="w-full sm:flex justify-between items-center">
<div className="w-full flex items-center">
<SiteSwitcher site={this.props.site} loggedIn={this.props.loggedIn} />
</div>
<Datepicker site={this.props.site} query={this.props.query} />
</div>
<Filters query={this.props.query} history={this.props.history} />
</div>
<VisitorGraph site={this.props.site} query={this.props.query} timer={this.props.timer} />
<div className="w-full block md:flex items-start justify-between">
<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="w-full block md:flex items-start justify-between">
<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>
)
}
}
export default withPinnedHeader(Realtime, 'realtime');