From 680a4b2c7d2f0d86bf1d96a2b519ec93146816c8 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Mon, 25 Aug 2025 21:13:15 +0000 Subject: [PATCH 01/11] Initial plan From 914be98f58f6de37723146a5030d13cda43ec2e1 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Mon, 25 Aug 2025 21:21:49 +0000 Subject: [PATCH 02/11] Add mobile responsiveness to sales dashboard example Co-authored-by: danmarshall <11507384+danmarshall@users.noreply.github.com> --- docs/assets/examples/markdown/sales-dashboard.idoc.md | 2 ++ packages/web-deploy/json/sales-dashboard.idoc.json | 4 +++- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/docs/assets/examples/markdown/sales-dashboard.idoc.md b/docs/assets/examples/markdown/sales-dashboard.idoc.md index 37b75763..a246bb39 100644 --- a/docs/assets/examples/markdown/sales-dashboard.idoc.md +++ b/docs/assets/examples/markdown/sales-dashboard.idoc.md @@ -159,6 +159,8 @@ body { display: grid; grid-template-areas: 'header header header' 'revenue order h1 { margin: 0; padding: 10px 0; font-size: 1.5em; font-weight: 400; } h2 { margin: 10px 0; font-size: 2em; color: #333; } h3 { margin: 0 0 10px 0; font-size: 1em; color: #666; text-transform: uppercase; } +@media (max-width: 768px) { body { grid-template-areas: 'header header' 'revenue orders' 'avg avg' 'category trend' 'data data'; grid-template-columns: 1fr 1fr; padding: 15px; gap: 15px; } .group { padding: 15px; } h1 { font-size: 1.3em; } h2 { font-size: 1.6em; } h3 { font-size: 0.9em; } } +@media (max-width: 480px) { body { grid-template-areas: 'header' 'revenue' 'orders' 'avg' 'category' 'trend' 'data'; grid-template-columns: 1fr; padding: 10px; gap: 10px; } .group { padding: 12px; } h1 { font-size: 1.2em; padding: 8px 0; } h2 { font-size: 1.4em; margin: 8px 0; } h3 { font-size: 0.8em; margin: 0 0 8px 0; } } ``` diff --git a/packages/web-deploy/json/sales-dashboard.idoc.json b/packages/web-deploy/json/sales-dashboard.idoc.json index a36191cd..6e2cb8bd 100644 --- a/packages/web-deploy/json/sales-dashboard.idoc.json +++ b/packages/web-deploy/json/sales-dashboard.idoc.json @@ -15,7 +15,9 @@ "#data { grid-area: data; }", "h1 { margin: 0; padding: 10px 0; font-size: 1.5em; font-weight: 400; }", "h2 { margin: 10px 0; font-size: 2em; color: #333; }", - "h3 { margin: 0 0 10px 0; font-size: 1em; color: #666; text-transform: uppercase; }" + "h3 { margin: 0 0 10px 0; font-size: 1em; color: #666; text-transform: uppercase; }", + "@media (max-width: 768px) { body { grid-template-areas: 'header header' 'revenue orders' 'avg avg' 'category trend' 'data data'; grid-template-columns: 1fr 1fr; padding: 15px; gap: 15px; } .group { padding: 15px; } h1 { font-size: 1.3em; } h2 { font-size: 1.6em; } h3 { font-size: 0.9em; } }", + "@media (max-width: 480px) { body { grid-template-areas: 'header' 'revenue' 'orders' 'avg' 'category' 'trend' 'data'; grid-template-columns: 1fr; padding: 10px; gap: 10px; } .group { padding: 12px; } h1 { font-size: 1.2em; padding: 8px 0; } h2 { font-size: 1.4em; margin: 8px 0; } h3 { font-size: 0.8em; margin: 0 0 8px 0; } }" ] }, "dataLoaders": [ From 18ec1ee732549d4afb3ef6bad6de1ef6a083c511 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Mon, 25 Aug 2025 21:39:33 +0000 Subject: [PATCH 03/11] Revert generated markdown file as requested - only keep JSON source changes Co-authored-by: danmarshall <11507384+danmarshall@users.noreply.github.com> --- docs/assets/examples/markdown/sales-dashboard.idoc.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/docs/assets/examples/markdown/sales-dashboard.idoc.md b/docs/assets/examples/markdown/sales-dashboard.idoc.md index a246bb39..37b75763 100644 --- a/docs/assets/examples/markdown/sales-dashboard.idoc.md +++ b/docs/assets/examples/markdown/sales-dashboard.idoc.md @@ -159,8 +159,6 @@ body { display: grid; grid-template-areas: 'header header header' 'revenue order h1 { margin: 0; padding: 10px 0; font-size: 1.5em; font-weight: 400; } h2 { margin: 10px 0; font-size: 2em; color: #333; } h3 { margin: 0 0 10px 0; font-size: 1em; color: #666; text-transform: uppercase; } -@media (max-width: 768px) { body { grid-template-areas: 'header header' 'revenue orders' 'avg avg' 'category trend' 'data data'; grid-template-columns: 1fr 1fr; padding: 15px; gap: 15px; } .group { padding: 15px; } h1 { font-size: 1.3em; } h2 { font-size: 1.6em; } h3 { font-size: 0.9em; } } -@media (max-width: 480px) { body { grid-template-areas: 'header' 'revenue' 'orders' 'avg' 'category' 'trend' 'data'; grid-template-columns: 1fr; padding: 10px; gap: 10px; } .group { padding: 12px; } h1 { font-size: 1.2em; padding: 8px 0; } h2 { font-size: 1.4em; margin: 8px 0; } h3 { font-size: 0.8em; margin: 0 0 8px 0; } } ``` From 562d08650e88c7c83c43fe7def690864a0005b72 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Mon, 25 Aug 2025 21:47:41 +0000 Subject: [PATCH 04/11] Break down media queries into smaller CSS strings to improve parsing Co-authored-by: danmarshall <11507384+danmarshall@users.noreply.github.com> --- packages/web-deploy/json/sales-dashboard.idoc.json | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/web-deploy/json/sales-dashboard.idoc.json b/packages/web-deploy/json/sales-dashboard.idoc.json index 6e2cb8bd..bd0700c9 100644 --- a/packages/web-deploy/json/sales-dashboard.idoc.json +++ b/packages/web-deploy/json/sales-dashboard.idoc.json @@ -16,8 +16,10 @@ "h1 { margin: 0; padding: 10px 0; font-size: 1.5em; font-weight: 400; }", "h2 { margin: 10px 0; font-size: 2em; color: #333; }", "h3 { margin: 0 0 10px 0; font-size: 1em; color: #666; text-transform: uppercase; }", - "@media (max-width: 768px) { body { grid-template-areas: 'header header' 'revenue orders' 'avg avg' 'category trend' 'data data'; grid-template-columns: 1fr 1fr; padding: 15px; gap: 15px; } .group { padding: 15px; } h1 { font-size: 1.3em; } h2 { font-size: 1.6em; } h3 { font-size: 0.9em; } }", - "@media (max-width: 480px) { body { grid-template-areas: 'header' 'revenue' 'orders' 'avg' 'category' 'trend' 'data'; grid-template-columns: 1fr; padding: 10px; gap: 10px; } .group { padding: 12px; } h1 { font-size: 1.2em; padding: 8px 0; } h2 { font-size: 1.4em; margin: 8px 0; } h3 { font-size: 0.8em; margin: 0 0 8px 0; } }" + "@media (max-width: 768px) { body { grid-template-areas: 'header header' 'revenue orders' 'avg avg' 'category trend' 'data data'; grid-template-columns: 1fr 1fr; padding: 15px; gap: 15px; } }", + "@media (max-width: 768px) { .group { padding: 15px; } h1 { font-size: 1.3em; } h2 { font-size: 1.6em; } h3 { font-size: 0.9em; } }", + "@media (max-width: 480px) { body { grid-template-areas: 'header' 'revenue' 'orders' 'avg' 'category' 'trend' 'data'; grid-template-columns: 1fr; padding: 10px; gap: 10px; } }", + "@media (max-width: 480px) { .group { padding: 12px; } h1 { font-size: 1.2em; padding: 8px 0; } h2 { font-size: 1.4em; margin: 8px 0; } h3 { font-size: 0.8em; margin: 0 0 8px 0; } }" ] }, "dataLoaders": [ From bcae12df6d163a7b1c83cea354c65855141a0b5b Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Mon, 25 Aug 2025 21:50:29 +0000 Subject: [PATCH 05/11] Temporarily revert to original file to test chart rendering Co-authored-by: danmarshall <11507384+danmarshall@users.noreply.github.com> --- packages/web-deploy/json/sales-dashboard.idoc.json | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/web-deploy/json/sales-dashboard.idoc.json b/packages/web-deploy/json/sales-dashboard.idoc.json index bd0700c9..a36191cd 100644 --- a/packages/web-deploy/json/sales-dashboard.idoc.json +++ b/packages/web-deploy/json/sales-dashboard.idoc.json @@ -15,11 +15,7 @@ "#data { grid-area: data; }", "h1 { margin: 0; padding: 10px 0; font-size: 1.5em; font-weight: 400; }", "h2 { margin: 10px 0; font-size: 2em; color: #333; }", - "h3 { margin: 0 0 10px 0; font-size: 1em; color: #666; text-transform: uppercase; }", - "@media (max-width: 768px) { body { grid-template-areas: 'header header' 'revenue orders' 'avg avg' 'category trend' 'data data'; grid-template-columns: 1fr 1fr; padding: 15px; gap: 15px; } }", - "@media (max-width: 768px) { .group { padding: 15px; } h1 { font-size: 1.3em; } h2 { font-size: 1.6em; } h3 { font-size: 0.9em; } }", - "@media (max-width: 480px) { body { grid-template-areas: 'header' 'revenue' 'orders' 'avg' 'category' 'trend' 'data'; grid-template-columns: 1fr; padding: 10px; gap: 10px; } }", - "@media (max-width: 480px) { .group { padding: 12px; } h1 { font-size: 1.2em; padding: 8px 0; } h2 { font-size: 1.4em; margin: 8px 0; } h3 { font-size: 0.8em; margin: 0 0 8px 0; } }" + "h3 { margin: 0 0 10px 0; font-size: 1em; color: #666; text-transform: uppercase; }" ] }, "dataLoaders": [ From 05004ceb0360ca1c0b10c5bc6dd155aacc6c67d3 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Mon, 25 Aug 2025 21:51:44 +0000 Subject: [PATCH 06/11] Add minimal responsive grid layout changes for mobile Co-authored-by: danmarshall <11507384+danmarshall@users.noreply.github.com> --- packages/web-deploy/json/sales-dashboard.idoc.json | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/web-deploy/json/sales-dashboard.idoc.json b/packages/web-deploy/json/sales-dashboard.idoc.json index a36191cd..f488262a 100644 --- a/packages/web-deploy/json/sales-dashboard.idoc.json +++ b/packages/web-deploy/json/sales-dashboard.idoc.json @@ -15,7 +15,9 @@ "#data { grid-area: data; }", "h1 { margin: 0; padding: 10px 0; font-size: 1.5em; font-weight: 400; }", "h2 { margin: 10px 0; font-size: 2em; color: #333; }", - "h3 { margin: 0 0 10px 0; font-size: 1em; color: #666; text-transform: uppercase; }" + "h3 { margin: 0 0 10px 0; font-size: 1em; color: #666; text-transform: uppercase; }", + "@media (max-width: 768px) { body { grid-template-areas: 'header header' 'revenue orders' 'avg avg' 'category trend' 'data data'; grid-template-columns: 1fr 1fr; gap: 15px; } }", + "@media (max-width: 480px) { body { grid-template-areas: 'header' 'revenue' 'orders' 'avg' 'category' 'trend' 'data'; grid-template-columns: 1fr; gap: 10px; } }" ] }, "dataLoaders": [ From 78344b435ca578246cae2b96bf7a3010709d4f28 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Mon, 25 Aug 2025 23:37:25 +0000 Subject: [PATCH 07/11] Create simplified dashboard version without charts for layout testing Co-authored-by: danmarshall <11507384+danmarshall@users.noreply.github.com> --- .../json/sales-dashboard-no-charts.idoc.json | 111 ++++++++++++++++++ 1 file changed, 111 insertions(+) create mode 100644 packages/web-deploy/json/sales-dashboard-no-charts.idoc.json diff --git a/packages/web-deploy/json/sales-dashboard-no-charts.idoc.json b/packages/web-deploy/json/sales-dashboard-no-charts.idoc.json new file mode 100644 index 00000000..9ae5335c --- /dev/null +++ b/packages/web-deploy/json/sales-dashboard-no-charts.idoc.json @@ -0,0 +1,111 @@ +{ + "$schema": "../../../docs/schema/idoc_v1.json", + "title": "Sales Performance Dashboard (No Charts)", + "style": { + "css": [ + "body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 0; padding: 20px; background: #f5f7fa; }", + "body { display: grid; grid-template-areas: 'header header header' 'revenue orders avg'; grid-template-columns: 1fr 1fr 1fr; gap: 20px; max-width: 1400px; margin: 0 auto; }", + ".group { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }", + "#header { grid-area: header; background: #667eea; color: white; text-align: center; }", + "#revenue { grid-area: revenue; text-align: center; }", + "#orders { grid-area: orders; text-align: center; }", + "#avg { grid-area: avg; text-align: center; }", + "h1 { margin: 0; padding: 10px 0; font-size: 1.5em; font-weight: 400; }", + "h2 { margin: 10px 0; font-size: 2em; color: #333; }", + "h3 { margin: 0 0 10px 0; font-size: 1em; color: #666; text-transform: uppercase; }", + "@media (max-width: 768px) { body { grid-template-areas: 'header header' 'revenue orders' 'avg avg'; grid-template-columns: 1fr 1fr; gap: 15px; } }", + "@media (max-width: 480px) { body { grid-template-areas: 'header' 'revenue' 'orders' 'avg'; grid-template-columns: 1fr; gap: 10px; } }" + ] + }, + "dataLoaders": [ + { + "dataSourceName": "salesData", + "type": "inline", + "format": "json", + "content": [ + {"timestamp": "2025-08-01", "order_id": "ORD-1001", "product": "Wireless Mouse", "category": "Electronics", "region": "West", "salesperson": "Jane Smith", "units": 3, "unit_price": 25.00}, + {"timestamp": "2025-08-02", "order_id": "ORD-1002", "product": "Office Chair", "category": "Furniture", "region": "East", "salesperson": "Bob Johnson", "units": 1, "unit_price": 199.99}, + {"timestamp": "2025-08-03", "order_id": "ORD-1003", "product": "Laptop Stand", "category": "Electronics", "region": "North", "salesperson": "Alice Chen", "units": 2, "unit_price": 45.50}, + {"timestamp": "2025-08-05", "order_id": "ORD-1004", "product": "Desk Lamp", "category": "Furniture", "region": "South", "salesperson": "Charlie Brown", "units": 1, "unit_price": 89.00}, + {"timestamp": "2025-08-06", "order_id": "ORD-1005", "product": "Bluetooth Headphones", "category": "Electronics", "region": "West", "salesperson": "Jane Smith", "units": 4, "unit_price": 79.99} + ] + } + ], + "variables": [ + { + "variableId": "revenueCalculation", + "type": "object", + "isArray": true, + "initialValue": [], + "calculation": { + "dataSourceNames": ["salesData"], + "dataFrameTransformations": [ + { + "type": "formula", + "expr": "datum.units * datum.unit_price", + "as": "revenue" + }, + { + "type": "aggregate", + "ops": ["sum"], + "fields": ["revenue"], + "as": ["total"] + } + ] + } + }, + { + "variableId": "totalRevenueFormatted", + "type": "string", + "initialValue": "$0", + "calculation": { + "vegaExpression": "'$' + format(data('revenueCalculation')[0] ? data('revenueCalculation')[0].total : 0, ',.2f')" + } + }, + { + "variableId": "totalOrders", + "type": "number", + "initialValue": 0, + "calculation": { + "vegaExpression": "length(data('salesData'))" + } + }, + { + "variableId": "averageOrderValue", + "type": "string", + "initialValue": "$0.00", + "calculation": { + "vegaExpression": "'$' + format((data('revenueCalculation')[0] ? data('revenueCalculation')[0].total : 0) / (totalOrders > 0 ? totalOrders : 1), ',.2f')" + } + } + ], + "groups": [ + { + "groupId": "header", + "elements": [ + "# Sales Performance Dashboard" + ] + }, + { + "groupId": "revenue", + "elements": [ + "### Total Revenue", + "## {{totalRevenueFormatted}}" + ] + }, + { + "groupId": "orders", + "elements": [ + "### Total Orders", + "## {{totalOrders}}" + ] + }, + { + "groupId": "avg", + "elements": [ + "### Average Order Value", + "## {{averageOrderValue}}" + ] + } + ] +} \ No newline at end of file From 6f50f6643a9a3942b61cc29aed17ce8df0765104 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Mon, 25 Aug 2025 23:48:06 +0000 Subject: [PATCH 08/11] Add chart placeholder sections and data table to no-charts dashboard version Co-authored-by: danmarshall <11507384+danmarshall@users.noreply.github.com> --- .../json/sales-dashboard-no-charts.idoc.json | 31 +++++++++++++++++-- 1 file changed, 28 insertions(+), 3 deletions(-) diff --git a/packages/web-deploy/json/sales-dashboard-no-charts.idoc.json b/packages/web-deploy/json/sales-dashboard-no-charts.idoc.json index 9ae5335c..43d05ed2 100644 --- a/packages/web-deploy/json/sales-dashboard-no-charts.idoc.json +++ b/packages/web-deploy/json/sales-dashboard-no-charts.idoc.json @@ -4,17 +4,20 @@ "style": { "css": [ "body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 0; padding: 20px; background: #f5f7fa; }", - "body { display: grid; grid-template-areas: 'header header header' 'revenue orders avg'; grid-template-columns: 1fr 1fr 1fr; gap: 20px; max-width: 1400px; margin: 0 auto; }", + "body { display: grid; grid-template-areas: 'header header header' 'revenue orders avg' 'category trend trend' 'data data data'; grid-template-columns: 1fr 1fr 1fr; gap: 20px; max-width: 1400px; margin: 0 auto; }", ".group { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }", "#header { grid-area: header; background: #667eea; color: white; text-align: center; }", "#revenue { grid-area: revenue; text-align: center; }", "#orders { grid-area: orders; text-align: center; }", "#avg { grid-area: avg; text-align: center; }", + "#category { grid-area: category; }", + "#trend { grid-area: trend; }", + "#data { grid-area: data; }", "h1 { margin: 0; padding: 10px 0; font-size: 1.5em; font-weight: 400; }", "h2 { margin: 10px 0; font-size: 2em; color: #333; }", "h3 { margin: 0 0 10px 0; font-size: 1em; color: #666; text-transform: uppercase; }", - "@media (max-width: 768px) { body { grid-template-areas: 'header header' 'revenue orders' 'avg avg'; grid-template-columns: 1fr 1fr; gap: 15px; } }", - "@media (max-width: 480px) { body { grid-template-areas: 'header' 'revenue' 'orders' 'avg'; grid-template-columns: 1fr; gap: 10px; } }" + "@media (max-width: 768px) { body { grid-template-areas: 'header header' 'revenue orders' 'avg avg' 'category trend' 'data data'; grid-template-columns: 1fr 1fr; gap: 15px; } }", + "@media (max-width: 480px) { body { grid-template-areas: 'header' 'revenue' 'orders' 'avg' 'category' 'trend' 'data'; grid-template-columns: 1fr; gap: 10px; } }" ] }, "dataLoaders": [ @@ -106,6 +109,28 @@ "### Average Order Value", "## {{averageOrderValue}}" ] + }, + { + "groupId": "category", + "elements": [ + "### Sales by Category" + ] + }, + { + "groupId": "trend", + "elements": [ + "### Sales Trend" + ] + }, + { + "groupId": "data", + "elements": [ + "### Sales Data", + { + "type": "tabulator", + "dataSourceName": "salesData" + } + ] } ] } \ No newline at end of file From f058e84dfa9a4803b013bf47c087c89f80197fa2 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Tue, 26 Aug 2025 00:23:35 +0000 Subject: [PATCH 09/11] Remove problematic table and add charts back to test responsive layout Co-authored-by: danmarshall <11507384+danmarshall@users.noreply.github.com> --- .../json/sales-dashboard-no-charts.idoc.json | 85 +++++++++++++++---- 1 file changed, 69 insertions(+), 16 deletions(-) diff --git a/packages/web-deploy/json/sales-dashboard-no-charts.idoc.json b/packages/web-deploy/json/sales-dashboard-no-charts.idoc.json index 43d05ed2..c19a0773 100644 --- a/packages/web-deploy/json/sales-dashboard-no-charts.idoc.json +++ b/packages/web-deploy/json/sales-dashboard-no-charts.idoc.json @@ -1,10 +1,10 @@ { "$schema": "../../../docs/schema/idoc_v1.json", - "title": "Sales Performance Dashboard (No Charts)", + "title": "Sales Performance Dashboard (Test Version)", "style": { "css": [ "body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 0; padding: 20px; background: #f5f7fa; }", - "body { display: grid; grid-template-areas: 'header header header' 'revenue orders avg' 'category trend trend' 'data data data'; grid-template-columns: 1fr 1fr 1fr; gap: 20px; max-width: 1400px; margin: 0 auto; }", + "body { display: grid; grid-template-areas: 'header header header' 'revenue orders avg' 'category trend trend'; grid-template-columns: 1fr 1fr 1fr; gap: 20px; max-width: 1400px; margin: 0 auto; }", ".group { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }", "#header { grid-area: header; background: #667eea; color: white; text-align: center; }", "#revenue { grid-area: revenue; text-align: center; }", @@ -12,12 +12,11 @@ "#avg { grid-area: avg; text-align: center; }", "#category { grid-area: category; }", "#trend { grid-area: trend; }", - "#data { grid-area: data; }", "h1 { margin: 0; padding: 10px 0; font-size: 1.5em; font-weight: 400; }", "h2 { margin: 10px 0; font-size: 2em; color: #333; }", "h3 { margin: 0 0 10px 0; font-size: 1em; color: #666; text-transform: uppercase; }", - "@media (max-width: 768px) { body { grid-template-areas: 'header header' 'revenue orders' 'avg avg' 'category trend' 'data data'; grid-template-columns: 1fr 1fr; gap: 15px; } }", - "@media (max-width: 480px) { body { grid-template-areas: 'header' 'revenue' 'orders' 'avg' 'category' 'trend' 'data'; grid-template-columns: 1fr; gap: 10px; } }" + "@media (max-width: 768px) { body { grid-template-areas: 'header header' 'revenue orders' 'avg avg' 'category trend'; grid-template-columns: 1fr 1fr; gap: 15px; } }", + "@media (max-width: 480px) { body { grid-template-areas: 'header' 'revenue' 'orders' 'avg' 'category' 'trend'; grid-template-columns: 1fr; gap: 10px; } }" ] }, "dataLoaders": [ @@ -80,6 +79,29 @@ "calculation": { "vegaExpression": "'$' + format((data('revenueCalculation')[0] ? data('revenueCalculation')[0].total : 0) / (totalOrders > 0 ? totalOrders : 1), ',.2f')" } + }, + { + "variableId": "categoryRevenue", + "type": "object", + "isArray": true, + "initialValue": [], + "calculation": { + "dataSourceNames": ["salesData"], + "dataFrameTransformations": [ + { + "type": "formula", + "expr": "datum.units * datum.unit_price", + "as": "revenue" + }, + { + "type": "aggregate", + "groupby": ["category"], + "ops": ["sum"], + "fields": ["revenue"], + "as": ["total_revenue"] + } + ] + } } ], "groups": [ @@ -113,24 +135,55 @@ { "groupId": "category", "elements": [ - "### Sales by Category" + "### Sales by Category", + { + "type": "chart", + "chartKey": "categoryChart" + } ] }, { "groupId": "trend", "elements": [ - "### Sales Trend" - ] - }, - { - "groupId": "data", - "elements": [ - "### Sales Data", + "### Sales Trend", { - "type": "tabulator", - "dataSourceName": "salesData" + "type": "chart", + "chartKey": "trendChart" } ] } - ] + ], + "resources": { + "charts": { + "categoryChart": { + "$schema": "https://vega.github.io/schema/vega-lite/v6.json", + "width": "container", + "data": { + "name": "categoryRevenue" + }, + "mark": "bar", + "encoding": { + "x": {"field": "category", "type": "nominal", "title": "Category"}, + "y": {"field": "total_revenue", "type": "quantitative", "title": "Revenue ($)"}, + "color": {"field": "category", "type": "nominal", "scale": {"range": ["#667eea", "#764ba2"]}} + } + }, + "trendChart": { + "$schema": "https://vega.github.io/schema/vega-lite/v6.json", + "width": "container", + "data": { + "name": "salesData" + }, + "transform": [ + {"calculate": "datum.units * datum.unit_price", "as": "revenue"} + ], + "mark": {"type": "line", "point": true, "strokeWidth": 3}, + "encoding": { + "x": {"field": "timestamp", "type": "temporal", "title": "Date"}, + "y": {"field": "revenue", "type": "quantitative", "title": "Revenue ($)"}, + "color": {"value": "#667eea"} + } + } + } + } } \ No newline at end of file From 2f671f9b2fbcce62a45c8f0823741137f9e53120 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Tue, 26 Aug 2025 02:28:31 +0000 Subject: [PATCH 10/11] Remove charts and tables from test version to isolate grid reflow issue Co-authored-by: danmarshall <11507384+danmarshall@users.noreply.github.com> --- .../json/sales-dashboard-no-charts.idoc.json | 71 ++----------------- 1 file changed, 4 insertions(+), 67 deletions(-) diff --git a/packages/web-deploy/json/sales-dashboard-no-charts.idoc.json b/packages/web-deploy/json/sales-dashboard-no-charts.idoc.json index c19a0773..bc05e52b 100644 --- a/packages/web-deploy/json/sales-dashboard-no-charts.idoc.json +++ b/packages/web-deploy/json/sales-dashboard-no-charts.idoc.json @@ -79,29 +79,6 @@ "calculation": { "vegaExpression": "'$' + format((data('revenueCalculation')[0] ? data('revenueCalculation')[0].total : 0) / (totalOrders > 0 ? totalOrders : 1), ',.2f')" } - }, - { - "variableId": "categoryRevenue", - "type": "object", - "isArray": true, - "initialValue": [], - "calculation": { - "dataSourceNames": ["salesData"], - "dataFrameTransformations": [ - { - "type": "formula", - "expr": "datum.units * datum.unit_price", - "as": "revenue" - }, - { - "type": "aggregate", - "groupby": ["category"], - "ops": ["sum"], - "fields": ["revenue"], - "as": ["total_revenue"] - } - ] - } } ], "groups": [ @@ -135,55 +112,15 @@ { "groupId": "category", "elements": [ - "### Sales by Category", - { - "type": "chart", - "chartKey": "categoryChart" - } + "### Sales by Category" ] }, { "groupId": "trend", "elements": [ - "### Sales Trend", - { - "type": "chart", - "chartKey": "trendChart" - } + "### Sales Trend" ] } - ], - "resources": { - "charts": { - "categoryChart": { - "$schema": "https://vega.github.io/schema/vega-lite/v6.json", - "width": "container", - "data": { - "name": "categoryRevenue" - }, - "mark": "bar", - "encoding": { - "x": {"field": "category", "type": "nominal", "title": "Category"}, - "y": {"field": "total_revenue", "type": "quantitative", "title": "Revenue ($)"}, - "color": {"field": "category", "type": "nominal", "scale": {"range": ["#667eea", "#764ba2"]}} - } - }, - "trendChart": { - "$schema": "https://vega.github.io/schema/vega-lite/v6.json", - "width": "container", - "data": { - "name": "salesData" - }, - "transform": [ - {"calculate": "datum.units * datum.unit_price", "as": "revenue"} - ], - "mark": {"type": "line", "point": true, "strokeWidth": 3}, - "encoding": { - "x": {"field": "timestamp", "type": "temporal", "title": "Date"}, - "y": {"field": "revenue", "type": "quantitative", "title": "Revenue ($)"}, - "color": {"value": "#667eea"} - } - } - } - } + ] +} } \ No newline at end of file From d3512234b46898c41ac5b206309499a056c1eb71 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Tue, 26 Aug 2025 02:37:38 +0000 Subject: [PATCH 11/11] Fix JSON syntax error - remove extra closing brace Co-authored-by: danmarshall <11507384+danmarshall@users.noreply.github.com> --- packages/web-deploy/json/sales-dashboard-no-charts.idoc.json | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/web-deploy/json/sales-dashboard-no-charts.idoc.json b/packages/web-deploy/json/sales-dashboard-no-charts.idoc.json index bc05e52b..bff81640 100644 --- a/packages/web-deploy/json/sales-dashboard-no-charts.idoc.json +++ b/packages/web-deploy/json/sales-dashboard-no-charts.idoc.json @@ -122,5 +122,4 @@ ] } ] -} } \ No newline at end of file