Add chart theme (#221)

Let charts with sensor data be requested in one of the supported vega-lite themes (incl. a dark theme). * Add tooltip theme * Expand to cover other chart options * Use chart options in sensors UI template * Move chart options from JS to Python * Use chart options in sensors chart view * Avoid changing imported options across views * Changelog entry
FlexMeasures · Nov 1, 2021 · 7eceabc · 7eceabc
1 parent c4d456a
commit 7eceabc
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 7 deletions.
diff --git 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
 -----------

diff --git a/flexmeasures/ui/templates/views/sensors.html b/flexmeasures/ui/templates/views/sensors.html
@@ -30,13 +30,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, {{ 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
@@ -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
@@ -1,4 +1,5 @@
 """Utilities for views"""
+import json
 import os
 import subprocess
 from typing import Tuple, List, Optional
@@ -19,6 +20,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):
@@ -89,6 +91,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")

diff --git a/flexmeasures/ui/views/sensors.py b/flexmeasures/ui/views/sensors.py
@@ -10,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):
@@ -30,22 +31,33 @@ 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 theme
+        chart_theme = kwargs.pop("chart_theme", None)
+        embed_options = chart_options.copy()
+        if 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="vega-lite",
+            mode=embed_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=embed_options,
         )
 
     @login_required