ScoreHistoryChartComponent

Timeline visualization showing how a finding’s evidence-weighted score has changed over time.

Overview

The ScoreHistoryChartComponent renders an SVG line chart displaying score history with interactive data points and bucket-colored bands.

Selector

<stella-score-history-chart />

Inputs

Input	Type	Default	Description
`history`	`ScoreHistoryEntry[]`	`[]`	Array of historical score entries
`width`	`number \| 'auto'`	`'auto'`	Chart width in pixels
`height`	`number`	`200`	Chart height in pixels
`showBands`	`boolean`	`true`	Show bucket background bands
`showGrid`	`boolean`	`true`	Show horizontal grid lines
`showRangeSelector`	`boolean`	`false`	Show date range filter controls

Outputs

Output	Type	Description
`pointHover`	`EventEmitter<ScoreHistoryEntry>`	Emits when hovering over a data point
`pointClick`	`EventEmitter<ScoreHistoryEntry>`	Emits when clicking a data point

History Entry Structure

interface ScoreHistoryEntry {
  score: number;               // 0-100
  bucket: ScoreBucket;
  policyDigest: string;        // SHA-256 of active policy
  calculatedAt: string;        // ISO 8601 timestamp
  trigger: ScoreChangeTrigger;
  changedFactors: string[];    // ['rch', 'rts', ...]
}

type ScoreChangeTrigger =
  | 'evidence_update'   // New evidence received
  | 'policy_change'     // Scoring policy modified
  | 'scheduled';        // Periodic recalculation

Chart Features

Bucket Bands

Colored background regions showing score thresholds:

Act Now (90-100): Light red
Schedule Next (70-89): Light amber
Investigate (40-69): Light blue
Watchlist (0-39): Light gray

Data Points

Interactive markers with trigger-type indicators:

Circle: evidence_update
Diamond: policy_change
Square: scheduled

Tooltips

Hover over any point to see:

Score and bucket
Timestamp
Trigger type
Changed factors (if any)

Date Range Selector

When enabled, provides filtering options:

Preset ranges: 7d, 30d, 90d, 1y, All
Custom date range picker

Usage Examples

Basic Usage

<stella-score-history-chart [history]="scoreHistory" />

Custom Dimensions

<stella-score-history-chart
  [history]="scoreHistory"
  [width]="600"
  [height]="250"
/>

Minimal Chart

<stella-score-history-chart
  [history]="scoreHistory"
  [showBands]="false"
  [showGrid]="false"
  [height]="150"
/>

With Date Range Selector

<stella-score-history-chart
  [history]="extendedHistory"
  [showRangeSelector]="true"
/>

Responsive Width

<div class="chart-container">
  <stella-score-history-chart
    [history]="scoreHistory"
    width="auto"
  />
</div>

.chart-container {
  width: 100%;
  min-width: 300px;
}

With Event Handlers

<stella-score-history-chart
  [history]="scoreHistory"
  (pointClick)="showEntryDetails($event)"
  (pointHover)="updateTooltip($event)"
/>

showEntryDetails(entry: ScoreHistoryEntry): void {
  console.log('Clicked entry:', entry);
  this.selectedEntry = entry;
}

updateTooltip(entry: ScoreHistoryEntry | null): void {
  this.hoveredEntry = entry;
}

Date Range Presets

Preset	Label	Filter
`7d`	Last 7 days	Entries from past week
`30d`	Last 30 days	Entries from past month
`90d`	Last 90 days	Entries from past quarter
`1y`	Last year	Entries from past 12 months
`all`	All time	No filtering
`custom`	Custom range	User-selected dates

Visualization Details

Line Chart

Smooth curve interpolation
Area fill under the line with gradient opacity
Score range always 0-100 on Y-axis

Grid Lines

Horizontal lines at bucket boundaries (40, 70, 90)
Vertical lines at regular time intervals

Time Axis

Auto-formats based on date range
Labels: Jan 15, Feb 1, etc.

Loading State

When history is empty or loading:

<stella-score-history-chart [history]="[]" />
<!-- Displays: "No history available" -->

Accessibility

SVG includes role="img" with descriptive aria-label
Data points are keyboard focusable
Tooltip content read by screen readers
Color not the only indicator (shape markers)

Styling

stella-score-history-chart {
  --chart-line-color: #3b82f6;
  --chart-area-fill: rgba(59, 130, 246, 0.1);
  --chart-point-size: 6px;
  --chart-font-family: system-ui, sans-serif;
}

Performance

Uses requestAnimationFrame for smooth animations
Virtualizes data points when > 100 entries
Debounces resize observer

ScorePill - Current score display
ScoreBreakdownPopover - Current score breakdown