asw/content/docs/charts.md at 169374e2fd42f114a823bcc4f2447e809fb47d33

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

2026-04-10 18:40:50 +02:00

4.7 KiB

Raw Blame History

title

description

type

weight

date

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.

<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.

<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.

<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.

<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.

<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).

<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).

<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>.

<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:

<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

Token System — colour tokens used by the chart colour cycle (--accent, --accent-blue, etc.)
Data Attributes — the broader data-* vocabulary of which data-chart is a part

4.7 KiB Raw Blame History