Skip to content

Commit cbce9a0

Browse files
danmarshalldanmarshall
authored
Merge pull request #76 from microsoft/copilot/fix-c4263eed-656b-4c4f-9924-253d356164df
Add homepage link to VS Code README and create LLM prompt page for Chartifact creation
2 parents 878572a + 15a7376 commit cbce9a0

19 files changed

Lines changed: 350 additions & 40 deletions

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ C H A R T I F A C T
1111

1212
Chartifact is a low-code document format for creating interactive, data-driven pages such as reports, dashboards, and presentations. It travels like a document and works like a mini app. Designed for use with your LLM to produce a shareable artifact of your analytic conversations.
1313

14-
• [Examples](https://microsoft.github.io/chartifact/examples) • [Try with Copilot in VsCode](https://marketplace.visualstudio.com/items?itemName=msrvida.chartifact)
14+
• [Examples](https://microsoft.github.io/chartifact/examples) • [Try now with your LLM](https://microsoft.github.io/chartifact/prompt) • [Try with Copilot in VsCode](https://marketplace.visualstudio.com/items?itemName=msrvida.chartifact)
1515

1616
## Ecosystem
1717

‎docs/assets/chartifact-examples-json.zip‎

49.9 KB
Binary file not shown.

‎docs/assets/chartifact-examples-markdown.zip‎

35.4 KB
Binary file not shown.

‎docs/assets/chartifact-examples.zip‎

135 Bytes
Binary file not shown.

‎docs/assets/examples/examples.json.folder.json‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
{
2+
"$schema": "../../schema/folder_v1.json",
3+
"title": "Interactive documents",
4+
"docs": [
5+
{
6+
"title": "Why Chartifact",
7+
"description": "Discover the capabilities and benefits of Chartifact for creating interactive data documents.",
8+
"href": "json/why-chartifact.idoc.json"
9+
},
10+
{
11+
"title": "Sales Dashboard",
12+
"description": "A comprehensive sales dashboard with interactive charts and data visualization.",
13+
"href": "json/sales-dashboard.idoc.json"
14+
},
15+
{
16+
"title": "Sales Report",
17+
"description": "A detailed sales report with tabular data and analysis.",
18+
"href": "json/sales-report.idoc.json"
19+
},
20+
{
21+
"title": "Grocery List",
22+
"description": "An interactive grocery list demonstrating form controls and data management.",
23+
"href": "json/grocery-list.idoc.json"
24+
},
25+
{
26+
"title": "Mermaid Org Chart",
27+
"description": "An organizational chart created using Mermaid diagrams with dynamic data.",
28+
"href": "json/mermaid-org-chart.idoc.json"
29+
},
30+
{
31+
"title": "Habit Tracker",
32+
"description": "A minimal habit tracker with editable data and heatmap visualization.",
33+
"href": "json/habit-tracker.idoc.json"
34+
}
35+
]
36+
}

‎docs/assets/examples/features.json.folder.json‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
{
2+
"$schema": "../../schema/folder_v1.json",
3+
"title": "Core capabilities",
4+
"docs": [
5+
{
6+
"title": "Primer",
7+
"href": "./json/features/1.primer.idoc.json"
8+
},
9+
{
10+
"title": "Data Source: Inline JSON Data",
11+
"href": "json/features/2.1.inline-json-data.idoc.json"
12+
},
13+
{
14+
"title": "Data Source: CSV from URL",
15+
"href": "json/features/2.2.csv-from-url.idoc.json"
16+
},
17+
{
18+
"title": "Data Source: Dynamic URL Variables",
19+
"href": "json/features/2.3.dynamic-url-variables.idoc.json"
20+
},
21+
{
22+
"title": "Data Source: Inline CSV Data",
23+
"href": "json/features/2.4.inline-csv-data.idoc.json"
24+
},
25+
{
26+
"title": "Chart",
27+
"href": "json/features/3.chart.idoc.json"
28+
},
29+
{
30+
"title": "Table",
31+
"href": "json/features/4.table.idoc.json"
32+
},
33+
{
34+
"title": "Styling",
35+
"href": "json/features/5.styling.idoc.json"
36+
},
37+
{
38+
"title": "Data Transformations",
39+
"href": "json/features/6.data-transformations.idoc.json"
40+
},
41+
{
42+
"title": "Dynamic Dropdown",
43+
"href": "json/features/7.dropdown.idoc.json"
44+
},
45+
{
46+
"title": "Presets",
47+
"href": "json/features/8.presets.idoc.json"
48+
},
49+
{
50+
"title": "Mermaid",
51+
"href": "json/features/9.mermaid.idoc.json"
52+
},
53+
{
54+
"title": "Images",
55+
"href": "json/features/10.images.idoc.json"
56+
}
57+
]
58+
}

‎docs/dist/v1/chartifact-toolbar.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,11 @@
5757
margin-top: 0;
5858
}
5959

60+
.chartifact-toolbar .toolbar-mode {
61+
font-size: smaller;
62+
opacity: 0.8;
63+
}
64+
6065
/* Default: stack toolbar sections vertically */
6166
.chartifact-toolbar .toolbar-item {
6267
margin: 6px 0;

‎docs/dist/v1/chartifact.host.umd.js‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2576,6 +2576,8 @@ ${guardedJs}
25762576
if (setHash) {
25772577
setHashParam("page", docIndex + 1);
25782578
}
2579+
const mode = folder.docs[docIndex].href.endsWith(".idoc.md") ? "markdown" : "json";
2580+
host.toolbar.mode = mode;
25792581
host.toolbar.addChildren(/* @__PURE__ */ createElement(FolderDisplay, { ...{ ...props, docIndex } }));
25802582
const pageSelect = document.querySelector("#pageSelect");
25812583
if (pageSelect) {
@@ -3283,9 +3285,15 @@ ${htmlJsonJs}
32833285
createElement(
32843286
"div",
32853287
{ className: "toolbar-item" },
3286-
createElement("button", { type: "button", id: "restart", style: { display: restartDisplay }, onClick: restartClick }, "start over"),
3287-
createElement("button", { type: "button", id: "tweak", style: { display: tweakDisplay }, onClick: tweakClick }, "view source"),
3288-
createElement("button", { type: "button", id: "download", style: { display: downloadDisplay }, onClick: downloadClick }, "download")
3288+
createElement(
3289+
"span",
3290+
{ className: "toolbar-mode" },
3291+
displayMode,
3292+
" mode "
3293+
),
3294+
createElement("button", { type: "button", style: { display: restartDisplay }, onClick: restartClick }, "start over"),
3295+
createElement("button", { type: "button", style: { display: tweakDisplay }, onClick: tweakClick }, "view source"),
3296+
createElement("button", { type: "button", style: { display: downloadDisplay }, onClick: downloadClick, id: "download" }, "download")
32893297
),
32903298
createElement(
32913299
"div",
@@ -3338,7 +3346,7 @@ ${htmlJsonJs}
33383346
throw new Error("Toolbar element not found");
33393347
}
33403348
this.props = {
3341-
mode: this.mode,
3349+
mode: null,
33423350
restartClick: () => window.location.reload(),
33433351
tweakClick: () => {
33443352
this.options.textarea.style.display = this.options.textarea.style.display === "none" ? "" : "none";
@@ -3405,7 +3413,7 @@ ${htmlJsonJs}
34053413
this.render();
34063414
}
34073415
render() {
3408-
mount(ToolbarElement(this.props), this.toolbarElement);
3416+
mount(ToolbarElement({ ...this.props, mode: this.mode }), this.toolbarElement);
34093417
this.downloadButton = this.toolbarElement.querySelector("#download");
34103418
this.downloadPopup = this.toolbarElement.querySelector("#downloadPopup");
34113419
}

‎docs/dist/v1/chartifact.toolbar.umd.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -313,7 +313,7 @@ ${htmlJsonJs}
313313
const { mode, restartClick, tweakClick, downloadClick, restartDisplay, tweakDisplay, downloadDisplay, downloadSource, downloadHtml, children } = props;
314314
const { home, target } = window.location.hostname === "localhost" ? { home: "/", target: "_self" } : { home: "https://microsoft.github.io/", target: "_blank" };
315315
const displayMode = mode === "json" ? "json" : "markdown";
316-
return /* @__PURE__ */ createElement("div", { className: "toolbar-group", style: { backgroundColor: "inherit" } }, /* @__PURE__ */ createElement("div", { className: "toolbar-item" }, /* @__PURE__ */ createElement("a", { href: `${home}chartifact/`, target }, "Chartifact"), " viewer"), /* @__PURE__ */ createElement("div", { className: "toolbar-item", style: { display: children ? "" : "none" } }, children), /* @__PURE__ */ createElement("div", { className: "toolbar-item" }, /* @__PURE__ */ createElement("button", { type: "button", id: "restart", style: { display: restartDisplay }, onClick: restartClick }, "start over"), /* @__PURE__ */ createElement("button", { type: "button", id: "tweak", style: { display: tweakDisplay }, onClick: tweakClick }, "view source"), /* @__PURE__ */ createElement("button", { type: "button", id: "download", style: { display: downloadDisplay }, onClick: downloadClick }, "download")), /* @__PURE__ */ createElement("div", { id: "downloadPopup", style: {
316+
return /* @__PURE__ */ createElement("div", { className: "toolbar-group", style: { backgroundColor: "inherit" } }, /* @__PURE__ */ createElement("div", { className: "toolbar-item" }, /* @__PURE__ */ createElement("a", { href: `${home}chartifact/`, target }, "Chartifact"), " viewer"), /* @__PURE__ */ createElement("div", { className: "toolbar-item", style: { display: children ? "" : "none" } }, children), /* @__PURE__ */ createElement("div", { className: "toolbar-item" }, /* @__PURE__ */ createElement("span", { className: "toolbar-mode" }, displayMode, " mode "), /* @__PURE__ */ createElement("button", { type: "button", style: { display: restartDisplay }, onClick: restartClick }, "start over"), /* @__PURE__ */ createElement("button", { type: "button", style: { display: tweakDisplay }, onClick: tweakClick }, "view source"), /* @__PURE__ */ createElement("button", { type: "button", style: { display: downloadDisplay }, onClick: downloadClick, id: "download" }, "download")), /* @__PURE__ */ createElement("div", { id: "downloadPopup", style: {
317317
position: "absolute",
318318
display: "none",
319319
padding: "12px 16px",
@@ -338,7 +338,7 @@ ${htmlJsonJs}
338338
throw new Error("Toolbar element not found");
339339
}
340340
this.props = {
341-
mode: this.mode,
341+
mode: null,
342342
restartClick: () => window.location.reload(),
343343
tweakClick: () => {
344344
this.options.textarea.style.display = this.options.textarea.style.display === "none" ? "" : "none";
@@ -403,7 +403,7 @@ ${htmlJsonJs}
403403
this.render();
404404
}
405405
render() {
406-
mount(ToolbarElement(this.props), this.toolbarElement);
406+
mount(ToolbarElement({ ...this.props, mode: this.mode }), this.toolbarElement);
407407
this.downloadButton = this.toolbarElement.querySelector("#download");
408408
this.downloadPopup = this.toolbarElement.querySelector("#downloadPopup");
409409
}

‎docs/examples-json.html‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
---
2+
layout: default
3+
title: Chartifact Examples
4+
---
5+
<a href="/chartifact/">Chartifact home</a>
6+
<a id="github-repo" href="https://github.com/microsoft/chartifact">GitHub Repository</a>
7+
8+
<h1>Chartifact Examples (json format)</h1>
9+
10+
<p>Explore these interactive documents to see what's possible with Chartifact. <a href="./prompt">Want to create your own? Use AI to get started!</a></p>
11+
12+
<h2>Interactive documents</h2>
13+
<a href="/chartifact/view?load=../assets/examples/examples.json.folder.json">view all</a>
14+
<ul>
15+
<li><a href="/chartifact/view/?load=../assets/examples/json/why-chartifact.idoc.json">Why Chartifact</a>: Discover the capabilities and benefits of Chartifact for creating interactive data documents.</li>
16+
<li><a href="/chartifact/view/?load=../assets/examples/json/sales-dashboard.idoc.json">Sales Dashboard</a>: A comprehensive sales dashboard with interactive charts and data visualization.</li>
17+
<li><a href="/chartifact/view/?load=../assets/examples/json/sales-report.idoc.json">Sales Report</a>: A detailed sales report with tabular data and analysis.</li>
18+
<li><a href="/chartifact/view/?load=../assets/examples/json/grocery-list.idoc.json">Grocery List</a>: An interactive grocery list demonstrating form controls and data management.</li>
19+
<li><a href="/chartifact/view/?load=../assets/examples/json/mermaid-org-chart.idoc.json">Mermaid Org Chart</a>: An organizational chart created using Mermaid diagrams with dynamic data.</li>
20+
<li><a href="/chartifact/view/?load=../assets/examples/json/habit-tracker.idoc.json">Habit Tracker</a>: A minimal habit tracker with editable data and heatmap visualization.</li>
21+
</ul>
22+
<h2>Core capabilities</h2>
23+
<a href="/chartifact/view?load=../assets/examples/features.json.folder.json">view all</a>
24+
<ul>
25+
<li><a href="/chartifact/view/?load=../assets/examples/./json/features/1.primer.idoc.json">Primer</a></li>
26+
<li><a href="/chartifact/view/?load=../assets/examples/json/features/2.1.inline-json-data.idoc.json">Data Source: Inline JSON Data</a></li>
27+
<li><a href="/chartifact/view/?load=../assets/examples/json/features/2.2.csv-from-url.idoc.json">Data Source: CSV from URL</a></li>
28+
<li><a href="/chartifact/view/?load=../assets/examples/json/features/2.3.dynamic-url-variables.idoc.json">Data Source: Dynamic URL Variables</a></li>
29+
<li><a href="/chartifact/view/?load=../assets/examples/json/features/2.4.inline-csv-data.idoc.json">Data Source: Inline CSV Data</a></li>
30+
<li><a href="/chartifact/view/?load=../assets/examples/json/features/3.chart.idoc.json">Chart</a></li>
31+
<li><a href="/chartifact/view/?load=../assets/examples/json/features/4.table.idoc.json">Table</a></li>
32+
<li><a href="/chartifact/view/?load=../assets/examples/json/features/5.styling.idoc.json">Styling</a></li>
33+
<li><a href="/chartifact/view/?load=../assets/examples/json/features/6.data-transformations.idoc.json">Data Transformations</a></li>
34+
<li><a href="/chartifact/view/?load=../assets/examples/json/features/7.dropdown.idoc.json">Dynamic Dropdown</a></li>
35+
<li><a href="/chartifact/view/?load=../assets/examples/json/features/8.presets.idoc.json">Presets</a></li>
36+
<li><a href="/chartifact/view/?load=../assets/examples/json/features/9.mermaid.idoc.json">Mermaid</a></li>
37+
<li><a href="/chartifact/view/?load=../assets/examples/json/features/10.images.idoc.json">Images</a></li>
38+
</ul>
39+
40+
<h2>Downloads</h2>
41+
<ul>
42+
<li><a href="/chartifact/assets/chartifact-examples.zip" download>Download All Examples (ZIP)</a></li>
43+
<li><a href="/chartifact/assets/chartifact-markdown-examples.zip" download>Download Markdown Only (ZIP)</a></li>
44+
<li><a href="/chartifact/assets/chartifact-json-examples.zip" download>Download JSON + Schema (ZIP)</a></li>
45+
</ul>
46+
47+
<p>Want to see Markdown examples? <a href="/chartifact/examples.html">Click here for Markdown format examples</a></p>
48+
49+
</body>

0 commit comments

Comments
 (0)