Skip to content

feat(kumo): add Chart component with ECharts integration#93

Merged
geoquant merged 16 commits intocloudflare:mainfrom
invisal:feat/chart
Mar 4, 2026
Merged

feat(kumo): add Chart component with ECharts integration#93
geoquant merged 16 commits intocloudflare:mainfrom
invisal:feat/chart

Conversation

@invisal
Copy link
Contributor

@invisal invisal commented Feb 16, 2026

Summary

  • Add Chart component family with Apache ECharts integration
  • Add TimeseriesChart component for time-based data visualization
  • Add ChartPalette for consistent color theming
  • Add Chart legend support
  • Add comprehensive documentation and examples

Components Added

  • Chart - Base component with EChart wrapper for full ECharts API access
  • TimeseriesChart - Specialized component for time-series data with built-in formatters
  • ChartLegend - Legend component for chart series

Documentation

  • Charts landing page with setup instructions and color palette guide
  • Timeseries chart examples:
    • Basic line chart with time-based data
    • Incomplete data chart demonstrating data gaps
    • Time range selection chart with interactive controls
  • Custom chart examples page
  • Comprehensive API documentation in component registry

Technical Details

  • Integrated Apache ECharts library
  • Added accessibility improvements (aria-labels on Button examples)
  • Split timeseries logic into separate file for better organization
  • Reorganized chart documentation into dedicated Charts section

Changes

  • 7 commits
  • 17 files changed (+1,674, -21)

Files Changed

  • New Chart components in packages/kumo/src/components/chart/
  • New documentation pages in packages/kumo-docs-astro/src/pages/charts/
  • Updated component registry and demos
  • Added echarts dependency to package.json

@invisal invisal marked this pull request as draft February 16, 2026 13:51
@invisal invisal changed the title Draft: Adding Chart feat(kumo): add Chart component with ECharts integration Feb 16, 2026
@pkg-pr-new
Copy link

pkg-pr-new bot commented Feb 16, 2026

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

commit: ca51722

@github-actions
Copy link
Contributor

github-actions bot commented Feb 16, 2026

Docs Preview

View docs preview

Commit: eb04d21

@github-actions
Copy link
Contributor

github-actions bot commented Feb 16, 2026

Visual Regression Report

4 screenshot(s) with visual changes:

Button / Loading State

9 px (0%) changed

Before After Diff
Before After Diff

Dialog / Basic Dialog

102,450 px (1.95%) changed

Before After Diff
Before After Diff

Select / Loading

0 px (0%) changed

Before After Diff
Before After Diff

Select (Open)

288 px (0%) changed

Before After Diff
Before After Diff
20 screenshot(s) unchanged
  • Button / Variants
  • Button / Sizes
  • Button / With Icon
  • Button / Icon Only
  • Button / Disabled State
  • Dialog / Alert Dialog (role="alertdialog")
  • Dialog / Confirmation Dialog (with disablePointerDismissal)
  • Dialog / With Actions
  • Dialog / With Select
  • Dialog / With Combobox
  • Dialog / With Dropdown
  • Dialog (Open)
  • Select / Basic Usage
  • Select / Basic Label and Value
  • Select / Placeholder
  • Select / Custom Rendering
  • Select / Multiple Item
  • Select / More Example
  • Select / Select
  • Select / Select.Option

Generated by Kumo Visual Regression

- Add Chart, ChartPalette, and TimeseriesChart components
- Integrate Apache ECharts for data visualization
- Add accessibility improvements to Button examples (aria-labels)
- Update component registry with new Chart component
- Add demo and documentation pages
- Add Charts navigation section to sidebar with collapsible menu
- Split chart examples into dedicated pages (timeseries, custom)
- Create charts landing page with setup instructions and navigation
- Move chart.astro to charts/custom.astro for better organization
- Remove debug code block from ChartDemo component
- Add BasicLineChartDemo showing simple time-based data
- Add IncompleteDataChartDemo demonstrating incomplete data regions
- Add TimeRangeSelectionChartDemo with interactive time range selection
- Expand timeseries page with multiple examples and usage patterns
- Include code examples for each chart variant
…artPalette to namespace, add JSDoc, export types
Adds a yAxisTickLabelFormat callback to TimeseriesChart for custom y-axis tick label formatting, wires xAxisTickCount to the x-axis splitNumber, applies the formatter in tooltips, and adds a CustomXAxisLabelFormat demo with docs.
@invisal invisal marked this pull request as ready for review February 24, 2026 15:54
@invisal invisal marked this pull request as draft February 24, 2026 15:58
@invisal invisal marked this pull request as ready for review February 24, 2026 16:31
Copy link
Collaborator

@geoquant geoquant left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

overall looks great, sorry for the nit about the colors...

* by index (e.g. the first series gets Blue, the second gets Violet, etc.).
*/
enum ChartCategoricalLightColors {
Blue = "#086FFF",
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can we make these css variables part of the theme:
scripts/theme-generator/config.ts

that way the charts can adapt to themes

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We're using the ECharts Canvas renderer, Canvas doesn't support CSS variables natively.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

approved, but i think we can do this with...

  1. Define chart palette colors as semantic tokens in scripts/theme-generator/config.ts (they become CSS custom properties in theme-kumo.css)
  2. Resolve them at runtime via getComputedStyle(el).getPropertyValue('--kumo-chart-*').trim()
  3. Pass the resolved hex values to ECharts

@geoquant geoquant merged commit e6218d2 into cloudflare:main Mar 4, 2026
7 checks passed
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.

2 participants