39 lines
1.6 KiB
XML
39 lines
1.6 KiB
XML
{% macro x(n) -%}
|
|
{{ 15+((91-15)/(lines|length))*(n-1) }}%
|
|
{%- endmacro %}
|
|
<svg version="1.1"
|
|
baseProfile="full"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<style>
|
|
svg {
|
|
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 1 */
|
|
}
|
|
</style>
|
|
<g class="bg">
|
|
{% for n in scale %}
|
|
<line x1="10%" y1="{{ 16.6 * loop.index }}%" x2="96%" y2="{{ 16.6 * loop.index }}%" stroke="#ddd" stroke-width="2px" />
|
|
{% endfor %}
|
|
<line x1="10%" y1="{{ avg }}%" x2="96%" y2="{{ avg }}%" stroke="#89f393" stroke-width="2px" />
|
|
</g>
|
|
<g class="legend" style="font-size: 0.9em; text-align:right;">
|
|
{% for n in scale | reverse %}
|
|
<text x="10%" y="{{ 16.6 * (loop.index) }}%" style="text-anchor: end; font-weight: semibold" dx="-.6em" dy=".3em" fill="#aaa">{{ n }}</text>
|
|
{% endfor %}
|
|
</g>
|
|
<g class="lines">
|
|
{% for y1, y2 in lines %}
|
|
<line x1="{{ x(loop.index) }}" y1="{{ y1 }}%" x2="{{ x(loop.index + 1) }}" y2="{{ y2 }}%" stroke="#48bb78" stroke-width="3" />
|
|
{% endfor %}
|
|
</g>
|
|
<g class="dots">
|
|
{% for cy in dots %}
|
|
<circle cx="{{ x(loop.index) }}" cy="{{ cy }}%" r="4" stroke-width="0" fill="#2f855a" />
|
|
{% endfor %}
|
|
</g>
|
|
<g class="legend" style="font-size: 0.9em; text-anchor: middle">
|
|
{% for day in days %}
|
|
<text x="{{ x(loop.index) }}" y="95%" fill="#888">{{ day }}</text>
|
|
{% endfor %}
|
|
</g>
|
|
</svg>
|