Files
blog/layouts/shortcodes/chart.html

59 lines
1.5 KiB
HTML

<div class="chart">
{{ $id := delimit (shuffle (seq 1 9)) "" }}
<canvas id="{{ $id }}" height="350"></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: {
maintainAspectRatio: false,
plugins: {
title: {
display: true,
text: {{ .Get "title" }},
},
},
scales: {
x: {
ticks: {
autoSkip: true,
callback: function(val, index) {
return this.getLabelForValue(val) + 's'
},
}
},
y: {
{{ if .Get "stacked" }}
stacked: {{ .Get "stacked" }},
{{ end }}
beginAtZero: true,
{{ if .Get "max" }}
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>