feat(chart): add BubbleMap chart component (#602)

Author: AnmolSaini16

.changeset/spicy-maps-glow.md

@@ -0,0 +1,11 @@
+---
+"@cloudflare/kumo": minor
+---
+
+feat(chart): add `BubbleMap` chart component
+
+New `BubbleMap` component renders proportional bubbles over a registered
+geographic map using ECharts' scatter series. Includes value-based radius
+scaling, a `mapColors` palette addition to `ChartPalette`, and supporting
+types. Also extracts `escapeHtml` / `defaultValueFormat` tooltip helpers into a
+shared `tooltip-utils` module reused by `SankeyChart`.

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

@@ -86,6 +86,7 @@ const chartItems: NavItem[] = [
   { label: "Charts", href: "/charts" },
   { label: "Colors", href: "/charts/colors" },
   { label: "Timeseries", href: "/charts/timeseries" },
+  { label: "Maps", href: "/charts/maps" },
   { label: "Sankey", href: "/charts/sankey" },
   { label: "Custom Chart", href: "/charts/custom" },
 ];

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

@@ -7,20 +7,43 @@ export function ThemeToggle() {
   const [mounted, setMounted] = useState(false);
 
   useEffect(() => {
+    const getCurrentTheme = () => {
+      const mode = document.documentElement.getAttribute("data-mode");
+      if (mode === "dark" || mode === "light") return mode;
+
+      const stored = localStorage.getItem("theme");
+      if (stored === "dark" || stored === "light") return stored;
+
+      return window.matchMedia("(prefers-color-scheme: dark)").matches
+        ? "dark"
+        : "light";
+    };
+
+    const handleThemeChange = (event: Event) => {
+      const nextTheme = (event as CustomEvent<{ theme?: "light" | "dark" }>)
+        .detail?.theme;
+      if (nextTheme === "dark" || nextTheme === "light") {
+        setTheme(nextTheme);
+      }
+    };
+
     setMounted(true);
-    const stored = localStorage.getItem("theme");
-    if (stored === "dark" || stored === "light") {
-      setTheme(stored);
-    } else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
-      setTheme("dark");
-    }
+    setTheme(getCurrentTheme());
+    window.addEventListener("kumo:theme-change", handleThemeChange);
+
+    return () => {
+      window.removeEventListener("kumo:theme-change", handleThemeChange);
+    };
   }, []);
 
   const toggleTheme = () => {
     const newTheme = theme === "light" ? "dark" : "light";
     setTheme(newTheme);
     localStorage.setItem("theme", newTheme);
     document.documentElement.setAttribute("data-mode", newTheme);
+    window.dispatchEvent(
+      new CustomEvent("kumo:theme-change", { detail: { theme: newTheme } }),
+    );
   };
 
   // Prevent hydration mismatch
@@ -37,6 +60,7 @@ export function ThemeToggle() {
       variant="ghost"
       shape="square"
       aria-label={`Switch to ${theme === "light" ? "dark" : "light"} mode`}
+      title="Toggle theme (D)"
       onClick={toggleTheme}
     >
       {theme === "light" ? <MoonIcon size={20} /> : <SunIcon size={20} />}