43 lines
1.9 KiB
HTML
43 lines
1.9 KiB
HTML
|
{{define "title"}}Timeline — Talas Wiki{{end}}
|
||
|
|
|
||
|
|
{{define "content"}}
|
||
|
|
<div class="breadcrumb"><a href="/">/</a> / <span>timeline</span></div>
|
||
|
|
<h1>Timeline d'activite</h1>
|
||
|
|
<p class="subtitle">Modifications par jour sur les 90 derniers jours.</p>
|
||
|
|
<div id="timeline-container" style="margin-top:16px;border:1px solid var(--border);background:var(--bg-alt);padding:16px;overflow-x:auto"></div>
|
||
|
|
{{end}}
|
||
|
|
|
||
|
|
{{define "scripts"}}
|
||
|
|
<script src="https://d3js.org/d3.v7.min.js"></script>
|
||
|
|
<script>
|
||
|
|
fetch('/api/timeline').then(function(r){return r.json()}).then(function(data){
|
||
|
|
var container = document.getElementById('timeline-container');
|
||
|
|
var cellSize = 14, gap = 2, cols = data.length;
|
||
|
|
var width = Math.max(cols * (cellSize + gap), container.offsetWidth);
|
||
|
|
var height = cellSize + 40;
|
||
|
|
|
||
|
|
var svg = d3.select('#timeline-container').append('svg').attr('width', width).attr('height', height);
|
||
|
|
var maxCount = d3.max(data, function(d){return d.count}) || 1;
|
||
|
|
|
||
|
|
var color = d3.scaleLinear().domain([0, maxCount]).range(['#1a1a2e', '#a3be8c']);
|
||
|
|
|
||
|
|
svg.selectAll('rect').data(data).enter().append('rect')
|
||
|
|
.attr('x', function(d,i){ return (cols - 1 - i) * (cellSize + gap); })
|
||
|
|
.attr('y', 0).attr('width', cellSize).attr('height', cellSize).attr('rx', 2)
|
||
|
|
.attr('fill', function(d){ return d.count > 0 ? color(d.count) : '#1a1a2e'; })
|
||
|
|
.attr('stroke', '#2e3440').attr('stroke-width', 0.5)
|
||
|
|
.append('title').text(function(d){ return d.date + ': ' + d.count + ' pages'; });
|
||
|
|
|
||
|
|
// Date labels
|
||
|
|
data.forEach(function(d, i) {
|
||
|
|
if (i % 7 === 0) {
|
||
|
|
svg.append('text').attr('x', (cols - 1 - i) * (cellSize + gap))
|
||
|
|
.attr('y', cellSize + 16).attr('font-size', 8).attr('fill', '#4c566a')
|
||
|
|
.attr('font-family', 'JetBrains Mono, monospace')
|
||
|
|
.text(d.date.substring(5));
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
{{end}}
|