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

Fix forecast chart continuity and hover

Browse Source
This commit is contained in:
Peter Stockings
2026-09-06 13:59:50 +10:00
parent e2c4196792
commit cada28b54b
2 changed files with 41 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/partials/sparkline.html
+27 -11
View File
@@ -19,8 +19,8 @@
{% macro path_band(lower_points, upper_points, vb_height) %}
{% if lower_points and upper_points %}
M{% for value, position in lower_points %}{{ (position * vb_width)+margin | int }} {{ (vb_height - value)+margin | int }}{% if not loop.last %} L{% endif %}{% endfor %}
{% for value, position in upper_points|reverse %} L{{ (position * vb_width)+margin | int }} {{ (vb_height - value)+margin | int }}{% endfor %} Z
M{% for value, position in lower_points %}{{ (((position * vb_width) + margin) | int) }} {{ (((vb_height - value) + margin) | int) }}{% if not loop.last %} L{% endif %}{% endfor %}
{% for value, position in upper_points|reverse %} L{{ (((position * vb_width) + margin) | int) }} {{ (((vb_height - value) + margin) | int) }}{% endfor %} Z
{% endif %}
{% endmacro %}
@@ -30,7 +30,16 @@ M{% for value, position in lower_points %}{{ (position * vb_width)+margin | int
{% set y = (vb_height - value)+margin %}
<circle cx="{{ x | int }}" cy="{{ y | int }}" r="1"></circle>
{% endfor %}
{% endmacro %}
{% endmacro %}
{% macro forecast_circles(data_points, labels, color) %}
{% for value, position in data_points %}
{% set x = (position * vb_width)+margin %}
{% set y = (vb_height - value)+margin %}
<circle cx="{{ x | int }}" cy="{{ y | int }}" r="1.6" fill="{{ color }}" stroke="{{ color }}"
class="pnt-{{ unique_id }}" data-msg="{{ labels[loop.index0][1] }}"></circle>
{% endfor %}
{% endmacro %}
{% macro plot_line(points, color) %}
<path d="{{ path(points, vb_height) }}" stroke="{{ color }}" fill="none" />
@@ -224,10 +233,10 @@ M{% for value, position in lower_points %}{{ (position * vb_width)+margin | int
{% endif %}
<svg viewBox="0 0 {{ (vb_width + 2*margin) | int }} {{ (vb_height + 2*margin) | int }}" preserveAspectRatio="none">
{% if forecast_enabled and forecast.available %}
<path d="{{ path_band(forecast_band_lower, forecast_band_upper, vb_height) }}" fill="#10b981" fill-opacity="0.14" stroke="none"></path>
<path d="{{ path(forecast_points, vb_height) }}" stroke="#059669" stroke-width="1.5" stroke-dasharray="4,3" fill="none"></path>
{{ circles(forecast_points, '#059669') }}
<line x1="{{ (forecast_start_position * vb_width)+margin | int }}" y1="{{ margin }}" x2="{{ (forecast_start_position * vb_width)+margin | int }}" y2="{{ vb_height + margin }}" stroke="#059669" stroke-width="0.8" stroke-dasharray="2,2" stroke-opacity="0.7"></line>
<path d="{{ path_band(forecast_band_lower, forecast_band_upper, vb_height) }}" fill="#10b981" fill-opacity="0.10" stroke="none"></path>
<path d="{{ path(forecast_points, vb_height) }}" stroke="#059669" stroke-width="2" stroke-dasharray="5,3" fill="none"></path>
{{ forecast_circles(forecast_points, forecast_labels, '#059669') }}
<line x1="{{ ((forecast_start_position * vb_width) + margin) | int }}" y1="{{ margin }}" x2="{{ ((forecast_start_position * vb_width) + margin) | int }}" y2="{{ vb_height + margin }}" stroke="#059669" stroke-width="0.8" stroke-dasharray="2,2" stroke-opacity="0.5"></line>
{% endif %}
{% for plot in plots %}
<g class="{{ plot.label }}" style="fill: {{ plot.color }}; stroke: {{ plot.color }};">
@@ -236,15 +245,22 @@ M{% for value, position in lower_points %}{{ (position * vb_width)+margin | int
{% endfor %}
<g style="fill-opacity: 0%">
{% for pos, message in plot_labels %}
{% for pos, message in plot_labels %}
{% set x = (pos * vb_width) - (stroke_width/2) + margin %}
{% set y = 0 %}
{% set width = stroke_width %}
{% set height = vb_height + margin %}
<rect x="{{ x | int }}" y="{{ y | int }}" width="{{ width | int }}" height="{{ height | int }}"
class="pnt-{{ unique_id }}" data-msg="{{ message }}"></rect>
{% endfor %}
</g>
class="pnt-{{ unique_id }}" data-msg="{{ message }}"></rect>
{% endfor %}
{% if forecast_enabled and forecast.available %}
{% for pos, message in forecast_labels %}
{% set x = (pos * vb_width) - (stroke_width/2) + margin %}
<rect x="{{ x | int }}" y="0" width="{{ stroke_width | int }}" height="{{ (vb_height + margin) | int }}"
class="pnt-{{ unique_id }}" data-msg="{{ message }}"></rect>
{% endfor %}
{% endif %}
</g>
<path d="{{ path_best_fit(best_fit_points, vb_height) }}" stroke="gray" stroke-dasharray="2,1" fill="none"
stroke-opacity="60%" />