diff --git a/plots/area-cumulative-flow/implementations/javascript/muix.tsx b/plots/area-cumulative-flow/implementations/javascript/muix.tsx new file mode 100644 index 0000000000..8198af2d7a --- /dev/null +++ b/plots/area-cumulative-flow/implementations/javascript/muix.tsx @@ -0,0 +1,174 @@ +// anyplot.ai +// area-cumulative-flow: Cumulative Flow Diagram for Workflow Analytics +// Library: muix 7.29.1 | JavaScript 22.23.2 +// Quality: 77/100 | Created: 2026-08-18 +import { LineChart } from "@mui/x-charts/LineChart"; + +const t = window.ANYPLOT_TOKENS; +const TITLE = "area-cumulative-flow · javascript · muix · anyplot.ai"; +const TITLE_HEIGHT = 56; +const TITLE_FONT_SIZE = Math.max(15, Math.round(22 * Math.min(1, 67 / TITLE.length))); + +// --- Data (in-memory, deterministic): software Kanban board, 90 days -------- +// Workflow order, earliest stage first. `count[s][t]` is the cumulative number +// of items that have entered/passed through stage `s` by day `t`. +const STAGES = ["Backlog", "Analysis", "Development", "Testing", "Done"]; +const N_DAYS = 90; +const START_DATE = new Date(2026, 0, 5); +const dates = Array.from( + { length: N_DAYS }, + (_, i) => new Date(START_DATE.getTime() + i * 86400000), +); + +// Fixed-seed 32-bit LCG (Numerical Recipes constants) — deterministic, no +// external RNG available in the browser. +let seed = 42; +function nextRand() { + seed = (Math.imul(seed, 1664525) + 1013904223) >>> 0; + return seed / 4294967296; +} +function randInt(min, max) { + return Math.floor(min + nextRand() * (max - min + 1)); +} + +// Backlog: cumulative arrivals into the pipeline. +const counts = STAGES.map(() => new Array(N_DAYS).fill(0)); +for (let day = 0; day < N_DAYS; day += 1) { + const arrivals = randInt(5, 9); + counts[0][day] = (day === 0 ? 0 : counts[0][day - 1]) + arrivals; +} + +// Downstream stages: each day, move as many items as capacity allows from the +// previous stage's pool into this one. Movement can never exceed what's +// actually waiting upstream, which guarantees count[s] <= count[s - 1] and +// count[s] stays monotonically non-decreasing over time. +// Testing's throughput cap is intentionally the tightest of the four — +// items enter Testing faster than QA can clear them, so the Testing band +// (WIP awaiting sign-off) widens steadily: a classic pipeline bottleneck. +const CAPACITY_RANGES = [ + [5, 9], // Backlog -> Analysis + [5, 9], // Analysis -> Development + [5, 9], // Development -> Testing + [2, 5], // Testing -> Done (bottleneck) +]; +for (let stage = 1; stage < STAGES.length; stage += 1) { + const [capMin, capMax] = CAPACITY_RANGES[stage - 1]; + for (let day = 0; day < N_DAYS; day += 1) { + const prevCumulative = day === 0 ? 0 : counts[stage][day - 1]; + const available = counts[stage - 1][day] - prevCumulative; + const capacity = randInt(capMin, capMax); + const moved = Math.max(0, Math.min(available, capacity)); + counts[stage][day] = prevCumulative + moved; + } +} + +// Distinct, non-adjacent Imprint hues — skip position 5 (matte red), the +// deferred semantic anchor for bad/error, since no stage here means "bad". +const STAGE_COLORS = [ + t.palette[0], + t.palette[1], + t.palette[2], + t.palette[3], + t.palette[5], +]; + +const dateFormatter = new Intl.DateTimeFormat("en-US", { + month: "short", + day: "numeric", +}); + +// Series are declared earliest-stage-first and NOT stacked (no `stack` id): +// each area fills independently from zero to its own raw cumulative count. +// Later series in the array paint on top, so Done (lowest values) fully +// occludes the stages beneath it, Testing shows only above the Done line, +// and so on up to Backlog, whose unoccluded sliver sits at the very top — +// exactly the "earliest stage on top" band order the spec calls for, +// without ever summing counts across stages. +const series = STAGES.map((stage, i) => ({ + id: stage, + data: counts[i], + label: stage, + color: STAGE_COLORS[i], + area: true, + showMark: false, + curve: "linear", +})); + +export default function Chart() { + const chartHeight = window.ANYPLOT_SIZE.height - TITLE_HEIGHT; + + return ( +
+
+ {TITLE} +
+ {/* MUI X's built-in yAxis label sits closer to the axis than 3-digit tick + labels extend, so it renders directly on top of them. A custom + absolutely-positioned label sidesteps that internal offset math. */} +
+ Cumulative Items +
+ dateFormatter.format(date), + }, + ]} + yAxis={[ + { + tickLabelStyle: { fontSize: 14 }, + }, + ]} + grid={{ horizontal: true }} + margin={{ top: 16, right: 32, bottom: 56, left: 84 }} + slotProps={{ + legend: { + direction: "row", + position: { vertical: "top", horizontal: "middle" }, + labelStyle: { fontSize: 14 }, + }, + }} + /> +
+ ); +} diff --git a/plots/area-cumulative-flow/metadata/javascript/muix.yaml b/plots/area-cumulative-flow/metadata/javascript/muix.yaml new file mode 100644 index 0000000000..09ceae99f4 --- /dev/null +++ b/plots/area-cumulative-flow/metadata/javascript/muix.yaml @@ -0,0 +1,261 @@ +library: muix +language: javascript +specification_id: area-cumulative-flow +created: '2026-08-18T03:24:08Z' +updated: '2026-08-18T03:30:06Z' +generated_by: claude-sonnet +workflow_run: 32094676565 +issue: 5239 +language_version: 22.23.2 +library_version: 7.29.1 +preview_url_light: https://storage.googleapis.com/anyplot-images/plots/area-cumulative-flow/javascript/muix/plot-light.png +preview_url_dark: https://storage.googleapis.com/anyplot-images/plots/area-cumulative-flow/javascript/muix/plot-dark.png +preview_html_light: https://storage.googleapis.com/anyplot-images/plots/area-cumulative-flow/javascript/muix/plot-light.html +preview_html_dark: https://storage.googleapis.com/anyplot-images/plots/area-cumulative-flow/javascript/muix/plot-dark.html +quality_score: 77 +review: + strengths: + - 'Correct CFD semantics via an unstacked-area z-order technique: later (downstream) + stages paint on top and occlude earlier stages'' fills, so the visible band widths + equal each stage''s true WIP without ever summing counts across stages — the textbook-correct + construction of a cumulative flow diagram, not a naive `stack` sum that would + misrepresent WIP.' + - 'Full structural spec compliance: earliest stage (Backlog) renders on top, latest + (Done) on the bottom, and the capacity-capped flow algorithm guarantees monotonically + non-decreasing, upstream-bounded cumulative counts by construction (a stage can + never move more items downstream than are actually waiting).' + - 'Correct Imprint palette handling: first series is brand green (#009E73), position + 5 (matte red) is deliberately skipped per the documented semantic-anchor exception + since no stage represents ''bad/error'', data colors are identical across light/dark, + and both chrome backgrounds match the spec (#FAF8F1 / #1A1A17).' + - 'Clean, deterministic, reproducible code: seeded fixed LCG, clearly separated + arrival-generation vs. capacity-limited downstream flow, and comments that explain + the intentional Testing-stage bottleneck design.' + - 'Solves a real MUI X quirk cleanly: a custom absolutely-positioned Y-axis label + sidesteps the library''s built-in label overlapping 3-digit tick labels, rather + than leaving it broken or fighting the library with hacks.' + weaknesses: + - 'Three of the five stage bands (Backlog, Analysis, Development) are only ~3-15 + items wide against the chart''s ~650-item range, so they collapse to a barely-visible + sliver at normal viewing sizes — confirmed by inspecting the 400px gallery thumbnail, + where these three bands merge into a single indistinguishable line above the Testing + band. This undermines the CFD''s core purpose of comparing WIP/bottlenecks across + ALL pipeline stages, not just the one intentionally-tightest stage. Fix: widen + the gap between arrival capacity and downstream capacity for at least one more + upstream stage (e.g. also constrain Development''s capacity range below Backlog''s + arrival range for part of the period) so more than one band shows a clearly visible, + meaningfully different width at gallery/thumbnail scale.' + - 'At several points along the timeline (e.g. around day 20) the Development band + momentarily narrows to ~0px width because its randomized capacity happens to match + the upstream arrival rate exactly — this reads as a rendering glitch rather than + an intentional signal. Fix: bias the capacity ranges so each non-bottleneck stage + keeps a small but consistently non-zero WIP floor throughout (e.g. cap downstream + capacity a couple of units below the upstream range''s minimum rather than overlapping + it).' + image_description: |- + Light render (plot-light.png): + Background: Warm off-white, consistent with #FAF8F1 — not pure white, not dark. + Chrome: Title "area-cumulative-flow · javascript · muix · anyplot.ai" in dark ink top-left; horizontal legend (Backlog, Analysis, Development, Testing, Done with color swatches) centered below the title; Y-axis "Cumulative Items" (custom rotated label) and X-axis "Date" both dark ink and clearly legible; y tick labels (0-650) and x tick labels (Jan 5 ... Apr 5, every ~4 days) all dark and legible against the light background; subtle horizontal gridlines. + Data: Five stacked-looking bands from bottom to top — Done (cyan), Testing (ochre/orange, by far the widest and steadily growing — the intentional bottleneck), Development (blue, thin), Analysis (lavender, very thin), Backlog (green, thin) — all rising from 0 to ~635 over 90 days. First series (Backlog) is Imprint brand green as required. + Legibility verdict: PASS — all text is dark-on-light and clearly readable; however the Backlog/Analysis/Development bands are only a few pixels wide for most of the timeline and become very hard to distinguish from each other at reduced display sizes (see weaknesses). + + Dark render (plot-dark.png): + Background: Warm near-black, consistent with #1A1A17 — not pure black, not light. + Chrome: Same title, legend, and axis labels, now rendered in light ink against the dark background — no dark-on-dark issues observed; title, legend text, tick labels, and axis titles are all clearly legible. + Data: Same five bands in identical hues to the light render (green, lavender, blue, ochre, cyan) — confirmed data colors are unchanged between themes, only chrome (background/text/grid) flipped. + Legibility verdict: PASS — no dark-on-dark or light-on-light failures in either theme; the only readability issue is the physical thinness of three of the five data bands, which affects both renders equally since it's a data-scale issue, not a theme issue. + criteria_checklist: + visual_quality: + score: 24 + max: 30 + items: + - id: VQ-01 + name: Text Legibility + score: 7 + max: 8 + passed: true + comment: All title/axis/tick/legend text explicitly sized and clearly readable + in both themes, including at the 400px thumbnail. + - id: VQ-02 + name: No Overlap + score: 6 + max: 6 + passed: true + comment: No text/data collisions; custom Y-axis label avoids MUI X's built-in + label/tick overlap. + - id: VQ-03 + name: Element Visibility + score: 2 + max: 6 + passed: false + comment: Backlog/Analysis/Development bands are only a few px wide and nearly + invisible at gallery/thumbnail display sizes (confirmed on plot-light_400.png). + - id: VQ-04 + name: Color Accessibility + score: 1 + max: 2 + passed: false + comment: Palette itself is CVD-safe, but the extreme thinness of adjacent + lavender/blue/green bands compounds distinguishability risk for color-vision-deficient + viewers. + - id: VQ-05 + name: Layout & Canvas + score: 4 + max: 4 + passed: true + comment: Good proportions, nothing clipped, canvas gate passed at 3200x1800. + - id: VQ-06 + name: Axis Labels & Title + score: 2 + max: 2 + passed: true + comment: Descriptive 'Cumulative Items' and 'Date' axis labels. + - id: VQ-07 + name: Palette Compliance + score: 2 + max: 2 + passed: true + comment: Brand green first, correct documented skip of matte red (no 'bad' + stage), correct theme-adaptive backgrounds both renders. + design_excellence: + score: 11 + max: 20 + items: + - id: DE-01 + name: Aesthetic Sophistication + score: 5 + max: 8 + passed: false + comment: Thoughtful color/semantic choices and a custom-solved axis-label + quirk, but otherwise fairly standard area chart presentation. + - id: DE-02 + name: Visual Refinement + score: 3 + max: 6 + passed: false + comment: Subtle horizontal-only grid and clean chrome, but limited beyond + that. + - id: DE-03 + name: Data Storytelling + score: 3 + max: 6 + passed: false + comment: Intentional Testing-stage bottleneck narrative is a nice touch, but + the near-invisible other bands weaken the overall multi-stage story. + spec_compliance: + score: 15 + max: 15 + items: + - id: SC-01 + name: Plot Type + score: 5 + max: 5 + passed: true + comment: Correctly implements true CFD band semantics via unstacked z-order + layering. + - id: SC-02 + name: Required Features + score: 4 + max: 4 + passed: true + comment: Earliest stage on top, latest on bottom, monotonic non-decreasing + counts, legend present, reasonable x-axis date intervals. + - id: SC-03 + name: Data Mapping + score: 3 + max: 3 + passed: true + comment: X=date, Y=cumulative count, full 90-day range shown. + - id: SC-04 + name: Title & Legend + score: 3 + max: 3 + passed: true + comment: Title format correct; legend labels match stage names exactly. + data_quality: + score: 9 + max: 15 + items: + - id: DQ-01 + name: Feature Coverage + score: 2 + max: 6 + passed: false + comment: Only one of five stages (Testing) shows a visually meaningful WIP + band; the other four are effectively flat, so the diagram doesn't demonstrate + the plot type's full bottleneck-comparison capability. + - id: DQ-02 + name: Realistic Context + score: 5 + max: 5 + passed: true + comment: Plausible, neutral software Kanban board scenario. + - id: DQ-03 + name: Appropriate Scale + score: 2 + max: 4 + passed: false + comment: Capacity ranges for the three upstream stages nearly match the arrival + rate, driving their WIP to near-zero for most of the series. + code_quality: + score: 10 + max: 10 + items: + - id: CQ-01 + name: KISS Structure + score: 3 + max: 3 + passed: true + comment: No classes; minimal, necessary helper functions only. + - id: CQ-02 + name: Reproducibility + score: 2 + max: 2 + passed: true + comment: Deterministic fixed-seed LCG. + - id: CQ-03 + name: Clean Imports + score: 2 + max: 2 + passed: true + comment: Only LineChart imported and used. + - id: CQ-04 + name: Code Elegance + score: 2 + max: 2 + passed: true + comment: No fake UI/interactivity; clear, well-commented logic. + - id: CQ-05 + name: Output & API + score: 1 + max: 1 + passed: true + comment: Correct harness contract, skipAnimation set. + library_mastery: + score: 8 + max: 10 + items: + - id: LM-01 + name: Idiomatic Usage + score: 4 + max: 5 + passed: true + comment: Idiomatic LineChart area/axis/grid/legend configuration. + - id: LM-02 + name: Distinctive Features + score: 4 + max: 5 + passed: true + comment: Deliberately avoids MUI X's `stack` prop in favor of z-order layering + to get correct CFD semantics — shows real library + domain understanding. + verdict: REJECTED +impl_tags: + dependencies: [] + techniques: + - layer-composition + patterns: + - data-generation + dataprep: + - cumulative-sum + - time-series + styling: []