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)
63 lines
3 KiB
HTML
63 lines
3 KiB
HTML
<!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>
|