From 188103414aed5ac4acb05bc134bd6aa924bb56a1 Mon Sep 17 00:00:00 2001
From: "F.N. Claessen" <felix@seita.nl>
Date: Thu, 14 Oct 2021 09:32:47 +0200
Subject: [PATCH 1/7] Add tooltip theme

---
 flexmeasures/ui/static/js/chart-utils.js | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 flexmeasures/ui/static/js/chart-utils.js

diff --git a/flexmeasures/ui/static/js/chart-utils.js b/flexmeasures/ui/static/js/chart-utils.js
new file mode 100644
index 000000000..29badfd82
--- /dev/null
+++ b/flexmeasures/ui/static/js/chart-utils.js
@@ -0,0 +1,3 @@
+var FlexMeasuresTooltipOptions = {
+  theme: 'dark'
+};
\ No newline at end of file

From f884b76e1b948345d3890896e70b5f82d007a3cb Mon Sep 17 00:00:00 2001
From: "F.N. Claessen" <felix@seita.nl>
Date: Mon, 25 Oct 2021 14:38:20 +0200
Subject: [PATCH 2/7] Expand to cover other chart options

---
 flexmeasures/ui/static/js/chart-utils.js | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/flexmeasures/ui/static/js/chart-utils.js b/flexmeasures/ui/static/js/chart-utils.js
index 29badfd82..0e0938127 100644
--- a/flexmeasures/ui/static/js/chart-utils.js
+++ b/flexmeasures/ui/static/js/chart-utils.js
@@ -1,3 +1,10 @@
 var FlexMeasuresTooltipOptions = {
   theme: 'dark'
-};
\ No newline at end of file
+};
+
+var FlexMeasuresChartOptions = {
+  mode: 'vega-lite',
+  renderer: 'svg',
+  actions: {export: true, source: true, editor: true},
+  tooltip: FlexMeasuresTooltipOptions,
+}

From 4d98fbcce9b7e49409821bbff2d5a9aa3e4c660e Mon Sep 17 00:00:00 2001
From: "F.N. Claessen" <felix@seita.nl>
Date: Mon, 25 Oct 2021 14:39:03 +0200
Subject: [PATCH 3/7] Use chart options in sensors UI template

---
 flexmeasures/ui/templates/views/sensors.html | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/flexmeasures/ui/templates/views/sensors.html b/flexmeasures/ui/templates/views/sensors.html
index c8efd6c81..64cbcb318 100644
--- a/flexmeasures/ui/templates/views/sensors.html
+++ b/flexmeasures/ui/templates/views/sensors.html
@@ -23,6 +23,7 @@
     <script src="https://cdn.jsdelivr.net/npm/litepicker/dist/plugins/mobilefriendly.js"></script>
 
     <!-- Render Charts -->
+    <script type="text/javascript" src="{{ url_for('flexmeasures_ui.static', filename='js/chart-utils.js') }}"></script>
     <script type="module" type="text/javascript">
 
       import { subtract, thisMonth, lastNMonths, getOffsetBetweenTimezonesForDate } from "{{ url_for('flexmeasures_ui.static', filename='js/daterange-utils.js') }}";
@@ -30,13 +31,8 @@
       let vegaView;
 
       async function embedAndLoad(chartSpecsPath, elementId, datasetName) {
-        var opt = {
-          mode: 'vega-lite',
-          renderer: 'svg',
-          actions: {export: true, source: true, editor: true},
-        };
 
-        await vegaEmbed('#'+elementId, chartSpecsPath + '?dataset_name=' + datasetName, opt)
+        await vegaEmbed('#'+elementId, chartSpecsPath + '?dataset_name=' + datasetName, FlexMeasuresChartOptions)
         .then(function (result) {
           // result.view is the Vega View, chartSpecsPath is the original Vega-Lite specification
           vegaView = result.view;

From 112d65eb8f7dcdec000433175d2bb175e9cdeae3 Mon Sep 17 00:00:00 2001
From: "F.N. Claessen" <felix@seita.nl>
Date: Tue, 26 Oct 2021 11:58:30 +0200
Subject: [PATCH 4/7] Move chart options from JS to Python

---
 flexmeasures/ui/static/js/chart-utils.js     | 10 ----------
 flexmeasures/ui/templates/views/sensors.html |  3 +--
 flexmeasures/ui/utils/chart_defaults.py      |  7 +++++++
 flexmeasures/ui/utils/view_utils.py          |  3 +++
 4 files changed, 11 insertions(+), 12 deletions(-)
 delete mode 100644 flexmeasures/ui/static/js/chart-utils.js
 create mode 100644 flexmeasures/ui/utils/chart_defaults.py

diff --git a/flexmeasures/ui/static/js/chart-utils.js b/flexmeasures/ui/static/js/chart-utils.js
deleted file mode 100644
index 0e0938127..000000000
--- a/flexmeasures/ui/static/js/chart-utils.js
+++ /dev/null
@@ -1,10 +0,0 @@
-var FlexMeasuresTooltipOptions = {
-  theme: 'dark'
-};
-
-var FlexMeasuresChartOptions = {
-  mode: 'vega-lite',
-  renderer: 'svg',
-  actions: {export: true, source: true, editor: true},
-  tooltip: FlexMeasuresTooltipOptions,
-}
diff --git a/flexmeasures/ui/templates/views/sensors.html b/flexmeasures/ui/templates/views/sensors.html
index 64cbcb318..c71387d9f 100644
--- a/flexmeasures/ui/templates/views/sensors.html
+++ b/flexmeasures/ui/templates/views/sensors.html
@@ -23,7 +23,6 @@
     <script src="https://cdn.jsdelivr.net/npm/litepicker/dist/plugins/mobilefriendly.js"></script>
 
     <!-- Render Charts -->
-    <script type="text/javascript" src="{{ url_for('flexmeasures_ui.static', filename='js/chart-utils.js') }}"></script>
     <script type="module" type="text/javascript">
 
       import { subtract, thisMonth, lastNMonths, getOffsetBetweenTimezonesForDate } from "{{ url_for('flexmeasures_ui.static', filename='js/daterange-utils.js') }}";
@@ -32,7 +31,7 @@
 
       async function embedAndLoad(chartSpecsPath, elementId, datasetName) {
 
-        await vegaEmbed('#'+elementId, chartSpecsPath + '?dataset_name=' + datasetName, FlexMeasuresChartOptions)
+        await vegaEmbed('#'+elementId, chartSpecsPath + '?dataset_name=' + datasetName, {{ chart_options | safe }})
         .then(function (result) {
           // result.view is the Vega View, chartSpecsPath is the original Vega-Lite specification
           vegaView = result.view;
diff --git a/flexmeasures/ui/utils/chart_defaults.py b/flexmeasures/ui/utils/chart_defaults.py
new file mode 100644
index 000000000..959bc5cdb
--- /dev/null
+++ b/flexmeasures/ui/utils/chart_defaults.py
@@ -0,0 +1,7 @@
+chart_options = dict(
+    mode="vega-lite",
+    renderer="svg",
+    actions={"export": True, "source": True, "editor": True},
+    theme="light",
+    tooltip={"theme": "light"},
+)
diff --git a/flexmeasures/ui/utils/view_utils.py b/flexmeasures/ui/utils/view_utils.py
index a6fc9e434..a51784f9e 100644
--- a/flexmeasures/ui/utils/view_utils.py
+++ b/flexmeasures/ui/utils/view_utils.py
@@ -1,4 +1,5 @@
 """Utilities for views"""
+import json
 import os
 import subprocess
 from typing import Tuple, List, Optional
@@ -18,6 +19,7 @@
 from flexmeasures.data.models.markets import Market
 from flexmeasures.data.models.weather import WeatherSensorType
 from flexmeasures.data.services.resources import Resource
+from flexmeasures.ui.utils.chart_defaults import chart_options
 
 
 def render_flexmeasures_template(html_filename: str, **variables):
@@ -88,6 +90,7 @@ def render_flexmeasures_template(html_filename: str, **variables):
         current_user.is_authenticated and current_user.username or ""
     )
     variables["js_versions"] = current_app.config.get("FLEXMEASURES_JS_VERSIONS")
+    variables["chart_options"] = json.dumps(chart_options)
 
     variables["menu_logo"] = current_app.config.get("FLEXMEASURES_MENU_LOGO_PATH")
     variables["extra_css"] = current_app.config.get("FLEXMEASURES_EXTRA_CSS_PATH")

From 6c07510a8a91c6c1f0c50b3a784c4fa460b69c4b Mon Sep 17 00:00:00 2001
From: "F.N. Claessen" <felix@seita.nl>
Date: Tue, 26 Oct 2021 11:59:50 +0200
Subject: [PATCH 5/7] Use chart options in sensors chart view

---
 flexmeasures/ui/views/sensors.py | 35 +++++++++++++++++++++-----------
 1 file changed, 23 insertions(+), 12 deletions(-)

diff --git a/flexmeasures/ui/views/sensors.py b/flexmeasures/ui/views/sensors.py
index 091c6d31f..74cab7248 100644
--- a/flexmeasures/ui/views/sensors.py
+++ b/flexmeasures/ui/views/sensors.py
@@ -1,3 +1,5 @@
+import json
+
 from altair.utils.html import spec_to_html
 from flask import current_app
 from flask_classful import FlaskView, route
@@ -8,6 +10,7 @@
 from flexmeasures.data.schemas.times import AwareDateTimeField
 from flexmeasures.api.dev.sensors import SensorAPI
 from flexmeasures.ui.utils.view_utils import render_flexmeasures_template
+from flexmeasures.ui.utils.chart_defaults import chart_options
 
 
 class SensorUI(FlaskView):
@@ -29,24 +32,32 @@ class SensorUI(FlaskView):
             "beliefs_after": AwareDateTimeField(format="iso", required=False),
             "beliefs_before": AwareDateTimeField(format="iso", required=False),
             "dataset_name": fields.Str(required=False),
+            "chart_theme": fields.Str(required=False),
         },
         location="query",
     )
     def get_chart(self, id, **kwargs):
         """GET from /sensors/<id>/chart"""
-        chart_specs = SensorAPI().get_chart(
-            id, include_data=True, as_html=True, **kwargs
-        )
+
+        # Chart theme
+        chart_theme = kwargs.pop("chart_theme", None)
+        if chart_theme:
+            chart_options["theme"] = chart_theme
+            chart_options["tooltip"]["theme"] = chart_theme
+
+        # Chart specs
+        chart_specs = SensorAPI().get_chart(id, include_data=True, **kwargs)
         return spec_to_html(
-            chart_specs,
-            "vega-lite",
-            vega_version=current_app.config.get("FLEXMEASURES_JS_VERSIONS").vega,
-            vegaembed_version=current_app.config.get(
-                "FLEXMEASURES_JS_VERSIONS"
-            ).vegaembed,
-            vegalite_version=current_app.config.get(
-                "FLEXMEASURES_JS_VERSIONS"
-            ).vegalite,
+            json.loads(chart_specs),
+            mode=chart_options["mode"],
+            vega_version=current_app.config.get("FLEXMEASURES_JS_VERSIONS")["vega"],
+            vegaembed_version=current_app.config.get("FLEXMEASURES_JS_VERSIONS")[
+                "vegaembed"
+            ],
+            vegalite_version=current_app.config.get("FLEXMEASURES_JS_VERSIONS")[
+                "vegalite"
+            ],
+            embed_options=chart_options,
         )
 
     @login_required

From cfd1032a87e5cddf6eb9c8045ad42a3bc7c13304 Mon Sep 17 00:00:00 2001
From: "F.N. Claessen" <felix@seita.nl>
Date: Tue, 26 Oct 2021 13:55:03 +0200
Subject: [PATCH 6/7] Avoid changing imported options across views

---
 flexmeasures/ui/views/sensors.py | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/flexmeasures/ui/views/sensors.py b/flexmeasures/ui/views/sensors.py
index db6112101..61ff3c536 100644
--- a/flexmeasures/ui/views/sensors.py
+++ b/flexmeasures/ui/views/sensors.py
@@ -40,15 +40,16 @@ def get_chart(self, id, **kwargs):
 
         # Chart theme
         chart_theme = kwargs.pop("chart_theme", None)
+        embed_options = chart_options.copy()
         if chart_theme:
-            chart_options["theme"] = chart_theme
-            chart_options["tooltip"]["theme"] = chart_theme
+            embed_options["theme"] = chart_theme
+            embed_options["tooltip"]["theme"] = chart_theme
 
         # Chart specs
         chart_specs = SensorAPI().get_chart(id, include_data=True, **kwargs)
         return spec_to_html(
             json.loads(chart_specs),
-            mode=chart_options["mode"],
+            mode=embed_options["mode"],
             vega_version=current_app.config.get("FLEXMEASURES_JS_VERSIONS")["vega"],
             vegaembed_version=current_app.config.get("FLEXMEASURES_JS_VERSIONS")[
                 "vegaembed"
@@ -56,7 +57,7 @@ def get_chart(self, id, **kwargs):
             vegalite_version=current_app.config.get("FLEXMEASURES_JS_VERSIONS")[
                 "vegalite"
             ],
-            embed_options=chart_options,
+            embed_options=embed_options,
         )
 
     @login_required

From 0cb8546351056f00cc731fd02ba13aeeb4317340 Mon Sep 17 00:00:00 2001
From: "F.N. Claessen" <felix@seita.nl>
Date: Mon, 1 Nov 2021 15:29:57 +0100
Subject: [PATCH 7/7] Changelog entry

---
 documentation/changelog.rst | 1 +
 1 file changed, 1 insertion(+)

diff --git a/documentation/changelog.rst b/documentation/changelog.rst
index 5a796302d..37f84e5d4 100644
--- a/documentation/changelog.rst
+++ b/documentation/changelog.rst
@@ -7,6 +7,7 @@ v0.8.0 | November XX, 2021
 
 New features
 -----------
+* Charts with sensor data can be requested in one of the supported  [`vega-lite themes <https://github.com/vega/vega-themes#included-themes>`_] (incl. a dark theme) [see `PR #221 <http://www.github.com/SeitaBV/flexmeasures/pull/221>`_]
 
 Bugfixes
 -----------