feat(plotnine): implement dashboard-metrics-tiles

[github-actions]

Implementation: dashboard-metrics-tiles - python/plotnine

Implements the python/plotnine version of dashboard-metrics-tiles.

File: plots/dashboard-metrics-tiles/implementations/python/plotnine.py

Parent Issue: #3791

---

🤖 impl-generate workflow

[claude]

AI Review - Attempt 1/3

Image Description

Light render (plot-light.png): Warm off-white background (#FAF8F1) — correct theme surface. A 3×2 grid of 6 dashboard tiles, each showing a bold metric label in dark near-black text, a large prominently-sized current value colored by status (#009E73 green for good, #E69F00 orange for warning, #D55E00 vermillion for critical), a change indicator with ▲/▼ arrow in context-aware color, and a compact sparkline on a slightly-toned background (#EDEAE0). Top row: CPU Usage (45%, green, ▼5.2%), Memory (72%, orange, ▲8.3%), Response Time (120ms, green, ▼15.4%). Bottom row: Active Users (1,284, green, ▲12.7%), Error Rate (0.8%, vermillion, ▲45.2%), Throughput (3,450req/s, green, ▼2.1%). Title "dashboard-metrics-tiles · plotnine · pyplots.ai" at top center in dark text. All text is clearly readable against the light background. Notable gap (~20% of canvas height) exists between the two tile rows.

Dark render (plot-dark.png): Warm near-black background (#1A1A17) — correct dark theme surface. Tile panels use #242420 elevated background with sparkline areas at #2A2A26. Title text is off-white (#F0EFE8), clearly readable on dark. Metric name labels are bold white on dark tile backgrounds — fully readable with no dark-on-dark failures. All data colors (sparkline lines, value text) are identical to the light render: #009E73 green for good metrics, #E69F00 orange for Memory, #D55E00 vermillion for Error Rate. Only chrome elements flip between themes. No dark-on-dark failures detected.

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

Score: 86/100

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

Visual Quality (28/30)

• VQ-01: Text Legibility (7/8) — All font sizes explicitly set; all text readable in both themes. Change indicator at size=6 is small but legible. Deduct 1 for the small change indicator size.
• VQ-02: No Overlap (6/6) — No overlapping elements; metric name, value, change indicator, and sparkline are well-separated vertically within each tile.
• VQ-03: Element Visibility (6/6) — Sparklines clearly visible at size=1.4 on contrasting backgrounds. Status-colored main values are prominent.
• VQ-04: Color Accessibility (2/2) — Okabe-Ito status colors are CVD-safe. No red-green reliance as sole signal.
• VQ-05: Layout & Canvas (3/4) — Canvas gate passed (3200×1800). Tile grid fills most of canvas, but a notable ~20% gap between the two tile rows reduces layout cohesion.
• VQ-06: Axis Labels & Title (2/2) — No traditional axes needed for a dashboard (theme_void appropriate). Metric names and value units within tiles cover labeling. Title present.
• VQ-07: Palette Compliance (2/2) — Status colors use Okabe-Ito (#009E73 brand green, #E69F00 orange, #D55E00 vermillion). Backgrounds correct (#FAF8F1 light / #1A1A17 dark). Chrome adapts; data colors identical across themes.

Design Excellence (13/20)

• DE-01: Aesthetic Sophistication (5/8) — Thoughtful semantic color design: status-coded large values, context-aware change colors with Error Rate inversion (up=bad). Elevated tile backgrounds (#FFFDF6/#242420) add depth. Above generic defaults, but tiles lack accent elements (e.g., a thin status-colored header strip) that would elevate to publication-ready polish.
• DE-02: Visual Refinement (4/6) — theme_void() removes all chart chrome. Sparkline background differentiates the data region. Explicit panel_spacing and border colors. Good refinement; dead space within tiles (y=0.28–0.38 gap between sparkline top and change indicator) and between rows could be tightened.
• DE-03: Data Storytelling (4/6) — Status color coding gives immediate health assessment. Error Rate's inverted change logic shows domain awareness. Sparklines corroborate the trend percentages. Clear visual hierarchy within each tile.

Spec Compliance (13/15)

• SC-01: Plot Type (5/5) — Correct dashboard tile layout: 6 tiles in 3×2 grid, each with value, label, sparkline, and change indicator.
• SC-02: Required Features (4/4) — All spec features present: prominent value display, metric label, mini sparkline, change indicator with arrows, status color coding, context-aware change colors.
• SC-03: Data Mapping (3/3) — metric_name→tile header, current_value→display, history→sparkline, change_percent→indicator, status→color. All mappings correct.
• SC-04: Title & Legend (1/3) — Title is dashboard-metrics-tiles · plotnine · pyplots.ai but required format is dashboard-metrics-tiles · python · plotnine · anyplot.ai. Missing language token python; wrong domain pyplots.ai should be anyplot.ai.

Data Quality (15/15)

• DQ-01: Feature Coverage (6/6) — All status types covered (good/warning/critical), both change directions, different metric domains (%, ms, req/s, count), inverted semantics for Error Rate.
• DQ-02: Realistic Context (5/5) — Standard SRE/DevOps monitoring dashboard (CPU, Memory, Response Time, Active Users, Error Rate, Throughput) — neutral, professional, real-world.
• DQ-03: Appropriate Scale (4/4) — All values realistic: CPU 45%, Memory 72%, Response 120ms, 1,284 users, Error Rate 0.8%, Throughput 3,450 req/s.

Code Quality (10/10)

• CQ-01: KISS Structure (3/3) — Linear flow: imports → data → sparkline_data → label_data → plot → save. No functions or classes.
• CQ-02: Reproducibility (2/2) — np.random.seed(42) set before sparkline generation.
• CQ-03: Clean Imports (2/2) — All plotnine imports are used; no unused imports.
• CQ-04: Code Elegance (2/2) — Clean, Pythonic. No fake UI elements. Appropriate complexity for multi-layer dashboard.
• CQ-05: Output & API (1/1) — Saves as plot-{THEME}.png using current plotnine API.

Library Mastery (7/10)

• LM-01: Idiomatic Usage (4/5) — Idiomatic ggplot + composition. facet_wrap for tile layout, scale_color_identity() for data-driven hex colors, pd.Categorical for ordered facets, multiple geom_* layers.
• LM-02: Distinctive Features (3/5) — scale_color_identity() for hex colors stored directly in dataframe columns is a distinctive plotnine/ggplot2 feature. Combined with facet_wrap as a dashboard layout mechanism, this demonstrates real library knowledge.

Score Caps Applied

• None

Strengths

• Excellent semantic use of Okabe-Ito status colors — good=#009E73, warning=#E69F00, critical=#D55E00 communicates health at a glance
• Context-aware Error Rate change logic (up=bad inverts green/red) shows domain sophistication
• scale_color_identity() for data-driven hex colors is idiomatic and distinctive plotnine usage
• facet_wrap as dashboard tile grid is a clever and appropriate use of ggplot's grammar
• Perfect data quality with realistic SRE/DevOps scenario, varied units, and all status types covered
• theme_void() + sparkline background differentiation creates clean, layered dashboard aesthetic

Weaknesses

• Title format incorrect: dashboard-metrics-tiles · plotnine · pyplots.ai is missing language python and uses wrong domain pyplots.ai; fix: labs(title="dashboard-metrics-tiles · python · plotnine · anyplot.ai")
• Large gap between tile rows: ~20% of canvas height is empty mid-canvas; tighten with smaller figure_size height or redistribute vertical spacing
• Dead space within tiles: gap between sparkline top (y=0.28) and change indicator (y=0.38) wastes 10 units per tile; moving change indicator closer to sparkline would allow bigger sparkline or larger value text
• Design polish: tiles lack a visual accent (e.g., thin status-colored top border on each tile panel) that would elevate from "colored text" to publication-ready dashboard aesthetic

Issues Found

1. SC-04 LOW: Title missing python language token and uses pyplots.ai instead of anyplot.ai
   • Fix: labs(title="dashboard-metrics-tiles · python · plotnine · anyplot.ai")
2. VQ-05 MINOR: Large gap between tile rows creates dead canvas space
   • Fix: Reduce figure_size height or adjust panel_spacing / scale_y_continuous positioning so tiles pack tighter
3. DE-01 PARTIAL: Tiles lack accent/highlight elements
   • Fix: Consider adding a geom_rect top-border strip colored by status, or using panel_border with status-colored fill in a header area

AI Feedback for Next Attempt

Fix the title to "dashboard-metrics-tiles · python · plotnine · anyplot.ai". Then address layout: reduce the gap between tile rows and the dead space within tiles (move change_y closer to sparkline, e.g., from 0.38 to 0.32). For design polish, consider adding a thin status-colored top border to each tile panel (a narrow geom_rect from y=0.93–1.0 colored by status_color) — this would create a clear visual accent that immediately signals health at the panel level, not just at the value level.

Verdict: REJECTED

[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 with six metric tiles arranged in a 3×2 grid. Each tile has an elevated off-white (#FFFDF6) fill with a subtle ink-soft border. Tile contents from top-left: CPU Usage (45%, green #009E73, ▼ 5.2% in red), Memory (72%, orange #E69F00, ▲ 8.3% in green), Response Time (120ms, green, ▼ 15.4% in red), Active Users (1,284, green, ▲ 12.7% in green), Error Rate (0.8%, orange-red #D55E00, ▲ 45.2% in orange-red), Throughput (3,450req/s, green, ▼ 2.1% in red). Each tile has a sparkline with a slightly darker (#EDEAE0) background strip and a status-colored line. Metric labels are bold and dark; values are large and status-colored; change indicators are small but readable. The mandated title appears in dark text at the top. All text is readable against the light background. Legibility verdict: PASS.

Dark render (plot-dark.png): The same layout renders on a warm near-black (#1A1A17) background. Tile backgrounds flip to #242420 (elevated dark) with ink-soft borders. Metric labels render in light (#F0EFE8) ink — clearly readable against the dark surface. Status-colored values (green, orange, orange-red) are identical to the light render — only chrome flips. Sparkline backgrounds flip to #2A2A26. Change indicators remain in their green/red colors and are readable. The title renders in light text at top. No dark-on-dark failures observed. Legibility verdict: PASS.

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

Score: 86/100

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

Visual Quality (26/30)

• VQ-01: Text Legibility (6/8) — all font sizes explicitly set; change indicators at size=6 are small for this canvas but readable; title at size=10 is compact and appropriate for the long mandated string
• VQ-02: No Overlap (6/6) — no overlapping elements in either render
• VQ-03: Element Visibility (5/6) — sparklines at size=1.4 are visible but compact; alpha=0.9 is appropriate
• VQ-04: Color Accessibility (2/2) — Okabe-Ito status colors are CVD-safe; arrows provide directional signal beyond hue
• VQ-05: Layout & Canvas (3/4) — noticeable vertical gap between the two tile rows leaves some unused vertical space; otherwise clean
• VQ-06: Axis Labels & Title (2/2) — title correctly formatted; metric names serve as tile labels
• VQ-07: Palette Compliance (2/2) — status colors are Okabe-Ito (#009E73 good, #E69F00 warning, #D55E00 critical); backgrounds are #FAF8F1/#1A1A17 correct for both themes

Design Excellence (13/20)

• DE-01: Aesthetic Sophistication (5/8) — above generic default: status-aware color hierarchy, theme-adaptive elevated tile backgrounds with subtle borders; thoughtful visual organization, though not yet at FiveThirtyEight-level polish
• DE-02: Visual Refinement (4/6) — theme_void() removes all unnecessary chrome; sparkline area backgrounds, elevated tile fills, and INK_SOFT borders all show deliberate refinement
• DE-03: Data Storytelling (4/6) — traffic-light color coding immediately guides the eye to the critical Error Rate tile; large-value typography creates a clear reading hierarchy

Spec Compliance (15/15)

• SC-01: Plot Type (5/5) — correct dashboard metric tiles in a 3×2 grid
• SC-02: Required Features (4/4) — all spec features present: prominent KPI value, metric label, embedded sparkline, change indicator with arrow and percentage, status color coding
• SC-03: Data Mapping (3/3) — data correctly mapped; sparklines use normalized scale with proper x-axis range
• SC-04: Title & Legend (3/3) — title is dashboard-metrics-tiles · python · plotnine · anyplot.ai; no legend needed (colors explained by context)

Data Quality (15/15)

• DQ-01: Feature Coverage (6/6) — all three statuses (good/warning/critical) represented; both positive and negative changes shown; varied scales across metrics
• DQ-02: Realistic Context (5/5) — real-world ops monitoring scenario: CPU Usage, Memory, Response Time, Active Users, Error Rate, Throughput — neutral and plausible
• DQ-03: Appropriate Scale (4/4) — 45% CPU, 72% memory, 120ms response time, 1284 active users, 0.8% error rate, 3450 req/s throughput — all factually plausible values for an ops dashboard

Code Quality (10/10)

• CQ-01: KISS Structure (3/3) — flat: imports → constants → data generation → plot assembly → save; no functions or classes
• CQ-02: Reproducibility (2/2) — np.random.seed(42) present
• CQ-03: Clean Imports (2/2) — all imported names are used
• CQ-04: Code Elegance (2/2) — clean Pythonic code; no fake UI elements; data-driven color assignment via identity scale is elegant
• CQ-05: Output & API (1/1) — saves as plot-{THEME}.png with correct dpi, width, height, units

Library Mastery (7/10)

• LM-01: Idiomatic Usage (4/5) — correct grammar-of-graphics layering; scale_color_identity() to drive per-row coloring from dataframe columns; pd.Categorical for deterministic facet ordering; theme_void() with comprehensive theme() overrides
• LM-02: Distinctive Features (3/5) — using facet_wrap as the structural engine for a dashboard grid layout is a creative and distinctively plotnine approach; the geom_rect + geom_line + geom_text layer composition to build custom tile content is idiomatic to the grammar-of-graphics paradigm

Score Caps Applied

• None

Strengths

• Excellent dual-theme adaptation: both light and dark renders use correct background tokens (#FAF8F1/#1A1A17), elevated tile fills, and appropriate INK/INK_SOFT text colors throughout — no dark-on-dark failures
• Creative and idiomatic use of plotnine's facet_wrap + scale_color_identity to build a fully grid-based dashboard layout without falling back to matplotlib
• Status-aware Okabe-Ito color coding (green/orange/red) creates immediate visual triage — the critical Error Rate tile stands out clearly
• Comprehensive spec compliance: all six required tile components (label, value, sparkline, change indicator, status color, change direction) are present and working

Weaknesses

• Noticeable vertical gap between the two rows of tiles — panel_spacing or figure height could be tuned to reduce the empty vertical band between row 1 and row 2 (affects VQ-05)
• Change indicator text at size=6 is quite small for the 3200×1800 canvas — increasing to size=7 or 8 would improve mobile readability (affects VQ-01)
• Memory tile shows a green ▲ 8.3% arrow for an already-at-warning-status metric — minor semantic inconsistency where increasing memory (moving toward critical) signals as a "favorable" direction (affects DE-03 storytelling accuracy)

Issues Found

1. VQ-05 MINOR: Visible gap between tile rows under-utilizes vertical canvas space — panel_spacing or a slightly taller per-panel allocation would fill the canvas more evenly
   • Fix: Reduce panel_spacing or increase figure height slightly to close the vertical gap between the two rows
2. VQ-01 MINOR: Change indicator font at size=6 is at the lower edge of mobile readability at this canvas size
   • Fix: Increase change indicator geom_text size from 6 to 7 or 8

AI Feedback for Next Attempt

The implementation is clean and well-structured. To push further: (1) reduce the vertical gap between tile rows by adjusting panel spacing or figure height; (2) increase change indicator text from size=6 to size=7-8 for better readability; (3) consider making Memory's change arrow context-aware (Memory increasing toward a warning threshold could show red even if the absolute direction is "positive"). Design excellence could be elevated further by adding a very subtle status-colored top border to each tile to reinforce the traffic-light system without adding visual noise.

Verdict: APPROVED