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
156
archive/examples-legacy/charts/amy-field-intelligence.html
Normal file
156
archive/examples-legacy/charts/amy-field-intelligence.html
Normal file
|
|
@ -0,0 +1,156 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!--#include virtual="/_include/head.html" -->
|
||||
<title>Field Intelligence Report — ASW Examples</title>
|
||||
<meta name="description" content="Investigative data analysis —
|
||||
multi-series column with labels, source reliability bar, activity area
|
||||
chart">
|
||||
</head>
|
||||
<body>
|
||||
<!--#include virtual="/_include/nav.html" -->
|
||||
|
||||
<main>
|
||||
<header>
|
||||
<h1>Field Intelligence Report</h1>
|
||||
<p data-text="lead">Investigative data analysis — multi-series
|
||||
column with labels, source reliability bar, activity area chart</p>
|
||||
</header>
|
||||
|
||||
<p>This report documents signal intercept patterns across Q1 2026. Charts are used as analytical instruments — each answers a specific question about the data. Combined, they outline what happened, who was responsible, and how the trend evolved.</p>
|
||||
|
||||
<div data-layout="stats">
|
||||
<div>
|
||||
<span data-stat="value">247</span>
|
||||
<span data-stat="label">Intercepts analyzed</span>
|
||||
</div>
|
||||
<div>
|
||||
<span data-stat="value">6</span>
|
||||
<span data-stat="label">Source networks</span>
|
||||
</div>
|
||||
<div>
|
||||
<span data-stat="value">91%</span>
|
||||
<span data-stat="label">Verification rate</span>
|
||||
</div>
|
||||
<div>
|
||||
<span data-stat="value">3</span>
|
||||
<span data-stat="label">Priority findings</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Intercepts by category</h2>
|
||||
|
||||
<p>Column chart with <code>data-chart-labels</code> active. The thead row becomes visible axis labels. Three categories tracked across January, February, and March — each row in tbody is one category's monthly readings.</p>
|
||||
|
||||
<table data-chart="column" data-chart-labels style="--chart-height: 200px">
|
||||
<caption>Signal intercepts by category — Q1 2026</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Jan</th>
|
||||
<th scope="col">Feb</th>
|
||||
<th scope="col">Mar</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">Communication</th>
|
||||
<td style="--size: 0.55">55</td>
|
||||
<td style="--size: 0.80">80</td>
|
||||
<td style="--size: 1.0">100</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Electronic</th>
|
||||
<td style="--size: 0.30">30</td>
|
||||
<td style="--size: 0.45">45</td>
|
||||
<td style="--size: 0.60">60</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Human</th>
|
||||
<td style="--size: 0.20">20</td>
|
||||
<td style="--size: 0.28">28</td>
|
||||
<td style="--size: 0.34">34</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p data-text="dim">Communication intercepts nearly doubled January to March. Electronic and human sources grew at slower but consistent rates.</p>
|
||||
|
||||
<div data-callout="note">
|
||||
<span data-callout-title>Key finding</span>
|
||||
<p>The acceleration in communication intercepts from February to March (+25%) coincides with increased operational tempo in target areas. Human source reporting lagged by approximately three weeks — consistent with field handler cycles.</p>
|
||||
</div>
|
||||
|
||||
<h2>Source reliability ranking</h2>
|
||||
|
||||
<p>Bar chart with <code>data-chart-labels</code>. Six source networks ranked by verified accuracy score over Q1. Labels active on both axes — row labels name the source, column header labels would appear if thead were present. Per-row color overrides mark the two highest-reliability sources.</p>
|
||||
|
||||
<table data-chart="bar" data-chart-labels data-chart-spacing="3">
|
||||
<caption>Source reliability score — Q1 2026 (0–100)</caption>
|
||||
<tbody>
|
||||
<!-- max=94, SIGINT-Alpha -->
|
||||
<tr style="--color: var(--accent)">
|
||||
<th scope="row">SIGINT-Alpha</th>
|
||||
<td style="--size: 1.0" data-value="94">94</td>
|
||||
</tr>
|
||||
<tr style="--color: var(--accent)">
|
||||
<th scope="row">HUMINT-Bravo</th>
|
||||
<td style="--size: 0.915" data-value="86">86</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">OSINT-Charlie</th>
|
||||
<td style="--size: 0.798" data-value="75">75</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">ELINT-Delta</th>
|
||||
<td style="--size: 0.734" data-value="69">69</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">IMINT-Echo</th>
|
||||
<td style="--size: 0.617" data-value="58">58</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">MASINT-Foxtrot</th>
|
||||
<td style="--size: 0.511" data-value="48">48</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p data-text="dim">SIGINT-Alpha and HUMINT-Bravo marked in green — both cleared for high-confidence reporting. Remaining sources require corroboration before intelligence product.</p>
|
||||
|
||||
<h2>Activity trend — 8-week arc</h2>
|
||||
|
||||
<p>Area chart tracing cumulative signal activity from week 1 through week 8 of Q1. The fill below the line makes the rising trend immediately legible — area charts are well-suited to showing how something builds over time.</p>
|
||||
|
||||
<table data-chart="area" style="--chart-height: 180px">
|
||||
<caption>Signal activity volume — weeks 1–8, Q1 2026</caption>
|
||||
<tbody>
|
||||
<tr><th scope="row">Wk 1</th><td style="--size: 0.18">18</td></tr>
|
||||
<tr><th scope="row">Wk 2</th><td style="--size: 0.24">24</td></tr>
|
||||
<tr><th scope="row">Wk 3</th><td style="--size: 0.31">31</td></tr>
|
||||
<tr><th scope="row">Wk 4</th><td style="--size: 0.45">45</td></tr>
|
||||
<tr><th scope="row">Wk 5</th><td style="--size: 0.52">52</td></tr>
|
||||
<tr><th scope="row">Wk 6</th><td style="--size: 0.68">68</td></tr>
|
||||
<tr><th scope="row">Wk 7</th><td style="--size: 0.84">84</td></tr>
|
||||
<tr><th scope="row">Wk 8</th><td style="--size: 1.0">100</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p data-text="dim">Volume increased 5.5× from week 1 to week 8. The acceleration is consistent — no anomalous spike, suggesting systematic increase in monitored activity rather than a single triggering event.</p>
|
||||
|
||||
<h2>Chart patterns used</h2>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Chart</th><th>Attribute</th><th>What it shows</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>Column + labels</td><td><code>data-chart="column" data-chart-labels</code></td><td>Multi-series monthly data with visible axis</td></tr>
|
||||
<tr><td>Bar + labels + color</td><td><code>data-chart="bar" data-chart-labels</code> + <code>style="--color: ..."</code></td><td>Ranked comparison with highlighted outliers</td></tr>
|
||||
<tr><td>Area</td><td><code>data-chart="area"</code></td><td>Trend accumulation over time</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</main>
|
||||
|
||||
<!--#include virtual="/_include/footer.html" -->
|
||||
</body>
|
||||
</html>
|
||||
156
archive/examples-legacy/charts/ba-build-metrics.html
Normal file
156
archive/examples-legacy/charts/ba-build-metrics.html
Normal file
|
|
@ -0,0 +1,156 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!--#include virtual="/_include/head.html" -->
|
||||
<title>Build Pipeline Metrics — ASW Examples</title>
|
||||
<meta name="description" content="CI/CD pipeline performance — build
|
||||
time breakdown, weekly success rate, failure counts by repo">
|
||||
</head>
|
||||
<body>
|
||||
<!--#include virtual="/_include/nav.html" -->
|
||||
|
||||
<main>
|
||||
<header>
|
||||
<h1>Build Pipeline Metrics</h1>
|
||||
<p data-text="lead">CI/CD pipeline performance — build time
|
||||
breakdown, weekly success rate, failure counts by repo</p>
|
||||
</header>
|
||||
|
||||
<hgroup>
|
||||
<h1>Build Pipeline Metrics — CI/CD Performance</h1>
|
||||
<p>Ten weeks of pipeline data across five repos. No theories. Just results.</p>
|
||||
</hgroup>
|
||||
|
||||
<div data-layout="stats">
|
||||
<div>
|
||||
<span data-stat="value">5</span>
|
||||
<span data-stat="label">Repos tracked</span>
|
||||
</div>
|
||||
<div>
|
||||
<span data-stat="value">94%</span>
|
||||
<span data-stat="label">Avg success rate</span>
|
||||
</div>
|
||||
<div>
|
||||
<span data-stat="value">120s</span>
|
||||
<span data-stat="label">Longest build</span>
|
||||
</div>
|
||||
<div>
|
||||
<span data-stat="value">32</span>
|
||||
<span data-stat="label">Failures (10 wk)</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section>
|
||||
<h2>Build time breakdown</h2>
|
||||
<p>Seconds per phase across all tracked repos — compile, test, deploy. Max is 120s (agentic-semantic-web). Test dominates every build. That's expected. Don't cut your test suite to make this chart look better.</p>
|
||||
|
||||
<table data-chart="bar" data-chart-stacked>
|
||||
<caption>Build time breakdown — seconds per phase (max 120s)</caption>
|
||||
<thead>
|
||||
<tr><th></th><th>Compile</th><th>Test</th><th>Deploy</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- max=120s. --size per segment = seconds / 120. totals must sum ≤ 1.0 -->
|
||||
<tr>
|
||||
<th scope="row">agentic-semantic-web</th>
|
||||
<td style="--size: 0.175" data-value="21s">21s</td>
|
||||
<td style="--size: 0.667" data-value="80s">80s</td>
|
||||
<td style="--size: 0.158" data-value="19s">19s</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">api-gateway</th>
|
||||
<td style="--size: 0.100" data-value="12s">12s</td>
|
||||
<td style="--size: 0.542" data-value="65s">65s</td>
|
||||
<td style="--size: 0.183" data-value="22s">22s</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">trentuna-web</th>
|
||||
<td style="--size: 0.150" data-value="18s">18s</td>
|
||||
<td style="--size: 0.458" data-value="55s">55s</td>
|
||||
<td style="--size: 0.125" data-value="15s">15s</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">commons</th>
|
||||
<td style="--size: 0.125" data-value="15s">15s</td>
|
||||
<td style="--size: 0.375" data-value="45s">45s</td>
|
||||
<td style="--size: 0.100" data-value="12s">12s</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">vault</th>
|
||||
<td style="--size: 0.067" data-value="8s">8s</td>
|
||||
<td style="--size: 0.250" data-value="30s">30s</td>
|
||||
<td style="--size: 0.083" data-value="10s">10s</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p data-text="dim">Segment totals: asw 120s · api-gateway 99s · trentuna-web 88s · commons 72s · vault 48s</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Weekly build success rate</h2>
|
||||
<p>Percentage of successful builds per week over the last ten weeks. Week 8 hit 100%. That's the target. Everything else is noise telling you where to look.</p>
|
||||
|
||||
<table data-chart="column" data-chart-spacing="1" style="--chart-height: 200px">
|
||||
<caption>Build success rate — weeks 1–10 (max 100%)</caption>
|
||||
<tbody>
|
||||
<!-- max=100%, Week 8 -->
|
||||
<tr><th scope="row">W1</th><td style="--size: 0.94">94%</td></tr>
|
||||
<tr><th scope="row">W2</th><td style="--size: 0.88">88%</td></tr>
|
||||
<tr><th scope="row">W3</th><td style="--size: 0.91">91%</td></tr>
|
||||
<tr><th scope="row">W4</th><td style="--size: 0.78">78%</td></tr>
|
||||
<tr><th scope="row">W5</th><td style="--size: 0.95">95%</td></tr>
|
||||
<tr><th scope="row">W6</th><td style="--size: 0.82">82%</td></tr>
|
||||
<tr><th scope="row">W7</th><td style="--size: 0.96">96%</td></tr>
|
||||
<tr><th scope="row">W8</th><td style="--size: 1.00">100%</td></tr>
|
||||
<tr><th scope="row">W9</th><td style="--size: 0.89">89%</td></tr>
|
||||
<tr><th scope="row">W10</th><td style="--size: 0.97">97%</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p data-text="dim">W4 dip: flaky integration test on api-gateway, fixed W5. W6 dip: deploy timeout regression, fixed W7.</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Failure count by repo</h2>
|
||||
<p>Total build failures over the last ten weeks. Two repos are over the acceptable threshold. They're marked. Fix them.</p>
|
||||
|
||||
<div data-callout="warning">
|
||||
<strong>api-gateway and agentic-semantic-web are above threshold.</strong>
|
||||
Both repos averaged more than one failure per week. api-gateway has the most — 14 failures in 10 weeks. That's not a fluke. That's a structural problem.
|
||||
</div>
|
||||
|
||||
<table data-chart="bar">
|
||||
<caption>Build failures — last 10 weeks (max 14, api-gateway)</caption>
|
||||
<tbody>
|
||||
<!-- max=14. --size = failures / 14. Red rows = above threshold (>7 failures) -->
|
||||
<tr style="--color: var(--accent-red)">
|
||||
<th scope="row">api-gateway</th>
|
||||
<td style="--size: 1.000" data-value="14">14</td>
|
||||
</tr>
|
||||
<tr style="--color: var(--accent-red)">
|
||||
<th scope="row">agentic-semantic-web</th>
|
||||
<td style="--size: 0.643" data-value="9">9</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">trentuna-web</th>
|
||||
<td style="--size: 0.357" data-value="5">5</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">commons</th>
|
||||
<td style="--size: 0.214" data-value="3">3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">vault</th>
|
||||
<td style="--size: 0.071" data-value="1">1</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p data-text="dim">Threshold: >7 failures in 10 weeks. vault and commons are solid. trentuna-web is borderline — watch it.</p>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!--#include virtual="/_include/footer.html" -->
|
||||
</body>
|
||||
</html>
|
||||
89
archive/examples-legacy/charts/burndown.html
Normal file
89
archive/examples-legacy/charts/burndown.html
Normal file
|
|
@ -0,0 +1,89 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!--#include virtual="/_include/head.html" -->
|
||||
<title>Sprint Burndown — ASW Examples</title>
|
||||
<meta name="description" content="Sprint burndown chart with
|
||||
CSS-generated ideal velocity line — no JavaScript">
|
||||
</head>
|
||||
<body>
|
||||
<!--#include virtual="/_include/nav.html" -->
|
||||
|
||||
<main>
|
||||
<header>
|
||||
<h1>Sprint Burndown</h1>
|
||||
<p data-text="lead">Sprint burndown chart with CSS-generated ideal
|
||||
velocity line — no JavaScript</p>
|
||||
</header>
|
||||
|
||||
<hgroup>
|
||||
<h1>Sprint 3 — Burndown</h1>
|
||||
<p>20 issues tracked over 10 days.</p>
|
||||
</hgroup>
|
||||
|
||||
<p>The burndown chart shows remaining work across the sprint. Bars represent issues remaining each day; the diagonal overlay is the ideal burn line — no JavaScript required.</p>
|
||||
|
||||
<h2>Remaining work</h2>
|
||||
|
||||
<table data-chart="burndown" style="--chart-height: 220px">
|
||||
<caption>Sprint 3 burndown — 20 issues over 10 days</caption>
|
||||
<tbody>
|
||||
<!-- max=1.0 (start), normalized to 20 total issues -->
|
||||
<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>
|
||||
|
||||
<p data-text="dim">Source: Forgejo API / git log — 2026-04-03</p>
|
||||
|
||||
<div data-callout="note">
|
||||
<span data-callout-title>The ideal line</span>
|
||||
<p>The blue diagonal overlay is a CSS <code>linear-gradient</code> on <code>tbody::after</code> — no JavaScript. It represents ideal burn rate from day 1 to day N.</p>
|
||||
</div>
|
||||
|
||||
<h2>Issues by type</h2>
|
||||
<p>Breakdown of the 20 sprint issues by category — max 8 (Features).</p>
|
||||
|
||||
<table data-chart="bar" data-chart-spacing="3">
|
||||
<caption>Sprint 3 issues by type</caption>
|
||||
<tbody>
|
||||
<!-- max=8, Features -->
|
||||
<tr><th scope="row">Features</th><td style="--size: 1.0" data-value="8">8</td></tr>
|
||||
<tr><th scope="row">Bugs</th><td style="--size: 0.625" data-value="5">5</td></tr>
|
||||
<tr><th scope="row">Docs</th><td style="--size: 0.5" data-value="4">4</td></tr>
|
||||
<tr><th scope="row">Maintenance</th><td style="--size: 0.375" data-value="3">3</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p data-text="dim">Source: Forgejo API / git log — 2026-04-03</p>
|
||||
|
||||
<h2>Work distribution</h2>
|
||||
<p>How sprint work is distributed across categories by estimated effort.</p>
|
||||
|
||||
<table data-chart="pie"
|
||||
style="--pie-size: 180px; --pie-segments: conic-gradient(var(--chart-color-1) 0% 40%, var(--chart-color-2) 40% 65%, var(--chart-color-3) 65% 85%, var(--chart-color-4) 85% 100%)">
|
||||
<caption>Sprint 3 work distribution by effort</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>🟢 Features 40%</th>
|
||||
<th>🔵 Bugs 25%</th>
|
||||
<th>🟠 Docs 20%</th>
|
||||
<th>🔴 Maintenance 15%</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
|
||||
<p data-text="dim">Source: Forgejo API / git log — 2026-04-03</p>
|
||||
</main>
|
||||
|
||||
<!--#include virtual="/_include/footer.html" -->
|
||||
</body>
|
||||
</html>
|
||||
154
archive/examples-legacy/charts/face-budget-pitch.html
Normal file
154
archive/examples-legacy/charts/face-budget-pitch.html
Normal file
|
|
@ -0,0 +1,154 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!--#include virtual="/_include/head.html" -->
|
||||
<title>Investment Overview — ASW Examples</title>
|
||||
<meta name="description" content="Face-style investor pitch — pie
|
||||
chart budget allocation, bar with per-row color, growth trajectory">
|
||||
</head>
|
||||
<body>
|
||||
<!--#include virtual="/_include/nav.html" -->
|
||||
|
||||
<main>
|
||||
<header>
|
||||
<h1>Investment Overview</h1>
|
||||
<p data-text="lead">Face-style investor pitch — pie chart budget
|
||||
allocation, bar with per-row color, growth trajectory</p>
|
||||
</header>
|
||||
|
||||
<hgroup>
|
||||
<h1>Agentic Semantic Web — Investor Brief</h1>
|
||||
<p>Series A close · Q1 2026 · Confidential</p>
|
||||
</hgroup>
|
||||
|
||||
<p>Every great pitch starts with the same premise: the story the data tells depends entirely on how you frame it. These charts don't manipulate — they illuminate. There's a difference, and it's worth knowing which side you're on.</p>
|
||||
|
||||
<div data-layout="stats">
|
||||
<div>
|
||||
<span data-stat="value">$4.2M</span>
|
||||
<span data-stat="label">ARR</span>
|
||||
</div>
|
||||
<div>
|
||||
<span data-stat="value">$18M</span>
|
||||
<span data-stat="label">Series A raised</span>
|
||||
</div>
|
||||
<div>
|
||||
<span data-stat="value">24 mo</span>
|
||||
<span data-stat="label">Runway</span>
|
||||
</div>
|
||||
<div>
|
||||
<span data-stat="value">47</span>
|
||||
<span data-stat="label">Team members</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section>
|
||||
<h2>Where the money goes</h2>
|
||||
|
||||
<p>Capital allocation reflects priorities. Infrastructure-first is not a philosophical choice — it's a competitive moat. Forty cents of every dollar builds the foundation that makes everything else defensible.</p>
|
||||
|
||||
<table data-chart="pie" style="--pie-segments: conic-gradient(
|
||||
var(--chart-color-1) 0% 40%,
|
||||
var(--chart-color-2) 40% 65%,
|
||||
var(--chart-color-3) 65% 82%,
|
||||
var(--chart-color-4) 82% 100%
|
||||
)">
|
||||
<caption>Operating budget allocation — Q1 2026</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Infrastructure (40%)</th>
|
||||
<th>Personnel (25%)</th>
|
||||
<th>R&D (17%)</th>
|
||||
<th>Marketing (18%)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody><tr><td>data hidden — pie is visual</td></tr></tbody>
|
||||
</table>
|
||||
|
||||
<p data-text="dim">Source: finance team — Q1 2026 budget allocation</p>
|
||||
|
||||
<div data-callout="note">
|
||||
<span data-callout-title>The moat is the infrastructure</span>
|
||||
<p>The 40% infrastructure allocation looks heavy until you consider the alternative: every competitor building on the same commodity stack, competing on features alone. We're not building features — we're building the substrate that makes agentic coordination possible at scale. That's not a cost center. That's the product.</p>
|
||||
</div>
|
||||
|
||||
<h3>Markup</h3>
|
||||
<p>Pie charts use <code>data-chart="pie"</code> with a <code>--pie-segments</code> CSS custom property set via <code>style</code>. The conic gradient defines each slice as a percentage range. Legend comes from <code><thead></code> — one <code><th></code> per segment, label and percentage inline.</p>
|
||||
|
||||
<pre><code><table data-chart="pie" style="--pie-segments: conic-gradient(
|
||||
var(--chart-color-1) 0% 40%,
|
||||
var(--chart-color-2) 40% 65%,
|
||||
var(--chart-color-3) 65% 82%,
|
||||
var(--chart-color-4) 82% 100%
|
||||
)">
|
||||
<caption>Operating budget allocation — Q1 2026</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Infrastructure (40%)</th>
|
||||
<th>Personnel (25%)</th>
|
||||
<th>R&D (17%)</th>
|
||||
<th>Marketing (18%)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody><tr><td>data hidden — pie is visual</td></tr></tbody>
|
||||
</table></code></pre>
|
||||
|
||||
<p>The <code>--pie-segments</code> value is a <code>conic-gradient()</code> — pure CSS, no JavaScript, no SVG. Segment boundaries are cumulative percentages. Use <code>var(--chart-color-1)</code> through <code>var(--chart-color-4)</code> to stay within the design system palette. Additional segments are possible by extending the gradient and adding more <code><th></code> entries.</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Revenue vs. target — quarterly</h2>
|
||||
|
||||
<p>Six quarters of quarterly revenue laid against target. Four out of six quarters hit or beat projections. The two misses — Q1 2024 and Q4 2024 — were deliberate: both quarters involved platform migrations that temporarily compressed billings. The investors who stayed patient are now holding the most defensible position in the category.</p>
|
||||
|
||||
<table data-chart="bar">
|
||||
<caption>Quarterly revenue vs. target — Q1 2024 through Q2 2025 (max $1.8M)</caption>
|
||||
<tbody>
|
||||
<tr><th scope="row">Q1 2024 <span data-text="dim">↓ target $500K</span></th><td style="--size: 0.233; --color: var(--accent-red)">$420K</td></tr>
|
||||
<tr><th scope="row">Q2 2024 <span data-text="dim">↑ target $650K</span></th><td style="--size: 0.378; --color: var(--accent)">$680K</td></tr>
|
||||
<tr><th scope="row">Q3 2024 <span data-text="dim">↑ target $800K</span></th><td style="--size: 0.494; --color: var(--accent)">$890K</td></tr>
|
||||
<tr><th scope="row">Q4 2024 <span data-text="dim">↓ target $1.2M</span></th><td style="--size: 0.611; --color: var(--accent-red)">$1.1M</td></tr>
|
||||
<tr><th scope="row">Q1 2025 <span data-text="dim">↑ target $1.3M</span></th><td style="--size: 0.778; --color: var(--accent)">$1.4M</td></tr>
|
||||
<tr><th scope="row">Q2 2025 <span data-text="dim">↑ target $1.6M</span></th><td style="--size: 1.0; --color: var(--accent)">$1.8M</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p data-text="dim">Green = beat target · Red = missed target · Max $1.8M (Q2 2025)</p>
|
||||
|
||||
<h3>Per-row color override</h3>
|
||||
<p>Individual rows accept a <code>--color</code> custom property on the <code><td></code>. Use <code>var(--accent)</code> for over-target performance and <code>var(--accent-red)</code> for misses. The default bar color is the chart's base accent — override only where it carries meaning.</p>
|
||||
|
||||
<pre><code><!-- Over-target: green -->
|
||||
<tr><th scope="row">Q2 2024</th>
|
||||
<td style="--size: 0.378; --color: var(--accent)">$680K</td></tr>
|
||||
|
||||
<!-- Under-target: red -->
|
||||
<tr><th scope="row">Q1 2024</th>
|
||||
<td style="--size: 0.233; --color: var(--accent-red)">$420K</td></tr></code></pre>
|
||||
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>ARR growth trajectory</h2>
|
||||
|
||||
<p>This is the chart that closes the room. Six quarters of compounding ARR — from $1.1M to $4.2M. That's a 3.8× in 18 months. The trajectory isn't slowing. The Series A closes at the inflection point.</p>
|
||||
|
||||
<table data-chart="column" style="--chart-height: 240px">
|
||||
<caption>Annual Recurring Revenue — Q3 2024 through Q4 2025</caption>
|
||||
<tbody>
|
||||
<tr><th scope="row">Q3 2024</th><td style="--size: 0.262">$1.1M</td></tr>
|
||||
<tr><th scope="row">Q4 2024</th><td style="--size: 0.381">$1.6M</td></tr>
|
||||
<tr><th scope="row">Q1 2025</th><td style="--size: 0.524">$2.2M</td></tr>
|
||||
<tr><th scope="row">Q2 2025</th><td style="--size: 0.690">$2.9M</td></tr>
|
||||
<tr><th scope="row">Q3 2025</th><td style="--size: 0.833">$3.5M</td></tr>
|
||||
<tr><th scope="row">Q4 2025</th><td style="--size: 1.0">$4.2M</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p data-text="dim">Source: finance · ARR normalized — max $4.2M (Q4 2025)</p>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!--#include virtual="/_include/footer.html" -->
|
||||
</body>
|
||||
</html>
|
||||
121
archive/examples-legacy/charts/hannibal-op-tracker.html
Normal file
121
archive/examples-legacy/charts/hannibal-op-tracker.html
Normal file
|
|
@ -0,0 +1,121 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!--#include virtual="/_include/head.html" -->
|
||||
<title>Operation Tracker — ASW Examples</title>
|
||||
<meta name="description" content="Mission planning analytics — stacked
|
||||
column with labels, team performance bar, readiness gauges">
|
||||
</head>
|
||||
<body>
|
||||
<!--#include virtual="/_include/nav.html" -->
|
||||
|
||||
<main>
|
||||
<header>
|
||||
<h1>Operation Tracker</h1>
|
||||
<p data-text="lead">Mission planning analytics — stacked column
|
||||
with labels, team performance bar, readiness gauges</p>
|
||||
</header>
|
||||
|
||||
<div data-callout="note">
|
||||
<p>"I love it when a plan comes together." — Colonel John H. Smith. The charts don't lie. The team doesn't fold. The exit is always mapped before the entry.</p>
|
||||
</div>
|
||||
|
||||
<div data-layout="stats">
|
||||
<div>
|
||||
<span data-stat="value">5</span>
|
||||
<span data-stat="label">Operations tracked</span>
|
||||
</div>
|
||||
<div>
|
||||
<span data-stat="value">3</span>
|
||||
<span data-stat="label">Missions active</span>
|
||||
</div>
|
||||
<div>
|
||||
<span data-stat="value">89%</span>
|
||||
<span data-stat="label">Success rate</span>
|
||||
</div>
|
||||
<div>
|
||||
<span data-stat="value">94%</span>
|
||||
<span data-stat="label">Team readiness</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Operation phase breakdown</h2>
|
||||
<p>Each operation is divided into three phases: planning, execution, and extraction. Values are normalized — each column sums to 1.0. Leaner planning phases signal higher operational confidence. Op Echo ran hot on execution; that's the jazz.</p>
|
||||
|
||||
<table data-chart="column" data-chart-stacked data-chart-labels style="--chart-height: 200px">
|
||||
<caption>Operation phases — time allocation (normalized)</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Op Alpha</th>
|
||||
<th scope="col">Op Beta</th>
|
||||
<th scope="col">Op Gamma</th>
|
||||
<th scope="col">Op Delta</th>
|
||||
<th scope="col">Op Echo</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">Planning</th>
|
||||
<td style="--size: 0.25">25%</td>
|
||||
<td style="--size: 0.30">30%</td>
|
||||
<td style="--size: 0.20">20%</td>
|
||||
<td style="--size: 0.35">35%</td>
|
||||
<td style="--size: 0.15">15%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Execution</th>
|
||||
<td style="--size: 0.50">50%</td>
|
||||
<td style="--size: 0.45">45%</td>
|
||||
<td style="--size: 0.55">55%</td>
|
||||
<td style="--size: 0.45">45%</td>
|
||||
<td style="--size: 0.60">60%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Extraction</th>
|
||||
<td style="--size: 0.25">25%</td>
|
||||
<td style="--size: 0.25">25%</td>
|
||||
<td style="--size: 0.25">25%</td>
|
||||
<td style="--size: 0.20">20%</td>
|
||||
<td style="--size: 0.25">25%</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p data-text="dim">Five operations — Op Alpha through Op Echo. Phases: planning, execution, extraction. Each column sums to 1.0.</p>
|
||||
|
||||
<h2>Mission success rate by operative</h2>
|
||||
<p>Completed mission outcomes by team member over the last 24 months. Success is defined as: objective met, team extracted, no assets burned. Normalized against the highest performer — 96 missions, all successful.</p>
|
||||
|
||||
<table data-chart="bar" data-chart-spacing="3">
|
||||
<caption>Mission success rate per operative — 24-month window</caption>
|
||||
<tbody>
|
||||
<tr><th scope="row">Hannibal</th><td style="--size: 1.000" data-value="96%">96%</td></tr>
|
||||
<tr><th scope="row">B.A. Baracus</th><td style="--size: 0.948" data-value="91%">91%</td></tr>
|
||||
<tr><th scope="row">Face</th><td style="--size: 0.917" data-value="88%">88%</td></tr>
|
||||
<tr><th scope="row">Amy</th><td style="--size: 0.885" data-value="85%">85%</td></tr>
|
||||
<tr><th scope="row">Murdock</th><td style="--size: 0.854" data-value="82%">82%</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p data-text="dim">Murdock's figure reflects missions where "unconventional" entry and exit methods were logged as anomalies rather than successes. Adjusting for tactical creativity: 97%.</p>
|
||||
|
||||
<h2>Readiness gauges</h2>
|
||||
<p>Two headline metrics for the current operational cycle: overall mission success rate across all active ops, and aggregate team readiness based on availability, equipment status, and last debrief scores.</p>
|
||||
|
||||
<div style="display: flex; gap: var(--size-8); justify-content: center; flex-wrap: wrap; margin-block: var(--size-6)">
|
||||
<table data-chart="radial" style="--size: 0.89">
|
||||
<caption>Mission success rate</caption>
|
||||
<tbody><tr><td><span>89%</span></td></tr></tbody>
|
||||
</table>
|
||||
<table data-chart="radial" style="--size: 0.94">
|
||||
<caption>Team readiness</caption>
|
||||
<tbody><tr><td><span>94%</span></td></tr></tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<p data-text="dim">Gauges represent the current operational cycle. Team readiness accounts for Murdock's current clearance status — provisional, pending psych eval.</p>
|
||||
</main>
|
||||
|
||||
<!--#include virtual="/_include/footer.html" -->
|
||||
</body>
|
||||
</html>
|
||||
63
archive/examples-legacy/charts/index.html
Normal file
63
archive/examples-legacy/charts/index.html
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!--#include virtual="/_include/head.html" -->
|
||||
<title>Charts — ASW Examples</title>
|
||||
<meta name="description" content="Data-driven chart types — bar,
|
||||
column, area, line, pie, radial, burndown">
|
||||
</head>
|
||||
<body>
|
||||
<!--#include virtual="/_include/nav.html" -->
|
||||
|
||||
<main>
|
||||
<header>
|
||||
<h1>Charts</h1>
|
||||
<p data-text="lead">Data-driven chart types — bar, column, area,
|
||||
line, pie, radial, burndown</p>
|
||||
</header>
|
||||
|
||||
<p>ASW ships native charting — semantic <code><table></code>
|
||||
elements with <code>data-chart</code> attributes. No JavaScript. No SVG.
|
||||
Pure CSS.</p>
|
||||
<h2 id="chart-types">Chart types</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Attribute</th><th>Use case</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>Bar</td><td><code>data-chart="bar"</code></td><td>Horizontal comparison</td></tr>
|
||||
<tr><td>Column</td><td><code>data-chart="column"</code></td><td>Vertical time-series</td></tr>
|
||||
<tr><td>Area</td><td><code>data-chart="area"</code></td><td>Filled trend line</td></tr>
|
||||
<tr><td>Line</td><td><code>data-chart="line"</code></td><td>Trend with data points</td></tr>
|
||||
<tr><td>Pie</td><td><code>data-chart="pie"</code></td><td>Part-to-whole</td></tr>
|
||||
<tr><td>Radial</td><td><code>data-chart="radial"</code></td><td>Single-value gauge</td></tr>
|
||||
<tr><td>Burndown</td><td><code>data-chart="burndown"</code></td><td>Sprint tracking</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h2 id="examples">Examples</h2>
|
||||
<h3 id="compositions">Compositions</h3>
|
||||
<ul>
|
||||
<li><a href="operational-dashboard.html">Operational Dashboard</a> — multi-chart agent metrics view</li>
|
||||
<li><a href="radial-gauges.html">Radial Gauges</a> — session health with status variants</li>
|
||||
<li><a href="burndown.html">Sprint Burndown</a> — sprint tracking with ideal velocity line</li>
|
||||
<li><a href="multi-chart-report.html">Sprint Report</a> — multi-chart sprint report template</li>
|
||||
</ul>
|
||||
|
||||
<h3 id="advanced-techniques">Advanced techniques</h3>
|
||||
<ul>
|
||||
<li><a href="ba-build-metrics.html">Build Pipeline Metrics</a> — stacked bar (<code>data-chart-stacked</code>), column with tight spacing, per-row color</li>
|
||||
<li><a href="face-budget-pitch.html">Investment Overview</a> — pie chart (<code>data-chart="pie"</code>) with <code>--pie-segments</code>, bar with color overrides</li>
|
||||
<li><a href="murdock-aerial-survey.html">Aerial Survey Data</a> — line chart (<code>data-chart="line"</code>), area chart, radial gauges</li>
|
||||
<li><a href="amy-field-intelligence.html">Field Intelligence Report</a> — column + bar with <code>data-chart-labels</code>, multi-series, area trend</li>
|
||||
<li><a href="hannibal-op-tracker.html">Operation Tracker</a> — stacked column (<code>data-chart-stacked</code> + <code>data-chart-labels</code>), mission analytics</li>
|
||||
</ul>
|
||||
|
||||
<h2 id="reference">Reference</h2>
|
||||
<p>See <a href="/docs/charts/index.html">Charts docs</a> for the full
|
||||
attribute reference and modifier list.</p>
|
||||
</main>
|
||||
|
||||
<!--#include virtual="/_include/footer.html" -->
|
||||
</body>
|
||||
</html>
|
||||
144
archive/examples-legacy/charts/multi-chart-report.html
Normal file
144
archive/examples-legacy/charts/multi-chart-report.html
Normal file
|
|
@ -0,0 +1,144 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!--#include virtual="/_include/head.html" -->
|
||||
<title>Sprint Report — ASW Examples</title>
|
||||
<meta name="description" content="Full sprint report template
|
||||
combining bar, column, area, line, pie, and burndown charts">
|
||||
</head>
|
||||
<body>
|
||||
<!--#include virtual="/_include/nav.html" -->
|
||||
|
||||
<main>
|
||||
<header>
|
||||
<h1>Sprint Report</h1>
|
||||
<p data-text="lead">Full sprint report template combining bar,
|
||||
column, area, line, pie, and burndown charts</p>
|
||||
</header>
|
||||
|
||||
<hgroup>
|
||||
<h1>Sprint Report — Week 14</h1>
|
||||
<p>2026-03-31 through 2026-04-03 · ASW development sprint</p>
|
||||
</hgroup>
|
||||
|
||||
<section>
|
||||
<h2>Summary</h2>
|
||||
|
||||
<div data-layout="stats">
|
||||
<div>
|
||||
<span data-stat="value">8</span>
|
||||
<span data-stat="label">Issues opened</span>
|
||||
</div>
|
||||
<div>
|
||||
<span data-stat="value">14</span>
|
||||
<span data-stat="label">Issues closed</span>
|
||||
</div>
|
||||
<div>
|
||||
<span data-stat="value">+6</span>
|
||||
<span data-stat="label">Net resolved</span>
|
||||
</div>
|
||||
<div>
|
||||
<span data-stat="value">47</span>
|
||||
<span data-stat="label">Commits</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Commit activity</h2>
|
||||
|
||||
<table data-chart="column" style="--chart-height: 180px">
|
||||
<caption>Commits per day — Week 14</caption>
|
||||
<tbody>
|
||||
<tr><th scope="row">Mon</th><td style="--size: 0.44">8</td></tr>
|
||||
<tr><th scope="row">Tue</th><td style="--size: 0.67">12</td></tr>
|
||||
<tr><th scope="row">Wed</th><td style="--size: 1.0">18</td></tr>
|
||||
<tr><th scope="row">Thu</th><td style="--size: 0.50">9</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p data-text="dim">Source: git log — max=18 (Wednesday)</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Open issues trend</h2>
|
||||
|
||||
<table data-chart="line" style="--chart-height: 160px">
|
||||
<caption>Open issues count — last 6 weeks</caption>
|
||||
<tbody>
|
||||
<tr><th scope="row">W9</th><td style="--size: 0.8">48</td></tr>
|
||||
<tr><th scope="row">W10</th><td style="--size: 0.9">54</td></tr>
|
||||
<tr><th scope="row">W11</th><td style="--size: 0.7">42</td></tr>
|
||||
<tr><th scope="row">W12</th><td style="--size: 1.0">60</td></tr>
|
||||
<tr><th scope="row">W13</th><td style="--size: 0.75">45</td></tr>
|
||||
<tr><th scope="row">W14</th><td style="--size: 0.5">30</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p data-text="dim">Source: Forgejo API — open issues by week</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Vault activity</h2>
|
||||
|
||||
<table data-chart="area" style="--chart-height: 150px">
|
||||
<caption>Vault commit volume — last 8 sessions</caption>
|
||||
<tbody>
|
||||
<tr><th scope="row">S1</th><td style="--size: 0.4">light</td></tr>
|
||||
<tr><th scope="row">S2</th><td style="--size: 0.6">medium</td></tr>
|
||||
<tr><th scope="row">S3</th><td style="--size: 0.8">heavy</td></tr>
|
||||
<tr><th scope="row">S4</th><td style="--size: 0.5">medium</td></tr>
|
||||
<tr><th scope="row">S5</th><td style="--size: 0.9">deep</td></tr>
|
||||
<tr><th scope="row">S6</th><td style="--size: 1.0">peak</td></tr>
|
||||
<tr><th scope="row">S7</th><td style="--size: 0.7">heavy</td></tr>
|
||||
<tr><th scope="row">S8</th><td style="--size: 0.6">medium</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p data-text="dim">Source: git -C ~/.napkin log — session classification</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Sprint burndown</h2>
|
||||
|
||||
<table data-chart="burndown">
|
||||
<caption>Week 14 sprint — 20 issues, 4 days</caption>
|
||||
<tbody>
|
||||
<tr><th scope="row">Mon</th><td style="--size: 1.0">20</td></tr>
|
||||
<tr><th scope="row">Tue</th><td style="--size: 0.65">13</td></tr>
|
||||
<tr><th scope="row">Wed</th><td style="--size: 0.35">7</td></tr>
|
||||
<tr><th scope="row">Thu</th><td style="--size: 0.1">2</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p data-text="dim">Source: Forgejo milestone — issues remaining per day</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Work type distribution</h2>
|
||||
|
||||
<table data-chart="pie"
|
||||
style="--pie-segments: conic-gradient(
|
||||
var(--chart-color-1) 0% 40%,
|
||||
var(--chart-color-2) 40% 65%,
|
||||
var(--chart-color-3) 65% 85%,
|
||||
var(--chart-color-4) 85% 100%
|
||||
)">
|
||||
<caption>Session work allocation — Week 14</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Implementation 40%</th>
|
||||
<th>Documentation 25%</th>
|
||||
<th>Maintenance 20%</th>
|
||||
<th>Communication 15%</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
|
||||
<p data-text="dim">Source: git commit trailers — Mode + topic classification</p>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!--#include virtual="/_include/footer.html" -->
|
||||
</body>
|
||||
</html>
|
||||
120
archive/examples-legacy/charts/murdock-aerial-survey.html
Normal file
120
archive/examples-legacy/charts/murdock-aerial-survey.html
Normal file
|
|
@ -0,0 +1,120 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!--#include virtual="/_include/head.html" -->
|
||||
<title>Aerial Survey Data — ASW Examples</title>
|
||||
<meta name="description" content="Flight telemetry across 12 waypoints
|
||||
— line chart, area chart, radial gauges">
|
||||
</head>
|
||||
<body>
|
||||
<!--#include virtual="/_include/nav.html" -->
|
||||
|
||||
<main>
|
||||
<header>
|
||||
<h1>Aerial Survey Data</h1>
|
||||
<p data-text="lead">Flight telemetry across 12 waypoints — line
|
||||
chart, area chart, radial gauges</p>
|
||||
</header>
|
||||
|
||||
<hgroup>
|
||||
<h1>Recon Flight 7 — Murdock Aerial Survey</h1>
|
||||
<p>Atmospheric readings and telemetry data. All values normalized. All systems… mostly nominal.</p>
|
||||
</hgroup>
|
||||
|
||||
<p>SMOKEY IS IN THE AIR! Recon Flight 7 departed at 0600 local — 12 waypoints, one aircraft, and me. The data below is what the black box recorded. Some of it is exactly what you'd expect. WP-08 is… not that.</p>
|
||||
|
||||
<p>Every measurement below is a CSS custom property. Every chart is a semantic HTML table. The altitude profile used to be the only chart type not demonstrated in isolation — that changes right now.</p>
|
||||
|
||||
<div data-layout="stats">
|
||||
<div>
|
||||
<span data-stat="value">12</span>
|
||||
<span data-stat="label">Waypoints</span>
|
||||
</div>
|
||||
<div>
|
||||
<span data-stat="value">8,500</span>
|
||||
<span data-stat="label">Peak altitude (ft)</span>
|
||||
</div>
|
||||
<div>
|
||||
<span data-stat="value">340</span>
|
||||
<span data-stat="label">Range (km)</span>
|
||||
</div>
|
||||
<div>
|
||||
<span data-stat="value">97%</span>
|
||||
<span data-stat="label">Mission data captured</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Altitude profile</h2>
|
||||
<p>Altitude at each waypoint — normalized to peak cruise altitude of 8,500 ft at WP-06. The sharp descent at WP-08 was… deliberate. Mostly.</p>
|
||||
|
||||
<table data-chart="line" style="--chart-height: 220px">
|
||||
<caption>Altitude profile — Recon Flight 7 (max: 8,500 ft)</caption>
|
||||
<tbody>
|
||||
<!-- max=8500ft at WP-06 = 1.0 -->
|
||||
<tr><th scope="row">WP-01</th><td style="--size: 0.06">500 ft</td></tr>
|
||||
<tr><th scope="row">WP-02</th><td style="--size: 0.18">1,500 ft</td></tr>
|
||||
<tr><th scope="row">WP-03</th><td style="--size: 0.38">3,200 ft</td></tr>
|
||||
<tr><th scope="row">WP-04</th><td style="--size: 0.68">5,800 ft</td></tr>
|
||||
<tr><th scope="row">WP-05</th><td style="--size: 0.85">7,200 ft</td></tr>
|
||||
<tr><th scope="row">WP-06</th><td style="--size: 1.0">8,500 ft</td></tr>
|
||||
<tr><th scope="row">WP-07</th><td style="--size: 0.96">8,200 ft</td></tr>
|
||||
<tr><th scope="row">WP-08</th><td style="--size: 0.72">6,100 ft</td></tr>
|
||||
<tr><th scope="row">WP-09</th><td style="--size: 0.80">6,800 ft</td></tr>
|
||||
<tr><th scope="row">WP-10</th><td style="--size: 0.59">5,000 ft</td></tr>
|
||||
<tr><th scope="row">WP-11</th><td style="--size: 0.26">2,200 ft</td></tr>
|
||||
<tr><th scope="row">WP-12</th><td style="--size: 0.04">300 ft</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p data-text="dim">Source: Flight 7 black box telemetry — 2026-04-04 — altimeter calibrated to MSL</p>
|
||||
|
||||
<h2>Fuel consumption rate</h2>
|
||||
<p>Fuel burn rate at each waypoint in liters per minute — normalized to peak consumption of 18 L/min during the WP-02 climb phase. Cruise efficiency kicks in at WP-06. The WP-08 spike is the fuel cost of evasive action. Worth it.</p>
|
||||
|
||||
<table data-chart="area" style="--chart-height: 180px">
|
||||
<caption>Fuel consumption rate — Recon Flight 7 (max: 18 L/min)</caption>
|
||||
<tbody>
|
||||
<!-- max=18 L/min at WP-02 = 1.0 -->
|
||||
<tr><th scope="row">WP-01</th><td style="--size: 0.67">12 L/min</td></tr>
|
||||
<tr><th scope="row">WP-02</th><td style="--size: 1.0">18 L/min</td></tr>
|
||||
<tr><th scope="row">WP-03</th><td style="--size: 0.89">16 L/min</td></tr>
|
||||
<tr><th scope="row">WP-04</th><td style="--size: 0.78">14 L/min</td></tr>
|
||||
<tr><th scope="row">WP-05</th><td style="--size: 0.67">12 L/min</td></tr>
|
||||
<tr><th scope="row">WP-06</th><td style="--size: 0.56">10 L/min</td></tr>
|
||||
<tr><th scope="row">WP-07</th><td style="--size: 0.56">10 L/min</td></tr>
|
||||
<tr><th scope="row">WP-08</th><td style="--size: 0.83">15 L/min</td></tr>
|
||||
<tr><th scope="row">WP-09</th><td style="--size: 0.61">11 L/min</td></tr>
|
||||
<tr><th scope="row">WP-10</th><td style="--size: 0.50">9 L/min</td></tr>
|
||||
<tr><th scope="row">WP-11</th><td style="--size: 0.44">8 L/min</td></tr>
|
||||
<tr><th scope="row">WP-12</th><td style="--size: 0.33">6 L/min</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p data-text="dim">Source: Flight 7 fuel flow sensor — 2026-04-04 — readings at waypoint crossing</p>
|
||||
|
||||
<div data-callout="warning">
|
||||
<span data-callout-title>Anomalous readings at WP-08</span>
|
||||
<p>At WP-08 the altimeter dropped 2,100 ft in 47 seconds and fuel burn spiked to 15 L/min. The black box logged it as "unscheduled terrain avoidance maneuver." I logged it as "that ridge came out of nowhere." Both accounts are technically accurate. Atmospheric pressure sensor also recorded a 4 hPa anomaly at this waypoint — possible rotor wash from an unmapped obstruction, possible something else. Flagging for review. Systems recovered to nominal by WP-09.</p>
|
||||
</div>
|
||||
|
||||
<h2>Flight status</h2>
|
||||
<p>Two radial gauges: overall mission completion (10 of 12 waypoints fully processed) and systems nominal status post-WP-08 anomaly. Warning threshold on systems — the anomaly left a mark.</p>
|
||||
|
||||
<div style="display: flex; gap: var(--size-8); justify-content: center; flex-wrap: wrap; margin-block: var(--size-6)">
|
||||
<table data-chart="radial" style="--size: 0.83">
|
||||
<caption>Flight completion</caption>
|
||||
<tbody><tr><td><span>83%</span></td></tr></tbody>
|
||||
</table>
|
||||
|
||||
<table data-chart="radial" style="--size: 0.78" data-status="warning">
|
||||
<caption>Systems nominal</caption>
|
||||
<tbody><tr><td><span>78%</span></td></tr></tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<p data-text="dim">Source: Flight 7 black box — post-flight systems diagnostics — 2026-04-04</p>
|
||||
</main>
|
||||
|
||||
<!--#include virtual="/_include/footer.html" -->
|
||||
</body>
|
||||
</html>
|
||||
123
archive/examples-legacy/charts/operational-dashboard.html
Normal file
123
archive/examples-legacy/charts/operational-dashboard.html
Normal file
|
|
@ -0,0 +1,123 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!--#include virtual="/_include/head.html" -->
|
||||
<title>Operational Dashboard — ASW Examples</title>
|
||||
<meta name="description" content="Multi-chart agent metrics — issues,
|
||||
vault commits, token budget, session intensity">
|
||||
</head>
|
||||
<body>
|
||||
<!--#include virtual="/_include/nav.html" -->
|
||||
|
||||
<main>
|
||||
<header>
|
||||
<h1>Operational Dashboard</h1>
|
||||
<p data-text="lead">Multi-chart agent metrics — issues, vault
|
||||
commits, token budget, session intensity</p>
|
||||
</header>
|
||||
|
||||
<hgroup>
|
||||
<h1>Operational Dashboard — Agent Metrics</h1>
|
||||
<p>Live operational data from Forgejo and git history.</p>
|
||||
</hgroup>
|
||||
|
||||
<p>A multi-chart operational view. Stats bar gives the headline numbers; each chart below drills into a specific signal. All data is normalized: the largest value in each dataset is <code>--size: 1.0</code>.</p>
|
||||
|
||||
<div data-layout="stats">
|
||||
<div>
|
||||
<span data-stat="value">31</span>
|
||||
<span data-stat="label">Open issues</span>
|
||||
</div>
|
||||
<div>
|
||||
<span data-stat="value">6</span>
|
||||
<span data-stat="label">Active repos</span>
|
||||
</div>
|
||||
<div>
|
||||
<span data-stat="value">34</span>
|
||||
<span data-stat="label">Vault commits today</span>
|
||||
</div>
|
||||
<div>
|
||||
<span data-stat="value">12</span>
|
||||
<span data-stat="label">Sessions this week</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Issues by repository</h2>
|
||||
<p>Open issue count across all active repos — max 12 (trentuna/a-team).</p>
|
||||
|
||||
<table data-chart="bar" data-chart-spacing="3">
|
||||
<caption>Open issues per repo — 2026-04-03</caption>
|
||||
<tbody>
|
||||
<!-- max=12, trentuna/a-team -->
|
||||
<tr><th scope="row">a-team</th><td style="--size: 1.0" data-value="12">12</td></tr>
|
||||
<tr><th scope="row">vault</th><td style="--size: 0.833" data-value="10">10</td></tr>
|
||||
<tr><th scope="row">asw</th><td style="--size: 0.5" data-value="6">6</td></tr>
|
||||
<tr><th scope="row">commons</th><td style="--size: 0.083" data-value="1">1</td></tr>
|
||||
<tr><th scope="row">trentuna-web</th><td style="--size: 0.083" data-value="1">1</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p data-text="dim">Source: Forgejo API / git log — 2026-04-03</p>
|
||||
|
||||
<h2>Vault commits per day</h2>
|
||||
<p>Git commit frequency over the last 10 days — max 110 on 2026-03-26.</p>
|
||||
|
||||
<table data-chart="column" style="--chart-height: 220px">
|
||||
<caption>Commits to vigilio/vault — Mar 25 through Apr 3</caption>
|
||||
<tbody>
|
||||
<!-- max=110, 2026-03-26 -->
|
||||
<tr><th scope="row">Mar 25</th><td style="--size: 0.718">79</td></tr>
|
||||
<tr><th scope="row">Mar 26</th><td style="--size: 1.0">110</td></tr>
|
||||
<tr><th scope="row">Mar 27</th><td style="--size: 0.855">94</td></tr>
|
||||
<tr><th scope="row">Mar 28</th><td style="--size: 0.9">99</td></tr>
|
||||
<tr><th scope="row">Mar 29</th><td style="--size: 0.1">11</td></tr>
|
||||
<tr><th scope="row">Mar 30</th><td style="--size: 0.091">10</td></tr>
|
||||
<tr><th scope="row">Mar 31</th><td style="--size: 0.127">14</td></tr>
|
||||
<tr><th scope="row">Apr 1</th><td style="--size: 0.182">20</td></tr>
|
||||
<tr><th scope="row">Apr 2</th><td style="--size: 0.309">34</td></tr>
|
||||
<tr><th scope="row">Apr 3</th><td style="--size: 0.073">8</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p data-text="dim">Source: Forgejo API / git log — 2026-04-03</p>
|
||||
|
||||
<h2>Budget and resolution</h2>
|
||||
<p>Two radial gauges side by side: token budget remaining and issue resolution rate for the current sprint.</p>
|
||||
|
||||
<div style="display: flex; gap: var(--size-8); justify-content: center; flex-wrap: wrap; margin-block: var(--size-6)">
|
||||
<table data-chart="radial" style="--size: 0.72">
|
||||
<caption>Token budget</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>
|
||||
</div>
|
||||
|
||||
<p data-text="dim">Source: Forgejo API / git log — 2026-04-03</p>
|
||||
|
||||
<h2>Session intensity</h2>
|
||||
<p>Depth of work across the last 8 sessions — 1.0 is maximum depth (full autonomous build session).</p>
|
||||
|
||||
<table data-chart="area" style="--chart-height: 160px">
|
||||
<caption>Session intensity — last 8 sessions (normalized)</caption>
|
||||
<tbody>
|
||||
<tr><th scope="row">S1</th><td style="--size: 0.3">light</td></tr>
|
||||
<tr><th scope="row">S2</th><td style="--size: 0.75">medium</td></tr>
|
||||
<tr><th scope="row">S3</th><td style="--size: 0.9">deep</td></tr>
|
||||
<tr><th scope="row">S4</th><td style="--size: 0.6">medium</td></tr>
|
||||
<tr><th scope="row">S5</th><td style="--size: 0.4">light</td></tr>
|
||||
<tr><th scope="row">S6</th><td style="--size: 1.0">deep</td></tr>
|
||||
<tr><th scope="row">S7</th><td style="--size: 0.85">deep</td></tr>
|
||||
<tr><th scope="row">S8</th><td style="--size: 0.5">medium</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p data-text="dim">Source: Forgejo API / git log — 2026-04-03</p>
|
||||
</main>
|
||||
|
||||
<!--#include virtual="/_include/footer.html" -->
|
||||
</body>
|
||||
</html>
|
||||
96
archive/examples-legacy/charts/radial-gauges.html
Normal file
96
archive/examples-legacy/charts/radial-gauges.html
Normal file
|
|
@ -0,0 +1,96 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!--#include virtual="/_include/head.html" -->
|
||||
<title>Radial Gauges — ASW Examples</title>
|
||||
<meta name="description" content="Session health dashboard — radial
|
||||
gauges with status variants for operational percentages">
|
||||
</head>
|
||||
<body>
|
||||
<!--#include virtual="/_include/nav.html" -->
|
||||
|
||||
<main>
|
||||
<header>
|
||||
<h1>Radial Gauges</h1>
|
||||
<p data-text="lead">Session health dashboard — radial gauges with
|
||||
status variants for operational percentages</p>
|
||||
</header>
|
||||
|
||||
<hgroup>
|
||||
<h1>Session Health Dashboard</h1>
|
||||
<p>Radial gauges for agent operational metrics — token budget, issue completion, resource usage.</p>
|
||||
</hgroup>
|
||||
|
||||
<p>Radial charts (<code>data-chart="radial"</code>) show a single value as a circular gauge. They are the natural chart type for operational percentages: how full is the token budget? How many issues are resolved? How much context window is consumed?</p>
|
||||
|
||||
<section>
|
||||
<h2>Live session metrics</h2>
|
||||
|
||||
<div style="display: flex; gap: var(--size-8); justify-content: center; flex-wrap: wrap; margin-block: var(--size-6)">
|
||||
<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">
|
||||
<caption>Context consumed</caption>
|
||||
<tbody><tr><td><span>45%</span></td></tr></tbody>
|
||||
</table>
|
||||
<table data-chart="radial" style="--size: 0.78" data-status="warning">
|
||||
<caption>Vault size</caption>
|
||||
<tbody><tr><td><span>78%</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>
|
||||
|
||||
<p data-text="dim">Source: session metrics — 2026-04-03</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Status variants</h2>
|
||||
<p>Use <code>data-status</code> for threshold-based color changes:</p>
|
||||
|
||||
<table>
|
||||
<thead><tr><th>Range</th><th>Status attribute</th><th>Color</th><th>Meaning</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>< 70%</td><td><span data-text="dim">none</span></td><td style="color: var(--accent)" data-text="mono">green</td><td>Normal — no action needed</td></tr>
|
||||
<tr><td>70–89%</td><td><code>data-status="warning"</code></td><td style="color: var(--accent-orange)" data-text="mono">orange</td><td>Approaching threshold</td></tr>
|
||||
<tr><td>≥ 90%</td><td><code>data-status="danger"</code></td><td style="color: var(--accent-red)" data-text="mono">red</td><td>Critical — action required</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div data-callout="tip">
|
||||
<span data-callout-title>Automating status</span>
|
||||
<p>An agent can compute the appropriate <code>data-status</code> value based on the fraction. If <code>--size > 0.9</code>, set <code>data-status="danger"</code>. If <code>--size > 0.7</code>, set <code>data-status="warning"</code>. The CSS handles the color automatically.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<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>
|
||||
|
||||
<p><!-- Warning variant --> <table data-chart="radial"
|
||||
style="--size: 0.78" data-status="warning"> <caption>Vault
|
||||
size</caption>
|
||||
<tbody><tr><td><span>78%</span></td></tr></tbody>
|
||||
</table></p>
|
||||
<p><!-- Danger variant --> <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> </code></pre></p>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!--#include virtual="/_include/footer.html" -->
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue