Use Tucan instead of mermaid

.gitignore

@@ -55,4 +55,13 @@ Desktop.ini
 *.swp
 *.swo
 
-*.env
+*.env
+
+# The directory NPM downloads your dependencies sources to.
+/assets/node_modules/
+
+# Ignore package tarball (built via "mix hex.build").
+*.tar
+
+# If NPM crashes, it generates a log, let's ignore it too.
+npm-debug.log

Dockerfile

@@ -45,6 +45,10 @@ RUN mkdir config
 COPY config/config.exs config/${MIX_ENV}.exs config/
 RUN mix deps.compile
 
+# Copy assets and install NPM dependencies
+COPY priv/static/assets/package.json priv/static/assets/package-lock.json ./assets/
+RUN npm install --prefix ./assets
+
 COPY priv priv
 
 COPY lib lib

assets/js/app.js

@@ -21,26 +21,17 @@ import "phoenix_html"
 import {Socket} from "phoenix"
 import {LiveSocket} from "phoenix_live_view"
 import topbar from "../vendor/topbar"
-
-let Hooks = {};
-
-Hooks.ScrollToTop = {
-  mounted() {
-    const scrollToTopBtn = this.el;
-
-    scrollToTopBtn.addEventListener('click', () => {
-      window.scrollTo({
-        top: 0,
-        behavior: 'smooth'
-      });
-    });
-  }
-};
-
-export default Hooks;
+import VegaLite from './vega_lite';
+import ScrollToTop from './scroll_to_top_btn';
 
 let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
-let liveSocket = new LiveSocket("/live", Socket, {params: {_csrf_token: csrfToken}, hooks: Hooks});
+let liveSocket = new LiveSocket("/live", Socket, {
+  params: {_csrf_token: csrfToken}, 
+  hooks: {
+    VegaLite: VegaLite,  // Register the VegaLite hook under the name "VegaLite"
+    ScrollToTop: ScrollToTop
+  }
+});
 liveSocket.connect();
 
 // Show progress bar on live navigation and form submits

assets/js/scroll_to_top_btn/index.js

@@ -0,0 +1,18 @@
+const ScrollToTop = {
+    mounted() {
+      const scrollToTopBtn = this.el;
+      if (!scrollToTopBtn) {
+        console.warn('ScrollToTop element not found.');
+        return;
+      }
+
+      scrollToTopBtn.addEventListener('click', () => {
+        window.scrollTo({
+          top: 0,
+          behavior: 'smooth'
+        });
+      });
+    }
+  };
+
+export default ScrollToTop;

assets/js/vega_lite/index.js

@@ -0,0 +1,41 @@
+import vegaEmbed from "vega-embed";
+
+/**
+ * A hook used to render graphics according to the given
+ * Vega-Lite specification.
+ *
+ * The hook expects a `vega_lite:<id>:init` event with `{ spec }` payload,
+ * where `spec` is the graphic definition as an object.
+ *
+ * Configuration:
+ *
+ *   * `data-id` - plot id
+ */
+
+const VegaLite = {
+  mounted() {
+    this.id = this.el.getAttribute("data-id");
+    this.viewPromise = null;
+
+    const container = document.createElement("div");
+    this.el.appendChild(container);
+
+    this.handleEvent(`vega_lite:${this.id}:init`, ({ spec }) => {
+      this.viewPromise = vegaEmbed(container, spec, {})
+        .then((result) => result.view)
+        .catch((error) => {
+          console.error(
+            `Failed to render the given Vega-Lite specification, got the following error:\n\n    ${error.message}\n\nMake sure to check for typos.`
+          );
+        });
+    });
+  },
+
+  destroyed() {
+    if (this.viewPromise) {
+      this.viewPromise.then((view) => view.finalize());
+    }
+  },
+};
+
+export default VegaLite;