AnthoLume/notes/graph.svg
Evan Reichard e6ad51ed70
All checks were successful
continuous-integration/drone/push Build is passing
[add] cleanup and minify
2023-11-04 12:27:35 -04:00

75 lines
1.8 KiB
XML

{{ $data := (GetSVGGraphData .Data.GraphData 800 150 )}}
<svg viewBox="0 0 {{ $data.Width }} {{ $data.Height }}">
<!-- Box Graph -->
{{ range $idx, $item := $data.BarPoints }}
<g class="bar" transform="translate({{ $item.X }}, 0)" fill="gray">
<rect
y="{{ $item.Y }}"
height="{{ $item.Size }}"
width="{{ $data.Offset }}"
></rect>
</g>
{{ end }}
<!-- Linear Line Graph -->
<polyline
fill="none"
stroke="black"
stroke-width="2"
points="
{{ range $item := $data.LinePoints }}
{{ $item.X }},{{ $item.Y }}
{{ end }}
"
/>
<!-- Bezier Line Graph -->
<path
fill="#316BBE"
fill-opacity="0.5"
stroke="none"
d="{{ $data.BezierPath }} {{ $data.BezierFill }}"
/>
<path fill="none" stroke="#316BBE" d="{{ $data.BezierPath }}" />
{{ range $index, $item := $data.LinePoints }}
<line
class="hover-trigger"
stroke="black"
stroke-opacity="0.0"
stroke-width="{{ $data.Offset }}"
x1="{{ $item.X }}"
x2="{{ $item.X }}"
y1="0"
y2="{{ $data.Height }}"
></line>
<g class="hover-item">
<line
class="text-black dark:text-white"
stroke-opacity="0.2"
x1="{{ $item.X }}"
x2="{{ $item.X }}"
y1="30"
y2="{{ $data.Height }}"
></line>
<text
class="text-black dark:text-white"
alignment-baseline="middle"
transform="translate({{ $item.X }}, 5) translate(-30, 8)"
font-size="10"
>
{{ (index $.Data.GraphData $index).Date }}
</text>
<text
class="text-black dark:text-white"
alignment-baseline="middle"
transform="translate({{ $item.X }}, 25) translate(-30, -2)"
font-size="10"
>
{{ (index $.Data.GraphData $index).MinutesRead }} minutes
</text>
</g>
{{ end }}
</svg>