feat(echarts): implement area-mountain-panorama

[github-actions]

Implementation: area-mountain-panorama - javascript/echarts

Implements the javascript/echarts version of area-mountain-panorama.

File: plots/area-mountain-panorama/implementations/javascript/echarts.js

Parent Issue: #5365

---

🤖 impl-generate workflow

[claude]

AI Review - Attempt 1/3

Image Description

Light render (plot-light.png): Sky gradient background transitions from light blue (#BDD6E8) at the top through pale blue to warm cream (#FAF8F1) at the bottom, creating a photographic alpine sky. The mountain silhouette fills the lower ~60% of the chart as a very dark near-black charcoal gradient area. Sharp triangular peaks are clearly visible across the panorama (Weisshorn on the left, rising to Matterhorn at center, Liskamm and Dufourspitze on the right). All 12 peaks are annotated with thin leader lines rising to name+elevation two-line labels in the sky area. The Matterhorn is highlighted with a brand-green (#009E73) dot and bold green label, standing out clearly as the focal element. Y-axis labels ("2600 m" through "4900 m") and "Elevation (m)" axis name are visible on the left. All title, axis, and annotation text is readable against the light background. Name/elevation pairs for each peak are very tight (2px gap) but not completely illegible. Some horizontal crowding near Strahlhorn/Rimpfischhorn at the right edge.

Dark render (plot-dark.png): Background transitions from deep navy (#0B1624) at the top through dark navy-charcoal to warm near-black (#1A1A17) at the bottom — dusk/night alpine atmosphere, not pure black. The mountain silhouette takes on a warm olive-brown gradient (#38342E to #201E1A), creating pleasing contrast against the dark blue sky. All annotation text correctly renders in light colors (off-white/light-gray from t.ink/t.inkSoft tokens for dark theme). The Matterhorn remains highlighted in brand green (#009E73) — data colors are identical to the light render; only chrome flips. Title "Alpine Panorama · area-mountain-panorama · javascript · echarts · anyplot.ai" appears in light ink at top-center, clearly readable against the dark background. No dark-on-dark text failures detected. All text passes legibility in the dark render.

Both paragraphs are required. A review that only describes one render is invalid.

Score: 83/100

Category	Score	Max
Visual Quality	23	30
Design Excellence	15	20
Spec Compliance	15	15
Data Quality	13	15
Code Quality	10	10
Library Mastery	7	10
Total	83	100

Visual Quality (23/30)

• VQ-01: Text Legibility (6/8) — Title and axis labels readable in both themes; name/elevation label pairs have only a 2 CSS-px gap (y: ly + 2), making them essentially touching in output — all peaks affected
• VQ-02: No Overlap (4/6) — Name/elevation pairs extremely tight; some horizontal crowding near Strahlhorn/Rimpfischhorn (5° apart, long names, xShifts ±8 insufficient) and Pollux/Castor; staggering partially mitigates
• VQ-03: Element Visibility (5/6) — Mountain silhouette and annotations clearly visible; peak dots at 3 CSS-px are on the small side but distinguishable
• VQ-04: Color Accessibility (2/2) — Brand green #009E73 as sole data color is CVD-safe; no red-green as sole signal
• VQ-05: Layout & Canvas (3/4) — Canvas gate passed. Good landscape proportions; grid.top=230 provides adequate annotation zone but slightly crowded with 12 peaks
• VQ-06: Axis Labels & Title (2/2) — Y-axis "Elevation (m)" with meter values; x-axis appropriately hidden for a bearing panorama; title descriptive
• VQ-07: Palette Compliance (1/2) — Brand green correctly used as Matterhorn focal color ✓; however backgroundColor overrides t.pageBg token with custom gradient hex values (#BDD6E8, #D8EBF2 etc.) and mountain fill uses non-Imprint custom hexes (#302C26, #1A1816, #423A30 etc.) — ECharts library guide requires transparent or t.pageBg

Design Excellence (15/20)

• DE-01: Aesthetic Sophistication (6/8) — Above default: sky gradient + mountain silhouette gradient + Matterhorn focal highlight create genuine photographic alpine atmosphere; intentional visual hierarchy
• DE-02: Visual Refinement (4/6) — Clean: no spines, subtle horizontal grid, hidden x-axis, thin leader lines; slight deduction for annotation zone crowding in upper half
• DE-03: Data Storytelling (5/6) — Matterhorn as visual focal point (brand green), left-to-right panoramic sweep narrative, atmospheric depth from theme-adaptive sky gradient — effective alpine storytelling

Spec Compliance (15/15)

• SC-01: Plot Type (5/5) — Mountain panorama silhouette with filled area; piecewise-linear jagged peaks (not Gaussian bumps); correct chart type
• SC-02: Required Features (4/4) — All features present: jagged ridgeline, summit annotations (name + elevation), leader lines, Matterhorn focal element, sky gradient, label staggering, elevation y-axis, hidden x-axis
• SC-03: Data Mapping (3/3) — Bearing on x-axis (0–105°), elevation in meters on y-axis (2600–4900 m); all 12 Wallis peaks correctly positioned
• SC-04: Title & Legend (3/3) — "Alpine Panorama · area-mountain-panorama · javascript · echarts · anyplot.ai" follows {Descriptive} · {spec-id} · {lang} · {lib} · anyplot.ai; no legend appropriate for single thematic series

Data Quality (13/15)

• DQ-01: Feature Coverage (5/6) — Comprehensive: silhouette, 12 annotated peaks, leader lines, staggering, sky gradient, focal element; optional depth layers (layered foreground/background ridges) not implemented
• DQ-02: Realistic Context (5/5) — Wallis (Valais) panorama from Zermatt with historically accurate peak elevations; neutral geographic context, no controversy
• DQ-03: Appropriate Scale (3/4) — Y-axis 2600–4900 m appropriate; 12 peaks within spec's 10–20 range; only 77 ridgeline data points vs spec's 500–2000 recommendation — missing fine-grained jagged ridge detail

Code Quality (10/10)

• CQ-01: KISS Structure (3/3) — No functions or classes; flat sequential data → chart setup → graphics loop
• CQ-02: Reproducibility (2/2) — Fully deterministic: all data hard-coded, no RNG
• CQ-03: Clean Imports (2/2) — No imports needed; all variables used
• CQ-04: Code Elegance (2/2) — Clean ECharts idiomatic code; no fake interactivity; peaks loop concise
• CQ-05: Output & API (1/1) — animation: false set; echarts.init without explicit size or devicePixelRatio; harness handles output

Library Mastery (7/10)

• LM-01: Idiomatic Usage (4/5) — Uses line + areaStyle for filled area, graphic API for custom vector shapes, convertToPixel for coordinate mapping — above-default ECharts usage
• LM-02: Distinctive Features (3/5) — chart.convertToPixel('grid', [x, y]) for pixel-accurate annotation placement, dual chart.setOption calls to layer graphics, backgroundColor gradient object — genuinely distinctive ECharts capabilities

Score Caps Applied

• None

Strengths

• Sharp piecewise-linear ridgeline correctly avoids smooth Gaussian bumps, producing an authentic alpine silhouette as the spec requires
• Matterhorn highlighted in brand green (#009E73) with a larger dot and bold label, creating a clear focal point consistent with spec intent
• Sky gradient adapts beautifully to both themes: light-blue-to-cream in light mode, deep-navy-to-near-black in dark mode — authentic photographic alpine atmosphere
• Advanced use of ECharts chart.convertToPixel('grid', [x, y]) for pixel-accurate graphic annotation placement — idiomatic and sophisticated
• Complete spec compliance: panorama type, sky gradient, leader lines, staggered labels, elevation y-axis, hidden x-axis — every required feature present
• Clean flat code structure with hard-coded deterministic ridgeline data

Weaknesses

• Name/elevation label pairs have only a 2 CSS-px vertical gap (y: ly + 2 with textBaseline: 'top'), making them essentially touching — increase to at least 12–14px (e.g., y: ly + 14) so each two-line label breathes properly
• Only 77 hand-crafted ridgeline points vs the spec's 500–2000 sample range — silhouette lacks the fine irregular jaggedness (midpoint-displacement noise, jittered sub-peaks) called for along ridges between main summits; add higher-frequency noise to the flanks
• backgroundColor overrides t.pageBg token with custom multi-stop gradient using non-Imprint hex values — ECharts guide requires transparent or t.pageBg; sky gradient should ideally be layered differently (e.g., a background custom series or visualMap piecewise)
• Mountain silhouette fill and ridgeline stroke use custom non-Imprint hex values (#302C26, #1A1816, #423A30 etc.) — prefer using t.inkSoft / t.ink as the neutral anchor colors so dark mode adapts cleanly via tokens
• Horizontal label overlap risk at Strahlhorn/Rimpfischhorn (93°/98°, 5° separation, long names, xShifts ±8 insufficient) — increase to ±16 or add a second alternating yOffset tier for these two peaks

Issues Found

1. VQ-01/VQ-02 TIGHT: 2px gap between peak name and elevation label (y: ly + 2) is too small
   • Fix: Change y: ly + 2 to y: ly + 14 in the elevation text graphic element to give the two-line label proper breathing room
2. VQ-07 PARTIAL: backgroundColor uses non-Imprint custom gradient; mountain fill uses custom hex values
   • Fix: Replace mountain fill colors with t.inkSoft (for fillTop) and t.ink (for fillBottom) so they adapt via tokens; for the sky gradient, use a more restrained approach or accept as spec-justified creative choice

AI Feedback for Next Attempt

Primary fix: change the elevation label y-offset from ly + 2 to ly + 14 to give name/elevation pairs proper vertical breathing room. Secondary fix: increase Strahlhorn/Rimpfischhorn xShifts to ±16 to prevent horizontal crowding. For palette compliance, replace the mountain fill custom hexes with t.inkSoft/t.ink theme tokens so dark-mode adaptation works purely through the token system.

Verdict: APPROVED

[github-actions]

🔧 Repair Attempt 1/4

Applied fixes based on AI review feedback.

Status: Repair completed, re-triggering review...

---

🤖 impl-repair

[claude]

AI Review - Attempt 2/3

Image Description

Light render (plot-light.png): The plot renders on a warm off-white (#FAF8F1) background. The title "Alpine Panorama · area-mountain-panorama · javascript · echarts · anyplot.ai" is clearly visible in dark ink at the top center. A near-black mountain silhouette (using t.ink = #1A1A17) fills the lower portion of the chart, with a subtle sky gradient in Imprint blue (#4467A3 at 32% opacity) occupying the area above the ridgeline. Twelve labeled peaks appear with thin leader lines rising from summit dots to two-line labels (peak name bold above, elevation in meters below), staggered at alternating heights to avoid overlap. The Matterhorn is highlighted with a brand-green (#009E73) dot and green label text, making it an unmistakable focal point. Y-axis tick labels ("2600 m", "3000 m", "3500 m", "4000 m", "4500 m", "4900 m") are readable; x-axis is correctly hidden. Elevation sub-labels at 11px are small but legible at canvas size. All text is readable against the light background.

Dark render (plot-dark.png): The background is near-black (#1A1A17). The mountain silhouette inverts to white/cream (#F0EFE8 = t.ink in dark mode), creating a striking snow-mountain-on-night-sky aesthetic. The sky gradient is more vivid in dark mode (Imprint blue at 75% opacity at top), giving a dramatic alpine twilight feel. Title and all axis labels render in the appropriate light-on-dark colors. All twelve peak annotations remain readable — peak names in light cream, elevation labels in light gray (#B8B7B0), the Matterhorn label still in brand green (#009E73) which reads cleanly against the dark sky. No dark-on-dark failures observed. Data colors (Imprint blue sky, brand green Matterhorn) are identical to the light render; only chrome flips. Both renders pass readability checks.

Score: 91/100

Category	Score	Max
Visual Quality	28	30
Design Excellence	14	20
Spec Compliance	15	15
Data Quality	15	15
Code Quality	10	10
Library Mastery	9	10
Total	91	100

Visual Quality (28/30)

• VQ-01: Text Legibility (6/8) — all font sizes explicitly set; peak names at 13–15px and elevations at 11px are readable at canvas size, though the 11px elevation sub-labels are small when scaled to mobile width
• VQ-02: No Overlap (6/6) — staggered yOffsets and xShifts for clustered pairs (Pollux/Castor, Strahlhorn/Rimpfischhorn) eliminate overlap effectively
• VQ-03: Element Visibility (6/6) — dark mountain silhouette, summit dots, and leader lines clearly visible in both themes
• VQ-04: Color Accessibility (2/2) — Imprint palette with brand green focal point; CVD-safe
• VQ-05: Layout & Canvas (4/4) — landscape orientation ideal for panoramic view; generous top margin (grid top: 230) provides annotation space; balanced margins
• VQ-06: Axis Labels & Title (2/2) — Y-axis "Elevation (m)" with units; title descriptive; X-axis hidden per spec allowance
• VQ-07: Palette Compliance (2/2) — t.pageBg for background, t.palette set as ECharts color array, t.palette[0] (#009E73) for Matterhorn focal point, Imprint blue (#4467A3 = palette[2]) for sky gradient; both renders theme-correct

Design Excellence (14/20)

• DE-01: Aesthetic Sophistication (6/8) — visually striking composition: dark silhouette against Imprint-blue sky gradient, intentional Matterhorn focal point in brand green, clean typography hierarchy; well above generic defaults
• DE-02: Visual Refinement (4/6) — X-axis hidden (cleaner), Y-axis-only subtle grid lines, generous whitespace above mountains for annotations; minor spacing inconsistencies in left cluster (Weisshorn/Zinalrothorn/Ober Gabelhorn) prevent a perfect score
• DE-03: Data Storytelling (4/6) — Matterhorn reads as the focal peak via brand green; leader lines guide the viewer summit by summit; real Wallis geographic data provides authentic storytelling; falls short of excellent as the green contrast could be more dramatic vs. inkSoft annotations

Spec Compliance (15/15)

• SC-01: Plot Type (5/5) — correct mountain panorama area chart with filled silhouette
• SC-02: Required Features (4/4) — piecewise-linear ridgeline with sharp triangular apexes, varied slope steepness per summit, filled area below ridgeline, sky gradient, peak annotations with leader lines (name over elevation), staggered label positions, Matterhorn as visual focal point, Y-axis sensible lower bound (2600 m)
• SC-03: Data Mapping (3/3) — bearing (0–105°) on X, elevation (m) on Y; all 12 peaks correctly placed at specified coordinates
• SC-04: Title & Legend (3/3) — "Alpine Panorama · area-mountain-panorama · javascript · echarts · anyplot.ai" matches the optional-prefix format; no legend needed for single-series

Data Quality (15/15)

• DQ-01: Feature Coverage (6/6) — varied peak heights, steep asymmetric flanks, cols/saddles between summits, 12 labeled peaks from Weisshorn to Rimpfischhorn
• DQ-02: Realistic Context (5/5) — authentic Wallis (Valais) panorama from Zermatt with real peak names; neutral geographic/alpine content
• DQ-03: Appropriate Scale (4/4) — all elevations factually correct: Dufourspitze 4634 m (highest in Switzerland), Matterhorn 4478 m, Weisshorn 4506 m; Y-axis starting at 2600 m matches Zermatt valley elevation

Code Quality (10/10)

• CQ-01: KISS Structure (3/3) — flat structure: constants → data → init → setOption → graphics loop; no functions or classes
• CQ-02: Reproducibility (2/2) — fully deterministic hard-coded ridge and peak data; no RNG
• CQ-03: Clean Imports (2/2) — no imports; echarts is a global; no unused declarations
• CQ-04: Code Elegance (2/2) — clean, appropriate complexity; two-pass setOption pattern is the correct ECharts idiom for graphic overlays
• CQ-05: Output & API (1/1) — echarts.init/setOption without explicit size/devicePixelRatio per library rules; animation: false set; harness handles file output

Library Mastery (9/10)

• LM-01: Idiomatic Usage (5/5) — expert use of ECharts: graphic component for SVG-like annotations, z-index layering of series, linear gradient in areaStyle, animation disabled per requirements
• LM-02: Distinctive Features (4/5) — chart.convertToPixel('grid', [angle, elev]) is a distinctive ECharts API for data→pixel coordinate conversion; two-step setOption for graphics overlay; z-layer control (z:-1 / z:0 / z:20) is library-specific

Score Caps Applied

• None

Strengths

• Authentic Wallis/Valais panorama data with factually correct Swiss Alps peak elevations
• Sharp piecewise-linear ridgeline correctly implements alpine silhouette (no Gaussian bumps)
• Matterhorn focal point immediately reads via brand green (#009E73) — spec's primary design requirement fulfilled
• Sky gradient uses Imprint blue (palette[2] = #4467A3), keeping palette compliance while adding atmospheric depth
• chart.convertToPixel for dynamic leader-line positioning is the correct idiomatic approach in ECharts
• Fully deterministic, self-contained implementation; animation:false; correct ECharts init pattern

Weaknesses

• Peak elevation sub-labels at 11px are small; consider bumping to 12–13px for better mobile readability when scaled to ~400px width
• Left cluster (Weisshorn, Zinalrothorn, Ober Gabelhorn) has tight horizontal spacing; minor xShifts could improve visual breathing room
• Dark-mode silhouette inverts to white/cream (t.ink) — creative and visually compelling, but slightly deviates from the spec's "dark solid color, evening/dusk feel" directive

Issues Found

1. VQ-01 MINOR: Peak elevation sub-labels at 11px are the smallest text in the chart; at mobile widths they may become illegible
   • Fix: Increase elevation sub-label fontSize from 11 to 12–13px

AI Feedback for Next Attempt

Implementation is high quality and approved. If repair is triggered, focus only on bumping the 11px elevation labels to 12–13px and optionally adding small xShifts for the Weisshorn/Zinalrothorn/Ober Gabelhorn left cluster for additional breathing room.

Verdict: APPROVED