al_charts 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 25e0b671f1ebb9b628e4a963ec2b6ccd842f9e93137bc41254811573e2906595
+  data.tar.gz: 8b6051a35be65a16d4b26ee212edb287da2d618160d5c3e8a73e62708bdd6bd4
+SHA512:
+  metadata.gz: 42d573ccc8d8e94d7ece7cd2a2f5ed38a74e7e21a35724815043a8d8e663e237c55f662ee7ceb875fec680bef97554ebc087c73bd5878868e6071aa3812135be
+  data.tar.gz: 46e6eb624f7c87dfb9dd7ac4e03c4ea23043a7c65af6dfd2c4b12c479a52a4a055a7df1226369561c21db92bd9e04b24ee3f625c5603cc66b38b2fef7f2bd72c

data/CHANGELOG.md

@@ -0,0 +1,5 @@
+# Changelog
+
+## 0.1.0 - 2026-02-07
+- Initial gem release.
+- Added standalone charts and diagram asset pipeline for Jekyll/al-folio sites.

data/LICENSE

@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright (c) 2025 Maruan Al-Shedivat.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,22 @@
+# Al-Charts
+
+A Jekyll plugin that provides chart/diagram script loading and setup logic.
+
+## Installation
+
+```ruby
+gem 'al_charts'
+```
+
+Enable in `_config.yml`:
+
+```yaml
+plugins:
+  - al_charts
+```
+
+## Usage
+
+```liquid
+{% al_charts_scripts %}
+```

data/lib/al_charts.rb

@@ -0,0 +1,97 @@
+require 'jekyll'
+
+module AlCharts
+  PLUGIN_NAME = 'al_charts'
+  ASSETS_DIR = 'assets'
+  JS_DIR = 'js'
+
+  class PluginStaticFile < Jekyll::StaticFile; end
+
+  class AssetsGenerator < Jekyll::Generator
+    safe true
+    priority :low
+
+    def generate(site)
+      plugin_lib_path = File.expand_path('.', __dir__)
+      Dir.glob(File.join(plugin_lib_path, ASSETS_DIR, PLUGIN_NAME, JS_DIR, '*.js')).each do |source_path|
+        site.static_files << PluginStaticFile.new(site, plugin_lib_path, File.join(ASSETS_DIR, PLUGIN_NAME, JS_DIR), File.basename(source_path))
+      end
+    end
+  end
+
+  class ChartsScriptsTag < Liquid::Tag
+    def render(context)
+      site = context.registers[:site]
+      return '' unless site
+
+      page = context.registers[:page] || context['page'] || {}
+      cfg = site.config
+      libs = cfg['third_party_libraries'] || {}
+      baseurl = cfg['baseurl'] || ''
+      out = []
+
+      if truthy?(nested_value(page, 'mermaid', 'enabled'))
+        out << %(<script defer src="#{libs.dig('mermaid', 'url', 'js')}" integrity="#{libs.dig('mermaid', 'integrity', 'js')}" crossorigin="anonymous"></script>)
+        if truthy?(nested_value(page, 'mermaid', 'zoomable'))
+          out << %(<script defer src="#{libs.dig('d3', 'url', 'js')}" integrity="#{libs.dig('d3', 'integrity', 'js')}" crossorigin="anonymous"></script>)
+        end
+        out << %(<script defer src="#{baseurl}/assets/al_charts/js/mermaid-setup.js" type="text/javascript"></script>)
+      end
+
+      if truthy?(page['code_diff'])
+        out << %(<script src="#{libs.dig('diff2html', 'url', 'js')}" integrity="#{libs.dig('diff2html', 'integrity', 'js')}" crossorigin="anonymous"></script>)
+        out << %(<script defer src="#{baseurl}/assets/al_charts/js/diff2html-setup.js" type="text/javascript"></script>)
+      end
+
+      if truthy?(page['map'])
+        out << %(<script src="#{libs.dig('leaflet', 'url', 'js')}" integrity="#{libs.dig('leaflet', 'integrity', 'js')}" crossorigin="anonymous"></script>)
+        out << %(<script defer src="#{baseurl}/assets/al_charts/js/leaflet-setup.js" type="text/javascript"></script>)
+      end
+
+      if truthy?(nested_value(page, 'chart', 'chartjs'))
+        out << %(<script defer src="#{libs.dig('chartjs', 'url', 'js')}" integrity="#{libs.dig('chartjs', 'integrity', 'js')}" crossorigin="anonymous"></script>)
+        out << %(<script defer src="#{baseurl}/assets/al_charts/js/chartjs-setup.js" type="text/javascript"></script>)
+      end
+
+      if truthy?(nested_value(page, 'chart', 'echarts'))
+        out << %(<script src="#{libs.dig('echarts', 'url', 'js', 'library')}" integrity="#{libs.dig('echarts', 'integrity', 'js', 'library')}" crossorigin="anonymous"></script>)
+        if truthy?(cfg['enable_darkmode'])
+          out << %(<script src="#{libs.dig('echarts', 'url', 'js', 'dark_theme')}" integrity="#{libs.dig('echarts', 'integrity', 'js', 'dark_theme')}" crossorigin="anonymous"></script>)
+        end
+        out << %(<script defer src="#{baseurl}/assets/al_charts/js/echarts-setup.js" type="text/javascript"></script>)
+      end
+
+      if truthy?(nested_value(page, 'chart', 'plotly'))
+        out << %(<script defer src="#{libs.dig('plotly', 'url', 'js')}" integrity="#{libs.dig('plotly', 'integrity', 'js')}" crossorigin="anonymous"></script>)
+        out << %(<script defer src="#{baseurl}/assets/al_charts/js/plotly-setup.js" type="text/javascript"></script>)
+      end
+
+      if truthy?(nested_value(page, 'chart', 'vega_lite'))
+        out << %(<script defer src="#{libs.dig('vega', 'url', 'js')}" integrity="#{libs.dig('vega', 'integrity', 'js')}" crossorigin="anonymous"></script>)
+        out << %(<script defer src="#{libs.dig('vega-lite', 'url', 'js')}" integrity="#{libs.dig('vega-lite', 'integrity', 'js')}" crossorigin="anonymous"></script>)
+        out << %(<script defer src="#{libs.dig('vega-embed', 'url', 'js')}" integrity="#{libs.dig('vega-embed', 'integrity', 'js')}" crossorigin="anonymous"></script>)
+        out << %(<script defer src="#{baseurl}/assets/al_charts/js/vega-setup.js" type="text/javascript"></script>)
+      end
+
+      out.join("\n")
+    end
+
+    private
+
+    def truthy?(value)
+      value == true || value.to_s == 'true'
+    end
+
+    def nested_value(container, *keys)
+      current = container
+      keys.each do |key|
+        return nil unless current.respond_to?(:[])
+
+        current = current[key]
+      end
+      current
+    end
+  end
+end
+
+Liquid::Template.register_tag('al_charts_scripts', AlCharts::ChartsScriptsTag)

data/lib/assets/al_charts/js/chartjs-setup.js

@@ -0,0 +1,14 @@
+$(document).ready(function () {
+  var $canvas = null,
+    $this = null,
+    _ctx = null,
+    _text = "";
+  $(".language-chartjs").each(function () {
+    $this = $(this);
+    $canvas = $("<canvas></canvas>");
+    _text = $this.text();
+    $this.text("").append($canvas);
+    _ctx = $canvas.get(0).getContext("2d");
+    _ctx && _text && new Chart(_ctx, JSON.parse(_text)) && $this.attr("data-processed", true);
+  });
+});

data/lib/assets/al_charts/js/diff2html-setup.js

@@ -0,0 +1,20 @@
+let diff2HtmlTheme = determineComputedTheme();
+
+/* Create diff2html as another node and hide the code block, appending the diff2html node after it
+    this is done to enable retrieving the code again when changing theme between light/dark */
+document.addEventListener("readystatechange", () => {
+  if (document.readyState === "complete") {
+    document.querySelectorAll("pre>code.language-diff2html").forEach((elem) => {
+      const textData = elem.textContent;
+      const backup = elem.parentElement;
+      backup.classList.add("unloaded");
+      /* create diff node */
+      let diffElement = document.createElement("div");
+      diffElement.classList.add("diff2html");
+      backup.after(diffElement);
+      const configuration = { colorScheme: diff2HtmlTheme, drawFileList: true, highlight: true, matching: "lines" };
+      const diff2htmlUi = new Diff2HtmlUI(diffElement, textData, configuration);
+      diff2htmlUi.draw();
+    });
+  }
+});

data/lib/assets/al_charts/js/echarts-setup.js

@@ -0,0 +1,29 @@
+let echartsTheme = determineComputedTheme();
+
+/* Create echarts chart as another node and hide the code block, appending the echarts node after it
+       this is done to enable retrieving the code again when changing theme between light/dark */
+document.addEventListener("readystatechange", () => {
+  if (document.readyState === "complete") {
+    document.querySelectorAll("pre>code.language-echarts").forEach((elem) => {
+      const jsonData = elem.textContent;
+      const backup = elem.parentElement;
+      backup.classList.add("unloaded");
+      /* create echarts node */
+      let chartElement = document.createElement("div");
+      chartElement.classList.add("echarts");
+      backup.after(chartElement);
+
+      /* create echarts */
+      if (echartsTheme === "dark") {
+        var chart = echarts.init(chartElement, "dark-fresh-cut");
+      } else {
+        var chart = echarts.init(chartElement);
+      }
+
+      chart.setOption(JSON.parse(jsonData));
+      window.addEventListener("resize", function () {
+        chart.resize();
+      });
+    });
+  }
+});

data/lib/assets/al_charts/js/leaflet-setup.js

@@ -0,0 +1,22 @@
+/* Create leaflet map as another node and hide the code block, appending the leaflet node after it */
+document.addEventListener("readystatechange", () => {
+  if (document.readyState === "complete") {
+    document.querySelectorAll("pre>code.language-geojson").forEach((elem) => {
+      const jsonData = elem.textContent;
+      const backup = elem.parentElement;
+      backup.classList.add("unloaded");
+      /* create leaflet node */
+      let mapElement = document.createElement("div");
+      mapElement.classList.add("map");
+      backup.after(mapElement);
+
+      var map = L.map(mapElement);
+      L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
+        maxZoom: 19,
+        attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+      }).addTo(map);
+      let geoJSON = L.geoJSON(JSON.parse(jsonData)).addTo(map);
+      map.fitBounds(geoJSON.getBounds());
+    });
+  }
+});

data/lib/assets/al_charts/js/mermaid-setup.js

@@ -0,0 +1,37 @@
+let mermaidTheme = determineComputedTheme();
+
+/* Create mermaid diagram as another node and hide the code block, appending the mermaid node after it
+    this is done to enable retrieving the code again when changing theme between light/dark */
+document.addEventListener("readystatechange", () => {
+  if (document.readyState === "complete") {
+    document.querySelectorAll("pre>code.language-mermaid").forEach((elem) => {
+      const svgCode = elem.textContent;
+      const backup = elem.parentElement;
+      backup.classList.add("unloaded");
+      /* create mermaid node */
+      let mermaid = document.createElement("pre");
+      mermaid.classList.add("mermaid");
+      const text = document.createTextNode(svgCode);
+      mermaid.appendChild(text);
+      backup.after(mermaid);
+    });
+
+    mermaid.initialize({ theme: mermaidTheme });
+
+    /* Zoomable mermaid diagrams */
+    if (typeof d3 !== "undefined") {
+      window.addEventListener("load", function () {
+        var svgs = d3.selectAll(".mermaid svg");
+        svgs.each(function () {
+          var svg = d3.select(this);
+          svg.html("<g>" + svg.html() + "</g>");
+          var inner = svg.select("g");
+          var zoom = d3.zoom().on("zoom", function (event) {
+            inner.attr("transform", event.transform);
+          });
+          svg.call(zoom);
+        });
+      });
+    }
+  }
+});

data/lib/assets/al_charts/js/plotly-setup.js

@@ -0,0 +1,52 @@
+let plotlyTheme = determineComputedTheme();
+/* Create plotly chart as another node and hide the code block, appending the plotly node after it
+       this is done to enable retrieving the code again when changing theme between light/dark */
+document.addEventListener("readystatechange", () => {
+  if (document.readyState === "complete") {
+    document.querySelectorAll("pre>code.language-plotly").forEach((elem) => {
+      const jsonCode = elem.textContent;
+      const backup = elem.parentElement;
+      backup.classList.add("unloaded");
+      /* create plotly node */
+      let chartElement = document.createElement("div");
+      backup.after(chartElement);
+
+      /* create plotly */
+      var jsonData = JSON.parse(jsonCode);
+
+      if (plotlyTheme === "dark") {
+        // dark theme extracted from https://github.com/plotly/plotly.py/blob/main/plotly/package_data/templates/plotly_dark.json?raw=true
+        // prettier-ignore
+        const plotlyDarkLayout = {"layout":{"autotypenumbers":"strict","colorway":["#636efa","#EF553B","#00cc96","#ab63fa","#FFA15A","#19d3f3","#FF6692","#B6E880","#FF97FF","#FECB52"],"font":{"color":"#f2f5fa"},"hovermode":"closest","hoverlabel":{"align":"left"},"paper_bgcolor":"rgb(17,17,17)","plot_bgcolor":"rgb(17,17,17)","polar":{"bgcolor":"rgb(17,17,17)","angularaxis":{"gridcolor":"#506784","linecolor":"#506784","ticks":""},"radialaxis":{"gridcolor":"#506784","linecolor":"#506784","ticks":""}},"ternary":{"bgcolor":"rgb(17,17,17)","aaxis":{"gridcolor":"#506784","linecolor":"#506784","ticks":""},"baxis":{"gridcolor":"#506784","linecolor":"#506784","ticks":""},"caxis":{"gridcolor":"#506784","linecolor":"#506784","ticks":""}},"coloraxis":{"colorbar":{"outlinewidth":0,"ticks":""}},"colorscale":{"sequential":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]],"sequentialminus":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]],"diverging":[[0,"#8e0152"],[0.1,"#c51b7d"],[0.2,"#de77ae"],[0.3,"#f1b6da"],[0.4,"#fde0ef"],[0.5,"#f7f7f7"],[0.6,"#e6f5d0"],[0.7,"#b8e186"],[0.8,"#7fbc41"],[0.9,"#4d9221"],[1,"#276419"]]},"xaxis":{"gridcolor":"#283442","linecolor":"#506784","ticks":"","title":{"standoff":15},"zerolinecolor":"#283442","automargin":true,"zerolinewidth":2},"yaxis":{"gridcolor":"#283442","linecolor":"#506784","ticks":"","title":{"standoff":15},"zerolinecolor":"#283442","automargin":true,"zerolinewidth":2},"scene":{"xaxis":{"backgroundcolor":"rgb(17,17,17)","gridcolor":"#506784","linecolor":"#506784","showbackground":true,"ticks":"","zerolinecolor":"#C8D4E3","gridwidth":2},"yaxis":{"backgroundcolor":"rgb(17,17,17)","gridcolor":"#506784","linecolor":"#506784","showbackground":true,"ticks":"","zerolinecolor":"#C8D4E3","gridwidth":2},"zaxis":{"backgroundcolor":"rgb(17,17,17)","gridcolor":"#506784","linecolor":"#506784","showbackground":true,"ticks":"","zerolinecolor":"#C8D4E3","gridwidth":2}},"shapedefaults":{"line":{"color":"#f2f5fa"}},"annotationdefaults":{"arrowcolor":"#f2f5fa","arrowhead":0,"arrowwidth":1},"geo":{"bgcolor":"rgb(17,17,17)","landcolor":"rgb(17,17,17)","subunitcolor":"#506784","showland":true,"showlakes":true,"lakecolor":"rgb(17,17,17)"},"title":{"x":0.05},"updatemenudefaults":{"bgcolor":"#506784","borderwidth":0},"sliderdefaults":{"bgcolor":"#C8D4E3","borderwidth":1,"bordercolor":"rgb(17,17,17)","tickwidth":0},"mapbox":{"style":"dark"}},"data":{"histogram2dcontour":[{"type":"histogram2dcontour","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"choropleth":[{"type":"choropleth","colorbar":{"outlinewidth":0,"ticks":""}}],"histogram2d":[{"type":"histogram2d","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"heatmap":[{"type":"heatmap","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"contourcarpet":[{"type":"contourcarpet","colorbar":{"outlinewidth":0,"ticks":""}}],"contour":[{"type":"contour","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"surface":[{"type":"surface","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"mesh3d":[{"type":"mesh3d","colorbar":{"outlinewidth":0,"ticks":""}}],"scatter":[{"marker":{"line":{"color":"#283442"}},"type":"scatter"}],"parcoords":[{"type":"parcoords","line":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scatterpolargl":[{"type":"scatterpolargl","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"bar":[{"error_x":{"color":"#f2f5fa"},"error_y":{"color":"#f2f5fa"},"marker":{"line":{"color":"rgb(17,17,17)","width":0.5},"pattern":{"fillmode":"overlay","size":10,"solidity":0.2}},"type":"bar"}],"scattergeo":[{"type":"scattergeo","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scatterpolar":[{"type":"scatterpolar","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"histogram":[{"marker":{"pattern":{"fillmode":"overlay","size":10,"solidity":0.2}},"type":"histogram"}],"scattergl":[{"marker":{"line":{"color":"#283442"}},"type":"scattergl"}],"scatter3d":[{"type":"scatter3d","line":{"colorbar":{"outlinewidth":0,"ticks":""}},"marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scattermap":[{"type":"scattermap","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scattermapbox":[{"type":"scattermapbox","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scatterternary":[{"type":"scatterternary","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scattercarpet":[{"type":"scattercarpet","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"carpet":[{"aaxis":{"endlinecolor":"#A2B1C6","gridcolor":"#506784","linecolor":"#506784","minorgridcolor":"#506784","startlinecolor":"#A2B1C6"},"baxis":{"endlinecolor":"#A2B1C6","gridcolor":"#506784","linecolor":"#506784","minorgridcolor":"#506784","startlinecolor":"#A2B1C6"},"type":"carpet"}],"table":[{"cells":{"fill":{"color":"#506784"},"line":{"color":"rgb(17,17,17)"}},"header":{"fill":{"color":"#2a3f5f"},"line":{"color":"rgb(17,17,17)"}},"type":"table"}],"barpolar":[{"marker":{"line":{"color":"rgb(17,17,17)","width":0.5},"pattern":{"fillmode":"overlay","size":10,"solidity":0.2}},"type":"barpolar"}],"pie":[{"automargin":true,"type":"pie"}]}};
+
+        // if jsonData.layout exists, then update the theme
+        if (jsonData.layout) {
+          if (jsonData.layout.template) {
+            jsonData.layout.template = { ...plotlyDarkLayout, ...jsonData.layout.template };
+          } else {
+            jsonData.layout.template = plotlyDarkLayout;
+          }
+        } else {
+          jsonData.layout = { template: plotlyDarkLayout };
+        }
+      } else {
+        // light theme extracted from https://github.com/plotly/plotly.py/blob/main/plotly/package_data/templates/plotly_white.json?raw=true
+        // prettier-ignore
+        const plotlyLightLayout = {"layout":{"autotypenumbers":"strict","colorway":["#636efa","#EF553B","#00cc96","#ab63fa","#FFA15A","#19d3f3","#FF6692","#B6E880","#FF97FF","#FECB52"],"font":{"color":"#2a3f5f"},"hovermode":"closest","hoverlabel":{"align":"left"},"paper_bgcolor":"white","plot_bgcolor":"white","polar":{"bgcolor":"white","angularaxis":{"gridcolor":"#EBF0F8","linecolor":"#EBF0F8","ticks":""},"radialaxis":{"gridcolor":"#EBF0F8","linecolor":"#EBF0F8","ticks":""}},"ternary":{"bgcolor":"white","aaxis":{"gridcolor":"#DFE8F3","linecolor":"#A2B1C6","ticks":""},"baxis":{"gridcolor":"#DFE8F3","linecolor":"#A2B1C6","ticks":""},"caxis":{"gridcolor":"#DFE8F3","linecolor":"#A2B1C6","ticks":""}},"coloraxis":{"colorbar":{"outlinewidth":0,"ticks":""}},"colorscale":{"sequential":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]],"sequentialminus":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]],"diverging":[[0,"#8e0152"],[0.1,"#c51b7d"],[0.2,"#de77ae"],[0.3,"#f1b6da"],[0.4,"#fde0ef"],[0.5,"#f7f7f7"],[0.6,"#e6f5d0"],[0.7,"#b8e186"],[0.8,"#7fbc41"],[0.9,"#4d9221"],[1,"#276419"]]},"xaxis":{"gridcolor":"#EBF0F8","linecolor":"#EBF0F8","ticks":"","title":{"standoff":15},"zerolinecolor":"#EBF0F8","automargin":true,"zerolinewidth":2},"yaxis":{"gridcolor":"#EBF0F8","linecolor":"#EBF0F8","ticks":"","title":{"standoff":15},"zerolinecolor":"#EBF0F8","automargin":true,"zerolinewidth":2},"scene":{"xaxis":{"backgroundcolor":"white","gridcolor":"#DFE8F3","linecolor":"#EBF0F8","showbackground":true,"ticks":"","zerolinecolor":"#EBF0F8","gridwidth":2},"yaxis":{"backgroundcolor":"white","gridcolor":"#DFE8F3","linecolor":"#EBF0F8","showbackground":true,"ticks":"","zerolinecolor":"#EBF0F8","gridwidth":2},"zaxis":{"backgroundcolor":"white","gridcolor":"#DFE8F3","linecolor":"#EBF0F8","showbackground":true,"ticks":"","zerolinecolor":"#EBF0F8","gridwidth":2}},"shapedefaults":{"line":{"color":"#2a3f5f"}},"annotationdefaults":{"arrowcolor":"#2a3f5f","arrowhead":0,"arrowwidth":1},"geo":{"bgcolor":"white","landcolor":"white","subunitcolor":"#C8D4E3","showland":true,"showlakes":true,"lakecolor":"white"},"title":{"x":0.05},"mapbox":{"style":"light"}},"data":{"histogram2dcontour":[{"type":"histogram2dcontour","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"choropleth":[{"type":"choropleth","colorbar":{"outlinewidth":0,"ticks":""}}],"histogram2d":[{"type":"histogram2d","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"heatmap":[{"type":"heatmap","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"contourcarpet":[{"type":"contourcarpet","colorbar":{"outlinewidth":0,"ticks":""}}],"contour":[{"type":"contour","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"surface":[{"type":"surface","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"mesh3d":[{"type":"mesh3d","colorbar":{"outlinewidth":0,"ticks":""}}],"scatter":[{"fillpattern":{"fillmode":"overlay","size":10,"solidity":0.2},"type":"scatter"}],"parcoords":[{"type":"parcoords","line":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scatterpolargl":[{"type":"scatterpolargl","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"bar":[{"error_x":{"color":"#2a3f5f"},"error_y":{"color":"#2a3f5f"},"marker":{"line":{"color":"white","width":0.5},"pattern":{"fillmode":"overlay","size":10,"solidity":0.2}},"type":"bar"}],"scattergeo":[{"type":"scattergeo","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scatterpolar":[{"type":"scatterpolar","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"histogram":[{"marker":{"pattern":{"fillmode":"overlay","size":10,"solidity":0.2}},"type":"histogram"}],"scattergl":[{"type":"scattergl","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scatter3d":[{"type":"scatter3d","line":{"colorbar":{"outlinewidth":0,"ticks":""}},"marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scattermap":[{"type":"scattermap","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scattermapbox":[{"type":"scattermapbox","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scatterternary":[{"type":"scatterternary","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scattercarpet":[{"type":"scattercarpet","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"carpet":[{"aaxis":{"endlinecolor":"#2a3f5f","gridcolor":"#C8D4E3","linecolor":"#C8D4E3","minorgridcolor":"#C8D4E3","startlinecolor":"#2a3f5f"},"baxis":{"endlinecolor":"#2a3f5f","gridcolor":"#C8D4E3","linecolor":"#C8D4E3","minorgridcolor":"#C8D4E3","startlinecolor":"#2a3f5f"},"type":"carpet"}],"table":[{"cells":{"fill":{"color":"#EBF0F8"},"line":{"color":"white"}},"header":{"fill":{"color":"#C8D4E3"},"line":{"color":"white"}},"type":"table"}],"barpolar":[{"marker":{"line":{"color":"white","width":0.5},"pattern":{"fillmode":"overlay","size":10,"solidity":0.2}},"type":"barpolar"}],"pie":[{"automargin":true,"type":"pie"}]}};
+
+        // if jsonData.layout exists, then update the theme
+        if (jsonData.layout) {
+          if (jsonData.layout.template) {
+            jsonData.layout.template = { ...plotlyLightLayout, ...jsonData.layout.template };
+          } else {
+            jsonData.layout.template = plotlyLightLayout;
+          }
+        } else {
+          jsonData.layout = { template: plotlyLightLayout };
+        }
+      }
+
+      Plotly.react(chartElement, jsonData.data, jsonData.layout);
+    });
+  }
+});

data/lib/assets/al_charts/js/vega-setup.js

@@ -0,0 +1,24 @@
+let vegaTheme = determineComputedTheme();
+
+/* Create vega lite chart as another node and hide the code block, appending the vega lite node after it
+       this is done to enable retrieving the code again when changing theme between light/dark */
+document.addEventListener("readystatechange", () => {
+  if (document.readyState === "complete") {
+    document.querySelectorAll("pre>code.language-vega_lite").forEach((elem) => {
+      const jsonData = elem.textContent;
+      const backup = elem.parentElement;
+      backup.classList.add("unloaded");
+      /* create vega lite node */
+      let chartElement = document.createElement("div");
+      chartElement.classList.add("vega-lite");
+      backup.after(chartElement);
+
+      /* Embed the visualization in the container */
+      if (vegaTheme === "dark") {
+        vegaEmbed(chartElement, JSON.parse(jsonData), { theme: "dark" });
+      } else {
+        vegaEmbed(chartElement, JSON.parse(jsonData));
+      }
+    });
+  }
+});

metadata

@@ -0,0 +1,132 @@
+--- !ruby/object:Gem::Specification
+name: al_charts
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- al-org
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2026-02-07 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: jekyll
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '3.9'
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '5.0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '3.9'
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '5.0'
+- !ruby/object:Gem::Dependency
+  name: liquid
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '4.0'
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '6.0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '4.0'
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '6.0'
+- !ruby/object:Gem::Dependency
+  name: bundler
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '2.0'
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '3.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '2.0'
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '3.0'
+- !ruby/object:Gem::Dependency
+  name: rake
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '13.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '13.0'
+description: Jekyll plugin extracted from al-folio that ships chart assets and conditionally
+  renders Mermaid, ECharts, Plotly, Vega-Lite, Leaflet, and diff2html scripts.
+email:
+- dev@al-org.dev
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- CHANGELOG.md
+- LICENSE
+- README.md
+- lib/al_charts.rb
+- lib/assets/al_charts/js/chartjs-setup.js
+- lib/assets/al_charts/js/diff2html-setup.js
+- lib/assets/al_charts/js/echarts-setup.js
+- lib/assets/al_charts/js/leaflet-setup.js
+- lib/assets/al_charts/js/mermaid-setup.js
+- lib/assets/al_charts/js/plotly-setup.js
+- lib/assets/al_charts/js/vega-setup.js
+homepage: https://github.com/al-org-dev/al-charts
+licenses:
+- MIT
+metadata:
+  allowed_push_host: https://rubygems.org
+  homepage_uri: https://github.com/al-org-dev/al-charts
+  source_code_uri: https://github.com/al-org-dev/al-charts
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '2.7'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 3.0.3.1
+signing_key: 
+specification_version: 4
+summary: Chart and diagram asset pipeline for al-folio Jekyll sites
+test_files: []