From 10bc09ca8d088341f0603b0ad0fcc571b65e862c Mon Sep 17 00:00:00 2001
From: Uku Taht <uku.taht@gmail.com>
Date: Thu, 22 Jul 2021 10:33:16 +0300
Subject: [PATCH] Fix realtime view

---
 assets/js/dashboard/filters.js  |  9 ++++++---
 assets/js/dashboard/realtime.js | 29 ++++++++++++++++++++++++-----
 2 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/assets/js/dashboard/filters.js b/assets/js/dashboard/filters.js
index e58e5a511..355cc846e 100644
--- a/assets/js/dashboard/filters.js
+++ b/assets/js/dashboard/filters.js
@@ -153,9 +153,11 @@ function DropdownContent({history, site, query, wrapped}) {
         + Add filter
       </div>
       {appliedFilters(query).map((filter) => renderDropdownFilter(site, history, filter, query))}
-      <div className="border-t border-gray-200 dark:border-gray-500 px-4 sm:py-2 py-3 text-sm leading-tight hover:text-indigo-700 dark:hover:text-indigo-500 hover:cursor-pointer" onClick={() => clearAllFilters(history, query)}>
-        Clear All Filters
-      </div>
+      <Menu.Item key="clear">
+        <div className="border-t border-gray-200 dark:border-gray-500 px-4 sm:py-2 py-3 text-sm leading-tight hover:text-indigo-700 dark:hover:text-indigo-500 hover:cursor-pointer" onClick={() => clearAllFilters(history, query)}>
+          Clear All Filters
+        </div>
+      </Menu.Item>
     </>
   )
 }
@@ -310,6 +312,7 @@ class Filters extends React.Component {
               leaveTo="transform opacity-0 scale-95"
             >
               <Menu.Items
+                static
                 className="absolute w-full left-0 right-0 md:w-72 md:absolute md:top-auto md:left-auto md:right-0 mt-2 origin-top-right z-10"
               >
                 <div
diff --git a/assets/js/dashboard/realtime.js b/assets/js/dashboard/realtime.js
index dcb0a4c18..de3dbd0c7 100644
--- a/assets/js/dashboard/realtime.js
+++ b/assets/js/dashboard/realtime.js
@@ -1,15 +1,18 @@
 import React from 'react';
 
-import StickyNav from './pinned-header-hoc';
-import CurrentVisitors from './stats/current-visitors'
+import Datepicker from './datepicker'
+import DatepickerArrows from './datepicker-arrows'
+import SiteSwitcher from './site-switcher'
+import Filters from './filters'
 import VisitorGraph from './stats/visitor-graph'
 import Sources from './stats/sources'
-import Pages from './stats/pages/'
+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';
 
-export default class Realtime extends React.Component {
+class Realtime extends React.Component {
   renderConversions() {
     if (this.props.site.hasGoals) {
       return (
@@ -18,6 +21,8 @@ export default class Realtime extends React.Component {
         </div>
       )
     }
+
+    return null
   }
 
   render() {
@@ -25,7 +30,19 @@ export default class Realtime extends React.Component {
 
     return (
       <div className="mb-12">
-        <StickyNav site={this.props.site} query={this.props.query} timer={this.props.timer} />
+        <div id="stats-container-top"></div>
+        <div className={`${navClass} top-0 sm:py-3 py-2 z-9 ${this.props.stuck && !this.props.site.embedded ? 'z-10 fullwidth-shadow bg-gray-50 dark:bg-gray-850' : ''}`}>
+          <div className="items-center w-full flex">
+            <div className="flex items-center w-full">
+              <SiteSwitcher site={this.props.site} loggedIn={this.props.loggedIn} currentUserRole={this.props.currentUserRole} />
+              <Filters className="flex" site={this.props.site} query={this.props.query} history={this.props.history} />
+            </div>
+            <div className="flex ml-auto pl-2">
+              <DatepickerArrows site={this.props.site} query={this.props.query} />
+              <Datepicker className="w-28 sm:w-36 md:w-44" site={this.props.site} query={this.props.query} />
+            </div>
+          </div>
+        </div>
         <VisitorGraph site={this.props.site} query={this.props.query} timer={this.props.timer} />
         <div className="items-start justify-between block w-full md:flex">
           <Sources site={this.props.site} query={this.props.query} timer={this.props.timer} />
@@ -41,3 +58,5 @@ export default class Realtime extends React.Component {
     )
   }
 }
+
+export default withPinnedHeader(Realtime, '#stats-container-top');