From 87b0cede9dea2db37b378ff22b5521878e96c6a6 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Wed, 26 Aug 2026 19:14:33 +0000 Subject: [PATCH 1/5] feat(muix): implement bar-stacked-labeled --- .../implementations/javascript/muix.tsx | 121 ++++++++++++++++++ 1 file changed, 121 insertions(+) create mode 100644 plots/bar-stacked-labeled/implementations/javascript/muix.tsx diff --git a/plots/bar-stacked-labeled/implementations/javascript/muix.tsx b/plots/bar-stacked-labeled/implementations/javascript/muix.tsx new file mode 100644 index 0000000000..c01f6342f5 --- /dev/null +++ b/plots/bar-stacked-labeled/implementations/javascript/muix.tsx @@ -0,0 +1,121 @@ +// anyplot.ai +// bar-stacked-labeled: Stacked Bar Chart with Total Labels +// Library: MUI X Charts | React | Node 22 +// License: @mui/x-charts — MIT (community). Pro/Premium are out of scope. +// Quality: pending | Created: 2026-08-26 +import { BarChart } from "@mui/x-charts/BarChart"; +import { useXScale, useYScale } from "@mui/x-charts/hooks"; +import Box from "@mui/material/Box"; +import Typography from "@mui/material/Typography"; + +const t = window.ANYPLOT_TOKENS; + +// --- Data (in-memory, deterministic) ---------------------------------------- +// Project budget breakdown by phase, three stacked cost types (Imprint palette 1-3). +const phases = ["Planning", "Design", "Development", "Testing", "Deployment"]; +const costTypes = ["Labor", "Materials", "Equipment"]; +const labor = [18, 32, 58, 34, 22]; +const materials = [6, 14, 20, 10, 8]; +const equipment = [4, 10, 16, 6, 12]; +const totals = phases.map((_, i) => labor[i] + materials[i] + equipment[i]); +const maxTotal = Math.max(...totals); + +const TITLE = "bar-stacked-labeled · javascript · muix · anyplot.ai"; +const TITLE_H = 56; + +// --- Total labels (custom overlay, positioned via chart scales) ------------- +function TotalLabels() { + const xScale = useXScale(); + const yScale = useYScale(); + return ( + + {phases.map((phase, i) => ( + + {`$${totals[i]}k`} + + ))} + + ); +} + +// --- Chart (default-exported component — the harness mounts it) ------------- +export default function Chart() { + const { width, height } = window.ANYPLOT_SIZE; + + return ( + + + + {TITLE} + + + + + + + + ); +} From cb72aaf9de65d29e18f0a4503c87f4432c104b08 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Wed, 26 Aug 2026 19:14:45 +0000 Subject: [PATCH 2/5] chore(muix): add metadata for bar-stacked-labeled --- .../metadata/javascript/muix.yaml | 21 +++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 plots/bar-stacked-labeled/metadata/javascript/muix.yaml diff --git a/plots/bar-stacked-labeled/metadata/javascript/muix.yaml b/plots/bar-stacked-labeled/metadata/javascript/muix.yaml new file mode 100644 index 0000000000..4bdf2f709d --- /dev/null +++ b/plots/bar-stacked-labeled/metadata/javascript/muix.yaml @@ -0,0 +1,21 @@ +# Per-library metadata for muix implementation of bar-stacked-labeled +# Auto-generated by impl-generate.yml + +library: muix +language: javascript +specification_id: bar-stacked-labeled +created: '2026-08-26T19:14:45Z' +updated: '2026-08-26T19:14:45Z' +generated_by: claude-sonnet +workflow_run: 33003514982 +issue: 3504 +language_version: 22.23.2 +library_version: 7.29.1 +preview_url_light: https://storage.googleapis.com/anyplot-images/plots/bar-stacked-labeled/javascript/muix/plot-light.png +preview_url_dark: https://storage.googleapis.com/anyplot-images/plots/bar-stacked-labeled/javascript/muix/plot-dark.png +preview_html_light: https://storage.googleapis.com/anyplot-images/plots/bar-stacked-labeled/javascript/muix/plot-light.html +preview_html_dark: https://storage.googleapis.com/anyplot-images/plots/bar-stacked-labeled/javascript/muix/plot-dark.html +quality_score: null +review: + strengths: [] + weaknesses: [] From 4f0d4f54b0ce0b37052087e4de4e90f47e1cb76a Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Wed, 26 Aug 2026 19:19:42 +0000 Subject: [PATCH 3/5] chore(muix): update quality score 86 and review feedback for bar-stacked-labeled --- .../implementations/javascript/muix.tsx | 5 +- .../metadata/javascript/muix.yaml | 234 +++++++++++++++++- 2 files changed, 229 insertions(+), 10 deletions(-) diff --git a/plots/bar-stacked-labeled/implementations/javascript/muix.tsx b/plots/bar-stacked-labeled/implementations/javascript/muix.tsx index c01f6342f5..bafa6d534d 100644 --- a/plots/bar-stacked-labeled/implementations/javascript/muix.tsx +++ b/plots/bar-stacked-labeled/implementations/javascript/muix.tsx @@ -1,8 +1,7 @@ // anyplot.ai // bar-stacked-labeled: Stacked Bar Chart with Total Labels -// Library: MUI X Charts | React | Node 22 -// License: @mui/x-charts — MIT (community). Pro/Premium are out of scope. -// Quality: pending | Created: 2026-08-26 +// Library: muix 7.29.1 | JavaScript 22.23.2 +// Quality: 86/100 | Created: 2026-08-26 import { BarChart } from "@mui/x-charts/BarChart"; import { useXScale, useYScale } from "@mui/x-charts/hooks"; import Box from "@mui/material/Box"; diff --git a/plots/bar-stacked-labeled/metadata/javascript/muix.yaml b/plots/bar-stacked-labeled/metadata/javascript/muix.yaml index 4bdf2f709d..7537daf287 100644 --- a/plots/bar-stacked-labeled/metadata/javascript/muix.yaml +++ b/plots/bar-stacked-labeled/metadata/javascript/muix.yaml @@ -1,11 +1,8 @@ -# Per-library metadata for muix implementation of bar-stacked-labeled -# Auto-generated by impl-generate.yml - library: muix language: javascript specification_id: bar-stacked-labeled created: '2026-08-26T19:14:45Z' -updated: '2026-08-26T19:14:45Z' +updated: '2026-08-26T19:19:42Z' generated_by: claude-sonnet workflow_run: 33003514982 issue: 3504 @@ -15,7 +12,230 @@ preview_url_light: https://storage.googleapis.com/anyplot-images/plots/bar-stack preview_url_dark: https://storage.googleapis.com/anyplot-images/plots/bar-stacked-labeled/javascript/muix/plot-dark.png preview_html_light: https://storage.googleapis.com/anyplot-images/plots/bar-stacked-labeled/javascript/muix/plot-light.html preview_html_dark: https://storage.googleapis.com/anyplot-images/plots/bar-stacked-labeled/javascript/muix/plot-dark.html -quality_score: null +quality_score: 86 review: - strengths: [] - weaknesses: [] + strengths: + - Correct use of MUI X's useXScale/useYScale hooks to render dynamic, accurately-positioned + total labels above each stack — solves the spec's core requirement (total labels + above bar stacks) in an idiomatic, library-native way. + - Imprint palette applied correctly and identically across both themes (green → + lavender → blue canonical order), with theme-adaptive chrome (title, axis labels, + tick labels, grid) reading cleanly in both light and dark renders. + - Y-axis max computed with deliberate headroom (`Math.ceil((maxTotal * 1.18) / 10) + * 10`) specifically to leave clear vertical space for the total labels — directly + satisfies the spec's 'adequate vertical space above tallest bar' note. + - skipAnimation set, deterministic hardcoded data, clean imports — no extraneous + dependencies or fake functionality. + weaknesses: + - Bar segments use flat fills with no edge stroke; a subtle 1px lighter/darker edge + per the style guide's 'Bar edges' guidance would add definition, especially for + the lavender segment which has lower contrast against the cream background. + - Beyond the custom total-label overlay, styling stays close to out-of-the-box MUI + X BarChart defaults — no differentiating typographic treatment, rounded bar corners, + or other polish that would push Design Excellence higher. + - Segment (per-bar) value labels are omitted (optional per spec) — adding them would + let readers read individual cost-type contributions (e.g. Development's Labor + segment) without estimating from the axis. + image_description: |- + Light render (plot-light.png): + Background: Warm off-white (#FAF8F1), not pure white — correct. + Chrome: Bold dark title top-left "bar-stacked-labeled · javascript · muix · anyplot.ai", clearly readable. Y-axis label "Cost ($ thousands)" and X-axis label "Project Phase" both dark, readable, similarly sized. Tick labels dark and legible. Horizontal gridlines subtle, light gray. Legend at bottom-center (Labor / Materials / Equipment swatches + labels) fully readable. + Data: First series (Labor) is brand green #009E73, second (Materials) is lavender, third (Equipment) is blue — matches Imprint canonical order. Bold black total labels ("$28k", "$56k", "$94k", "$50k", "$42k") sit directly above each stack with clear headroom below the y=120 axis max. + Legibility verdict: PASS + + Dark render (plot-dark.png): + Background: Warm near-black (#1A1A17), not pure black — correct. + Chrome: Title, axis labels, and tick labels render in light/white text, clearly legible against the dark surface. Gridlines subtle. Legend text white and readable. + Data: Labor/Materials/Equipment colors are pixel-identical to the light render (green, lavender, blue) — only chrome flipped, as required. Total labels flip to white text, clearly readable above each stack with no dark-on-dark issues anywhere. + Legibility verdict: PASS + criteria_checklist: + visual_quality: + score: 28 + max: 30 + items: + - id: VQ-01 + name: Text Legibility + score: 7 + max: 8 + passed: true + comment: All text (title, axis labels, ticks, legend, total labels) legible + in both themes; explicit font sizes set (title 22px, axis labels 16px, ticks + 14px, total labels 20px bold). Confirmed readable at 400px mobile scale. + - id: VQ-02 + name: No Overlap + score: 6 + max: 6 + passed: true + comment: No text/element collisions in either render. + - id: VQ-03 + name: Element Visibility + score: 5 + max: 6 + passed: true + comment: Bar segments clearly visible and well-sized; no edge stroke applied + to segments for extra definition (minor). + - id: VQ-04 + name: Color Accessibility + score: 2 + max: 2 + passed: true + comment: Adequate contrast; CVD-safe Imprint palette; no red-green-only encoding. + - id: VQ-05 + name: Layout & Canvas + score: 4 + max: 4 + passed: true + comment: Canvas gate passed (3200x1800); balanced proportions; no overflow + or clipping. + - id: VQ-06 + name: Axis Labels & Title + score: 2 + max: 2 + passed: true + comment: Descriptive axis labels with units ('Cost ($ thousands)', 'Project + Phase'). + - id: VQ-07 + name: Palette Compliance + score: 2 + max: 2 + passed: true + comment: 'First series #009E73 (Labor), canonical order for Materials/Equipment; + backgrounds #FAF8F1/#1A1A17 confirmed; both renders theme-correct.' + design_excellence: + score: 10 + max: 20 + items: + - id: DE-01 + name: Aesthetic Sophistication + score: 4 + max: 8 + passed: false + comment: Correct palette and a genuinely useful custom total-label overlay, + but otherwise close to out-of-the-box MUI X BarChart styling. + - id: DE-02 + name: Visual Refinement + score: 3 + max: 6 + passed: false + comment: Only horizontal gridlines (correct per style guide) and generous + margins, but bars lack edge definition. + - id: DE-03 + name: Data Storytelling + score: 3 + max: 6 + passed: false + comment: Bold total labels create a clear focal point highlighting the budget + peak at Development; segments within each stack aren't further differentiated. + spec_compliance: + score: 15 + max: 15 + items: + - id: SC-01 + name: Plot Type + score: 5 + max: 5 + passed: true + comment: Correct stacked bar chart. + - id: SC-02 + name: Required Features + score: 4 + max: 4 + passed: true + comment: Total labels above every stack present and clearly formatted ($Xk); + segment labels correctly treated as optional and omitted. + - id: SC-03 + name: Data Mapping + score: 3 + max: 3 + passed: true + comment: X=phase, Y=cost, all data represented. + - id: SC-04 + name: Title & Legend + score: 3 + max: 3 + passed: true + comment: Title matches mandated format exactly; legend labels match data series. + data_quality: + score: 15 + max: 15 + items: + - id: DQ-01 + name: Feature Coverage + score: 6 + max: 6 + passed: true + comment: Shows stacking, totals, and legend — all plot-type aspects. + - id: DQ-02 + name: Realistic Context + score: 5 + max: 5 + passed: true + comment: Plausible, neutral project-budget-by-phase scenario. + - id: DQ-03 + name: Appropriate Scale + score: 4 + max: 4 + passed: true + comment: Sensible cost values ($18k-$94k) for a project budget. + code_quality: + score: 10 + max: 10 + items: + - id: CQ-01 + name: KISS Structure + score: 3 + max: 3 + passed: true + comment: Minimal, necessary component functions only. + - id: CQ-02 + name: Reproducibility + score: 2 + max: 2 + passed: true + comment: Fully deterministic hardcoded data. + - id: CQ-03 + name: Clean Imports + score: 2 + max: 2 + passed: true + comment: Only used imports (BarChart, scale hooks, Box, Typography). + - id: CQ-04 + name: Code Elegance + score: 2 + max: 2 + passed: true + comment: Idiomatic hook-based overlay, no fake UI. + - id: CQ-05 + name: Output & API + score: 1 + max: 1 + passed: true + comment: skipAnimation set; harness owns file output; current API used. + library_mastery: + score: 8 + max: 10 + items: + - id: LM-01 + name: Idiomatic Usage + score: 4 + max: 5 + passed: true + comment: Idiomatic stack config, band xAxis, grid, legend slotProps. + - id: LM-02 + name: Distinctive Features + score: 4 + max: 5 + passed: true + comment: useXScale/useYScale hooks used to build a scale-accurate custom overlay + for total labels — a genuinely advanced technique beyond the built-in API + surface. + verdict: APPROVED +impl_tags: + dependencies: [] + techniques: + - annotations + patterns: + - data-generation + dataprep: [] + styling: + - publication-ready From 6630ca1c0a2e2e6009f452c0bd73e8301542171e Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Wed, 26 Aug 2026 19:24:41 +0000 Subject: [PATCH 4/5] fix(muix): address review feedback for bar-stacked-labeled Attempt 1/4 - fixes based on AI review --- .../implementations/javascript/muix.tsx | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/plots/bar-stacked-labeled/implementations/javascript/muix.tsx b/plots/bar-stacked-labeled/implementations/javascript/muix.tsx index bafa6d534d..ff50b46ea4 100644 --- a/plots/bar-stacked-labeled/implementations/javascript/muix.tsx +++ b/plots/bar-stacked-labeled/implementations/javascript/muix.tsx @@ -69,7 +69,13 @@ export default function Chart() { }} > {TITLE} @@ -80,6 +86,7 @@ export default function Chart() { height={height - TITLE_H} colors={t.palette} skipAnimation + borderRadius={4} grid={{ horizontal: true }} xAxis={[ { @@ -105,9 +112,10 @@ export default function Chart() { margin={{ top: 30, right: 32, bottom: 90, left: 90 }} sx={{ "& .MuiChartsAxis-tickLabel": { fontSize: "14px" }, - "& .MuiChartsAxis-label": { fontSize: "16px" }, + "& .MuiChartsAxis-label": { fontSize: "16px", fontWeight: 600 }, "& .MuiChartsLegend-label": { fontSize: "15px" }, "& .MuiChartsGrid-line": { stroke: t.grid, strokeWidth: 1 }, + "& .MuiBarElement-root": { stroke: t.pageBg, strokeWidth: 1.5 }, }} slotProps={{ legend: { position: { vertical: "bottom", horizontal: "middle" } }, From e1fb21ea317563a69bfe684819db838552464f89 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Wed, 26 Aug 2026 19:28:32 +0000 Subject: [PATCH 5/5] chore(muix): update quality score 88 and review feedback for bar-stacked-labeled --- .../implementations/javascript/muix.tsx | 2 +- .../metadata/javascript/muix.yaml | 135 +++++++++--------- 2 files changed, 70 insertions(+), 67 deletions(-) diff --git a/plots/bar-stacked-labeled/implementations/javascript/muix.tsx b/plots/bar-stacked-labeled/implementations/javascript/muix.tsx index ff50b46ea4..5277665694 100644 --- a/plots/bar-stacked-labeled/implementations/javascript/muix.tsx +++ b/plots/bar-stacked-labeled/implementations/javascript/muix.tsx @@ -1,7 +1,7 @@ // anyplot.ai // bar-stacked-labeled: Stacked Bar Chart with Total Labels // Library: muix 7.29.1 | JavaScript 22.23.2 -// Quality: 86/100 | Created: 2026-08-26 +// Quality: 88/100 | Created: 2026-08-26 import { BarChart } from "@mui/x-charts/BarChart"; import { useXScale, useYScale } from "@mui/x-charts/hooks"; import Box from "@mui/material/Box"; diff --git a/plots/bar-stacked-labeled/metadata/javascript/muix.yaml b/plots/bar-stacked-labeled/metadata/javascript/muix.yaml index 7537daf287..8b679cb131 100644 --- a/plots/bar-stacked-labeled/metadata/javascript/muix.yaml +++ b/plots/bar-stacked-labeled/metadata/javascript/muix.yaml @@ -2,7 +2,7 @@ library: muix language: javascript specification_id: bar-stacked-labeled created: '2026-08-26T19:14:45Z' -updated: '2026-08-26T19:19:42Z' +updated: '2026-08-26T19:28:32Z' generated_by: claude-sonnet workflow_run: 33003514982 issue: 3504 @@ -12,41 +12,43 @@ preview_url_light: https://storage.googleapis.com/anyplot-images/plots/bar-stack preview_url_dark: https://storage.googleapis.com/anyplot-images/plots/bar-stacked-labeled/javascript/muix/plot-dark.png preview_html_light: https://storage.googleapis.com/anyplot-images/plots/bar-stacked-labeled/javascript/muix/plot-light.html preview_html_dark: https://storage.googleapis.com/anyplot-images/plots/bar-stacked-labeled/javascript/muix/plot-dark.html -quality_score: 86 +quality_score: 88 review: strengths: - - Correct use of MUI X's useXScale/useYScale hooks to render dynamic, accurately-positioned - total labels above each stack — solves the spec's core requirement (total labels - above bar stacks) in an idiomatic, library-native way. + - Correct use of MUI X's useXScale/useYScale hooks to render dynamic, scale-accurate + total labels above each stack — an idiomatic, distinctive solution to the spec's + core requirement. + - Repair pass added a subtle 1.5px pageBg-colored edge stroke and 4px border radius + to bar segments, giving clearer segment definition without breaking the Imprint + palette. - Imprint palette applied correctly and identically across both themes (green → - lavender → blue canonical order), with theme-adaptive chrome (title, axis labels, - tick labels, grid) reading cleanly in both light and dark renders. - - Y-axis max computed with deliberate headroom (`Math.ceil((maxTotal * 1.18) / 10) - * 10`) specifically to leave clear vertical space for the total labels — directly - satisfies the spec's 'adequate vertical space above tallest bar' note. - - skipAnimation set, deterministic hardcoded data, clean imports — no extraneous + lavender → blue canonical order), with fully theme-adaptive chrome (title, axes, + legend, total labels all flip correctly). + - Y-axis max computed with deliberate headroom (Math.ceil((maxTotal * 1.18) / 10) + * 10) specifically to leave room for total labels — directly satisfies the spec's + headroom note. + - Deterministic hardcoded data, skipAnimation set, clean imports — no extraneous dependencies or fake functionality. weaknesses: - - Bar segments use flat fills with no edge stroke; a subtle 1px lighter/darker edge - per the style guide's 'Bar edges' guidance would add definition, especially for - the lavender segment which has lower contrast against the cream background. - - Beyond the custom total-label overlay, styling stays close to out-of-the-box MUI - X BarChart defaults — no differentiating typographic treatment, rounded bar corners, - or other polish that would push Design Excellence higher. - - Segment (per-bar) value labels are omitted (optional per spec) — adding them would - let readers read individual cost-type contributions (e.g. Development's Labor - segment) without estimating from the axis. + - Design still reads close to a well-configured MUI X BarChart default beyond the + total-label overlay and the new edge/border-radius touches — no differentiating + typographic treatment, accent, or additional polish. + - No further visual hierarchy within each stack (e.g. optional per-segment value + labels for the dominant Labor segment) to reinforce the data story beyond the + total labels. + - Element visibility is good but unremarkable — bar widths and segment proportions + rely on library defaults rather than a deliberately tuned density-aware sizing. image_description: |- Light render (plot-light.png): - Background: Warm off-white (#FAF8F1), not pure white — correct. - Chrome: Bold dark title top-left "bar-stacked-labeled · javascript · muix · anyplot.ai", clearly readable. Y-axis label "Cost ($ thousands)" and X-axis label "Project Phase" both dark, readable, similarly sized. Tick labels dark and legible. Horizontal gridlines subtle, light gray. Legend at bottom-center (Labor / Materials / Equipment swatches + labels) fully readable. - Data: First series (Labor) is brand green #009E73, second (Materials) is lavender, third (Equipment) is blue — matches Imprint canonical order. Bold black total labels ("$28k", "$56k", "$94k", "$50k", "$42k") sit directly above each stack with clear headroom below the y=120 axis max. + Background: Warm off-white, matches #FAF8F1 — not pure white. + Chrome: Bold dark title "bar-stacked-labeled · javascript · muix · anyplot.ai" top-left, clearly readable. Y-axis label "Cost ($ thousands)" and X-axis label "Project Phase" both dark, legible, and similarly sized/weighted (bolded in this attempt). Tick labels dark and legible. Horizontal gridlines subtle and light. Legend ("Labor", "Materials", "Equipment") centered below the plot, dark text, readable. + Data: Stacks use brand green (Labor, #009E73), lavender (Materials), and blue (Equipment) — canonical Imprint order, first series is #009E73 as required. Bars now show a thin cream-colored (pageBg) edge stroke and slight border radius separating segments, and each bar. Bold black total labels ("$28k", "$56k", "$94k", "$50k", "$42k") sit directly above each stack with clear headroom below the y=120 axis max. Legibility verdict: PASS Dark render (plot-dark.png): - Background: Warm near-black (#1A1A17), not pure black — correct. - Chrome: Title, axis labels, and tick labels render in light/white text, clearly legible against the dark surface. Gridlines subtle. Legend text white and readable. - Data: Labor/Materials/Equipment colors are pixel-identical to the light render (green, lavender, blue) — only chrome flipped, as required. Total labels flip to white text, clearly readable above each stack with no dark-on-dark issues anywhere. + Background: Warm near-black, matches #1A1A17 — not pure black. + Chrome: Title, axis labels, and tick labels flip to white/light text and remain clearly legible — no dark-on-dark issues anywhere. Legend text is white and readable. Gridlines remain subtle. + Data: Colors (green/lavender/blue) are pixel-identical to the light render, confirming only chrome flipped. The bar edge stroke now reads as a thin near-black (pageBg) separator between segments, consistent with the theme. Total labels flip to white text, clearly readable above each stack. Legibility verdict: PASS criteria_checklist: visual_quality: @@ -58,74 +60,72 @@ review: score: 7 max: 8 passed: true - comment: All text (title, axis labels, ticks, legend, total labels) legible - in both themes; explicit font sizes set (title 22px, axis labels 16px, ticks - 14px, total labels 20px bold). Confirmed readable at 400px mobile scale. + comment: All font sizes explicitly set, readable in both themes; title fits + without clipping - id: VQ-02 name: No Overlap score: 6 max: 6 passed: true - comment: No text/element collisions in either render. + comment: No collisions between text, data, or legend - id: VQ-03 name: Element Visibility score: 5 max: 6 passed: true - comment: Bar segments clearly visible and well-sized; no edge stroke applied - to segments for extra definition (minor). + comment: Bars clearly visible with new edge stroke + border radius, but sizing + still relies on library defaults - id: VQ-04 name: Color Accessibility score: 2 max: 2 passed: true - comment: Adequate contrast; CVD-safe Imprint palette; no red-green-only encoding. + comment: Good contrast, CVD-safe; edge strokes aid segment distinction beyond + hue alone - id: VQ-05 name: Layout & Canvas score: 4 max: 4 passed: true - comment: Canvas gate passed (3200x1800); balanced proportions; no overflow - or clipping. + comment: Chart fills the canvas well, balanced margins, nothing cut off - id: VQ-06 name: Axis Labels & Title score: 2 max: 2 passed: true - comment: Descriptive axis labels with units ('Cost ($ thousands)', 'Project - Phase'). + comment: Descriptive axis labels with units (Cost ($ thousands)) - id: VQ-07 name: Palette Compliance score: 2 max: 2 passed: true - comment: 'First series #009E73 (Labor), canonical order for Materials/Equipment; - backgrounds #FAF8F1/#1A1A17 confirmed; both renders theme-correct.' + comment: 'Canonical Imprint order, first series #009E73, theme-correct chrome + in both renders' design_excellence: - score: 10 + score: 12 max: 20 items: - id: DE-01 name: Aesthetic Sophistication - score: 4 + score: 5 max: 8 passed: false - comment: Correct palette and a genuinely useful custom total-label overlay, - but otherwise close to out-of-the-box MUI X BarChart styling. + comment: Border radius, edge strokes, and letter-spacing add polish above + a stock default, but overall still close to a well-configured MUI X chart - id: DE-02 name: Visual Refinement - score: 3 + score: 4 max: 6 passed: false - comment: Only horizontal gridlines (correct per style guide) and generous - margins, but bars lack edge definition. + comment: New pageBg edge stroke and border radius on bars give visible refinement; + grid subtle, spines minimal - id: DE-03 name: Data Storytelling score: 3 max: 6 passed: false - comment: Bold total labels create a clear focal point highlighting the budget - peak at Development; segments within each stack aren't further differentiated. + comment: Bold total labels create a clear focal point on the Development peak, + but segments aren't further differentiated for storytelling spec_compliance: score: 15 max: 15 @@ -135,26 +135,26 @@ review: score: 5 max: 5 passed: true - comment: Correct stacked bar chart. + comment: Correct stacked bar chart - id: SC-02 name: Required Features score: 4 max: 4 passed: true - comment: Total labels above every stack present and clearly formatted ($Xk); - segment labels correctly treated as optional and omitted. + comment: Total labels above each stack, adequate headroom, all spec features + present - id: SC-03 name: Data Mapping score: 3 max: 3 passed: true - comment: X=phase, Y=cost, all data represented. + comment: Category on x-axis, value stacked by component on y-axis - id: SC-04 name: Title & Legend score: 3 max: 3 passed: true - comment: Title matches mandated format exactly; legend labels match data series. + comment: Title format correct; legend labels match cost-type series data_quality: score: 15 max: 15 @@ -164,19 +164,21 @@ review: score: 6 max: 6 passed: true - comment: Shows stacking, totals, and legend — all plot-type aspects. + comment: Segment proportions vary meaningfully across phases (Development + dominated by Labor, Planning more balanced) - id: DQ-02 name: Realistic Context score: 5 max: 5 passed: true - comment: Plausible, neutral project-budget-by-phase scenario. + comment: Neutral, realistic project-budget-by-phase scenario - id: DQ-03 name: Appropriate Scale score: 4 max: 4 passed: true - comment: Sensible cost values ($18k-$94k) for a project budget. + comment: Plausible cost figures and proportions for a project budget in $ + thousands code_quality: score: 10 max: 10 @@ -186,31 +188,32 @@ review: score: 3 max: 3 passed: true - comment: Minimal, necessary component functions only. + comment: Straightforward data → overlay component → chart; TotalLabels component + is required for the hooks pattern, not over-engineering - id: CQ-02 name: Reproducibility score: 2 max: 2 passed: true - comment: Fully deterministic hardcoded data. + comment: Deterministic hardcoded arrays - id: CQ-03 name: Clean Imports score: 2 max: 2 passed: true - comment: Only used imports (BarChart, scale hooks, Box, Typography). + comment: Only used imports (BarChart, hooks, Box, Typography) - id: CQ-04 name: Code Elegance score: 2 max: 2 passed: true - comment: Idiomatic hook-based overlay, no fake UI. + comment: Appropriate complexity, no fake functionality - id: CQ-05 name: Output & API score: 1 max: 1 passed: true - comment: skipAnimation set; harness owns file output; current API used. + comment: Harness-mounted component, current MUI X API library_mastery: score: 8 max: 10 @@ -220,15 +223,15 @@ review: score: 4 max: 5 passed: true - comment: Idiomatic stack config, band xAxis, grid, legend slotProps. + comment: Correct high-level BarChart API usage, stack config, sx/slotProps + overrides - id: LM-02 name: Distinctive Features score: 4 max: 5 passed: true - comment: useXScale/useYScale hooks used to build a scale-accurate custom overlay - for total labels — a genuinely advanced technique beyond the built-in API - surface. + comment: useXScale/useYScale hooks drive a scale-accurate custom overlay — + distinctive to MUI X verdict: APPROVED impl_tags: dependencies: [] @@ -238,4 +241,4 @@ impl_tags: - data-generation dataprep: [] styling: - - publication-ready + - edge-highlighting