Files
blog/layouts/shortcodes/chart.html
2023-12-25 23:38:13 +01:00

56 lines
1.4 KiB
HTML

<div class="chart">
{{ $id := delimit (shuffle (seq 1 9)) "" }}
<canvas id="{{ $id }}"></canvas>
<script type="text/javascript">
window.addEventListener("DOMContentLoaded", (event) => {
const ctx = document.getElementById("{{ $id }}");
const chart = new Chart(ctx, {
{{ if eq (.Get "type") "timeseries" }}
type: 'line',
options: {
plugins: {
title: {
display: true,
text: {{ .Get "title" }},
},
},
scales: {
x: {
ticks: {
autoSkip: true,
callback: function(val, index) {
return this.getLabelForValue(val) + 's'
},
}
},
{{ if .Get "max" }}
y: {
stacked: {{ .Get "stacked" }},
beginAtZero: true,
suggestedMax: {{ .Get "max" }},
}
{{ end }}
},
},
data: {
labels: [
{{ if .Get "step" }}
{{ range seq 0 (.Get "step") 90 }}
{{ . }},
{{ end }}
{{ else }}
{{ range seq 0 90 }}
{{ . }},
{{ end }}
{{ end }}
],
datasets: {{ .Inner | safeJS }}
}
{{ else }}
{{ .Inner | safeJS }}
{{ end }}
});
});
</script>
</div>