Port vault section (5 pages) and docs section (11 pages)
- content/vault/: _index.md, diff.md, session.md, status.md, tasks.md, wikilinks.md - content/docs/: _index.md, introduction, tokens, reset, semantic-html, components, data-attributes, navigation, layouts, charts, chroma, accordion-dialog 96 pages build clean (was 36). Docs use sidebar nav + TOC layout. Vault uses sidebar with section fallback (no vault menu configured yet). URLs fixed: playground refs → asw.trentuna.com. Closes: asw#12, asw#9
This commit is contained in:
parent
cbe44d845c
commit
da1d02ccd1
GPG key ID:
159D6AD58C8E55E9
19 changed files with 2462 additions and 1 deletions
217
content/docs/charts.md
Normal file
217
content/docs/charts.md
Normal file
|
|
@ -0,0 +1,217 @@
|
|||
---
|
||||
title: "Charts"
|
||||
description: "Data-driven charts from semantic HTML tables using the data-chart attribute vocabulary. Absorbed from Charts.css."
|
||||
type: docs
|
||||
weight: 80
|
||||
date: 2026-04-09
|
||||
tags: ["charts", "css", "reference"]
|
||||
ai-disclosure: "generated"
|
||||
ai-model: "claude-sonnet-4-5"
|
||||
ai-provider: "Anthropic"
|
||||
|
||||
---
|
||||
|
||||
ASW includes a chart layer (`06-charts.css`) absorbed from [Charts.css](https://chartscss.org/) (MIT), with the class-based API converted to data-attributes. Charts are pure CSS — no JavaScript, no Canvas, no SVG.
|
||||
|
||||
The data source is a standard `<table>`. CSS turns it into a chart.
|
||||
|
||||
---
|
||||
|
||||
## How data binding works
|
||||
|
||||
Each `<td>` carries a `--size` CSS custom property via `style` attribute. This is the **one place** ASW permits inline styles — `style="--size: 0.8"` is data injection (a numeric value binding), not presentational styling.
|
||||
|
||||
```
|
||||
--size: 0.0 → 0%
|
||||
--size: 0.5 → 50%
|
||||
--size: 1.0 → 100%
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Bar chart
|
||||
|
||||
Horizontal bars. Each row is one bar.
|
||||
|
||||
```html
|
||||
<table data-chart="bar">
|
||||
<caption>Token budget usage</caption>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">Wake</th>
|
||||
<td style="--size: 0.15">15%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Research</th>
|
||||
<td style="--size: 0.62">62%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Output</th>
|
||||
<td style="--size: 0.23">23%</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Column chart
|
||||
|
||||
Vertical bars. Each `<td>` is one column.
|
||||
|
||||
```html
|
||||
<table data-chart="column">
|
||||
<caption>Sessions per day</caption>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="--size: 0.4">Mon</td>
|
||||
<td style="--size: 0.7">Tue</td>
|
||||
<td style="--size: 0.55">Wed</td>
|
||||
<td style="--size: 0.9">Thu</td>
|
||||
<td style="--size: 0.3">Fri</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Line chart
|
||||
|
||||
Connects data points with a line. Requires two `<td>` values per point: `--start` and `--end`.
|
||||
|
||||
```html
|
||||
<table data-chart="line">
|
||||
<caption>Uptime trend</caption>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="--start: 0.6; --end: 0.75"></td>
|
||||
<td style="--start: 0.75; --end: 0.8"></td>
|
||||
<td style="--start: 0.8; --end: 0.95"></td>
|
||||
<td style="--start: 0.95; --end: 0.98"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Area chart
|
||||
|
||||
Like a line chart but with the area beneath filled.
|
||||
|
||||
```html
|
||||
<table data-chart="area">
|
||||
<caption>Memory usage</caption>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="--start: 0.2; --end: 0.35"></td>
|
||||
<td style="--start: 0.35; --end: 0.5"></td>
|
||||
<td style="--start: 0.5; --end: 0.4"></td>
|
||||
<td style="--start: 0.4; --end: 0.6"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Axis labels
|
||||
|
||||
Add `data-chart-labels` to show `<thead>` column labels as axis labels.
|
||||
|
||||
```html
|
||||
<table data-chart="column" data-chart-labels>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Mon</th>
|
||||
<th scope="col">Tue</th>
|
||||
<th scope="col">Wed</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="--size: 0.4">40%</td>
|
||||
<td style="--size: 0.7">70%</td>
|
||||
<td style="--size: 0.55">55%</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Bar spacing
|
||||
|
||||
Control gap between bars with `data-chart-spacing="1"` through `"5"` (default is `2`).
|
||||
|
||||
```html
|
||||
<table data-chart="bar" data-chart-spacing="4">
|
||||
...
|
||||
</table>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Stacked charts
|
||||
|
||||
Multi-dataset mode. Each `<tr>` in `<tbody>` becomes a dataset (one colour per row).
|
||||
|
||||
```html
|
||||
<table data-chart="column" data-chart-stacked>
|
||||
<caption>Token usage by phase</caption>
|
||||
<tbody>
|
||||
<tr style="--color: var(--accent)">
|
||||
<td style="--size: 0.3"></td>
|
||||
<td style="--size: 0.4"></td>
|
||||
<td style="--size: 0.25"></td>
|
||||
</tr>
|
||||
<tr style="--color: var(--accent-blue)">
|
||||
<td style="--size: 0.2"></td>
|
||||
<td style="--size: 0.15"></td>
|
||||
<td style="--size: 0.3"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Custom colours
|
||||
|
||||
Override the default colour cycle with `style="--color: ..."` on any `<tr>`.
|
||||
|
||||
```html
|
||||
<tr style="--color: var(--accent-red)">
|
||||
<td style="--size: 0.85">Error rate</td>
|
||||
</tr>
|
||||
```
|
||||
|
||||
Default colour cycle (8 slots): accent → blue → orange → red → purple → cyan → pink → teal.
|
||||
|
||||
---
|
||||
|
||||
## Customising chart dimensions
|
||||
|
||||
Override chart size tokens on the `[data-chart]` element:
|
||||
|
||||
```html
|
||||
<table data-chart="column" style="
|
||||
--chart-height: 300px;
|
||||
--chart-bar-size: 3rem;
|
||||
--chart-gap: 8px;
|
||||
">
|
||||
```
|
||||
|
||||
| Token | Default | Description |
|
||||
|-------|---------|-------------|
|
||||
| `--chart-height` | `200px` | Column chart area height |
|
||||
| `--chart-bar-size` | `2rem` | Column bar width / bar chart bar height |
|
||||
| `--chart-gap` | `6px` | Gap between data points |
|
||||
|
||||
---
|
||||
|
||||
## Related
|
||||
|
||||
- [Token System](/docs/tokens/) — colour tokens used by the chart colour cycle (`--accent`, `--accent-blue`, etc.)
|
||||
- [Data Attributes](/docs/data-attributes/) — the broader `data-*` vocabulary of which `data-chart` is a part
|
||||
Loading…
Add table
Add a link
Reference in a new issue