🩹 fix overlay items on vega charts being cut-off, use markdown in des…

…cription

fragdenstaat_de/fds_cms/models.py

@@ -318,7 +318,9 @@ def __str__(self):
 
 class VegaChartCMSPlugin(CMSPlugin):
     title = models.CharField(max_length=255, blank=True)
-    description = models.TextField(blank=True)
+    description = models.TextField(
+        blank=True, help_text=_("Formatting with Markdown is supported.")
+    )
 
     vega_json = models.TextField(
         default="",

fragdenstaat_de/fds_cms/templates/fds_cms/vega_chart.html

@@ -1,8 +1,10 @@
 {% load static %}
-{% load sekizai_tags %}
+{% load markup %}
 <div class="vega-chart">
     {% if instance.title %}<h5>{{ instance.title }}</h5>{% endif %}
-    {% if instance.description %}<p>{{ instance.description|linebreaksbr }}</p>{% endif %}
-    <div data-vegachart data-vegachartdata="{{ instance.vega_json }}"></div>
+    {% if instance.description %}{{ instance.description|markdown }}{% endif %}
+    <div class="w-100"
+         data-vegachart
+         data-vegachartdata="{{ instance.vega_json }}"></div>
 </div>
 {% include "_frontend.html" with entry_point="vegacharts.js" %}

frontend/javascript/vegacharts.js

@@ -103,7 +103,7 @@ const bootstrapTooltipHandler = (handler, event, item, value) => {
   let tooltip = Tooltip.getInstance(item._svg)
   let created = false
   if (!tooltip && value) {
-    let html = `<dl>${Object.keys(value)
+    const html = `<dl>${Object.keys(value)
       .map((key) => `<dt>${key}</dt><dd>${value[key]}</dd>`)
       .join('')}</dl>`
 
@@ -128,7 +128,7 @@ document.querySelectorAll('[data-vegachart]').forEach((el) => {
   } else {
     spec = JSON.parse(document.getElementById(el.dataset.vegachart).textContent)
   }
-  let hasData =
+  const hasData =
     (spec.data && (spec.data.url || spec.data.values)) || spec.datasets
   if (!hasData) {
     const data = JSON.parse(

frontend/styles/vega.scss

@@ -1,24 +1,4 @@
-@import "bootstrap/scss/functions";
-@import "bootstrap/scss/variables";
-
-.vega-chart {
-  overflow: hidden;
-  width: 100%;
-}
 .vega-embed > svg {
   width: 100%;
   height: 100%;
 }
-.vega-embed {
-  width: 100%;
-}
-
-#vg-tooltip-element {
-  background-color: var(--#{$prefix}body-bg);
-  border: 1px solid var(--#{$prefix}tertiary-bg);
-  color: var(--#{$prefix}body-color);
-
-  td.key {
-    color: var(--#{$prefix}secondary-color);
-  }
-}