feat(highcharts): implement line-interactive

[github-actions]

Implementation: line-interactive - highcharts

Implements the highcharts version of line-interactive.

File: plots/line-interactive/implementations/highcharts.py

---

🤖 impl-generate workflow

[claude]

AI Review - Attempt 1/3

Image Description

The plot displays an interactive line chart showing server CPU usage over 7 days of hourly data. The title "line-interactive · highcharts · pyplots.ai" is prominently displayed at the top in bold black text, with a subtitle explaining the zoom functionality. The main chart area shows a blue (#306998) line tracing CPU usage percentage (Y-axis, 0-106%) against date/time (X-axis, Jan 01-08). The line exhibits clear daily cyclical patterns with peaks around 55-65% and troughs around 10-30%, along with visible spikes (anomalies) reaching up to ~73%. The Y-axis has percentage labels, and the X-axis shows daily date labels. A legend "CPU Usage" appears at the bottom center. The overall layout has a clean white background with subtle gray grid lines.

Quality Score: 91/100

Criteria Checklist

Visual Quality (37/40 pts)

• VQ-01: Text Legibility (9/10) - All text is readable; title, axis labels, and tick marks are clearly visible. Font sizes are appropriate for the 4800x2700 canvas.
• VQ-02: No Overlap (8/8) - No overlapping text elements. Date labels are spaced well.
• VQ-03: Element Visibility (8/8) - Line width is appropriate (5px), markers appear on hover. The data pattern is clearly visible.
• VQ-04: Color Accessibility (5/5) - Uses colorblind-safe blue (#306998) on white background with good contrast.
• VQ-05: Layout Balance (5/5) - Chart fills the canvas well with balanced margins. Spacing is properly configured.
• VQ-06: Axis Labels (2/2) - "CPU Usage (%)" with units on Y-axis, "Date and Time" on X-axis.
• VQ-07: Grid & Legend (0/2) - Grid is subtle (alpha 0.1), but legend is placed at bottom which is acceptable. However, the legend marker is very small and could be more visible.

Spec Compliance (25/25 pts)

• SC-01: Plot Type (8/8) - Correct interactive line chart type.
• SC-02: Data Mapping (5/5) - Datetime on X-axis, numeric CPU % on Y-axis correctly mapped.
• SC-03: Required Features (5/5) - Hover tooltips (crosshair + tooltip configured), zoom (zoomType: "x"), and the subtitle instructs on zoom usage.
• SC-04: Data Range (3/3) - Y-axis shows 0-105%, X-axis shows full 7-day range.
• SC-05: Legend Accuracy (2/2) - "CPU Usage" legend label is accurate.
• SC-06: Title Format (2/2) - Uses exact format "line-interactive · highcharts · pyplots.ai"

Data Quality (18/20 pts)

• DQ-01: Feature Coverage (6/8) - Shows daily cycles, upward trend, noise, and spike anomalies. Could show more dramatic variation or multiple series.
• DQ-02: Realistic Context (7/7) - Server CPU usage is a realistic, neutral IT monitoring scenario. Values are plausible.
• DQ-03: Appropriate Scale (5/5) - CPU usage 5-100% is realistic; 168 hourly points for 7 days is sensible.

Code Quality (8/10 pts)

• CQ-01: KISS Structure (3/3) - Linear flow: imports → data generation → config → HTML → screenshot. No functions/classes.
• CQ-02: Reproducibility (3/3) - Uses np.random.seed(42).
• CQ-03: Clean Imports (2/2) - All imports are used (json, tempfile, time, urllib, Path, numpy, pandas, selenium).
• CQ-04: No Deprecated API (0/1) - Uses manual dict config instead of highcharts-core Python library. While functional, the library docs recommend the Python wrapper.
• CQ-05: Output Correct (1/1) - Saves as plot.png and plot.html.

Library Features (3/5 pts)

• LF-01: Uses distinctive library features (3/5) - Uses Highcharts's native zoom, crosshair, datetime formatting, and interactive HTML export. However, does not use range selector or navigator which are Highcharts's premium interactive features for time series.

Strengths

• Excellent title formatting matching the required spec format
• Clean realistic data scenario with CPU usage showing daily cycles and anomalies
• Good implementation of core interactive features (zoom, crosshair, tooltips)
• Proper colorblind-safe color choice (#306998)
• Both PNG and HTML outputs generated correctly
• Appropriate font sizing for the 4800x2700 canvas

Weaknesses

• Missing Highcharts navigator/range selector which would enhance interactivity for time series
• Legend marker at bottom is quite small
• Uses raw dict configuration instead of highcharts-core Python wrapper classes

Verdict: APPROVED