42 lines
1.6 KiB
HTML
42 lines
1.6 KiB
HTML
{% set fill = "#dcfce7" %}
|
|
{% set stroke = "#bbf7d0" %}
|
|
{% set stroke_width = 4 %}
|
|
{% set margin = 0 %} {# space allocated for axis labels and ticks #}
|
|
|
|
{% macro path(data_points, vb_height) %}
|
|
{% for value, position in data_points %}
|
|
{% set x = position * vb_width %}
|
|
{% set y = vb_height - value %}
|
|
{% if loop.first %}M{{ x }} {{ y }}{% else %} L{{ x }} {{ y }}{% endif %}
|
|
{% endfor %}
|
|
{% endmacro %}
|
|
|
|
{% macro circles(data_points, vb_height) %}
|
|
{% for value, position in data_points %}
|
|
{% set x = position * vb_width %}
|
|
{% set y = vb_height - value %}
|
|
<circle cx="{{ x }}" cy="{{ y }}" r="5" class="cursor-pointer" data-message="{{ position }} - {{ value }}" fill-opacity="0%"
|
|
_="on mouseover
|
|
put my @data-message into #popover
|
|
then remove .hidden from #popover
|
|
on mouseout
|
|
add .hidden to #popover">
|
|
</circle>
|
|
{% endfor %}
|
|
{% endmacro %}
|
|
|
|
{% macro closed_path(points, vb_width, vb_height) %}
|
|
{{ path(points, vb_width, vb_height) }} L {{ vb_width + 2*margin }} {{ vb_height + 2*margin }} L {{ 2*margin }} {{ vb_height + 2*margin }} Z
|
|
{% endmacro %}
|
|
|
|
|
|
<svg viewBox="0 0 {{ vb_width }} {{ vb_height }}" preserveAspectRatio="none">
|
|
|
|
<path d="{{ path(data_points, vb_height) }}" stroke="blue" fill="none" />
|
|
|
|
{{ circles(data_points, vb_height) }}
|
|
</svg>
|
|
|
|
<div id="popover" class="hidden bg-white border border-gray-300 p-2 z-10">
|
|
<!-- Popover content will be dynamically inserted here -->
|
|
</div> |