SVG chart primitives

Preview Available in release assets

Render server-shaped SVG charts with a concise textual summary and equivalent semantic data table.

Server contract

GET /reports/services?q=<query>&sort=<enum> returns the complete view. Enhanced GET /api/data-display returns one deterministic datastar-patch-elements fragment. Server output owns table rows and chart geometry.

Without Datastar, native GET controls, sort links, table navigation, chart summary, and equivalent data table remain complete.

SVG chart primitives primary example

<figure class="thin-svg-chart-primitives" aria-labelledby="traffic-chart-title" aria-describedby="traffic-chart-summary">
  <svg viewBox="0 0 640 240" role="img">
    <title id="traffic-chart-title">Requests by service</title>
    <desc>Gateway has 12,480 requests, Catalog has 8,240, and Preview has 3,100.</desc>
    <g aria-hidden="true">
      <line x1="80" y1="200" x2="620" y2="200">
      </line>
      <rect x="110" y="40" width="100" height="160">
      </rect>
      <rect x="270" y="94" width="100" height="106">
      </rect>
      <rect x="430" y="160" width="100" height="40">
      </rect>
    </g>
  </svg>
  <figcaption id="traffic-chart-summary">
    <p>Gateway received the most traffic: 12,480 requests.</p>
    <table>
      <caption>Chart data</caption>
      <thead>
        <tr>
          <th scope="col">Service</th>
          <th scope="col">Requests</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">Gateway</th>
          <td>12,480</td>
        </tr>
        <tr>
          <th scope="row">Catalog</th>
          <td>8,240</td>
        </tr>
        <tr>
          <th scope="row">Preview</th>
          <td>3,100</td>
        </tr>
      </tbody>
    </table>
  </figcaption>
</figure>

Show code

<figure class="thin-svg-chart-primitives" aria-labelledby="traffic-chart-title" aria-describedby="traffic-chart-summary">
  <svg viewBox="0 0 640 240" role="img">
    <title id="traffic-chart-title">Requests by service</title>
    <desc>Gateway has 12,480 requests, Catalog has 8,240, and Preview has 3,100.</desc>
    <g aria-hidden="true">
      <line x1="80" y1="200" x2="620" y2="200">
      </line>
      <rect x="110" y="40" width="100" height="160">
      </rect>
      <rect x="270" y="94" width="100" height="106">
      </rect>
      <rect x="430" y="160" width="100" height="40">
      </rect>
    </g>
  </svg>
  <figcaption id="traffic-chart-summary">
    <p>Gateway received the most traffic: 12,480 requests.</p>
    <table>
      <caption>Chart data</caption>
      <thead>
        <tr>
          <th scope="col">Service</th>
          <th scope="col">Requests</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">Gateway</th>
          <td>12,480</td>
        </tr>
        <tr>
          <th scope="row">Catalog</th>
          <td>8,240</td>
        </tr>
        <tr>
          <th scope="row">Preview</th>
          <td>3,100</td>
        </tr>
      </tbody>
    </table>
  </figcaption>
</figure>

Anatomy

Labelled server-rendered SVG
Text description
Decorative geometry group
Visible summary
Equivalent captioned table

Variants and sizes

Operational data
Financial data
Long localized labels
RTL

Gallery coverage: No structured variant fixtures are published yet; the primary example above is the only verified production markup.

States and difficult content

Rendered fixtures exercise authored content and constrained layouts with the same production assets.

Results
Sorted
Filtered
Pending
Empty
Server error
Disconnected
Reconnected
Long data
RTL

Structured state fixtures are not published for this item yet.

Interaction and keyboard behavior

The server owns filtering, sorting, aggregation, scales, labels, and SVG geometry. Ordinary GET forms and links are canonical; Datastar may patch returned table/chart HTML. No client grid, data-shaping layer, or chart engine is included.

Accessibility

Preserve caption, thead/tbody, scope headers, numeric text, a labelled keyboard-scrollable overflow region, SVG title/description, visible summary, and an equivalent table. Announce concise server counts/errors, not every cell or SVG mark.

Contract

COMPOSE

Basis

Native figure, SVG title/description, visible summary, and equivalent table; no APG Grid claim

Evidence

tests/unit/library/data-display.test.ts

API

Behavior tier: datastar-required

Structured host, property, and example tables are not authored for this item yet. Use the summary above and the primary example.

Fallback

Without Datastar, native GET controls, sort links, table navigation, chart summary, and equivalent data table remain complete.

Assets and dependencies

/foundation.css
/components.css

Dependencies: datastar@1.0.2, responsive-table, status

Source: packages/ui/src/items/data-display/style.ts