46 lines
1.2 KiB
HTML
46 lines
1.2 KiB
HTML
{{ $js := resources.Get "js/build_heatmap.js" }}
|
|
{{ $p := .Site.Params.heatmap }}
|
|
|
|
<style>
|
|
:root {
|
|
--color-empty: {{ $p.color_empty_dark }};
|
|
--color-low: {{ $p.color_low }};
|
|
--color-mid: {{ $p.color_mid }};
|
|
--color-high: {{ $p.color_high }};
|
|
}
|
|
@media (prefers-color-scheme: light) {
|
|
:root {
|
|
--color-empty: {{ $p.color_empty_light }};
|
|
}
|
|
}
|
|
#heatmap { overflow-x: auto; }
|
|
#heatmap text { font-family: inherit; fill: currentColor; }
|
|
#heatmap-caption {font-size: 0.8em; text-align: center; margin-top: 0px;}
|
|
#tooltip {
|
|
position: fixed;
|
|
background: #333;
|
|
color: white;
|
|
padding: 5px 10px;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
pointer-events: none;
|
|
}
|
|
.hidden { display: none; }
|
|
</style>
|
|
|
|
<div id="heatmap"></div>
|
|
<script type="module">
|
|
import {flattenData, constructWeeks, render, setupTooltips} from "{{ $js.RelPermalink }}"
|
|
|
|
const data = await fetch("/activity.json").then((r) => r.json());
|
|
const counts = flattenData(data);
|
|
const weeks = constructWeeks();
|
|
const svg = render(weeks, counts);
|
|
document.getElementById("heatmap").appendChild(svg);
|
|
setupTooltips(svg);
|
|
</script>
|
|
{{ with $p.caption }}
|
|
<p id="heatmap-caption"> {{ . | safeHTML }} </p>
|
|
{{ end }}
|
|
<div id="tooltip" class="hidden"></div>
|
|
|