Basic chart works

assets/js/chart.js

@@ -4,6 +4,20 @@ import * as echarts from 'echarts';
 
 const defaultHeightVH = 50;
 
+const colors = [
+    '#c23531',
+    '#2f4554',
+    '#61a0a8',
+    '#d48265',
+    '#91c7ae',
+    '#749f83',
+    '#ca8622',
+    '#bda29a',
+    '#6e7074',
+    '#546570',
+    '#c4ccd3'
+  ];
+
 async function loadCSVFromURL(url) {
   try {
     const response = await fetch(url);
@@ -14,14 +28,33 @@ async function loadCSVFromURL(url) {
 
     for (let i = 1; i < lines.length; i++) {
       const row = lines[i].split(',');
-      data.push(row);
+      const obj = {};
+      headers.forEach((header, j) => {
+        obj[header] = row[j];
+      });
+      if (row[1] !== undefined) {
+        data.push(obj);
+      } else {
+        //console.warn('Blog is empty: ', row);
+      }
     }
 
+    const groupedData = {};
+    data.forEach(row => {
+      const date = new Date(row['Date']);
+      const month = `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}`;
+      if (!groupedData[month]) {
+        groupedData[month] = {};
+      }
+      const category = row['Blog'];
+      groupedData[month][category] = (groupedData[month][category] || 0) + 1;
+    });
+
     //return data[0].map((_, i) => data.map(row => row[i]));
-    return data;
+    return groupedData;
   } catch (error) {
     console.error('Error loading CSV from URL:', error);
-    return []; // Return an empty array on error
+    return [];
   }
 }
 
@@ -39,38 +72,63 @@ function chart(csvFile, element) {
     if (height === 0) {
       height = Math.round(window.innerHeight / 100) * defaultHeightVH;
     }
-    var myChart = echarts.init(container, null, { renderer: "svg", width: width, height: height});
+
+    const xAxisData = Object.keys(data);
+    const seriesData = [];
+    let colorIndex = 0;
+    const blogs = new Set(Object.keys(data).map((key) => { return Object.keys(data[key])[0] }));
+    //WTF for in won't work with Sets and only itereates over array index, JS is stupid as shit
+    for (const blog of [...blogs]) {
+      seriesData.push({
+        name: blog,
+        type: 'bar',
+        stack: 'total',
+        data: xAxisData.map(month => data[month][blog] || 0),
+        itemStyle: {
+          color: colors[colorIndex % colors.length]
+        },
+        emphasis: {
+          focus: 'series'
+        }
+      });
+      colorIndex++;
+    }
 
     var option = {
-      dataset:{
-        source:data,
-        dimensions: ['date', 'blog', 'title'],
+      color: colors,
+      legend: {
+        type: 'scroll',
+        orient: 'horizontal',
+        right: 10,
+        left: 10,
+        top: 10,
+        data: seriesData.map(series => series.name)
       },
-      series: [
-        {
-          name: 'blog',
-          type: 'line',
-          encode: {
-            x: 'timestamp',
-            y: 'blog'
-          }
-        }
-      ],
-      title: {
+      tooltip: {
+        trigger: 'item',
+        formatter: '{a} <br/>{b}: <b>{c}</b>'
       },
-      tooltip: {},
-      /*
-      legend: {
-        data: ['sales']
+      grid: {
+        left: 0,
+        right: 0,
+        top: 0
       },
-      */
       xAxis: {
+        type: 'category',
+        data: xAxisData,
+        label: "Date"
       },
-      yAxis: {},
-
+      yAxis: {
+        type: 'value',
+        label: "Posts",
+        scale: true
+      },
+      series: seriesData,
+      dataZoom: []
     };
-    myChart.setOption(option);
 
+    var chart = echarts.init(container, null, { renderer: "svg", width: width, height: height});
+    chart.setOption(option);
   });
 }
 

assets/scss/chart.scss

@@ -1,4 +1,5 @@
 .chart {
   width: 100%;
   min-height: 50vh;
+  margin: 1rem 0;
 }

package.json

@@ -6,9 +6,9 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.11.8",
-    "billboard.js": "^3.14.2",
     "bootstrap": "^5.3.2",
     "echarts": "^5.6.0",
+    "echarts-stat": "^1.2.0",
     "fuse.js": "^7.0.0",
     "jquery": "^3.7.1",
     "normalize.css": "^8.0.1",