e47a9f4401
- 2.1: packs/ -> archive/packs/ - 2.2: site/ -> archive/site/ - 2.3: src/lab/ -> archive/lab/ - 2.4: examples/ -> archive/examples-legacy/ (SSI-based)
118 lines
4.3 KiB
HTML
118 lines
4.3 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="stylesheet" href="/asw.css">
|
|
<title>Burndown Chart Prototype — Murdock Lab</title>
|
|
<style>
|
|
body { padding: var(--size-8); }
|
|
|
|
/* ── Burndown chart — column variant with ideal-line overlay ── */
|
|
[data-chart="burndown"] tbody {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: flex-end;
|
|
block-size: var(--chart-height, 200px);
|
|
border-block-end: 2px solid var(--border);
|
|
position: relative;
|
|
gap: 4px;
|
|
}
|
|
|
|
/* Ideal-line overlay: diagonal gradient from top-left to bottom-right
|
|
In a burndown, work starts high and should decrease to zero.
|
|
The ideal line goes from 100% remaining (top of chart, first day)
|
|
to 0% remaining (bottom, last day) — so bottom-left to top-right is wrong.
|
|
The gradient runs: top-left = transparent (ideal is 100% work remaining)
|
|
to bottom-right = solid (ideal is 0% work remaining = done).
|
|
We invert: the line shows WHERE YOU SHOULD BE, not what you have. */
|
|
[data-chart="burndown"] tbody::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(
|
|
to bottom right,
|
|
color-mix(in oklch, var(--accent-blue, #4dabf7), transparent 20%) 0%,
|
|
transparent 100%
|
|
);
|
|
pointer-events: none;
|
|
z-index: 2;
|
|
}
|
|
|
|
[data-chart="burndown"] tr {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
flex: 1;
|
|
block-size: 100%;
|
|
}
|
|
|
|
[data-chart="burndown"] td {
|
|
display: block;
|
|
inline-size: 100%;
|
|
block-size: calc(var(--chart-height, 200px) * var(--size, 0.5));
|
|
background: var(--accent-red, #e03131);
|
|
border-radius: var(--radius-2) var(--radius-2) 0 0;
|
|
opacity: 0.75;
|
|
order: 1;
|
|
position: relative;
|
|
z-index: 1;
|
|
transition: opacity 0.15s ease;
|
|
padding: 0;
|
|
border: none;
|
|
color: transparent;
|
|
}
|
|
|
|
[data-chart="burndown"] td:hover { opacity: 1; }
|
|
|
|
[data-chart="burndown"] th[scope="row"] {
|
|
font-size: var(--text-xs);
|
|
color: var(--text-3);
|
|
font-weight: 400;
|
|
order: 2;
|
|
padding-block-start: var(--size-2);
|
|
text-align: center;
|
|
padding: 0;
|
|
margin-block-start: var(--size-2);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<h1>Burndown Chart — Prototype</h1>
|
|
<p>Sprint burndown chart. Red bars = remaining work. Blue diagonal gradient = ideal burn rate. CSS-only, no JavaScript.</p>
|
|
|
|
<table data-chart="burndown" style="--chart-height: 240px">
|
|
<caption>Sprint 3 burndown — 20 issues over 10 days</caption>
|
|
<tbody>
|
|
<tr><th scope="row">D1</th><td style="--size: 0.95">19</td></tr>
|
|
<tr><th scope="row">D2</th><td style="--size: 0.85">17</td></tr>
|
|
<tr><th scope="row">D3</th><td style="--size: 0.75">15</td></tr>
|
|
<tr><th scope="row">D4</th><td style="--size: 0.60">12</td></tr>
|
|
<tr><th scope="row">D5</th><td style="--size: 0.55">11</td></tr>
|
|
<tr><th scope="row">D6</th><td style="--size: 0.40">8</td></tr>
|
|
<tr><th scope="row">D7</th><td style="--size: 0.35">7</td></tr>
|
|
<tr><th scope="row">D8</th><td style="--size: 0.20">4</td></tr>
|
|
<tr><th scope="row">D9</th><td style="--size: 0.10">2</td></tr>
|
|
<tr><th scope="row">D10</th><td style="--size: 0.05">1</td></tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<h2>Markup</h2>
|
|
<pre><code><table data-chart="burndown">
|
|
<caption>Sprint burndown</caption>
|
|
<tbody>
|
|
<tr><th scope="row">D1</th><td style="--size: 0.95">19</td></tr>
|
|
<tr><th scope="row">D2</th><td style="--size: 0.85">17</td></tr>
|
|
<!-- ... -->
|
|
</tbody>
|
|
</table></code></pre>
|
|
|
|
<h2>The ideal line</h2>
|
|
<p>The blue diagonal is a <code>linear-gradient</code> on <code>tbody::after</code>. It represents ideal burn rate: if the team burns at constant velocity, the remaining work should trace this diagonal. Where red bars are ABOVE the line, the team is behind. Where bars are BELOW, they are ahead.</p>
|
|
|
|
<p>The prototype shows a healthy sprint: the team started slightly slow (D1-D4 above line) but recovered by D5-D10.</p>
|
|
|
|
</body>
|
|
</html>
|