From 000fa6724985cef6148674b4ce7ea222ef8cb381 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sun, 14 Sep 2025 01:35:17 +0000 Subject: [PATCH 1/5] Initial plan From 929aec6fa6fdc699a1b5c64ad7445e4fac1e74d5 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sun, 14 Sep 2025 01:41:31 +0000 Subject: [PATCH 2/5] Add pie chart and tabulator to why-chartifact example with Excel vs live data messaging Co-authored-by: danmarshall <11507384+danmarshall@users.noreply.github.com> --- .../examples/markdown/why-chartifact.idoc.md | 145 +++++++++++++++- .../web-deploy/json/why-chartifact.idoc.json | 155 +++++++++++++++++- 2 files changed, 296 insertions(+), 4 deletions(-) diff --git a/docs/assets/examples/markdown/why-chartifact.idoc.md b/docs/assets/examples/markdown/why-chartifact.idoc.md index 0d7edf49..a37ca4e7 100644 --- a/docs/assets/examples/markdown/why-chartifact.idoc.md +++ b/docs/assets/examples/markdown/why-chartifact.idoc.md @@ -15,6 +15,53 @@ "name": "calculatedWorth", "value": "1000", "update": "format(interactiveValue, ',')" + }, + { + "name": "formatCapabilities", + "update": "data('formatCapabilities')" + }, + { + "name": "excelVsLiveData", + "update": "data('excelVsLiveData')" + } + ], + "data": [ + { + "name": "documentFormats", + "values": [ + {"format": "PDF", "capability": "Portable", "score": 95, "interactive": false}, + {"format": "PDF", "capability": "Human-editable", "score": 10, "interactive": false}, + {"format": "PDF", "capability": "Interactive", "score": 5, "interactive": false}, + {"format": "HTML", "capability": "Portable", "score": 40, "interactive": true}, + {"format": "HTML", "capability": "Human-editable", "score": 30, "interactive": true}, + {"format": "HTML", "capability": "Interactive", "score": 95, "interactive": true}, + {"format": "Markdown", "capability": "Portable", "score": 70, "interactive": false}, + {"format": "Markdown", "capability": "Human-editable", "score": 90, "interactive": false}, + {"format": "Markdown", "capability": "Interactive", "score": 20, "interactive": false}, + {"format": "Chartifact", "capability": "Portable", "score": 85, "interactive": true}, + {"format": "Chartifact", "capability": "Human-editable", "score": 85, "interactive": true}, + {"format": "Chartifact", "capability": "Interactive", "score": 90, "interactive": true} + ] + }, + { + "name": "formatCapabilities", + "source": "documentFormats", + "transform": [ + { + "type": "aggregate", + "groupby": ["format"], + "ops": ["mean"], + "fields": ["score"], + "as": ["avgScore"] + } + ] + }, + { + "name": "excelVsLiveData", + "values": [ + {"approach": "Excel Screenshot", "update_frequency": "Manual", "interactivity": "None", "data_freshness": "Stale", "effort_to_update": "High"}, + {"approach": "Live Chart", "update_frequency": "Real-time", "interactivity": "Full", "data_freshness": "Current", "effort_to_update": "None"} + ] } ] } @@ -30,7 +77,7 @@ body { scroll-snap-type: y mandatory; } #slide3 { background: linear-gradient(135deg, #2980b9 0%, #2c3e50 100%); color: white; } #slide4 { background: linear-gradient(135deg, #27ae60 0%, #2980b9 100%); color: white; } #slide5 { background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%); color: white; } -#slide6 { background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%); color: white; justify-content: center; } +#slide6 { background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%); color: white; justify-content: center; min-width: 0; overflow: hidden; } #slide7 { background: linear-gradient(135deg, #16a085 0%, #27ae60 100%); color: white; } #slide8 { background: linear-gradient(135deg, #2c3e50 0%, #8e44ad 100%); color: white; text-align: center; justify-content: center; } h1 { font-size: 2.5em; margin: 0.3em 0; font-weight: 300; line-height: 1.2; } @@ -39,6 +86,12 @@ h3 { font-size: 1.6em; margin: 0.5em 0; font-weight: 400; line-height: 1.2; } p, li { font-size: 1.2em; line-height: 1.5; margin: 0.5em 0; } ul, ol { margin: 0.5em 0; padding-left: 1.5em; } li { margin: 0.3em 0; } +.tabulator { max-width: 100%; overflow: auto; margin: 20px 0; border-radius: 8px; } +.tabulator .tabulator-table { min-width: fit-content; } +.tabulator .tabulator-header { background: rgba(255,255,255,0.9); color: #333; } +.tabulator .tabulator-cell { background: rgba(255,255,255,0.8); color: #333; } +.vega-embed { margin: 20px auto; } +.vega-embed .vega-actions { display: none; } @media (max-width: 768px) { .group { padding: 2em 1em; } h1 { font-size: 2em; } h2 { font-size: 1.6em; } h3 { font-size: 1.3em; } p, li { font-size: 1em; line-height: 1.4; } ul, ol { padding-left: 1em; } } @media (max-width: 480px) { .group { padding: 1.5em 0.8em; } h1 { font-size: 1.8em; } h2 { font-size: 1.4em; } h3 { font-size: 1.2em; } p, li { font-size: 0.9em; line-height: 1.3; } ul, ol { padding-left: 0.8em; } li { margin: 0.2em 0; } } ``` @@ -103,7 +156,9 @@ li { margin: 0.3em 0; } ::: ::: group {#slide6} -## 📊 Interactive Content is Exponentially More Valuable +## 📊 Stop Pasting Chart Images from Excel! +### Make them live charts from live data instead + ### If a picture is worth 1,000 words... # {{calculatedWorth}} ### Then an interactive is worth **{{calculatedWorth}}** words @@ -119,6 +174,92 @@ step: 1000 ``` +### 📈 Document Format Capabilities + + +```json vega-lite +{ + "$schema": "https://vega.github.io/schema/vega-lite/v6.json", + "width": 300, + "height": 300, + "data": { + "name": "formatCapabilities" + }, + "mark": { + "type": "arc", + "innerRadius": 50, + "stroke": "white", + "strokeWidth": 3 + }, + "encoding": { + "theta": { + "field": "avgScore", + "type": "quantitative", + "title": "Capability Score" + }, + "color": { + "field": "format", + "type": "nominal", + "scale": { + "range": ["#e74c3c", "#f39c12", "#27ae60", "#3498db"] + }, + "legend": { + "orient": "right", + "title": "Document Format" + } + }, + "tooltip": [ + {"field": "format", "type": "nominal", "title": "Format"}, + {"field": "avgScore", "type": "quantitative", "title": "Average Score", "format": ".1f"} + ] + } +} +``` + + +### 🆚 Excel Screenshots vs Live Data + + +```json tabulator +{ + "dataSourceName": "excelVsLiveData", + "variableId": "excelComparisonTable", + "editable": true, + "tabulatorOptions": { + "layout": "fitColumns", + "maxHeight": "200px", + "columns": [ + { + "title": "Approach", + "field": "approach", + "editor": "input" + }, + { + "title": "Updates", + "field": "update_frequency", + "editor": "input" + }, + { + "title": "Interactive", + "field": "interactivity", + "editor": "input" + }, + { + "title": "Data Freshness", + "field": "data_freshness", + "editor": "input" + }, + { + "title": "Effort", + "field": "effort_to_update", + "editor": "input" + } + ] + } +} +``` + + ### ⚡ This slide proves the point - you just experienced it! ::: ::: group {#slide7} diff --git a/packages/web-deploy/json/why-chartifact.idoc.json b/packages/web-deploy/json/why-chartifact.idoc.json index ace13a3b..2b702787 100644 --- a/packages/web-deploy/json/why-chartifact.idoc.json +++ b/packages/web-deploy/json/why-chartifact.idoc.json @@ -11,7 +11,7 @@ "#slide3 { background: linear-gradient(135deg, #2980b9 0%, #2c3e50 100%); color: white; }", "#slide4 { background: linear-gradient(135deg, #27ae60 0%, #2980b9 100%); color: white; }", "#slide5 { background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%); color: white; }", - "#slide6 { background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%); color: white; justify-content: center; }", + "#slide6 { background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%); color: white; justify-content: center; min-width: 0; overflow: hidden; }", "#slide7 { background: linear-gradient(135deg, #16a085 0%, #27ae60 100%); color: white; }", "#slide8 { background: linear-gradient(135deg, #2c3e50 0%, #8e44ad 100%); color: white; text-align: center; justify-content: center; }", "h1 { font-size: 2.5em; margin: 0.3em 0; font-weight: 300; line-height: 1.2; }", @@ -20,10 +20,46 @@ "p, li { font-size: 1.2em; line-height: 1.5; margin: 0.5em 0; }", "ul, ol { margin: 0.5em 0; padding-left: 1.5em; }", "li { margin: 0.3em 0; }", + ".tabulator { max-width: 100%; overflow: auto; margin: 20px 0; border-radius: 8px; }", + ".tabulator .tabulator-table { min-width: fit-content; }", + ".tabulator .tabulator-header { background: rgba(255,255,255,0.9); color: #333; }", + ".tabulator .tabulator-cell { background: rgba(255,255,255,0.8); color: #333; }", + ".vega-embed { margin: 20px auto; }", + ".vega-embed .vega-actions { display: none; }", "@media (max-width: 768px) { .group { padding: 2em 1em; } h1 { font-size: 2em; } h2 { font-size: 1.6em; } h3 { font-size: 1.3em; } p, li { font-size: 1em; line-height: 1.4; } ul, ol { padding-left: 1em; } }", "@media (max-width: 480px) { .group { padding: 1.5em 0.8em; } h1 { font-size: 1.8em; } h2 { font-size: 1.4em; } h3 { font-size: 1.2em; } p, li { font-size: 0.9em; line-height: 1.3; } ul, ol { padding-left: 0.8em; } li { margin: 0.2em 0; } }" ] }, + "dataLoaders": [ + { + "dataSourceName": "documentFormats", + "type": "inline", + "format": "json", + "content": [ + {"format": "PDF", "capability": "Portable", "score": 95, "interactive": false}, + {"format": "PDF", "capability": "Human-editable", "score": 10, "interactive": false}, + {"format": "PDF", "capability": "Interactive", "score": 5, "interactive": false}, + {"format": "HTML", "capability": "Portable", "score": 40, "interactive": true}, + {"format": "HTML", "capability": "Human-editable", "score": 30, "interactive": true}, + {"format": "HTML", "capability": "Interactive", "score": 95, "interactive": true}, + {"format": "Markdown", "capability": "Portable", "score": 70, "interactive": false}, + {"format": "Markdown", "capability": "Human-editable", "score": 90, "interactive": false}, + {"format": "Markdown", "capability": "Interactive", "score": 20, "interactive": false}, + {"format": "Chartifact", "capability": "Portable", "score": 85, "interactive": true}, + {"format": "Chartifact", "capability": "Human-editable", "score": 85, "interactive": true}, + {"format": "Chartifact", "capability": "Interactive", "score": 90, "interactive": true} + ] + }, + { + "dataSourceName": "excelVsLiveData", + "type": "inline", + "format": "json", + "content": [ + {"approach": "Excel Screenshot", "update_frequency": "Manual", "interactivity": "None", "data_freshness": "Stale", "effort_to_update": "High"}, + {"approach": "Live Chart", "update_frequency": "Real-time", "interactivity": "Full", "data_freshness": "Current", "effort_to_update": "None"} + ] + } + ], "variables": [ { "variableId": "interactiveValue", @@ -42,8 +78,75 @@ "variableId": "currentYear", "type": "number", "initialValue": 2025 + }, + { + "variableId": "formatCapabilities", + "type": "object", + "isArray": true, + "initialValue": [], + "calculation": { + "dataSourceNames": ["documentFormats"], + "dataFrameTransformations": [ + { + "type": "aggregate", + "groupby": ["format"], + "ops": ["mean"], + "fields": ["score"], + "as": ["avgScore"] + } + ] + } + }, + { + "variableId": "excelDataTable", + "type": "object", + "isArray": true, + "initialValue": [], + "calculation": { + "dataSourceNames": ["excelVsLiveData"] + } } ], + "resources": { + "charts": { + "formatComparisonChart": { + "$schema": "https://vega.github.io/schema/vega-lite/v6.json", + "width": 300, + "height": 300, + "data": { + "name": "formatCapabilities" + }, + "mark": { + "type": "arc", + "innerRadius": 50, + "stroke": "white", + "strokeWidth": 3 + }, + "encoding": { + "theta": { + "field": "avgScore", + "type": "quantitative", + "title": "Capability Score" + }, + "color": { + "field": "format", + "type": "nominal", + "scale": { + "range": ["#e74c3c", "#f39c12", "#27ae60", "#3498db"] + }, + "legend": { + "orient": "right", + "title": "Document Format" + } + }, + "tooltip": [ + {"field": "format", "type": "nominal", "title": "Format"}, + {"field": "avgScore", "type": "quantitative", "title": "Average Score", "format": ".1f"} + ] + } + } + } + }, "groups": [ { "groupId": "slide1", @@ -115,7 +218,9 @@ { "groupId": "slide6", "elements": [ - "## 📊 Interactive Content is Exponentially More Valuable", + "## 📊 Stop Pasting Chart Images from Excel!", + "### Make them live charts from live data instead", + "", "### If a picture is worth 1,000 words...", "# {{calculatedWorth}}", "### Then an interactive is worth **{{calculatedWorth}}** words", @@ -127,6 +232,52 @@ "max": 100000, "step": 1000 }, + "", + "### 📈 Document Format Capabilities", + { + "type": "chart", + "chartKey": "formatComparisonChart" + }, + "", + "### 🆚 Excel Screenshots vs Live Data", + { + "type": "tabulator", + "variableId": "excelComparisonTable", + "dataSourceName": "excelVsLiveData", + "editable": true, + "tabulatorOptions": { + "layout": "fitColumns", + "maxHeight": "200px", + "columns": [ + { + "title": "Approach", + "field": "approach", + "editor": "input" + }, + { + "title": "Updates", + "field": "update_frequency", + "editor": "input" + }, + { + "title": "Interactive", + "field": "interactivity", + "editor": "input" + }, + { + "title": "Data Freshness", + "field": "data_freshness", + "editor": "input" + }, + { + "title": "Effort", + "field": "effort_to_update", + "editor": "input" + } + ] + } + }, + "", "### ⚡ This slide proves the point - you just experienced it!" ] }, From cdff3a84f4d55586cbffb3ee70ec548fa46d4a9e Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sun, 14 Sep 2025 04:22:25 +0000 Subject: [PATCH 3/5] Simplify why-chartifact example per feedback - chart driven by table, two-column layout, remove slider Co-authored-by: danmarshall <11507384+danmarshall@users.noreply.github.com> --- .../web-deploy/json/why-chartifact.idoc.json | 209 +++++++----------- 1 file changed, 80 insertions(+), 129 deletions(-) diff --git a/packages/web-deploy/json/why-chartifact.idoc.json b/packages/web-deploy/json/why-chartifact.idoc.json index 2b702787..db4e2bee 100644 --- a/packages/web-deploy/json/why-chartifact.idoc.json +++ b/packages/web-deploy/json/why-chartifact.idoc.json @@ -11,7 +11,9 @@ "#slide3 { background: linear-gradient(135deg, #2980b9 0%, #2c3e50 100%); color: white; }", "#slide4 { background: linear-gradient(135deg, #27ae60 0%, #2980b9 100%); color: white; }", "#slide5 { background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%); color: white; }", - "#slide6 { background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%); color: white; justify-content: center; min-width: 0; overflow: hidden; }", + "#slide6 { background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%); color: white; justify-content: flex-start; display: grid; grid-template-columns: 1fr 1fr; grid-gap: 2em; align-items: start; min-width: 0; overflow: hidden; }", + "#slide6 .left-content { grid-column: 1; }", + "#slide6 .right-content { grid-column: 2; min-width: 0; overflow: hidden; }", "#slide7 { background: linear-gradient(135deg, #16a085 0%, #27ae60 100%); color: white; }", "#slide8 { background: linear-gradient(135deg, #2c3e50 0%, #8e44ad 100%); color: white; text-align: center; justify-content: center; }", "h1 { font-size: 2.5em; margin: 0.3em 0; font-weight: 300; line-height: 1.2; }", @@ -20,7 +22,7 @@ "p, li { font-size: 1.2em; line-height: 1.5; margin: 0.5em 0; }", "ul, ol { margin: 0.5em 0; padding-left: 1.5em; }", "li { margin: 0.3em 0; }", - ".tabulator { max-width: 100%; overflow: auto; margin: 20px 0; border-radius: 8px; }", + ".tabulator { max-width: 100%; overflow: auto; margin: 20px 0; border-radius: 8px; min-width: 0; }", ".tabulator .tabulator-table { min-width: fit-content; }", ".tabulator .tabulator-header { background: rgba(255,255,255,0.9); color: #333; }", ".tabulator .tabulator-cell { background: rgba(255,255,255,0.8); color: #333; }", @@ -32,116 +34,67 @@ }, "dataLoaders": [ { - "dataSourceName": "documentFormats", + "dataSourceName": "chartData", "type": "inline", "format": "json", "content": [ - {"format": "PDF", "capability": "Portable", "score": 95, "interactive": false}, - {"format": "PDF", "capability": "Human-editable", "score": 10, "interactive": false}, - {"format": "PDF", "capability": "Interactive", "score": 5, "interactive": false}, - {"format": "HTML", "capability": "Portable", "score": 40, "interactive": true}, - {"format": "HTML", "capability": "Human-editable", "score": 30, "interactive": true}, - {"format": "HTML", "capability": "Interactive", "score": 95, "interactive": true}, - {"format": "Markdown", "capability": "Portable", "score": 70, "interactive": false}, - {"format": "Markdown", "capability": "Human-editable", "score": 90, "interactive": false}, - {"format": "Markdown", "capability": "Interactive", "score": 20, "interactive": false}, - {"format": "Chartifact", "capability": "Portable", "score": 85, "interactive": true}, - {"format": "Chartifact", "capability": "Human-editable", "score": 85, "interactive": true}, - {"format": "Chartifact", "capability": "Interactive", "score": 90, "interactive": true} - ] - }, - { - "dataSourceName": "excelVsLiveData", - "type": "inline", - "format": "json", - "content": [ - {"approach": "Excel Screenshot", "update_frequency": "Manual", "interactivity": "None", "data_freshness": "Stale", "effort_to_update": "High"}, - {"approach": "Live Chart", "update_frequency": "Real-time", "interactivity": "Full", "data_freshness": "Current", "effort_to_update": "None"} + {"category": "Excel Screenshots", "value": 25}, + {"category": "Live Charts", "value": 35}, + {"category": "Static Images", "value": 20}, + {"category": "Interactive Data", "value": 20} ] } ], "variables": [ - { - "variableId": "interactiveValue", - "type": "number", - "initialValue": 1000 - }, - { - "variableId": "calculatedWorth", - "type": "string", - "initialValue": "1000", - "calculation": { - "vegaExpression": "format(interactiveValue, ',')" - } - }, { "variableId": "currentYear", "type": "number", "initialValue": 2025 }, { - "variableId": "formatCapabilities", - "type": "object", - "isArray": true, - "initialValue": [], - "calculation": { - "dataSourceNames": ["documentFormats"], - "dataFrameTransformations": [ - { - "type": "aggregate", - "groupby": ["format"], - "ops": ["mean"], - "fields": ["score"], - "as": ["avgScore"] - } - ] - } - }, - { - "variableId": "excelDataTable", + "variableId": "chartTableData", "type": "object", "isArray": true, "initialValue": [], "calculation": { - "dataSourceNames": ["excelVsLiveData"] + "dataSourceNames": ["chartData"] } } ], "resources": { "charts": { - "formatComparisonChart": { + "dataVisualizationChart": { "$schema": "https://vega.github.io/schema/vega-lite/v6.json", - "width": 300, - "height": 300, + "width": 250, + "height": 250, "data": { - "name": "formatCapabilities" + "name": "chartTableData" }, "mark": { "type": "arc", - "innerRadius": 50, + "innerRadius": 40, "stroke": "white", - "strokeWidth": 3 + "strokeWidth": 2 }, "encoding": { "theta": { - "field": "avgScore", - "type": "quantitative", - "title": "Capability Score" + "field": "value", + "type": "quantitative" }, "color": { - "field": "format", + "field": "category", "type": "nominal", "scale": { - "range": ["#e74c3c", "#f39c12", "#27ae60", "#3498db"] + "range": ["#e74c3c", "#3498db", "#95a5a6", "#27ae60"] }, "legend": { - "orient": "right", - "title": "Document Format" + "orient": "bottom", + "title": "Data Visualization Types" } }, "tooltip": [ - {"field": "format", "type": "nominal", "title": "Format"}, - {"field": "avgScore", "type": "quantitative", "title": "Average Score", "format": ".1f"} + {"field": "category", "type": "nominal", "title": "Type"}, + {"field": "value", "type": "quantitative", "title": "Usage %"} ] } } @@ -218,67 +171,65 @@ { "groupId": "slide6", "elements": [ - "## 📊 Stop Pasting Chart Images from Excel!", - "### Make them live charts from live data instead", - "", - "### If a picture is worth 1,000 words...", - "# {{calculatedWorth}}", - "### Then an interactive is worth **{{calculatedWorth}}** words", - { - "type": "slider", - "variableId": "interactiveValue", - "label": "Adjust the multiplier", - "min": 1000, - "max": 100000, - "step": 1000 - }, - "", - "### 📈 Document Format Capabilities", { - "type": "chart", - "chartKey": "formatComparisonChart" + "type": "group", + "groupId": "left-content", + "groupCssClass": "left-content", + "elements": [ + "## 📊 Stop Pasting Chart Images from Excel!", + "### Make them live charts from live data instead", + "", + "**The Problem:**", + "- Screenshots become stale immediately", + "- No interaction or exploration", + "- Manual updates required", + "- Data context lost", + "", + "**The Solution:**", + "- Live data connections", + "- Interactive exploration", + "- Automatic updates", + "- Rich context preserved", + "", + "### ⚡ Experience the difference on the right →" + ] }, - "", - "### 🆚 Excel Screenshots vs Live Data", { - "type": "tabulator", - "variableId": "excelComparisonTable", - "dataSourceName": "excelVsLiveData", - "editable": true, - "tabulatorOptions": { - "layout": "fitColumns", - "maxHeight": "200px", - "columns": [ - { - "title": "Approach", - "field": "approach", - "editor": "input" - }, - { - "title": "Updates", - "field": "update_frequency", - "editor": "input" - }, - { - "title": "Interactive", - "field": "interactivity", - "editor": "input" - }, - { - "title": "Data Freshness", - "field": "data_freshness", - "editor": "input" - }, - { - "title": "Effort", - "field": "effort_to_update", - "editor": "input" + "type": "group", + "groupId": "right-content", + "groupCssClass": "right-content", + "elements": [ + "### 📈 Live Data Visualization", + { + "type": "chart", + "chartKey": "dataVisualizationChart" + }, + "", + "### 📊 Editable Data Source", + { + "type": "tabulator", + "variableId": "chartData", + "dataSourceName": "chartData", + "editable": true, + "tabulatorOptions": { + "layout": "fitColumns", + "maxHeight": "180px", + "columns": [ + { + "title": "Category", + "field": "category", + "editor": "input" + }, + { + "title": "Value", + "field": "value", + "editor": "number" + } + ] } - ] - } - }, - "", - "### ⚡ This slide proves the point - you just experienced it!" + } + ] + } ] }, { From 1f7394d81e51c5425941772943db79ecef85a8ed Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sun, 14 Sep 2025 05:07:26 +0000 Subject: [PATCH 4/5] Fix invalid group type elements and add schema validation to instructions Co-authored-by: danmarshall <11507384+danmarshall@users.noreply.github.com> --- .github/copilot-instructions.md | 7 ++ .../web-deploy/json/why-chartifact.idoc.json | 100 ++++++++---------- 2 files changed, 50 insertions(+), 57 deletions(-) diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md index af7a4149..ec52f43a 100644 --- a/.github/copilot-instructions.md +++ b/.github/copilot-instructions.md @@ -79,3 +79,10 @@ Chartifact consists of several interoperating modules: - There is a sandboxed runtime that securely renders documents available at https://microsoft.github.io/chartifact/view - The url above can accept a `load` parameter to specify the document to render, for example https://microsoft.github.io/chartifact/view/?load=https://raw.githubusercontent.com/microsoft/chartifact/562d086/packages/web-deploy/json/sales-dashboard.idoc.json - **ALWAYS provide a preview link when creating or modifying examples** - include the preview link in PR comments and descriptions automatically so examples can be tested immediately without being asked. + +## Schema Validation + +- **IMPORTANT**: All JSON documents must validate against the JSON schema at `docs/schema/idoc_v1.json` or conform to the TypeScript declaration at `docs/schema/idoc_v1.d.ts` +- Valid `PageElement` types are only: strings (markdown) or specific interactive elements (`chart`, `checkbox`, `dropdown`, `image`, `mermaid`, `presets`, `slider`, `tabulator`, `textbox`) +- **NO** `"type": "group"` elements are allowed within `elements` arrays - only use `ElementGroup` at the top level in the `groups` array +- Test JSON validity before committing changes diff --git a/packages/web-deploy/json/why-chartifact.idoc.json b/packages/web-deploy/json/why-chartifact.idoc.json index db4e2bee..8257ec12 100644 --- a/packages/web-deploy/json/why-chartifact.idoc.json +++ b/packages/web-deploy/json/why-chartifact.idoc.json @@ -11,9 +11,7 @@ "#slide3 { background: linear-gradient(135deg, #2980b9 0%, #2c3e50 100%); color: white; }", "#slide4 { background: linear-gradient(135deg, #27ae60 0%, #2980b9 100%); color: white; }", "#slide5 { background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%); color: white; }", - "#slide6 { background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%); color: white; justify-content: flex-start; display: grid; grid-template-columns: 1fr 1fr; grid-gap: 2em; align-items: start; min-width: 0; overflow: hidden; }", - "#slide6 .left-content { grid-column: 1; }", - "#slide6 .right-content { grid-column: 2; min-width: 0; overflow: hidden; }", + "#slide6 { background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%); color: white; justify-content: flex-start; }", "#slide7 { background: linear-gradient(135deg, #16a085 0%, #27ae60 100%); color: white; }", "#slide8 { background: linear-gradient(135deg, #2c3e50 0%, #8e44ad 100%); color: white; text-align: center; justify-content: center; }", "h1 { font-size: 2.5em; margin: 0.3em 0; font-weight: 300; line-height: 1.2; }", @@ -171,64 +169,52 @@ { "groupId": "slide6", "elements": [ + "## 📊 Stop Pasting Chart Images from Excel!", + "### Make them live charts from live data instead", + "", + "**The Problem:**", + "- Screenshots become stale immediately", + "- No interaction or exploration", + "- Manual updates required", + "- Data context lost", + "", + "**The Solution:**", + "- Live data connections", + "- Interactive exploration", + "- Automatic updates", + "- Rich context preserved", + "", + "### ⚡ Experience the difference below:", + "", + "### 📈 Live Data Visualization", { - "type": "group", - "groupId": "left-content", - "groupCssClass": "left-content", - "elements": [ - "## 📊 Stop Pasting Chart Images from Excel!", - "### Make them live charts from live data instead", - "", - "**The Problem:**", - "- Screenshots become stale immediately", - "- No interaction or exploration", - "- Manual updates required", - "- Data context lost", - "", - "**The Solution:**", - "- Live data connections", - "- Interactive exploration", - "- Automatic updates", - "- Rich context preserved", - "", - "### ⚡ Experience the difference on the right →" - ] + "type": "chart", + "chartKey": "dataVisualizationChart" }, + "", + "### 📊 Editable Data Source", + "**Try editing the values in the table below and watch the chart update in real-time!**", { - "type": "group", - "groupId": "right-content", - "groupCssClass": "right-content", - "elements": [ - "### 📈 Live Data Visualization", - { - "type": "chart", - "chartKey": "dataVisualizationChart" - }, - "", - "### 📊 Editable Data Source", - { - "type": "tabulator", - "variableId": "chartData", - "dataSourceName": "chartData", - "editable": true, - "tabulatorOptions": { - "layout": "fitColumns", - "maxHeight": "180px", - "columns": [ - { - "title": "Category", - "field": "category", - "editor": "input" - }, - { - "title": "Value", - "field": "value", - "editor": "number" - } - ] + "type": "tabulator", + "variableId": "chartData", + "dataSourceName": "chartData", + "editable": true, + "tabulatorOptions": { + "layout": "fitColumns", + "maxHeight": "180px", + "columns": [ + { + "title": "Category", + "field": "category", + "editor": "input" + }, + { + "title": "Value", + "field": "value", + "editor": "number" } - } - ] + ] + } } ] }, From 6ef1e60759036b422fcf4c58da7c35cff244f606 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sun, 14 Sep 2025 05:15:49 +0000 Subject: [PATCH 5/5] Fix Tabulator dataSourceName and variableId conflict in why-chartifact example Co-authored-by: danmarshall <11507384+danmarshall@users.noreply.github.com> --- packages/web-deploy/json/why-chartifact.idoc.json | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/packages/web-deploy/json/why-chartifact.idoc.json b/packages/web-deploy/json/why-chartifact.idoc.json index 8257ec12..8696d089 100644 --- a/packages/web-deploy/json/why-chartifact.idoc.json +++ b/packages/web-deploy/json/why-chartifact.idoc.json @@ -50,13 +50,10 @@ "initialValue": 2025 }, { - "variableId": "chartTableData", + "variableId": "editableChartData", "type": "object", "isArray": true, - "initialValue": [], - "calculation": { - "dataSourceNames": ["chartData"] - } + "initialValue": [] } ], "resources": { @@ -66,7 +63,7 @@ "width": 250, "height": 250, "data": { - "name": "chartTableData" + "name": "editableChartData" }, "mark": { "type": "arc", @@ -196,7 +193,7 @@ "**Try editing the values in the table below and watch the chart update in real-time!**", { "type": "tabulator", - "variableId": "chartData", + "variableId": "editableChartData", "dataSourceName": "chartData", "editable": true, "tabulatorOptions": {