feat(emacs): 1rst chart works as expected

content/posts/2023-04-14-emacs.md

@@ -4,9 +4,9 @@ author = ["Pavel Korytov"]
 date = 2023-02-02
 tags = ["emacs"]
 draft = true
-scripts = ["/js/chart.js", "/js/2023-04-14-emacs.js"]
+scripts = ["/js/chart.js", "/js/chartjs-adapter-date-fns.bundle.min.js", "/js/chartjs-plugin-datalabels.js", "/js/2023-04-14-emacs.js"]
 +++
 
 Hello world
 
-<canvas id="myChart"></canvas>
+<canvas id="chart-emacs-history"></canvas>

org/2023-04-14-emacs.org

@@ -4,10 +4,10 @@
 #+DATE: 2023-02-02
 #+HUGO_TAGS: emacs
 #+HUGO_DRAFT: true
-#+HUGO_CUSTOM_FRONT_MATTER: :scripts '("/js/chart.js" "/js/2023-04-14-emacs.js")
+#+HUGO_CUSTOM_FRONT_MATTER: :scripts '("/js/chart.js" "/js/chartjs-adapter-date-fns.bundle.min.js" "/js/chartjs-plugin-datalabels.js" "/js/2023-04-14-emacs.js")
 
 Hello world
 
 #+begin_export html
-<canvas id="myChart"></canvas>
+<canvas id="chart-emacs-history"></canvas>
 #+end_export

static/js/2023-04-14-emacs.js

@@ -1,22 +1,130 @@
-function initChart() {
+const TODAY = new Date("2023-04-14");
-  const ctx = document.getElementById("myChart");
+const TODAY_LOCALE = TODAY.toLocaleDateString("en-GB");
 
-  new Chart(ctx, {
+const EMACS_DATA = {
-    type: "bar",
+  labels: ["Editor/IDE", "File manager"],
-    data: {
+  datasets: [
-      labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
+    {
-      datasets: [
+      label: "Jupyter",
+      data: [
         {
-          label: "# of Votes",
+          name: "Editor/IDE",
-          data: [12, 19, 3, 5, 2, 3],
+          span: [new Date("2018-10-24"), new Date("2021-04-01")],
-          borderWidth: 1,
         },
       ],
+      yAxisID: "yAxis1",
     },
+    {
+      label: "NeoVim",
+      data: [
+        {
+          name: "Editor/IDE",
+          span: [new Date("2019-03-30"), new Date("2020-10-12")],
+        },
+      ],
+      yAxisID: "yAxis1",
+    },
+    {
+      label: "DataGrip",
+      data: [
+        {
+          name: "Editor/IDE",
+          span: [new Date("2020-02-01"), TODAY],
+        },
+      ],
+      yAxisID: "yAxis1",
+    },
+    {
+      label: "Emacs",
+      data: [
+        {
+          name: "Editor/IDE",
+          span: [new Date("2020-10-12"), TODAY],
+        },
+      ],
+      yAxisID: "yAxis1",
+    },
+    {
+      label: "vifm",
+      data: [
+        {
+          name: "File manager",
+          span: [new Date("2020-02-17"), new Date("2020-11-11")],
+        },
+      ],
+      yAxisID: "yAxis2",
+    },
+    {
+      label: "Dired",
+      data: [
+        {
+          name: "File manager",
+          span: [new Date("2020-11-11"), TODAY],
+        },
+      ],
+      yAxisID: "yAxis2",
+    },
+  ],
+};
+
+function emacsChart() {
+  const ctx = document.getElementById("chart-emacs-history");
+  new Chart(ctx, {
+    type: "bar",
+    data: EMACS_DATA,
+    plugins: [ChartDataLabels],
     options: {
+      indexAxis: "y",
+      grouped: true,
+      parsing: {
+        yAxisKey: "name",
+        xAxisKey: "span",
+      },
+      layout: {
+        padding: 1,
+      },
       scales: {
-        y: {
+        x: {
-          beginAtZero: true,
+          type: "time",
+          min: new Date("2018-06"),
+        },
+        yAxis1: {
+          ticks: {
+            display: false,
+          },
+        },
+        yAxis2: {
+          ticks: {
+            // display: false
+          },
+        },
+      },
+      plugins: {
+        legend: {
+          display: false,
+        },
+        datalabels: {
+          formatter: function (value, context) {
+            return context.dataset.label;
+          },
+          color: "black",
+        },
+        tooltip: {
+          callbacks: {
+            label: function (context) {
+              const startDate = new Date(
+                context.parsed._custom.start
+              ).toLocaleDateString("en-GB");
+              let endDate = new Date(
+                context.parsed._custom.end
+              ).toLocaleDateString("en-GB");
+              if (endDate === TODAY_LOCALE) {
+                endDate = "Today";
+              }
+              const label = context.dataset.label;
+              return `${label}: ${startDate} - ${endDate}`;
+            },
+          },
         },
       },
     },
@@ -26,7 +134,7 @@ function initChart() {
 document.addEventListener(
   "DOMContentLoaded",
   function () {
-    initChart();
+    emacsChart();
   },
   false
 );