Implement chart tooltips

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 = {
+var ctx = document.getElementById('volume').getContext("2d");
+new Chart(ctx, {
   type: 'line',
   data: {
-    labels: labels,
     datasets: [
       {
-        label: 'Sentiment',
+        label: "Sentiment",
+        fill: false,
         backgroundColor: 'black',
         borderColor: 'lightblue',
-        data: data,
-        fill: false
+        tension: 0.3,
+        data: full_data,
+        spanGaps: true,
       }
-    ]
+    ],
   },
   options: {
-        responsive: true,
-
+    parsing: {
+      xAxisKey: 'date',
+      yAxisKey: 'value',
+    },
+    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);
+      }
+    }
+  }
+});

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 %}

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"]