In svg graph convert all numeric attributes to integers to reduce size, 13.9KB - 12.6KB

This commit is contained in:
Peter Stockings
2023-12-09 21:25:48 +11:00
parent 81d674d650
commit 06844fa5b0

View File

@@ -1,12 +1,11 @@
{% set stroke_width = 4 %} {% set stroke_width = 4 %}
{% set margin = 2 %} {% set margin = 2 %}
{% set precision = 1 %}
{% macro path(data_points, vb_height) %} {% macro path(data_points, vb_height) %}
{% for value, position, message in data_points %} {% for value, position, message in data_points %}
{% set x = (position * vb_width)+margin %} {% set x = (position * vb_width)+margin %}
{% set y = (vb_height - value)+margin %} {% set y = (vb_height - value)+margin %}
{% if loop.first %}M{{ x | round(precision) }} {{ y | round(precision) }}{% else %} L{{ x | round(precision) }} {{ y | round(precision) }}{% endif %} {% if loop.first %}M{{ x | int }} {{ y | int }}{% else %} L{{ x | int }} {{ y | int }}{% endif %}
{% endfor %} {% endfor %}
{% endmacro %} {% endmacro %}
@@ -14,7 +13,7 @@
{% for value, position in best_fit_points %} {% for value, position in best_fit_points %}
{% set x = (position * vb_width)+margin %} {% set x = (position * vb_width)+margin %}
{% set y = (vb_height - value)+margin %} {% set y = (vb_height - value)+margin %}
{% if loop.first %}M{{ x | round(precision) }} {{ y | round(precision) }}{% else %} L{{ x | round(precision) }} {{ y | round(precision) }}{% endif %} {% if loop.first %}M{{ x | int }} {{ y | int }}{% else %} L{{ x | int }} {{ y | int }}{% endif %}
{% endfor %} {% endfor %}
{% endmacro %} {% endmacro %}
@@ -22,7 +21,7 @@
{% for value, position, message in data_points %} {% for value, position, message in data_points %}
{% set x = (position * vb_width)+margin %} {% set x = (position * vb_width)+margin %}
{% set y = (vb_height - value)+margin %} {% set y = (vb_height - value)+margin %}
<circle cx="{{ x | round(precision) }}" cy="{{ y | round(precision) }}" r="1"></circle> <circle cx="{{ x | int }}" cy="{{ y | int }}" r="1"></circle>
{% endfor %} {% endfor %}
{% endmacro %} {% endmacro %}
@@ -48,7 +47,7 @@
<!-- Popover content will be dynamically inserted here --> <!-- Popover content will be dynamically inserted here -->
</div> </div>
<h4 class="text-l font-semibold text-blue-400 mb-2 text-center">{{ exercise_name }}</h4> <h4 class="text-l font-semibold text-blue-400 mb-2 text-center">{{ exercise_name }}</h4>
<svg viewBox="0 0 {{ vb_width + 4 }} {{ vb_height + 4 }}" preserveAspectRatio="none"> <svg viewBox="0 0 {{ (vb_width + 2*margin) | int }} {{ (vb_height + 2*margin) | int }}" preserveAspectRatio="none">
<path d="{{ path_best_fit(best_fit_points, vb_height) }}" stroke="gray" stroke-dasharray="2,1" fill="none" stroke-opacity="40%"/> <path d="{{ path_best_fit(best_fit_points, vb_height) }}" stroke="gray" stroke-dasharray="2,1" fill="none" stroke-opacity="40%"/>
{% for plot in plots %} {% for plot in plots %}
<g class="{{ plot.label }}" style="fill: {{ plot.color }}; stroke: {{ plot.color }};"> <g class="{{ plot.label }}" style="fill: {{ plot.color }}; stroke: {{ plot.color }};">
@@ -62,10 +61,10 @@
{% set width = stroke_width %} {% set width = stroke_width %}
{% set height = vb_height + margin %} {% set height = vb_height + margin %}
<rect <rect
x="{{ x | round(precision) }}" x="{{ x | int }}"
y="{{ y | round(precision) }}" y="{{ y | int }}"
width="{{ width | round(precision) }}" width="{{ width | int }}"
height="{{ height | round(precision) }}" height="{{ height | int }}"
class="plot_point" class="plot_point"
data-message="{{ message }}" data-message="{{ message }}"
fill-opacity="0%"></rect> fill-opacity="0%"></rect>