Merge pull request #209 from lorefnon/chart-fix

Fix regression causing chart height to not be respected and title not showing up

Author: lovasoa

sqlpage/apexcharts.js

@@ -35,6 +35,8 @@ function sqlpage_chart() {
     for (const c of document.querySelectorAll("[data-pre-init=chart]")) {
         try {
             const data = JSON.parse(c.querySelector("data").innerText);
+            const chartContainer = c.querySelector('.chart');
+            chartContainer.innerHTML = "";
             const is_timeseries = !!data.time;
             /** @type { Series } */
             const series_map = {};
@@ -71,7 +73,7 @@ function sqlpage_chart() {
                     type: data.type || 'line',
                     fontFamily: 'inherit',
                     parentHeightOffset: 0,
-                    height: c.style.height,
+                    height: chartContainer.style.height,
                     stacked: !!data.stacked,
                     toolbar: {
                         show: !!data.toolbar,
@@ -143,8 +145,7 @@ function sqlpage_chart() {
                 series,
             };
             if (labels) options.labels = labels;
-            c.innerHTML = "";
-            const chart = new ApexCharts(c, options);
+            const chart = new ApexCharts(chartContainer, options);
             chart.render();
             if (window.charts) window.charts.push(chart);
             else window.charts = [chart];

sqlpage/templates/chart.handlebars

@@ -3,13 +3,12 @@
     class="card my-2 {{class}}" 
     data-pre-init="chart" 
     data-js="/{{static_path 'apexcharts.js'}}"
-    style="height: {{default height 250}}px;"
 >
     <div class="card-body">
         <div class="d-flex">
             <h3 class="card-title">{{title}}</h3>
         </div>
-        <div class="chart">
+        <div class="chart" style="height: {{default height 250}}px;">
             <div class="d-flex justify-content-center h-100 align-items-center">
                 <div class="spinner-border" role="status" style="width: 3rem; height: 3rem;">
                     <span class="visually-hidden">Loading...</span>