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)
131 lines
3.7 KiB
HTML
131 lines
3.7 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>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>
|