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

* feat(kumo): add Chart component with ECharts integration

- 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

* docs: reorganize chart documentation into dedicated charts section

- 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

* docs: add comprehensive timeseries chart examples

- 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

* refactor(kumo): split timeseriess to separate file

* refactor(docs): add small demo for chart docs index

* feat(docs): improve the chart color palette docs

* feat(kumo): add chart legend

* feat(chart): add legend inactive state

* refactor(chart): extract Color.ts, add chart package export entry

* refactor(chart): rename yAxisTickNumber to yAxisTickCount, convert ChartPalette to namespace, add JSDoc, export types

* feat(chart): add yAxisTickLabelFormat prop and xAxisTickCount wiring

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.

* feat(chart): add gradient prop to TimeseriesChart with docs example

* feat(chart): add loading state with animated sine-wave skeleton to TimeseriesChart

* chore: add changeset for TimeseriesChart component

* refactor(chart): remove unused cn import from TimeseriesChart

---------

Co-authored-by: geoquant <1237781+geoquant@users.noreply.github.com>

Author: invisal

.changeset/feat-timeseries-chart.md

@@ -0,0 +1,5 @@
+---
+"@cloudflare/kumo": minor
+---
+
+Add TimeseriesChart component with ECharts integration, supporting legends, gradient fills, custom axis formatting, loading skeleton state, and configurable color palettes.

packages/kumo-docs-astro/package.json

@@ -23,6 +23,7 @@
     "@phosphor-icons/react": "catalog:",
     "astro": "^5.16.7",
     "clsx": "catalog:",
+    "echarts": "^6.0.0",
     "match-sorter": "^8.2.0",
     "react-markdown": "10.1.0",
     "remark-gfm": "4.0.1",

packages/kumo-docs-astro/src/components/SidebarNav.tsx

@@ -72,6 +72,12 @@ const componentItems: NavItem[] = [
   { label: "Tooltip", href: "/components/tooltip" },
 ];
 
+const chartItems: NavItem[] = [
+  { label: "Charts", href: "/charts" },
+  { label: "Timeseries", href: "/charts/timeseries" },
+  { label: "Custom Chart", href: "/charts/custom" },
+];
+
 // Blocks are CLI-installed components that you own and can customize
 // Use `npx @cloudflare/kumo blocks` to see available blocks
 // Use `npx @cloudflare/kumo add <block>` to install
@@ -98,6 +104,7 @@ export function SidebarNav({ currentPath }: SidebarNavProps) {
   const [sidebarOpen, setSidebarOpen] = useState(true);
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
   const [componentsOpen, setComponentsOpen] = useState(true);
+  const [chartsOpen, setChartsOpen] = useState(true);
   const [blocksOpen, setBlocksOpen] = useState(true);
 
   const activePath = normalizePathname(currentPath);
@@ -242,6 +249,44 @@ export function SidebarNav({ currentPath }: SidebarNavProps) {
         </ul>
       </div>
 
+      <div className="mb-4">
+        <button
+          type="button"
+          className="flex w-full cursor-pointer items-center justify-between rounded-lg px-2 py-2 text-sm font-medium text-kumo-default transition-colors hover:bg-kumo-tint"
+          onClick={() => setChartsOpen(!chartsOpen)}
+        >
+          <span>Charts</span>
+          <CaretDownIcon
+            size={12}
+            className={cn(
+              "text-kumo-subtle transition-transform duration-200",
+              !chartsOpen && "-rotate-90",
+            )}
+          />
+        </button>
+        <ul
+          className={cn(
+            "flex flex-col gap-px overflow-hidden transition-all duration-300 ease-in-out mt-1",
+            chartsOpen ? "max-h-[500px] opacity-100" : "max-h-0 opacity-0",
+          )}
+        >
+          {chartItems.map((item) => (
+            <li key={item.href}>
+              <a
+                href={item.href}
+                className={cn(
+                  LI_STYLE,
+                  "pl-4",
+                  currentPath === item.href && LI_ACTIVE_STYLE,
+                )}
+              >
+                {item.label}
+              </a>
+            </li>
+          ))}
+        </ul>
+      </div>
+
       <div>
         {/* Blocks Section */}
         <button

packages/kumo-docs-astro/src/components/demos/Chart/ChartCard.astro

@@ -0,0 +1,29 @@
+---
+interface Props {
+  title: string;
+  description: string;
+  href: string;
+}
+
+const { title, description, href } = Astro.props;
+---
+
+<div class="rounded-lg border border-kumo-line bg-kumo-elevated">
+  <div class="p-4">
+    <div class="text-kumo-default">{title}</div>
+    <div class="mt-1 text-sm text-kumo-secondary">{description}</div>
+
+    <div class="mt-4">
+      <a
+        href={href}
+        class="inline-flex items-center justify-center rounded-md border border-kumo-line bg-kumo-control px-3 py-1.5 text-sm font-medium text-kumo-default transition-colors hover:bg-kumo-recessed"
+      >
+        Learn more
+      </a>
+    </div>
+  </div>
+
+  <div class="border-kumo-line border-t bg-kumo-base p-2">
+    <slot />
+  </div>
+</div>