feat(highcharts): implement indicator-ema

[github-actions]

Implementation: indicator-ema - highcharts

Implements the highcharts version of indicator-ema.

File: plots/indicator-ema/implementations/highcharts.py

Parent Issue: #3652

---

🤖 impl-generate workflow

[claude]

AI Review - Attempt 1/3

Image Description

The plot displays a stock price time series chart with 120 trading days from June 2024 to November 2024. Three lines are shown:

1. Close Price (blue solid line) - the most prominent line showing daily price fluctuations with significant volatility
2. EMA 12 (yellow/gold solid line) - short-period exponential moving average, closely tracking the price
3. EMA 26 (purple dashed line) - longer-period EMA, smoother and lagging behind

The title reads "indicator-ema · highcharts · pyplots.ai" with a subtitle "Stock Price with 12-day and 26-day EMAs". The Y-axis shows "Price (USD)" ranging from approximately $119 to $166. The X-axis shows dates with monthly intervals (Jul 2024 through Nov 2024). A legend at the bottom clearly identifies all three series. The data shows a downtrend from ~$163 to ~$123 followed by a recovery to ~$135. The layout is clean with a white background and subtle grid lines.

Quality Score: 91/100

Criteria Checklist

Visual Quality (38/40 pts)

• VQ-01: Text Legibility (10/10) - Title at 56px, axis labels at 36px, tick labels at 28px - all perfectly readable
• VQ-02: No Overlap (8/8) - No overlapping text elements anywhere
• VQ-03: Element Visibility (7/8) - Line widths are good (5px price, 3px EMAs), distinct dash styles, but lines could be slightly thicker for better visibility
• VQ-04: Color Accessibility (5/5) - Blue/Yellow/Purple palette is colorblind-safe (no red-green conflict)
• VQ-05: Layout Balance (4/5) - Good proportions, chart fills canvas well, minor margin imbalance at bottom
• VQ-06: Axis Labels (2/2) - "Price (USD)" and "Date" are descriptive with units
• VQ-07: Grid & Legend (2/2) - Subtle grid (alpha 0.1), legend well-placed at bottom

Spec Compliance (23/25 pts)

• SC-01: Plot Type (8/8) - Correct line chart overlay showing price with EMA indicators
• SC-02: Data Mapping (5/5) - Date on X-axis, price/EMA values on Y-axis correctly mapped
• SC-03: Required Features (4/5) - Has price line, two EMAs with distinct colors, legend labels. Missing: crossover point highlighting mentioned as "Consider" in spec
• SC-04: Data Range (3/3) - All data visible, axes appropriately scaled
• SC-05: Legend Accuracy (2/2) - Legend correctly labels "Close Price", "EMA 12", "EMA 26"
• SC-06: Title Format (1/2) - Correct format but uses middle dot separator - minor stylistic variance

Data Quality (18/20 pts)

• DQ-01: Feature Coverage (7/8) - Shows downtrend and recovery, EMA crossovers visible, but could show more varied market conditions
• DQ-02: Realistic Context (7/7) - Stock prices with realistic daily volatility (~2% std), sensible price range ($120-$165)
• DQ-03: Appropriate Scale (4/5) - Good scale, 120 trading days is meaningful, prices realistic

Code Quality (7/10 pts)

• CQ-01: KISS Structure (0/3) - Contains a function definition (calc_ema) which violates KISS principle
• CQ-02: Reproducibility (3/3) - Uses np.random.seed(42)
• CQ-03: Clean Imports (2/2) - All imports are used
• CQ-04: No Deprecated API (1/1) - Uses current APIs
• CQ-05: Output Correct (1/1) - Saves as plot.png and plot.html

Library Features (5/5 pts)

• LF-01: Distinctive Features (5/5) - Uses Highcharts-specific features: datetime axis formatting, shared tooltips with crosshairs, dash styles, z-index layering, interactive HTML export with CDN

Strengths

• Excellent use of Highcharts datetime axis with proper formatting
• Clean color scheme using Python-themed colors (blue/yellow) plus purple
• Interactive HTML version generated alongside PNG
• Shared tooltips with crosshairs enhance interactivity
• Appropriate line widths differentiate price from EMAs
• Proper z-index layering ensures price line is on top

Weaknesses

• Contains a function definition (calc_ema) which violates KISS structure principle - should use inline calculation or pandas EMA
• Could highlight EMA crossover points as suggested in the specification
• Title format uses middle dots but this is acceptable

Verdict: APPROVED