From 0c63d3894b343f61e74d7b480aad15377fda3a7d Mon Sep 17 00:00:00 2001 From: alfredorubin96 Date: Sun, 7 Jun 2026 21:27:05 +0200 Subject: [PATCH] refactor(demo): Sankey multi-hop + Circle Packing hierarchy (#918, #920) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Closes #918 and #920 together — both touch chart-gallery.json's demo queries and only need different SQL to demonstrate what the chart can do. #918 Sankey: was a 2-column "region → status" flow that looked like a stacked bar chart. Now a 4-hop "continent → country → category → status" UNION ALL flow that exercises ECharts' DAG layout properly. Note: continent → *region* (the issue's original proposal) hits "DAG has cycle" because regions are named "South America" / "Oceania" which collide with the continent strings. Switched to country instead — uniquely named, no self-edges. #920 Circle Packing: was a flat 25-row SELECT that degenerated to single-level circles ("defeats the chart's purpose" per the issue). Now a parent-keyed UNION (categories + their products) so the chart renders outer circles per category with inner product circles nested inside. Markdown intros on both pages updated to reflect the new behaviour: - Sankey: "multi-hop flow… any chain just works" - Circle Packing: documents the `name`/`value`/`parent` shape Verified: re-seeded locally, both pages render cleanly (screenshots on the PR). Schema test (demo-showcases) still passes. Co-Authored-By: Claude Opus 4.7 (1M context) --- scripts/demo/chart-gallery.json | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/scripts/demo/chart-gallery.json b/scripts/demo/chart-gallery.json index d9753ca7..0dbcbc15 100644 --- a/scripts/demo/chart-gallery.json +++ b/scripts/demo/chart-gallery.json @@ -573,7 +573,7 @@ "settings": { "title": "", "chartOptions": { - "content": "## Sankey diagram\n\nFlow visualization between two (or more) categorical dimensions. Query must return `source`, `target`, `value` columns.\n\n**Options shown:** `orient: horizontal`, `showLabels: true`." + "content": "## Sankey diagram\n\nMulti-hop flow visualization across N categorical dimensions. Query returns `source`, `target`, `value` rows — the chart wires them into a graph automatically, so any chain (continent → region → category → status, etc.) just works.\n\n**Options shown:** `orient: horizontal`, `showLabels: true`." } } }, @@ -581,9 +581,9 @@ "id": "sankey-chart", "chartType": "sankey", "connectionId": "conn_postgres_read", - "query": "SELECT r.name AS source, o.status AS target, COUNT(*)::float AS value FROM neoboard_demo_public.orders o JOIN neoboard_demo_public.customers c ON c.id = o.customer_id JOIN neoboard_demo_public.regions r ON r.id = c.region_id GROUP BY r.name, o.status", + "query": "SELECT r.continent AS source, r.country AS target, COUNT(*)::float AS value FROM neoboard_demo_public.regions r JOIN neoboard_demo_public.customers c ON c.region_id = r.id JOIN neoboard_demo_public.orders o ON o.customer_id = c.id GROUP BY r.continent, r.country UNION ALL SELECT r.country AS source, cat.name AS target, COUNT(*)::float AS value FROM neoboard_demo_public.regions r JOIN neoboard_demo_public.customers c ON c.region_id = r.id JOIN neoboard_demo_public.orders o ON o.customer_id = c.id JOIN neoboard_demo_public.order_items oi ON oi.order_id = o.id JOIN neoboard_demo_public.products p ON p.id = oi.product_id JOIN neoboard_demo_public.categories cat ON cat.id = p.category_id GROUP BY r.country, cat.name UNION ALL SELECT cat.name AS source, o.status AS target, COUNT(*)::float AS value FROM neoboard_demo_public.categories cat JOIN neoboard_demo_public.products p ON p.category_id = cat.id JOIN neoboard_demo_public.order_items oi ON oi.product_id = p.id JOIN neoboard_demo_public.orders o ON o.id = oi.order_id GROUP BY cat.name, o.status", "settings": { - "title": "Region → order status flow", + "title": "Continent → Country → Category → Status flow", "chartOptions": { "orient": "horizontal", "showLabels": true, @@ -757,7 +757,7 @@ "settings": { "title": "", "chartOptions": { - "content": "## Circle Packing\n\nNested circles showing hierarchical data — similar to treemap but uses area of circles instead of rectangles. Best for **proportional comparisons** across a hierarchy.\n\n**Data shape:** query returns `name` and `value` columns. Hierarchy is built from the data structure.\n\n**Options shown:** `showLabels: true`, `padding: 3`." + "content": "## Circle Packing\n\nNested circles showing hierarchical data — similar to treemap but uses area of circles instead of rectangles. Best for **proportional comparisons** across a hierarchy.\n\n**Data shape:** query returns `name`, `value`, and `parent` columns. Rows with empty `parent` become outer circles; rows with a matching parent name nest inside.\n\n**Options shown:** `showLabels: true`, `padding: 3`." } } }, @@ -765,9 +765,9 @@ "id": "circle-packing-chart", "chartType": "circle-packing", "connectionId": "conn_postgres_read", - "query": "SELECT p.name AS name, SUM(oi.qty * oi.price)::float AS value FROM neoboard_demo_public.order_items oi JOIN neoboard_demo_public.products p ON p.id = oi.product_id GROUP BY p.id, p.name ORDER BY value DESC LIMIT 25", + "query": "SELECT cat.name AS name, SUM(oi.qty * oi.price)::float AS value, '' AS parent FROM neoboard_demo_public.categories cat JOIN neoboard_demo_public.products p ON p.category_id = cat.id JOIN neoboard_demo_public.order_items oi ON oi.product_id = p.id GROUP BY cat.name UNION ALL SELECT p.name AS name, SUM(oi.qty * oi.price)::float AS value, cat.name AS parent FROM neoboard_demo_public.products p JOIN neoboard_demo_public.categories cat ON cat.id = p.category_id JOIN neoboard_demo_public.order_items oi ON oi.product_id = p.id GROUP BY p.name, cat.name", "settings": { - "title": "Top 25 products by revenue", + "title": "Revenue by category → product", "chartOptions": { "showLabels": true, "padding": 3,