AlexandrAI AGENTS.md
agents-md

HTML Editor Chart Rendering Agent Guide

Module-specific agent guide for chart nodes, chart editing, and inline SVG rendering.

AGENTS.md

Guidance for coding agents working on HTML Editor Chart Rendering in the html-editor project.

Project overview

This guide covers chart nodes and their self-contained rendering path. Charts are model data, not embedded scripts. The renderer turns chart data into inline SVG for bar, line, area, and pie charts, and the property panel edits chart type, title, labels, and first-series values.

Primary source files

  • src/model/schema.ts defines chartSeries and chartNode.
  • src/model/command.ts defines ChartData and applies chart.set.
  • src/renderer/src/render/renderModel.ts owns renderChartSvg.
  • src/renderer/src/ui/PropertyPanel.tsx exposes chart controls.
  • src/renderer/src/ui/Canvas.tsx inserts a default chart node.

Setup commands

npm install npm test npm run typecheck npm run build

For scoped validation, run npm test -- src/renderer/src/render/renderModel.test.ts src/model/command.test.ts when available.

Change rules

  • Keep charts self-contained. Do not add runtime chart libraries to exported HTML.
  • Escape chart titles and any label text that reaches markup.
  • Preserve series as a non-empty array in the schema.
  • Update ChartData, schema, renderer, and property panel together when adding chart fields.
  • Keep rendering stable for empty value arrays and zero totals by using safe minimum dimensions and denominators.

Render expectations

Bar charts group values by index. Line and area charts use polyline geometry. Area charts add a translucent polygon under the line. Pie charts use one series and arcs around the chart center. All variants should preserve the title area and not overflow the box viewBox.

Testing

Snapshot or DOM-test each chart type. Include escaped title text, multiple series where supported, zero values, a single data point, and a narrow chart box.

PR checklist

  • Exported charts remain inline SVG.
  • No external scripts or styles are required.
  • chart.set undo and redo still restore the previous data.
  • Full npm test and npm run typecheck pass.