line-area-charts

Line/Area Charts & Gauge Trend

These instructions apply to the Chart.js-based line/area chart system and the composite gauge-trend component.

⚠️ IMPORTANT: Interconnected Components

All components in this system are tightly interconnected and share a common API surface:

• chart-line-base.ts ↔ line-graph.ts ↔ area-graph.ts ↔ gauge-trend.ts

Additionally, gauge-trend.ts bridges to the external-scale system (see external-scale.md):

• gauge-trend.ts → creates and manages → bar-vertical.ts (and possibly bar-horizontal.ts) → uses → external-scale.ts

When implementing a new feature or changing existing behavior:

1. Changes must cascade through ALL related components to maintain consistency
2. Base class properties should be available in all subclasses unless intentionally locked
3. If you add a feature to chart-line-base.ts, verify it works correctly in line-graph, area-graph, AND gauge-trend
4. If you change how external scales integrate, verify gauge-trend still syncs properties correctly
5. gauge-trend may intentionally lock certain base class properties (e.g., showGrid=false)

Before completing any change, verify:

• chart-line-base.ts has the core logic
• line-graph.ts works correctly (if applicable)
• area-graph.ts works correctly (if applicable)
• gauge-trend.ts works correctly AND syncs to its bar-vertical (or bar-horizontal or external-scale) child
• All components remain API-consistent

Architecture Overview

The line/area chart system follows an abstract base + thin subclass pattern:

┌─────────────────────────────────────────────────────────────────┐
│                     chart-line-base.ts                          │
│         (Abstract base class - all chart logic lives here)      │
│  • Chart.js setup & lifecycle                                   │
│  • Data handling (single-series, multi-series, time axis)       │
│  • Grid, ticks, labels, tooltips                                │
│  • External scale slot integration                              │
│  • Abstract methods: shouldApplyFill(), getFillMode(),          │
│                      shouldStack()                              │
└─────────────────────────────────────────────────────────────────┘
                              ▲
                              │ extends
    ┌─────────────────────────┼─────────────────────────┐
    │                         │                         │
    ▼                         ▼                         ▼
┌──────────────┐     ┌──────────────┐      ┌──────────────────────┐
│  line-graph  │     │  area-graph  │      │     gauge-trend      │
│   (Never     │     │   (Always    │      │ (Area chart + slotted│
│    fills)    │     │    fills)    │      │  bar-vertical scale) │
└──────────────┘     └──────────────┘      └──────────────────────┘