From 71f731ca0675b19562221233e9a30ffcad0107d0 Mon Sep 17 00:00:00 2001
From: Johannes Stoelp <johannes.stoelp@gmail.com>
Date: Sun, 30 Oct 2022 16:22:06 +0100
Subject: web: added minimal chartjs example with external tooltip to render
 custom html

---
 src/web/README.md                    |   1 +
 src/web/chartjs.md                   |  10 ++++
 src/web/src/chartjs-ext-tooltip.html | 101 +++++++++++++++++++++++++++++++++++
 3 files changed, 112 insertions(+)
 create mode 100644 src/web/chartjs.md
 create mode 100644 src/web/src/chartjs-ext-tooltip.html

(limited to 'src/web')

diff --git a/src/web/README.md b/src/web/README.md
index f208afb..e189f9e 100644
--- a/src/web/README.md
+++ b/src/web/README.md
@@ -1,3 +1,4 @@
 # Web
 
 - [html](./html.md)
+- [chartjs](./chartjs.md)
diff --git a/src/web/chartjs.md b/src/web/chartjs.md
new file mode 100644
index 0000000..36b621d
--- /dev/null
+++ b/src/web/chartjs.md
@@ -0,0 +1,10 @@
+# Chart.js
+
+## Minimal example with *external* tooltips
+
+[Rendered html](src/chartjs-ext-tooltip.html)
+```html
+{{#include src/chartjs-ext-tooltip.html:3: }}
+```
+
+[chartjs]: https://www.chartjs.org
diff --git a/src/web/src/chartjs-ext-tooltip.html b/src/web/src/chartjs-ext-tooltip.html
new file mode 100644
index 0000000..b7358bb
--- /dev/null
+++ b/src/web/src/chartjs-ext-tooltip.html
@@ -0,0 +1,101 @@
+<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+
+<canvas id="myChart" style="margin:5em;"></canvas>
+
+<script>
+const get_or_create_tooltip = (id) => {
+  if (tooltip = document.getElementById(id)) {
+    return tooltip;
+  } else {
+    // -- Create a new Tooltip element.
+    const tooltip = document.createElement('div');
+    tooltip.id = id;
+    document.body.appendChild(tooltip);
+
+    // -- Some minimal styling.
+    tooltip.style.background = 'rgba(0, 0, 0, 0.1)';
+    tooltip.style.position   = 'absolute';
+    tooltip.style.transition = 'all .2s ease';
+
+    // -- Add a table element for the tooltip content.
+    const table = document.createElement('table');
+    tooltip.appendChild(table);
+
+    return tooltip
+  }
+}
+
+const render_tooltip = (context) => {
+  const {chart, tooltip} = context;
+
+  // -- Get Tooltip element.
+  const tooltip_elem = get_or_create_tooltip('myTooltip');
+
+  // -- Get data point values (only one data point).
+  const {label: x, formattedValue: y} = tooltip.dataPoints[0];
+
+  // -- Format new tooltip.
+  const link = document.createElement('a');
+  link.href =  "https://github.com/johannst";
+  link.innerHTML = "X:" + x + " Y:" + y;
+
+  // -- Remove previous child element and add new one.
+  const table = tooltip_elem.querySelector('table');
+  table.innerHTML = ""; 
+  table.appendChild(link);
+
+  // -- Get absolute X/Y position of the top left corner of the canvas.
+  const {offsetLeft: canvas_x, offsetTop: canvas_y} = chart.canvas;
+
+  // -- Set position and minimal style for the tooltip.
+  tooltip_elem.style.left = canvas_x + tooltip.caretX + 'px';
+  tooltip_elem.style.top  = canvas_y + tooltip.caretY + 'px';
+  tooltip_elem.style.font = tooltip.options.bodyFont.string;
+
+  // -- Place the tooltip (I) left or (II) right of the data point.
+  if (tooltip.xAlign === "right") {
+    tooltip_elem.style.transform = 'translate(-100%, 0)'; // (I)
+  } else if (tooltip.xAlign === "left") {
+    tooltip_elem.style.transform = 'translate(0%, 0)';    // (II)
+  }
+}
+
+// -- Render a chart with some dummy data on the canvas.
+const chart = new Chart(
+  document.getElementById('myChart'),
+  {
+    data: {
+      datasets: [{
+        // -- A single dataset.
+        label: 'Just some values',
+        type: 'scatter',
+        data: [
+          {x: 4, y: 4},
+          {x: 5, y: 1},
+          {x: 7, y: 6},
+          {x: 10, y: 8},
+          {x: 10, y: 7},
+          {x: 10, y: 3},
+        ],
+        backgroundColor: 'rgba(255, 99, 132, 0.5)',
+        borderColor: 'rgb(255, 99, 132)',
+      }],
+    },
+    options: {
+      scales: {
+        y: {
+          beginAtZero: true, // -- Start the Y-Axis at zero instead min(y) of dataset.
+        }
+      },
+      plugins: {
+        tooltip: {
+          enabled: false, // -- Disable builtin tooltips.
+          mode: 'nearest', // -- Get the item that is nearest to the mouse.
+          intersect: false, // -- 'mode' is active also when the mouse doesnt intersect with an item on the chart.
+          external: render_tooltip, // -- External tooltip handler, allows to create own HTML.
+        }
+      }
+    }
+  }
+);
+</script>
-- 
cgit v1.2.3