feat(kumo): add Chart component with ECharts integration

.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>