Scorecard

The <wt-scorecard> custom element renders a complete session analysis report — header, stat badges, narrative summary, origin bar, analysis grid, and interactive detail panels with embedded charts.

Live Demo

Select a session below to see the scorecard — click any category preview to view its full chart and metrics.

Session: Choose a session…

Quick Start

import { WtScorecard } from 'writetrack/viz';

// Register the custom element (once, at app startup)
WtScorecard.register();

<wt-scorecard id="scorecard"></wt-scorecard>

// Feed data from a tracker session
const report = await tracker.getSessionReport();
document.querySelector('#scorecard').setData(report);

Or use the data attribute for declarative usage:

<wt-scorecard data='{"data": ..., "analysis": ...}'></wt-scorecard>

Attributes

Attribute	Type	Default	Description
theme	string	auto	"light" or "dark". Overrides ancestor data-theme and prefers-color-scheme.
share	boolean	false	Show share button and make QR code clickable.
download	boolean	false	Show download button.
data	string	undefined	JSON-serialized SessionReport. Alternative to setData().
compact	boolean	false	Compact/sparkline rendering mode.
label	string	undefined	Custom aria-label for accessibility.

Boolean attributes are set by presence: <wt-scorecard share download>.

Methods

setData()

setData(data: SessionReport): void

Set session data and trigger a full re-render. Accepts a SessionReport containing both raw capture data and WASM analysis.

const report = await tracker.getSessionReport();
scorecard.setData(report);

getData()

getData(): SessionReport | null

Retrieve the current session data, or null if no data has been set.

register()

static register(): void

Register the <wt-scorecard> custom element with the browser. Call once before creating elements.

Events

wt-share

Fired when the share button or QR code is clicked.

scorecard.addEventListener('wt-share', (e) => {
  const { report } = e.detail;
  // Generate shareable link, copy to clipboard, etc.
});

Detail: { report: SessionReport } Bubbles: true | Composed: true

wt-download

Fired when the download button is clicked.

scorecard.addEventListener('wt-download', (e) => {
  const { report } = e.detail;
  // Trigger file download, export to PDF, etc.
});

Detail: { report: SessionReport } Bubbles: true | Composed: true

wt-render

Fired when rendering completes. Useful for measuring render performance or triggering post-render actions.

Detail: none Bubbles: false

Theming

The scorecard respects theme in this priority order:

1. theme attribute — <wt-scorecard theme="dark">
2. Ancestor data-theme — <div data-theme="dark"><wt-scorecard></div>
3. prefers-color-scheme — System preference

CSS Custom Properties

Override these on the wt-scorecard element or an ancestor to customize the look.

Colors

Property	Description
--wt-scorecard-bg	Main background
--wt-scorecard-bg-card	Cell card background
--wt-scorecard-bg-card-hover	Card hover state
--wt-scorecard-bg-card-flagged	Flagged cell background
--wt-scorecard-bg-detail	Detail panel background
--wt-scorecard-text	Primary text
--wt-scorecard-text-secondary	Secondary text
--wt-scorecard-text-tertiary	Tertiary/muted text
--wt-scorecard-border	Border color
--wt-scorecard-border-heavy	Heavy border
--wt-scorecard-status-clear	Pass/clear status
--wt-scorecard-status-flagged	Flagged/fail status

Chart Colors

Property	Description
--wt-scorecard-chart-line	Chart line color
--wt-scorecard-chart-accent	Chart accent color
--wt-scorecard-chart-flagged	Chart flagged color
--wt-scorecard-chart-tertiary	Chart tertiary color
--wt-scorecard-chart-cyan	Chart cyan (paste) color

Fonts

Property	Description
--wt-scorecard-font-display	Display font (titles, headers)
--wt-scorecard-font-data	Data/code font
--wt-scorecard-font-body	Body text font

Example

wt-scorecard {
  --wt-scorecard-bg: #0a0a0a;
  --wt-scorecard-font-display: 'Inter', sans-serif;
  --wt-scorecard-status-clear: #22c55e;
}