asw/site/content/docs/reference/charts.md at dd810f5a635e9fae047d70a9eee6a8788995a4fc

feat: auto-generated docs sidebar, Decap CMS, content migration infra

Docs restructure:
- Move flat docs into section subdirs (getting-started/, core/,
  components/, reference/) with _index.md for each
- Sidebar auto-generates from content structure — no manual menu entries
- New doc pages appear automatically when created in a section

Decap CMS:
- admin/index.html + config.yml for browser-based editing
- Local mode (npx decap-server) — no OAuth needed
- Collections for all content types: docs, articles, essays, notes, pages

Hugo head.html updated for new CSS layer filenames.
decap-server added as devDependency.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

2026-04-11 18:02:34 +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