From 76499dcd4cd23b89232726d7606097477b27e46b Mon Sep 17 00:00:00 2001
From: "F.N. Claessen" <felix@seita.nl>
Date: Mon, 20 Jun 2022 15:05:17 +0200
Subject: [PATCH 01/34] Show updated sensor data and annotations together

Signed-off-by: F.N. Claessen <felix@seita.nl>
---
 flexmeasures/ui/templates/views/sensors.html | 37 ++++++++++----------
 1 file changed, 18 insertions(+), 19 deletions(-)

diff --git a/flexmeasures/ui/templates/views/sensors.html b/flexmeasures/ui/templates/views/sensors.html
index 3238e55f5..d0bd01b36 100644
--- a/flexmeasures/ui/templates/views/sensors.html
+++ b/flexmeasures/ui/templates/views/sensors.html
@@ -86,25 +86,24 @@
           var queryStartDate = (startDate != null) ? (startDate.toISOString()) : (null)
           var queryEndDate = (endDate != null) ? (endDate.toISOString()) : (null)
 
-          // Fetch time series data
-          fetch(sensorPath + '/chart_data/?event_starts_after=' + queryStartDate + '&event_ends_before=' + queryEndDate, {
-            method: "GET",
-            headers: {"Content-Type": "application/json"},
-          })
-          .then(function(response) { return response.json(); })
-          .then(function(data) {
-            vegaView.change(datasetName, vega.changeset().remove(vega.truthy).insert(data)).resize().run();
-          })
-
-          // Fetch annotations
-          fetch(sensorPath + '/chart_annotations/?event_starts_after=' + queryStartDate + '&event_ends_before=' + queryEndDate, {
-            method: "GET",
-            headers: {"Content-Type": "application/json"},
-          })
-          .then(function(response) { return response.json(); })
-          .then(function(data) {
-            vegaView.change(datasetName + '_annotations', vega.changeset().remove(vega.truthy).insert(data)).resize().run();
-          });
+          Promise.all([
+              // Fetch time series data
+              fetch(sensorPath + '/chart_data/?event_starts_after=' + queryStartDate + '&event_ends_before=' + queryEndDate, {
+                  method: "GET",
+                  headers: {"Content-Type": "application/json"},
+              })
+              .then(function(response) { return response.json(); }),
+
+              // Fetch annotations
+              fetch(sensorPath + '/chart_annotations/?event_starts_after=' + queryStartDate + '&event_ends_before=' + queryEndDate, {
+                  method: "GET",
+                  headers: {"Content-Type": "application/json"},
+              })
+              .then(function(response) { return response.json(); })
+          ]).then(function(result) {
+                vegaView.change(datasetName, vega.changeset().remove(vega.truthy).insert(result[0])).resize().run();
+                vegaView.change(datasetName + '_annotations', vega.changeset().remove(vega.truthy).insert(result[1])).resize().run();
+          }).catch(console.error);
       });
 
       document.onreadystatechange = () => {

From 51aff4e4e0370b1e6ec2684814e2b056a8e054b3 Mon Sep 17 00:00:00 2001
From: "F.N. Claessen" <felix@seita.nl>
Date: Mon, 20 Jun 2022 15:06:10 +0200
Subject: [PATCH 02/34] Show spinner while fetching new data

Signed-off-by: F.N. Claessen <felix@seita.nl>
---
 flexmeasures/ui/templates/views/sensors.html | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/flexmeasures/ui/templates/views/sensors.html b/flexmeasures/ui/templates/views/sensors.html
index d0bd01b36..921b20f23 100644
--- a/flexmeasures/ui/templates/views/sensors.html
+++ b/flexmeasures/ui/templates/views/sensors.html
@@ -12,6 +12,10 @@
           <div class="row">
               <div class="sensor-chart-main col-sm-12">
                   <div id="sensorchart" style="width: 100%;"></div>
+                  <div id="spinner" style="text-align: center; position: absolute; z-index: 10; font-size: 8px; top: 0; left: 0; width: 100%; height: 100%; margin-top: 4em; margin-bottom: 4em;">
+                      <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
+                      <span class="sr-only">Loading...</span>
+                  </div>
               </div>
           </div>
           <hr>
@@ -80,6 +84,7 @@
           format: 'YYYY-MM-DD\\T00:00:00',
       });
       picker.on('selected', (startDate, endDate) => {
+          $("#spinner").show();
           startDate = startDate.toJSDate()
           endDate = endDate.toJSDate()
           endDate.setDate(endDate.getDate() + 1);
@@ -103,6 +108,7 @@
           ]).then(function(result) {
                 vegaView.change(datasetName, vega.changeset().remove(vega.truthy).insert(result[0])).resize().run();
                 vegaView.change(datasetName + '_annotations', vega.changeset().remove(vega.truthy).insert(result[1])).resize().run();
+                $("#spinner").hide();
           }).catch(console.error);
       });
 

From bf6c5c798d3005ceab0a41a5351286cb6275811a Mon Sep 17 00:00:00 2001
From: "F.N. Claessen" <felix@seita.nl>
Date: Mon, 20 Jun 2022 15:13:45 +0200
Subject: [PATCH 03/34] Switch from id-based styling to class-based styling

Signed-off-by: F.N. Claessen <felix@seita.nl>
---
 flexmeasures/ui/static/css/flexmeasures.css  | 11 ++---------
 flexmeasures/ui/templates/views/sensors.html |  4 ++--
 2 files changed, 4 insertions(+), 11 deletions(-)

diff --git a/flexmeasures/ui/static/css/flexmeasures.css b/flexmeasures/ui/static/css/flexmeasures.css
index d2c40bf25..fe652f11a 100644
--- a/flexmeasures/ui/static/css/flexmeasures.css
+++ b/flexmeasures/ui/static/css/flexmeasures.css
@@ -1077,11 +1077,8 @@ body .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
 
 /* --- Sensor Data --- */
 
-.sensor-data .sensor-chart-main {
-    padding: 0;
-}
-
-#sensorchart {
+.card {
+    margin: 15px;
     padding: 20px 15px 20px 15px;
     box-shadow: 0 0 10px rgba(0,0,0,.1);
     border-radius: 6px;
@@ -1100,10 +1097,6 @@ body .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
     margin: 0 !important;
 }
 
-#sensorchart {
-    margin-bottom: 40px;
-}
-
 #vg-tooltip-element {
     font-size: 16px;
 }
diff --git a/flexmeasures/ui/templates/views/sensors.html b/flexmeasures/ui/templates/views/sensors.html
index 921b20f23..0dabaeccc 100644
--- a/flexmeasures/ui/templates/views/sensors.html
+++ b/flexmeasures/ui/templates/views/sensors.html
@@ -10,8 +10,8 @@
           <div class="row"><div class="alert alert-info" id="tzwarn" style="display:none;"></div></div>
           <div class="row"><div id="datepicker"></div></div>
           <div class="row">
-              <div class="sensor-chart-main col-sm-12">
-                  <div id="sensorchart" style="width: 100%;"></div>
+              <div class="col-sm-12">
+                  <div id="sensorchart" class="card" style="width: 100%;"></div>
                   <div id="spinner" style="text-align: center; position: absolute; z-index: 10; font-size: 8px; top: 0; left: 0; width: 100%; height: 100%; margin-top: 4em; margin-bottom: 4em;">
                       <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
                       <span class="sr-only">Loading...</span>

From 9fd91f1dc66e5d8a5058b8b641e9be139d4a0cc5 Mon Sep 17 00:00:00 2001
From: "F.N. Claessen" <felix@seita.nl>
Date: Mon, 20 Jun 2022 15:34:50 +0200
Subject: [PATCH 04/34] Move styling to css, and lower spinner

Signed-off-by: F.N. Claessen <felix@seita.nl>
---
 flexmeasures/ui/static/css/flexmeasures.css  | 11 +++++++++--
 flexmeasures/ui/templates/views/sensors.html |  2 +-
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/flexmeasures/ui/static/css/flexmeasures.css b/flexmeasures/ui/static/css/flexmeasures.css
index fe652f11a..b51052d2b 100644
--- a/flexmeasures/ui/static/css/flexmeasures.css
+++ b/flexmeasures/ui/static/css/flexmeasures.css
@@ -108,8 +108,15 @@ form button[type="submit"] {
 }
 
 #spinner {
-    padding-top: 50px !important;
-    padding-bottom: 50px !important;
+    padding-top: 200px;
+    text-align: center;
+    position: absolute;
+    z-index: 10;
+    font-size: 8px;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
 }
 
 .legend {
diff --git a/flexmeasures/ui/templates/views/sensors.html b/flexmeasures/ui/templates/views/sensors.html
index 0dabaeccc..5269748b1 100644
--- a/flexmeasures/ui/templates/views/sensors.html
+++ b/flexmeasures/ui/templates/views/sensors.html
@@ -12,7 +12,7 @@
           <div class="row">
               <div class="col-sm-12">
                   <div id="sensorchart" class="card" style="width: 100%;"></div>
-                  <div id="spinner" style="text-align: center; position: absolute; z-index: 10; font-size: 8px; top: 0; left: 0; width: 100%; height: 100%; margin-top: 4em; margin-bottom: 4em;">
+                  <div id="spinner">
                       <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
                       <span class="sr-only">Loading...</span>
                   </div>

From 546cb65c9a5b6169154c9a52cf6c63f979df8eed Mon Sep 17 00:00:00 2001
From: "F.N. Claessen" <felix@seita.nl>
Date: Mon, 20 Jun 2022 15:37:17 +0200
Subject: [PATCH 05/34] Simplify and streamline datepicker fontsize

Signed-off-by: F.N. Claessen <felix@seita.nl>
---
 flexmeasures/ui/static/css/flexmeasures.css | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/flexmeasures/ui/static/css/flexmeasures.css b/flexmeasures/ui/static/css/flexmeasures.css
index b51052d2b..5fcbbd6fb 100644
--- a/flexmeasures/ui/static/css/flexmeasures.css
+++ b/flexmeasures/ui/static/css/flexmeasures.css
@@ -904,7 +904,6 @@ body .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
     outline: none;
     border-radius: 4px;
     border: 1px solid #ddd;
-    font-size: 13px;
     color: var(--nav-default-color);
     background: var(--nav-default-background-color);
     -webkit-border-radius: 4px;
@@ -925,7 +924,6 @@ body .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
 }
 
 .container__predefined-ranges button {
-    font-size: 14px;
     font-weight: 500;
     cursor: pointer !important;
 }
@@ -939,14 +937,6 @@ body .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
     justify-content: center;
 }
 
-.month-item-weekdays-row {
-    font-size: 14px;
-}
-
-.week-number {
-    font-size: 14px !important;
-}
-
 .litepicker .container__days .day-item.is-today {
     color: var(--nav-current-color);
     background: var(--secondary-transparent);
@@ -954,7 +944,6 @@ body .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
 
 .litepicker .container__days .day-item {
     color: var(--litepicker-day-color);
-    font-size: 14px;
     cursor: pointer;
     width: 38px;
     height: 38px;

From 39e3ceff18d7eabb212cbe3b7d05647f17b5bf66 Mon Sep 17 00:00:00 2001
From: "F.N. Claessen" <felix@seita.nl>
Date: Mon, 20 Jun 2022 15:40:34 +0200
Subject: [PATCH 06/34] Streamline datepicker margins

Signed-off-by: F.N. Claessen <felix@seita.nl>
---
 flexmeasures/ui/static/css/flexmeasures.css | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/flexmeasures/ui/static/css/flexmeasures.css b/flexmeasures/ui/static/css/flexmeasures.css
index 5fcbbd6fb..9466687c5 100644
--- a/flexmeasures/ui/static/css/flexmeasures.css
+++ b/flexmeasures/ui/static/css/flexmeasures.css
@@ -887,8 +887,8 @@ body .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
 /* ---- Date picker ---- */
 
 #datepicker {
-    margin-top: 50px;
-    margin-bottom: 30px;
+    margin-top: 15px;
+    margin-bottom: 15px;
 }
 
 .datetimepicker input {
@@ -1054,11 +1054,9 @@ body .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
     fill: var(--secondary-color) !important;
 }
 
-@media (max-width:525px) {
+@media (max-width: 525px) {
     #datepicker .container__main {
         flex-wrap: wrap;
-        margin-left: 15px;
-        margin-right: 15px;
     }
 
     #datepicker .container__predefined-ranges {

From 4dae1a004f2b3b75303a60af8489290a091bc958 Mon Sep 17 00:00:00 2001
From: "F.N. Claessen" <felix@seita.nl>
Date: Mon, 20 Jun 2022 16:15:45 +0200
Subject: [PATCH 07/34] Add margins and side panel activated on hover

Signed-off-by: F.N. Claessen <felix@seita.nl>
---
 flexmeasures/ui/static/css/flexmeasures.css  | 30 ++++++++++++++++++++
 flexmeasures/ui/templates/views/sensors.html | 11 +++++--
 2 files changed, 38 insertions(+), 3 deletions(-)

diff --git a/flexmeasures/ui/static/css/flexmeasures.css b/flexmeasures/ui/static/css/flexmeasures.css
index 9466687c5..f780fc2c0 100644
--- a/flexmeasures/ui/static/css/flexmeasures.css
+++ b/flexmeasures/ui/static/css/flexmeasures.css
@@ -43,6 +43,12 @@ body *:not(.fa, .glyphicon) {
     font-family: 'Poppins', sans-serif;
 }
 
+@media (min-width: 768px) {
+    .flex-md {
+        display: flex;
+    }
+}
+
 h1 {
     font-size: 35px;
     color: var(--primary-color);
@@ -884,6 +890,30 @@ body .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
 /* ---- End Modal ---- */
 
 
+/* ---- Side panel ---- */
+
+@media (min-width: 768px) {
+    .side-panel-container {
+        z-index: 20;
+    }
+    .side-panel {
+        width: calc(var(--litepicker-day-width) * 8.25);
+        transition: .3s;
+        -webkit-transition: .3s;
+        -moz-transition: .3s;
+        -ms-transition: .3s;
+        -o-transition: .3s;
+    }
+    .side-panel-container > .side-panel {
+        transform: translateX(calc(var(--litepicker-day-width) * -7.5));
+    }
+    .side-panel-container:hover > .side-panel,
+    .side-panel-container:active > .side-panel {
+        transform: translateX(0px);
+    }
+}
+
+
 /* ---- Date picker ---- */
 
 #datepicker {
diff --git a/flexmeasures/ui/templates/views/sensors.html b/flexmeasures/ui/templates/views/sensors.html
index 5269748b1..46991a3cd 100644
--- a/flexmeasures/ui/templates/views/sensors.html
+++ b/flexmeasures/ui/templates/views/sensors.html
@@ -8,15 +8,20 @@
 
       <div class="sensor-data charts text-center">
           <div class="row"><div class="alert alert-info" id="tzwarn" style="display:none;"></div></div>
-          <div class="row"><div id="datepicker"></div></div>
-          <div class="row">
-              <div class="col-sm-12">
+          <div class="row flex-md">
+              <div class="col-sm-2 side-panel-container">
+                  <div class="side-panel">
+                      <div id="datepicker"></div>
+                  </div>
+              </div>
+              <div class="col-sm-8">
                   <div id="sensorchart" class="card" style="width: 100%;"></div>
                   <div id="spinner">
                       <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
                       <span class="sr-only">Loading...</span>
                   </div>
               </div>
+              <div class="col-sm-2"></div>
           </div>
           <hr>
       </div>

From f64b6e52340a2e6925ef0d4db04e6d1177666bea Mon Sep 17 00:00:00 2001
From: "F.N. Claessen" <felix@seita.nl>
Date: Mon, 20 Jun 2022 20:29:01 +0200
Subject: [PATCH 08/34] Correct margins and padding of side panel to allow for
 custom ranges at the bottom of the calendar

Signed-off-by: F.N. Claessen <felix@seita.nl>
---
 flexmeasures/ui/static/css/flexmeasures.css  | 19 +++++++++----------
 flexmeasures/ui/templates/views/sensors.html | 16 ++++++++--------
 2 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/flexmeasures/ui/static/css/flexmeasures.css b/flexmeasures/ui/static/css/flexmeasures.css
index f780fc2c0..195db9e77 100644
--- a/flexmeasures/ui/static/css/flexmeasures.css
+++ b/flexmeasures/ui/static/css/flexmeasures.css
@@ -897,7 +897,10 @@ body .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
         z-index: 20;
     }
     .side-panel {
-        width: calc(var(--litepicker-day-width) * 8.25);
+        background: var(--nav-default-background-color) !important;
+        width: calc(var(--litepicker-day-width) * 9);
+        margin: 15px;
+        padding: 20px 15px;
         transition: .3s;
         -webkit-transition: .3s;
         -moz-transition: .3s;
@@ -905,22 +908,17 @@ body .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
         -o-transition: .3s;
     }
     .side-panel-container > .side-panel {
-        transform: translateX(calc(var(--litepicker-day-width) * -7.5));
+        transform: translateX(-106%);
     }
     .side-panel-container:hover > .side-panel,
     .side-panel-container:active > .side-panel {
-        transform: translateX(0px);
+        transform: translateX(-30px);
     }
 }
 
 
 /* ---- Date picker ---- */
 
-#datepicker {
-    margin-top: 15px;
-    margin-bottom: 15px;
-}
-
 .datetimepicker input {
     width: 100%;
 }
@@ -943,8 +941,9 @@ body .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
 }
 
 .container__predefined-ranges {
-    padding: 20px;
-    margin-right: 10px;
+    padding: 0px;
+    margin-top: 15px;
+    justify-content: space-around !important;
     box-shadow: 0 0 10px rgba(0,0,0,.1) !important;
     border-radius: 6px !important;
     -webkit-border-radius: 6px !important;
diff --git a/flexmeasures/ui/templates/views/sensors.html b/flexmeasures/ui/templates/views/sensors.html
index 46991a3cd..29ea6313f 100644
--- a/flexmeasures/ui/templates/views/sensors.html
+++ b/flexmeasures/ui/templates/views/sensors.html
@@ -65,14 +65,14 @@
           plugins: ['ranges', 'keyboardnav', 'mobilefriendly'],
           ranges: {
               customRanges: {
-              'Today': [new Date(date), new Date(date)],
-              'Yesterday': [subtract(date, 1), subtract(date, 1)],
-              'Last 2 days': [subtract(date, 1), new Date(date)],
-              'Last 7 days': [subtract(date, 6), new Date(date)],
-              'Last 30 days': [subtract(date, 29), new Date(date)],
-              'This month': thisMonth(date),
-              'Last 2 months': lastNMonths(date, 2),
-              }
+                  'Today': [new Date(date), new Date(date)],
+                  'Yesterday': [subtract(date, 1), subtract(date, 1)],
+                  'Last 2 days': [subtract(date, 1), new Date(date)],
+                  'Last 7 days': [subtract(date, 6), new Date(date)],
+                  'Last 30 days': [subtract(date, 29), new Date(date)],
+                  'This month': thisMonth(date)
+              },
+              position: 'bottom'
           },
           autoRefresh: true,
           moduleRanges: true,

From cf13a78c39f0da288911f861f9a3e0c1ba7badc5 Mon Sep 17 00:00:00 2001
From: "F.N. Claessen" <felix@seita.nl>
Date: Mon, 20 Jun 2022 20:31:29 +0200
Subject: [PATCH 09/34] Show single month

Signed-off-by: F.N. Claessen <felix@seita.nl>
---
 flexmeasures/ui/templates/views/sensors.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/flexmeasures/ui/templates/views/sensors.html b/flexmeasures/ui/templates/views/sensors.html
index 29ea6313f..26cc5da66 100644
--- a/flexmeasures/ui/templates/views/sensors.html
+++ b/flexmeasures/ui/templates/views/sensors.html
@@ -77,8 +77,8 @@
           autoRefresh: true,
           moduleRanges: true,
           showWeekNumbers: true,
-          numberOfMonths: 2,
-          numberOfColumns: 2,
+          numberOfMonths: 1,
+          numberOfColumns: 1,
           inlineMode: true,
           switchingMonths: 1,
           singleMode: false,

From 69393844f6e4d4c6c7974c66996f119caaa4c9d2 Mon Sep 17 00:00:00 2001
From: "F.N. Claessen" <felix@seita.nl>
Date: Mon, 20 Jun 2022 20:32:01 +0200
Subject: [PATCH 10/34] Fewer custom ranges

Signed-off-by: F.N. Claessen <felix@seita.nl>
---
 flexmeasures/ui/templates/views/sensors.html | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/flexmeasures/ui/templates/views/sensors.html b/flexmeasures/ui/templates/views/sensors.html
index 26cc5da66..10c4cc376 100644
--- a/flexmeasures/ui/templates/views/sensors.html
+++ b/flexmeasures/ui/templates/views/sensors.html
@@ -66,10 +66,7 @@
           ranges: {
               customRanges: {
                   'Today': [new Date(date), new Date(date)],
-                  'Yesterday': [subtract(date, 1), subtract(date, 1)],
-                  'Last 2 days': [subtract(date, 1), new Date(date)],
                   'Last 7 days': [subtract(date, 6), new Date(date)],
-                  'Last 30 days': [subtract(date, 29), new Date(date)],
                   'This month': thisMonth(date)
               },
               position: 'bottom'

From 8fb64062b5c73f4d5dc99ebff63e25e493d9028e Mon Sep 17 00:00:00 2001
From: "F.N. Claessen" <felix@seita.nl>
Date: Mon, 20 Jun 2022 20:33:01 +0200
Subject: [PATCH 11/34] Side panel rounded similar to buttons rather than
 similar to cards

Signed-off-by: F.N. Claessen <felix@seita.nl>
---
 flexmeasures/ui/static/css/flexmeasures.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/flexmeasures/ui/static/css/flexmeasures.css b/flexmeasures/ui/static/css/flexmeasures.css
index 195db9e77..ee1164851 100644
--- a/flexmeasures/ui/static/css/flexmeasures.css
+++ b/flexmeasures/ui/static/css/flexmeasures.css
@@ -906,6 +906,10 @@ body .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
         -moz-transition: .3s;
         -ms-transition: .3s;
         -o-transition: .3s;
+        border-top-left-radius: 0px;
+        border-bottom-left-radius: 0px;
+        border-top-right-radius: 15px;
+        border-bottom-right-radius: 15px;
     }
     .side-panel-container > .side-panel {
         transform: translateX(-106%);

From 1ccfcc9051cc62b641ff182fe4c435eef401d178 Mon Sep 17 00:00:00 2001
From: "F.N. Claessen" <felix@seita.nl>
Date: Mon, 20 Jun 2022 20:34:29 +0200
Subject: [PATCH 12/34] Align box shadows of cards and calendar

Signed-off-by: F.N. Claessen <felix@seita.nl>
---
 flexmeasures/ui/static/css/flexmeasures.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/flexmeasures/ui/static/css/flexmeasures.css b/flexmeasures/ui/static/css/flexmeasures.css
index ee1164851..16a3d4dcc 100644
--- a/flexmeasures/ui/static/css/flexmeasures.css
+++ b/flexmeasures/ui/static/css/flexmeasures.css
@@ -962,6 +962,7 @@ body .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
 }
 
 .container__months {
+    box-shadow: 0 0 10px rgba(0,0,0,.1) !important;
     border-radius: 6px !important;
     -webkit-border-radius: 6px !important;
     -moz-border-radius: 6px !important;

From 37521cc0f8619050244a3a6752a44334bc418ad8 Mon Sep 17 00:00:00 2001
From: "F.N. Claessen" <felix@seita.nl>
Date: Mon, 20 Jun 2022 20:34:57 +0200
Subject: [PATCH 13/34] Non-transparent cards

Signed-off-by: F.N. Claessen <felix@seita.nl>
---
 flexmeasures/ui/static/css/flexmeasures.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/flexmeasures/ui/static/css/flexmeasures.css b/flexmeasures/ui/static/css/flexmeasures.css
index 16a3d4dcc..c10b53fac 100644
--- a/flexmeasures/ui/static/css/flexmeasures.css
+++ b/flexmeasures/ui/static/css/flexmeasures.css
@@ -1106,6 +1106,7 @@ body .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
 /* --- Sensor Data --- */
 
 .card {
+    background: var(--white);
     margin: 15px;
     padding: 20px 15px 20px 15px;
     box-shadow: 0 0 10px rgba(0,0,0,.1);

From 48e36e9d3315c5e0134226ef427f4f7e8cfa5d9d Mon Sep 17 00:00:00 2001
From: "F.N. Claessen" <felix@seita.nl>
Date: Mon, 20 Jun 2022 20:35:11 +0200
Subject: [PATCH 14/34] Simplified padding notation

Signed-off-by: F.N. Claessen <felix@seita.nl>
---
 flexmeasures/ui/static/css/flexmeasures.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/flexmeasures/ui/static/css/flexmeasures.css b/flexmeasures/ui/static/css/flexmeasures.css
index c10b53fac..f794fc89e 100644
--- a/flexmeasures/ui/static/css/flexmeasures.css
+++ b/flexmeasures/ui/static/css/flexmeasures.css
@@ -1108,7 +1108,7 @@ body .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
 .card {
     background: var(--white);
     margin: 15px;
-    padding: 20px 15px 20px 15px;
+    padding: 20px 15px;
     box-shadow: 0 0 10px rgba(0,0,0,.1);
     border-radius: 6px;
     -webkit-border-radius: 6px;

From 5d3db6edd5d6378b791ee487f7f09c5cf04a7e91 Mon Sep 17 00:00:00 2001
From: "F.N. Claessen" <felix@seita.nl>
Date: Mon, 20 Jun 2022 20:35:46 +0200
Subject: [PATCH 15/34] Move chart actions buttons away from the card's corner
 (negative margin)

Signed-off-by: F.N. Claessen <felix@seita.nl>
---
 flexmeasures/ui/static/css/flexmeasures.css | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/flexmeasures/ui/static/css/flexmeasures.css b/flexmeasures/ui/static/css/flexmeasures.css
index f794fc89e..7a477391e 100644
--- a/flexmeasures/ui/static/css/flexmeasures.css
+++ b/flexmeasures/ui/static/css/flexmeasures.css
@@ -1116,6 +1116,9 @@ body .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
     -ms-border-radius: 6px;
     -o-border-radius: 6px;
 }
+.card.vega-embed summary {
+    transform: translate(-15px, 15px);
+}
 
 .role-title-text text {
     font-size: 20px;

From 6384e24504c6205ca0fb418b78657fb17288f62e Mon Sep 17 00:00:00 2001
From: "F.N. Claessen" <felix@seita.nl>
Date: Mon, 20 Jun 2022 20:51:43 +0200
Subject: [PATCH 16/34] Rotate y-axis labels to improve legibility

Signed-off-by: F.N. Claessen <felix@seita.nl>
---
 flexmeasures/data/models/charts/defaults.py | 1 +
 1 file changed, 1 insertion(+)

diff --git a/flexmeasures/data/models/charts/defaults.py b/flexmeasures/data/models/charts/defaults.py
index 1f4bb3274..e0717e995 100644
--- a/flexmeasures/data/models/charts/defaults.py
+++ b/flexmeasures/data/models/charts/defaults.py
@@ -105,6 +105,7 @@
             titleFontSize=FONT_SIZE,
             labelFontSize=FONT_SIZE,
         ),
+        axisY={"titleAngle": 0, "titleAlign": "left", "titleY": -15, "titleX": -40},
         title=dict(
             fontSize=FONT_SIZE,
         ),

From c6478e11183466f32b89b485ba792831731357b2 Mon Sep 17 00:00:00 2001
From: "F.N. Claessen" <felix@seita.nl>
Date: Mon, 20 Jun 2022 21:04:39 +0200
Subject: [PATCH 17/34] Remove sensor chart title if the same information is
 already contained in the y-axis label

Signed-off-by: F.N. Claessen <felix@seita.nl>
---
 flexmeasures/data/models/charts/belief_charts.py | 2 +-
 flexmeasures/data/models/time_series.py          | 4 +---
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/flexmeasures/data/models/charts/belief_charts.py b/flexmeasures/data/models/charts/belief_charts.py
index d14623e7a..aac2f7ab7 100644
--- a/flexmeasures/data/models/charts/belief_charts.py
+++ b/flexmeasures/data/models/charts/belief_charts.py
@@ -15,7 +15,7 @@ def bar_chart(
     )
     chart_specs = {
         "description": "A simple bar chart.",
-        "title": capitalize(sensor.name),
+        "title": capitalize(sensor.name) if sensor.name != sensor.sensor_type else None,
         "mark": "bar",
         "encoding": {
             "x": FIELD_DEFINITIONS["event_start"],
diff --git a/flexmeasures/data/models/time_series.py b/flexmeasures/data/models/time_series.py
index 210a1dbaf..03700c34a 100644
--- a/flexmeasures/data/models/time_series.py
+++ b/flexmeasures/data/models/time_series.py
@@ -366,9 +366,7 @@ def chart(
         # Set up chart specification
         if dataset_name is None:
             dataset_name = "sensor_" + str(self.id)
-        self.sensor_type = (
-            self.name
-        )  # todo remove this placeholder when sensor types are modelled
+        self.sensor_type = self.get_attribute("sensor_type", self.name)
         chart_specs = chart_type_to_chart_specs(
             chart_type,
             sensor=self,

From 97b2bc910b42d5b1fec28453a070514a24c6c078 Mon Sep 17 00:00:00 2001
From: "F.N. Claessen" <felix@seita.nl>
Date: Tue, 21 Jun 2022 08:58:47 +0200
Subject: [PATCH 18/34] Move unit to right side of tooltip

Signed-off-by: F.N. Claessen <felix@seita.nl>
---
 flexmeasures/data/models/charts/belief_charts.py |  8 ++++++--
 flexmeasures/ui/static/js/flexmeasures.js        | 11 +++++++++++
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/flexmeasures/data/models/charts/belief_charts.py b/flexmeasures/data/models/charts/belief_charts.py
index aac2f7ab7..aebb86bb0 100644
--- a/flexmeasures/data/models/charts/belief_charts.py
+++ b/flexmeasures/data/models/charts/belief_charts.py
@@ -9,7 +9,8 @@ def bar_chart(
     unit = sensor.unit if sensor.unit else "a.u."
     event_value_field_definition = dict(
         title=f"{capitalize(sensor.sensor_type)} ({unit})",
-        format=".3s",
+        format=[".3s", unit],
+        formatType="quantityWithUnitFormat",
         stack=None,
         **FIELD_DEFINITIONS["event_value"],
     )
@@ -25,7 +26,10 @@ def bar_chart(
             "opacity": {"value": 0.7},
             "tooltip": [
                 FIELD_DEFINITIONS["full_date"],
-                event_value_field_definition,
+                {
+                    **event_value_field_definition,
+                    **dict(title=f"{capitalize(sensor.sensor_type)}"),
+                },
                 FIELD_DEFINITIONS["source"],
             ],
         },
diff --git a/flexmeasures/ui/static/js/flexmeasures.js b/flexmeasures/ui/static/js/flexmeasures.js
index 8dd0becba..7e68b1c9a 100644
--- a/flexmeasures/ui/static/js/flexmeasures.js
+++ b/flexmeasures/ui/static/js/flexmeasures.js
@@ -310,3 +310,14 @@ function submit_market() {
 function submit_sensor_type() {
     $("#sensor_type-form").attr("action", empty_location).submit();
 }
+
+/** Tooltips: Register custom formatter for quantities incl. units
+              Usage:
+                  {
+                      'format': [<d3-format>, <sensor unit>],
+                      'formatType': 'quantityWithUnitFormat'
+                  }
+*/
+vega.expressionFunction('quantityWithUnitFormat', function(datum, params) {
+    return d3.format(params[0])(datum) + " " + params[1];
+});

From c8e5dd556f4a4ac525f97a5919edc60f6541287d Mon Sep 17 00:00:00 2001
From: "F.N. Claessen" <felix@seita.nl>
Date: Tue, 21 Jun 2022 13:18:17 +0200
Subject: [PATCH 19/34] Style predefined datetime ranges

Signed-off-by: F.N. Claessen <felix@seita.nl>
---
 flexmeasures/ui/static/css/flexmeasures.css | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/flexmeasures/ui/static/css/flexmeasures.css b/flexmeasures/ui/static/css/flexmeasures.css
index 7a477391e..838da2692 100644
--- a/flexmeasures/ui/static/css/flexmeasures.css
+++ b/flexmeasures/ui/static/css/flexmeasures.css
@@ -947,7 +947,7 @@ body .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
 .container__predefined-ranges {
     padding: 0px;
     margin-top: 15px;
-    justify-content: space-around !important;
+    justify-content: space-around;
     box-shadow: 0 0 10px rgba(0,0,0,.1) !important;
     border-radius: 6px !important;
     -webkit-border-radius: 6px !important;
@@ -959,6 +959,11 @@ body .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
 .container__predefined-ranges button {
     font-weight: 500;
     cursor: pointer !important;
+    border-right: 1px solid var(--primary-border-color) !important;
+    flex: 1 1 auto;
+}
+.container__predefined-ranges > button:last-child {
+    border-right: none !important;
 }
 
 .container__months {

From a12acf62d654ae975649a528cc7b658eb05d06e8 Mon Sep 17 00:00:00 2001
From: "F.N. Claessen" <felix@seita.nl>
Date: Tue, 21 Jun 2022 13:20:57 +0200
Subject: [PATCH 20/34] Raise column to top without requiring flex display

Signed-off-by: F.N. Claessen <felix@seita.nl>
---
 flexmeasures/ui/static/css/flexmeasures.css  | 4 ++--
 flexmeasures/ui/templates/views/sensors.html | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/flexmeasures/ui/static/css/flexmeasures.css b/flexmeasures/ui/static/css/flexmeasures.css
index 838da2692..37e0bf294 100644
--- a/flexmeasures/ui/static/css/flexmeasures.css
+++ b/flexmeasures/ui/static/css/flexmeasures.css
@@ -44,8 +44,8 @@ body *:not(.fa, .glyphicon) {
 }
 
 @media (min-width: 768px) {
-    .flex-md {
-        display: flex;
+    .on-top-md {
+        z-index: 1010;
     }
 }
 
diff --git a/flexmeasures/ui/templates/views/sensors.html b/flexmeasures/ui/templates/views/sensors.html
index 10c4cc376..2005c0a11 100644
--- a/flexmeasures/ui/templates/views/sensors.html
+++ b/flexmeasures/ui/templates/views/sensors.html
@@ -8,7 +8,7 @@
 
       <div class="sensor-data charts text-center">
           <div class="row"><div class="alert alert-info" id="tzwarn" style="display:none;"></div></div>
-          <div class="row flex-md">
+          <div class="row on-top-md">
               <div class="col-sm-2 side-panel-container">
                   <div class="side-panel">
                       <div id="datepicker"></div>

From 2208986a2e1bee9d45ba7a449320e18e841cc211 Mon Sep 17 00:00:00 2001
From: "F.N. Claessen" <felix@seita.nl>
Date: Tue, 21 Jun 2022 13:28:20 +0200
Subject: [PATCH 21/34] Rename sidepanel class and separate styling specific to
 the sidepanel being on the left

Signed-off-by: F.N. Claessen <felix@seita.nl>
---
 flexmeasures/ui/static/css/flexmeasures.css  | 14 ++++++++------
 flexmeasures/ui/templates/views/sensors.html |  4 ++--
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/flexmeasures/ui/static/css/flexmeasures.css b/flexmeasures/ui/static/css/flexmeasures.css
index 37e0bf294..f7af0221e 100644
--- a/flexmeasures/ui/static/css/flexmeasures.css
+++ b/flexmeasures/ui/static/css/flexmeasures.css
@@ -893,11 +893,11 @@ body .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
 /* ---- Side panel ---- */
 
 @media (min-width: 768px) {
-    .side-panel-container {
+    .sidepanel-container {
         z-index: 20;
     }
-    .side-panel {
-        background: var(--nav-default-background-color) !important;
+    .sidepanel {
+        background: var(--nav-default-background-color);
         width: calc(var(--litepicker-day-width) * 9);
         margin: 15px;
         padding: 20px 15px;
@@ -906,16 +906,18 @@ body .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
         -moz-transition: .3s;
         -ms-transition: .3s;
         -o-transition: .3s;
+    }
+    .left-sidepanel {
         border-top-left-radius: 0px;
         border-bottom-left-radius: 0px;
         border-top-right-radius: 15px;
         border-bottom-right-radius: 15px;
     }
-    .side-panel-container > .side-panel {
+    .sidepanel-container > .left-sidepanel {
         transform: translateX(-106%);
     }
-    .side-panel-container:hover > .side-panel,
-    .side-panel-container:active > .side-panel {
+    .sidepanel-container:hover > .left-sidepanel,
+    .sidepanel-container:active > .left-sidepanel {
         transform: translateX(-30px);
     }
 }
diff --git a/flexmeasures/ui/templates/views/sensors.html b/flexmeasures/ui/templates/views/sensors.html
index 2005c0a11..15e932e73 100644
--- a/flexmeasures/ui/templates/views/sensors.html
+++ b/flexmeasures/ui/templates/views/sensors.html
@@ -9,8 +9,8 @@
       <div class="sensor-data charts text-center">
           <div class="row"><div class="alert alert-info" id="tzwarn" style="display:none;"></div></div>
           <div class="row on-top-md">
-              <div class="col-sm-2 side-panel-container">
-                  <div class="side-panel">
+              <div class="col-sm-2 sidepanel-container">
+                  <div class="sidepanel left-sidepanel">
                       <div id="datepicker"></div>
                   </div>
               </div>

From 50fb0d536a3e05feb41cdcd646e6f037e7f475af Mon Sep 17 00:00:00 2001
From: "F.N. Claessen" <felix@seita.nl>
Date: Tue, 21 Jun 2022 15:24:05 +0200
Subject: [PATCH 22/34] Show spinner only while the promise is being fulfilled

Signed-off-by: F.N. Claessen <felix@seita.nl>
---
 flexmeasures/ui/templates/views/sensors.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/flexmeasures/ui/templates/views/sensors.html b/flexmeasures/ui/templates/views/sensors.html
index 15e932e73..b99c04ad8 100644
--- a/flexmeasures/ui/templates/views/sensors.html
+++ b/flexmeasures/ui/templates/views/sensors.html
@@ -86,13 +86,13 @@
           format: 'YYYY-MM-DD\\T00:00:00',
       });
       picker.on('selected', (startDate, endDate) => {
-          $("#spinner").show();
           startDate = startDate.toJSDate()
           endDate = endDate.toJSDate()
           endDate.setDate(endDate.getDate() + 1);
           var queryStartDate = (startDate != null) ? (startDate.toISOString()) : (null)
           var queryEndDate = (endDate != null) ? (endDate.toISOString()) : (null)
 
+          $("#spinner").show();
           Promise.all([
               // Fetch time series data
               fetch(sensorPath + '/chart_data/?event_starts_after=' + queryStartDate + '&event_ends_before=' + queryEndDate, {
@@ -108,9 +108,9 @@
               })
               .then(function(response) { return response.json(); })
           ]).then(function(result) {
+                $("#spinner").hide();
                 vegaView.change(datasetName, vega.changeset().remove(vega.truthy).insert(result[0])).resize().run();
                 vegaView.change(datasetName + '_annotations', vega.changeset().remove(vega.truthy).insert(result[1])).resize().run();
-                $("#spinner").hide();
           }).catch(console.error);
       });
 

From ff62e4358363a6139060ecbd0341904e3a809b8e Mon Sep 17 00:00:00 2001
From: "F.N. Claessen" <felix@seita.nl>
Date: Tue, 21 Jun 2022 16:16:53 +0200
Subject: [PATCH 23/34] Cancel previous request when the user makes a new
 request

Signed-off-by: F.N. Claessen <felix@seita.nl>
---
 flexmeasures/ui/templates/views/sensors.html | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/flexmeasures/ui/templates/views/sensors.html b/flexmeasures/ui/templates/views/sensors.html
index b99c04ad8..8426af4d7 100644
--- a/flexmeasures/ui/templates/views/sensors.html
+++ b/flexmeasures/ui/templates/views/sensors.html
@@ -59,6 +59,10 @@
       var datasetName = 'sensor_' + sensorId
       embedAndLoad(chartSpecsPath, elementId, datasetName);
 
+      // Set up abort controller to cancel requests
+      var controller = new AbortController()
+      var signal = controller.signal
+
       const date = Date();
       const picker = new Litepicker({
           element: document.getElementById('datepicker'),
@@ -92,6 +96,11 @@
           var queryStartDate = (startDate != null) ? (startDate.toISOString()) : (null)
           var queryEndDate = (endDate != null) ? (endDate.toISOString()) : (null)
 
+          // Abort previous request and create abort controller for new request
+          controller.abort()
+          controller = new AbortController()
+          signal = controller.signal
+
           $("#spinner").show();
           Promise.all([
               // Fetch time series data

From 2c9c0ad33cc736cba2a4a80811c4c3fe2b421935 Mon Sep 17 00:00:00 2001
From: "F.N. Claessen" <felix@seita.nl>
Date: Tue, 21 Jun 2022 20:09:13 +0200
Subject: [PATCH 24/34] Do not let spinner block the full page height, so the
 sensor table navigation can still be used

Signed-off-by: F.N. Claessen <felix@seita.nl>
---
 flexmeasures/ui/static/css/flexmeasures.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/flexmeasures/ui/static/css/flexmeasures.css b/flexmeasures/ui/static/css/flexmeasures.css
index f7af0221e..5c7b4431b 100644
--- a/flexmeasures/ui/static/css/flexmeasures.css
+++ b/flexmeasures/ui/static/css/flexmeasures.css
@@ -122,7 +122,6 @@ form button[type="submit"] {
     top: 0;
     left: 0;
     width: 100%;
-    height: 100%;
 }
 
 .legend {

From e266ba9cb39c54539339afd7388731adc572dc7f Mon Sep 17 00:00:00 2001
From: "F.N. Claessen" <felix@seita.nl>
Date: Tue, 21 Jun 2022 20:10:48 +0200
Subject: [PATCH 25/34] Change header and label colors inside the sidepanel to
 contrast against the sidepanel background

Signed-off-by: F.N. Claessen <felix@seita.nl>
---
 flexmeasures/ui/static/css/flexmeasures.css | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/flexmeasures/ui/static/css/flexmeasures.css b/flexmeasures/ui/static/css/flexmeasures.css
index 5c7b4431b..9c5416e96 100644
--- a/flexmeasures/ui/static/css/flexmeasures.css
+++ b/flexmeasures/ui/static/css/flexmeasures.css
@@ -69,6 +69,12 @@ h1, h2, h3 {
     font-weight: 600;
     color: var(--primary-color);
 }
+.sidepanel h1,
+.sidepanel h2,
+.sidepanel h3,
+.sidepanel label {
+    color: var(--white) !important;
+}
 
 hr {
     border-top: none;

From fb3d9e03ef3467595894f894ef09493a2f13c072 Mon Sep 17 00:00:00 2001
From: "F.N. Claessen" <felix@seita.nl>
Date: Wed, 22 Jun 2022 21:20:18 +0200
Subject: [PATCH 26/34] Style navbar logo to have a consistent height and
 adjust the width of the navbar-header accordingly

Signed-off-by: F.N. Claessen <felix@seita.nl>
---
 flexmeasures/ui/static/css/flexmeasures.css | 14 ++++----------
 flexmeasures/ui/templates/base.html         |  2 +-
 2 files changed, 5 insertions(+), 11 deletions(-)

diff --git a/flexmeasures/ui/static/css/flexmeasures.css b/flexmeasures/ui/static/css/flexmeasures.css
index 9c5416e96..f0dcc0af1 100644
--- a/flexmeasures/ui/static/css/flexmeasures.css
+++ b/flexmeasures/ui/static/css/flexmeasures.css
@@ -188,7 +188,6 @@ p.error {
 /* --- Nav Bar --- */
 
 .navbar-tool-name {
-    margin-right: 30px;
     color: var(--secondary-color);
 }
 
@@ -238,8 +237,8 @@ p.error {
 
 .navbar-brand {
     display: inline-block;
-    width: 200px;
     height: 100%;
+    padding: 10px 15px;
 }
 
 .navbar-brand a {
@@ -251,10 +250,6 @@ p.error {
     color: var(--secondary-color) !important;
 }
 
-.navbar-brand a span img {
-    width: 200px;
-}
-
 .navbar-default .navbar-collapse, .navbar-default .navbar-form {
     border-color: var(--primary-border-color);
 }
@@ -282,8 +277,8 @@ p.error {
 
 @media (min-width: 768px) {
     .navbar-nav>li>a {
-        padding-top: 28px;
-        padding-bottom: 28px;
+        padding-top: 20px;
+        padding-bottom: 20px;
     }
 
     .navbar-default .dropdown-menu a {
@@ -319,8 +314,7 @@ p.error {
 }
 
 #navbar-logo {
-    height: 50px;
-    position: fixed; top: 0; left: 0;
+    height: 40px;
 }
 
 /* --- End Nav Bar --- */
diff --git a/flexmeasures/ui/templates/base.html b/flexmeasures/ui/templates/base.html
index 7d5e65041..f389040c9 100644
--- a/flexmeasures/ui/templates/base.html
+++ b/flexmeasures/ui/templates/base.html
@@ -73,7 +73,7 @@
                         {% if menu_logo %}
                             <img id="navbar-logo" src="{{menu_logo}}"/>
                         {% else %}
-                            <img src="https://artwork.lfenergy.org/projects/flexmeasures/horizontal/white/flexmeasures-horizontal-white.svg" alt="FlexMeasures"/>
+                            <img id="navbar-logo" src="https://artwork.lfenergy.org/projects/flexmeasures/horizontal/white/flexmeasures-horizontal-white.svg" alt="FlexMeasures"/>
                         {% endif %}
                         </span>
                     </a>

From 20726b26d129d204933d47c26e8e4159e5fdb914 Mon Sep 17 00:00:00 2001
From: "F.N. Claessen" <felix@seita.nl>
Date: Wed, 22 Jun 2022 22:14:06 +0200
Subject: [PATCH 27/34] Actually load intended font

Signed-off-by: F.N. Claessen <felix@seita.nl>
---
 flexmeasures/ui/static/css/flexmeasures.css | 25 ++++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/flexmeasures/ui/static/css/flexmeasures.css b/flexmeasures/ui/static/css/flexmeasures.css
index f0dcc0af1..1fe15c626 100644
--- a/flexmeasures/ui/static/css/flexmeasures.css
+++ b/flexmeasures/ui/static/css/flexmeasures.css
@@ -33,7 +33,30 @@
     --delete-color: var(--red);
 }
 
-@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+/* devanagari */
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJbecmNE.woff2) format('woff2');
+  unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJnecmNE.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJfecg.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
 
 body {
     padding-top: 100px;  /* This default is overridden by flexmeasures.js to support a fluid navbar */

From e6502082a7e46008b2c5b3c6c69e1ce7ff4a315d Mon Sep 17 00:00:00 2001
From: "F.N. Claessen" <felix@seita.nl>
Date: Wed, 22 Jun 2022 23:09:45 +0200
Subject: [PATCH 28/34] Enforce separation of time axis labels

Signed-off-by: F.N. Claessen <felix@seita.nl>
---
 flexmeasures/data/models/charts/defaults.py | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/flexmeasures/data/models/charts/defaults.py b/flexmeasures/data/models/charts/defaults.py
index e0717e995..e1ccca124 100644
--- a/flexmeasures/data/models/charts/defaults.py
+++ b/flexmeasures/data/models/charts/defaults.py
@@ -17,11 +17,13 @@
         field="event_start",
         type="temporal",
         title=None,
+        axis={"labelOverlap": True, "labelSeparation": 1},
     ),
     "event_end": dict(
         field="event_end",
         type="temporal",
         title=None,
+        axis={"labelOverlap": True, "labelSeparation": 1},
     ),
     "event_value": dict(
         field="event_value",

From 0fe334e8190faa5564f01bc4d6b31212930f2e79 Mon Sep 17 00:00:00 2001
From: "F.N. Claessen" <felix@seita.nl>
Date: Wed, 22 Jun 2022 23:11:49 +0200
Subject: [PATCH 29/34] Add return type annotation and docs: applying chart
 defaults returns a dictionary with vega-lite specs

Signed-off-by: F.N. Claessen <felix@seita.nl>
---
 flexmeasures/data/models/charts/defaults.py | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/flexmeasures/data/models/charts/defaults.py b/flexmeasures/data/models/charts/defaults.py
index e1ccca124..6cc35c043 100644
--- a/flexmeasures/data/models/charts/defaults.py
+++ b/flexmeasures/data/models/charts/defaults.py
@@ -131,7 +131,8 @@
 
 def apply_chart_defaults(fn):
     @wraps(fn)
-    def decorated_chart_specs(*args, **kwargs):
+    def decorated_chart_specs(*args, **kwargs) -> dict:
+        """:returns: dict with vega-lite specs, even when applied to an Altair chart."""
         dataset_name = kwargs.pop("dataset_name", None)
         include_annotations = kwargs.pop("include_annotations", None)
         if isinstance(fn, Callable):

From b25d23d03d943578de88a98d79061655fa65ac47 Mon Sep 17 00:00:00 2001
From: "F.N. Claessen" <felix@seita.nl>
Date: Thu, 23 Jun 2022 10:19:56 +0200
Subject: [PATCH 30/34] Resolve hover glitch when exiting either the list of
 months or the list of years with the pointer. This stops the side panel from
 collapsing and reopening.

Signed-off-by: F.N. Claessen <felix@seita.nl>
---
 flexmeasures/ui/static/css/flexmeasures.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/flexmeasures/ui/static/css/flexmeasures.css b/flexmeasures/ui/static/css/flexmeasures.css
index 1fe15c626..882beeb61 100644
--- a/flexmeasures/ui/static/css/flexmeasures.css
+++ b/flexmeasures/ui/static/css/flexmeasures.css
@@ -939,7 +939,7 @@ body .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
         transform: translateX(-106%);
     }
     .sidepanel-container:hover > .left-sidepanel,
-    .sidepanel-container:active > .left-sidepanel {
+    .sidepanel-container:focus-within > .left-sidepanel {
         transform: translateX(-30px);
     }
 }

From 1370f86c87e5493cd7bf023115c9b4f14a39ed09 Mon Sep 17 00:00:00 2001
From: "F.N. Claessen" <felix@seita.nl>
Date: Thu, 23 Jun 2022 11:47:06 +0200
Subject: [PATCH 31/34] Enable swiping for left sidepanel

Signed-off-by: F.N. Claessen <felix@seita.nl>
---
 flexmeasures/ui/static/css/flexmeasures.css    | 15 +++++++++++----
 flexmeasures/ui/static/js/swiped-events.min.js |  9 +++++++++
 flexmeasures/ui/templates/base.html            |  1 +
 flexmeasures/ui/templates/views/sensors.html   | 15 +++++++++++++++
 4 files changed, 36 insertions(+), 4 deletions(-)
 create mode 100644 flexmeasures/ui/static/js/swiped-events.min.js

diff --git a/flexmeasures/ui/static/css/flexmeasures.css b/flexmeasures/ui/static/css/flexmeasures.css
index 882beeb61..38e970410 100644
--- a/flexmeasures/ui/static/css/flexmeasures.css
+++ b/flexmeasures/ui/static/css/flexmeasures.css
@@ -935,12 +935,19 @@ body .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
         border-top-right-radius: 15px;
         border-bottom-right-radius: 15px;
     }
-    .sidepanel-container > .left-sidepanel {
+    .sidepanel-container > .left-sidepanel:not(.sidepanel-show) {
         transform: translateX(-106%);
     }
-    .sidepanel-container:hover > .left-sidepanel,
-    .sidepanel-container:focus-within > .left-sidepanel {
-        transform: translateX(-30px);
+    @media (hover: hover) {
+        .sidepanel-container:hover > .left-sidepanel,
+        .sidepanel-container:focus-within > .left-sidepanel {
+            transform: translateX(-30px);
+        }
+    }
+    @media (hover: none) {
+        .sidepanel-container > .left-sidepanel.sidepanel-show {
+            transform: translateX(-30px);
+        }
     }
 }
 
diff --git a/flexmeasures/ui/static/js/swiped-events.min.js b/flexmeasures/ui/static/js/swiped-events.min.js
new file mode 100644
index 000000000..e3bac8952
--- /dev/null
+++ b/flexmeasures/ui/static/js/swiped-events.min.js
@@ -0,0 +1,9 @@
+/*!
+ * swiped-events.js - v1.1.6
+ * Pure JavaScript swipe events
+ * https://github.com/john-doherty/swiped-events
+ * @inspiration https://stackoverflow.com/questions/16348031/disable-scrolling-when-touch-moving-certain-element
+ * @author John Doherty <www.johndoherty.info>
+ * @license MIT
+ */
+!function(t,e){"use strict";"function"!=typeof t.CustomEvent&&(t.CustomEvent=function(t,n){n=n||{bubbles:!1,cancelable:!1,detail:void 0};var a=e.createEvent("CustomEvent");return a.initCustomEvent(t,n.bubbles,n.cancelable,n.detail),a},t.CustomEvent.prototype=t.Event.prototype),e.addEventListener("touchstart",function(t){if("true"===t.target.getAttribute("data-swipe-ignore"))return;s=t.target,r=Date.now(),n=t.touches[0].clientX,a=t.touches[0].clientY,u=0,i=0},!1),e.addEventListener("touchmove",function(t){if(!n||!a)return;var e=t.touches[0].clientX,r=t.touches[0].clientY;u=n-e,i=a-r},!1),e.addEventListener("touchend",function(t){if(s!==t.target)return;var e=parseInt(l(s,"data-swipe-threshold","20"),10),o=parseInt(l(s,"data-swipe-timeout","500"),10),c=Date.now()-r,d="",p=t.changedTouches||t.touches||[];Math.abs(u)>Math.abs(i)?Math.abs(u)>e&&c<o&&(d=u>0?"swiped-left":"swiped-right"):Math.abs(i)>e&&c<o&&(d=i>0?"swiped-up":"swiped-down");if(""!==d){var b={dir:d.replace(/swiped-/,""),touchType:(p[0]||{}).touchType||"direct",xStart:parseInt(n,10),xEnd:parseInt((p[0]||{}).clientX||-1,10),yStart:parseInt(a,10),yEnd:parseInt((p[0]||{}).clientY||-1,10)};s.dispatchEvent(new CustomEvent("swiped",{bubbles:!0,cancelable:!0,detail:b})),s.dispatchEvent(new CustomEvent(d,{bubbles:!0,cancelable:!0,detail:b}))}n=null,a=null,r=null},!1);var n=null,a=null,u=null,i=null,r=null,s=null;function l(t,n,a){for(;t&&t!==e.documentElement;){var u=t.getAttribute(n);if(u)return u;t=t.parentNode}return a}}(window,document);
\ No newline at end of file
diff --git a/flexmeasures/ui/templates/base.html b/flexmeasures/ui/templates/base.html
index f389040c9..3f57baeb9 100644
--- a/flexmeasures/ui/templates/base.html
+++ b/flexmeasures/ui/templates/base.html
@@ -227,6 +227,7 @@
     <script src="https://cdn.jsdelivr.net/npm/ion-rangeslider@2.3.1/js/ion.rangeSlider.min.js"></script>
 
     <!-- Custom scripts -->
+    <script src="{{ url_for('flexmeasures_ui.static', filename='js/swiped-events.min.js') }}"></script>
     <script src="{{ url_for('flexmeasures_ui.static', filename='js/flexmeasures.js') }}"></script>
     {% if show_datepicker %}
     <script src="{{ url_for('flexmeasures_ui.static', filename='js/daterangepicker-init.js') }}"></script>
diff --git a/flexmeasures/ui/templates/views/sensors.html b/flexmeasures/ui/templates/views/sensors.html
index 8426af4d7..76a48d70f 100644
--- a/flexmeasures/ui/templates/views/sensors.html
+++ b/flexmeasures/ui/templates/views/sensors.html
@@ -162,6 +162,21 @@
         }
       };
 
+      // Set up swiping for the left sidepanel
+      var leftSidepanels = document.getElementsByClassName('left-sidepanel');
+      document.addEventListener('swiped-right', function(e) {
+        if (e.target.classList.contains('sidepanel-container')) {
+          for (var i = leftSidepanels.length - 1; i >= 0; i--) {
+            leftSidepanels[i].classList.add('sidepanel-show');
+          }
+        }
+      });
+      document.addEventListener('swiped-left', function(e) {
+        for (var i = leftSidepanels.length - 1; i >= 0; i--) {
+          leftSidepanels[i].classList.remove('sidepanel-show');
+        }
+      });
+
     </script>
 
 {% endblock %}
\ No newline at end of file

From 9d8d6270aacf6f00c4c232cfbc99b8b642a42f65 Mon Sep 17 00:00:00 2001
From: "F.N. Claessen" <felix@seita.nl>
Date: Thu, 23 Jun 2022 11:55:05 +0200
Subject: [PATCH 32/34] Stop using redundant litepicker plugin, which was
 messing with calendar styling

Signed-off-by: F.N. Claessen <felix@seita.nl>
---
 flexmeasures/ui/templates/views/sensors.html | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/flexmeasures/ui/templates/views/sensors.html b/flexmeasures/ui/templates/views/sensors.html
index 76a48d70f..53188bdd3 100644
--- a/flexmeasures/ui/templates/views/sensors.html
+++ b/flexmeasures/ui/templates/views/sensors.html
@@ -34,7 +34,6 @@
     <script src="https://cdn.jsdelivr.net/npm/litepicker/dist/litepicker.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/litepicker/dist/plugins/ranges.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/litepicker/dist/plugins/keyboardnav.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/litepicker/dist/plugins/mobilefriendly.js"></script>
 
     <!-- Render Charts -->
     <script type="module" type="text/javascript">
@@ -66,7 +65,7 @@
       const date = Date();
       const picker = new Litepicker({
           element: document.getElementById('datepicker'),
-          plugins: ['ranges', 'keyboardnav', 'mobilefriendly'],
+          plugins: ['ranges', 'keyboardnav'],
           ranges: {
               customRanges: {
                   'Today': [new Date(date), new Date(date)],

From d21cf3f03fbc51441d23c12ccbfb40d0964910ad Mon Sep 17 00:00:00 2001
From: "F.N. Claessen" <felix@seita.nl>
Date: Mon, 20 Jun 2022 09:44:41 +0200
Subject: [PATCH 33/34] Fix test

Signed-off-by: F.N. Claessen <felix@seita.nl>
---
 flexmeasures/data/models/charts/test_chart_defaults.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/flexmeasures/data/models/charts/test_chart_defaults.py b/flexmeasures/data/models/charts/test_chart_defaults.py
index 4a08a328c..1042e2245 100644
--- a/flexmeasures/data/models/charts/test_chart_defaults.py
+++ b/flexmeasures/data/models/charts/test_chart_defaults.py
@@ -6,4 +6,4 @@
 def test_default_encodings():
     """Check default encodings for valid vega-lite specifications."""
     for field_name, field_definition in FIELD_DEFINITIONS.items():
-        assert alt.StringFieldDefWithCondition(**field_definition)
+        assert alt.PositionFieldDef(**field_definition)

From a6c1c9b99d78c0fdd0ccfee3954e0292a4cf59d6 Mon Sep 17 00:00:00 2001
From: "F.N. Claessen" <felix@seita.nl>
Date: Thu, 23 Jun 2022 16:55:26 +0200
Subject: [PATCH 34/34] Changelog entry

Signed-off-by: F.N. Claessen <felix@seita.nl>
---
 documentation/changelog.rst | 1 +
 1 file changed, 1 insertion(+)

diff --git a/documentation/changelog.rst b/documentation/changelog.rst
index a09037ea3..731e6b5d7 100644
--- a/documentation/changelog.rst
+++ b/documentation/changelog.rst
@@ -8,6 +8,7 @@ v0.11.0 | June XX, 2022
 New features
 -------------
 * Individual sensor charts show available annotations [see `PR #428 <http://www.github.com/FlexMeasures/flexmeasures/pull/428>`_]
+* Collapsible sidepanel (hover/swipe) used for date selection on sensor charts, and various styling improvements [see `PR #447 <http://www.github.com/FlexMeasures/flexmeasures/pull/447>`_]
 
 Bugfixes
 -----------