From 7e4ae6313f88c883121c662babb23e7367fe098d Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Sun, 21 Jun 2026 09:47:49 +0000 Subject: [PATCH 1/3] feat(highcharts): implement line-stress-strain --- .../implementations/javascript/highcharts.js | 239 ++++++++++++++++++ 1 file changed, 239 insertions(+) create mode 100644 plots/line-stress-strain/implementations/javascript/highcharts.js diff --git a/plots/line-stress-strain/implementations/javascript/highcharts.js b/plots/line-stress-strain/implementations/javascript/highcharts.js new file mode 100644 index 0000000000..8de05bffd8 --- /dev/null +++ b/plots/line-stress-strain/implementations/javascript/highcharts.js @@ -0,0 +1,239 @@ +// anyplot.ai +// line-stress-strain: Engineering Stress-Strain Curve +// Library: Highcharts 12.6.0 | Node 22 +// License: Highcharts — commercial license, free for non-commercial use (highcharts.com/license) +// Quality: pending | Created: 2026-06-21 + +//# anyplot-orientation: landscape + +const t = window.ANYPLOT_TOKENS; + +// Mild steel stress-strain data (deterministic) +// Regions: elastic (0–0.00125), yield plateau (0.00125–0.015), strain hardening (0.015–0.22), necking (0.22–0.295) +const curve = [ + // Elastic region — linear, E = 200,000 MPa + [0.0000, 0], [0.0002, 40], [0.0004, 80], [0.0006, 120], + [0.0008, 160], [0.0010, 200], [0.00125, 250], + // Yield plateau (Lüders bands) — mild steel characteristic + [0.0015, 248], [0.0020, 245], [0.0040, 245], + [0.0060, 246], [0.0080, 247], [0.0100, 248], + [0.0120, 249], [0.0150, 250], + // Strain hardening — stress rises from 250 to 400 MPa + [0.0200, 255], [0.0300, 268], [0.0450, 285], + [0.0600, 300], [0.0800, 318], [0.1000, 334], + [0.1200, 348], [0.1500, 368], [0.1800, 385], + [0.2000, 395], [0.2200, 400], + // Necking — stress falls to fracture + [0.2400, 390], [0.2600, 370], [0.2800, 342], [0.2950, 310], +]; + +// 0.2% offset line — parallel to elastic slope, offset by 0.002 strain +// Intersection with yield plateau at strain ≈ 0.00325 (stress = 250 MPa) +const offsetLine = [ + [0.0020, 0], + [0.0050, 600], // clipped by yAxis max; shows the full slope for reference +]; + +// Key mechanical property markers +const yieldX = 0.00325; +const yieldY = 250; +const utsX = 0.2200; +const utsY = 400; +const fracX = 0.2950; +const fracY = 310; + +let _annotated = false; + +Highcharts.chart('container', { + chart: { + type: 'line', + backgroundColor: 'transparent', + animation: false, + style: { fontFamily: 'inherit' }, + marginRight: 40, + events: { + render: function () { + if (_annotated) return; + _annotated = true; + + const ch = this; + const xAx = ch.xAxis[0]; + const yAx = ch.yAxis[0]; + const toX = (v) => xAx.toPixels(v, false); + const toY = (v) => yAx.toPixels(v, false); + const soft = { color: t.inkSoft, fontSize: '12px', fontStyle: 'italic' }; + + // Region labels — positioned above plot area (y = plotTop - 10) + const labelY = ch.plotTop - 12; + + // Elastic region label (narrow — place just right of y-axis) + ch.renderer.text('Elastic', toX(0.0006), labelY) + .css(soft).attr({ align: 'center', zIndex: 6 }).add(); + + // Strain Hardening label + ch.renderer.text('Strain Hardening', toX(0.11), labelY) + .css(soft).attr({ align: 'center', zIndex: 6 }).add(); + + // Necking label + ch.renderer.text('Necking', toX(0.257), labelY) + .css(soft).attr({ align: 'center', zIndex: 6 }).add(); + + // Young's modulus annotation near elastic slope + ch.renderer.text('E = 200 GPa', toX(0.0003), toY(175)) + .css({ color: t.inkSoft, fontSize: '11px' }) + .attr({ align: 'left', zIndex: 6 }).add(); + + // Vertical boundary lines at yield plateau start and UTS + [0.00125, 0.22].forEach(function (xVal) { + const px = toX(xVal); + ch.renderer.path(['M', px, toY(0), 'L', px, ch.plotTop]) + .attr({ + stroke: t.grid, + 'stroke-width': 1, + 'stroke-dasharray': '5,4', + zIndex: 3, + }).add(); + }); + + // Key point markers — circle + label + const points = [ + { x: yieldX, y: yieldY, label: 'Yield Point\n250 MPa', ax: 12, ay: -18 }, + { x: utsX, y: utsY, label: 'UTS\n400 MPa', ax: 12, ay: -18 }, + { x: fracX, y: fracY, label: 'Fracture\n310 MPa', ax: -10, ay: -18 }, + ]; + + points.forEach(function (p) { + const px = toX(p.x); + const py = toY(p.y); + + // Circle marker + ch.renderer.circle(px, py, 6) + .attr({ + fill: t.palette[3], // ochre — distinct from main curve + stroke: t.pageBg, + 'stroke-width': 1.5, + zIndex: 7, + }).add(); + + // Text label (two lines via two separate text calls) + const lines = p.label.split('\n'); + const align = p.ax > 0 ? 'left' : 'right'; + lines.forEach(function (line, i) { + ch.renderer.text(line, px + p.ax, py + p.ay + i * 15) + .css({ color: t.ink, fontSize: '12px', fontWeight: i === 0 ? 'bold' : 'normal' }) + .attr({ align: align, zIndex: 7 }).add(); + }); + }); + }, + }, + }, + + credits: { enabled: false }, + colors: t.palette, + + title: { + text: 'line-stress-strain · javascript · highcharts · anyplot.ai', + style: { color: t.ink, fontSize: '22px', fontWeight: '600' }, + }, + + xAxis: { + title: { + text: 'Engineering Strain, ε (dimensionless)', + style: { color: t.inkSoft, fontSize: '16px' }, + margin: 12, + }, + lineColor: t.inkSoft, + tickColor: t.inkSoft, + gridLineColor: t.grid, + gridLineWidth: 1, + labels: { style: { color: t.inkSoft, fontSize: '14px' }, format: '{value:.2f}' }, + min: 0, + max: 0.32, + tickInterval: 0.05, + startOnTick: true, + }, + + yAxis: { + title: { + text: 'Engineering Stress, σ (MPa)', + style: { color: t.inkSoft, fontSize: '16px' }, + margin: 12, + }, + lineColor: t.inkSoft, + tickColor: t.inkSoft, + gridLineColor: t.grid, + gridLineWidth: 1, + labels: { style: { color: t.inkSoft, fontSize: '14px' } }, + min: 0, + max: 450, + tickInterval: 50, + // Reference lines at yield and UTS + plotLines: [ + { + value: 250, + color: t.grid, + dashStyle: 'ShortDash', + width: 1, + zIndex: 2, + label: { + text: 'σₙ = 250 MPa', + style: { color: t.inkSoft, fontSize: '11px' }, + align: 'right', + x: -6, + y: -4, + }, + }, + { + value: 400, + color: t.grid, + dashStyle: 'ShortDash', + width: 1, + zIndex: 2, + label: { + text: 'UTS = 400 MPa', + style: { color: t.inkSoft, fontSize: '11px' }, + align: 'right', + x: -6, + y: -4, + }, + }, + ], + }, + + legend: { + itemStyle: { color: t.inkSoft, fontSize: '14px' }, + itemHoverStyle: { color: t.ink }, + backgroundColor: t.elevatedBg, + borderRadius: 4, + padding: 10, + }, + + tooltip: { enabled: false }, + + plotOptions: { + series: { animation: false }, + line: { enableMouseTracking: false }, + }, + + series: [ + { + name: 'Mild Steel', + type: 'line', + data: curve, + color: t.palette[0], // brand green #009E73 — first series + lineWidth: 3, + marker: { enabled: false }, + zIndex: 5, + }, + { + name: '0.2% Offset Line', + type: 'line', + data: offsetLine, + color: t.palette[2], // blue #4467A3 + lineWidth: 1.5, + dashStyle: 'ShortDash', + marker: { enabled: false }, + zIndex: 4, + }, + ], +}); From d5402c129a83a3d4a9d873db82ef77ebce709ac0 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Sun, 21 Jun 2026 09:47:58 +0000 Subject: [PATCH 2/3] chore(highcharts): add metadata for line-stress-strain --- .../metadata/javascript/highcharts.yaml | 21 +++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 plots/line-stress-strain/metadata/javascript/highcharts.yaml diff --git a/plots/line-stress-strain/metadata/javascript/highcharts.yaml b/plots/line-stress-strain/metadata/javascript/highcharts.yaml new file mode 100644 index 0000000000..23526f6d34 --- /dev/null +++ b/plots/line-stress-strain/metadata/javascript/highcharts.yaml @@ -0,0 +1,21 @@ +# Per-library metadata for highcharts implementation of line-stress-strain +# Auto-generated by impl-generate.yml + +library: highcharts +language: javascript +specification_id: line-stress-strain +created: '2026-06-21T09:47:58Z' +updated: '2026-06-21T09:47:58Z' +generated_by: claude-sonnet +workflow_run: 27900187827 +issue: 4413 +language_version: 22.22.3 +library_version: 12.6.0 +preview_url_light: https://storage.googleapis.com/anyplot-images/plots/line-stress-strain/javascript/highcharts/plot-light.png +preview_url_dark: https://storage.googleapis.com/anyplot-images/plots/line-stress-strain/javascript/highcharts/plot-dark.png +preview_html_light: https://storage.googleapis.com/anyplot-images/plots/line-stress-strain/javascript/highcharts/plot-light.html +preview_html_dark: https://storage.googleapis.com/anyplot-images/plots/line-stress-strain/javascript/highcharts/plot-dark.html +quality_score: null +review: + strengths: [] + weaknesses: [] From bbaaebf7f5d41e2562bd0eae1a031518107a6c0e Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Sun, 21 Jun 2026 09:57:40 +0000 Subject: [PATCH 3/3] chore(highcharts): update quality score 88 and review feedback for line-stress-strain --- .../implementations/javascript/highcharts.js | 5 +- .../metadata/javascript/highcharts.yaml | 258 +++++++++++++++++- 2 files changed, 253 insertions(+), 10 deletions(-) diff --git a/plots/line-stress-strain/implementations/javascript/highcharts.js b/plots/line-stress-strain/implementations/javascript/highcharts.js index 8de05bffd8..6d82f52aa2 100644 --- a/plots/line-stress-strain/implementations/javascript/highcharts.js +++ b/plots/line-stress-strain/implementations/javascript/highcharts.js @@ -1,8 +1,7 @@ // anyplot.ai // line-stress-strain: Engineering Stress-Strain Curve -// Library: Highcharts 12.6.0 | Node 22 -// License: Highcharts — commercial license, free for non-commercial use (highcharts.com/license) -// Quality: pending | Created: 2026-06-21 +// Library: highcharts 12.6.0 | JavaScript 22.22.3 +// Quality: 88/100 | Created: 2026-06-21 //# anyplot-orientation: landscape diff --git a/plots/line-stress-strain/metadata/javascript/highcharts.yaml b/plots/line-stress-strain/metadata/javascript/highcharts.yaml index 23526f6d34..5e3e88103b 100644 --- a/plots/line-stress-strain/metadata/javascript/highcharts.yaml +++ b/plots/line-stress-strain/metadata/javascript/highcharts.yaml @@ -1,11 +1,8 @@ -# Per-library metadata for highcharts implementation of line-stress-strain -# Auto-generated by impl-generate.yml - library: highcharts language: javascript specification_id: line-stress-strain created: '2026-06-21T09:47:58Z' -updated: '2026-06-21T09:47:58Z' +updated: '2026-06-21T09:57:40Z' generated_by: claude-sonnet workflow_run: 27900187827 issue: 4413 @@ -15,7 +12,254 @@ preview_url_light: https://storage.googleapis.com/anyplot-images/plots/line-stre preview_url_dark: https://storage.googleapis.com/anyplot-images/plots/line-stress-strain/javascript/highcharts/plot-dark.png preview_html_light: https://storage.googleapis.com/anyplot-images/plots/line-stress-strain/javascript/highcharts/plot-light.html preview_html_dark: https://storage.googleapis.com/anyplot-images/plots/line-stress-strain/javascript/highcharts/plot-dark.html -quality_score: null +quality_score: 88 review: - strengths: [] - weaknesses: [] + strengths: + - 'Perfect spec compliance: all required regions, critical points, offset line, + and Young''s modulus annotation present' + - Excellent data quality with factually accurate mild steel mechanical properties + (E=200 GPa, yield at 250 MPa, UTS at 400 MPa) + - 'Strong data storytelling: region labels guide the viewer through material behavior, + key point markers identify mechanical properties at a glance' + - 'Idiomatic Highcharts usage: render-event annotation pattern, plotLines API, renderer + SVG overlay' + - 'Perfect code quality: deterministic data, clean structure, correct harness integration' + - Both light and dark themes render correctly with fully theme-adaptive chrome + weaknesses: + - 'Second series (0.2% Offset Line) uses t.palette[2] (blue #4467A3) instead of + canonical t.palette[1] (lavender #C475FD) — use Imprint palette in 1→N canonical + order' + - The 0.2% offset line covers only ~1–2% of the x-axis width at the current chart + scale, making the construction visually almost invisible; consider marking the + intersection point more prominently or increasing line visibility + - 'DE-02 limited: the chart lacks deliberate visual simplification — consider removing + the full chart frame (chart.plotBorderWidth: 0) and tuning grid opacity explicitly' + - The E = 200 GPa annotation at 11px CSS is at the boundary of legibility; increase + to 13px + - 'Minor annotation crowding in the elastic region (x < 0.01): Yield Point label, + E=200 GPa text, and vertical boundary line converge — shift E=200 GPa annotation + to a higher x-position' + image_description: |- + Light render (plot-light.png): + Background: Warm off-white (~#FAF8F1) — correct theme surface + Chrome: Title "line-stress-strain · javascript · highcharts · anyplot.ai" in bold dark text at 22px, filling ~65-70% of canvas width (expected). X-axis label "Engineering Strain, ε (dimensionless)" and Y-axis label "Engineering Stress, σ (MPa)" both at 16px, readable. Tick labels at 14px, readable. Region labels ("Elastic", "Strain Hardening", "Necking") in italic inkSoft text above plot area — readable. Key-point annotation labels at 12px ("Yield Point", "UTS", "Fracture" with stress values) — readable. "E = 200 GPa" at 11px — borderline but readable. Reference plotLine labels ("σₙ = 250 MPa", "UTS = 400 MPa") at 11px on right margin — readable. + Data: First series (Mild Steel) in brand green #009E73 at lineWidth=3 — correct first-series color. Second series (0.2% Offset Line) in blue #4467A3 (palette[2]) at lineWidth=1.5 dashed — NOTE: skips palette[1] (lavender). Ochre key-point circles (palette[3]) at Yield Point, UTS, Fracture. Horizontal reference dashed lines at 250 MPa and 400 MPa. Vertical dashed boundary lines at yield plateau start (ε=0.00125) and UTS (ε=0.22). + Legibility verdict: PASS + + Dark render (plot-dark.png): + Background: Warm near-black (~#1A1A17) — correct dark surface + Chrome: Title and all axis/tick labels flip to light off-white (#F0EFE8 / #B8B7B0 range) — fully readable against dark background. No dark-on-dark failures detected. Region labels appear in muted off-white — readable. Annotation text at 11-12px readable against dark background. plotLine labels ("σₙ = 250 MPa", "UTS = 400 MPa") appear in inkSoft light tone — readable. + Data: Colors identical to light render — Mild Steel curve is same #009E73 green, 0.2% Offset Line is same blue #4467A3, ochre key-point circles are same color. Data color identity between themes confirmed. + Legibility verdict: PASS + criteria_checklist: + visual_quality: + score: 27 + max: 30 + items: + - id: VQ-01 + name: Text Legibility + score: 7 + max: 8 + passed: true + comment: All font sizes explicitly set (22px title, 16px axis labels, 14px + ticks, 12px annotations, 11px E=200GPa). Both themes readable. 11px annotation + slightly small. + - id: VQ-02 + name: No Overlap + score: 5 + max: 6 + passed: true + comment: Minor visual crowding in elastic region near y-axis (Yield Point + label, E=200 GPa annotation, vertical boundary line). No pixel-level text + overlap. + - id: VQ-03 + name: Element Visibility + score: 6 + max: 6 + passed: true + comment: Main curve at lineWidth=3 and dashed offset line at 1.5 well-sized. + Ochre key-point circles prominent and distinguishable. + - id: VQ-04 + name: Color Accessibility + score: 2 + max: 2 + passed: true + comment: Imprint palette provides CVD-safe contrast between green curve and + blue offset line. Ochre markers distinct from both. + - id: VQ-05 + name: Layout & Canvas + score: 4 + max: 4 + passed: true + comment: Canvas gate passed. Layout appropriate for stress-strain curve data + geometry. Lower-right empty space is inherent to the chart type. + - id: VQ-06 + name: Axis Labels & Title + score: 2 + max: 2 + passed: true + comment: Engineering Strain, ε (dimensionless) and Engineering Stress, σ (MPa) + — both descriptive with units. Title format correct. + - id: VQ-07 + name: Palette Compliance + score: 1 + max: 2 + passed: false + comment: 'First series correctly uses palette[0] (#009E73). Second series + uses palette[2] (blue #4467A3) instead of canonical palette[1] (lavender + #C475FD) — canonical order violation. Backgrounds correct (#FAF8F1 light + / #1A1A17 dark). Chrome fully theme-adaptive.' + design_excellence: + score: 13 + max: 20 + items: + - id: DE-01 + name: Aesthetic Sophistication + score: 5 + max: 8 + passed: true + comment: Comprehensive annotation system (region labels, renderer circles/text, + reference plotLines) elevates above defaults. Professional and purposeful + but not publication-ready. + - id: DE-02 + name: Visual Refinement + score: 3 + max: 6 + passed: false + comment: Legend has styled background, padding, border radius. Grid uses token + colors. No deliberate spine/frame removal. No explicit grid opacity tuning. + Functional but not polished. + - id: DE-03 + name: Data Storytelling + score: 5 + max: 6 + passed: true + comment: 'Strong storytelling: three labeled behavioral regions, three annotated + critical points with stress values, horizontal reference lines at yield + and UTS, 0.2% offset method illustrated.' + spec_compliance: + score: 15 + max: 15 + items: + - id: SC-01 + name: Plot Type + score: 5 + max: 5 + passed: true + comment: Correct line chart of engineering stress vs. engineering strain. + - id: SC-02 + name: Required Features + score: 4 + max: 4 + passed: true + comment: 'All required features: region labels (elastic, strain hardening, + necking), critical points (yield, UTS, fracture), E=200 GPa annotation, + 0.2% offset line. Offset line visually compressed but technically correct.' + - id: SC-03 + name: Data Mapping + score: 3 + max: 3 + passed: true + comment: Strain on x-axis (0–0.30), stress on y-axis (0–450 MPa). All data + regions visible. + - id: SC-04 + name: Title & Legend + score: 3 + max: 3 + passed: true + comment: 'Title: ''line-stress-strain · javascript · highcharts · anyplot.ai''. + Legend: Mild Steel and 0.2% Offset Line. Correct format and labels.' + data_quality: + score: 15 + max: 15 + items: + - id: DQ-01 + name: Feature Coverage + score: 6 + max: 6 + passed: true + comment: 'All stress-strain curve features: linear elastic, Lüders band yield + plateau (~245-250 MPa from ε=0.0015 to 0.015), strain hardening (250→400 + MPa), necking (400→310 MPa to fracture).' + - id: DQ-02 + name: Realistic Context + score: 5 + max: 5 + passed: true + comment: Mild steel under uniaxial tensile loading — standard neutral engineering + materials science scenario. + - id: DQ-03 + name: Appropriate Scale + score: 4 + max: 4 + passed: true + comment: 'Factually accurate: E=200 GPa, yield ~250 MPa (typical 200-300), + UTS ~400 MPa (typical 400-500), total elongation ~30% (typical 20-30). Lüders + band behavior correctly modeled.' + code_quality: + score: 10 + max: 10 + items: + - id: CQ-01 + name: KISS Structure + score: 3 + max: 3 + passed: true + comment: 'Clean sequential: header → data definitions → chart config. No functions + or classes.' + - id: CQ-02 + name: Reproducibility + score: 2 + max: 2 + passed: true + comment: All data hardcoded (deterministic inline arrays). No randomness. + - id: CQ-03 + name: Clean Imports + score: 2 + max: 2 + passed: true + comment: No imports. Only uses window.ANYPLOT_TOKENS and Highcharts globals + per harness contract. + - id: CQ-04 + name: Code Elegance + score: 2 + max: 2 + passed: true + comment: chart.events.render with _annotated guard is idiomatic Highcharts + pattern. Well-commented with region boundaries and mechanical property references. + - id: CQ-05 + name: Output & API + score: 1 + max: 1 + passed: true + comment: Correct Highcharts.chart() call. animation:false set at both levels. + credits disabled. No explicit width/height. + library_mastery: + score: 8 + max: 10 + items: + - id: LM-01 + name: Idiomatic Usage + score: 4 + max: 5 + passed: true + comment: Expert use of chart.events.render for synchronized annotations, yAxis.plotLines + for threshold references, renderer.text/path/circle for SVG overlay. + - id: LM-02 + name: Distinctive Features + score: 4 + max: 5 + passed: true + comment: yAxis.plotLines API with label/dashStyle/zIndex is distinctly Highcharts. + chart.renderer SVG API for custom boundary lines and circle markers is Highcharts-specific. + verdict: REJECTED +impl_tags: + dependencies: [] + techniques: + - annotations + - html-export + patterns: + - data-generation + - iteration-over-groups + dataprep: [] + styling: []