try echarts

assets/js/chart.js

@@ -1,34 +1,76 @@
 // See https://observablehq.com/@d3/stacked-to-grouped-bars
-import { bb } from 'billboard.js';
+//import { bb, bar } from 'billboard.js';
+import * as echarts from 'echarts';
+
+const defaultHeightVH = 50;
+
+async function loadCSVFromURL(url) {
+  try {
+    const response = await fetch(url);
+    const text = await response.text();
+    const lines = text.split('\n');
+    const headers = lines[0].split(',');
+    const data = [];
+
+    for (let i = 1; i < lines.length; i++) {
+      const row = lines[i].split(',');
+      data.push(row);
+    }
+
+    //return data[0].map((_, i) => data.map(row => row[i]));
+    return data;
+  } catch (error) {
+    console.error('Error loading CSV from URL:', error);
+    return []; // Return an empty array on error
+  }
+}
 
-//TODO: This is currently just some example code
 function chart(csvFile, element) {
-  d3.csv(csvFile).then(function(data) {
-    const columns = Object.keys(data[0]);
+  if (element.startsWith('#')) {
+    element = element.substring(1);
+  }
+  loadCSVFromURL(csvFile).then(data => {
+    const container = document.getElementById(element)
+    var width = container.offsetWidth;
+    if (width === 0) {
+      width = container.parentElement.parentElement.offsetWidth;
+    }
+    var height = container.offsetHeight;
+    if (height === 0) {
+      height = Math.round(window.innerHeight / 100) * defaultHeightVH;
+    }
+    var myChart = echarts.init(container, null, { renderer: "svg", width: width, height: height});
 
-    const chartData = {
-      columns: [
-        ['x'].concat(data.map(d => d[Object.keys(data[0])[0]])),
-        ...columns.map(col => [col].concat(data.map(d => +d[col])))
+    var option = {
+      dataset:{
+        source:data,
+        dimensions: ['date', 'blog', 'title'],
+      },
+      series: [
+        {
+          name: 'blog',
+          type: 'line',
+          encode: {
+            x: 'timestamp',
+            y: 'blog'
+          }
+        }
       ],
-      type: 'bar',
-      groups: [columns]
+      title: {
+      },
+      tooltip: {},
+      /*
+      legend: {
+        data: ['sales']
+      },
+      */
+      xAxis: {
+      },
+      yAxis: {},
+
     };
+    myChart.setOption(option);
 
-    bb.generate({
-      bindto: element,
-      data: chartData,
-      bar: {
-        width: {
-          ratio: 0.8
-        }
-      },
-      axis: {
-        x: {
-          type: 'category'
-        }
-      }
-    });
   });
 }
 

assets/scss/chart.scss

@@ -1,2 +1,4 @@
-@import "billboard.js/billboard.css";
-@import "billboard.js/theme/insight.css";
+.chart {
+  width: 100%;
+  min-height: 50vh;
+}

config.toml

@@ -102,10 +102,6 @@ enableRobotsTXT = true
       source = "content"
       target = "content"
 
-    [[module.mounts]]
-        source = "node_modules/billboard.js/dist"
-        target = "assets/css/billboard.js"
-
     [module.hugoVersion]
       extended = true
       min = '0.127.0'

layouts/_default/archive.csv

@@ -1,3 +1,4 @@
+Date,Blog,Title{{ printf "\n" }}
 {{- $pages := (partial "blog-posts.html" (dict "context" . "type" "archive")).ByDate -}}
 
 {{- $firstYear := (index (first 1 $pages) 0).Date.Year -}}
@@ -35,7 +36,7 @@
           {{- else -}}
               {{- $postTitle = .Title -}}
           {{- end -}}
-          {{ .Date }},{{ $displayName }},"{{ $postTitle }}"{{ printf "\n" }}
+          {{ .Date | time.Format "2006-01-02T15:04:05Z07:00" }},{{ $displayName }},"{{ $postTitle }}"{{ printf "\n" }}
         {{- end -}}
       {{- end -}}
     {{- end -}}

package.json

@@ -8,6 +8,7 @@
     "@popperjs/core": "^2.11.8",
     "billboard.js": "^3.14.2",
     "bootstrap": "^5.3.2",
+    "echarts": "^5.6.0",
     "fuse.js": "^7.0.0",
     "jquery": "^3.7.1",
     "normalize.css": "^8.0.1",