From 8f6393b2cab28de6a7bf207a8e98204886289648 Mon Sep 17 00:00:00 2001
From: Mark Veidemanis <m@zm.is>
Date: Thu, 21 Jul 2022 13:51:01 +0100
Subject: [PATCH] Implement chart tooltips

---
 core/static/chart.js             | 57 ++++++++++++++++++--------------
 core/templates/ui/drilldown.html |  2 +-
 core/views/dynamic/search.py     |  5 +--
 3 files changed, 36 insertions(+), 28 deletions(-)

diff --git a/core/static/chart.js b/core/static/chart.js
index f5580da..ee10484 100644
--- a/core/static/chart.js
+++ b/core/static/chart.js
@@ -1,34 +1,41 @@
 function loadJson(selector) {
     return JSON.parse(document.querySelector(selector).getAttribute('data-json'));
-  }
-  
-
+}
 var jsonData = loadJson('#jsonData');
-var data = jsonData.map((item) => item.value);
-var labels = jsonData.map((item) => item.date);
+var full_data = jsonData.map((item) => item);
 
-var config = {
-    type: 'line',
-    data: {
-    labels: labels,
+var ctx = document.getElementById('volume').getContext("2d");
+new Chart(ctx, {
+  type: 'line',
+  data: {
     datasets: [
-        {
-        label: 'Sentiment',
+      {
+        label: "Sentiment",
+        fill: false,
         backgroundColor: 'black',
         borderColor: 'lightblue',
-        data: data,
-        fill: false
-        }
-    ]
+        tension: 0.3,
+        data: full_data,
+        spanGaps: true,
+      }
+    ],
+  },
+  options: {
+    parsing: {
+      xAxisKey: 'date',
+      yAxisKey: 'value',
     },
-    options: {
-        responsive: true,
-
+    plugins: {
+      tooltip: {
+        callbacks: {
+          beforeFooter: function(context) {
+            return "Nick: " + full_data[context[0].dataIndex].nick;
+          },
+          footer: function(context) {
+            return "Msg: " + full_data[context[0].dataIndex].text;
+          }
+        }
+      }
     }
-}
-var element = document.getElementById('volume');
-element.removeAttribute("height");
-element.removeAttribute("width");
-
-var ctx = document.getElementById('volume').getContext('2d');
-new Chart(ctx, config);
+  }
+});
diff --git a/core/templates/ui/drilldown.html b/core/templates/ui/drilldown.html
index 39ca518..81a40ec 100644
--- a/core/templates/ui/drilldown.html
+++ b/core/templates/ui/drilldown.html
@@ -1,7 +1,7 @@
 {% extends "base.html" %}
 {% load static %}
 {% block content %}
-  <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
   <div class="box">
     <form method="POST">
       {% csrf_token %}
diff --git a/core/views/dynamic/search.py b/core/views/dynamic/search.py
index 231458c..8750827 100644
--- a/core/views/dynamic/search.py
+++ b/core/views/dynamic/search.py
@@ -54,8 +54,9 @@ class Search(LoginRequiredMixin, View):
         context["data"] = json.dumps(
             [
                 {
-                    "id": item.get("id"),
-                    "value": item.get("sentiment", 0),
+                    "text": item.get("msg", None) or item.get("id"),
+                    "nick": item.get("nick", None),
+                    "value": item.get("sentiment", None) or None,
                     "date": item.get("ts"),
                 }
                 for item in context["results"]