82 lines
2.3 KiB
HTML
82 lines
2.3 KiB
HTML
{{ $js := resources.Get "js/build_heatmap.js" }}
|
|
{{ $p := .Site.Params.heatmap }}
|
|
{{ $swapColors := true }}
|
|
{{ if isset $p "swap_colors" }}{{ $swapColors = $p.swap_colors }}{{ end }}
|
|
|
|
<style>
|
|
:root {
|
|
--color-empty: {{ $p.color_empty_dark }};
|
|
{{ if $swapColors }}
|
|
--color-l1: {{ $p.color_max }};
|
|
--color-l2: {{ $p.color_high }};
|
|
--color-l3: {{ $p.color_mid }};
|
|
--color-l4: {{ $p.color_low }};
|
|
{{ else }}
|
|
--color-l1: {{ $p.color_low }};
|
|
--color-l2: {{ $p.color_mid }};
|
|
--color-l3: {{ $p.color_high }};
|
|
--color-l4: {{ $p.color_max }};
|
|
{{ end }}
|
|
}
|
|
@media (prefers-color-scheme: light) {
|
|
:root {
|
|
--color-empty: {{ $p.color_empty_light }};
|
|
--color-l1: {{ $p.color_low }};
|
|
--color-l2: {{ $p.color_mid }};
|
|
--color-l3: {{ $p.color_high }};
|
|
--color-l4: {{ $p.color_max }};
|
|
}
|
|
}
|
|
#heatmap { overflow-x: auto; }
|
|
#heatmap text { font-family: inherit; fill: currentColor; }
|
|
#heatmap-caption {font-size: 0.8em; text-align: center; margin-top: 0px;}
|
|
#heatmap-footer {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: 0.75em;
|
|
margin-top: 4px;
|
|
}
|
|
#heatmap-legend { display: flex; align-items: center; gap: 4px; }
|
|
#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, totalCount, renderLegend} 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);
|
|
|
|
document.getElementById("contribution-count").textContent =
|
|
`${totalCount(counts)} contributions in the last year`;
|
|
|
|
const legendEl = document.getElementById("heatmap-legend");
|
|
legendEl.appendChild(document.createTextNode("Less"));
|
|
legendEl.appendChild(renderLegend());
|
|
legendEl.appendChild(document.createTextNode("More"));
|
|
</script>
|
|
|
|
<div id="heatmap-footer">
|
|
<span id="contribution-count"></span>
|
|
<span id="heatmap-legend"></span>
|
|
</div>
|
|
|
|
{{ with $p.caption }}
|
|
<p id="heatmap-caption"> {{ . | safeHTML }} </p>
|
|
{{ end }}
|
|
<div id="tooltip" class="hidden"></div>
|
|
|