asw-v01: archive deferred content (packs, site, lab, legacy examples)
- 2.1: packs/ -> archive/packs/ - 2.2: site/ -> archive/site/ - 2.3: src/lab/ -> archive/lab/ - 2.4: examples/ -> archive/examples-legacy/ (SSI-based)
This commit is contained in:
exe.dev user
parent
416fe2f180
commit
e47a9f4401
173 changed files with 11 additions and 5 deletions
118
archive/lab/charts/burndown.html
Normal file
118
archive/lab/charts/burndown.html
Normal file
|
|
@ -0,0 +1,118 @@
|
|||
<!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>
|
||||
22
archive/lab/charts/index.html
Normal file
22
archive/lab/charts/index.html
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!--#include virtual="/_include/head.html" -->
|
||||
<title>Chart Prototypes — ASW Lab</title>
|
||||
</head>
|
||||
<body>
|
||||
<!--#include virtual="/_include/nav.html" -->
|
||||
<main>
|
||||
<header>
|
||||
<h1>Chart Prototypes</h1>
|
||||
<p data-text="lead">Reference implementations. Both chart types are now production-ready in <code>agentic.css</code>.</p>
|
||||
</header>
|
||||
<ul>
|
||||
<li><a href="radial.html">Radial chart prototype</a> — <span data-text="dim">conic-gradient gauge, Murdock's working prototype before production impl</span></li>
|
||||
<li><a href="burndown.html">Burndown chart prototype</a> — <span data-text="dim">sprint burndown with CSS ideal-line overlay</span></li>
|
||||
</ul>
|
||||
<p><a href="/lab/" data-text="dim">← Lab</a></p>
|
||||
</main>
|
||||
<!--#include virtual="/_include/footer.html" -->
|
||||
</body>
|
||||
</html>
|
||||
131
archive/lab/charts/radial.html
Normal file
131
archive/lab/charts/radial.html
Normal file
|
|
@ -0,0 +1,131 @@
|
|||
<!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>Radial Chart Prototype — Murdock Lab</title>
|
||||
<style>
|
||||
body { padding: var(--size-8); }
|
||||
h1 { margin-block-end: var(--size-6); }
|
||||
.gauges {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--size-8);
|
||||
align-items: flex-start;
|
||||
margin-block-end: var(--size-8);
|
||||
}
|
||||
|
||||
/* ── Radial gauge — CSS-only, no JS ────────────────────────── */
|
||||
[data-chart="radial"] {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: var(--size-3);
|
||||
}
|
||||
|
||||
[data-chart="radial"] caption {
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-3);
|
||||
caption-side: bottom;
|
||||
padding-block-start: var(--size-2);
|
||||
}
|
||||
|
||||
[data-chart="radial"] tbody { display: flex; }
|
||||
[data-chart="radial"] tr { display: flex; }
|
||||
|
||||
/* The gauge circle */
|
||||
[data-chart="radial"] td {
|
||||
position: relative;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border-radius: 50%;
|
||||
background: conic-gradient(
|
||||
var(--color, var(--chart-color-1, #3fb950)) 0deg calc(var(--size, 0.5) * 360deg),
|
||||
var(--surface-1, #111111) 0deg
|
||||
);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text);
|
||||
padding: 0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* Donut hole */
|
||||
[data-chart="radial"] td::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 18px;
|
||||
border-radius: 50%;
|
||||
background: var(--surface, #0a0a0a);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
/* Value text centered in donut hole */
|
||||
[data-chart="radial"] td span {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
font-size: var(--text-xs);
|
||||
font-family: var(--font-mono);
|
||||
color: var(--text);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Color variants */
|
||||
[data-chart="radial"][data-status="warning"] td {
|
||||
background: conic-gradient(
|
||||
var(--accent-orange, #f08c00) 0deg calc(var(--size, 0.5) * 360deg),
|
||||
var(--surface-1, #111111) 0deg
|
||||
);
|
||||
}
|
||||
[data-chart="radial"][data-status="danger"] td {
|
||||
background: conic-gradient(
|
||||
var(--accent-red, #e03131) 0deg calc(var(--size, 0.5) * 360deg),
|
||||
var(--surface-1, #111111) 0deg
|
||||
);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>Radial Gauge — Prototype</h1>
|
||||
<p>CSS-only radial gauge. Uses <code>conic-gradient</code> + donut cutout via <code>::before</code>. No JavaScript.</p>
|
||||
|
||||
<div class="gauges">
|
||||
|
||||
<table data-chart="radial" style="--size: 0.72">
|
||||
<caption>Token budget used</caption>
|
||||
<tbody><tr><td><span>72%</span></td></tr></tbody>
|
||||
</table>
|
||||
|
||||
<table data-chart="radial" style="--size: 0.58">
|
||||
<caption>Issues resolved</caption>
|
||||
<tbody><tr><td><span>58%</span></td></tr></tbody>
|
||||
</table>
|
||||
|
||||
<table data-chart="radial" style="--size: 0.45" data-status="warning">
|
||||
<caption>Context consumed</caption>
|
||||
<tbody><tr><td><span>45%</span></td></tr></tbody>
|
||||
</table>
|
||||
|
||||
<table data-chart="radial" style="--size: 0.91" data-status="danger">
|
||||
<caption>Disk usage</caption>
|
||||
<tbody><tr><td><span>91%</span></td></tr></tbody>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
|
||||
<h2>Markup</h2>
|
||||
<pre><code><table data-chart="radial" style="--size: 0.72">
|
||||
<caption>Token budget used</caption>
|
||||
<tbody><tr><td><span>72%</span></td></tr></tbody>
|
||||
</table></code></pre>
|
||||
|
||||
<h2>Status variants</h2>
|
||||
<p>Add <code>data-status="warning"</code> or <code>data-status="danger"</code> for color override.</p>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue