diff options
| author | Martin Kagamino Lehoux <martin@lehoux.net> | 2025-09-30 07:32:46 +0200 |
|---|---|---|
| committer | Martin Kagamino Lehoux <martin@lehoux.net> | 2025-10-01 07:51:11 +0200 |
| commit | c847bfe08256de8baa9d005165b5831db1bbb08f (patch) | |
| tree | 96750224ec122265017760071d296d49a2a0cd08 /layouts/shortcodes/chart.html | |
| parent | 93f9a63642133681de10e390bcbf1e08bc7d4800 (diff) | |
Added charts & python snippets
Diffstat (limited to 'layouts/shortcodes/chart.html')
| -rw-r--r-- | layouts/shortcodes/chart.html | 34 |
1 files changed, 34 insertions, 0 deletions
diff --git a/layouts/shortcodes/chart.html b/layouts/shortcodes/chart.html new file mode 100644 index 0000000..69689cd --- /dev/null +++ b/layouts/shortcodes/chart.html @@ -0,0 +1,34 @@ +{{- $id := printf "chart-%d" (now.UnixNano) -}} +{{- $type := .Get "type" | default "bar" -}} +{{- $data := .Get "data" -}} +{{- $options := .Get "options" | default "{}" -}} + +<div class="chart-container mb-5"> + <canvas id="{{ $id }}"></canvas> +</div> + +<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> +<script> + document.addEventListener('DOMContentLoaded', function() { + const ctx = document.getElementById('{{ $id }}').getContext('2d'); + new Chart(ctx, { + type: '{{ $type }}', + data: {{ $data | safeJS }}, + options: Object.assign({ + responsive: true, + maintainAspectRatio: false, + plugins: { + legend: { position: 'top' } + } + }, {{ $options | safeJS }}) + }); + }); +</script> + +<style> + .chart-container { + position: relative; + height: 400px; + width: 100%; + } +</style> |