feat(muix): implement acf-pacf

[github-actions]

Implementation: acf-pacf - javascript/muix

Implements the javascript/muix version of acf-pacf.

File: plots/acf-pacf/implementations/javascript/muix.tsx

Parent Issue: #4663

---

🤖 impl-generate workflow

[claude]

AI Review - Attempt 1/3

Image Description

Light render (plot-light.png): Warm off-white background (#FAF8F1) — correct anyplot light surface. Title "AR(2) Process · acf-pacf · javascript · muix · anyplot.ai" in dark ink at top center, clearly readable. Two stacked panels: ACF (top) and PACF (bottom). Brand green (#009E73) bars show ACF with exponential decay from 1.0 at lag 0 down to near-zero by lag 15, and PACF with a strong spike at lag 1 (~0.70) and smaller at lag 2, then near-zero — clearly demonstrating AR(2) structure. Dashed confidence interval lines (t.inkSoft) at ±0.113 visible in both panels. "95% CI" label at right edge of upper panel — very tight against canvas boundary. Y-axis labels "ACF" / "PACF" readable; x-axis label "Lag" on bottom panel readable. Tick labels 0–30 legible. All text readable against the warm off-white background.

Dark render (plot-dark.png): Near-black background (#1A1A17) — correct anyplot dark surface. Title in light cream text, clearly readable. Same data pattern as light: brand green (#009E73) bars identical, exponential ACF decay and PACF cutoff after lag 2 confirmed. All chrome elements (title, axis labels, tick labels, CI line labels) rendered in light ink against dark background via MUI X ThemeProvider — no dark-on-dark failures. "95% CI" label still tight at right edge. Dashed CI lines visible. Data colors perfectly consistent between themes.

Both renders pass the readability check. Chrome correctly adapts between themes. No dark-on-dark failures.

Score: 84/100

Category	Score	Max
Visual Quality	26	30
Design Excellence	13	20
Spec Compliance	14	15
Data Quality	14	15
Code Quality	9	10
Library Mastery	8	10
Total	84	100

Visual Quality (26/30)

• VQ-01: Text Legibility (6/8) — Font sizes explicitly set (title 19px, axis labels 14px, ticks 12px CSS). All text readable in both themes. Title slightly below the recommended 22px CSS from muix.md.
• VQ-02: No Overlap (6/6) — No overlapping text elements. 31 x-axis labels (0–30) spaced and readable.
• VQ-03: Element Visibility (5/6) — categoryGapRatio: 0.82 makes bars very thin. Small correlation values at high lags (0.01–0.05) are barely-visible marks. Early large-value bars clearly visible.
• VQ-04: Color Accessibility (2/2) — Single brand green series, high contrast on both surfaces. CI lines use inkSoft for subtle but visible distinction.
• VQ-05: Layout & Canvas (3/4) — Two-panel layout well-executed. Fixed y-axis [-1.0, 1.0] wastes vertical space when data is mostly in [-0.15, 1.0]. "95% CI" label very tight at right canvas edge.
• VQ-06: Axis Labels & Title (2/2) — Y-axes "ACF"/"PACF", x-axis "Lag", descriptive title with "AR(2) Process" prefix.
• VQ-07: Palette Compliance (2/2) — Brand green #009E73 via t.palette[0]. t.pageBg backgrounds. t.ink/t.inkSoft for chrome. Identical data colors across themes.

Design Excellence (13/20)

• DE-01: Aesthetic Sophistication (5/8) — Thoughtful design with Imprint palette, styled reference lines (dashed, opacity), zero baseline, Roboto typography hierarchy. Clearly above defaults but not FiveThirtyEight-level.
• DE-02: Visual Refinement (4/6) — Legends hidden, CI lines styled with strokeDasharray and strokeOpacity, zero line very faint. MUI X default axis frame borders still visible — further refinement possible.
• DE-03: Data Storytelling (4/6) — AR(2) parameters (0.65, 0.15) produce clear exponential ACF decay and PACF cutoff after lag 2 — well-chosen to illustrate how ACF/PACF identify model order.

Spec Compliance (14/15)

• SC-01: Plot Type (4/5) — Correct ACF/PACF dual-panel layout. Spec calls for "vertical stem lines (not filled bars)" but MUI X community lacks a native stem chart; high gap ratio (0.82) approximates stems with thin bars — reasonable workaround.
• SC-02: Required Features (4/4) — ACF top panel, PACF bottom, shared x-axis "Lag" label, 95% CI dashed lines, lag 0 in ACF, PACF from lag 1, 30 lags shown. All spec requirements met.
• SC-03: Data Mapping (3/3) — X: lag numbers; Y: correlation values. ACF/PACF mathematically computed via Durbin-Levinson. Correct mapping throughout.
• SC-04: Title & Legend (3/3) — "AR(2) Process · acf-pacf · javascript · muix · anyplot.ai" — correct {Descriptive} · {spec-id} · {lang} · {lib} · anyplot.ai format. "javascript" is correct language for muix.

Data Quality (14/15)

• DQ-01: Feature Coverage (6/6) — ACF exponential decay, PACF cutoff after lag 2, 95% CI bounds to identify significant vs. non-significant lags — all ACF/PACF features demonstrated.
• DQ-02: Realistic Context (4/5) — AR(2) process is standard in statistics/econometrics, neutral domain, plausible. Slightly abstract vs. a named real-world dataset (monthly airline passengers, etc.).
• DQ-03: Appropriate Scale (4/4) — N=300 (within spec 100–500), 30 lags (within spec 30–40), correlation values in [-1, 1], AR(2) parameters produce realistic autocorrelation structure.

Code Quality (9/10)

• CQ-01: KISS Structure (2/3) — Helper functions (lcgRng, randn, acfAt, computePACF) add necessary complexity for JavaScript statistical computation. Acceptable but slightly more involved than a simple script.
• CQ-02: Reproducibility (2/2) — Deterministic LCG RNG with seed=42. No Math.random() or Date.now().
• CQ-03: Clean Imports (2/2) — Only BarChart and ChartsReferenceLine imported; both used.
• CQ-04: Code Elegance (2/2) — Clean JSX, appropriate TypeScript type assertions, no over-engineering, no fake UI.
• CQ-05: Output & API (1/1) — Interactive library; harness saves plot-{THEME}.png and .html. Current @mui/x-charts API with skipAnimation.

Library Mastery (8/10)

• LM-01: Idiomatic Usage (5/5) — Expert MUI X: BarChart with all proper props, ChartsReferenceLine as chart child, slotProps.legend.hidden, skipAnimation, window.ANYPLOT_TOKENS, window.ANYPLOT_SIZE.
• LM-02: Distinctive Features (3/5) — ChartsReferenceLine is a distinctive MUI X feature used effectively for CI bounds. Flex container for dual panels is clever. Could further leverage MUI X's axis slot customization for more visual distinctiveness.

Score Caps Applied

• None

Strengths

• Correct ACF and PACF computed from scratch in JavaScript using Durbin-Levinson recursion with a deterministic LCG — genuinely impressive algorithmic implementation for a front-end library
• ChartsReferenceLine for 95% CI bounds with custom dash styling is idiomatic MUI X usage that other libraries can't replicate directly
• Both themes render correctly with no dark-on-dark failures — MUI X ThemeProvider + t.ink/t.inkSoft tokens working as intended
• AR(2) parameter choices (0.65, 0.15) produce a pedagogically clear pattern: exponential ACF vs. sharp PACF cutoff after lag 2
• Legends hidden, skipAnimation set, all font sizes explicit — solid boilerplate compliance

Weaknesses

• "95% CI" label with labelAlign="end" has only 30px right margin — text (~40-50px native width at 11px CSS) is very tight against the right canvas edge. Increase margin.right from 30 to 60-70px in the ACF panel, or move label to labelAlign="start".
• Fixed y-axis min: -1.0, max: 1.0 wastes vertical space — most data is in [-0.15, 1.0] for ACF and [-0.15, 0.75] for PACF. Remove explicit min/max to let MUI X auto-scale, or use tighter bounds (-0.35, 1.05) to make the bars more prominent.
• categoryGapRatio: 0.82 makes bars extremely thin — small correlation values at high lags are barely visible marks. Reduce to 0.60-0.65 for a more readable stem-like appearance.
• Title fontsize 19px CSS is below the recommended 22px from muix.md. Increase to 22px.
• MUI X default axis frame borders visible around plot area — consider hiding with sx={{ '& .MuiChartsAxis-line': { stroke: 'transparent' } }} or similar for a cleaner statistical chart appearance.

Issues Found

1. VQ-05 / VQ-03: categoryGapRatio: 0.82 combined with fixed ±1 y-range — bars are too thin and the canvas is not well-utilized
   • Fix: Reduce gap ratio to ~0.62 and remove explicit y-axis min/max bounds
2. VQ-01: Title fontsize below recommendation
   • Fix: Change fontSize: 19 to fontSize: 22 in the title div
3. VQ-05: "95% CI" label clipping risk at right edge
   • Fix: Increase margin.right from 30 to 65 in the ACF BarChart's margin prop

AI Feedback for Next Attempt

Three focused improvements for the repair: (1) Increase title fontSize to 22, reduce categoryGapRatio from 0.82 to ~0.62 — bars are too thin to show small values clearly. (2) Remove the explicit min: -1.0, max: 1.0 from yAxisBase so MUI X auto-scales to the data — the fixed ±1 range wastes most of the vertical space in both panels. (3) Increase margin.right from 30 to 65 in the ACF panel to give the "95% CI" label breathing room away from the canvas edge. These three changes together will improve VQ-01, VQ-03, and VQ-05 and should push the score above 90.

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): Warm off-white background (#FAF8F1). Title "AR(2) Process · acf-pacf · javascript · muix · anyplot.ai" in dark text across ~65% of canvas width. Two stacked panels: ACF (top ~50% height) shows 31 brand-green bars (lags 0–30) with exponential decay from 1.0 at lag 0, dashed CI lines at ±0.113, and a "95% CI" label at the right margin. PACF (bottom) shows 30 bars (lags 1–30) with a dominant spike at lag 1 (~0.75) and near-zero values for lags 3+, dashed CI lines, "Lag" x-axis label. Y-axes labeled "ACF" and "PACF". All tick labels (0–30, -0.35–1.0) are dark and readable against the light background. Legibility verdict: PASS.

Dark render (plot-dark.png): Near-black background (#1A1A17). Identical layout and structure. Title in light (off-white) text — clearly readable. Same brand-green bars (#009E73) — data colors identical to light render. All axis tick labels, y-axis labels, and x-axis "Lag" label are light-colored against the dark background. Dashed CI reference lines remain visible. No dark-on-dark failures observed. Legibility verdict: PASS.

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

Score: 84/100

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

Visual Quality (28/30)

• VQ-01: Text Legibility (7/8) — All font sizes explicitly set (tick: 12px CSS, label: 14px, title: 22px). Readable in both themes. 31 x-axis ticks create mild density but labels remain legible. Slight deduction for the density.
• VQ-02: No Overlap (6/6) — No overlapping elements. Bars are well-spaced (categoryGapRatio: 0.62).
• VQ-03: Element Visibility (5/6) — Bars clearly visible; near-zero bars at high lags are very small but that reflects the data. CI dashed lines and zero line are visible.
• VQ-04: Color Accessibility (2/2) — Single brand-green series on both surfaces; CVD-safe, no red-green reliance.
• VQ-05: Layout & Canvas (4/4) — Two panels fill the canvas well with generous margins. No clipping. "95% CI" label sits close to the right edge but all pixels are intact.
• VQ-06: Axis Labels & Title (2/2) — "ACF", "PACF", and "Lag" are descriptive; correlation values don't require units.
• VQ-07: Palette Compliance (2/2) — First (only) series is #009E73; background is #FAF8F1 (light) / #1A1A17 (dark); all chrome tokens drawn from ANYPLOT_TOKENS — theme-correct in both renders.

Design Excellence (13/20)

• DE-01: Aesthetic Sophistication (5/8) — Clean dual-panel layout with intentional use of the Imprint palette and soft CI line styling. Above "well-configured default" but not publication-grade — bars dominate without further visual sophistication.
• DE-02: Visual Refinement (4/6) — Deliberate refinements: axis lines styled via axisLineSx with t.grid, bar gap ratio tuned, CI reference lines use dashes + opacity. Above minimal customization.
• DE-03: Data Storytelling (4/6) — AR(2) process is a pedagogically ideal choice: ACF exhibits textbook exponential decay while PACF shows the sharp cutoff at lag 1–2. The data tells the classic ARIMA diagnostic story.

Spec Compliance (13/15)

• SC-01: Plot Type (4/5) — Correct ACF/PACF plot arranged in two stacked panels. Spec explicitly requests "stem lines (not filled bars)"; implementation uses filled bars (MUI X community has no native stem/lollipop chart). A deduction is warranted despite the library limitation.
• SC-02: Required Features (3/4) — 95% CI dashed lines ✓, lag 0 in ACF ✓, PACF from lag 1 ✓, 30 lags ✓, axis labels ✓. Loses 1 point for bars instead of stems and the panels using separate BarChart instances rather than a truly shared x-axis.
• SC-03: Data Mapping (3/3) — Lag on x-axis, correlation on y-axis, correct range and scaling.
• SC-04: Title & Legend (3/3) — Title "AR(2) Process · acf-pacf · javascript · muix · anyplot.ai" follows the {Descriptive Title} · {spec-id} · {language} · {library} · anyplot.ai format. Legend correctly hidden (single-series panels).

Data Quality (14/15)

• DQ-01: Feature Coverage (6/6) — Shows all key ACF/PACF features: lag-0 anchor at 1.0, exponential ACF decay, PACF cutoff after lag 2, values crossing CI bounds. Excellent demonstration of AR(2) behavior.
• DQ-02: Realistic Context (4/5) — AR(2) process is a standard synthetic time series context. Labeled clearly but without a real-world domain (e.g., "monthly temperature" or "daily stock returns") — slightly abstract.
• DQ-03: Appropriate Scale (4/4) — ACF values in [−1, 1], 95% CI at ±1.96/√300 ≈ ±0.113 is mathematically correct, PACF values reflect realistic AR(2) coefficients.

Code Quality (9/10)

• CQ-01: KISS Structure (2/3) — Multiple utility functions (lcgRng, randn, acfAt, computePACF) are genuinely necessary: no seeded RNG exists in the browser and the Durbin-Levinson recursion has no library shortcut. Still technically above "no functions" KISS.
• CQ-02: Reproducibility (2/2) — Deterministic LCG with seed 42. Fully reproducible.
• CQ-03: Clean Imports (2/2) — Only BarChart and ChartsReferenceLine imported, both used.
• CQ-04: Code Elegance (2/2) — Clean, idiomatic React. Complexity is justified by algorithm requirements. No fake functionality.
• CQ-05: Output & API (1/1) — Correct component export; harness produces plot-light.png + plot-dark.png + HTML files.

Library Mastery (7/10)

• LM-01: Idiomatic Usage (4/5) — Correct BarChart with skipAnimation, proper window.ANYPLOT_SIZE sizing, slotProps.legend API, margin prop, categoryGapRatio. Well above generic usage.
• LM-02: Distinctive Features (3/5) — Uses ChartsReferenceLine (MUI X-specific for statistical reference bands), slotProps customization API, and the sx prop with MUI CSS-in-JS targeting internal chart elements (.MuiChartsAxis-line).

Score Caps Applied

• None — no caps triggered.

Strengths

• Deterministic LCG RNG + Durbin-Levinson PACF recursion: rigorous, reproducible time series analysis in pure browser JS
• AR(2) data perfectly demonstrates the textbook ACF/PACF diagnostic pattern (exponential decay vs. cutoff)
• Theme tokens correctly plumbed throughout — t.pageBg, t.ink, t.inkSoft, t.grid, t.palette[0] — seamless light/dark adaptation
• ChartsReferenceLine with proper dashed CI styling and opacity shows good MUI X-specific API usage
• Clean dual-panel layout with thoughtful margins and bar gap ratio

Weaknesses

• Filled bars used instead of spec-required stem lines (vertical line from zero + marker at tip); MUI X community lacks native stem chart, but this is a structural spec deviation
• ACF and PACF panels are two separate BarChart instances — x-axis ranges align visually but the axes are not truly shared; minor alignment discrepancy is possible at tight margins
• PACF panel omits the "95% CI" label present on the ACF panel — inconsistent documentation of CI bounds across the two panels
• DQ-02: context is abstract AR(2) without a real-world domain label (e.g., monthly airline passengers or hourly temperature) — a one-word label in the title or subtitle would make it concrete

Issues Found

1. SC-01 / SC-02 LOW: Bars instead of stems — spec says "vertical stem lines (not filled bars)". MUI X community can't express native stems, so bars are the pragmatic fallback; documenting as a limitation.
   • Fix: If feasible, render stems using LineChart with mark customization and zero-to-value line segments; otherwise document the library limitation in a code comment
2. DQ-02 MINOR: Abstract AR(2) label without real-world anchor reduces realism score.
   • Fix: Add a brief subtitle or rename to something like "AR(2) Process · Monthly Temperature Residuals (Synthetic)" to anchor the example in a recognizable domain

AI Feedback for Next Attempt

If a repair attempt is triggered: (1) Consider implementing stems as a LineChart with custom mark components and reference lines from zero to each value if MUI X supports it — otherwise, bars are acceptable and this fix is optional. (2) Add a "95% CI" label to the PACF panel reference line (mirror the ACF panel). (3) Add a real-world domain label (e.g., "Monthly Temperature Residuals") as a brief subtitle or in the descriptive title prefix.

Verdict: APPROVED