feat(plotly): implement line-stepwise

[github-actions]

Implementation: line-stepwise - plotly

Implements the plotly version of line-stepwise.

File: plots/line-stepwise/implementations/plotly.py

---

🤖 impl-generate workflow

[claude]

AI Review - Attempt 1/3

Image Description

The plot displays a step line chart showing server response time (in milliseconds) over a 24-hour period. The visualization uses a blue color (#306998) for both the stepped line (width 4) and circular markers with white borders. The x-axis shows "Hour of Day" ranging from 0 to 22 in increments of 2. The y-axis shows "Response Time (ms)" ranging from approximately 40 to 90. The step pattern clearly shows horizontal segments (constant values) followed by vertical transitions at each hour mark. The data demonstrates a realistic daily pattern: low values (~42-45ms) during early morning hours, gradual increase during morning ramp-up, peak around midday (~90ms at hour 13), and decline in evening back to low values (~43ms). The title "line-stepwise · plotly · pyplots.ai" is centered at the top. White background with subtle gray grid lines. Clean, professional appearance.

Quality Score: 98/100

Criteria Checklist

Visual Quality (38/40 pts)

• VQ-01: Text Legibility (10/10) - Title 28pt, labels 22pt, ticks 18pt - all perfectly readable
• VQ-02: No Overlap (8/8) - No overlapping text anywhere
• VQ-03: Element Visibility (8/8) - Markers size 14 and line width 4 perfect for 24 data points
• VQ-04: Color Accessibility (5/5) - Single blue color with excellent contrast
• VQ-05: Layout Balance (5/5) - Excellent canvas utilization, balanced margins
• VQ-06: Axis Labels (2/2) - "Hour of Day" and "Response Time (ms)" with units
• VQ-07: Grid & Legend (0/2) - Grid subtle and good, but legend disabled (acceptable for single series)

Spec Compliance (25/25 pts)

• SC-01: Plot Type (8/8) - Correct step line using shape="hv"
• SC-02: Data Mapping (5/5) - X=hours, Y=response times correctly mapped
• SC-03: Required Features (5/5) - Step alignment, horizontal/vertical transitions clear
• SC-04: Data Range (3/3) - Appropriate axis ranges showing all data
• SC-05: Legend Accuracy (2/2) - Single series, legend correctly hidden
• SC-06: Title Format (2/2) - Exact format "line-stepwise · plotly · pyplots.ai"

Data Quality (20/20 pts)

• DQ-01: Feature Coverage (8/8) - Full 24-hour cycle showing low/ramp-up/peak/decline phases
• DQ-02: Realistic Context (7/7) - Server response time monitoring is realistic technical scenario
• DQ-03: Appropriate Scale (5/5) - 42-90ms response times are realistic

Code Quality (10/10 pts)

• CQ-01: KISS Structure (3/3) - Clean imports → data → plot → save structure
• CQ-02: Reproducibility (3/3) - np.random.seed(42) present
• CQ-03: Clean Imports (2/2) - Only numpy and plotly.graph_objects, both used
• CQ-04: No Deprecated API (1/1) - Current APIs used
• CQ-05: Output Correct (1/1) - Saves plot.png and plot.html

Library Features (5/5 pts)

• LF-01: Uses distinctive Plotly features - shape="hv" for steps, custom hovertemplate, HTML interactivity

Strengths

• Perfect implementation of step function using Plotly's shape="hv" parameter
• Excellent realistic data scenario (server response time monitoring over 24 hours)
• Clean code following KISS principles with proper font sizes for 4800x2700 output
• Interactive HTML output with custom hover template showing hour and response time
• Well-balanced layout with good canvas utilization

Weaknesses

• Minor: Grid/legend criterion loses 2 points due to disabled legend, though this is acceptable for single-series plots

Verdict: APPROVED