feat(altair): implement indicator-rsi

[github-actions]

Implementation: indicator-rsi - python/altair

Implements the python/altair version of indicator-rsi.

File: plots/indicator-rsi/implementations/python/altair.py

Parent Issue: #3229

---

🤖 impl-generate workflow

[claude]

AI Review - Attempt 1/3

Image Description

Light render (plot-light.png): The visualization displays an RSI (Relative Strength Index) momentum indicator on a warm off-white background (#FAF8F1). The main RSI line is rendered in blue (#0072B2) and clearly shows momentum fluctuations over a 140-day period, with values ranging from approximately 20 to 65 RSI. The plot includes three key threshold reference lines (dashed): the oversold threshold at 30 (green), neutral centerline at 50 (gray), and overbought threshold at 70 (red). The overbought zone (70-100) is shaded with a light red overlay at ~12% opacity, and the oversold zone (0-30) is shaded with a light green overlay. The y-axis is fixed from 0 to 100 as required. Title reads "indicator-rsi · altair · anyplot.ai" with subtitle "14-Period RSI with Overbought/Oversold Zones". All text elements including axis labels (Date, RSI Value), tick labels, and the legend are clearly readable against the light background with appropriate sizing (title 28px, labels 22px, ticks 18px). The legend "Thresholds" is positioned in the bottom-left corner with proper theme coloring.

Dark render (plot-dark.png): The same RSI indicator is rendered on a warm near-black background (#1A1A17). The data colors remain identical to the light render: the RSI line is still #0072B2 (blue), zone shading uses the same red and green colors, and threshold lines use matching colors. All chrome elements (title, axis labels, tick labels, legend) have flipped to light colors appropriate for dark backgrounds—text appears in light gray (#F0EFE8) for primary elements and lighter secondary gray (#B8B7B0) for secondary elements. All text remains clearly readable against the dark background with no dark-on-dark legibility issues. Grid lines are subtle at ~10% opacity and visible in both renders. The legend and all interactive elements are properly themed. Both renders confirm that theme-adaptive chrome works correctly while data colors remain consistent.

Score: 85/100

Category	Score	Max
Visual Quality	29	30
Design Excellence	8	20
Spec Compliance	15	15
Data Quality	15	15
Code Quality	9	10
Library Mastery	9	10
Total	85	100

Visual Quality (29/30)

• VQ-01: Text Legibility (8/8) - All font sizes explicitly set and clearly readable in both light and dark themes
• VQ-02: No Overlap (6/6) - No overlapping text elements; title, axis labels, legend all well-positioned
• VQ-03: Element Visibility (6/6) - RSI line, threshold lines, and zone rectangles all clearly visible and appropriately sized
• VQ-04: Color Accessibility (2/2) - Semantic color coding (red/green) provides good contrast; no CVD issues
• VQ-05: Layout & Canvas (4/4) - Perfect layout with balanced margins; plot fills appropriate portion of canvas
• VQ-06: Axis Labels & Title (2/2) - Descriptive labels ("Date", "RSI Value") with proper title format
• VQ-07: Palette Compliance (1/2) - RSI line uses #0072B2 (Okabe-Ito position 3) instead of required #009E73 for first series; theme-chrome is perfect in both renders

Design Excellence (8/20)

• DE-01: Aesthetic Sophistication (4/8) - Well-configured library defaults, professional but not exceptional; functional design without artistic polish
• DE-02: Visual Refinement (2/6) - Minimal customization beyond library defaults; grid is subtle but no special visual refinement
• DE-03: Data Storytelling (2/6) - Data displayed straightforwardly without visual hierarchy or emphasis; no narrative focus

Spec Compliance (15/15)

• SC-01: Plot Type (5/5) - Correct RSI momentum chart with zones and threshold lines
• SC-02: Required Features (4/4) - All spec features present: 0-100 fixed Y-axis, thresholds at 30/50/70, overbought/oversold zones, RSI line, 14-period lookback noted
• SC-03: Data Mapping (3/3) - Date on X-axis, RSI on Y-axis; all data properly visible
• SC-04: Title & Legend (3/3) - Title format correct; legend labels match thresholds

Data Quality (15/15)

• DQ-01: Feature Coverage (6/6) - Example data shows all RSI aspects: oversold periods, overbought periods, neutral zones, varied momentum
• DQ-02: Realistic Context (5/5) - Real stock trading scenario with 14-period RSI calculation over 140 days
• DQ-03: Appropriate Scale (4/4) - RSI calculation is mathematically correct; values appropriately distributed 0-100

Code Quality (9/10)

• CQ-01: KISS Structure (3/3) - Clean linear flow: imports → data generation → chart → save
• CQ-02: Reproducibility (2/2) - np.random.seed(42) ensures deterministic output
• CQ-03: Clean Imports (2/2) - All imports used; no extraneous dependencies
• CQ-04: Code Elegance (1/2) - Generally clean, but importlib loader for altair is unusual; standard import would be simpler
• CQ-05: Output & API (1/1) - Correct output format with scale_factor=3.0

Library Mastery (9/10)

• LM-01: Idiomatic Usage (5/5) - Expert use of altair API: Chart(), layering, encoding, configure_axis, theme-adaptive colors
• LM-02: Distinctive Features (4/5) - Uses altair-specific features: layering (alt.layer), zone rectangles, dashed threshold lines, explicit color scales

Score Caps Applied

• None - No caps triggered. Implementation meets all base requirements.

Strengths

• Excellent theme-adaptive implementation with proper chrome color handling in both light and dark modes
• Correct RSI calculation with realistic 14-period lookback period
• Clear visual separation of overbought/oversold zones with intuitive semantic coloring
• Strong altair idioms: proper use of layering, encoding, and configuration
• All text elements are explicitly sized and readable at high resolution
• Perfect spec compliance with all required features implemented

Weaknesses

• VQ-07: RSI line uses #0072B2 instead of required #009E73; first data series should always use brand green
• DE-01: Design lacks sophistication; looks like well-configured defaults without artistic polish
• DE-02: Minimal visual refinement; grid and overall styling could be more sophisticated
• DE-03: No visual hierarchy or storytelling; data is displayed but doesn't guide viewer to insights
• CQ-04: Unusual importlib approach to load altair instead of standard import statement

Issues Found

1. VQ-07 PALETTE: RSI line color should be #009E73 (brand green), not #0072B2
   • Fix: Change to in mark_line definition
2. DE-01 LOW: Generic design without distinctive visual polish
   • Fix: Consider custom palette choices, refined typography, intentional visual hierarchy
3. DE-02 LOW: No custom visual refinement
   • Fix: Add grid styling, spine adjustments, whitespace refinement
4. CQ-04: Unusual altair import via importlib
   • Fix: Use standard instead

AI Feedback for Next Attempt

Strong technical implementation with perfect spec compliance and correct theme handling. Main improvement areas are aesthetic sophistication and data storytelling. The VQ-07 palette issue (using #0072B2 instead of #009E73) must be fixed to reach higher quality tier. Consider adding visual hierarchy through color emphasis or data selection to improve storytelling. Design refinements (custom color palettes, visual polish) would elevate from 85 to 90+ territory.

Verdict: APPROVED

Score of 85/100 meets the Review 2 threshold (≥80) for approval. Implementation is solid, spec-compliant, and well-executed. Ready to merge.

[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 displays RSI values on a warm off-white background (#FAF8F1) with dark text. The teal/blue RSI line oscillates between 0-100, clearly visible against the light surface. Three reference zones are shown: a green-shaded oversold region (0-30), a red-shaded overbought region (70-100), and dashed threshold lines at 30 (green), 50 (gray), and 70 (red). The subtitle "14-Period RSI with Overbought/Oversold Zones" clearly explains the chart. All text — title, axis labels ("RSI Value", "Date"), tick labels (dates and RSI values), and legend — is dark-colored and fully readable against the light background. Grid lines are subtle and visible at 10% opacity.

Dark render (plot-dark.png): The identical chart rendered on a warm near-black background (#1A1A17) with light text throughout. The RSI line color is identical to the light render (demonstrating proper data-color invariance across themes). Zone colors (red/green) and threshold line colors match the light render exactly. All text — title, axis labels, ticks, legend — is now light-colored and fully readable against the dark background. No dark-on-dark legibility failures; text contrast is excellent. Grid remains subtle and visible. Both renders confirm proper theme adaptation: only chrome (background, text, grid) changes with theme; data colors remain constant.

Score: 88/100

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

Visual Quality (29/30)

• VQ-01: Text Legibility (8/8) — All fonts explicitly set (title 28px, labels 22px, ticks 18px); perfectly readable in both themes
• VQ-02: No Overlap (6/6) — Zero overlapping text; legend well-placed; all elements clear
• VQ-03: Element Visibility (6/6) — RSI line, zones, and threshold lines clearly visible; well-adapted to data density
• VQ-04: Color Accessibility (2/2) — Excellent contrast; semi-transparent zones work well; CVD-safe palette
• VQ-05: Layout & Canvas (4/4) — Optimal plot fill (50-80%); balanced margins; nothing cut off
• VQ-06: Axis Labels & Title (2/2) — Descriptive labels with context; subtitle explains methodology
• VQ-07: Palette Compliance (1/2) — RSI line uses #0072B2 (Okabe-Ito position 3) instead of #009E73 (position 1); spec allows "typically blue", but style guide requires first series = #009E73. Theme chrome is perfect in both renders.

Design Excellence (10/20)

• DE-01: Aesthetic Sophistication (4/8) — Well-configured library defaults with intentional colors and hierarchy; professional but not exceptional
• DE-02: Visual Refinement (3/6) — Subtle grid, clean layout, generous whitespace; some customization but mostly defaults
• DE-03: Data Storytelling (3/6) — Zone shading guides interpretation; visual hierarchy present but not dramatic

Spec Compliance (15/15)

• SC-01: Plot Type (5/5) — Correct technical indicator chart
• SC-02: Required Features (4/4) — RSI line ✓, 0-100 axis ✓, thresholds at 30/70 ✓, zones ✓, 50 centerline ✓, 14-period noted ✓
• SC-03: Data Mapping (3/3) — Dates on X, RSI on Y (0-100), all data visible
• SC-04: Title & Legend (3/3) — Title format correct, legend labels match

Data Quality (15/15)

• DQ-01: Feature Coverage (6/6) — Shows RSI oscillating across zones; full feature coverage
• DQ-02: Realistic Context (5/5) — Plausible 140-day stock data; neutral, real-world scenario
• DQ-03: Appropriate Scale (4/4) — RSI values and date range factually correct

Code Quality (10/10)

• CQ-01: KISS Structure (3/3) — Clean linear flow; no over-engineering
• CQ-02: Reproducibility (2/2) — Seed set for deterministic output
• CQ-03: Clean Imports (2/2) — Only used imports
• CQ-04: Code Elegance (2/2) — No fake UI or over-engineering
• CQ-05: Output & API (1/1) — Correct output format and API

Library Mastery (9/10)

• LM-01: Idiomatic Usage (5/5) — Expertly uses altair's high-level API: mark functions, layering, proper encodings
• LM-02: Distinctive Features (4/5) — Multi-mark layering, custom legend, theme-aware config, tooltips

Score Caps Applied

• None (all quality checks passed; no caps triggered)

Strengths

• Excellent theme adaptation: both renders perfectly readable with proper light/dark text on corresponding backgrounds
• Clean altair layering pattern combining multiple chart types (line, rectangles, rules)
• Proper RSI calculation with synthetic data showing realistic oscillation across zones
• Strong code quality: deterministic seed, clean structure, idiomatic altair patterns
• Professional layout with clear legend, descriptive labels, and subtitle explaining methodology
• All required spec features present and well-implemented

Weaknesses

• VQ-07: RSI line color (#0072B2) violates the hard rule that first series must be #009E73 (brand green), though spec permits blue as alternative

Issues Found

1. VQ-07 MINOR: First data series uses #0072B2 instead of brand green #009E73
   • Fix: Change RSI line color to #009E73 OR confirm that the spec's allowance for blue overrides the style guide hard rule
   • Context: Spec says "typically in a distinct color (e.g., purple or blue)"; style guide says "First series is ALWAYS #009E73". Current implementation follows spec, but violates style rule.

AI Feedback for Next Attempt

The implementation is high-quality and nearly complete. The only actionable item is the RSI line color: either switch to #009E73 (brand green) for strict style guide compliance, or keep #0072B2 if the spec's color flexibility is intentional. Current score of 88/100 already exceeds the Review 2 threshold (≥80).

Verdict: APPROVED ✓

88/100 meets the Review 2 threshold (≥ 80). This implementation is approved for merge.