feat(kumo): add Chart component with ECharts integration#93
Merged
geoquant merged 16 commits intocloudflare:mainfrom Mar 4, 2026
Merged
feat(kumo): add Chart component with ECharts integration#93geoquant merged 16 commits intocloudflare:mainfrom
geoquant merged 16 commits intocloudflare:mainfrom
Conversation
commit: |
Contributor
Docs PreviewCommit: |
Contributor
- 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.
geoquant
requested changes
Mar 3, 2026
Collaborator
geoquant
left a comment
There was a problem hiding this comment.
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", |
Collaborator
There was a problem hiding this comment.
can we make these css variables part of the theme:
scripts/theme-generator/config.ts
that way the charts can adapt to themes
Contributor
Author
There was a problem hiding this comment.
We're using the ECharts Canvas renderer, Canvas doesn't support CSS variables natively.
Collaborator
There was a problem hiding this comment.
approved, but i think we can do this with...
- Define chart palette colors as semantic tokens in scripts/theme-generator/config.ts (they become CSS custom properties in theme-kumo.css)
- Resolve them at runtime via getComputedStyle(el).getPropertyValue('--kumo-chart-*').trim()
- Pass the resolved hex values to ECharts
geoquant
approved these changes
Mar 3, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.












Summary
Components Added
Documentation
Technical Details
Changes
Files Changed
packages/kumo/src/components/chart/packages/kumo-docs-astro/src/pages/charts/