import { useState, useMemo } from "react"; import { LineChart, Line, AreaChart, Area, BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, ScatterChart, Scatter, PieChart, Pie, Cell, RadarChart, Radar, PolarGrid, PolarAngleAxis, PolarRadiusAxis, Legend, ComposedChart } from "recharts"; import { useSQLQuery } from "@motherduck/react-sql-query"; import { ChevronLeft, ChevronRight, Copy, Check, Coffee, X } from "lucide-react"; const N = (v) => (v != null ? Number(v) : 0); export const REQUIRED_DATABASES = [ { type: 'share', path: 'md:_share/galactic_coffee/af03aa17-e9d8-4493-aa0a-104f0b75f225', alias: 'galactic_coffee' } ]; const TABLE = '"galactic_coffee"."main"."sales"'; const STATIONS = [ "Asteroid Espresso", "Comet Grind Station", "Nebula Roasters", "Orbital Brew Lab", "Starlight Café", "Pulsar Drip House", "Quasar Coffee Co.", "Supernova Station" ]; const STATION_KEY_MAP = { "Asteroid Espresso": "Asteroid", "Comet Grind Station": "Comet", "Nebula Roasters": "Nebula", "Orbital Brew Lab": "Orbital", "Starlight Café": "Starlight", "Pulsar Drip House": "Pulsar", "Quasar Coffee Co.": "Quasar", "Supernova Station": "Supernova" }; const COFFEE_KEYS = ["ColdBrew", "Mocha", "PourOver", "Latte", "Espresso", "Nitro", "Gravity", "Chai"]; const STATION_KEYS = ["Asteroid", "Comet", "Nebula", "Orbital", "Starlight", "Pulsar", "Quasar", "Supernova"]; const MONTHS_SHORT = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; const THEMES = { tufte: { name: "Tufte Minimal", category: "Classic", colors: { bg: "#FFFFF8", text: "#111", muted: "#666", chart: ["#111", "#666", "#999"] }, font: "Georgia, serif", title: { weight: "normal", transform: "none" }, chart: { gridLines: false, strokeWidth: 1.5, curve: "linear", barRadius: 0, dotRadius: 0, areaOpacity: 0.1 }, charts: [ { type: "smallMultiples", title: "Revenue by Station", data: "stationMonthly" }, { type: "scatter", title: "Cups vs Revenue", data: "monthly" }, { type: "directLabeled", title: "Coffee Type Revenue", data: "coffee" }, { type: "line", title: "Monthly Trend", data: "monthly" }, { type: "heatmap", title: "Station × Month Revenue", data: "heatmap" }, { type: "composedChart", title: "Revenue & Cups Trend", data: "monthly" } ], prompt: "Create a Dive with a Tufte Minimal style.\nInspired by: Edward Tufte, The Visual Display of Quantitative Information (1983).\n\nVisual rules:\n- Background: #FFFFF8. Text: #111. Muted: #666.\n- Chart colors: monochrome [\"#111\",\"#666\",\"#999\"].\n- Font: Georgia, serif. Titles: normal weight, no transform.\n- Layout: generous whitespace, no gridlines, no chart borders.\n- Charts: no gridlines, thin strokes (1.5px), linear interpolation.\n- Direct labeling instead of legends. Small multiples preferred.\n- Interactive: year toggle, metric toggle, click-to-filter on bars/pies.\n\nPairs well with: small multiples, sparklines, scatter plots, slope charts, direct-labeled values, heatmaps, composed dual-axis charts. Avoid: pie charts, 3D charts, heavy gridlines.\n\nReference: Edward Tufte, \"The Visual Display of Quantitative Information\" (1983). See also \"Envisioning Information\" (1990).\n\nFeel: Quiet authority — the data speaks for itself." }, ink_paper: { name: "Ink & Paper", category: "Classic", colors: { bg: "#fff", text: "#121212", muted: "#666", chart: ["#326fa8", "#e15759", "#59a14f", "#edc949", "#af7aa1"] }, font: "Georgia, serif", title: { weight: "bold", transform: "none" }, chart: { gridLines: true, strokeWidth: 2, curve: "linear", barRadius: 0, dotRadius: 0, areaOpacity: 0.15 }, charts: [ { type: "line", title: "Monthly Revenue", data: "monthly" }, { type: "bar", title: "Station Revenue", data: "station" }, { type: "horizontalBar", title: "Coffee Types Ranked", data: "coffee" }, { type: "table", title: "Station Details", data: "station" }, { type: "composedChart", title: "Revenue & Cups Overlay", data: "monthly" }, { type: "heatmap", title: "Station × Month Revenue", data: "heatmap" } ], prompt: "Create a Dive with an Ink & Paper style.\nInspired by: New York Times Graphics Desk.\n\nVisual rules:\n- Background: #fff. Text: #121212. Muted: #666.\n- Chart colors: [\"#326fa8\",\"#e15759\",\"#59a14f\",\"#edc949\",\"#af7aa1\"].\n- Font: Georgia, serif. Titles: bold.\n- Layout: clean, left-aligned, subtle gridlines.\n- Charts: light gridlines, 2px strokes, linear interpolation.\n- Interactive: year toggle, metric toggle, click-to-filter cross-filtering.\n\nPairs well with: annotated line charts, bar charts, horizontal bars, step charts, small multiples, tables, composed dual-axis charts, heatmaps.\n\nReference: NYT Graphics Desk.\n\nFeel: Authoritative journalism — clarity above all." }, corporate: { name: "Corporate Dashboard", category: "Classic", colors: { bg: "#f5f5f5", text: "#333", muted: "#777", chart: ["#2563eb", "#16a34a", "#dc2626", "#f59e0b", "#8b5cf6"] }, font: "system-ui, sans-serif", title: { weight: "600", transform: "uppercase" }, chart: { gridLines: true, strokeWidth: 2, curve: "monotone", barRadius: 4, dotRadius: 0, areaOpacity: 0.15 }, charts: [ { type: "line", title: "Revenue Trend", data: "monthly" }, { type: "pie", title: "Product Mix", data: "coffee" }, { type: "table", title: "Station Performance", data: "station" }, { type: "bar", title: "Station Comparison", data: "station" }, { type: "composedChart", title: "Revenue & Cups Combo", data: "monthly" }, { type: "heatmap", title: "Station × Month Revenue", data: "heatmap" } ], prompt: "Create a Dive with a Corporate Dashboard style.\nInspired by: Classic BI tools (Tableau, Power BI).\n\nVisual rules:\n- Background: #f5f5f5. Text: #333. Muted: #777.\n- Chart colors: [\"#2563eb\",\"#16a34a\",\"#dc2626\",\"#f59e0b\",\"#8b5cf6\"].\n- Font: system-ui, sans-serif. Titles: semibold, UPPERCASE.\n- Layout: card-based, subtle borders, structured grid.\n- Interactive: year & metric toggles, click-to-filter cross-filtering.\n\nPairs well with: line charts, pie charts, KPI cards, data tables, bar charts, combo charts, heatmaps.\n\nFeel: Boardroom-ready — structured and professional." }, ft_salmon: { name: "FT Salmon", category: "Classic", colors: { bg: "#FFF1E5", text: "#33302E", muted: "#807973", chart: ["#0F5499", "#990F3D", "#FF7FAA", "#00A0DD"] }, font: "Georgia, serif", title: { weight: "600", transform: "none" }, chart: { gridLines: true, strokeWidth: 2, curve: "monotone", barRadius: 0, dotRadius: 0, areaOpacity: 0.3 }, charts: [ { type: "area", title: "Monthly Revenue", data: "monthly" }, { type: "bar", title: "Station Revenue", data: "station" }, { type: "horizontalBar", title: "Top Products", data: "coffee" }, { type: "donut", title: "Product Share", data: "coffee" }, { type: "composedChart", title: "Revenue & Cups Trend", data: "monthly" }, { type: "heatmap", title: "Station × Month Revenue", data: "heatmap" } ], prompt: "Create a Dive with an FT Salmon style.\nInspired by: Financial Times Visual Journalism.\n\nVisual rules:\n- Background: #FFF1E5 (signature salmon). Text: #33302E. Muted: #807973.\n- Chart colors: [\"#0F5499\",\"#990F3D\",\"#FF7FAA\",\"#00A0DD\"].\n- Font: Georgia, serif. Titles: semibold.\n- Interactive: year & metric toggles, click-to-filter cross-filtering.\n\nPairs well with: area charts, bar charts, slope charts, horizontal bars, donut charts, composed dual-axis charts, heatmaps.\n\nFeel: Financial authority — the pink paper, digitized." }, soft_infographic: { name: "Soft Infographic", category: "Modern", colors: { bg: "#fafafa", text: "#2d2d2d", muted: "#888", chart: ["#FF6B6B", "#4ECDC4", "#45B7D1", "#FFA07A", "#98D8C8"] }, font: "system-ui, sans-serif", title: { weight: "bold", transform: "none" }, chart: { gridLines: false, strokeWidth: 2.5, curve: "monotone", barRadius: 8, dotRadius: 0, areaOpacity: 0.2 }, charts: [ { type: "roundedBar", title: "Monthly Revenue", data: "monthly" }, { type: "donut", title: "Coffee Mix", data: "coffee" }, { type: "line", title: "Cups Sold Trend", data: "monthly" }, { type: "radar", title: "Station Profile", data: "station" }, { type: "composedChart", title: "Revenue & Cups Overlay", data: "monthly" }, { type: "heatmap", title: "Station × Month Revenue", data: "heatmap" } ], prompt: "Create a Dive with a Soft Infographic style.\nInspired by: David McCandless, Information is Beautiful.\n\nVisual rules:\n- Background: #fafafa. Text: #2d2d2d. Muted: #888.\n- Chart colors: [\"#FF6B6B\",\"#4ECDC4\",\"#45B7D1\",\"#FFA07A\",\"#98D8C8\"].\n- Font: system-ui, sans-serif. Titles: bold.\n- Charts: rounded bars (8px radius), smooth curves.\n- Interactive: year & metric toggles, click-to-filter cross-filtering.\n\nPairs well with: rounded bar charts, donut charts, line charts, radar charts, composed charts, heatmaps.\n\nFeel: Friendly and approachable — data for everyone." }, knowledge: { name: "Knowledge Beautiful", category: "Modern", colors: { bg: "#1a1a2e", text: "#eee", muted: "#8888aa", chart: ["#e94560", "#0f3460", "#533483", "#16213e"] }, font: "system-ui, sans-serif", title: { weight: "600", transform: "none" }, chart: { gridLines: false, strokeWidth: 2, curve: "monotone", barRadius: 2, dotRadius: 0, areaOpacity: 0.5 }, charts: [ { type: "stackedArea", title: "Revenue by Type", data: "coffeeMonthly" }, { type: "radar", title: "Station Profile", data: "station" }, { type: "bar", title: "Station Revenue", data: "station" }, { type: "pie", title: "Type Distribution", data: "coffee" }, { type: "heatmap", title: "Station × Month Revenue", data: "heatmap" }, { type: "composedChart", title: "Revenue & Cups Trend", data: "monthly" } ], prompt: "Create a Dive with a Knowledge Beautiful style.\nInspired by: Data Sketches (Bremer & Wu).\n\nVisual rules:\n- Background: #1a1a2e (deep navy). Text: #eee. Muted: #8888aa.\n- Chart colors: [\"#e94560\",\"#0f3460\",\"#533483\",\"#16213e\"].\n- Charts: stacked areas, 0.5 opacity, smooth curves.\n- Interactive: year & metric toggles, click-to-filter cross-filtering.\n\nPairs well with: stacked area charts, radar charts, heatmaps, composed dual-axis charts.\n\nFeel: Dense and layered — every pixel earns its place." }, film_flowers: { name: "Film Flowers", category: "Artistic", colors: { bg: "#fdf6ec", text: "#3d3027", muted: "#9e8e7e", chart: ["#d4726a", "#e8a87c", "#85cdca", "#c38d9e", "#41b3a3"] }, font: "Georgia, serif", title: { weight: "normal", transform: "none" }, chart: { gridLines: false, strokeWidth: 2, curve: "monotone", barRadius: 12, dotRadius: 5, areaOpacity: 0.25 }, charts: [ { type: "scatter", title: "Cups vs Revenue", data: "monthly" }, { type: "roundedBar", title: "Station Revenue", data: "station" }, { type: "donut", title: "Coffee Mix", data: "coffee" }, { type: "area", title: "Monthly Trend", data: "monthly" }, { type: "heatmap", title: "Station × Month Revenue", data: "heatmap" }, { type: "composedChart", title: "Revenue & Cups Overlay", data: "monthly" } ], prompt: "Create a Dive with a Film Flowers style.\nInspired by: Shirley Wu, Film Flowers (2017).\n\nVisual rules:\n- Background: #fdf6ec (warm cream). Text: #3d3027. Muted: #9e8e7e.\n- Chart colors: [\"#d4726a\",\"#e8a87c\",\"#85cdca\",\"#c38d9e\",\"#41b3a3\"].\n- Charts: scatter/dots preferred, high bar radius (12px), smooth curves.\n- Interactive: year & metric toggles, click-to-filter cross-filtering.\n\nPairs well with: scatter plots, bubble charts, donut charts, heatmaps, composed charts.\n\nFeel: Organic and poetic — data as a living garden." }, dubois: { name: "Du Bois", category: "Artistic", colors: { bg: "#e8d4b8", text: "#1a1a1a", muted: "#654321", chart: ["#dc143c", "#228b22", "#000", "#ffd700", "#654321"] }, font: "Georgia, serif", title: { weight: "bold", transform: "uppercase" }, chart: { gridLines: false, strokeWidth: 2, curve: "linear", barRadius: 0, dotRadius: 0, areaOpacity: 0.3 }, charts: [ { type: "horizontalBar", title: "Station Revenue", data: "station" }, { type: "pie", title: "Coffee Distribution", data: "coffee" }, { type: "area", title: "Revenue Over Time", data: "monthly" }, { type: "directLabeled", title: "Product Revenue", data: "coffee" }, { type: "heatmap", title: "Station × Month Revenue", data: "heatmap" }, { type: "composedChart", title: "Revenue & Cups Trend", data: "monthly" } ], prompt: "Create a Dive with a Du Bois style.\nInspired by: W.E.B. Du Bois, Paris Exposition (1900).\n\nVisual rules:\n- Background: #e8d4b8 (parchment). Text: #1a1a1a. Muted: #654321.\n- Chart colors: [\"#dc143c\",\"#228b22\",\"#000\",\"#ffd700\",\"#654321\"].\n- Charts: horizontal bars, no gridlines, sharp edges (0 radius).\n- Interactive: year & metric toggles, click-to-filter cross-filtering.\n\nPairs well with: horizontal bar charts, pie charts, heatmaps, composed dual-axis charts.\n\nFeel: Bold proclamation — data as civil rights evidence." }, dark_canvas: { name: "Dark Canvas", category: "Modern", colors: { bg: "#0d1117", text: "#c9d1d9", muted: "#6e7681", chart: ["#58a6ff", "#3fb950", "#d29922", "#f85149", "#bc8cff"] }, font: "system-ui, sans-serif", title: { weight: "600", transform: "none" }, chart: { gridLines: false, strokeWidth: 2, curve: "monotone", barRadius: 4, dotRadius: 0, areaOpacity: 0.15 }, charts: [ { type: "area", title: "Monthly Revenue", data: "monthly" }, { type: "bar", title: "Station Revenue", data: "station" }, { type: "radar", title: "Station Profile", data: "station" }, { type: "donut", title: "Type Mix", data: "coffee" }, { type: "heatmap", title: "Station × Month Revenue", data: "heatmap" }, { type: "composedChart", title: "Revenue & Cups Trend", data: "monthly" } ], prompt: "Create a Dive with a Dark Canvas style.\nInspired by: Nadieh Bremer, Visual Cinnamon.\n\nVisual rules:\n- Background: #0d1117 (near-black). Text: #c9d1d9. Muted: #6e7681.\n- Chart colors: [\"#58a6ff\",\"#3fb950\",\"#d29922\",\"#f85149\",\"#bc8cff\"].\n- Charts: translucent areas (0.15 opacity), smooth curves, no gridlines.\n- Interactive: year & metric toggles, click-to-filter cross-filtering.\n\nPairs well with: area charts, bar charts, radar charts, donut charts, heatmaps, composed dual-axis charts.\n\nFeel: Midnight studio — data glowing in the dark." }, playful_sketch: { name: "Playful Sketch", category: "Artistic", colors: { bg: "#fff9f0", text: "#2d2d2d", muted: "#999", chart: ["#e76f51", "#2a9d8f", "#264653", "#e9c46a", "#f4a261"] }, font: "system-ui, sans-serif", title: { weight: "600", transform: "none" }, chart: { gridLines: false, strokeWidth: 2.5, curve: "monotone", barRadius: 6, dotRadius: 5, areaOpacity: 0.2 }, charts: [ { type: "line", title: "Monthly Revenue", data: "monthly" }, { type: "bar", title: "Station Revenue", data: "station" }, { type: "donut", title: "Coffee Mix", data: "coffee" }, { type: "scatter", title: "Cups vs Revenue", data: "monthly" }, { type: "composedChart", title: "Revenue & Cups Overlay", data: "monthly" }, { type: "heatmap", title: "Station × Month Revenue", data: "heatmap" } ], prompt: "Create a Dive with a Playful Sketch style.\nInspired by: Giorgia Lupi & Stefanie Posavec, Dear Data.\n\nVisual rules:\n- Background: #fff9f0. Text: #2d2d2d. Muted: #999.\n- Chart colors: [\"#e76f51\",\"#2a9d8f\",\"#264653\",\"#e9c46a\",\"#f4a261\"].\n- Charts: line with dot markers (r=5), smooth curves, visible data points.\n- Interactive: year & metric toggles, click-to-filter cross-filtering.\n\nPairs well with: dot-marked line charts, scatter plots, donut charts, composed charts, heatmaps.\n\nFeel: Personal and intimate — a handwritten letter in data." }, neon_80s: { name: "Neon 80s", category: "Fun", colors: { bg: "#0a0a1a", text: "#fff", muted: "#ff71ce", chart: ["#01cdfe", "#ff71ce", "#05ffa1", "#b967ff", "#fffb96"] }, font: "system-ui, sans-serif", title: { weight: "bold", transform: "uppercase" }, chart: { gridLines: true, strokeWidth: 3, curve: "monotone", barRadius: 2, dotRadius: 0, areaOpacity: 0.2 }, gridColor: "#1a1a3e", charts: [ { type: "line", title: "Revenue Signal", data: "monthly" }, { type: "bar", title: "Station Power", data: "station" }, { type: "pie", title: "Product Frequencies", data: "coffee" }, { type: "radar", title: "Station Scan", data: "station" }, { type: "composedChart", title: "Revenue & Cups Dual", data: "monthly" }, { type: "heatmap", title: "Station × Month Grid", data: "heatmap" } ], prompt: "Create a Dive with a Neon 80s style.\nInspired by: Synthwave / retrowave aesthetic.\n\nVisual rules:\n- Background: #0a0a1a. Text: #fff. Muted: #ff71ce.\n- Chart colors: [\"#01cdfe\",\"#ff71ce\",\"#05ffa1\",\"#b967ff\",\"#fffb96\"].\n- Charts: thick strokes (3px), glow via CSS filter drop-shadow.\n- Grid lines: #1a1a3e.\n- Interactive: year & metric toggles, click-to-filter cross-filtering.\n\nFeel: Arcade at midnight — data goes synthwave." }, pirate_map: { name: "Pirate Map", category: "Fun", colors: { bg: "#f5e6c8", text: "#2c1810", muted: "#8b6914", chart: ["#8b0000", "#2c1810", "#8b6914", "#006400", "#4a2c0a"] }, font: "Georgia, serif", title: { weight: "bold", transform: "none" }, chart: { gridLines: true, strokeWidth: 2.5, curve: "linear", barRadius: 0, dotRadius: 0, areaOpacity: 0.2 }, charts: [ { type: "bar", title: "Monthly Treasure", data: "monthly" }, { type: "line", title: "Cups Over Time", data: "monthly" }, { type: "horizontalBar", title: "Station Bounty", data: "station" }, { type: "table", title: "Ship's Log", data: "station" }, { type: "heatmap", title: "Station × Month Loot", data: "heatmap" }, { type: "composedChart", title: "Treasure & Cups Overlay", data: "monthly" } ], prompt: "Create a Dive with a Pirate Map style.\nInspired by: Treasure maps and maritime cartography.\n\nVisual rules:\n- Background: #f5e6c8 (aged parchment). Text: #2c1810. Muted: #8b6914.\n- Chart colors: [\"#8b0000\",\"#2c1810\",\"#8b6914\",\"#006400\",\"#4a2c0a\"].\n- Charts: sharp bars (0 radius), thick strokes, linear interpolation.\n- Interactive: year & metric toggles, click-to-filter cross-filtering.\n\nFeel: X marks the data — adventure on the high seas." }, vaporwave: { name: "Vaporwave", category: "Fun", colors: { bg: "#1a0033", text: "#ff6ad5", muted: "#c774e8", chart: ["#ad8cff", "#ff6ad5", "#c774e8", "#94d0ff", "#ff9ac1"] }, font: "system-ui, sans-serif", title: { weight: "bold", transform: "none" }, chart: { gridLines: true, strokeWidth: 2, curve: "monotone", barRadius: 6, dotRadius: 0, areaOpacity: 0.35 }, gridColor: "#2a0052", charts: [ { type: "area", title: "Revenue Wave", data: "monthly" }, { type: "donut", title: "Product Vibe", data: "coffee" }, { type: "bar", title: "Station Revenue", data: "station" }, { type: "radar", title: "Station Aura", data: "station" }, { type: "composedChart", title: "Revenue & Cups Blend", data: "monthly" }, { type: "heatmap", title: "Station × Month Aura", data: "heatmap" } ], prompt: "Create a Dive with a Vaporwave style.\nInspired by: Vaporwave / aesthetic movement.\n\nVisual rules:\n- Background: #1a0033. Text: #ff6ad5. Muted: #c774e8.\n- Chart colors: [\"#ad8cff\",\"#ff6ad5\",\"#c774e8\",\"#94d0ff\",\"#ff9ac1\"].\n- Charts: dreamy area fills (0.35 opacity), rounded bars, smooth curves.\n- Grid lines: #2a0052.\n- Interactive: year & metric toggles, click-to-filter cross-filtering.\n\nFeel: Digital sunset — nostalgia rendered in pastel neon." }, terminal: { name: "Terminal", category: "Fun", colors: { bg: "#0c0c0c", text: "#00ff00", muted: "#00aa00", chart: ["#00ff00", "#00cc00", "#009900"] }, font: "monospace", title: { weight: "normal", transform: "uppercase" }, chart: { gridLines: true, strokeWidth: 1.5, curve: "linear", barRadius: 0, dotRadius: 0, areaOpacity: 0.15 }, gridColor: "#003300", charts: [ { type: "steppedLine", title: "revenue.trend()", data: "monthly" }, { type: "bar", title: "station.compare()", data: "station" }, { type: "table", title: "station.list()", data: "station" }, { type: "directLabeled", title: "product.rank()", data: "coffee" }, { type: "composedChart", title: "dual.axis(rev,cups)", data: "monthly" }, { type: "heatmap", title: "heatmap.render()", data: "heatmap" } ], prompt: "Create a Dive with a Terminal style.\nInspired by: Unix terminals and monospace interfaces.\n\nVisual rules:\n- Background: #0c0c0c. Text: #00ff00. Muted: #00aa00.\n- Chart colors: monochrome green [\"#00ff00\",\"#00cc00\",\"#009900\"].\n- Font: monospace. Titles: UPPERCASE.\n- Charts: stepped lines, sharp bars, thin strokes.\n- Grid lines: #003300.\n- Interactive: year & metric toggles, click-to-filter cross-filtering.\n\nFeel: > data.query --style=hacker — pure terminal vibes." }, candy_pop: { name: "Candy Pop", category: "Fun", colors: { bg: "#fff0f5", text: "#333", muted: "#cc6699", chart: ["#ff69b4", "#00ced1", "#ffa500", "#9370db", "#32cd32"] }, font: "system-ui, sans-serif", title: { weight: "bold", transform: "none" }, chart: { gridLines: false, strokeWidth: 3, curve: "monotone", barRadius: 12, dotRadius: 6, areaOpacity: 0.2 }, charts: [ { type: "roundedBar", title: "Monthly Revenue", data: "monthly" }, { type: "donut", title: "Coffee Mix", data: "coffee" }, { type: "line", title: "Cups Trend", data: "monthly" }, { type: "radar", title: "Station Profile", data: "station" }, { type: "heatmap", title: "Station × Month Revenue", data: "heatmap" }, { type: "composedChart", title: "Revenue & Cups Candy", data: "monthly" } ], prompt: "Create a Dive with a Candy Pop style.\nInspired by: Bubblegum maximalism.\n\nVisual rules:\n- Background: #fff0f5. Text: #333. Muted: #cc6699.\n- Chart colors: [\"#ff69b4\",\"#00ced1\",\"#ffa500\",\"#9370db\",\"#32cd32\"].\n- Charts: very rounded bars (12px radius), thick strokes (3px), big dots (r=6).\n- Interactive: year & metric toggles, click-to-filter cross-filtering.\n\nFeel: Sugar rush — joyful, bold, unapologetically fun." } }; const THEME_IDS = Object.keys(THEMES); function fmtNum(v, prefix, suffix) { const n = N(v); const p = prefix || ""; const s = suffix || ""; if (n >= 1e6) return p + (n / 1e6).toFixed(2) + "M" + s; if (n >= 1e3) return p + (n / 1e3).toFixed(1) + "K" + s; return p + n.toLocaleString() + s; } function fmtShort(v) { const n = N(v); if (n >= 1e6) return (n / 1e6).toFixed(1) + "M"; if (n >= 1e3) return (n / 1e3).toFixed(0) + "K"; return n.toLocaleString(); } function shortName(s) { if (!s) return ""; return s.split(" ")[0]; } function hexToRgb(hex) { const h = hex.replace("#", ""); return { r: parseInt(h.substring(0, 2), 16), g: parseInt(h.substring(2, 4), 16), b: parseInt(h.substring(4, 6), 16) }; } function interpolateColor(c1, c2, f) { const a = hexToRgb(c1), b = hexToRgb(c2); return `rgb(${Math.round(a.r+(b.r-a.r)*f)},${Math.round(a.g+(b.g-a.g)*f)},${Math.round(a.b+(b.b-a.b)*f)})`; } function SkeletonBlock({ height, theme }) { return

; } function SkeletonKPI({ theme }) { return

{[0,1,2].map(i =>

)}

; } function renderChart(chartConfig, theme, themeId, allData, interactivity) { const { type, title, data: dataKey } = chartConfig; const { monthlyData, stationData, coffeeData, stationMonthly, coffeeMonthly, heatmapData } = allData; const { metric, station, coffeeType, setStation, setCoffeeType } = interactivity; const t = theme; const gc = theme.gridColor || (t.colors.muted + "22"); const ttStyle = { background: t.colors.bg, border: "1px solid " + t.colors.muted, color: t.colors.text, fontSize: 11 }; const axisStyle = { fill: t.colors.muted, fontSize: 9 }; const curveType = t.chart.curve === "monotone" ? "monotoneX" : "linear"; const colors = t.colors.chart; const dataMap = { monthly: monthlyData, station: stationData, coffee: coffeeData, stationMonthly, coffeeMonthly, heatmap: heatmapData }; const chartData = dataMap[dataKey] || []; const isCups = metric === "cups_sold" || title.toLowerCase().includes("cups"); const monthlyYKey = isCups ? "cups_sold" : "revenue"; const neonFilter = themeId === "neon_80s" ? : null; const neonStyle = themeId === "neon_80s" ? { filter: "url(#neonGlow)" } : {}; const handleBarClick = (data) => { if (!data || !data.activePayload) return; const p = data.activePayload[0]?.payload; if (p?.station) setStation(station === p.station ? "All" : p.station); }; const handlePieClick = (entry) => { if (entry?.coffee_type) setCoffeeType(coffeeType === entry.coffee_type ? "All" : entry.coffee_type); }; const getBarOpacity = (e) => station === "All" ? 1 : e.station === station ? 1 : 0.3; const getPieOpacity = (e) => coffeeType === "All" ? 1 : e.coffee_type === coffeeType ? 1 : 0.3; switch (type) { case "line": return {neonFilter}{t.chart.gridLines && }fmtShort(v)} width={36} />[fmtNum(v,isCups?"":"$"),isCups?"Cups":"Revenue"]} />; case "steppedLine": return {t.chart.gridLines && }fmtShort(v)} width={36} />[fmtNum(v,"$"),"Revenue"]} />; case "area": return {t.chart.gridLines && }fmtShort(v)} width={36} />[fmtNum(v,"$"),"Revenue"]} />; case "bar": { let xKey,yKey,data; if(dataKey==="monthly"){xKey="month";yKey=monthlyYKey;data=chartData}else if(dataKey==="station"){xKey="station";yKey="revenue";data=chartData}else if(dataKey==="coffee"){xKey="coffee_type";yKey="revenue";data=chartData}else{xKey="month";yKey="revenue";data=chartData} const isS=dataKey==="station"; return {neonFilter}{t.chart.gridLines && }fmtShort(v)} width={36} />[fmtNum(v,"$"),"Revenue"]} />{isS?data.map((e,i)=>):data.map((_,i)=>)}; } case "roundedBar": { let xKey,yKey,data; if(dataKey==="monthly"){xKey="month";yKey=monthlyYKey;data=chartData}else if(dataKey==="station"){xKey="station";yKey="revenue";data=chartData}else{xKey="coffee_type";yKey="revenue";data=chartData} const r=t.chart.barRadius||8; const isS=dataKey==="station"; return {t.chart.gridLines && }fmtShort(v)} width={36} />[fmtNum(v,"$"),isCups?"Cups":"Revenue"]} />{isS?data.map((e,i)=>):data.map((_,i)=>)}; } case "horizontalBar": { let nk,vk; if(dataKey==="station"){nk="station";vk="revenue"}else if(dataKey==="coffee"){nk="coffee_type";vk="revenue"}else{nk="month";vk="revenue"} const sorted=[...chartData].sort((a,b)=>N(b[vk])-N(a[vk])); return {t.chart.gridLines && }fmtShort(v)} />[fmtNum(v,"$"),"Revenue"]} />; } case "stackedArea": { const keys=dataKey==="coffeeMonthly"?COFFEE_KEYS:STATION_KEYS; return {t.chart.gridLines && }fmtShort(v)} width={36} />{keys.map((k,i)=>)}; } case "scatter": return {t.chart.gridLines && }fmtShort(v)} />fmtShort(v)} width={36} />[name==="Revenue"?fmtNum(v,"$"):fmtNum(v),name]} cursor={{strokeDasharray:"3 3"}} />; case "smallMultiples": { const keys=dataKey==="stationMonthly"?STATION_KEYS:COFFEE_KEYS; return

{keys.map((k,i)=>

{k}

)}

; } case "pie": return (percent*100).toFixed(0)+"%"} labelLine={false} fontSize={9} onClick={handlePieClick} cursor="pointer">{chartData.map((e,i)=>)}[fmtNum(v,"$"),"Revenue"]} />; case "donut": return (percent*100).toFixed(0)+"%"} labelLine={false} fontSize={9} onClick={handlePieClick} cursor="pointer">{chartData.map((e,i)=>)}[fmtNum(v,"$"),"Revenue"]} />; case "radar": { const mx=Math.max(...chartData.map(d=>N(d.revenue)),1); const rd=chartData.map(d=>({subject:dataKey==="station"?(STATION_KEY_MAP[d.station]||d.station):d.coffee_type,value:(N(d.revenue)/mx)*100})); return ; } case "table": return

{chartData.map((row,i)=>)}

Station	Revenue	Cups	Rating
{row.station}	{fmtNum(N(row.revenue),"$")}	{fmtNum(N(row.cups_sold))}	{N(row.avg_rating).toFixed(1)}

; case "directLabeled": { const lk=dataKey==="station"?"station":"coffee_type"; const mx=Math.max(...chartData.map(d=>N(d.revenue)),1); return

{[...chartData].sort((a,b)=>N(b.revenue)-N(a.revenue)).map((d,i)=>{const pct=(N(d.revenue)/mx)*100; return

{shortName(d[lk])}

{fmtShort(N(d.revenue))}

})}

; } case "composedChart": return {neonFilter}{t.chart.gridLines && }"$"+fmtShort(v)} width={40} />fmtShort(v)} width={36} />[name==="revenue"?fmtNum(v,"$"):fmtNum(v),name==="revenue"?"Revenue":"Cups"]} />; case "heatmap": { if(!chartData||chartData.length===0) return

No data

; const{rows,months,values,min,max}=chartData; const mc=t.colors.muted.length===4?t.colors.muted[1]+t.colors.muted[1]+t.colors.muted[2]+t.colors.muted[2]+t.colors.muted[3]+t.colors.muted[3]:t.colors.muted.replace("#",""); const pc=colors[0].length===4?colors[0][1]+colors[0][1]+colors[0][2]+colors[0][2]+colors[0][3]+colors[0][3]:colors[0].replace("#",""); return

{months.map(m=>

{MONTHS_SHORT[parseInt(m.split("-")[1],10)-1]}

)}

{rows.map(stn=>

{shortName(stn)}

{months.map(m=>{const val=values[stn+"|"+m]||0;const range=max-min||1;const factor=(val-min)/range;const bg=interpolateColor("#"+mc,"#"+pc,factor);return

})}

)}

; } default: return

Unknown: {type}

; } } export default function GalacticCoffeeV3() { const [themeIdx, setThemeIdx] = useState(0); const [station, setStation] = useState("All"); const [coffeeType, setCoffeeType] = useState("All"); const [year, setYear] = useState("All"); const [metric, setMetric] = useState("revenue"); const [copied, setCopied] = useState(false); const themeId = THEME_IDS[themeIdx]; const theme = THEMES[themeId]; const buildWhere = (...exclude) => { const f = []; if (station !== "All" && !exclude.includes("station")) f.push(`station = '${station}'`); if (coffeeType !== "All" && !exclude.includes("coffeeType")) f.push(`coffee_type = '${coffeeType}'`); if (year !== "All" && !exclude.includes("year")) f.push(`EXTRACT(YEAR FROM month) = ${year}`); return f.length > 0 ? ` WHERE ${f.join(" AND ")}` : ""; }; const whereClause = buildWhere(); const whereNoStation = buildWhere("station"); const whereNoCoffee = buildWhere("coffeeType"); const monthlyQ = useSQLQuery(`SELECT strftime(month, '%Y-%m') AS month, SUM(revenue) AS revenue, SUM(cups_sold) AS cups_sold, ROUND(AVG(avg_rating),1) AS avg_rating FROM ${TABLE}${whereClause} GROUP BY 1 ORDER BY 1`); const summaryQ = useSQLQuery(`SELECT SUM(revenue) AS total_revenue, SUM(cups_sold) AS total_cups, ROUND(AVG(avg_rating),1) AS avg_rating FROM ${TABLE}${whereClause}`); const stationQ = useSQLQuery(`SELECT station, SUM(revenue) AS revenue, SUM(cups_sold) AS cups_sold, ROUND(AVG(avg_rating),1) AS avg_rating FROM ${TABLE}${whereNoStation} GROUP BY 1 ORDER BY 2 DESC`); const coffeeQ = useSQLQuery(`SELECT coffee_type, SUM(revenue) AS revenue, SUM(cups_sold) AS cups_sold FROM ${TABLE}${whereNoCoffee} GROUP BY 1 ORDER BY 2 DESC`); const stationMonthlyQ = useSQLQuery(`SELECT strftime(month, '%Y-%m') AS month, ${STATIONS.map((s, i) => `SUM(CASE WHEN station='${s}' THEN revenue ELSE 0 END) AS "${STATION_KEYS[i]}"`).join(", ")} FROM ${TABLE}${whereClause} GROUP BY 1 ORDER BY 1`); const coffeeMonthlyQ = useSQLQuery(`SELECT strftime(month, '%Y-%m') AS month, SUM(CASE WHEN coffee_type='Cosmic Cold Brew' THEN revenue ELSE 0 END) AS "ColdBrew", SUM(CASE WHEN coffee_type='Dark Matter Mocha' THEN revenue ELSE 0 END) AS "Mocha", SUM(CASE WHEN coffee_type='Pulsar Pour-Over' THEN revenue ELSE 0 END) AS "PourOver", SUM(CASE WHEN coffee_type='Quantum Latte' THEN revenue ELSE 0 END) AS "Latte", SUM(CASE WHEN coffee_type='Supernova Espresso' THEN revenue ELSE 0 END) AS "Espresso", SUM(CASE WHEN coffee_type='Nebula Nitro' THEN revenue ELSE 0 END) AS "Nitro", SUM(CASE WHEN coffee_type='Gravity Drip' THEN revenue ELSE 0 END) AS "Gravity", SUM(CASE WHEN coffee_type='Solar Flare Chai' THEN revenue ELSE 0 END) AS "Chai" FROM ${TABLE}${whereClause} GROUP BY 1 ORDER BY 1`); const heatmapQ = useSQLQuery(`SELECT station, strftime(month, '%Y-%m') AS month, SUM(revenue) AS revenue FROM ${TABLE}${whereNoStation} GROUP BY 1, 2 ORDER BY 2, 1`); const monthlyData = useMemo(() => (Array.isArray(monthlyQ.data) ? monthlyQ.data : []).map(r => ({ month: r.month, revenue: N(r.revenue), cups_sold: N(r.cups_sold), avg_rating: N(r.avg_rating) })), [monthlyQ.data]); const summaryData = useMemo(() => { const rows = Array.isArray(summaryQ.data) ? summaryQ.data : []; if (rows.length === 0) return { revenue: 0, cups_sold: 0, avg_rating: 0 }; return { revenue: N(rows[0].total_revenue), cups_sold: N(rows[0].total_cups), avg_rating: N(rows[0].avg_rating) }; }, [summaryQ.data]); const stationData = useMemo(() => (Array.isArray(stationQ.data) ? stationQ.data : []).map(r => ({ station: r.station, revenue: N(r.revenue), cups_sold: N(r.cups_sold), avg_rating: N(r.avg_rating) })), [stationQ.data]); const coffeeData = useMemo(() => (Array.isArray(coffeeQ.data) ? coffeeQ.data : []).map(r => ({ coffee_type: r.coffee_type, revenue: N(r.revenue), cups_sold: N(r.cups_sold) })), [coffeeQ.data]); const stationMonthly = useMemo(() => (Array.isArray(stationMonthlyQ.data) ? stationMonthlyQ.data : []).map(r => { const row = { month: r.month }; STATION_KEYS.forEach(k => { row[k] = N(r[k]); }); return row; }), [stationMonthlyQ.data]); const coffeeMonthly = useMemo(() => (Array.isArray(coffeeMonthlyQ.data) ? coffeeMonthlyQ.data : []).map(r => { const row = { month: r.month }; COFFEE_KEYS.forEach(k => { row[k] = N(r[k]); }); return row; }), [coffeeMonthlyQ.data]); const heatmapData = useMemo(() => { const raw = Array.isArray(heatmapQ.data) ? heatmapQ.data : []; if (raw.length === 0) return null; const ms = new Set(), ss = new Set(), vals = {}; let mn = Infinity, mx = -Infinity; raw.forEach(r => { const v = N(r.revenue); ms.add(r.month); ss.add(r.station); vals[r.station+"|"+r.month] = v; if (v < mn) mn = v; if (v > mx) mx = v; }); return { rows: [...ss].sort(), months: [...ms].sort().slice(-12), values: vals, min: mn, max: mx }; }, [heatmapQ.data]); const allData = { monthlyData, stationData, coffeeData, stationMonthly, coffeeMonthly, heatmapData }; const interactivity = { metric, station, coffeeType, setStation, setCoffeeType }; const loadingMap = { monthly: monthlyQ.isLoading, station: stationQ.isLoading, coffee: coffeeQ.isLoading, stationMonthly: stationMonthlyQ.isLoading, coffeeMonthly: coffeeMonthlyQ.isLoading, heatmap: heatmapQ.isLoading }; const isChartLoading = (c) => loadingMap[c.data] || false; const prevTheme = () => setThemeIdx(i => (i - 1 + THEME_IDS.length) % THEME_IDS.length); const nextTheme = () => setThemeIdx(i => (i + 1) % THEME_IDS.length); const copyPrompt = () => { navigator.clipboard.writeText(theme.prompt).then(() => { setCopied(true); setTimeout(() => setCopied(false), 2000); }); }; const categoryColors = { Classic: "#6366f1", Modern: "#0ea5e9", Artistic: "#f59e0b", Fun: "#ec4899" }; const heroMetric = metric === "cups_sold" ? summaryData.cups_sold : summaryData.revenue; const heroLabel = metric === "cups_sold" ? "Cups Sold" : "Revenue"; const heroPrefix = metric === "cups_sold" ? "" : "$"; const pillStyle = (active) => ({ background: active ? theme.colors.chart[0]+"22" : "transparent", color: active ? theme.colors.chart[0] : theme.colors.muted, border: "1px solid "+(active ? theme.colors.chart[0]+"66" : theme.colors.muted+"44"), borderRadius: 12, padding: "3px 10px", fontSize: 10, fontWeight: active ? 600 : 400, cursor: "pointer", fontFamily: theme.font, transition: "all 0.15s" }); const hasActiveFilters = station !== "All" || coffeeType !== "All"; return (

Galactic Coffee Co. — Theme Gallery

{theme.name}

{theme.category} {themeIdx+1}/{THEME_IDS.length}

{theme.prompt.split("\n").find(l => l.includes("Inspired by"))?.replace("Inspired by: ", "Inspired by: ") || ""}

{summaryQ.isLoading ? : (

{fmtNum(heroMetric, heroPrefix)}

{heroLabel}

{fmtNum(metric==="cups_sold"?summaryData.revenue:summaryData.cups_sold, metric==="cups_sold"?"$":"")}

{metric==="cups_sold"?"Revenue":"Cups Sold"}

{summaryData.avg_rating.toFixed(1)}

Avg Rating

)}

{["2024","2025","All"].map(y => )}

{hasActiveFilters &&

{station !== "All" && setStation("All")} style={{ display: "inline-flex", alignItems: "center", gap: 4, background: theme.colors.chart[0]+"18", color: theme.colors.chart[0], border: "1px solid "+theme.colors.chart[0]+"44", borderRadius: 12, padding: "2px 10px", fontSize: 10, cursor: "pointer", fontFamily: theme.font }}>{shortName(station)} } {coffeeType !== "All" && setCoffeeType("All")} style={{ display: "inline-flex", alignItems: "center", gap: 4, background: (theme.colors.chart[1]||theme.colors.chart[0])+"18", color: theme.colors.chart[1]||theme.colors.chart[0], border: "1px solid "+(theme.colors.chart[1]||theme.colors.chart[0])+"44", borderRadius: 12, padding: "2px 10px", fontSize: 10, cursor: "pointer", fontFamily: theme.font }}>{coffeeType} }

}

{theme.charts.map((cc, idx) =>

{cc.title}

{isChartLoading(cc) ? : renderChart(cc, theme, themeId, allData, interactivity)}

)}

Prompt

{theme.prompt}

); }

Galactic Coffee Theme Gallery

Comments