Summary Statistics

Compact components for embedding session stats at a glance. Two kinds: a sparkline that shows typing speed over time, and pill badges that surface key metrics from a session analysis. Both are designed for inline use – drop them into dashboards, sidebars, or summary views.

Sparkline <wt-sparkline>

Compact typing speed chart with no axes or labels – designed for inline use.

import { Sparkline } from 'writetrack/viz';

Sparkline.register();

document.querySelector('wt-sparkline').setData(tracker.getData());

<wt-sparkline style="width: 200px; height: 40px;"></wt-sparkline>

Note that sparkline consumes raw WriteTrackDataSchema from getData(), not analysis data.

Programmatic factory:

const sparkline = Sparkline.create(containerElement, tracker.getData());

Default sizing: 200×40px. Override with inline styles or CSS custom properties.

Stat Badge <wt-badge>

Pill badges that surface a single metric from a session analysis. Each badge shows a label and a color-coded value – green for clear, red for flagged, grey for neutral.

import { WtBadge } from 'writetrack/viz';

WtBadge.register();

const analysis = await tracker.getAnalysis();
document.querySelectorAll('wt-badge').forEach((el) => el.setData(analysis));

Effort Ratio

Total keystrokes divided by final text length. Values above 1.0× reflect natural revision and editing work (backspaces, corrections, rewording). Below 1.0× suggests content arrived via paste or programmatic insertion rather than typing. Status: clear when ≥ 1.0, flag when < 1.0.

<wt-badge metric="effort-ratio"></wt-badge>

Largest Paste

The single largest paste event as a percentage of final text length. High values indicate bulk content insertion. Always neutral status.

<wt-badge metric="largest-paste"></wt-badge>

Corrections

Breakdown of deletion activity into two categories. “Typo” corrections happen at the text frontier – fixing what was just typed. “Revision” corrections happen earlier in the document – reworking prior text. The split reveals whether editing is reactive (fixing typos) or deliberate (revising ideas). Always neutral status.

<wt-badge metric="corrections"></wt-badge>

Tab-Aways

Number of times the user switched focus away from the writing surface. Always neutral status.

<wt-badge metric="tab-aways"></wt-badge>

Attributes

Attribute	Type	Default	Description
metric	string	(required)	Which metric to display: effort-ratio, largest-paste, corrections, tab-aways
theme	string	auto	"light" or "dark". Overrides ancestor data-theme and prefers-color-scheme.
data	string	undefined	JSON-serialized SessionAnalysis. Alternative to setData().
label	string	undefined	Custom aria-label for accessibility.

extractStatBadges()

Standalone data extraction for use without the web component:

import { extractStatBadges } from 'writetrack/viz';

const badges = extractStatBadges(analysis);
// Returns: StatBadge[] – each with label, value, status, metric

CSS Custom Properties

Badge theming variables:

Property	Description
--wt-color-clear	Clear status background
--wt-color-flag	Flag status background
--wt-color-border	Badge border, neutral bg
--wt-color-text	Neutral value text color
--wt-color-text-muted	Label text color
--wt-font-data	Value font
--wt-font-ui	Label font