From 197f7bcf6bd49b96d1792c7eeb16409def730a83 Mon Sep 17 00:00:00 2001
From: Peter Stockings <pstockings@jadeworld.com>
Date: Mon, 11 Dec 2023 21:38:52 +1100
Subject: [PATCH] Add interactivity to recently created graphs, this time using
 circles for interactivity

---
 templates/partials/svg_line_graph.html | 34 ++++++++++++++++++--------
 utils.py                               |  5 +++-
 2 files changed, 28 insertions(+), 11 deletions(-)

diff --git a/templates/partials/svg_line_graph.html b/templates/partials/svg_line_graph.html
index 23d5a0b..a72a7c3 100644
--- a/templates/partials/svg_line_graph.html
+++ b/templates/partials/svg_line_graph.html
@@ -17,7 +17,7 @@
 {% endfor %}
 {% endmacro %}
 
-{% macro circles(data_points, color) %}
+{% macro circles_with_skipped_points(data_points, color) %}
     {% for i in range(data_points|length) %}
     {% set current_value, current_position = data_points[i] %}
         {% set prev_value = data_points[i - 1][0] if i > 0 else None %}
@@ -31,9 +31,19 @@
     {% endfor %}
 {% endmacro %}
 
+{% macro circles_interactive(data_points) %}
+<g style="fill-opacity: 0%; stroke: none;">
+    {% for value, position, message in data_points %}
+        {% set x = (position * vb_width)+margin %}
+        {% set y = (vb_height - value)+margin %}
+        <circle cx="{{ x | int }}" cy="{{ y | int }}" r="5" class="pnt-{{ unique_id }}" data-msg="{{ message }}"></circle>
+    {% endfor %}
+    </g>
+{% endmacro %}
+
     {% macro plot_line(points, color) %}
     <path d="{{ path(points, vb_height) }}" stroke="{{ color }}" fill="none" />
-    {{ circles(points, color) }}
+    {{ circles_with_skipped_points(points, color) }}
     {% endmacro %}
 
     <!-- HubSpot doesn't escape whitespace. -->
@@ -58,6 +68,7 @@
             {% for plot in plots %}
             <g class="{{ plot.label }}" style="fill: {{ plot.color }}; stroke: {{ plot.color }};">
                 {{ plot_line(plot.points, plot.color) }}
+                {{ circles_interactive(plot.plot_labels) }}
             </g>
             {% endfor %}
 
@@ -75,14 +86,17 @@
             <path d="{{ path_best_fit(best_fit_points, vb_height) }}" stroke="gray" stroke-dasharray="2,1" fill="none"
                 stroke-opacity="60%" />
         </svg>
-        <div class="flex justify-center pt-2">
-            {% for plot in plots %}
-            <div class="flex items-center px-2 select-none cursor-pointer" _="on load put document.querySelector('#svg-plot-{{ unique_id }} g.{{plot.label}}') into my.plot_line
-            on click toggle .hidden on my.plot_line then toggle .line-through on me">
-                <div class="w-3 h-3 mr-1" style="background-color: {{ plot.color }};"></div>
-                <div class="text-xs">{{ plot.label }}</div>
-            </div>
+        {% if plots|length > 1  %} 
+            <div class="flex justify-center pt-2">
+                {% for plot in plots %}
+                <div class="flex items-center px-2 select-none cursor-pointer" 
+                _="on load put document.querySelector('#svg-plot-{{ unique_id }} g.{{plot.label}}') into my.plot_line
+                    on click toggle .hidden on my.plot_line then toggle .line-through on me">
+                    <div class="w-3 h-3 mr-1" style="background-color: {{ plot.color }};"></div>
+                    <div class="text-xs">{{ plot.label }}</div>
+                </div>
             {% endfor %}
-        </div>
+            </div>
+        {% endif %}
 
     </div>
\ No newline at end of file
diff --git a/utils.py b/utils.py
index 88b43b0..fd4da1e 100644
--- a/utils.py
+++ b/utils.py
@@ -412,12 +412,15 @@ def get_weekly_pr_graph_model(title, weekly_pr_data):
 
         values_scaled = [((value - min_value) / value_range) * vb_height for value in values]
         plot_points = list(zip(values_scaled, relative_positions))
+        messages = [f'{value} for {person_name} at {date.strftime("%d %b %y")}' for value, date in zip(values, pr_counts.keys())]
+        plot_labels = zip(values_scaled, relative_positions, messages)
 
         # Create a plot for each user
         plot = {
             'label': person_name,  # Use PersonName instead of User ID
             'color': colors[count],
-            'points': plot_points
+            'points': plot_points,
+            'plot_labels': plot_labels
         }
         plots.append(plot)