Skip to content

Fix ECharts/Chart.js rendering bugs found in MCP bug-bash#42

Open
Chenglong-MS wants to merge 1 commit into
devfrom
chenglong-ms/fix-render-bugs
Open

Fix ECharts/Chart.js rendering bugs found in MCP bug-bash#42
Chenglong-MS wants to merge 1 commit into
devfrom
chenglong-ms/fix-render-bugs

Conversation

@Chenglong-MS

Copy link
Copy Markdown
Contributor

Summary

Fixes four rendering bugs surfaced while exercising flint-chart-mcp as an external user in a bug-bash, each with a regression test.

# Backend / template Bug Fix
1 ECharts line / area / streamgraph The time axis parser only accepts ISO-8601 strings, so human-readable dates like "Jan 1 2000" (e.g. vega-datasets stocks.csv) silently dropped every point and the chart rendered blank. Pre-convert temporal x-values to epoch-ms via a shared toEChartsTemporal() helper.
2 ECharts heatmap Cell labels showed raw full-precision floats (e.g. 30.46666700000002) and string-sliced them when narrow, producing overlapping, illegible text. Always round to a width-appropriate number of decimals, fall back to integer, hide only if it still overflows.
3 ECharts boxplot Number(null) === 0, so rows with a missing measurement injected a spurious value at 0 (bogus whisker / outlier at 0). Drop null/empty cells before numeric coercion.
4 Chart.js bubble Same null->0 coercion piled bubbles at the origin (0, 0). Drop rows with missing x/y before building points.

Testing

  • npm run test -w packages/flint-js - 371 tests pass (3 new regression test files added).
  • npm run typecheck -w packages/flint-js - clean.
  • npm run build -w site - succeeds (galleries unaffected).
  • Re-rendered all four scenarios to PNG and visually confirmed the fixes.

Notes / out of scope

  • Vega-Lite radar does already emit a series legend in source (not reproducible); no change made.
  • The canvasSize hard-ceiling overflow observed in the bug-bash is layout-level and intentional in compute-layout; any actual PNG overflow lives in the MCP renderer and carries high gallery-regression risk, so it is left for a separate, focused change.

Co-authored-by: Copilot 223556219+Copilot@users.noreply.github.com

Fixes four rendering bugs surfaced while exercising flint-chart-mcp as an
external user, with regression tests for each.

- ECharts temporal x-axis (line/area/streamgraph): the `time` axis parser
  only accepts ISO-8601 strings, so common human-readable dates like
  "Jan 1 2000" (e.g. vega-datasets stocks.csv) silently dropped every point
  and the chart rendered blank. Pre-convert temporal x-values to epoch-ms via
  a shared `toEChartsTemporal()` helper.

- ECharts heatmap labels: cell labels showed raw full-precision floats
  (e.g. 30.46666700000002) and string-sliced them when narrow, producing
  overlapping, illegible text. Always round to a width-appropriate number of
  decimals, fall back to an integer, and hide only if it still overflows.

- Null -> 0 coercion (ECharts boxplot, Chart.js bubble): `Number(null)` is 0,
  so rows with a missing measurement injected phantom values at 0 (a bogus
  boxplot whisker/outlier at 0, and bubbles piled at the origin). Drop
  null/empty cells before numeric coercion instead.

Verified: 371 flint-js tests pass, typecheck clean, site build succeeds, and
the four scenarios were re-rendered and visually confirmed.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant