openbridge-webcomponents external-scale.instructions.md

External Scale & Bar/Gauge Components

These instructions apply to the external scale renderer and its thin wrapper components (bar-vertical, bar-horizontal, gauge-vertical, gauge-horizontal, gauge-trend).

⚠️ IMPORTANT: Interconnected Components

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

• external-scale.ts ↔ bar-vertical.ts ↔ bar-horizontal.ts ↔ gauge-vertical.ts ↔ gauge-horizontal.ts ↔ gauge-trend.ts

When implementing a new feature or changing existing behavior:

1. Changes must cascade through ALL related components to maintain consistency
2. All wrappers expose similar properties with orientation-specific naming (e.g., height/width, paddingTop/paddingLeft)
3. If you add a property to bar-vertical, you likely need to add the equivalent to bar-horizontal, gauge-vertical, gauge-horizontal, gauge-trend and external-scale
4. If you add a config option to external-scale.ts, all wrappers need to expose and pass it
5. Gauge variants (gauge-vertical/gauge-horizontal/gauge-trend) may intentionally NOT expose certain properties (they use fixed values)

Before completing any change, verify:

• external-scale.ts has the core logic/config
• bar-vertical.ts exposes and maps the property correctly
• bar-horizontal.ts has the mirrored equivalent
• gauge-vertical.ts / gauge-horizontal.ts / gauge-trend.ts are updated if applicable
• All components remain API-consistent

Architecture Overview

The external scale system follows a renderer + wrapper pattern:

┌─────────────────────────────────────────────────────────────────┐
│                    external-scale.ts                            │
│            (Pure SVG renderer - all logic lives here)           │
│  • computeExternalScaleLayout()                                 │
│  • renderExternalScale()                                        │
│  • Layout calculations, coordinate mapping, theming             │
└─────────────────────────────────────────────────────────────────┘
                           ▲
                           │ imports
    ┌──────────────────────┼─────────────────────┬─────────────────────────┐
    │                      │                     │                         │
    ▼                      ▼                     ▼                         ▼
┌──────────────┐   ┌──────────────┐   ┌──────────────────────┐   ┌────────────────────┐
│ bar-vertical │   │bar-horizontal│   │ gauge-vertical/horiz │   │ gauge-trend        │
│   (Thin      │   │   (Thin      │   │ (Fixed-config thin   │   │ (Fixed-config thin │
│   wrapper)   │   │   wrapper)   │   │  wrappers)           │   │  wrapper)          │
└──────────────┘   └──────────────┘   └──────────────────────┘   └────────────────────┘