36 lines
979 B
HTML
36 lines
979 B
HTML
{{ $js := resources.Get "js/build_heatmap.js" }}
|
|
{{ $p := .Site.Params.heatmap }}
|
|
|
|
<style>
|
|
:root {
|
|
--color-empty: {{ $p.color_empty }};
|
|
--color-low: {{ $p.color_low }};
|
|
--color-mid: {{ $p.color_mid }};
|
|
--color-high: {{ $p.color_high }};
|
|
}
|
|
#heatmap text { font-family: inherit; fill: inherit; }
|
|
#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>
|
|
<div id="tooltip" class="hidden"></div>
|
|
<div id="legend"></div>
|