Skip to content

fix(chart): audit and repair the chart component across its 12 types #138

Description

@LeadcodeDev

What happened

While building examples/effect-ts.json I needed a chart comparing native TypeScript against Effect. I used horizontal_bar with two points, one of them zero, and the render was unusable — a flat light band with no axis, no labels and no second bar. I replaced it with two number cards rather than ship something visibly broken, so the defect is still there.

What is already known

  • chart was one of the 23 components with no size source at all; fix(components): give the 23 unsized components a size source #126 gave it a default (400×300 landscape, 320×320 for pie/donut/radar/radial_bar). So the sizing half is fixed, and the remaining problem is in the painter.
  • The audit's card matrix classified chart as "renders correctly once explicitly sized", but that was a single configuration — chart has 12 types and only one was exercised.
  • A zero value is the specific case that broke: a bar of height zero should still render its label and its axis slot.

What this issue asks for

Audit the chart component the way the earlier capability audits were run — measured, not eyeballed:

  1. Render every one of the 12 chart_type values (bar, line, pie, donut, horizontal_bar, area, stacked_bar, radar, scatter, radial_bar, funnel, waterfall) with realistic data, both standalone and inside a card. Report which render correctly, which render but are mis-laid-out, and which produce nothing.
  2. For each, check the parts separately: bars/points, axes, gridlines, labels, legend, value annotations. A chart that draws its series but no labels is unusable in a video and should be reported as such.
  3. Cover the degenerate inputs a real author hits: a zero value, a single data point, all values equal, negative values, more categories than fit the width, long category labels.
  4. Establish whether the legibility floor added in fix(validate): check content against its card, not only against the frame #128 covers chart text — the audit noted chart labels as explicitly not covered.

Every visual claim proven by rendering and measuring pixels. A passing unit test is not evidence a chart is readable.

Acceptance

  • A matrix of the 12 types × the parts above, with the evidence.
  • The horizontal_bar case from effect-ts.json renders as a usable comparison chart, labels included.
  • Degenerate inputs either render sensibly or fail validation with an actionable message — not silently.
  • Documentation in .claude/skills/rustmotion/rules/chart-types.md corrected against what was measured.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions