From fdbb779715184840a25d68d91c5e4a6dae45983e Mon Sep 17 00:00:00 2001
From: Gagan Deep <pandafy.dev@gmail.com>
Date: Tue, 29 Aug 2023 17:46:15 +0530
Subject: [PATCH] [fix] Fixed chart utils on narrow screens

---
 .../static/monitoring/css/chart.css           | 73 ++++++++++---------
 .../static/monitoring/css/dashboard-chart.css | 16 +++-
 .../static/monitoring/js/chart-utils.js       |  4 +-
 .../templates/monitoring/paritals/chart.html  | 21 +++---
 openwisp_monitoring/tests/test_selenium.py    |  2 +-
 5 files changed, 68 insertions(+), 48 deletions(-)

diff --git a/openwisp_monitoring/monitoring/static/monitoring/css/chart.css b/openwisp_monitoring/monitoring/static/monitoring/css/chart.css
index 79218fa60..9e0bc9f6a 100644
--- a/openwisp_monitoring/monitoring/static/monitoring/css/chart.css
+++ b/openwisp_monitoring/monitoring/static/monitoring/css/chart.css
@@ -1,40 +1,35 @@
 #ow-chart-fallback {
   text-align: center;
 }
-#ow-chart-time{
-  margin-top: 15px;
-  text-align: center;
-  padding: 4px;
-}
-#ow-chart-time a{
-  display: inline-block;
-  margin: 0 2px;
-  color: #fff;
-  background-color: #333;
-  padding: 5px 15px;
-  text-decoration: none !important;
-  border-radius: 3px;
-  cursor: pointer;
-}
-#ow-chart-time a:hover{
-  background-color: #777 !important;
-}
-#ow-chart-time a.active{
-  background: transparent;
-  color: #666;
-  cursor: default;
-  border: 1px solid #666;
-}
-#ow-chart-time a.export{
-  float: right;
-  background: #333;
-}
-#ow-chart-time a#daterangepicker-widget{
-  float: left;
-  margin-right: 100px;
+#ow-chart-utils {
+  display: flex;
+  justify-content: space-between;
+}
+#ow-chart-utils .select2-container {
+  min-width: 150px !important;
+  width: unset !important;
+}
+#ow-chart-utils span.select2-selection {
+  min-height: 27px;
+  min-width: 200px;
+  height: 27px;
+}
+#ow-chart-utils .select2-selection__rendered {
+  line-height: 27px;
+  height: 27px;
+}
+#ow-chart-utils .select2-selection__arrow {
+  top: 0px;
+  height: 27px
+}
+#ow-chart-utils > span{
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
 }
-#ow-chart-time a.export:hover{
-  background: #777;
+#ow-chart-utils .button {
+  font-size: 14px;
+  padding: 5px 10px;
 }
 #ow-chart-fallback{
   display: none;
@@ -147,3 +142,15 @@
   display: none;
   font-size: 1.2em
 }
+@media (max-width: 768px) {
+  #ow-chart-utils {
+    display: block;
+  }
+  #ow-chart-utils > span + span {
+    margin: 5px 0px;
+    justify-content: end;
+  }
+  #ow-chart-export {
+    margin-left: 10px
+  }
+}
diff --git a/openwisp_monitoring/monitoring/static/monitoring/css/dashboard-chart.css b/openwisp_monitoring/monitoring/static/monitoring/css/dashboard-chart.css
index 4a341c119..a9385e9ee 100644
--- a/openwisp_monitoring/monitoring/static/monitoring/css/dashboard-chart.css
+++ b/openwisp_monitoring/monitoring/static/monitoring/css/dashboard-chart.css
@@ -7,9 +7,6 @@
 #ow-chart-inner-container .quick-link-container {
   margin-top: 10px;
 }
-#ow-chart-time {
-  margin-top: 9px;
-}
 .ow-chart:first-child {
   margin-top: 45px;
 }
@@ -17,3 +14,16 @@
   margin-top: 23px;
   padding-top: 23px;
 }
+.select2-dropdown {
+  min-width: 200px !important;
+}
+#ow-chart-utils > span {
+  display: inline;
+  width: auto;
+}
+@media (max-width: 768px) {
+  #ow-chart-utils > span {
+    display: flex;
+    width: 100%;
+  }
+}
diff --git a/openwisp_monitoring/monitoring/static/monitoring/js/chart-utils.js b/openwisp_monitoring/monitoring/static/monitoring/js/chart-utils.js
index d29679269..c6ccb2a5e 100644
--- a/openwisp_monitoring/monitoring/static/monitoring/js/chart-utils.js
+++ b/openwisp_monitoring/monitoring/static/monitoring/js/chart-utils.js
@@ -217,12 +217,12 @@ django.jQuery(function ($) {
       addOrganizationSelector = function (data) {
         var orgSelector = $('#org-selector');
         if (data.organizations === undefined) {
-          orgSelector.hide();
           return;
         }
         if (orgSelector.data('select2-id') === 'org-selector') {
           return;
         }
+        orgSelector.parent().show();
         orgSelector.select2({
           data: data.organizations,
           allowClear: true,
@@ -334,7 +334,7 @@ django.jQuery(function ($) {
       );
     });
     // bind export button
-    $('#ow-chart-time a.export').click(function () {
+    $('#ow-chart-export').click(function () {
       var queryString,
         queryParams = {'csv': 1};
         queryParams.time = localStorage.getItem(timeRangeKey);
diff --git a/openwisp_monitoring/monitoring/templates/monitoring/paritals/chart.html b/openwisp_monitoring/monitoring/templates/monitoring/paritals/chart.html
index 5f3127df9..9049258b0 100644
--- a/openwisp_monitoring/monitoring/templates/monitoring/paritals/chart.html
+++ b/openwisp_monitoring/monitoring/templates/monitoring/paritals/chart.html
@@ -5,16 +5,19 @@
     <span id="monitoring-timeseries-api-url" data-value="{{ api_url }}"></span>
     <span id="monitoring-timeseries-original-key" data-value="{{ original.key }}"></span>
     <span id="monitoring-timeseries-default-time" data-value="{{ default_time }}"></span>
-    <div id="ow-chart-time">
-        <a class="export">{% trans 'export data' %}</a>
-
+    <div id="ow-chart-utils">
+        <span>
+            <a id="daterangepicker-widget">
+                <span class="button" ></span>
+            </a>
+            <a id="ow-chart-export" class="button export">{% trans 'export data' %}</a>
+        </span>
+        <span style="display:none";>
+            <select name="org-selector" id="org-selector">
+                <option></option>
+            </select>
+        </span>
     </div>
-    <a id="daterangepicker-widget">
-        <span></span>
-    </a>
-    <select name="org-selector" id="org-selector" class="hide">
-        <option></option>
-    </select>
     <div id="chart-loading-overlay"><div class="ow-loading-spinner"></div></div>
     <div id="ow-chart-contents"></div>
     <div id="ow-chart-fallback" class="form-row">
diff --git a/openwisp_monitoring/tests/test_selenium.py b/openwisp_monitoring/tests/test_selenium.py
index 6e797187a..8bab42117 100644
--- a/openwisp_monitoring/tests/test_selenium.py
+++ b/openwisp_monitoring/tests/test_selenium.py
@@ -165,7 +165,7 @@ def test_dashboard_timeseries_charts(self):
             self.fail('Timeseries chart container not found on dashboard')
         try:
             WebDriverWait(self.web_driver, 5).until(
-                EC.visibility_of_element_located((By.CSS_SELECTOR, '#ow-chart-time'))
+                EC.visibility_of_element_located((By.CSS_SELECTOR, '#ow-chart-utils'))
             )
         except TimeoutException:
             self.fail('Timeseries chart time filter not found on dashboard')