improve page load speed

split the charts javascript code from the rest of the frontend code,
and load it only when necessary.

This greatly diminishes the amount of js loaded by default, and achieves very good performance scores by default.

Author: lovasoa

CHANGELOG.md

@@ -1,6 +1,6 @@
 # CHANGELOG.md
 
-## unreleased
+## 0.9.3 (2023-08-03)
 
  - Icons are now loaded directly from the sqlpage binary instead of loading them from a CDN.
   This allows pages to load faster, and to get a better score on google's performance audits, potentially improving your position in search results.
@@ -11,6 +11,9 @@
     - Faster page loads, less work on the server
  - Fix a bug where table search would fail to find a row if the search term contained some special characters.
     - Fixes https://github.com/lovasoa/SQLpage/issues/46
+ - Split the charts javascript code from the rest of the frontend code, and load it only when necessary.
+   This greatly diminishes the amount of js loaded by default, and achieves very good performance scores by default.
+   SQLPage websites now load even faster, een on slow mobile connections.
 
 ## 0.9.2 (2023-08-01)
 

Cargo.lock

@@ -1,6 +1,6 @@
 [package]
 name = "sqlpage"
-version = "0.9.2"
+version = "0.9.3"
 edition = "2021"
 description = "A SQL-only web application framework. Takes .sql files and formats the query result using pre-made configurable professional-looking components."
 keywords = ["web", "sql", "framework"]

Cargo.toml

@@ -11,29 +11,22 @@ use std::path::{Path, PathBuf};
 async fn main() {
     println!("cargo:rerun-if-changed=build.rs");
 
-    let out_dir = PathBuf::from(std::env::var("OUT_DIR").unwrap());
-
     for h in [
-        spawn(download_deps(
-            "sqlpage/sqlpage.js",
-            out_dir.join("sqlpage.js"),
-        )),
-        spawn(download_deps(
-            "sqlpage/sqlpage.css",
-            out_dir.join("sqlpage.css"),
-        )),
-        spawn(download_deps(
-            "sqlpage/tabler-icons.svg",
-            out_dir.join("tabler-icons.svg"),
-        )),
+        spawn(download_deps("sqlpage.js")),
+        spawn(download_deps("sqlpage.css")),
+        spawn(download_deps("tabler-icons.svg")),
+        spawn(download_deps("apexcharts.js")),
     ] {
         h.await.unwrap();
     }
 }
 
 /// Creates a file with inlined remote files included
-async fn download_deps(path_in: &str, path_out: PathBuf) {
+async fn download_deps(filename: &str) {
     println!("cargo:rerun-if-changed=build.rs");
+    let out_dir = PathBuf::from(std::env::var("OUT_DIR").unwrap());
+    let path_in = format!("sqlpage/{}", filename);
+    let path_out: PathBuf = out_dir.join(filename);
     // Generate outfile by reading infile and interpreting all comments
     // like "/* !include https://... */" as a request to include the contents of
     // the URL in the generated file.

build.rs

@@ -0,0 +1,142 @@
+/* !include https://cdn.jsdelivr.net/npm/[email protected]/dist/apexcharts.min.js */
+
+
+function sqlpage_chart() {
+
+    const tblrColors = Object.fromEntries(['azure', 'red', 'lime', 'blue', 'pink', 'indigo', 'purple', 'yellow', 'cyan', 'green', 'orange', 'cyan']
+        .map(c => [c, getComputedStyle(document.documentElement).getPropertyValue('--tblr-' + c)]));
+
+    /** @typedef { { [name:string]: {data:{x:number,y:number}[], name:string} } } Series */
+
+    /**
+     * @param {Series} series
+     * @returns {Series} */
+    function align_categories(series) {
+        const new_series = series.map(s => ({ name: s.name, data: [] }));
+        do {
+            var category = null;
+            series.forEach((s, s_i) => {
+                const point = s.data[0];
+                let new_point = { x: category, y: NaN };
+                if (point) {
+                    if (category == null) category = point.x;
+                    if (category === point.x) {
+                        new_point = s.data.shift();
+                    }
+                }
+                new_series[s_i].data.push(new_point);
+            })
+            new_series.forEach(s => s.data[s.data.length - 1].x = category);
+        } while (category != null);
+        new_series.forEach(s => s.data.pop());
+        return new_series;
+    }
+
+    for (const c of document.getElementsByClassName("chart")) {
+        try {
+            const data = JSON.parse(c.querySelector("data").innerText);
+            /** @type { Series } */
+            const series_map = {};
+            data.points.forEach(([name, x, y]) => {
+                series_map[name] = series_map[name] || { name, data: [] }
+                series_map[name].data.push({ x, y });
+            })
+            if (data.xmin == null) data.xmin = undefined;
+            if (data.xmax == null) data.xmax = undefined;
+            if (data.ymin == null) data.ymin = undefined;
+            if (data.ymax == null) data.ymax = undefined;
+
+            const colors = [
+                ...data.colors.filter(c => c).map(c => tblrColors[c]),
+                ...Object.values(tblrColors)
+            ];
+
+            let series = Object.values(series_map);
+
+            // tickamount is the number of intervals, not the number of ticks
+            const tickAmount = data.xticks ||
+                Math.min(30, Math.max(...series.map(s => s.data.length - 1)));
+
+            let labels;
+            const categories = typeof data.points[0][1] === "string";
+            if (data.type === "pie") {
+                labels = data.points.map(([name, x, y]) => x || name);
+                series = data.points.map(([name, x, y]) => y);
+            } else if (categories) series = align_categories(series);
+
+            const options = {
+                chart: {
+                    type: data.type || 'line',
+                    fontFamily: 'inherit',
+                    parentHeightOffset: 0,
+                    height: c.style.height,
+                    stacked: !!data.stacked,
+                    toolbar: {
+                        show: false,
+                    },
+                    animations: {
+                        enabled: false
+                    },
+                    zoom: {
+                        enabled: false
+                    }
+                },
+                theme: {
+                    palette: 'palette4',
+                },
+                dataLabels: {
+                    enabled: !!data.labels,
+                },
+                fill: {
+                    type: data.type === 'area' ? 'gradient' : 'solid',
+                },
+                stroke: {
+                    width: data.type === 'area' ? 3 : 1,
+                    lineCap: "round",
+                    curve: "smooth",
+                },
+                xaxis: {
+                    tooltip: {
+                        enabled: false
+                    },
+                    min: data.xmin,
+                    max: data.xmax,
+                    tickAmount,
+                    title: {
+                        text: data.xtitle || undefined,
+                    },
+                    type: data.time ? 'datetime' : categories ? 'category' : undefined,
+                },
+                yaxis: {
+                    logarithmic: !!data.logarithmic,
+                    min: data.ymin,
+                    max: data.ymax,
+                    title: {
+                        text: data.ytitle || undefined,
+                    }
+                },
+                markers: {
+                    size: data.marker || 0,
+                    strokeWidth: 0,
+                    hover: {
+                        sizeOffset: 5,
+                    }
+                },
+                tooltip: {
+                    fillSeriesColor: false,
+                },
+                plotOptions: { bar: { horizontal: !!data.horizontal } },
+                colors,
+                series,
+            };
+            if (labels) options.labels = labels;
+            c.innerHTML = "";
+            const chart = new ApexCharts(c, options);
+            chart.render();
+            if (window.charts) window.charts.push(chart);
+            else window.charts = [chart];
+        } catch (e) { console.log(e) }
+    }
+}
+
+sqlpage_chart();