feat(chart): rename formatter to dangerousHtmlFormatter for XSS awareness

[invisal]

Renames the formatter property in chart tooltips to dangerousHtmlFormatter
to make the security implications of using HTML formatters more explicit to developers.

Changes

• BREAKING CHANGE: The formatter property in KumoChartOption['tooltip']
  has been renamed to dangerousHtmlFormatter. The API remains identical—only
  the name has changed to increase XSS awareness.
• Updated EChart.tsx with the new property name and added security warnings
• Updated TimeseriesChart.tsx to use dangerousHtmlFormatter
• Added migration examples and updated documentation in ChartDemo.tsx and
  custom.mdx
• Exported new types from chart module index
• Includes changeset for minor version bump

Migration

Replace formatter with dangerousHtmlFormatter in your chart tooltip
configurations:

// Before
tooltip: {
  formatter: (params) => `<b>${params.name}</b>: ${params.value}`
}

// After  
tooltip: {
  dangerousHtmlFormatter: (params) => {
    const encode = echarts.format.encodeHTML;
    return `<b>${encode(params.name)}</b>: ${encode(params.value)}`;
  }
}

---

• Reviews
  • bonk has reviewed the change
  • automated review not possible because:
• Tests
  • Tests included/updated
  • Automated tests not possible - manual testing has been completed as follows:
  • Additional testing not necessary because:

[geoquant]

/bonk review pls

[pkg-pr-new]

npm i https://pkg.pr.new/@cloudflare/kumo@414

commit: 939db43

[github-actions]

Docs Preview

View docs preview

Commit: 939db43

[github-actions]

Visual Regression Report — 18 changed, 19 unchanged

18 screenshot(s) with visual changes:

Button / Basic

90 px (0.09%) changed

Before	After	Diff

Button / Variant: Primary

166 px (0.16%) changed

Before	After	Diff

Button / Variant: Ghost

175 px (0.17%) changed

Before	After	Diff

Button / Variant: Destructive

911 px (0.9%) changed

Before	After	Diff

Button / Variant: Outline

82 px (0.08%) changed

Before	After	Diff

Button / Icon Only

70 px (0.07%) changed

Before	After	Diff

Button / Loading State

1 px (0%) changed

Before	After	Diff

Dialog / Dialog With Actions

191 px (0.19%) changed

Before	After	Diff

Dialog / Dialog With Combobox

130 px (0.13%) changed

Before	After	Diff

Select / Select Sizes

429 px (0.23%) changed

Before	After	Diff

Select / Select Without Label

105 px (0.1%) changed

Before	After	Diff

Select / Select With Field

635 px (0.54%) changed

Before	After	Diff

Select / Select Placeholder

756 px (0.74%) changed

Before	After	Diff

Select / Select Custom Rendering

576 px (0.57%) changed

Before	After	Diff

Select / Select Loading

2,496 px (1.16%) changed

Before	After	Diff

Select / Select Disabled Options

928 px (0.91%) changed

Before	After	Diff

Select / Select Long List

1,525 px (1.29%) changed

Before	After	Diff

Select (Open)

431 px (0%) changed

Before	After	Diff

19 screenshot(s) unchanged

• Button / Variant: Secondary
• Button / Variant: Secondary Destructive
• Button / Sizes
• Button / With Icon
• Button / Disabled State
• Button / Title
• Dialog / Dialog Basic
• Dialog / Dialog Alert
• Dialog / Dialog Confirmation
• Dialog / Dialog With Select
• Dialog / Dialog With Dropdown
• Dialog (Open)
• Select / Select Basic
• Select / Select With Tooltip
• Select / Select Multiple
• Select / Select Complex
• Select / Select Disabled Items
• Select / Select Grouped
• Select / Select Grouped With Disabled

---

Generated by Kumo Visual Regression

[ask-bonk]

@geoquant Bonk workflow was cancelled.

View workflow run · To retry, trigger Bonk again.