peterstockings/workout
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add interactivity to recently created graphs, this time using circles for interactivity

Browse Source
This commit is contained in:
Peter Stockings
2023-12-11 21:38:52 +11:00
parent e93c92a452
commit 197f7bcf6b
2 changed files with 28 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
templates/partials/svg_line_graph.html
View File

@@ -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>

5
utils.py
View File

@@ -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)