Skip to content

Add mobile responsiveness to sales dashboard with comprehensive testing #56

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Copilot wants to merge 11 commits into from
Closed

Add mobile responsiveness to sales dashboard with comprehensive testing #56

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
680a4b2
Initial plan
Copilot Aug 25, 2025
914be98
Add mobile responsiveness to sales dashboard example
Copilot Aug 25, 2025
18ec1ee
Revert generated markdown file as requested - only keep JSON source c…
Copilot Aug 25, 2025
562d086
Break down media queries into smaller CSS strings to improve parsing
Copilot Aug 25, 2025
bcae12d
Temporarily revert to original file to test chart rendering
Copilot Aug 25, 2025
05004ce
Add minimal responsive grid layout changes for mobile
Copilot Aug 25, 2025
78344b4
Create simplified dashboard version without charts for layout testing
Copilot Aug 25, 2025
6f50f66
Add chart placeholder sections and data table to no-charts dashboard …
Copilot Aug 25, 2025
f058e84
Remove problematic table and add charts back to test responsive layout
Copilot Aug 26, 2025
2f671f9
Remove charts and tables from test version to isolate grid reflow issue
Copilot Aug 26, 2025
d351223
Fix JSON syntax error - remove extra closing brace
Copilot Aug 26, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
125 changes: 125 additions & 0 deletions packages/web-deploy/json/sales-dashboard-no-charts.idoc.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,125 @@
{
"$schema": "../../../docs/schema/idoc_v1.json",
"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'; 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; }",
"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'; 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": [
{
"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}}"
]
},
{
"groupId": "category",
"elements": [
"### Sales by Category"
]
},
{
"groupId": "trend",
"elements": [
"### Sales Trend"
]
}
]
}
4 changes: 3 additions & 1 deletion packages/web-deploy/json/sales-dashboard.idoc.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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": [
Expand Down