diff --git a/docs/assets/examples/features-json/chart.idoc.json b/docs/assets/examples/features-json/chart.idoc.json deleted file mode 100644 index 39d9d3ef..00000000 --- a/docs/assets/examples/features-json/chart.idoc.json +++ /dev/null @@ -1,59 +0,0 @@ -{ - "$schema": "../../../schema/idoc_v1.json", - "title": "Feature: Chart", - "dataLoaders": [ - { - "dataSourceName": "chartData", - "type": "inline", - "format": "json", - "content": [ - {"category": "A", "value": 20}, - {"category": "B", "value": 34}, - {"category": "C", "value": 55}, - {"category": "D", "value": 40}, - {"category": "E", "value": 67} - ] - } - ], - "groups": [ - { - "groupId": "main", - "elements": [ - "## Chart\nUse charts for data visualizations with Vega-Lite specifications.", - { - "type": "chart", - "chart": { - "chartIntent": "Simple bar chart showing values by category", - "chartTemplateKey": "bar", - "dataSourceBase": { - "dataSourceName": "chartData" - }, - "spec": { - "$schema": "https://vega.github.io/schema/vega-lite/v6.json", - "data": { - "name": "chartData" - }, - "mark": "bar", - "encoding": { - "x": { - "field": "category", - "type": "nominal", - "title": "Category" - }, - "y": { - "field": "value", - "type": "quantitative", - "title": "Value" - }, - "color": { - "field": "category", - "type": "nominal" - } - } - } - } - } - ] - } - ] -} diff --git a/docs/assets/examples/features-markdown/google-fonts-demo.idoc.md b/docs/assets/examples/features-markdown/google-fonts-demo.idoc.md deleted file mode 100644 index f428b6c4..00000000 --- a/docs/assets/examples/features-markdown/google-fonts-demo.idoc.md +++ /dev/null @@ -1,62 +0,0 @@ -# Google Fonts Demo - -This document demonstrates the Google Fonts plugin with cascading font behavior and semantic mapping. - -```json google-fonts -{ - "googleFontsUrl": "https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Source+Code+Pro:wght@400;600&family=Inter:wght@300;400;500&family=Roboto+Slab:wght@400;700&display=swap", - "mapping": { - "body": "Inter", - "hero": "Playfair Display", - "headings": "Roboto Slab", - "code": "Source Code Pro", - "table": "Source Code Pro" - }, - "sizing": { - "body": 1, - "hero": 2.5, - "headings": 1.5, - "code": 0.8, - "table": 0.9 - } -} -``` - -# Hero Headline Level 1 -## Hero Headline Level 2 -### Hero Headline Level 3 - -#### Regular Heading Level 4 -##### Regular Heading Level 5 -###### Regular Heading Level 6 - -This is regular paragraph text that demonstrates the body font. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - -- This is a bulleted list item -- Another list item -- Third item to show consistency - -1. Numbered list item one -2. Second numbered item -3. Third numbered item - -**Bold text** and *italic text* also inherit the body font. - -Here's some `inline code` and a code block: - -```javascript -// Code blocks use the code font mapping -function example() { - console.log("Hello, World!"); -} -``` - -## Tables - -| Column 1 | Column 2 | Column 3 | -|----------|----------|----------| -| Cell 1 | Cell 2 | Cell 3 | -| Data A | Data B | Data C | -| Numbers | 123.45 | 678.90 | - -This content lets you see how different fonts apply to different semantic elements without any distracting references to the font names. \ No newline at end of file diff --git a/docs/assets/examples/grocery-list.idoc.json b/docs/assets/examples/grocery-list.idoc.json deleted file mode 100644 index 7e1536e1..00000000 --- a/docs/assets/examples/grocery-list.idoc.json +++ /dev/null @@ -1,131 +0,0 @@ -{ - "$schema": "../../schema/idoc_v1.json", - "title": "Select Items to Buy", - "dataLoaders": [ - { - "dataSourceName": "itemsData", - "type": "inline", - "format": "json", - "content": [ - {"item": "Apples", "category": "Fruits", "price": 1.20}, - {"item": "Bananas", "category": "Fruits", "price": 0.50}, - {"item": "Oranges", "category": "Fruits", "price": 0.80}, - {"item": "Strawberries", "category": "Fruits", "price": 2.50}, - {"item": "Grapes", "category": "Fruits", "price": 2.20}, - {"item": "Bread", "category": "Bakery", "price": 2.00}, - {"item": "Bagels", "category": "Bakery", "price": 1.80}, - {"item": "Croissant", "category": "Bakery", "price": 2.30}, - {"item": "Milk", "category": "Dairy", "price": 1.50}, - {"item": "Cheese", "category": "Dairy", "price": 3.00}, - {"item": "Yogurt", "category": "Dairy", "price": 1.10}, - {"item": "Eggs", "category": "Dairy", "price": 2.40}, - {"item": "Chicken Breast", "category": "Meat", "price": 5.00}, - {"item": "Ground Beef", "category": "Meat", "price": 4.50}, - {"item": "Salmon", "category": "Meat", "price": 7.00}, - {"item": "Carrots", "category": "Vegetables", "price": 0.90}, - {"item": "Broccoli", "category": "Vegetables", "price": 1.30}, - {"item": "Lettuce", "category": "Vegetables", "price": 1.00}, - {"item": "Tomatoes", "category": "Vegetables", "price": 1.20}, - {"item": "Potatoes", "category": "Vegetables", "price": 0.70}, - {"item": "Pasta", "category": "Pantry", "price": 1.10}, - {"item": "Rice", "category": "Pantry", "price": 1.00}, - {"item": "Cereal", "category": "Pantry", "price": 2.80}, - {"item": "Olive Oil", "category": "Pantry", "price": 4.00} - ] - } - ], - "variables": [ - { - "variableId": "itemsData_selected_sum_price", - "type": "object", - "isArray": true, - "initialValue": [], - "calculation": { - "dependsOn": [ - "itemsData_selected" - ], - "dataFrameTransformations": [ - { - "type": "aggregate", - "ops": ["sum"], - "fields": ["price"], - "as": ["sum_price"] - } - ] - } - }, - { - "variableId": "total", - "type": "number", - "initialValue": 0, - "calculation": { - "vegaExpression": "format(data('itemsData_selected_sum_price')[0] ? data('itemsData_selected_sum_price')[0].sum_price : 0, ',.2f')" - } - } - ], - "groups": [ - { - "groupId": "main", - "elements": [ - "## Select the items you want to buy\n", - { - "type": "table", - "variableId": "itemsData_selected", - "dataSourceName": "itemsData", - "tabulatorOptions": { - "autoColumns": true, - "layout": "fitColumns", - "minHeight": "200px", - "maxHeight": "200px", - "selectableRows": true, - "rowHeader": { - "formatter": "rowSelection", - "titleFormatter": "rowSelection", - "headerSort": false, - "headerHozAlign": "center", - "hozAlign": "center", - "width": 40 - } - } - }, - "## Total Price\n\n${{total}}\n\n### Categories", - { - "type": "chart", - "chart": { - "chartIntent": "Show category distribution of selected items", - "chartTemplateKey": "bar", - "dataSourceBase": { - "dataSourceName": "itemsData_selected" - }, - "spec": { - "$schema": "https://vega.github.io/schema/vega-lite/v6.json", - "data": { - "name": "itemsData_selected" - }, - "mark": "bar", - "encoding": { - "x": { - "field": "category", - "type": "nominal", - "title": "Category" - }, - "y": { - "aggregate": "count", - "type": "quantitative", - "title": "Number of Items" - }, - "color": { - "field": "category", - "type": "nominal", - "legend": { - "title": "Category" - } - } - } - } - } - } - ] - } - ] -} \ No newline at end of file diff --git a/docs/assets/examples/json/features/chart.idoc.json b/docs/assets/examples/json/features/chart.idoc.json new file mode 100644 index 00000000..1f700347 --- /dev/null +++ b/docs/assets/examples/json/features/chart.idoc.json @@ -0,0 +1,72 @@ +{ + "$schema": "https://microsoft.github.io/chartifact/schema/idoc_v1.json", + "title": "Feature: Chart", + "dataLoaders": [ + { + "dataSourceName": "chartData", + "type": "inline", + "format": "json", + "content": [ + { + "category": "A", + "value": 20 + }, + { + "category": "B", + "value": 34 + }, + { + "category": "C", + "value": 55 + }, + { + "category": "D", + "value": 40 + }, + { + "category": "E", + "value": 67 + } + ] + } + ], + "groups": [ + { + "groupId": "main", + "elements": [ + "## Chart\nUse charts for data visualizations with Vega-Lite specifications.", + { + "type": "chart", + "chartKey": "1" + } + ] + } + ], + "resources": { + "charts": { + "1": { + "$schema": "https://vega.github.io/schema/vega-lite/v6.json", + "data": { + "name": "chartData" + }, + "mark": "bar", + "encoding": { + "x": { + "field": "category", + "type": "nominal", + "title": "Category" + }, + "y": { + "field": "value", + "type": "quantitative", + "title": "Value" + }, + "color": { + "field": "category", + "type": "nominal" + } + } + } + } + } +} \ No newline at end of file diff --git a/docs/assets/examples/json/features/data-sources.idoc.json b/docs/assets/examples/json/features/data-sources.idoc.json new file mode 100644 index 00000000..f1f31157 --- /dev/null +++ b/docs/assets/examples/json/features/data-sources.idoc.json @@ -0,0 +1,201 @@ +{ + "$schema": "https://microsoft.github.io/chartifact/schema/idoc_v1.json", + "title": "Feature: Data Sources", + "dataLoaders": [ + { + "dataSourceName": "jsonData", + "type": "inline", + "format": "json", + "content": [ + { + "item": "Stapler", + "category": "Office Tools", + "price": 12.99, + "inStock": true, + "quantity": 25 + }, + { + "item": "Printer Paper", + "category": "Paper", + "price": 8.5, + "inStock": true, + "quantity": 150 + }, + { + "item": "Blue Pens", + "category": "Writing", + "price": 3.25, + "inStock": false, + "quantity": 0 + }, + { + "item": "Notebooks", + "category": "Paper", + "price": 5.75, + "inStock": true, + "quantity": 40 + }, + { + "item": "Desk Lamp", + "category": "Furniture", + "price": 29.99, + "inStock": true, + "quantity": 8 + }, + { + "item": "Paper Clips", + "category": "Office Tools", + "price": 2.1, + "inStock": true, + "quantity": 200 + }, + { + "item": "Whiteboard Markers", + "category": "Writing", + "price": 7.8, + "inStock": false, + "quantity": 0 + }, + { + "item": "File Folders", + "category": "Storage", + "price": 4.45, + "inStock": true, + "quantity": 75 + }, + { + "item": "Ergonomic Chair", + "category": "Furniture", + "price": 189.99, + "inStock": true, + "quantity": 3 + }, + { + "item": "Post-it Notes", + "category": "Paper", + "price": 6.25, + "inStock": true, + "quantity": 120 + }, + { + "item": "Hole Punch", + "category": "Office Tools", + "price": 15.5, + "inStock": false, + "quantity": 0 + }, + { + "item": "Scissors", + "category": "Office Tools", + "price": 9.75, + "inStock": true, + "quantity": 18 + } + ] + }, + { + "dataSourceName": "csvData", + "type": "url", + "format": "csv", + "url": "https://vega.github.io/editor/data/stocks.csv" + }, + { + "dataSourceName": "jsonUrlVariable", + "type": "url", + "format": "json", + "url": "{{json_url}}" + }, + { + "dataSourceName": "inlineCsvData", + "type": "inline", + "format": "csv", + "content": "item,price\nStapler,12.99\nPen,1.25\nLamp,29.99" + } + ], + "variables": [ + { + "variableId": "json_url", + "type": "string", + "initialValue": "https://vega.github.io/editor/data/barley.json" + } + ], + "groups": [ + { + "groupId": "json_data", + "elements": [ + "## JSON Data", + "Load data from a static JSON array.", + { + "type": "table", + "dataSourceName": "jsonData", + "variableId": "jsonTable", + "tabulatorOptions": { + "autoColumns": true, + "layout": "fitColumns", + "maxHeight": "100px" + } + } + ] + }, + { + "groupId": "csv_url", + "elements": [ + "## CSV from URL", + "Load CSV data from a fixed URL.", + { + "type": "table", + "dataSourceName": "csvData", + "variableId": "csvTable", + "tabulatorOptions": { + "autoColumns": true, + "layout": "fitColumns", + "maxHeight": "200px" + } + } + ] + }, + { + "groupId": "csv_url_variable", + "elements": [ + "## Complete URL Variable (JSON)", + "You can use a single variable for the entire JSON URL. No URL encoding is applied to the value.", + "Note: You can also construct URLs from multiple segments (e.g., `{{host}}/{{path}}`). In that case, each segment is encoded using `encodeURIComponent`.", + { + "type": "dropdown", + "variableId": "json_url", + "options": [ + "https://vega.github.io/editor/data/barley.json", + "https://vega.github.io/editor/data/cars.json" + ] + }, + { + "type": "table", + "dataSourceName": "jsonUrlVariable", + "variableId": "jsonUrlTable", + "tabulatorOptions": { + "autoColumns": true, + "layout": "fitColumns", + "maxHeight": "200px" + } + } + ] + }, + { + "groupId": "inline_csv", + "elements": [ + "## Inline CSV Data", + "You can provide CSV data directly as a single string.", + { + "type": "table", + "dataSourceName": "inlineCsvData", + "variableId": "inlineCsvTable", + "tabulatorOptions": { + "autoColumns": true, + "layout": "fitColumns", + "maxHeight": "100px" + } + } + ] + } + ] +} \ No newline at end of file diff --git a/docs/assets/examples/json/features/data-transformations.idoc.json b/docs/assets/examples/json/features/data-transformations.idoc.json new file mode 100644 index 00000000..d3beb8e2 --- /dev/null +++ b/docs/assets/examples/json/features/data-transformations.idoc.json @@ -0,0 +1,125 @@ +{ + "$schema": "https://microsoft.github.io/chartifact/schema/idoc_v1.json", + "title": "Feature: Data Transformations", + "dataLoaders": [ + { + "dataSourceName": "rawData", + "type": "inline", + "format": "json", + "content": [ + { + "name": "Product A", + "category": "Electronics", + "price": 299, + "inStock": true + }, + { + "name": "Product B", + "category": "Electronics", + "price": 199, + "inStock": false + }, + { + "name": "Product C", + "category": "Clothing", + "price": 49, + "inStock": true + }, + { + "name": "Product D", + "category": "Clothing", + "price": 79, + "inStock": true + }, + { + "name": "Product E", + "category": "Books", + "price": 15, + "inStock": true + } + ], + "dataFrameTransformations": [ + { + "type": "filter", + "expr": "datum.inStock && datum.price <= maxPrice" + } + ] + } + ], + "variables": [ + { + "variableId": "maxPrice", + "type": "number", + "initialValue": 100 + }, + { + "variableId": "categoryStats", + "type": "object", + "isArray": true, + "initialValue": [], + "calculation": { + "dependsOn": [ + "rawData" + ], + "dataFrameTransformations": [ + { + "type": "aggregate", + "groupby": [ + "category" + ], + "ops": [ + "count", + "mean" + ], + "fields": [ + "name", + "price" + ], + "as": [ + "count", + "avgPrice" + ] + } + ] + } + } + ], + "groups": [ + { + "groupId": "main", + "elements": [ + "## Data Transformations\nUse data transformations to filter, aggregate, and manipulate data.", + { + "type": "slider", + "variableId": "maxPrice", + "label": "Maximum price filter:", + "min": 0, + "max": 500, + "step": 10 + }, + "### Filtered Products (in stock, price ≤ ${{maxPrice}})", + { + "type": "table", + "dataSourceName": "rawData", + "variableId": "filteredTable", + "tabulatorOptions": { + "autoColumns": true, + "layout": "fitColumns", + "maxHeight": "200px" + } + }, + "### Category Statistics", + { + "type": "table", + "dataSourceName": "categoryStats", + "variableId": "categoryStatsTable", + "tabulatorOptions": { + "autoColumns": true, + "layout": "fitColumns", + "maxHeight": "150px" + } + } + ] + } + ] +} \ No newline at end of file diff --git a/docs/assets/examples/json/features/data-url.idoc.json b/docs/assets/examples/json/features/data-url.idoc.json new file mode 100644 index 00000000..5f0c2604 --- /dev/null +++ b/docs/assets/examples/json/features/data-url.idoc.json @@ -0,0 +1,75 @@ +{ + "$schema": "https://microsoft.github.io/chartifact/schema/idoc_v1.json", + "title": "Feature: Data Url", + "variables": [ + { + "variableId": "anything", + "type": "string", + "initialValue": "abc" + } + ], + "dataLoaders": [ + { + "dataSourceName": "jsonData", + "type": "url", + "url": "http://127.0.0.1:8000/{{anything}}.json" + } + ], + "groups": [ + { + "groupId": "main", + "elements": [ + "## Data Sources\nLoad data from JSON, CSV, TSV, or URLs with optional transformations.", + "### JSON Data", + { + "type": "dropdown", + "variableId": "anything", + "options": [ + "abc", + "def" + ] + }, + { + "type": "chart", + "chartKey": "1" + }, + { + "type": "table", + "dataSourceName": "jsonData", + "variableId": "jsonTable", + "tabulatorOptions": { + "autoColumns": true, + "layout": "fitColumns", + "maxHeight": "100px" + } + } + ] + } + ], + "resources": { + "charts": { + "1": { + "$schema": "https://vega.github.io/schema/vega-lite/v6.json", + "data": { + "name": "jsonData" + }, + "mark": "bar", + "encoding": { + "x": { + "field": "category" + }, + "y": { + "field": "value", + "type": "quantitative" + }, + "xOffset": { + "field": "group" + }, + "color": { + "field": "group" + } + } + } + } + } +} \ No newline at end of file diff --git a/docs/assets/examples/json/features/dropdown.idoc.json b/docs/assets/examples/json/features/dropdown.idoc.json new file mode 100644 index 00000000..77185655 --- /dev/null +++ b/docs/assets/examples/json/features/dropdown.idoc.json @@ -0,0 +1,81 @@ +{ + "$schema": "https://microsoft.github.io/chartifact/schema/idoc_v1.json", + "title": "Feature: Dropdown", + "dataLoaders": [ + { + "dataSourceName": "productData", + "type": "inline", + "format": "json", + "content": [ + { + "name": "Laptop Pro", + "category": "Electronics", + "price": 1299 + }, + { + "name": "Wireless Mouse", + "category": "Electronics", + "price": 49 + }, + { + "name": "Office Chair", + "category": "Furniture", + "price": 299 + }, + { + "name": "Standing Desk", + "category": "Furniture", + "price": 599 + }, + { + "name": "Coffee Mug", + "category": "Kitchen", + "price": 15 + }, + { + "name": "Water Bottle", + "category": "Kitchen", + "price": 25 + } + ] + } + ], + "variables": [ + { + "variableId": "selectedProduct", + "type": "string", + "initialValue": "Laptop Pro" + } + ], + "groups": [ + { + "groupId": "main", + "elements": [ + "## Dropdown\nUse dropdowns with data-driven options from data sources.", + "### Data-Driven Options", + "Dropdown options populated from data using `dynamicOptions`:", + { + "type": "dropdown", + "variableId": "selectedProduct", + "label": "Choose product:", + "dynamicOptions": { + "dataSourceName": "productData", + "fieldName": "name" + } + }, + "Selected: **{{selectedProduct}}**", + "### Product Data", + { + "type": "table", + "dataSourceName": "productData", + "variableId": "productTable", + "tabulatorOptions": { + "autoColumns": true, + "layout": "fitColumns", + "maxHeight": "200px" + } + } + ] + } + ] +} \ No newline at end of file diff --git a/docs/assets/examples/json/features/image.idoc.json b/docs/assets/examples/json/features/image.idoc.json new file mode 100644 index 00000000..0d0727f4 --- /dev/null +++ b/docs/assets/examples/json/features/image.idoc.json @@ -0,0 +1,94 @@ +{ + "$schema": "https://microsoft.github.io/chartifact/schema/idoc_v1.json", + "title": "Feature: Image", + "variables": [ + { + "variableId": "img_height", + "type": "number", + "initialValue": "300" + }, + { + "variableId": "img_width", + "type": "number", + "initialValue": "400" + }, + { + "variableId": "img_url", + "type": "string", + "initialValue": "https://picsum.photos/400/300" + } + ], + "groups": [ + { + "groupId": "server_generated", + "elements": [ + "## Server-Generated Images", + "Images are particularly powerful for server-side generated visualizations:", + "- **Python plots** - matplotlib, seaborn, plotly exports", + "- **R visualizations** - ggplot2, base R graphics", + "- **Dynamic charts** - generated based on current data", + "- **Custom graphics** - any server-side image generation", + "", + "Example server endpoint: `/api/regressionplot?target={{targetVariable}}&model={{modelType}}&theme={{colorTheme}}`", + "", + "Images support dynamic URLs with query parameters and can be regenerated in real-time.", + "*samples below provided by [picsum.photos](https://picsum.photos/)*" + ] + }, + { + "groupId": "complete_url", + "elements": [ + "## Complete URL Variable", + "You can use a single variable for the entire image URL. No URL encoding is applied to the value.", + { + "type": "dropdown", + "variableId": "img_url", + "options": [ + "https://picsum.photos/100/100", + "https://picsum.photos/200/200", + "https://picsum.photos/300/300", + "https://picsum.photos/400/300", + "https://picsum.photos/400/400" + ] + }, + { + "type": "image", + "alt": "Complete URL variable example", + "url": "{{img_url}}" + } + ] + }, + { + "groupId": "url_segments", + "elements": [ + "## URL Segments", + "You can construct image URLs from multiple variables. Each segment is encoded using `encodeURIComponent`.", + { + "type": "dropdown", + "variableId": "img_height", + "options": [ + "100", + "200", + "300", + "400" + ] + }, + { + "type": "dropdown", + "variableId": "img_width", + "options": [ + "100", + "200", + "300", + "400" + ] + }, + { + "type": "image", + "alt": "URL segments example", + "url": "https://picsum.photos/{{img_width}}/{{img_height}}" + } + ] + } + ] +} \ No newline at end of file diff --git a/docs/assets/examples/json/features/input-controls.idoc.json b/docs/assets/examples/json/features/input-controls.idoc.json new file mode 100644 index 00000000..4638273b --- /dev/null +++ b/docs/assets/examples/json/features/input-controls.idoc.json @@ -0,0 +1,95 @@ +{ + "$schema": "https://microsoft.github.io/chartifact/schema/idoc_v1.json", + "title": "Feature: Input Controls", + "variables": [ + { + "variableId": "isEnabled", + "type": "boolean", + "initialValue": true + }, + { + "variableId": "userName", + "type": "string", + "initialValue": "John Doe" + }, + { + "variableId": "temperature", + "type": "number", + "initialValue": 20 + }, + { + "variableId": "opacity", + "type": "number", + "initialValue": 0.5 + }, + { + "variableId": "selectedColor", + "type": "string", + "initialValue": "blue" + }, + { + "variableId": "selectedItems", + "type": "string", + "isArray": true, + "initialValue": [ + "apple", + "banana" + ] + } + ], + "groups": [ + { + "groupId": "main", + "elements": [ + "## Input Controls", + "Hello **{{userName}}**! Feature enabled: **{{isEnabled}}**. Temperature: **{{temperature}}°C**. Color: **{{selectedColor}}**. Items: **{{selectedItems}}**.", + "### Checkbox", + { + "type": "checkbox", + "variableId": "isEnabled", + "label": "Enable feature" + }, + "### Textbox", + { + "type": "textbox", + "variableId": "userName", + "label": "Name:" + }, + "### Slider", + { + "type": "slider", + "variableId": "temperature", + "label": "Temperature:", + "min": -10, + "max": 40, + "step": 1 + }, + "### Dropdown", + { + "type": "dropdown", + "variableId": "selectedColor", + "label": "Color:", + "options": [ + "red", + "green", + "blue", + "yellow" + ] + }, + { + "type": "dropdown", + "variableId": "selectedItems", + "label": "Items:", + "options": [ + "apple", + "banana", + "orange", + "grape" + ], + "multiple": true, + "size": 3 + } + ] + } + ] +} \ No newline at end of file diff --git a/docs/assets/examples/json/features/markdown.idoc.json b/docs/assets/examples/json/features/markdown.idoc.json new file mode 100644 index 00000000..4028ba1e --- /dev/null +++ b/docs/assets/examples/json/features/markdown.idoc.json @@ -0,0 +1,17 @@ +{ + "$schema": "https://microsoft.github.io/chartifact/schema/idoc_v1.json", + "title": "Feature: Markdown", + "groups": [ + { + "groupId": "main", + "elements": [ + "## Markdown\nUse markdown to format text, create headings, lists, and more. HTML tags are not allowed.", + "### Text Formatting", + "**Bold**, *italic*, `code` text, and [links](https://microsoft.com).", + "### Lists", + "1. Numbered lists\n2. Work great", + "- Bullet points\n- Also work" + ] + } + ] +} \ No newline at end of file diff --git a/docs/assets/examples/json/features/presets.idoc.json b/docs/assets/examples/json/features/presets.idoc.json new file mode 100644 index 00000000..974090c2 --- /dev/null +++ b/docs/assets/examples/json/features/presets.idoc.json @@ -0,0 +1,70 @@ +{ + "$schema": "https://microsoft.github.io/chartifact/schema/idoc_v1.json", + "title": "Feature: Presets", + "variables": [ + { + "variableId": "size", + "type": "number", + "initialValue": 5 + }, + { + "variableId": "color", + "type": "string", + "initialValue": "blue" + } + ], + "groups": [ + { + "groupId": "main", + "elements": [ + "## Presets\nUse presets to provide predefined state configurations.", + { + "type": "presets", + "presets": [ + { + "name": "Small & Red", + "state": { + "size": 2, + "color": "red" + } + }, + { + "name": "Large & Green", + "state": { + "size": 10, + "color": "green" + } + }, + { + "name": "Medium & Gray", + "state": { + "size": 7, + "color": "gray" + } + } + ] + }, + { + "type": "slider", + "variableId": "size", + "label": "Size:", + "min": 1, + "max": 15, + "step": 1 + }, + { + "type": "dropdown", + "variableId": "color", + "label": "Color:", + "options": [ + "red", + "green", + "blue", + "gray" + ] + }, + "Current state: Size **{{size}}**, Color **{{color}}**" + ] + } + ] +} \ No newline at end of file diff --git a/docs/assets/examples/json/features/styling.idoc.json b/docs/assets/examples/json/features/styling.idoc.json new file mode 100644 index 00000000..1fa6d785 --- /dev/null +++ b/docs/assets/examples/json/features/styling.idoc.json @@ -0,0 +1,66 @@ +{ + "$schema": "https://microsoft.github.io/chartifact/schema/idoc_v1.json", + "title": "Feature: Styling", + "style": { + "css": ".group { padding: 20px; background-color: #f8f9fa; border: 2px solid #3498db; border-radius: 8px; margin-bottom: 20px; } .group h2 { color: #3498db; } .group h3 { color: #2c3e50; } #demo { background-color: #e8f5e8; border-color: #28a745; } #demo h2 { color: #28a745; }", + "googleFonts": { + "googleFontsUrl": "https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Source+Code+Pro:wght@400;600&family=Inter:wght@300;400;500&family=Roboto+Slab:wght@400;700&display=swap", + "mapping": { + "body": "Inter", + "hero": "Playfair Display", + "headings": "Roboto Slab", + "code": "Source Code Pro", + "table": "Source Code Pro" + }, + "sizing": { + "body": 1, + "hero": 2.5, + "headings": 1.5, + "code": 0.8, + "table": 0.9 + } + } + }, + "groups": [ + { + "groupId": "main", + "elements": [ + "## CSS Styling\nUse CSS to style documents with custom layouts and appearance.", + "### How CSS Works", + "- Each group gets a `.group` className automatically", + "- Each group gets an `#id` based on the groupId", + "- Add custom CSS in the `layout.css` property", + "- Style headers, backgrounds, borders, and spacing", + "- CSS applies to all groups in the document" + ] + }, + { + "groupId": "demo", + "elements": [ + "## Demo Section", + "This section has `groupId=\"demo\"` so it gets `id=\"demo\"` and can be styled with `#demo`.", + "Notice this section has a green theme instead of blue, applied via the `#demo` CSS selector." + ] + }, + { + "groupId": "google-fonts-demo", + "elements": [ + "## Google Fonts Demo\nThis section demonstrates the Google Fonts plugin with cascading font behavior and semantic mapping.", + "```json google-fonts\n{\n \"googleFontsUrl\": \"https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Source+Code+Pro:wght@400;600&family=Inter:wght@300;400;500&family=Roboto+Slab:wght@400;700&display=swap\",\n \"mapping\": {\n \"body\": \"Inter\",\n \"hero\": \"Playfair Display\",\n \"headings\": \"Roboto Slab\", \n \"code\": \"Source Code Pro\",\n \"table\": \"Source Code Pro\"\n },\n \"sizing\": {\n \"body\": 1,\n \"hero\": 2.5,\n \"headings\": 1.5, \n \"code\": 0.8,\n \"table\": 0.9\n }\n}\n```", + "# Hero Headline Level 1", + "## Hero Headline Level 2", + "### Hero Headline Level 3", + "#### Regular Heading Level 4", + "This is regular paragraph text that demonstrates the body font. Lorem ipsum dolor sit amet, consectetur adipiscing elit.", + "- Bulleted list item\n- Another list item\n- Third item", + "1. Numbered list item one\n2. Second numbered item\n3. Third numbered item", + "**Bold text** and *italic text* also inherit the body font.", + "Here's some `inline code` and a code block:", + "```javascript\n// Code blocks use the code font mapping\nfunction example() {\n console.log(\"Hello, World!\");\n}\n```", + "#### Tables", + "| Column 1 | Column 2 | Column 3 |\n|----------|----------|----------|\n| Cell 1 | Cell 2 | Cell 3 |\n| Data A | Data B | Data C |\n| Numbers | 123.45 | 678.90 |", + "This content lets you see how different fonts apply to different semantic elements without any distracting references to the font names." + ] + } + ] +} \ No newline at end of file diff --git a/docs/assets/examples/json/features/table.idoc.json b/docs/assets/examples/json/features/table.idoc.json new file mode 100644 index 00000000..edf237f3 --- /dev/null +++ b/docs/assets/examples/json/features/table.idoc.json @@ -0,0 +1,72 @@ +{ + "$schema": "https://microsoft.github.io/chartifact/schema/idoc_v1.json", + "title": "Feature: Table", + "dataLoaders": [ + { + "dataSourceName": "sampleData", + "type": "inline", + "format": "json", + "content": [ + { + "name": "Alice", + "age": 25, + "city": "New York" + }, + { + "name": "Bob", + "age": 30, + "city": "Chicago" + }, + { + "name": "Carol", + "age": 35, + "city": "Los Angeles" + }, + { + "name": "David", + "age": 28, + "city": "Seattle" + } + ] + } + ], + "groups": [ + { + "groupId": "main", + "elements": [ + "## Table\nUse tables for displaying and interacting with tabular data.", + "### Basic Table", + { + "type": "table", + "dataSourceName": "sampleData", + "variableId": "table1", + "tabulatorOptions": { + "autoColumns": true, + "layout": "fitColumns", + "maxHeight": "200px" + } + }, + "### Selectable Table", + { + "type": "table", + "dataSourceName": "sampleData", + "variableId": "table2", + "tabulatorOptions": { + "autoColumns": true, + "layout": "fitColumns", + "maxHeight": "200px", + "selectableRows": true, + "rowHeader": { + "formatter": "rowSelection", + "titleFormatter": "rowSelection", + "headerSort": false, + "headerHozAlign": "center", + "hozAlign": "center", + "width": 40 + } + } + } + ] + } + ] +} \ No newline at end of file diff --git a/docs/assets/examples/json/features/urls.idoc.json b/docs/assets/examples/json/features/urls.idoc.json new file mode 100644 index 00000000..742090f7 --- /dev/null +++ b/docs/assets/examples/json/features/urls.idoc.json @@ -0,0 +1,78 @@ +{ + "$schema": "https://microsoft.github.io/chartifact/schema/idoc_v1.json", + "title": "Feature: URLs", + "variables": [ + { + "variableId": "imageSize", + "type": "number", + "initialValue": 300 + }, + { + "variableId": "imageCategory", + "type": "string", + "initialValue": "nature" + }, + { + "variableId": "seed", + "type": "number", + "initialValue": 123 + } + ], + "groups": [ + { + "groupId": "main", + "elements": [ + "## URLs\nConstruct dynamic URLs using variables in paths and query parameters.", + { + "type": "slider", + "variableId": "imageSize", + "label": "Image size:", + "min": 100, + "max": 600, + "step": 50 + }, + { + "type": "dropdown", + "variableId": "imageCategory", + "label": "Category:", + "options": [ + "nature", + "city", + "technology", + "abstract" + ] + }, + { + "type": "slider", + "variableId": "seed", + "label": "Random seed:", + "min": 1, + "max": 1000, + "step": 1 + }, + "### Basic URL Construction", + "URLs are built with `origin` + `urlPath`:", + { + "type": "image", + "alt": "Dynamic image example", + "width": 400, + "height": 300, + "url": "https://picsum.photos/{{imageSize}}" + }, + "Current URL: `https://picsum.photos/{{imageSize}}`", + "### URL with Query Parameters", + "Use `mappedParams` to add variables as query parameters:", + { + "type": "image", + "alt": "Image with query parameters", + "width": 400, + "height": 300, + "url": "https://picsum.photo/{{imageSize}}?category={{imageCategory}}&seed={{seed}}" + }, + "Current URL: `https://picsum.photos/{{imageSize}}?category={{imageCategory}}&seed={{seed}}`", + "### Usage in Data Sources", + "URLs work the same way for loading data - origin, path, and optional query parameters with variables." + ] + } + ] +} \ No newline at end of file diff --git a/docs/assets/examples/json/features/variables.idoc.json b/docs/assets/examples/json/features/variables.idoc.json new file mode 100644 index 00000000..668f3eb7 --- /dev/null +++ b/docs/assets/examples/json/features/variables.idoc.json @@ -0,0 +1,65 @@ +{ + "$schema": "https://microsoft.github.io/chartifact/schema/idoc_v1.json", + "title": "Feature: Variables", + "variables": [ + { + "variableId": "userName", + "type": "string", + "initialValue": "Alice" + }, + { + "variableId": "temperature", + "type": "number", + "initialValue": 20 + }, + { + "variableId": "isEnabled", + "type": "boolean", + "initialValue": true + }, + { + "variableId": "obj", + "type": "object", + "initialValue": { + "foo": "bar", + "value": 42 + } + }, + { + "variableId": "doubled_temperature", + "type": "number", + "initialValue": 40, + "calculation": { + "dependsOn": [ + "temperature" + ], + "vegaExpression": "temperature * 2" + } + }, + { + "variableId": "value", + "type": "number", + "initialValue": 42, + "calculation": { + "dependsOn": [ + "obj" + ], + "vegaExpression": "obj.value" + } + } + ], + "groups": [ + { + "groupId": "main", + "elements": [ + "## Variables\nVariables store values that can be referenced in markdown using `{{variableName}}` syntax.", + "**String:** Hello, **{{userName}}**!", + "**Number:** The count is **{{temperature}}**", + "**Boolean:** Feature status: **{{isEnabled}}**", + "**Object:** `obj` = JSON object with foo and value properties", + "**Calculated:** Count doubled is **{{doubled_temperature}}**", + "**Calculated:** Value from object: **{{value}}**" + ] + } + ] +} \ No newline at end of file diff --git a/docs/assets/examples/json/grocery-list.idoc.json b/docs/assets/examples/json/grocery-list.idoc.json new file mode 100644 index 00000000..3bc1a496 --- /dev/null +++ b/docs/assets/examples/json/grocery-list.idoc.json @@ -0,0 +1,231 @@ +{ + "$schema": "https://microsoft.github.io/chartifact/schema/idoc_v1.json", + "title": "Select Items to Buy", + "dataLoaders": [ + { + "dataSourceName": "itemsData", + "type": "inline", + "format": "json", + "content": [ + { + "item": "Apples", + "category": "Fruits", + "price": 1.2 + }, + { + "item": "Bananas", + "category": "Fruits", + "price": 0.5 + }, + { + "item": "Oranges", + "category": "Fruits", + "price": 0.8 + }, + { + "item": "Strawberries", + "category": "Fruits", + "price": 2.5 + }, + { + "item": "Grapes", + "category": "Fruits", + "price": 2.2 + }, + { + "item": "Bread", + "category": "Bakery", + "price": 2 + }, + { + "item": "Bagels", + "category": "Bakery", + "price": 1.8 + }, + { + "item": "Croissant", + "category": "Bakery", + "price": 2.3 + }, + { + "item": "Milk", + "category": "Dairy", + "price": 1.5 + }, + { + "item": "Cheese", + "category": "Dairy", + "price": 3 + }, + { + "item": "Yogurt", + "category": "Dairy", + "price": 1.1 + }, + { + "item": "Eggs", + "category": "Dairy", + "price": 2.4 + }, + { + "item": "Chicken Breast", + "category": "Meat", + "price": 5 + }, + { + "item": "Ground Beef", + "category": "Meat", + "price": 4.5 + }, + { + "item": "Salmon", + "category": "Meat", + "price": 7 + }, + { + "item": "Carrots", + "category": "Vegetables", + "price": 0.9 + }, + { + "item": "Broccoli", + "category": "Vegetables", + "price": 1.3 + }, + { + "item": "Lettuce", + "category": "Vegetables", + "price": 1 + }, + { + "item": "Tomatoes", + "category": "Vegetables", + "price": 1.2 + }, + { + "item": "Potatoes", + "category": "Vegetables", + "price": 0.7 + }, + { + "item": "Pasta", + "category": "Pantry", + "price": 1.1 + }, + { + "item": "Rice", + "category": "Pantry", + "price": 1 + }, + { + "item": "Cereal", + "category": "Pantry", + "price": 2.8 + }, + { + "item": "Olive Oil", + "category": "Pantry", + "price": 4 + } + ] + } + ], + "variables": [ + { + "variableId": "itemsData_selected_sum_price", + "type": "object", + "isArray": true, + "initialValue": [], + "calculation": { + "dependsOn": [ + "itemsData_selected" + ], + "dataFrameTransformations": [ + { + "type": "aggregate", + "ops": [ + "sum" + ], + "fields": [ + "price" + ], + "as": [ + "sum_price" + ] + } + ] + } + }, + { + "variableId": "total", + "type": "number", + "initialValue": 0, + "calculation": { + "vegaExpression": "format(data('itemsData_selected_sum_price')[0] ? data('itemsData_selected_sum_price')[0].sum_price : 0, ',.2f')" + } + } + ], + "groups": [ + { + "groupId": "main", + "elements": [ + "## Select the items you want to buy\n", + { + "type": "table", + "variableId": "itemsData_selected", + "dataSourceName": "itemsData", + "tabulatorOptions": { + "autoColumns": true, + "layout": "fitColumns", + "minHeight": "200px", + "maxHeight": "200px", + "selectableRows": true, + "rowHeader": { + "formatter": "rowSelection", + "titleFormatter": "rowSelection", + "headerSort": false, + "headerHozAlign": "center", + "hozAlign": "center", + "width": 40 + } + } + }, + "## Total Price\n\n${{total}}\n\n### Categories", + { + "type": "chart", + "chartKey": "1" + } + ] + } + ], + "resources": { + "charts": { + "1": { + "$schema": "https://vega.github.io/schema/vega-lite/v6.json", + "data": { + "name": "itemsData_selected" + }, + "mark": "bar", + "encoding": { + "x": { + "field": "category", + "type": "nominal", + "title": "Category" + }, + "y": { + "aggregate": "count", + "type": "quantitative", + "title": "Number of Items" + }, + "color": { + "field": "category", + "type": "nominal", + "legend": { + "title": "Category" + } + } + } + } + } + } +} \ No newline at end of file diff --git a/docs/assets/examples/json/seattle-weather/1.idoc.json b/docs/assets/examples/json/seattle-weather/1.idoc.json new file mode 100644 index 00000000..120bb652 --- /dev/null +++ b/docs/assets/examples/json/seattle-weather/1.idoc.json @@ -0,0 +1,60 @@ +{ + "$schema": "https://microsoft.github.io/chartifact/schema/idoc_v1.json", + "title": "Seattle Weather", + "groups": [ + { + "groupId": "main", + "elements": [ + "# Seattle Weather\n\nHere is a stacked bar chart of Seattle weather:\nEach bar represents the count of weather types for each month.\nThe colors distinguish between different weather conditions such as sun, fog, drizzle, rain, and snow.", + { + "type": "chart", + "chartKey": "1" + } + ] + } + ], + "resources": { + "charts": { + "1": { + "$schema": "https://vega.github.io/schema/vega-lite/v6.json", + "data": { + "url": "https://vega.github.io/editor/data/seattle-weather.csv" + }, + "mark": "bar", + "encoding": { + "x": { + "timeUnit": "month", + "field": "date", + "type": "ordinal", + "title": "Month of the year" + }, + "y": { + "aggregate": "count", + "type": "quantitative" + }, + "color": { + "field": "weather", + "type": "nominal", + "scale": { + "domain": [ + "sun", + "fog", + "drizzle", + "rain", + "snow" + ], + "range": [ + "#e7ba52", + "#c7c7c7", + "#aec7e8", + "#1f77b4", + "#9467bd" + ] + }, + "title": "Weather type" + } + } + } + } + } +} \ No newline at end of file diff --git a/docs/assets/examples/json/seattle-weather/2.idoc.json b/docs/assets/examples/json/seattle-weather/2.idoc.json new file mode 100644 index 00000000..b51a8e60 --- /dev/null +++ b/docs/assets/examples/json/seattle-weather/2.idoc.json @@ -0,0 +1,108 @@ +{ + "$schema": "https://microsoft.github.io/chartifact/schema/idoc_v1.json", + "title": "Seattle Weather", + "groups": [ + { + "groupId": "main", + "elements": [ + "# Seattle Weather\n\nHere is a stacked bar chart of Seattle weather:\nEach bar represents the count of weather types for each month.\nThe colors distinguish between different weather conditions such as sun, fog, drizzle, rain, and snow.", + { + "type": "chart", + "chartKey": "1" + }, + "This section introduces a heatmap visualization for the Seattle weather dataset.\nThe heatmap is designed to display the distribution and intensity of weather-related variables,\nsuch as temperature, precipitation, or frequency of weather events, across different time periods or categories.\nIt provides an intuitive way to identify patterns, trends, and anomalies in the dataset.", + { + "type": "chart", + "chartKey": "2" + } + ] + } + ], + "resources": { + "charts": { + "1": { + "$schema": "https://vega.github.io/schema/vega-lite/v6.json", + "data": { + "url": "https://vega.github.io/editor/data/seattle-weather.csv" + }, + "mark": "bar", + "encoding": { + "x": { + "timeUnit": "month", + "field": "date", + "type": "ordinal", + "title": "Month of the year" + }, + "y": { + "aggregate": "count", + "type": "quantitative" + }, + "color": { + "field": "weather", + "type": "nominal", + "scale": { + "domain": [ + "sun", + "fog", + "drizzle", + "rain", + "snow" + ], + "range": [ + "#e7ba52", + "#c7c7c7", + "#aec7e8", + "#1f77b4", + "#9467bd" + ] + }, + "title": "Weather type" + } + } + }, + "2": { + "$schema": "https://vega.github.io/schema/vega-lite/v6.json", + "data": { + "url": "https://vega.github.io/editor/data/seattle-weather.csv" + }, + "title": "Daily Max Temperatures (C) in Seattle, WA", + "config": { + "view": { + "strokeWidth": 0, + "step": 13 + }, + "axis": { + "domain": false + } + }, + "mark": "rect", + "encoding": { + "x": { + "field": "date", + "timeUnit": "date", + "type": "ordinal", + "title": "Day", + "axis": { + "labelAngle": 0, + "format": "%e" + } + }, + "y": { + "field": "date", + "timeUnit": "month", + "type": "ordinal", + "title": "Month" + }, + "color": { + "field": "temp_max", + "aggregate": "max", + "type": "quantitative", + "legend": { + "title": null + } + } + } + } + } + } +} \ No newline at end of file diff --git a/docs/assets/examples/json/seattle-weather/3.idoc.json b/docs/assets/examples/json/seattle-weather/3.idoc.json new file mode 100644 index 00000000..fbfbe8b5 --- /dev/null +++ b/docs/assets/examples/json/seattle-weather/3.idoc.json @@ -0,0 +1,117 @@ +{ + "$schema": "https://microsoft.github.io/chartifact/schema/idoc_v1.json", + "title": "Seattle Weather", + "dataLoaders": [ + { + "type": "url", + "url": "https://vega.github.io/editor/data/seattle-weather.csv", + "dataSourceName": "seattle_weather", + "format": "csv", + "dataFrameTransformations": [] + } + ], + "groups": [ + { + "groupId": "main", + "elements": [ + "# Seattle Weather\n\nHere is a stacked bar chart of Seattle weather:\nEach bar represents the count of weather types for each month.\nThe colors distinguish between different weather conditions such as sun, fog, drizzle, rain, and snow.", + { + "type": "chart", + "chartKey": "1" + }, + "This section introduces a heatmap visualization for the Seattle weather dataset.\nThe heatmap is designed to display the distribution and intensity of weather-related variables,\nsuch as temperature, precipitation, or frequency of weather events, across different time periods or categories.\nIt provides an intuitive way to identify patterns, trends, and anomalies in the dataset.", + { + "type": "chart", + "chartKey": "2" + } + ] + } + ], + "resources": { + "charts": { + "1": { + "$schema": "https://vega.github.io/schema/vega-lite/v6.json", + "data": { + "name": "seattle_weather" + }, + "mark": "bar", + "encoding": { + "x": { + "timeUnit": "month", + "field": "date", + "type": "ordinal", + "title": "Month of the year" + }, + "y": { + "aggregate": "count", + "type": "quantitative" + }, + "color": { + "field": "weather", + "type": "nominal", + "scale": { + "domain": [ + "sun", + "fog", + "drizzle", + "rain", + "snow" + ], + "range": [ + "#e7ba52", + "#c7c7c7", + "#aec7e8", + "#1f77b4", + "#9467bd" + ] + }, + "title": "Weather type" + } + } + }, + "2": { + "$schema": "https://vega.github.io/schema/vega-lite/v6.json", + "data": { + "name": "seattle_weather" + }, + "title": "Daily Max Temperatures (C) in Seattle, WA", + "config": { + "view": { + "strokeWidth": 0, + "step": 13 + }, + "axis": { + "domain": false + } + }, + "mark": "rect", + "encoding": { + "x": { + "field": "date", + "timeUnit": "date", + "type": "ordinal", + "title": "Day", + "axis": { + "labelAngle": 0, + "format": "%e" + } + }, + "y": { + "field": "date", + "timeUnit": "month", + "type": "ordinal", + "title": "Month" + }, + "color": { + "field": "temp_max", + "aggregate": "max", + "type": "quantitative", + "legend": { + "title": null + } + } + } + } + } + } +} \ No newline at end of file diff --git a/docs/assets/examples/json/seattle-weather/4.idoc.json b/docs/assets/examples/json/seattle-weather/4.idoc.json new file mode 100644 index 00000000..b4c3e26c --- /dev/null +++ b/docs/assets/examples/json/seattle-weather/4.idoc.json @@ -0,0 +1,123 @@ +{ + "$schema": "https://microsoft.github.io/chartifact/schema/idoc_v1.json", + "title": "Seattle Weather", + "dataLoaders": [ + { + "type": "url", + "url": "https://vega.github.io/editor/data/seattle-weather.csv", + "dataSourceName": "seattle_weather", + "format": "csv", + "dataFrameTransformations": [] + } + ], + "groups": [ + { + "groupId": "main", + "elements": [ + "# Seattle Weather\n\nData table:", + { + "type": "table", + "dataSourceName": "seattle_weather", + "variableId": "seattle_weather_selected" + }, + "Here is a stacked bar chart of Seattle weather:\nEach bar represents the count of weather types for each month.\nThe colors distinguish between different weather conditions such as sun, fog, drizzle, rain, and snow.", + { + "type": "chart", + "chartKey": "1" + }, + "This section introduces a heatmap visualization for the Seattle weather dataset.\nThe heatmap is designed to display the distribution and intensity of weather-related variables,\nsuch as temperature, precipitation, or frequency of weather events, across different time periods or categories.\nIt provides an intuitive way to identify patterns, trends, and anomalies in the dataset.", + { + "type": "chart", + "chartKey": "2" + } + ] + } + ], + "resources": { + "charts": { + "1": { + "$schema": "https://vega.github.io/schema/vega-lite/v6.json", + "data": { + "name": "seattle_weather" + }, + "mark": "bar", + "encoding": { + "x": { + "timeUnit": "month", + "field": "date", + "type": "ordinal", + "title": "Month of the year" + }, + "y": { + "aggregate": "count", + "type": "quantitative" + }, + "color": { + "field": "weather", + "type": "nominal", + "scale": { + "domain": [ + "sun", + "fog", + "drizzle", + "rain", + "snow" + ], + "range": [ + "#e7ba52", + "#c7c7c7", + "#aec7e8", + "#1f77b4", + "#9467bd" + ] + }, + "title": "Weather type" + } + } + }, + "2": { + "$schema": "https://vega.github.io/schema/vega-lite/v6.json", + "data": { + "name": "seattle_weather" + }, + "title": "Daily Max Temperatures (C) in Seattle, WA", + "config": { + "view": { + "strokeWidth": 0, + "step": 13 + }, + "axis": { + "domain": false + } + }, + "mark": "rect", + "encoding": { + "x": { + "field": "date", + "timeUnit": "date", + "type": "ordinal", + "title": "Day", + "axis": { + "labelAngle": 0, + "format": "%e" + } + }, + "y": { + "field": "date", + "timeUnit": "month", + "type": "ordinal", + "title": "Month" + }, + "color": { + "field": "temp_max", + "aggregate": "max", + "type": "quantitative", + "legend": { + "title": null + } + } + } + } + } + } +} \ No newline at end of file diff --git a/docs/assets/examples/json/seattle-weather/5.idoc.json b/docs/assets/examples/json/seattle-weather/5.idoc.json new file mode 100644 index 00000000..03a973af --- /dev/null +++ b/docs/assets/examples/json/seattle-weather/5.idoc.json @@ -0,0 +1,128 @@ +{ + "$schema": "https://microsoft.github.io/chartifact/schema/idoc_v1.json", + "title": "Seattle Weather", + "dataLoaders": [ + { + "type": "url", + "url": "https://vega.github.io/editor/data/seattle-weather.csv", + "dataSourceName": "seattle_weather", + "format": "csv", + "dataFrameTransformations": [ + { + "type": "filter", + "expr": "datum.weather=='sun'" + } + ] + } + ], + "groups": [ + { + "groupId": "main", + "elements": [ + "# Seattle Weather\n\nData table:", + { + "type": "table", + "dataSourceName": "seattle_weather", + "variableId": "seattle_weather_selected" + }, + "Here is a stacked bar chart of Seattle weather:\nEach bar represents the count of weather types for each month.\nThe colors distinguish between different weather conditions such as sun, fog, drizzle, rain, and snow.", + { + "type": "chart", + "chartKey": "1" + }, + "This section introduces a heatmap visualization for the Seattle weather dataset.\nThe heatmap is designed to display the distribution and intensity of weather-related variables,\nsuch as temperature, precipitation, or frequency of weather events, across different time periods or categories.\nIt provides an intuitive way to identify patterns, trends, and anomalies in the dataset.", + { + "type": "chart", + "chartKey": "2" + } + ] + } + ], + "resources": { + "charts": { + "1": { + "$schema": "https://vega.github.io/schema/vega-lite/v6.json", + "data": { + "name": "seattle_weather" + }, + "mark": "bar", + "encoding": { + "x": { + "timeUnit": "month", + "field": "date", + "type": "ordinal", + "title": "Month of the year" + }, + "y": { + "aggregate": "count", + "type": "quantitative" + }, + "color": { + "field": "weather", + "type": "nominal", + "scale": { + "domain": [ + "sun", + "fog", + "drizzle", + "rain", + "snow" + ], + "range": [ + "#e7ba52", + "#c7c7c7", + "#aec7e8", + "#1f77b4", + "#9467bd" + ] + }, + "title": "Weather type" + } + } + }, + "2": { + "$schema": "https://vega.github.io/schema/vega-lite/v6.json", + "data": { + "name": "seattle_weather" + }, + "title": "Daily Max Temperatures (C) in Seattle, WA", + "config": { + "view": { + "strokeWidth": 0, + "step": 13 + }, + "axis": { + "domain": false + } + }, + "mark": "rect", + "encoding": { + "x": { + "field": "date", + "timeUnit": "date", + "type": "ordinal", + "title": "Day", + "axis": { + "labelAngle": 0, + "format": "%e" + } + }, + "y": { + "field": "date", + "timeUnit": "month", + "type": "ordinal", + "title": "Month" + }, + "color": { + "field": "temp_max", + "aggregate": "max", + "type": "quantitative", + "legend": { + "title": null + } + } + } + } + } + } +} \ No newline at end of file diff --git a/docs/assets/examples/json/seattle-weather/6.idoc.json b/docs/assets/examples/json/seattle-weather/6.idoc.json new file mode 100644 index 00000000..cc4cf96f --- /dev/null +++ b/docs/assets/examples/json/seattle-weather/6.idoc.json @@ -0,0 +1,141 @@ +{ + "$schema": "https://microsoft.github.io/chartifact/schema/idoc_v1.json", + "title": "Seattle Weather", + "dataLoaders": [ + { + "type": "url", + "url": "https://vega.github.io/editor/data/seattle-weather.csv", + "dataSourceName": "seattle_weather", + "format": "csv", + "dataFrameTransformations": [ + { + "type": "filter", + "expr": "IncludeSun ? true : datum.weather != 'sun'" + } + ] + } + ], + "variables": [ + { + "variableId": "IncludeSun", + "type": "boolean", + "initialValue": true + } + ], + "groups": [ + { + "groupId": "main", + "elements": [ + "# Seattle Weather", + { + "type": "checkbox", + "label": "Include Sun:", + "variableId": "IncludeSun" + }, + "Data table:", + { + "type": "table", + "dataSourceName": "seattle_weather", + "variableId": "seattle_weather_selected" + }, + "Here is a stacked bar chart of Seattle weather:\nEach bar represents the count of weather types for each month.\nThe colors distinguish between different weather conditions such as sun, fog, drizzle, rain, and snow.", + { + "type": "chart", + "chartKey": "1" + }, + "This section introduces a heatmap visualization for the Seattle weather dataset.\nThe heatmap is designed to display the distribution and intensity of weather-related variables,\nsuch as temperature, precipitation, or frequency of weather events, across different time periods or categories.\nIt provides an intuitive way to identify patterns, trends, and anomalies in the dataset.", + { + "type": "chart", + "chartKey": "2" + } + ] + } + ], + "resources": { + "charts": { + "1": { + "$schema": "https://vega.github.io/schema/vega-lite/v6.json", + "data": { + "name": "seattle_weather" + }, + "mark": "bar", + "encoding": { + "x": { + "timeUnit": "month", + "field": "date", + "type": "ordinal", + "title": "Month of the year" + }, + "y": { + "aggregate": "count", + "type": "quantitative" + }, + "color": { + "field": "weather", + "type": "nominal", + "scale": { + "domain": [ + "sun", + "fog", + "drizzle", + "rain", + "snow" + ], + "range": [ + "#e7ba52", + "#c7c7c7", + "#aec7e8", + "#1f77b4", + "#9467bd" + ] + }, + "title": "Weather type" + } + } + }, + "2": { + "$schema": "https://vega.github.io/schema/vega-lite/v6.json", + "data": { + "name": "seattle_weather" + }, + "title": "Daily Max Temperatures (C) in Seattle, WA", + "config": { + "view": { + "strokeWidth": 0, + "step": 13 + }, + "axis": { + "domain": false + } + }, + "mark": "rect", + "encoding": { + "x": { + "field": "date", + "timeUnit": "date", + "type": "ordinal", + "title": "Day", + "axis": { + "labelAngle": 0, + "format": "%e" + } + }, + "y": { + "field": "date", + "timeUnit": "month", + "type": "ordinal", + "title": "Month" + }, + "color": { + "field": "temp_max", + "aggregate": "max", + "type": "quantitative", + "legend": { + "title": null + } + } + } + } + } + } +} \ No newline at end of file diff --git a/docs/assets/examples/seattle-weather/7.idoc.json b/docs/assets/examples/json/seattle-weather/7.idoc.json similarity index 50% rename from docs/assets/examples/seattle-weather/7.idoc.json rename to docs/assets/examples/json/seattle-weather/7.idoc.json index 8c51a3a5..7e2eb715 100644 --- a/docs/assets/examples/seattle-weather/7.idoc.json +++ b/docs/assets/examples/json/seattle-weather/7.idoc.json @@ -1,5 +1,5 @@ { - "$schema": "../../../schema/idoc_v1.json", + "$schema": "https://microsoft.github.io/chartifact/schema/idoc_v1.json", "title": "Seattle Weather", "dataLoaders": [ { @@ -97,109 +97,101 @@ "Here is a stacked bar chart of Seattle weather:\nEach bar represents the count of weather types for each month.\nThe colors distinguish between different weather conditions such as sun, fog, drizzle, rain, and snow.", { "type": "chart", - "chart": { - "dataSourceBase": { - "dataSourceName": "data" - }, - "chartTemplateKey": "bar", - "chartIntent": "A bar chart showing the distribution of weather types over months.", - "spec": { - "$schema": "https://vega.github.io/schema/vega-lite/v6.json", - "data": { - "name": "seattle_weather" - }, - "mark": "bar", - "encoding": { - "x": { - "timeUnit": "month", - "field": "date", - "type": "ordinal", - "title": "Month of the year" - }, - "y": { - "aggregate": "count", - "type": "quantitative" - }, - "color": { - "field": "weather", - "type": "nominal", - "scale": { - "domain": [ - "sun", - "fog", - "drizzle", - "rain", - "snow" - ], - "range": [ - "#e7ba52", - "#c7c7c7", - "#aec7e8", - "#1f77b4", - "#9467bd" - ] - }, - "title": "Weather type" - } - } - } - } + "chartKey": "1" }, "This section introduces a heatmap visualization for the Seattle weather dataset.\nThe heatmap is designed to display the distribution and intensity of weather-related variables,\nsuch as temperature, precipitation, or frequency of weather events, across different time periods or categories.\nIt provides an intuitive way to identify patterns, trends, and anomalies in the dataset.", { "type": "chart", - "chart": { - "dataSourceBase": { - "dataSourceName": "data" + "chartKey": "2" + } + ] + } + ], + "resources": { + "charts": { + "1": { + "$schema": "https://vega.github.io/schema/vega-lite/v6.json", + "data": { + "name": "seattle_weather" + }, + "mark": "bar", + "encoding": { + "x": { + "timeUnit": "month", + "field": "date", + "type": "ordinal", + "title": "Month of the year" + }, + "y": { + "aggregate": "count", + "type": "quantitative" + }, + "color": { + "field": "weather", + "type": "nominal", + "scale": { + "domain": [ + "sun", + "fog", + "drizzle", + "rain", + "snow" + ], + "range": [ + "#e7ba52", + "#c7c7c7", + "#aec7e8", + "#1f77b4", + "#9467bd" + ] }, - "chartTemplateKey": "heatmap", - "chartIntent": "A heatmap showing the distribution of daily maximum temperatures in Seattle.", - "spec": { - "$schema": "https://vega.github.io/schema/vega-lite/v6.json", - "data": { - "name": "seattle_weather" - }, - "title": "Daily Max Temperatures (C) in Seattle, WA", - "config": { - "view": { - "strokeWidth": 0, - "step": 13 - }, - "axis": { - "domain": false - } - }, - "mark": "rect", - "encoding": { - "x": { - "field": "date", - "timeUnit": "date", - "type": "ordinal", - "title": "Day", - "axis": { - "labelAngle": 0, - "format": "%e" - } - }, - "y": { - "field": "date", - "timeUnit": "month", - "type": "ordinal", - "title": "Month" - }, - "color": { - "field": "temp_max", - "aggregate": "max", - "type": "quantitative", - "legend": { - "title": null - } - } - } + "title": "Weather type" + } + } + }, + "2": { + "$schema": "https://vega.github.io/schema/vega-lite/v6.json", + "data": { + "name": "seattle_weather" + }, + "title": "Daily Max Temperatures (C) in Seattle, WA", + "config": { + "view": { + "strokeWidth": 0, + "step": 13 + }, + "axis": { + "domain": false + } + }, + "mark": "rect", + "encoding": { + "x": { + "field": "date", + "timeUnit": "date", + "type": "ordinal", + "title": "Day", + "axis": { + "labelAngle": 0, + "format": "%e" + } + }, + "y": { + "field": "date", + "timeUnit": "month", + "type": "ordinal", + "title": "Month" + }, + "color": { + "field": "temp_max", + "aggregate": "max", + "type": "quantitative", + "legend": { + "title": null } } } - ] + } } - ] + } } \ No newline at end of file diff --git a/docs/assets/examples/seattle-weather/8.idoc.json b/docs/assets/examples/json/seattle-weather/8.idoc.json similarity index 54% rename from docs/assets/examples/seattle-weather/8.idoc.json rename to docs/assets/examples/json/seattle-weather/8.idoc.json index 3e897dae..505d94ab 100644 --- a/docs/assets/examples/seattle-weather/8.idoc.json +++ b/docs/assets/examples/json/seattle-weather/8.idoc.json @@ -1,5 +1,5 @@ { - "$schema": "../../../schema/idoc_v1.json", + "$schema": "https://microsoft.github.io/chartifact/schema/idoc_v1.json", "title": "Seattle Weather", "dataLoaders": [ { @@ -127,109 +127,101 @@ "Here is a stacked bar chart of Seattle weather:\nEach bar represents the count of weather types for each month.\nThe colors distinguish between different weather conditions such as sun, fog, drizzle, rain, and snow.", { "type": "chart", - "chart": { - "dataSourceBase": { - "dataSourceName": "data" - }, - "chartTemplateKey": "bar", - "chartIntent": "A bar chart showing the distribution of weather types over months.", - "spec": { - "$schema": "https://vega.github.io/schema/vega-lite/v6.json", - "data": { - "name": "seattle_weather" - }, - "mark": "bar", - "encoding": { - "x": { - "timeUnit": "month", - "field": "date", - "type": "ordinal", - "title": "Month of the year" - }, - "y": { - "aggregate": "count", - "type": "quantitative" - }, - "color": { - "field": "weather", - "type": "nominal", - "scale": { - "domain": [ - "sun", - "fog", - "drizzle", - "rain", - "snow" - ], - "range": [ - "#e7ba52", - "#c7c7c7", - "#aec7e8", - "#1f77b4", - "#9467bd" - ] - }, - "title": "Weather type" - } - } - } - } + "chartKey": "1" }, "This section introduces a heatmap visualization for the Seattle weather dataset.\nThe heatmap is designed to display the distribution and intensity of weather-related variables,\nsuch as temperature, precipitation, or frequency of weather events, across different time periods or categories.\nIt provides an intuitive way to identify patterns, trends, and anomalies in the dataset.", { "type": "chart", - "chart": { - "dataSourceBase": { - "dataSourceName": "data" + "chartKey": "2" + } + ] + } + ], + "resources": { + "charts": { + "1": { + "$schema": "https://vega.github.io/schema/vega-lite/v6.json", + "data": { + "name": "seattle_weather" + }, + "mark": "bar", + "encoding": { + "x": { + "timeUnit": "month", + "field": "date", + "type": "ordinal", + "title": "Month of the year" + }, + "y": { + "aggregate": "count", + "type": "quantitative" + }, + "color": { + "field": "weather", + "type": "nominal", + "scale": { + "domain": [ + "sun", + "fog", + "drizzle", + "rain", + "snow" + ], + "range": [ + "#e7ba52", + "#c7c7c7", + "#aec7e8", + "#1f77b4", + "#9467bd" + ] }, - "chartTemplateKey": "heatmap", - "chartIntent": "A heatmap showing the distribution of daily maximum temperatures in Seattle.", - "spec": { - "$schema": "https://vega.github.io/schema/vega-lite/v6.json", - "data": { - "name": "seattle_weather" - }, - "title": "Daily Max Temperatures (C) in Seattle, WA", - "config": { - "view": { - "strokeWidth": 0, - "step": 13 - }, - "axis": { - "domain": false - } - }, - "mark": "rect", - "encoding": { - "x": { - "field": "date", - "timeUnit": "date", - "type": "ordinal", - "title": "Day", - "axis": { - "labelAngle": 0, - "format": "%e" - } - }, - "y": { - "field": "date", - "timeUnit": "month", - "type": "ordinal", - "title": "Month" - }, - "color": { - "field": "temp_max", - "aggregate": "max", - "type": "quantitative", - "legend": { - "title": null - } - } - } + "title": "Weather type" + } + } + }, + "2": { + "$schema": "https://vega.github.io/schema/vega-lite/v6.json", + "data": { + "name": "seattle_weather" + }, + "title": "Daily Max Temperatures (C) in Seattle, WA", + "config": { + "view": { + "strokeWidth": 0, + "step": 13 + }, + "axis": { + "domain": false + } + }, + "mark": "rect", + "encoding": { + "x": { + "field": "date", + "timeUnit": "date", + "type": "ordinal", + "title": "Day", + "axis": { + "labelAngle": 0, + "format": "%e" + } + }, + "y": { + "field": "date", + "timeUnit": "month", + "type": "ordinal", + "title": "Month" + }, + "color": { + "field": "temp_max", + "aggregate": "max", + "type": "quantitative", + "legend": { + "title": null } } } - ] + } } - ] + } } \ No newline at end of file diff --git a/docs/assets/examples/seattle-weather/9.idoc.json b/docs/assets/examples/json/seattle-weather/9.idoc.json similarity index 64% rename from docs/assets/examples/seattle-weather/9.idoc.json rename to docs/assets/examples/json/seattle-weather/9.idoc.json index 8e1caea3..d154097b 100644 --- a/docs/assets/examples/seattle-weather/9.idoc.json +++ b/docs/assets/examples/json/seattle-weather/9.idoc.json @@ -1,5 +1,5 @@ { - "$schema": "../../../schema/idoc_v1.json", + "$schema": "https://microsoft.github.io/chartifact/schema/idoc_v1.json", "title": "Seattle Weather", "dataLoaders": [ { @@ -193,109 +193,101 @@ "Here is a stacked bar chart of Seattle weather:\nEach bar represents the count of weather types for each month.\nThe colors distinguish between different weather conditions such as sun, fog, drizzle, rain, and snow.", { "type": "chart", - "chart": { - "dataSourceBase": { - "dataSourceName": "data" - }, - "chartTemplateKey": "bar", - "chartIntent": "A bar chart showing the distribution of weather types over months.", - "spec": { - "$schema": "https://vega.github.io/schema/vega-lite/v6.json", - "data": { - "name": "seattle_weather" - }, - "mark": "bar", - "encoding": { - "x": { - "timeUnit": "month", - "field": "date", - "type": "ordinal", - "title": "Month of the year" - }, - "y": { - "aggregate": "count", - "type": "quantitative" - }, - "color": { - "field": "weather", - "type": "nominal", - "scale": { - "domain": [ - "sun", - "fog", - "drizzle", - "rain", - "snow" - ], - "range": [ - "#e7ba52", - "#c7c7c7", - "#aec7e8", - "#1f77b4", - "#9467bd" - ] - }, - "title": "Weather type" - } - } - } - } + "chartKey": "1" }, "This section introduces a heatmap visualization for the Seattle weather dataset.\nThe heatmap is designed to display the distribution and intensity of weather-related variables,\nsuch as temperature, precipitation, or frequency of weather events, across different time periods or categories.\nIt provides an intuitive way to identify patterns, trends, and anomalies in the dataset.", { "type": "chart", - "chart": { - "dataSourceBase": { - "dataSourceName": "data" + "chartKey": "2" + } + ] + } + ], + "resources": { + "charts": { + "1": { + "$schema": "https://vega.github.io/schema/vega-lite/v6.json", + "data": { + "name": "seattle_weather" + }, + "mark": "bar", + "encoding": { + "x": { + "timeUnit": "month", + "field": "date", + "type": "ordinal", + "title": "Month of the year" + }, + "y": { + "aggregate": "count", + "type": "quantitative" + }, + "color": { + "field": "weather", + "type": "nominal", + "scale": { + "domain": [ + "sun", + "fog", + "drizzle", + "rain", + "snow" + ], + "range": [ + "#e7ba52", + "#c7c7c7", + "#aec7e8", + "#1f77b4", + "#9467bd" + ] }, - "chartTemplateKey": "heatmap", - "chartIntent": "A heatmap showing the distribution of daily maximum temperatures in Seattle.", - "spec": { - "$schema": "https://vega.github.io/schema/vega-lite/v6.json", - "data": { - "name": "seattle_weather" - }, - "title": "Daily Max Temperatures (C) in Seattle, WA", - "config": { - "view": { - "strokeWidth": 0, - "step": 13 - }, - "axis": { - "domain": false - } - }, - "mark": "rect", - "encoding": { - "x": { - "field": "date", - "timeUnit": "date", - "type": "ordinal", - "title": "Day", - "axis": { - "labelAngle": 0, - "format": "%e" - } - }, - "y": { - "field": "date", - "timeUnit": "month", - "type": "ordinal", - "title": "Month" - }, - "color": { - "field": "temp_max", - "aggregate": "max", - "type": "quantitative", - "legend": { - "title": null - } - } - } + "title": "Weather type" + } + } + }, + "2": { + "$schema": "https://vega.github.io/schema/vega-lite/v6.json", + "data": { + "name": "seattle_weather" + }, + "title": "Daily Max Temperatures (C) in Seattle, WA", + "config": { + "view": { + "strokeWidth": 0, + "step": 13 + }, + "axis": { + "domain": false + } + }, + "mark": "rect", + "encoding": { + "x": { + "field": "date", + "timeUnit": "date", + "type": "ordinal", + "title": "Day", + "axis": { + "labelAngle": 0, + "format": "%e" + } + }, + "y": { + "field": "date", + "timeUnit": "month", + "type": "ordinal", + "title": "Month" + }, + "color": { + "field": "temp_max", + "aggregate": "max", + "type": "quantitative", + "legend": { + "title": null } } } - ] + } } - ] + } } \ No newline at end of file diff --git a/docs/assets/examples/json/slides.idoc.json b/docs/assets/examples/json/slides.idoc.json new file mode 100644 index 00000000..f6ddf82a --- /dev/null +++ b/docs/assets/examples/json/slides.idoc.json @@ -0,0 +1,255 @@ +{ + "$schema": "https://microsoft.github.io/chartifact/schema/idoc_v1.json", + "title": "Select Items to Buy", + "style": { + "css": "html, body {\n height: 100%;\n margin: 0;\n padding: 0;\n scroll-behavior: smooth;\n overflow-y: auto;\n}\n\nbody {\n scroll-snap-type: y mandatory;\n}\n\n.group {\n color: white;\n scroll-snap-align: start;\n height: 100vh;\n margin: 0;\n padding: 1em;\n box-sizing: border-box;\n}\n\n#slide1 { background: #1abc9c; }\n#slide2 { background: #3498db; }\n#slide3 { background: #9b59b6; }\n#slide4 { background: #e74c3c; }\n" + }, + "dataLoaders": [ + { + "dataSourceName": "itemsData", + "type": "inline", + "format": "json", + "content": [ + { + "item": "Apples", + "category": "Fruits", + "price": 1.2 + }, + { + "item": "Bananas", + "category": "Fruits", + "price": 0.5 + }, + { + "item": "Oranges", + "category": "Fruits", + "price": 0.8 + }, + { + "item": "Strawberries", + "category": "Fruits", + "price": 2.5 + }, + { + "item": "Grapes", + "category": "Fruits", + "price": 2.2 + }, + { + "item": "Bread", + "category": "Bakery", + "price": 2 + }, + { + "item": "Bagels", + "category": "Bakery", + "price": 1.8 + }, + { + "item": "Croissant", + "category": "Bakery", + "price": 2.3 + }, + { + "item": "Milk", + "category": "Dairy", + "price": 1.5 + }, + { + "item": "Cheese", + "category": "Dairy", + "price": 3 + }, + { + "item": "Yogurt", + "category": "Dairy", + "price": 1.1 + }, + { + "item": "Eggs", + "category": "Dairy", + "price": 2.4 + }, + { + "item": "Chicken Breast", + "category": "Meat", + "price": 5 + }, + { + "item": "Ground Beef", + "category": "Meat", + "price": 4.5 + }, + { + "item": "Salmon", + "category": "Meat", + "price": 7 + }, + { + "item": "Carrots", + "category": "Vegetables", + "price": 0.9 + }, + { + "item": "Broccoli", + "category": "Vegetables", + "price": 1.3 + }, + { + "item": "Lettuce", + "category": "Vegetables", + "price": 1 + }, + { + "item": "Tomatoes", + "category": "Vegetables", + "price": 1.2 + }, + { + "item": "Potatoes", + "category": "Vegetables", + "price": 0.7 + }, + { + "item": "Pasta", + "category": "Pantry", + "price": 1.1 + }, + { + "item": "Rice", + "category": "Pantry", + "price": 1 + }, + { + "item": "Cereal", + "category": "Pantry", + "price": 2.8 + }, + { + "item": "Olive Oil", + "category": "Pantry", + "price": 4 + } + ] + } + ], + "variables": [ + { + "variableId": "itemsData_selected_sum_price", + "type": "object", + "isArray": true, + "initialValue": [], + "calculation": { + "dependsOn": [ + "itemsData_selected" + ], + "dataFrameTransformations": [ + { + "type": "aggregate", + "ops": [ + "sum" + ], + "fields": [ + "price" + ], + "as": [ + "sum_price" + ] + } + ] + } + }, + { + "variableId": "total", + "type": "number", + "initialValue": 0, + "calculation": { + "vegaExpression": "format(data('itemsData_selected_sum_price')[0] ? data('itemsData_selected_sum_price')[0].sum_price : 0, ',.2f')" + } + } + ], + "groups": [ + { + "groupId": "slide1", + "elements": [ + "## Welcome to the Shopping List App\n" + ] + }, + { + "groupId": "slide2", + "elements": [ + "## Here you can select items to buy from a variety of categories.\n", + "### Categories include Fruits, Bakery, Dairy, Meat, Vegetables, and Pantry items.\n", + "### You can select multiple items and see the total price calculated automatically." + ] + }, + { + "groupId": "slide3", + "elements": [ + "## Let's start by selecting some items from the list below.\n", + "### Click on the checkboxes next to the items you want to add to your shopping list." + ] + }, + { + "groupId": "slide4", + "elements": [ + "## Select the items you want to buy\n", + { + "type": "table", + "dataSourceName": "itemsData", + "variableId": "itemsData_selected", + "tabulatorOptions": { + "autoColumns": true, + "layout": "fitColumns", + "minHeight": "200px", + "maxHeight": "200px", + "selectableRows": true, + "rowHeader": { + "formatter": "rowSelection", + "titleFormatter": "rowSelection", + "headerSort": false, + "headerHozAlign": "center", + "hozAlign": "center", + "width": 40 + } + } + }, + "## Total Price\n\n${{total}}\n\n### Categories", + { + "type": "chart", + "chartKey": "1" + } + ] + } + ], + "resources": { + "charts": { + "1": { + "$schema": "https://vega.github.io/schema/vega-lite/v6.json", + "data": { + "name": "itemsData_selected" + }, + "mark": "bar", + "encoding": { + "x": { + "field": "category", + "type": "nominal", + "title": "Category" + }, + "y": { + "aggregate": "count", + "type": "quantitative", + "title": "Number of Items" + }, + "color": { + "field": "category", + "type": "nominal", + "legend": { + "title": "Category" + } + } + } + } + } + } +} \ No newline at end of file diff --git a/docs/assets/examples/markdown/features/chart.idoc.md b/docs/assets/examples/markdown/features/chart.idoc.md new file mode 100644 index 00000000..7f9df30a --- /dev/null +++ b/docs/assets/examples/markdown/features/chart.idoc.md @@ -0,0 +1,68 @@ +```json vega +{ + "$schema": "https://vega.github.io/schema/vega/v5.json", + "description": "This is the central brain of the page", + "signals": [ + { + "name": "chartData", + "update": "data('chartData')" + } + ], + "data": [ + { + "name": "chartData", + "values": [ + { + "category": "A", + "value": 20 + }, + { + "category": "B", + "value": 34 + }, + { + "category": "C", + "value": 55 + }, + { + "category": "D", + "value": 40 + }, + { + "category": "E", + "value": 67 + } + ] + } + ] +} +``` + +## Chart +Use charts for data visualizations with Vega-Lite specifications. + +```json vega-lite +{ + "$schema": "https://vega.github.io/schema/vega-lite/v6.json", + "data": { + "name": "chartData" + }, + "mark": "bar", + "encoding": { + "x": { + "field": "category", + "type": "nominal", + "title": "Category" + }, + "y": { + "field": "value", + "type": "quantitative", + "title": "Value" + }, + "color": { + "field": "category", + "type": "nominal" + } + } +} +``` \ No newline at end of file diff --git a/docs/assets/examples/markdown/features/data-sources.idoc.md b/docs/assets/examples/markdown/features/data-sources.idoc.md new file mode 100644 index 00000000..d367e076 --- /dev/null +++ b/docs/assets/examples/markdown/features/data-sources.idoc.md @@ -0,0 +1,265 @@ +```json vega +{ + "$schema": "https://vega.github.io/schema/vega/v5.json", + "description": "This is the central brain of the page", + "signals": [ + { + "name": "jsonTable", + "update": "data('jsonTable')" + }, + { + "name": "csvTable", + "update": "data('csvTable')" + }, + { + "name": "jsonUrlTable", + "update": "data('jsonUrlTable')" + }, + { + "name": "inlineCsvTable", + "update": "data('inlineCsvTable')" + }, + { + "name": "json_url", + "value": "https://vega.github.io/editor/data/barley.json" + }, + { + "name": "jsonData", + "update": "data('jsonData')" + }, + { + "name": "csvData", + "update": "data('csvData')" + }, + { + "name": "url:0:__json_url__", + "update": "json_url" + }, + { + "name": "jsonUrlVariable", + "update": "data('jsonUrlVariable')" + }, + { + "name": "inlineCsvData", + "update": "data('inlineCsvData')" + } + ], + "data": [ + { + "name": "inlineCsvData", + "values": [ + { + "item": "Stapler", + "price": "12.99" + }, + { + "item": "Pen", + "price": "1.25" + }, + { + "item": "Lamp", + "price": "29.99" + } + ] + }, + { + "name": "jsonUrlVariable", + "url": { + "signal": "url:0:__json_url__" + }, + "format": { + "type": "json" + } + }, + { + "name": "csvData", + "url": "https://vega.github.io/editor/data/stocks.csv", + "format": { + "type": "csv" + } + }, + { + "name": "jsonData", + "values": [ + { + "item": "Stapler", + "category": "Office Tools", + "price": 12.99, + "inStock": true, + "quantity": 25 + }, + { + "item": "Printer Paper", + "category": "Paper", + "price": 8.5, + "inStock": true, + "quantity": 150 + }, + { + "item": "Blue Pens", + "category": "Writing", + "price": 3.25, + "inStock": false, + "quantity": 0 + }, + { + "item": "Notebooks", + "category": "Paper", + "price": 5.75, + "inStock": true, + "quantity": 40 + }, + { + "item": "Desk Lamp", + "category": "Furniture", + "price": 29.99, + "inStock": true, + "quantity": 8 + }, + { + "item": "Paper Clips", + "category": "Office Tools", + "price": 2.1, + "inStock": true, + "quantity": 200 + }, + { + "item": "Whiteboard Markers", + "category": "Writing", + "price": 7.8, + "inStock": false, + "quantity": 0 + }, + { + "item": "File Folders", + "category": "Storage", + "price": 4.45, + "inStock": true, + "quantity": 75 + }, + { + "item": "Ergonomic Chair", + "category": "Furniture", + "price": 189.99, + "inStock": true, + "quantity": 3 + }, + { + "item": "Post-it Notes", + "category": "Paper", + "price": 6.25, + "inStock": true, + "quantity": 120 + }, + { + "item": "Hole Punch", + "category": "Office Tools", + "price": 15.5, + "inStock": false, + "quantity": 0 + }, + { + "item": "Scissors", + "category": "Office Tools", + "price": 9.75, + "inStock": true, + "quantity": 18 + } + ] + }, + { + "name": "inlineCsvTable", + "values": [] + }, + { + "name": "jsonUrlTable", + "values": [] + }, + { + "name": "csvTable", + "values": [] + }, + { + "name": "jsonTable", + "values": [] + } + ] +} +``` + +## JSON Data + +Load data from a static JSON array. + +```json tabulator +{ + "dataSourceName": "jsonData", + "variableId": "jsonTable", + "tabulatorOptions": { + "autoColumns": true, + "layout": "fitColumns", + "maxHeight": "100px" + } +} +``` + +## CSV from URL + +Load CSV data from a fixed URL. + +```json tabulator +{ + "dataSourceName": "csvData", + "variableId": "csvTable", + "tabulatorOptions": { + "autoColumns": true, + "layout": "fitColumns", + "maxHeight": "200px" + } +} +``` + +## Complete URL Variable (JSON) + +You can use a single variable for the entire JSON URL. No URL encoding is applied to the value. + +Note: You can also construct URLs from multiple segments (e.g., `{{host}}/{{path}}`). In that case, each segment is encoded using `encodeURIComponent`. + +```json dropdown +{ + "variableId": "json_url", + "value": "https://vega.github.io/editor/data/barley.json", + "options": [ + "https://vega.github.io/editor/data/barley.json", + "https://vega.github.io/editor/data/cars.json" + ] +} +``` + +```json tabulator +{ + "dataSourceName": "jsonUrlVariable", + "variableId": "jsonUrlTable", + "tabulatorOptions": { + "autoColumns": true, + "layout": "fitColumns", + "maxHeight": "200px" + } +} +``` + +## Inline CSV Data + +You can provide CSV data directly as a single string. + +```json tabulator +{ + "dataSourceName": "inlineCsvData", + "variableId": "inlineCsvTable", + "tabulatorOptions": { + "autoColumns": true, + "layout": "fitColumns", + "maxHeight": "100px" + } +} +``` \ No newline at end of file diff --git a/docs/assets/examples/markdown/features/data-transformations.idoc.md b/docs/assets/examples/markdown/features/data-transformations.idoc.md new file mode 100644 index 00000000..61bc44c9 --- /dev/null +++ b/docs/assets/examples/markdown/features/data-transformations.idoc.md @@ -0,0 +1,140 @@ +```json vega +{ + "$schema": "https://vega.github.io/schema/vega/v5.json", + "description": "This is the central brain of the page", + "signals": [ + { + "name": "filteredTable", + "update": "data('filteredTable')" + }, + { + "name": "categoryStatsTable", + "update": "data('categoryStatsTable')" + }, + { + "name": "maxPrice", + "value": 100 + }, + { + "name": "categoryStats", + "update": "data('categoryStats')" + }, + { + "name": "rawData", + "update": "data('rawData')" + } + ], + "data": [ + { + "name": "rawData", + "values": [ + { + "name": "Product A", + "category": "Electronics", + "price": 299, + "inStock": true + }, + { + "name": "Product B", + "category": "Electronics", + "price": 199, + "inStock": false + }, + { + "name": "Product C", + "category": "Clothing", + "price": 49, + "inStock": true + }, + { + "name": "Product D", + "category": "Clothing", + "price": 79, + "inStock": true + }, + { + "name": "Product E", + "category": "Books", + "price": 15, + "inStock": true + } + ], + "transform": [ + { + "type": "filter", + "expr": "datum.inStock && datum.price <= maxPrice" + } + ] + }, + { + "name": "categoryStatsTable", + "values": [] + }, + { + "name": "filteredTable", + "values": [] + }, + { + "name": "categoryStats", + "source": [ + "rawData" + ], + "transform": [ + { + "type": "aggregate", + "groupby": [ + "category" + ], + "ops": [ + "count", + "mean" + ], + "fields": [ + "name", + "price" + ], + "as": [ + "count", + "avgPrice" + ] + } + ] + } + ] +} +``` + +## Data Transformations +Use data transformations to filter, aggregate, and manipulate data. + +```json slider +{"variableId":"maxPrice","value":100,"label":"Maximum price filter:","min":0,"max":500,"step":10} +``` + +### Filtered Products (in stock, price ≤ ${{maxPrice}}) + +```json tabulator +{ + "dataSourceName": "rawData", + "variableId": "filteredTable", + "tabulatorOptions": { + "autoColumns": true, + "layout": "fitColumns", + "maxHeight": "200px" + } +} +``` + +### Category Statistics + +```json tabulator +{ + "dataSourceName": "categoryStats", + "variableId": "categoryStatsTable", + "tabulatorOptions": { + "autoColumns": true, + "layout": "fitColumns", + "maxHeight": "150px" + } +} +``` \ No newline at end of file diff --git a/docs/assets/examples/markdown/features/data-url.idoc.md b/docs/assets/examples/markdown/features/data-url.idoc.md new file mode 100644 index 00000000..c0662746 --- /dev/null +++ b/docs/assets/examples/markdown/features/data-url.idoc.md @@ -0,0 +1,92 @@ +```json vega +{ + "$schema": "https://vega.github.io/schema/vega/v5.json", + "description": "This is the central brain of the page", + "signals": [ + { + "name": "jsonTable", + "update": "data('jsonTable')" + }, + { + "name": "anything", + "value": "abc" + }, + { + "name": "url:0:http___127_0_0_1_8000___anything___json", + "update": "'http://127.0.0.1:8000/' + encodeURIComponent(anything) + '.json'" + }, + { + "name": "jsonData", + "update": "data('jsonData')" + } + ], + "data": [ + { + "name": "jsonData", + "url": { + "signal": "url:0:http___127_0_0_1_8000___anything___json" + }, + "format": { + "type": "json" + } + }, + { + "name": "jsonTable", + "values": [] + } + ] +} +``` + +## Data Sources +Load data from JSON, CSV, TSV, or URLs with optional transformations. + +### JSON Data + +```json dropdown +{ + "variableId": "anything", + "value": "abc", + "options": [ + "abc", + "def" + ] +} +``` + +```json vega-lite +{ + "$schema": "https://vega.github.io/schema/vega-lite/v6.json", + "data": { + "name": "jsonData" + }, + "mark": "bar", + "encoding": { + "x": { + "field": "category" + }, + "y": { + "field": "value", + "type": "quantitative" + }, + "xOffset": { + "field": "group" + }, + "color": { + "field": "group" + } + } +} +``` + +```json tabulator +{ + "dataSourceName": "jsonData", + "variableId": "jsonTable", + "tabulatorOptions": { + "autoColumns": true, + "layout": "fitColumns", + "maxHeight": "100px" + } +} +``` \ No newline at end of file diff --git a/docs/assets/examples/markdown/features/dropdown.idoc.md b/docs/assets/examples/markdown/features/dropdown.idoc.md new file mode 100644 index 00000000..123b5df5 --- /dev/null +++ b/docs/assets/examples/markdown/features/dropdown.idoc.md @@ -0,0 +1,96 @@ +```json vega +{ + "$schema": "https://vega.github.io/schema/vega/v5.json", + "description": "This is the central brain of the page", + "signals": [ + { + "name": "productTable", + "update": "data('productTable')" + }, + { + "name": "selectedProduct", + "value": "Laptop Pro" + }, + { + "name": "productData", + "update": "data('productData')" + } + ], + "data": [ + { + "name": "productData", + "values": [ + { + "name": "Laptop Pro", + "category": "Electronics", + "price": 1299 + }, + { + "name": "Wireless Mouse", + "category": "Electronics", + "price": 49 + }, + { + "name": "Office Chair", + "category": "Furniture", + "price": 299 + }, + { + "name": "Standing Desk", + "category": "Furniture", + "price": 599 + }, + { + "name": "Coffee Mug", + "category": "Kitchen", + "price": 15 + }, + { + "name": "Water Bottle", + "category": "Kitchen", + "price": 25 + } + ] + }, + { + "name": "productTable", + "values": [] + } + ] +} +``` + +## Dropdown +Use dropdowns with data-driven options from data sources. + +### Data-Driven Options + +Dropdown options populated from data using `dynamicOptions`: + +```json dropdown +{ + "variableId": "selectedProduct", + "value": "Laptop Pro", + "label": "Choose product:", + "dynamicOptions": { + "dataSourceName": "productData", + "fieldName": "name" + } +} +``` + +Selected: **{{selectedProduct}}** + +### Product Data + +```json tabulator +{ + "dataSourceName": "productData", + "variableId": "productTable", + "tabulatorOptions": { + "autoColumns": true, + "layout": "fitColumns", + "maxHeight": "200px" + } +} +``` \ No newline at end of file diff --git a/docs/assets/examples/markdown/features/image.idoc.md b/docs/assets/examples/markdown/features/image.idoc.md new file mode 100644 index 00000000..09acc6c9 --- /dev/null +++ b/docs/assets/examples/markdown/features/image.idoc.md @@ -0,0 +1,104 @@ +```json vega +{ + "$schema": "https://vega.github.io/schema/vega/v5.json", + "description": "This is the central brain of the page", + "signals": [ + { + "name": "img_height", + "value": "300" + }, + { + "name": "img_width", + "value": "400" + }, + { + "name": "img_url", + "value": "https://picsum.photos/400/300" + } + ] +} +``` + +## Server-Generated Images + +Images are particularly powerful for server-side generated visualizations: + +- **Python plots** - matplotlib, seaborn, plotly exports + +- **R visualizations** - ggplot2, base R graphics + +- **Dynamic charts** - generated based on current data + +- **Custom graphics** - any server-side image generation + + + +Example server endpoint: `/api/regressionplot?target={{targetVariable}}&model={{modelType}}&theme={{colorTheme}}` + + + +Images support dynamic URLs with query parameters and can be regenerated in real-time. + +*samples below provided by [picsum.photos](https://picsum.photos/)* + +## Complete URL Variable + +You can use a single variable for the entire image URL. No URL encoding is applied to the value. + +```json dropdown +{ + "variableId": "img_url", + "value": "https://picsum.photos/400/300", + "options": [ + "https://picsum.photos/100/100", + "https://picsum.photos/200/200", + "https://picsum.photos/300/300", + "https://picsum.photos/400/300", + "https://picsum.photos/400/400" + ] +} +``` + +```json image +{ + "url": "{{img_url}}", + "alt": "Complete URL variable example" +} +``` + +## URL Segments + +You can construct image URLs from multiple variables. Each segment is encoded using `encodeURIComponent`. + +```json dropdown +{ + "variableId": "img_height", + "value": "300", + "options": [ + "100", + "200", + "300", + "400" + ] +} +``` + +```json dropdown +{ + "variableId": "img_width", + "value": "400", + "options": [ + "100", + "200", + "300", + "400" + ] +} +``` + +```json image +{ + "url": "https://picsum.photos/{{img_width}}/{{img_height}}", + "alt": "URL segments example" +} +``` \ No newline at end of file diff --git a/docs/assets/examples/markdown/features/input-controls.idoc.md b/docs/assets/examples/markdown/features/input-controls.idoc.md new file mode 100644 index 00000000..ccbcb1dd --- /dev/null +++ b/docs/assets/examples/markdown/features/input-controls.idoc.md @@ -0,0 +1,92 @@ +```json vega +{ + "$schema": "https://vega.github.io/schema/vega/v5.json", + "description": "This is the central brain of the page", + "signals": [ + { + "name": "isEnabled", + "value": true + }, + { + "name": "userName", + "value": "John Doe" + }, + { + "name": "temperature", + "value": 20 + }, + { + "name": "opacity", + "value": 0.5 + }, + { + "name": "selectedColor", + "value": "blue" + }, + { + "name": "selectedItems", + "value": [ + "apple", + "banana" + ] + } + ] +} +``` + +## Input Controls + +Hello **{{userName}}**! Feature enabled: **{{isEnabled}}**. Temperature: **{{temperature}}°C**. Color: **{{selectedColor}}**. Items: **{{selectedItems}}**. + +### Checkbox + +```json checkbox +{"variableId":"isEnabled","value":true,"label":"Enable feature"} +``` + +### Textbox + +```json textbox +{"variableId":"userName","value":"John Doe","label":"Name:"} +``` + +### Slider + +```json slider +{"variableId":"temperature","value":20,"label":"Temperature:","min":-10,"max":40,"step":1} +``` + +### Dropdown + +```json dropdown +{ + "variableId": "selectedColor", + "value": "blue", + "label": "Color:", + "options": [ + "red", + "green", + "blue", + "yellow" + ] +} +``` + +```json dropdown +{ + "variableId": "selectedItems", + "value": [ + "apple", + "banana" + ], + "label": "Items:", + "options": [ + "apple", + "banana", + "orange", + "grape" + ], + "multiple": true, + "size": 3 +} +``` \ No newline at end of file diff --git a/docs/assets/examples/markdown/features/markdown.idoc.md b/docs/assets/examples/markdown/features/markdown.idoc.md new file mode 100644 index 00000000..5115e488 --- /dev/null +++ b/docs/assets/examples/markdown/features/markdown.idoc.md @@ -0,0 +1,14 @@ +## Markdown +Use markdown to format text, create headings, lists, and more. HTML tags are not allowed. + +### Text Formatting + +**Bold**, *italic*, `code` text, and [links](https://microsoft.com). + +### Lists + +1. Numbered lists +2. Work great + +- Bullet points +- Also work \ No newline at end of file diff --git a/docs/assets/examples/markdown/features/presets.idoc.md b/docs/assets/examples/markdown/features/presets.idoc.md new file mode 100644 index 00000000..b241ee60 --- /dev/null +++ b/docs/assets/examples/markdown/features/presets.idoc.md @@ -0,0 +1,65 @@ +```json vega +{ + "$schema": "https://vega.github.io/schema/vega/v5.json", + "description": "This is the central brain of the page", + "signals": [ + { + "name": "size", + "value": 5 + }, + { + "name": "color", + "value": "blue" + } + ] +} +``` + +## Presets +Use presets to provide predefined state configurations. + +```json presets +[ + { + "name": "Small & Red", + "state": { + "size": 2, + "color": "red" + } + }, + { + "name": "Large & Green", + "state": { + "size": 10, + "color": "green" + } + }, + { + "name": "Medium & Gray", + "state": { + "size": 7, + "color": "gray" + } + } +] +``` + +```json slider +{"variableId":"size","value":5,"label":"Size:","min":1,"max":15,"step":1} +``` + +```json dropdown +{ + "variableId": "color", + "value": "blue", + "label": "Color:", + "options": [ + "red", + "green", + "blue", + "gray" + ] +} +``` + +Current state: Size **{{size}}**, Color **{{color}}** \ No newline at end of file diff --git a/docs/assets/examples/markdown/features/styling.idoc.md b/docs/assets/examples/markdown/features/styling.idoc.md new file mode 100644 index 00000000..68fbb3f9 --- /dev/null +++ b/docs/assets/examples/markdown/features/styling.idoc.md @@ -0,0 +1,112 @@ +```css +.group { padding: 20px; background-color: #f8f9fa; border: 2px solid #3498db; border-radius: 8px; margin-bottom: 20px; } .group h2 { color: #3498db; } .group h3 { color: #2c3e50; } #demo { background-color: #e8f5e8; border-color: #28a745; } #demo h2 { color: #28a745; } +``` + +```json google-fonts +{ + "googleFontsUrl": "https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Source+Code+Pro:wght@400;600&family=Inter:wght@300;400;500&family=Roboto+Slab:wght@400;700&display=swap", + "mapping": { + "body": "Inter", + "hero": "Playfair Display", + "headings": "Roboto Slab", + "code": "Source Code Pro", + "table": "Source Code Pro" + }, + "sizing": { + "body": 1, + "hero": 2.5, + "headings": 1.5, + "code": 0.8, + "table": 0.9 + } +} +``` + +::: group {#main} +## CSS Styling +Use CSS to style documents with custom layouts and appearance. + +### How CSS Works + +- Each group gets a `.group` className automatically + +- Each group gets an `#id` based on the groupId + +- Add custom CSS in the `layout.css` property + +- Style headers, backgrounds, borders, and spacing + +- CSS applies to all groups in the document +::: + +::: group {#demo} +## Demo Section + +This section has `groupId="demo"` so it gets `id="demo"` and can be styled with `#demo`. + +Notice this section has a green theme instead of blue, applied via the `#demo` CSS selector. +::: + +::: group {#google-fonts-demo} +## Google Fonts Demo +This section demonstrates the Google Fonts plugin with cascading font behavior and semantic mapping. + +```json google-fonts +{ + "googleFontsUrl": "https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Source+Code+Pro:wght@400;600&family=Inter:wght@300;400;500&family=Roboto+Slab:wght@400;700&display=swap", + "mapping": { + "body": "Inter", + "hero": "Playfair Display", + "headings": "Roboto Slab", + "code": "Source Code Pro", + "table": "Source Code Pro" + }, + "sizing": { + "body": 1, + "hero": 2.5, + "headings": 1.5, + "code": 0.8, + "table": 0.9 + } +} +``` + +# Hero Headline Level 1 + +## Hero Headline Level 2 + +### Hero Headline Level 3 + +#### Regular Heading Level 4 + +This is regular paragraph text that demonstrates the body font. Lorem ipsum dolor sit amet, consectetur adipiscing elit. + +- Bulleted list item +- Another list item +- Third item + +1. Numbered list item one +2. Second numbered item +3. Third numbered item + +**Bold text** and *italic text* also inherit the body font. + +Here's some `inline code` and a code block: + +```javascript +// Code blocks use the code font mapping +function example() { + console.log("Hello, World!"); +} +``` + +#### Tables + +| Column 1 | Column 2 | Column 3 | +|----------|----------|----------| +| Cell 1 | Cell 2 | Cell 3 | +| Data A | Data B | Data C | +| Numbers | 123.45 | 678.90 | + +This content lets you see how different fonts apply to different semantic elements without any distracting references to the font names. +::: \ No newline at end of file diff --git a/docs/assets/examples/markdown/features/table.idoc.md b/docs/assets/examples/markdown/features/table.idoc.md new file mode 100644 index 00000000..e1a227ee --- /dev/null +++ b/docs/assets/examples/markdown/features/table.idoc.md @@ -0,0 +1,95 @@ +```json vega +{ + "$schema": "https://vega.github.io/schema/vega/v5.json", + "description": "This is the central brain of the page", + "signals": [ + { + "name": "table1", + "update": "data('table1')" + }, + { + "name": "table2", + "update": "data('table2')" + }, + { + "name": "sampleData", + "update": "data('sampleData')" + } + ], + "data": [ + { + "name": "sampleData", + "values": [ + { + "name": "Alice", + "age": 25, + "city": "New York" + }, + { + "name": "Bob", + "age": 30, + "city": "Chicago" + }, + { + "name": "Carol", + "age": 35, + "city": "Los Angeles" + }, + { + "name": "David", + "age": 28, + "city": "Seattle" + } + ] + }, + { + "name": "table2", + "values": [] + }, + { + "name": "table1", + "values": [] + } + ] +} +``` + +## Table +Use tables for displaying and interacting with tabular data. + +### Basic Table + +```json tabulator +{ + "dataSourceName": "sampleData", + "variableId": "table1", + "tabulatorOptions": { + "autoColumns": true, + "layout": "fitColumns", + "maxHeight": "200px" + } +} +``` + +### Selectable Table + +```json tabulator +{ + "dataSourceName": "sampleData", + "variableId": "table2", + "tabulatorOptions": { + "autoColumns": true, + "layout": "fitColumns", + "maxHeight": "200px", + "selectableRows": true, + "rowHeader": { + "formatter": "rowSelection", + "titleFormatter": "rowSelection", + "headerSort": false, + "headerHozAlign": "center", + "hozAlign": "center", + "width": 40 + } + } +} +``` \ No newline at end of file diff --git a/docs/assets/examples/markdown/features/urls.idoc.md b/docs/assets/examples/markdown/features/urls.idoc.md new file mode 100644 index 00000000..baddf403 --- /dev/null +++ b/docs/assets/examples/markdown/features/urls.idoc.md @@ -0,0 +1,79 @@ +```json vega +{ + "$schema": "https://vega.github.io/schema/vega/v5.json", + "description": "This is the central brain of the page", + "signals": [ + { + "name": "imageSize", + "value": 300 + }, + { + "name": "imageCategory", + "value": "nature" + }, + { + "name": "seed", + "value": 123 + } + ] +} +``` + +## URLs +Construct dynamic URLs using variables in paths and query parameters. + +```json slider +{"variableId":"imageSize","value":300,"label":"Image size:","min":100,"max":600,"step":50} +``` + +```json dropdown +{ + "variableId": "imageCategory", + "value": "nature", + "label": "Category:", + "options": [ + "nature", + "city", + "technology", + "abstract" + ] +} +``` + +```json slider +{"variableId":"seed","value":123,"label":"Random seed:","min":1,"max":1000,"step":1} +``` + +### Basic URL Construction + +URLs are built with `origin` + `urlPath`: + +```json image +{ + "url": "https://picsum.photos/{{imageSize}}", + "alt": "Dynamic image example", + "width": 400, + "height": 300 +} +``` + +Current URL: `https://picsum.photos/{{imageSize}}` + +### URL with Query Parameters + +Use `mappedParams` to add variables as query parameters: + +```json image +{ + "url": "https://picsum.photo/{{imageSize}}?category={{imageCategory}}&seed={{seed}}", + "alt": "Image with query parameters", + "width": 400, + "height": 300 +} +``` + +Current URL: `https://picsum.photos/{{imageSize}}?category={{imageCategory}}&seed={{seed}}` + +### Usage in Data Sources + +URLs work the same way for loading data - origin, path, and optional query parameters with variables. \ No newline at end of file diff --git a/docs/assets/examples/markdown/features/variables.idoc.md b/docs/assets/examples/markdown/features/variables.idoc.md new file mode 100644 index 00000000..a8dd8431 --- /dev/null +++ b/docs/assets/examples/markdown/features/variables.idoc.md @@ -0,0 +1,52 @@ +```json vega +{ + "$schema": "https://vega.github.io/schema/vega/v5.json", + "description": "This is the central brain of the page", + "signals": [ + { + "name": "userName", + "value": "Alice" + }, + { + "name": "temperature", + "value": 20 + }, + { + "name": "isEnabled", + "value": true + }, + { + "name": "obj", + "value": { + "foo": "bar", + "value": 42 + } + }, + { + "name": "doubled_temperature", + "value": 40, + "update": "temperature * 2" + }, + { + "name": "value", + "value": 42, + "update": "obj.value" + } + ] +} +``` + +## Variables +Variables store values that can be referenced in markdown using `{{variableName}}` syntax. + +**String:** Hello, **{{userName}}**! + +**Number:** The count is **{{temperature}}** + +**Boolean:** Feature status: **{{isEnabled}}** + +**Object:** `obj` = JSON object with foo and value properties + +**Calculated:** Count doubled is **{{doubled_temperature}}** + +**Calculated:** Value from object: **{{value}}** \ No newline at end of file diff --git a/docs/assets/examples/markdown/grocery-list.idoc.md b/docs/assets/examples/markdown/grocery-list.idoc.md new file mode 100644 index 00000000..2979f4c9 --- /dev/null +++ b/docs/assets/examples/markdown/grocery-list.idoc.md @@ -0,0 +1,236 @@ +```json vega +{ + "$schema": "https://vega.github.io/schema/vega/v5.json", + "description": "This is the central brain of the page", + "signals": [ + { + "name": "itemsData_selected", + "update": "data('itemsData_selected')" + }, + { + "name": "itemsData_selected_sum_price", + "update": "data('itemsData_selected_sum_price')" + }, + { + "name": "total", + "value": 0, + "update": "format(data('itemsData_selected_sum_price')[0] ? data('itemsData_selected_sum_price')[0].sum_price : 0, ',.2f')" + }, + { + "name": "itemsData", + "update": "data('itemsData')" + } + ], + "data": [ + { + "name": "itemsData", + "values": [ + { + "item": "Apples", + "category": "Fruits", + "price": 1.2 + }, + { + "item": "Bananas", + "category": "Fruits", + "price": 0.5 + }, + { + "item": "Oranges", + "category": "Fruits", + "price": 0.8 + }, + { + "item": "Strawberries", + "category": "Fruits", + "price": 2.5 + }, + { + "item": "Grapes", + "category": "Fruits", + "price": 2.2 + }, + { + "item": "Bread", + "category": "Bakery", + "price": 2 + }, + { + "item": "Bagels", + "category": "Bakery", + "price": 1.8 + }, + { + "item": "Croissant", + "category": "Bakery", + "price": 2.3 + }, + { + "item": "Milk", + "category": "Dairy", + "price": 1.5 + }, + { + "item": "Cheese", + "category": "Dairy", + "price": 3 + }, + { + "item": "Yogurt", + "category": "Dairy", + "price": 1.1 + }, + { + "item": "Eggs", + "category": "Dairy", + "price": 2.4 + }, + { + "item": "Chicken Breast", + "category": "Meat", + "price": 5 + }, + { + "item": "Ground Beef", + "category": "Meat", + "price": 4.5 + }, + { + "item": "Salmon", + "category": "Meat", + "price": 7 + }, + { + "item": "Carrots", + "category": "Vegetables", + "price": 0.9 + }, + { + "item": "Broccoli", + "category": "Vegetables", + "price": 1.3 + }, + { + "item": "Lettuce", + "category": "Vegetables", + "price": 1 + }, + { + "item": "Tomatoes", + "category": "Vegetables", + "price": 1.2 + }, + { + "item": "Potatoes", + "category": "Vegetables", + "price": 0.7 + }, + { + "item": "Pasta", + "category": "Pantry", + "price": 1.1 + }, + { + "item": "Rice", + "category": "Pantry", + "price": 1 + }, + { + "item": "Cereal", + "category": "Pantry", + "price": 2.8 + }, + { + "item": "Olive Oil", + "category": "Pantry", + "price": 4 + } + ] + }, + { + "name": "itemsData_selected", + "values": [] + }, + { + "name": "itemsData_selected_sum_price", + "source": [ + "itemsData_selected" + ], + "transform": [ + { + "type": "aggregate", + "ops": [ + "sum" + ], + "fields": [ + "price" + ], + "as": [ + "sum_price" + ] + } + ] + } + ] +} +``` + +## Select the items you want to buy + + +```json tabulator +{ + "dataSourceName": "itemsData", + "variableId": "itemsData_selected", + "tabulatorOptions": { + "autoColumns": true, + "layout": "fitColumns", + "minHeight": "200px", + "maxHeight": "200px", + "selectableRows": true, + "rowHeader": { + "formatter": "rowSelection", + "titleFormatter": "rowSelection", + "headerSort": false, + "headerHozAlign": "center", + "hozAlign": "center", + "width": 40 + } + } +} +``` + +## Total Price + +${{total}} + +### Categories + +```json vega-lite +{ + "$schema": "https://vega.github.io/schema/vega-lite/v6.json", + "data": { + "name": "itemsData_selected" + }, + "mark": "bar", + "encoding": { + "x": { + "field": "category", + "type": "nominal", + "title": "Category" + }, + "y": { + "aggregate": "count", + "type": "quantitative", + "title": "Number of Items" + }, + "color": { + "field": "category", + "type": "nominal", + "legend": { + "title": "Category" + } + } + } +} +``` \ No newline at end of file diff --git a/docs/assets/examples/seattle-weather/1.idoc.md b/docs/assets/examples/markdown/seattle-weather/1.idoc.md similarity index 67% rename from docs/assets/examples/seattle-weather/1.idoc.md rename to docs/assets/examples/markdown/seattle-weather/1.idoc.md index 95b945a3..216ec50f 100644 --- a/docs/assets/examples/seattle-weather/1.idoc.md +++ b/docs/assets/examples/markdown/seattle-weather/1.idoc.md @@ -7,7 +7,9 @@ The colors distinguish between different weather conditions such as sun, fog, dr ```json vega-lite { "$schema": "https://vega.github.io/schema/vega-lite/v6.json", - "data": {"url": "https://vega.github.io/editor/data/seattle-weather.csv"}, + "data": { + "url": "https://vega.github.io/editor/data/seattle-weather.csv" + }, "mark": "bar", "encoding": { "x": { @@ -24,8 +26,20 @@ The colors distinguish between different weather conditions such as sun, fog, dr "field": "weather", "type": "nominal", "scale": { - "domain": ["sun", "fog", "drizzle", "rain", "snow"], - "range": ["#e7ba52", "#c7c7c7", "#aec7e8", "#1f77b4", "#9467bd"] + "domain": [ + "sun", + "fog", + "drizzle", + "rain", + "snow" + ], + "range": [ + "#e7ba52", + "#c7c7c7", + "#aec7e8", + "#1f77b4", + "#9467bd" + ] }, "title": "Weather type" } diff --git a/docs/assets/examples/seattle-weather/2.idoc.md b/docs/assets/examples/markdown/seattle-weather/2.idoc.md similarity index 58% rename from docs/assets/examples/seattle-weather/2.idoc.md rename to docs/assets/examples/markdown/seattle-weather/2.idoc.md index a63ed9f0..0b3712e3 100644 --- a/docs/assets/examples/seattle-weather/2.idoc.md +++ b/docs/assets/examples/markdown/seattle-weather/2.idoc.md @@ -7,7 +7,9 @@ The colors distinguish between different weather conditions such as sun, fog, dr ```json vega-lite { "$schema": "https://vega.github.io/schema/vega-lite/v6.json", - "data": {"url": "https://vega.github.io/editor/data/seattle-weather.csv"}, + "data": { + "url": "https://vega.github.io/editor/data/seattle-weather.csv" + }, "mark": "bar", "encoding": { "x": { @@ -24,8 +26,20 @@ The colors distinguish between different weather conditions such as sun, fog, dr "field": "weather", "type": "nominal", "scale": { - "domain": ["sun", "fog", "drizzle", "rain", "snow"], - "range": ["#e7ba52", "#c7c7c7", "#aec7e8", "#1f77b4", "#9467bd"] + "domain": [ + "sun", + "fog", + "drizzle", + "rain", + "snow" + ], + "range": [ + "#e7ba52", + "#c7c7c7", + "#aec7e8", + "#1f77b4", + "#9467bd" + ] }, "title": "Weather type" } @@ -42,44 +56,44 @@ It provides an intuitive way to identify patterns, trends, and anomalies in the { "$schema": "https://vega.github.io/schema/vega-lite/v6.json", "data": { - "url": "https://vega.github.io/editor/data/seattle-weather.csv" + "url": "https://vega.github.io/editor/data/seattle-weather.csv" }, "title": "Daily Max Temperatures (C) in Seattle, WA", "config": { - "view": { - "strokeWidth": 0, - "step": 13 - }, - "axis": { - "domain": false - } + "view": { + "strokeWidth": 0, + "step": 13 + }, + "axis": { + "domain": false + } }, "mark": "rect", "encoding": { - "x": { - "field": "date", - "timeUnit": "date", - "type": "ordinal", - "title": "Day", - "axis": { - "labelAngle": 0, - "format": "%e" - } - }, - "y": { - "field": "date", - "timeUnit": "month", - "type": "ordinal", - "title": "Month" - }, - "color": { - "field": "temp_max", - "aggregate": "max", - "type": "quantitative", - "legend": { - "title": null - } + "x": { + "field": "date", + "timeUnit": "date", + "type": "ordinal", + "title": "Day", + "axis": { + "labelAngle": 0, + "format": "%e" } + }, + "y": { + "field": "date", + "timeUnit": "month", + "type": "ordinal", + "title": "Month" + }, + "color": { + "field": "temp_max", + "aggregate": "max", + "type": "quantitative", + "legend": { + "title": null + } + } } } ``` \ No newline at end of file diff --git a/docs/assets/examples/seattle-weather/6.idoc.md b/docs/assets/examples/markdown/seattle-weather/3.idoc.md similarity index 51% rename from docs/assets/examples/seattle-weather/6.idoc.md rename to docs/assets/examples/markdown/seattle-weather/3.idoc.md index 9ce55a4b..10f7ff4f 100644 --- a/docs/assets/examples/seattle-weather/6.idoc.md +++ b/docs/assets/examples/markdown/seattle-weather/3.idoc.md @@ -1,21 +1,11 @@ -# Seattle Weather - ```json vega { - "description": "This is the central brain of the page", "$schema": "https://vega.github.io/schema/vega/v5.json", + "description": "This is the central brain of the page", "signals": [ { "name": "seattle_weather", "update": "data('seattle_weather')" - }, - { - "name": "IncludeSun", - "value": true, - "bind": { - "input": "checkbox", - "name": "Include Sun: " - } } ], "data": [ @@ -24,26 +14,13 @@ "url": "https://vega.github.io/editor/data/seattle-weather.csv", "format": { "type": "csv" - }, - "transform": [ - { - "type": "filter", - "expr": "IncludeSun ? true : datum.weather != 'sun'" - } - ] + } } ] } ``` -Data table: - -```json tabulator -{ - "dataSourceName": "seattle_weather", - "variableId": "seattle_weather_selected" -} -``` +# Seattle Weather Here is a stacked bar chart of Seattle weather: Each bar represents the count of weather types for each month. @@ -52,7 +29,9 @@ The colors distinguish between different weather conditions such as sun, fog, dr ```json vega-lite { "$schema": "https://vega.github.io/schema/vega-lite/v6.json", - "data": {"name": "seattle_weather"}, + "data": { + "name": "seattle_weather" + }, "mark": "bar", "encoding": { "x": { @@ -69,8 +48,20 @@ The colors distinguish between different weather conditions such as sun, fog, dr "field": "weather", "type": "nominal", "scale": { - "domain": ["sun", "fog", "drizzle", "rain", "snow"], - "range": ["#e7ba52", "#c7c7c7", "#aec7e8", "#1f77b4", "#9467bd"] + "domain": [ + "sun", + "fog", + "drizzle", + "rain", + "snow" + ], + "range": [ + "#e7ba52", + "#c7c7c7", + "#aec7e8", + "#1f77b4", + "#9467bd" + ] }, "title": "Weather type" } @@ -78,48 +69,53 @@ The colors distinguish between different weather conditions such as sun, fog, dr } ``` -And here is a heatmap: +This section introduces a heatmap visualization for the Seattle weather dataset. +The heatmap is designed to display the distribution and intensity of weather-related variables, +such as temperature, precipitation, or frequency of weather events, across different time periods or categories. +It provides an intuitive way to identify patterns, trends, and anomalies in the dataset. ```json vega-lite { "$schema": "https://vega.github.io/schema/vega-lite/v6.json", - "data": {"name": "seattle_weather"}, + "data": { + "name": "seattle_weather" + }, "title": "Daily Max Temperatures (C) in Seattle, WA", "config": { - "view": { - "strokeWidth": 0, - "step": 13 - }, - "axis": { - "domain": false - } + "view": { + "strokeWidth": 0, + "step": 13 + }, + "axis": { + "domain": false + } }, "mark": "rect", "encoding": { - "x": { - "field": "date", - "timeUnit": "date", - "type": "ordinal", - "title": "Day", - "axis": { - "labelAngle": 0, - "format": "%e" - } - }, - "y": { - "field": "date", - "timeUnit": "month", - "type": "ordinal", - "title": "Month" - }, - "color": { - "field": "temp_max", - "aggregate": "max", - "type": "quantitative", - "legend": { - "title": null - } + "x": { + "field": "date", + "timeUnit": "date", + "type": "ordinal", + "title": "Day", + "axis": { + "labelAngle": 0, + "format": "%e" } + }, + "y": { + "field": "date", + "timeUnit": "month", + "type": "ordinal", + "title": "Month" + }, + "color": { + "field": "temp_max", + "aggregate": "max", + "type": "quantitative", + "legend": { + "title": null + } + } } } ``` \ No newline at end of file diff --git a/docs/assets/examples/markdown/seattle-weather/4.idoc.md b/docs/assets/examples/markdown/seattle-weather/4.idoc.md new file mode 100644 index 00000000..8c791126 --- /dev/null +++ b/docs/assets/examples/markdown/seattle-weather/4.idoc.md @@ -0,0 +1,138 @@ +```json vega +{ + "$schema": "https://vega.github.io/schema/vega/v5.json", + "description": "This is the central brain of the page", + "signals": [ + { + "name": "seattle_weather_selected", + "update": "data('seattle_weather_selected')" + }, + { + "name": "seattle_weather", + "update": "data('seattle_weather')" + } + ], + "data": [ + { + "name": "seattle_weather", + "url": "https://vega.github.io/editor/data/seattle-weather.csv", + "format": { + "type": "csv" + } + }, + { + "name": "seattle_weather_selected", + "values": [] + } + ] +} +``` + +# Seattle Weather + +Data table: + +```json tabulator +{ + "dataSourceName": "seattle_weather", + "variableId": "seattle_weather_selected" +} +``` + +Here is a stacked bar chart of Seattle weather: +Each bar represents the count of weather types for each month. +The colors distinguish between different weather conditions such as sun, fog, drizzle, rain, and snow. + +```json vega-lite +{ + "$schema": "https://vega.github.io/schema/vega-lite/v6.json", + "data": { + "name": "seattle_weather" + }, + "mark": "bar", + "encoding": { + "x": { + "timeUnit": "month", + "field": "date", + "type": "ordinal", + "title": "Month of the year" + }, + "y": { + "aggregate": "count", + "type": "quantitative" + }, + "color": { + "field": "weather", + "type": "nominal", + "scale": { + "domain": [ + "sun", + "fog", + "drizzle", + "rain", + "snow" + ], + "range": [ + "#e7ba52", + "#c7c7c7", + "#aec7e8", + "#1f77b4", + "#9467bd" + ] + }, + "title": "Weather type" + } + } +} +``` + +This section introduces a heatmap visualization for the Seattle weather dataset. +The heatmap is designed to display the distribution and intensity of weather-related variables, +such as temperature, precipitation, or frequency of weather events, across different time periods or categories. +It provides an intuitive way to identify patterns, trends, and anomalies in the dataset. + +```json vega-lite +{ + "$schema": "https://vega.github.io/schema/vega-lite/v6.json", + "data": { + "name": "seattle_weather" + }, + "title": "Daily Max Temperatures (C) in Seattle, WA", + "config": { + "view": { + "strokeWidth": 0, + "step": 13 + }, + "axis": { + "domain": false + } + }, + "mark": "rect", + "encoding": { + "x": { + "field": "date", + "timeUnit": "date", + "type": "ordinal", + "title": "Day", + "axis": { + "labelAngle": 0, + "format": "%e" + } + }, + "y": { + "field": "date", + "timeUnit": "month", + "type": "ordinal", + "title": "Month" + }, + "color": { + "field": "temp_max", + "aggregate": "max", + "type": "quantitative", + "legend": { + "title": null + } + } + } +} +``` \ No newline at end of file diff --git a/docs/assets/examples/markdown/seattle-weather/5.idoc.md b/docs/assets/examples/markdown/seattle-weather/5.idoc.md new file mode 100644 index 00000000..86349ef0 --- /dev/null +++ b/docs/assets/examples/markdown/seattle-weather/5.idoc.md @@ -0,0 +1,144 @@ +```json vega +{ + "$schema": "https://vega.github.io/schema/vega/v5.json", + "description": "This is the central brain of the page", + "signals": [ + { + "name": "seattle_weather_selected", + "update": "data('seattle_weather_selected')" + }, + { + "name": "seattle_weather", + "update": "data('seattle_weather')" + } + ], + "data": [ + { + "name": "seattle_weather", + "url": "https://vega.github.io/editor/data/seattle-weather.csv", + "format": { + "type": "csv" + }, + "transform": [ + { + "type": "filter", + "expr": "datum.weather=='sun'" + } + ] + }, + { + "name": "seattle_weather_selected", + "values": [] + } + ] +} +``` + +# Seattle Weather + +Data table: + +```json tabulator +{ + "dataSourceName": "seattle_weather", + "variableId": "seattle_weather_selected" +} +``` + +Here is a stacked bar chart of Seattle weather: +Each bar represents the count of weather types for each month. +The colors distinguish between different weather conditions such as sun, fog, drizzle, rain, and snow. + +```json vega-lite +{ + "$schema": "https://vega.github.io/schema/vega-lite/v6.json", + "data": { + "name": "seattle_weather" + }, + "mark": "bar", + "encoding": { + "x": { + "timeUnit": "month", + "field": "date", + "type": "ordinal", + "title": "Month of the year" + }, + "y": { + "aggregate": "count", + "type": "quantitative" + }, + "color": { + "field": "weather", + "type": "nominal", + "scale": { + "domain": [ + "sun", + "fog", + "drizzle", + "rain", + "snow" + ], + "range": [ + "#e7ba52", + "#c7c7c7", + "#aec7e8", + "#1f77b4", + "#9467bd" + ] + }, + "title": "Weather type" + } + } +} +``` + +This section introduces a heatmap visualization for the Seattle weather dataset. +The heatmap is designed to display the distribution and intensity of weather-related variables, +such as temperature, precipitation, or frequency of weather events, across different time periods or categories. +It provides an intuitive way to identify patterns, trends, and anomalies in the dataset. + +```json vega-lite +{ + "$schema": "https://vega.github.io/schema/vega-lite/v6.json", + "data": { + "name": "seattle_weather" + }, + "title": "Daily Max Temperatures (C) in Seattle, WA", + "config": { + "view": { + "strokeWidth": 0, + "step": 13 + }, + "axis": { + "domain": false + } + }, + "mark": "rect", + "encoding": { + "x": { + "field": "date", + "timeUnit": "date", + "type": "ordinal", + "title": "Day", + "axis": { + "labelAngle": 0, + "format": "%e" + } + }, + "y": { + "field": "date", + "timeUnit": "month", + "type": "ordinal", + "title": "Month" + }, + "color": { + "field": "temp_max", + "aggregate": "max", + "type": "quantitative", + "legend": { + "title": null + } + } + } +} +``` \ No newline at end of file diff --git a/docs/assets/examples/markdown/seattle-weather/6.idoc.md b/docs/assets/examples/markdown/seattle-weather/6.idoc.md new file mode 100644 index 00000000..e049f730 --- /dev/null +++ b/docs/assets/examples/markdown/seattle-weather/6.idoc.md @@ -0,0 +1,152 @@ +```json vega +{ + "$schema": "https://vega.github.io/schema/vega/v5.json", + "description": "This is the central brain of the page", + "signals": [ + { + "name": "seattle_weather_selected", + "update": "data('seattle_weather_selected')" + }, + { + "name": "IncludeSun", + "value": true + }, + { + "name": "seattle_weather", + "update": "data('seattle_weather')" + } + ], + "data": [ + { + "name": "seattle_weather", + "url": "https://vega.github.io/editor/data/seattle-weather.csv", + "format": { + "type": "csv" + }, + "transform": [ + { + "type": "filter", + "expr": "IncludeSun ? true : datum.weather != 'sun'" + } + ] + }, + { + "name": "seattle_weather_selected", + "values": [] + } + ] +} +``` + +# Seattle Weather + +```json checkbox +{"variableId":"IncludeSun","value":true,"label":"Include Sun:"} +``` + +Data table: + +```json tabulator +{ + "dataSourceName": "seattle_weather", + "variableId": "seattle_weather_selected" +} +``` + +Here is a stacked bar chart of Seattle weather: +Each bar represents the count of weather types for each month. +The colors distinguish between different weather conditions such as sun, fog, drizzle, rain, and snow. + +```json vega-lite +{ + "$schema": "https://vega.github.io/schema/vega-lite/v6.json", + "data": { + "name": "seattle_weather" + }, + "mark": "bar", + "encoding": { + "x": { + "timeUnit": "month", + "field": "date", + "type": "ordinal", + "title": "Month of the year" + }, + "y": { + "aggregate": "count", + "type": "quantitative" + }, + "color": { + "field": "weather", + "type": "nominal", + "scale": { + "domain": [ + "sun", + "fog", + "drizzle", + "rain", + "snow" + ], + "range": [ + "#e7ba52", + "#c7c7c7", + "#aec7e8", + "#1f77b4", + "#9467bd" + ] + }, + "title": "Weather type" + } + } +} +``` + +This section introduces a heatmap visualization for the Seattle weather dataset. +The heatmap is designed to display the distribution and intensity of weather-related variables, +such as temperature, precipitation, or frequency of weather events, across different time periods or categories. +It provides an intuitive way to identify patterns, trends, and anomalies in the dataset. + +```json vega-lite +{ + "$schema": "https://vega.github.io/schema/vega-lite/v6.json", + "data": { + "name": "seattle_weather" + }, + "title": "Daily Max Temperatures (C) in Seattle, WA", + "config": { + "view": { + "strokeWidth": 0, + "step": 13 + }, + "axis": { + "domain": false + } + }, + "mark": "rect", + "encoding": { + "x": { + "field": "date", + "timeUnit": "date", + "type": "ordinal", + "title": "Day", + "axis": { + "labelAngle": 0, + "format": "%e" + } + }, + "y": { + "field": "date", + "timeUnit": "month", + "type": "ordinal", + "title": "Month" + }, + "color": { + "field": "temp_max", + "aggregate": "max", + "type": "quantitative", + "legend": { + "title": null + } + } + } +} +``` \ No newline at end of file diff --git a/docs/assets/examples/seattle-weather/8.idoc.md b/docs/assets/examples/markdown/seattle-weather/7.idoc.md similarity index 52% rename from docs/assets/examples/seattle-weather/8.idoc.md rename to docs/assets/examples/markdown/seattle-weather/7.idoc.md index d1609e88..847590ee 100644 --- a/docs/assets/examples/seattle-weather/8.idoc.md +++ b/docs/assets/examples/markdown/seattle-weather/7.idoc.md @@ -1,60 +1,35 @@ -# Seattle Weather - ```json vega { - "description": "This is the central brain of the page", "$schema": "https://vega.github.io/schema/vega/v5.json", + "description": "This is the central brain of the page", "signals": [ { - "name": "seattle_weather", - "update": "data('seattle_weather')" + "name": "seattle_weather_selected", + "update": "data('seattle_weather_selected')" }, { "name": "IncludeSun", - "value": true, - "bind": { "input": "checkbox", "name": "Include Sun: " } + "value": true }, { "name": "IncludeFog", - "value": true, - "bind": { "input": "checkbox", "name": "Include Fog: " } + "value": true }, { "name": "IncludeDrizzle", - "value": true, - "bind": { "input": "checkbox", "name": "Include Drizzle: " } + "value": true }, { "name": "IncludeRain", - "value": true, - "bind": { "input": "checkbox", "name": "Include Rain: " } + "value": true }, { "name": "IncludeSnow", - "value": true, - "bind": { "input": "checkbox", "name": "Include Snow: " } + "value": true }, { - "name": "MinWind", - "value": 0, - "bind": { - "input": "range", - "min": 0, - "max": 30, - "step": 1, - "name": "Min Wind: " - } - }, - { - "name": "MaxWind", - "value": 30, - "bind": { - "input": "range", - "min": 0, - "max": 30, - "step": 1, - "name": "Max Wind: " - } + "name": "seattle_weather", + "update": "data('seattle_weather')" } ], "data": [ @@ -84,23 +59,45 @@ { "type": "filter", "expr": "IncludeSnow ? true : datum.weather != 'snow'" - }, - { - "type": "filter", - "expr": "datum.wind >= MinWind && datum.wind <= MaxWind" } ] + }, + { + "name": "seattle_weather_selected", + "values": [] } ] } ``` +# Seattle Weather + +```json checkbox +{"variableId":"IncludeSun","value":true,"label":"Include Sun:"} +``` + +```json checkbox +{"variableId":"IncludeFog","value":true,"label":"Include Fog:"} +``` + +```json checkbox +{"variableId":"IncludeDrizzle","value":true,"label":"Include Drizzle:"} +``` + +```json checkbox +{"variableId":"IncludeRain","value":true,"label":"Include Rain:"} +``` + +```json checkbox +{"variableId":"IncludeSnow","value":true,"label":"Include Snow:"} +``` + Data table: ```json tabulator { - "dataSourceName": "seattle_weather", - "variableId": "seattle_weather_selected" + "dataSourceName": "seattle_weather", + "variableId": "seattle_weather_selected" } ``` @@ -111,7 +108,9 @@ The colors distinguish between different weather conditions such as sun, fog, dr ```json vega-lite { "$schema": "https://vega.github.io/schema/vega-lite/v6.json", - "data": {"name": "seattle_weather"}, + "data": { + "name": "seattle_weather" + }, "mark": "bar", "encoding": { "x": { @@ -128,8 +127,20 @@ The colors distinguish between different weather conditions such as sun, fog, dr "field": "weather", "type": "nominal", "scale": { - "domain": ["sun", "fog", "drizzle", "rain", "snow"], - "range": ["#e7ba52", "#c7c7c7", "#aec7e8", "#1f77b4", "#9467bd"] + "domain": [ + "sun", + "fog", + "drizzle", + "rain", + "snow" + ], + "range": [ + "#e7ba52", + "#c7c7c7", + "#aec7e8", + "#1f77b4", + "#9467bd" + ] }, "title": "Weather type" } @@ -137,48 +148,53 @@ The colors distinguish between different weather conditions such as sun, fog, dr } ``` -And here is a heatmap: +This section introduces a heatmap visualization for the Seattle weather dataset. +The heatmap is designed to display the distribution and intensity of weather-related variables, +such as temperature, precipitation, or frequency of weather events, across different time periods or categories. +It provides an intuitive way to identify patterns, trends, and anomalies in the dataset. ```json vega-lite { "$schema": "https://vega.github.io/schema/vega-lite/v6.json", - "data": {"name": "seattle_weather"}, + "data": { + "name": "seattle_weather" + }, "title": "Daily Max Temperatures (C) in Seattle, WA", "config": { - "view": { - "strokeWidth": 0, - "step": 13 - }, - "axis": { - "domain": false - } + "view": { + "strokeWidth": 0, + "step": 13 + }, + "axis": { + "domain": false + } }, "mark": "rect", "encoding": { - "x": { - "field": "date", - "timeUnit": "date", - "type": "ordinal", - "title": "Day", - "axis": { - "labelAngle": 0, - "format": "%e" - } - }, - "y": { - "field": "date", - "timeUnit": "month", - "type": "ordinal", - "title": "Month" - }, - "color": { - "field": "temp_max", - "aggregate": "max", - "type": "quantitative", - "legend": { - "title": null - } + "x": { + "field": "date", + "timeUnit": "date", + "type": "ordinal", + "title": "Day", + "axis": { + "labelAngle": 0, + "format": "%e" + } + }, + "y": { + "field": "date", + "timeUnit": "month", + "type": "ordinal", + "title": "Month" + }, + "color": { + "field": "temp_max", + "aggregate": "max", + "type": "quantitative", + "legend": { + "title": null } + } } } ``` \ No newline at end of file diff --git a/docs/assets/examples/markdown/seattle-weather/8.idoc.md b/docs/assets/examples/markdown/seattle-weather/8.idoc.md new file mode 100644 index 00000000..51961d34 --- /dev/null +++ b/docs/assets/examples/markdown/seattle-weather/8.idoc.md @@ -0,0 +1,220 @@ +```json vega +{ + "$schema": "https://vega.github.io/schema/vega/v5.json", + "description": "This is the central brain of the page", + "signals": [ + { + "name": "seattle_weather_selected", + "update": "data('seattle_weather_selected')" + }, + { + "name": "IncludeSun", + "value": true + }, + { + "name": "IncludeFog", + "value": true + }, + { + "name": "IncludeDrizzle", + "value": true + }, + { + "name": "IncludeRain", + "value": true + }, + { + "name": "IncludeSnow", + "value": true + }, + { + "name": "MinWind", + "value": 0 + }, + { + "name": "MaxWind", + "value": 30 + }, + { + "name": "seattle_weather", + "update": "data('seattle_weather')" + } + ], + "data": [ + { + "name": "seattle_weather", + "url": "https://vega.github.io/editor/data/seattle-weather.csv", + "format": { + "type": "csv" + }, + "transform": [ + { + "type": "filter", + "expr": "IncludeSun ? true : datum.weather != 'sun'" + }, + { + "type": "filter", + "expr": "IncludeFog ? true : datum.weather != 'fog'" + }, + { + "type": "filter", + "expr": "IncludeDrizzle ? true : datum.weather != 'drizzle'" + }, + { + "type": "filter", + "expr": "IncludeRain ? true : datum.weather != 'rain'" + }, + { + "type": "filter", + "expr": "IncludeSnow ? true : datum.weather != 'snow'" + }, + { + "type": "filter", + "expr": "datum.wind >= MinWind && datum.wind <= MaxWind" + } + ] + }, + { + "name": "seattle_weather_selected", + "values": [] + } + ] +} +``` + +# Seattle Weather + +```json checkbox +{"variableId":"IncludeSun","value":true,"label":"Include Sun:"} +``` + +```json checkbox +{"variableId":"IncludeFog","value":true,"label":"Include Fog:"} +``` + +```json checkbox +{"variableId":"IncludeDrizzle","value":true,"label":"Include Drizzle:"} +``` + +```json checkbox +{"variableId":"IncludeRain","value":true,"label":"Include Rain:"} +``` + +```json checkbox +{"variableId":"IncludeSnow","value":true,"label":"Include Snow:"} +``` + +```json slider +{"variableId":"MinWind","value":0,"label":"Min Wind:","min":0,"max":30,"step":1} +``` + +```json slider +{"variableId":"MaxWind","value":30,"label":"Max Wind:","min":0,"max":30,"step":1} +``` + +Data table: + +```json tabulator +{ + "dataSourceName": "seattle_weather", + "variableId": "seattle_weather_selected" +} +``` + +Here is a stacked bar chart of Seattle weather: +Each bar represents the count of weather types for each month. +The colors distinguish between different weather conditions such as sun, fog, drizzle, rain, and snow. + +```json vega-lite +{ + "$schema": "https://vega.github.io/schema/vega-lite/v6.json", + "data": { + "name": "seattle_weather" + }, + "mark": "bar", + "encoding": { + "x": { + "timeUnit": "month", + "field": "date", + "type": "ordinal", + "title": "Month of the year" + }, + "y": { + "aggregate": "count", + "type": "quantitative" + }, + "color": { + "field": "weather", + "type": "nominal", + "scale": { + "domain": [ + "sun", + "fog", + "drizzle", + "rain", + "snow" + ], + "range": [ + "#e7ba52", + "#c7c7c7", + "#aec7e8", + "#1f77b4", + "#9467bd" + ] + }, + "title": "Weather type" + } + } +} +``` + +This section introduces a heatmap visualization for the Seattle weather dataset. +The heatmap is designed to display the distribution and intensity of weather-related variables, +such as temperature, precipitation, or frequency of weather events, across different time periods or categories. +It provides an intuitive way to identify patterns, trends, and anomalies in the dataset. + +```json vega-lite +{ + "$schema": "https://vega.github.io/schema/vega-lite/v6.json", + "data": { + "name": "seattle_weather" + }, + "title": "Daily Max Temperatures (C) in Seattle, WA", + "config": { + "view": { + "strokeWidth": 0, + "step": 13 + }, + "axis": { + "domain": false + } + }, + "mark": "rect", + "encoding": { + "x": { + "field": "date", + "timeUnit": "date", + "type": "ordinal", + "title": "Day", + "axis": { + "labelAngle": 0, + "format": "%e" + } + }, + "y": { + "field": "date", + "timeUnit": "month", + "type": "ordinal", + "title": "Month" + }, + "color": { + "field": "temp_max", + "aggregate": "max", + "type": "quantitative", + "legend": { + "title": null + } + } + } +} +``` \ No newline at end of file diff --git a/docs/assets/examples/seattle-weather/9.idoc.md b/docs/assets/examples/markdown/seattle-weather/9.idoc.md similarity index 71% rename from docs/assets/examples/seattle-weather/9.idoc.md rename to docs/assets/examples/markdown/seattle-weather/9.idoc.md index 45f1d86b..e58c310e 100644 --- a/docs/assets/examples/seattle-weather/9.idoc.md +++ b/docs/assets/examples/markdown/seattle-weather/9.idoc.md @@ -1,60 +1,43 @@ -# Seattle Weather - ```json vega { - "description": "This is the central brain of the page", "$schema": "https://vega.github.io/schema/vega/v5.json", + "description": "This is the central brain of the page", "signals": [ { - "name": "seattle_weather", - "update": "data('seattle_weather')" + "name": "seattle_weather_selected", + "update": "data('seattle_weather_selected')" }, { "name": "IncludeSun", - "value": true, - "bind": { "input": "checkbox", "name": "Include Sun: " } + "value": true }, { "name": "IncludeFog", - "value": true, - "bind": { "input": "checkbox", "name": "Include Fog: " } + "value": true }, { "name": "IncludeDrizzle", - "value": true, - "bind": { "input": "checkbox", "name": "Include Drizzle: " } + "value": true }, { "name": "IncludeRain", - "value": true, - "bind": { "input": "checkbox", "name": "Include Rain: " } + "value": true }, { "name": "IncludeSnow", - "value": true, - "bind": { "input": "checkbox", "name": "Include Snow: " } + "value": true }, { "name": "MinWind", - "value": 0, - "bind": { - "input": "range", - "min": 0, - "max": 30, - "step": 1, - "name": "Min Wind: " - } + "value": 0 }, { "name": "MaxWind", - "value": 30, - "bind": { - "input": "range", - "min": 0, - "max": 30, - "step": 1, - "name": "Max Wind: " - } + "value": 30 + }, + { + "name": "seattle_weather", + "update": "data('seattle_weather')" } ], "data": [ @@ -90,11 +73,45 @@ "expr": "datum.wind >= MinWind && datum.wind <= MaxWind" } ] + }, + { + "name": "seattle_weather_selected", + "values": [] } ] } ``` +# Seattle Weather + +```json checkbox +{"variableId":"IncludeSun","value":true,"label":"Include Sun:"} +``` + +```json checkbox +{"variableId":"IncludeFog","value":true,"label":"Include Fog:"} +``` + +```json checkbox +{"variableId":"IncludeDrizzle","value":true,"label":"Include Drizzle:"} +``` + +```json checkbox +{"variableId":"IncludeRain","value":true,"label":"Include Rain:"} +``` + +```json checkbox +{"variableId":"IncludeSnow","value":true,"label":"Include Snow:"} +``` + +```json slider +{"variableId":"MinWind","value":0,"label":"Min Wind:","min":0,"max":30,"step":1} +``` + +```json slider +{"variableId":"MaxWind","value":30,"label":"Max Wind:","min":0,"max":30,"step":1} +``` + Presets allow you to go pre-chosen values: ```json presets @@ -178,7 +195,9 @@ The colors distinguish between different weather conditions such as sun, fog, dr ```json vega-lite { "$schema": "https://vega.github.io/schema/vega-lite/v6.json", - "data": { "name": "seattle_weather" }, + "data": { + "name": "seattle_weather" + }, "mark": "bar", "encoding": { "x": { @@ -195,8 +214,20 @@ The colors distinguish between different weather conditions such as sun, fog, dr "field": "weather", "type": "nominal", "scale": { - "domain": ["sun", "fog", "drizzle", "rain", "snow"], - "range": ["#e7ba52", "#c7c7c7", "#aec7e8", "#1f77b4", "#9467bd"] + "domain": [ + "sun", + "fog", + "drizzle", + "rain", + "snow" + ], + "range": [ + "#e7ba52", + "#c7c7c7", + "#aec7e8", + "#1f77b4", + "#9467bd" + ] }, "title": "Weather type" } @@ -204,12 +235,17 @@ The colors distinguish between different weather conditions such as sun, fog, dr } ``` -And here is a heatmap: +This section introduces a heatmap visualization for the Seattle weather dataset. +The heatmap is designed to display the distribution and intensity of weather-related variables, +such as temperature, precipitation, or frequency of weather events, across different time periods or categories. +It provides an intuitive way to identify patterns, trends, and anomalies in the dataset. ```json vega-lite { "$schema": "https://vega.github.io/schema/vega-lite/v6.json", - "data": { "name": "seattle_weather" }, + "data": { + "name": "seattle_weather" + }, "title": "Daily Max Temperatures (C) in Seattle, WA", "config": { "view": { @@ -248,4 +284,4 @@ And here is a heatmap: } } } -``` +``` \ No newline at end of file diff --git a/docs/assets/examples/markdown/slides.idoc.md b/docs/assets/examples/markdown/slides.idoc.md new file mode 100644 index 00000000..04674f85 --- /dev/null +++ b/docs/assets/examples/markdown/slides.idoc.md @@ -0,0 +1,289 @@ +```json vega +{ + "$schema": "https://vega.github.io/schema/vega/v5.json", + "description": "This is the central brain of the page", + "signals": [ + { + "name": "itemsData_selected", + "update": "data('itemsData_selected')" + }, + { + "name": "itemsData_selected_sum_price", + "update": "data('itemsData_selected_sum_price')" + }, + { + "name": "total", + "value": 0, + "update": "format(data('itemsData_selected_sum_price')[0] ? data('itemsData_selected_sum_price')[0].sum_price : 0, ',.2f')" + }, + { + "name": "itemsData", + "update": "data('itemsData')" + } + ], + "data": [ + { + "name": "itemsData", + "values": [ + { + "item": "Apples", + "category": "Fruits", + "price": 1.2 + }, + { + "item": "Bananas", + "category": "Fruits", + "price": 0.5 + }, + { + "item": "Oranges", + "category": "Fruits", + "price": 0.8 + }, + { + "item": "Strawberries", + "category": "Fruits", + "price": 2.5 + }, + { + "item": "Grapes", + "category": "Fruits", + "price": 2.2 + }, + { + "item": "Bread", + "category": "Bakery", + "price": 2 + }, + { + "item": "Bagels", + "category": "Bakery", + "price": 1.8 + }, + { + "item": "Croissant", + "category": "Bakery", + "price": 2.3 + }, + { + "item": "Milk", + "category": "Dairy", + "price": 1.5 + }, + { + "item": "Cheese", + "category": "Dairy", + "price": 3 + }, + { + "item": "Yogurt", + "category": "Dairy", + "price": 1.1 + }, + { + "item": "Eggs", + "category": "Dairy", + "price": 2.4 + }, + { + "item": "Chicken Breast", + "category": "Meat", + "price": 5 + }, + { + "item": "Ground Beef", + "category": "Meat", + "price": 4.5 + }, + { + "item": "Salmon", + "category": "Meat", + "price": 7 + }, + { + "item": "Carrots", + "category": "Vegetables", + "price": 0.9 + }, + { + "item": "Broccoli", + "category": "Vegetables", + "price": 1.3 + }, + { + "item": "Lettuce", + "category": "Vegetables", + "price": 1 + }, + { + "item": "Tomatoes", + "category": "Vegetables", + "price": 1.2 + }, + { + "item": "Potatoes", + "category": "Vegetables", + "price": 0.7 + }, + { + "item": "Pasta", + "category": "Pantry", + "price": 1.1 + }, + { + "item": "Rice", + "category": "Pantry", + "price": 1 + }, + { + "item": "Cereal", + "category": "Pantry", + "price": 2.8 + }, + { + "item": "Olive Oil", + "category": "Pantry", + "price": 4 + } + ] + }, + { + "name": "itemsData_selected", + "values": [] + }, + { + "name": "itemsData_selected_sum_price", + "source": [ + "itemsData_selected" + ], + "transform": [ + { + "type": "aggregate", + "ops": [ + "sum" + ], + "fields": [ + "price" + ], + "as": [ + "sum_price" + ] + } + ] + } + ] +} +``` + +```css +html, body { + height: 100%; + margin: 0; + padding: 0; + scroll-behavior: smooth; + overflow-y: auto; +} + +body { + scroll-snap-type: y mandatory; +} + +.group { + color: white; + scroll-snap-align: start; + height: 100vh; + margin: 0; + padding: 1em; + box-sizing: border-box; +} + +#slide1 { background: #1abc9c; } +#slide2 { background: #3498db; } +#slide3 { background: #9b59b6; } +#slide4 { background: #e74c3c; } + +``` + +::: group {#slide1} +## Welcome to the Shopping List App + +::: + +::: group {#slide2} +## Here you can select items to buy from a variety of categories. + + +### Categories include Fruits, Bakery, Dairy, Meat, Vegetables, and Pantry items. + + +### You can select multiple items and see the total price calculated automatically. +::: + +::: group {#slide3} +## Let's start by selecting some items from the list below. + + +### Click on the checkboxes next to the items you want to add to your shopping list. +::: + +::: group {#slide4} +## Select the items you want to buy + + +```json tabulator +{ + "dataSourceName": "itemsData", + "variableId": "itemsData_selected", + "tabulatorOptions": { + "autoColumns": true, + "layout": "fitColumns", + "minHeight": "200px", + "maxHeight": "200px", + "selectableRows": true, + "rowHeader": { + "formatter": "rowSelection", + "titleFormatter": "rowSelection", + "headerSort": false, + "headerHozAlign": "center", + "hozAlign": "center", + "width": 40 + } + } +} +``` + +## Total Price + +${{total}} + +### Categories + +```json vega-lite +{ + "$schema": "https://vega.github.io/schema/vega-lite/v6.json", + "data": { + "name": "itemsData_selected" + }, + "mark": "bar", + "encoding": { + "x": { + "field": "category", + "type": "nominal", + "title": "Category" + }, + "y": { + "aggregate": "count", + "type": "quantitative", + "title": "Number of Items" + }, + "color": { + "field": "category", + "type": "nominal", + "legend": { + "title": "Category" + } + } + } +} +``` +::: \ No newline at end of file diff --git a/docs/assets/examples/seattle-weather/1.idoc.json b/docs/assets/examples/seattle-weather/1.idoc.json deleted file mode 100644 index 7ea53388..00000000 --- a/docs/assets/examples/seattle-weather/1.idoc.json +++ /dev/null @@ -1,60 +0,0 @@ -{ - "$schema": "../../../schema/idoc_v1.json", - "title": "Seattle Weather", - "groups": [ - { - "groupId": "main", - "elements": [ - "# Seattle Weather\n\nHere is a stacked bar chart of Seattle weather:\nEach bar represents the count of weather types for each month.\nThe colors distinguish between different weather conditions such as sun, fog, drizzle, rain, and snow.", - { - "type": "chart", - "chart": { - "dataSourceBase": { - "dataSourceName": "data" - }, - "chartTemplateKey": "line", - "chartIntent": "A line chart showing the trend of a variable over time.", - "spec": { - "$schema": "https://vega.github.io/schema/vega-lite/v6.json", - "data": {"url": "https://vega.github.io/editor/data/seattle-weather.csv"}, - "mark": "bar", - "encoding": { - "x": { - "timeUnit": "month", - "field": "date", - "type": "ordinal", - "title": "Month of the year" - }, - "y": { - "aggregate": "count", - "type": "quantitative" - }, - "color": { - "field": "weather", - "type": "nominal", - "scale": { - "domain": [ - "sun", - "fog", - "drizzle", - "rain", - "snow" - ], - "range": [ - "#e7ba52", - "#c7c7c7", - "#aec7e8", - "#1f77b4", - "#9467bd" - ] - }, - "title": "Weather type" - } - } - } - } - } - ] - } - ] -} \ No newline at end of file diff --git a/docs/assets/examples/seattle-weather/2.idoc.json b/docs/assets/examples/seattle-weather/2.idoc.json deleted file mode 100644 index 16bcb065..00000000 --- a/docs/assets/examples/seattle-weather/2.idoc.json +++ /dev/null @@ -1,116 +0,0 @@ -{ - "$schema": "../../../schema/idoc_v1.json", - "title": "Seattle Weather", - "groups": [ - { - "groupId": "main", - "elements": [ - "# Seattle Weather\n\nHere is a stacked bar chart of Seattle weather:\nEach bar represents the count of weather types for each month.\nThe colors distinguish between different weather conditions such as sun, fog, drizzle, rain, and snow.", - { - "type": "chart", - "chart": { - "dataSourceBase": { - "dataSourceName": "data" - }, - "chartTemplateKey": "bar", - "chartIntent": "A bar chart showing the distribution of weather types over months.", - "spec": { - "$schema": "https://vega.github.io/schema/vega-lite/v6.json", - "data": { - "url": "https://vega.github.io/editor/data/seattle-weather.csv" - }, - "mark": "bar", - "encoding": { - "x": { - "timeUnit": "month", - "field": "date", - "type": "ordinal", - "title": "Month of the year" - }, - "y": { - "aggregate": "count", - "type": "quantitative" - }, - "color": { - "field": "weather", - "type": "nominal", - "scale": { - "domain": [ - "sun", - "fog", - "drizzle", - "rain", - "snow" - ], - "range": [ - "#e7ba52", - "#c7c7c7", - "#aec7e8", - "#1f77b4", - "#9467bd" - ] - }, - "title": "Weather type" - } - } - } - } - }, - "This section introduces a heatmap visualization for the Seattle weather dataset.\nThe heatmap is designed to display the distribution and intensity of weather-related variables,\nsuch as temperature, precipitation, or frequency of weather events, across different time periods or categories.\nIt provides an intuitive way to identify patterns, trends, and anomalies in the dataset.", - { - "type": "chart", - "chart": { - "dataSourceBase": { - "dataSourceName": "data" - }, - "chartTemplateKey": "heatmap", - "chartIntent": "A heatmap showing the distribution of daily maximum temperatures in Seattle.", - "spec": { - "$schema": "https://vega.github.io/schema/vega-lite/v6.json", - "data": { - "url": "https://vega.github.io/editor/data/seattle-weather.csv" - }, - "title": "Daily Max Temperatures (C) in Seattle, WA", - "config": { - "view": { - "strokeWidth": 0, - "step": 13 - }, - "axis": { - "domain": false - } - }, - "mark": "rect", - "encoding": { - "x": { - "field": "date", - "timeUnit": "date", - "type": "ordinal", - "title": "Day", - "axis": { - "labelAngle": 0, - "format": "%e" - } - }, - "y": { - "field": "date", - "timeUnit": "month", - "type": "ordinal", - "title": "Month" - }, - "color": { - "field": "temp_max", - "aggregate": "max", - "type": "quantitative", - "legend": { - "title": null - } - } - } - } - } - } - ] - } - ] -} \ No newline at end of file diff --git a/docs/assets/examples/seattle-weather/3.idoc.json b/docs/assets/examples/seattle-weather/3.idoc.json deleted file mode 100644 index 6c8fea4b..00000000 --- a/docs/assets/examples/seattle-weather/3.idoc.json +++ /dev/null @@ -1,125 +0,0 @@ -{ - "$schema": "../../../schema/idoc_v1.json", - "title": "Seattle Weather", - "dataLoaders": [ - { - "type": "url", - "url": "https://vega.github.io/editor/data/seattle-weather.csv", - "dataSourceName": "seattle_weather", - "format": "csv", - "dataFrameTransformations": [] - } - ], - "groups": [ - { - "groupId": "main", - "elements": [ - "# Seattle Weather\n\nHere is a stacked bar chart of Seattle weather:\nEach bar represents the count of weather types for each month.\nThe colors distinguish between different weather conditions such as sun, fog, drizzle, rain, and snow.", - { - "type": "chart", - "chart": { - "dataSourceBase": { - "dataSourceName": "data" - }, - "chartTemplateKey": "bar", - "chartIntent": "A bar chart showing the distribution of weather types over months.", - "spec": { - "$schema": "https://vega.github.io/schema/vega-lite/v6.json", - "data": { - "name": "seattle_weather" - }, - "mark": "bar", - "encoding": { - "x": { - "timeUnit": "month", - "field": "date", - "type": "ordinal", - "title": "Month of the year" - }, - "y": { - "aggregate": "count", - "type": "quantitative" - }, - "color": { - "field": "weather", - "type": "nominal", - "scale": { - "domain": [ - "sun", - "fog", - "drizzle", - "rain", - "snow" - ], - "range": [ - "#e7ba52", - "#c7c7c7", - "#aec7e8", - "#1f77b4", - "#9467bd" - ] - }, - "title": "Weather type" - } - } - } - } - }, - "This section introduces a heatmap visualization for the Seattle weather dataset.\nThe heatmap is designed to display the distribution and intensity of weather-related variables,\nsuch as temperature, precipitation, or frequency of weather events, across different time periods or categories.\nIt provides an intuitive way to identify patterns, trends, and anomalies in the dataset.", - { - "type": "chart", - "chart": { - "dataSourceBase": { - "dataSourceName": "data" - }, - "chartTemplateKey": "heatmap", - "chartIntent": "A heatmap showing the distribution of daily maximum temperatures in Seattle.", - "spec": { - "$schema": "https://vega.github.io/schema/vega-lite/v6.json", - "data": { - "name": "seattle_weather" - }, - "title": "Daily Max Temperatures (C) in Seattle, WA", - "config": { - "view": { - "strokeWidth": 0, - "step": 13 - }, - "axis": { - "domain": false - } - }, - "mark": "rect", - "encoding": { - "x": { - "field": "date", - "timeUnit": "date", - "type": "ordinal", - "title": "Day", - "axis": { - "labelAngle": 0, - "format": "%e" - } - }, - "y": { - "field": "date", - "timeUnit": "month", - "type": "ordinal", - "title": "Month" - }, - "color": { - "field": "temp_max", - "aggregate": "max", - "type": "quantitative", - "legend": { - "title": null - } - } - } - } - } - } - ] - } - ] -} \ No newline at end of file diff --git a/docs/assets/examples/seattle-weather/3.idoc.md b/docs/assets/examples/seattle-weather/3.idoc.md deleted file mode 100644 index 8d55c81f..00000000 --- a/docs/assets/examples/seattle-weather/3.idoc.md +++ /dev/null @@ -1,102 +0,0 @@ -# Seattle Weather - -```json vega -{ - "description": "This is the central brain of the page", - "$schema": "https://vega.github.io/schema/vega/v5.json", - "signals": [ - { - "name": "seattle_weather", - "update": "data('seattle_weather')" - } - ], - "data": [ - { - "name": "seattle_weather", - "url": "https://vega.github.io/editor/data/seattle-weather.csv", - "format": { - "type": "csv" - } - } - ] -} -``` - -Here is a stacked bar chart of Seattle weather: -Each bar represents the count of weather types for each month. -The colors distinguish between different weather conditions such as sun, fog, drizzle, rain, and snow. - -```json vega-lite -{ - "$schema": "https://vega.github.io/schema/vega-lite/v6.json", - "data": {"name": "seattle_weather"}, - "mark": "bar", - "encoding": { - "x": { - "timeUnit": "month", - "field": "date", - "type": "ordinal", - "title": "Month of the year" - }, - "y": { - "aggregate": "count", - "type": "quantitative" - }, - "color": { - "field": "weather", - "type": "nominal", - "scale": { - "domain": ["sun", "fog", "drizzle", "rain", "snow"], - "range": ["#e7ba52", "#c7c7c7", "#aec7e8", "#1f77b4", "#9467bd"] - }, - "title": "Weather type" - } - } -} -``` - -And here is a heatmap: - -```json vega-lite -{ - "$schema": "https://vega.github.io/schema/vega-lite/v6.json", - "data": {"name": "seattle_weather"}, - "title": "Daily Max Temperatures (C) in Seattle, WA", - "config": { - "view": { - "strokeWidth": 0, - "step": 13 - }, - "axis": { - "domain": false - } - }, - "mark": "rect", - "encoding": { - "x": { - "field": "date", - "timeUnit": "date", - "type": "ordinal", - "title": "Day", - "axis": { - "labelAngle": 0, - "format": "%e" - } - }, - "y": { - "field": "date", - "timeUnit": "month", - "type": "ordinal", - "title": "Month" - }, - "color": { - "field": "temp_max", - "aggregate": "max", - "type": "quantitative", - "legend": { - "title": null - } - } - } -} -``` \ No newline at end of file diff --git a/docs/assets/examples/seattle-weather/4.idoc.json b/docs/assets/examples/seattle-weather/4.idoc.json deleted file mode 100644 index 01ab59d3..00000000 --- a/docs/assets/examples/seattle-weather/4.idoc.json +++ /dev/null @@ -1,131 +0,0 @@ -{ - "$schema": "../../../schema/idoc_v1.json", - "title": "Seattle Weather", - "dataLoaders": [ - { - "type": "url", - "url": "https://vega.github.io/editor/data/seattle-weather.csv", - "dataSourceName": "seattle_weather", - "format": "csv", - "dataFrameTransformations": [] - } - ], - "groups": [ - { - "groupId": "main", - "elements": [ - "# Seattle Weather\n\nData table:", - { - "type": "table", - "dataSourceName": "seattle_weather", - "variableId": "seattle_weather_selected" - }, - "Here is a stacked bar chart of Seattle weather:\nEach bar represents the count of weather types for each month.\nThe colors distinguish between different weather conditions such as sun, fog, drizzle, rain, and snow.", - { - "type": "chart", - "chart": { - "dataSourceBase": { - "dataSourceName": "data" - }, - "chartTemplateKey": "bar", - "chartIntent": "A bar chart showing the distribution of weather types over months.", - "spec": { - "$schema": "https://vega.github.io/schema/vega-lite/v6.json", - "data": { - "name": "seattle_weather" - }, - "mark": "bar", - "encoding": { - "x": { - "timeUnit": "month", - "field": "date", - "type": "ordinal", - "title": "Month of the year" - }, - "y": { - "aggregate": "count", - "type": "quantitative" - }, - "color": { - "field": "weather", - "type": "nominal", - "scale": { - "domain": [ - "sun", - "fog", - "drizzle", - "rain", - "snow" - ], - "range": [ - "#e7ba52", - "#c7c7c7", - "#aec7e8", - "#1f77b4", - "#9467bd" - ] - }, - "title": "Weather type" - } - } - } - } - }, - "This section introduces a heatmap visualization for the Seattle weather dataset.\nThe heatmap is designed to display the distribution and intensity of weather-related variables,\nsuch as temperature, precipitation, or frequency of weather events, across different time periods or categories.\nIt provides an intuitive way to identify patterns, trends, and anomalies in the dataset.", - { - "type": "chart", - "chart": { - "dataSourceBase": { - "dataSourceName": "data" - }, - "chartTemplateKey": "heatmap", - "chartIntent": "A heatmap showing the distribution of daily maximum temperatures in Seattle.", - "spec": { - "$schema": "https://vega.github.io/schema/vega-lite/v6.json", - "data": { - "name": "seattle_weather" - }, - "title": "Daily Max Temperatures (C) in Seattle, WA", - "config": { - "view": { - "strokeWidth": 0, - "step": 13 - }, - "axis": { - "domain": false - } - }, - "mark": "rect", - "encoding": { - "x": { - "field": "date", - "timeUnit": "date", - "type": "ordinal", - "title": "Day", - "axis": { - "labelAngle": 0, - "format": "%e" - } - }, - "y": { - "field": "date", - "timeUnit": "month", - "type": "ordinal", - "title": "Month" - }, - "color": { - "field": "temp_max", - "aggregate": "max", - "type": "quantitative", - "legend": { - "title": null - } - } - } - } - } - } - ] - } - ] -} \ No newline at end of file diff --git a/docs/assets/examples/seattle-weather/4.idoc.md b/docs/assets/examples/seattle-weather/4.idoc.md deleted file mode 100644 index 2cb7d6cf..00000000 --- a/docs/assets/examples/seattle-weather/4.idoc.md +++ /dev/null @@ -1,111 +0,0 @@ -# Seattle Weather - -```json vega -{ - "description": "This is the central brain of the page", - "$schema": "https://vega.github.io/schema/vega/v5.json", - "signals": [ - { - "name": "seattle_weather", - "update": "data('seattle_weather')" - } - ], - "data": [ - { - "name": "seattle_weather", - "url": "https://vega.github.io/editor/data/seattle-weather.csv", - "format": { - "type": "csv" - } - } - ] -} -``` - -Data table: - -```json tabulator -{ - "dataSourceName": "seattle_weather", - "variableId": "seattle_weather_selected" -} -``` - -Here is a stacked bar chart of Seattle weather: -Each bar represents the count of weather types for each month. -The colors distinguish between different weather conditions such as sun, fog, drizzle, rain, and snow. - -```json vega-lite -{ - "$schema": "https://vega.github.io/schema/vega-lite/v6.json", - "data": {"name": "seattle_weather"}, - "mark": "bar", - "encoding": { - "x": { - "timeUnit": "month", - "field": "date", - "type": "ordinal", - "title": "Month of the year" - }, - "y": { - "aggregate": "count", - "type": "quantitative" - }, - "color": { - "field": "weather", - "type": "nominal", - "scale": { - "domain": ["sun", "fog", "drizzle", "rain", "snow"], - "range": ["#e7ba52", "#c7c7c7", "#aec7e8", "#1f77b4", "#9467bd"] - }, - "title": "Weather type" - } - } -} -``` - -And here is a heatmap: - -```json vega-lite -{ - "$schema": "https://vega.github.io/schema/vega-lite/v6.json", - "data": {"name": "seattle_weather"}, - "title": "Daily Max Temperatures (C) in Seattle, WA", - "config": { - "view": { - "strokeWidth": 0, - "step": 13 - }, - "axis": { - "domain": false - } - }, - "mark": "rect", - "encoding": { - "x": { - "field": "date", - "timeUnit": "date", - "type": "ordinal", - "title": "Day", - "axis": { - "labelAngle": 0, - "format": "%e" - } - }, - "y": { - "field": "date", - "timeUnit": "month", - "type": "ordinal", - "title": "Month" - }, - "color": { - "field": "temp_max", - "aggregate": "max", - "type": "quantitative", - "legend": { - "title": null - } - } - } -} -``` \ No newline at end of file diff --git a/docs/assets/examples/seattle-weather/5.idoc.json b/docs/assets/examples/seattle-weather/5.idoc.json deleted file mode 100644 index d932b029..00000000 --- a/docs/assets/examples/seattle-weather/5.idoc.json +++ /dev/null @@ -1,136 +0,0 @@ -{ - "$schema": "../../../schema/idoc_v1.json", - "title": "Seattle Weather", - "dataLoaders": [ - { - "type": "url", - "url": "https://vega.github.io/editor/data/seattle-weather.csv", - "dataSourceName": "seattle_weather", - "format": "csv", - "dataFrameTransformations": [ - { - "type": "filter", - "expr": "datum.weather=='sun'" - } - ] - } - ], - "groups": [ - { - "groupId": "main", - "elements": [ - "# Seattle Weather\n\nData table:", - { - "type": "table", - "dataSourceName": "seattle_weather", - "variableId": "seattle_weather_selected" - }, - "Here is a stacked bar chart of Seattle weather:\nEach bar represents the count of weather types for each month.\nThe colors distinguish between different weather conditions such as sun, fog, drizzle, rain, and snow.", - { - "type": "chart", - "chart": { - "dataSourceBase": { - "dataSourceName": "data" - }, - "chartTemplateKey": "bar", - "chartIntent": "A bar chart showing the distribution of weather types over months.", - "spec": { - "$schema": "https://vega.github.io/schema/vega-lite/v6.json", - "data": { - "name": "seattle_weather" - }, - "mark": "bar", - "encoding": { - "x": { - "timeUnit": "month", - "field": "date", - "type": "ordinal", - "title": "Month of the year" - }, - "y": { - "aggregate": "count", - "type": "quantitative" - }, - "color": { - "field": "weather", - "type": "nominal", - "scale": { - "domain": [ - "sun", - "fog", - "drizzle", - "rain", - "snow" - ], - "range": [ - "#e7ba52", - "#c7c7c7", - "#aec7e8", - "#1f77b4", - "#9467bd" - ] - }, - "title": "Weather type" - } - } - } - } - }, - "This section introduces a heatmap visualization for the Seattle weather dataset.\nThe heatmap is designed to display the distribution and intensity of weather-related variables,\nsuch as temperature, precipitation, or frequency of weather events, across different time periods or categories.\nIt provides an intuitive way to identify patterns, trends, and anomalies in the dataset.", - { - "type": "chart", - "chart": { - "dataSourceBase": { - "dataSourceName": "data" - }, - "chartTemplateKey": "heatmap", - "chartIntent": "A heatmap showing the distribution of daily maximum temperatures in Seattle.", - "spec": { - "$schema": "https://vega.github.io/schema/vega-lite/v6.json", - "data": { - "name": "seattle_weather" - }, - "title": "Daily Max Temperatures (C) in Seattle, WA", - "config": { - "view": { - "strokeWidth": 0, - "step": 13 - }, - "axis": { - "domain": false - } - }, - "mark": "rect", - "encoding": { - "x": { - "field": "date", - "timeUnit": "date", - "type": "ordinal", - "title": "Day", - "axis": { - "labelAngle": 0, - "format": "%e" - } - }, - "y": { - "field": "date", - "timeUnit": "month", - "type": "ordinal", - "title": "Month" - }, - "color": { - "field": "temp_max", - "aggregate": "max", - "type": "quantitative", - "legend": { - "title": null - } - } - } - } - } - } - ] - } - ] -} \ No newline at end of file diff --git a/docs/assets/examples/seattle-weather/5.idoc.md b/docs/assets/examples/seattle-weather/5.idoc.md deleted file mode 100644 index 5abfd5be..00000000 --- a/docs/assets/examples/seattle-weather/5.idoc.md +++ /dev/null @@ -1,117 +0,0 @@ -# Seattle Weather - -```json vega -{ - "description": "This is the central brain of the page", - "$schema": "https://vega.github.io/schema/vega/v5.json", - "signals": [ - { - "name": "seattle_weather", - "update": "data('seattle_weather')" - } - ], - "data": [ - { - "name": "seattle_weather", - "url": "https://vega.github.io/editor/data/seattle-weather.csv", - "format": { - "type": "csv" - }, - "transform": [ - { - "type": "filter", - "expr": "datum.weather=='sun'" - } - ] - } - ] -} -``` - -Data table: - -```json tabulator -{ - "dataSourceName": "seattle_weather", - "variableId": "seattle_weather_selected" -} -``` - -Here is a stacked bar chart of Seattle weather: -Each bar represents the count of weather types for each month. -The colors distinguish between different weather conditions such as sun, fog, drizzle, rain, and snow. - -```json vega-lite -{ - "$schema": "https://vega.github.io/schema/vega-lite/v6.json", - "data": {"name": "seattle_weather"}, - "mark": "bar", - "encoding": { - "x": { - "timeUnit": "month", - "field": "date", - "type": "ordinal", - "title": "Month of the year" - }, - "y": { - "aggregate": "count", - "type": "quantitative" - }, - "color": { - "field": "weather", - "type": "nominal", - "scale": { - "domain": ["sun", "fog", "drizzle", "rain", "snow"], - "range": ["#e7ba52", "#c7c7c7", "#aec7e8", "#1f77b4", "#9467bd"] - }, - "title": "Weather type" - } - } -} -``` - -And here is a heatmap: - -```json vega-lite -{ - "$schema": "https://vega.github.io/schema/vega-lite/v6.json", - "data": {"name": "seattle_weather"}, - "title": "Daily Max Temperatures (C) in Seattle, WA", - "config": { - "view": { - "strokeWidth": 0, - "step": 13 - }, - "axis": { - "domain": false - } - }, - "mark": "rect", - "encoding": { - "x": { - "field": "date", - "timeUnit": "date", - "type": "ordinal", - "title": "Day", - "axis": { - "labelAngle": 0, - "format": "%e" - } - }, - "y": { - "field": "date", - "timeUnit": "month", - "type": "ordinal", - "title": "Month" - }, - "color": { - "field": "temp_max", - "aggregate": "max", - "type": "quantitative", - "legend": { - "title": null - } - } - } -} -``` \ No newline at end of file diff --git a/docs/assets/examples/seattle-weather/6.idoc.json b/docs/assets/examples/seattle-weather/6.idoc.json deleted file mode 100644 index 886c21af..00000000 --- a/docs/assets/examples/seattle-weather/6.idoc.json +++ /dev/null @@ -1,149 +0,0 @@ -{ - "$schema": "../../../schema/idoc_v1.json", - "title": "Seattle Weather", - "dataLoaders": [ - { - "type": "url", - "url": "https://vega.github.io/editor/data/seattle-weather.csv", - "dataSourceName": "seattle_weather", - "format": "csv", - "dataFrameTransformations": [ - { - "type": "filter", - "expr": "IncludeSun ? true : datum.weather != 'sun'" - } - ] - } - ], - "variables": [ - { - "variableId": "IncludeSun", - "type": "boolean", - "initialValue": true - } - ], - "groups": [ - { - "groupId": "main", - "elements": [ - "# Seattle Weather", - { - "type": "checkbox", - "label": "Include Sun:", - "variableId": "IncludeSun" - }, - "Data table:", - { - "type": "table", - "dataSourceName": "seattle_weather", - "variableId": "seattle_weather_selected" - }, - "Here is a stacked bar chart of Seattle weather:\nEach bar represents the count of weather types for each month.\nThe colors distinguish between different weather conditions such as sun, fog, drizzle, rain, and snow.", - { - "type": "chart", - "chart": { - "dataSourceBase": { - "dataSourceName": "data" - }, - "chartTemplateKey": "bar", - "chartIntent": "A bar chart showing the distribution of weather types over months.", - "spec": { - "$schema": "https://vega.github.io/schema/vega-lite/v6.json", - "data": { - "name": "seattle_weather" - }, - "mark": "bar", - "encoding": { - "x": { - "timeUnit": "month", - "field": "date", - "type": "ordinal", - "title": "Month of the year" - }, - "y": { - "aggregate": "count", - "type": "quantitative" - }, - "color": { - "field": "weather", - "type": "nominal", - "scale": { - "domain": [ - "sun", - "fog", - "drizzle", - "rain", - "snow" - ], - "range": [ - "#e7ba52", - "#c7c7c7", - "#aec7e8", - "#1f77b4", - "#9467bd" - ] - }, - "title": "Weather type" - } - } - } - } - }, - "This section introduces a heatmap visualization for the Seattle weather dataset.\nThe heatmap is designed to display the distribution and intensity of weather-related variables,\nsuch as temperature, precipitation, or frequency of weather events, across different time periods or categories.\nIt provides an intuitive way to identify patterns, trends, and anomalies in the dataset.", - { - "type": "chart", - "chart": { - "dataSourceBase": { - "dataSourceName": "data" - }, - "chartTemplateKey": "heatmap", - "chartIntent": "A heatmap showing the distribution of daily maximum temperatures in Seattle.", - "spec": { - "$schema": "https://vega.github.io/schema/vega-lite/v6.json", - "data": { - "name": "seattle_weather" - }, - "title": "Daily Max Temperatures (C) in Seattle, WA", - "config": { - "view": { - "strokeWidth": 0, - "step": 13 - }, - "axis": { - "domain": false - } - }, - "mark": "rect", - "encoding": { - "x": { - "field": "date", - "timeUnit": "date", - "type": "ordinal", - "title": "Day", - "axis": { - "labelAngle": 0, - "format": "%e" - } - }, - "y": { - "field": "date", - "timeUnit": "month", - "type": "ordinal", - "title": "Month" - }, - "color": { - "field": "temp_max", - "aggregate": "max", - "type": "quantitative", - "legend": { - "title": null - } - } - } - } - } - } - ] - } - ] -} \ No newline at end of file diff --git a/docs/assets/examples/seattle-weather/7.idoc.md b/docs/assets/examples/seattle-weather/7.idoc.md deleted file mode 100644 index c0b0cdee..00000000 --- a/docs/assets/examples/seattle-weather/7.idoc.md +++ /dev/null @@ -1,158 +0,0 @@ -# Seattle Weather - -```json vega -{ - "description": "This is the central brain of the page", - "$schema": "https://vega.github.io/schema/vega/v5.json", - "signals": [ - { - "name": "seattle_weather", - "update": "data('seattle_weather')" - }, - { - "name": "IncludeSun", - "value": true, - "bind": { "input": "checkbox", "name": "Include Sun: " } - }, - { - "name": "IncludeFog", - "value": true, - "bind": { "input": "checkbox", "name": "Include Fog: " } - }, - { - "name": "IncludeDrizzle", - "value": true, - "bind": { "input": "checkbox", "name": "Include Drizzle: " } - }, - { - "name": "IncludeRain", - "value": true, - "bind": { "input": "checkbox", "name": "Include Rain: " } - }, - { - "name": "IncludeSnow", - "value": true, - "bind": { "input": "checkbox", "name": "Include Snow: " } - } - ], - "data": [ - { - "name": "seattle_weather", - "url": "https://vega.github.io/editor/data/seattle-weather.csv", - "format": { - "type": "csv" - }, - "transform": [ - { - "type": "filter", - "expr": "IncludeSun ? true : datum.weather != 'sun'" - }, - { - "type": "filter", - "expr": "IncludeFog ? true : datum.weather != 'fog'" - }, - { - "type": "filter", - "expr": "IncludeDrizzle ? true : datum.weather != 'drizzle'" - }, - { - "type": "filter", - "expr": "IncludeRain ? true : datum.weather != 'rain'" - }, - { - "type": "filter", - "expr": "IncludeSnow ? true : datum.weather != 'snow'" - } - ] - } - ] -} -``` - -Data table: - -```json tabulator -{ - "dataSourceName": "seattle_weather", - "variableId": "seattle_weather_selected" -} -``` - -Here is a stacked bar chart of Seattle weather: -Each bar represents the count of weather types for each month. -The colors distinguish between different weather conditions such as sun, fog, drizzle, rain, and snow. - -```json vega-lite -{ - "$schema": "https://vega.github.io/schema/vega-lite/v6.json", - "data": {"name": "seattle_weather"}, - "mark": "bar", - "encoding": { - "x": { - "timeUnit": "month", - "field": "date", - "type": "ordinal", - "title": "Month of the year" - }, - "y": { - "aggregate": "count", - "type": "quantitative" - }, - "color": { - "field": "weather", - "type": "nominal", - "scale": { - "domain": ["sun", "fog", "drizzle", "rain", "snow"], - "range": ["#e7ba52", "#c7c7c7", "#aec7e8", "#1f77b4", "#9467bd"] - }, - "title": "Weather type" - } - } -} -``` - -And here is a heatmap: - -```json vega-lite -{ - "$schema": "https://vega.github.io/schema/vega-lite/v6.json", - "data": {"name": "seattle_weather"}, - "title": "Daily Max Temperatures (C) in Seattle, WA", - "config": { - "view": { - "strokeWidth": 0, - "step": 13 - }, - "axis": { - "domain": false - } - }, - "mark": "rect", - "encoding": { - "x": { - "field": "date", - "timeUnit": "date", - "type": "ordinal", - "title": "Day", - "axis": { - "labelAngle": 0, - "format": "%e" - } - }, - "y": { - "field": "date", - "timeUnit": "month", - "type": "ordinal", - "title": "Month" - }, - "color": { - "field": "temp_max", - "aggregate": "max", - "type": "quantitative", - "legend": { - "title": null - } - } - } -} -``` \ No newline at end of file diff --git a/docs/assets/examples/slides.idoc.json b/docs/assets/examples/slides.idoc.json deleted file mode 100644 index 43ee77ff..00000000 --- a/docs/assets/examples/slides.idoc.json +++ /dev/null @@ -1,155 +0,0 @@ -{ - "$schema": "../../schema/idoc_v1.json", - "title": "Select Items to Buy", - "style": { - "css": "html, body {\n height: 100%;\n margin: 0;\n padding: 0;\n scroll-behavior: smooth;\n overflow-y: auto;\n}\n\nbody {\n scroll-snap-type: y mandatory;\n}\n\n.group {\n color: white;\n scroll-snap-align: start;\n height: 100vh;\n margin: 0;\n padding: 1em;\n box-sizing: border-box;\n}\n\n#slide1 { background: #1abc9c; }\n#slide2 { background: #3498db; }\n#slide3 { background: #9b59b6; }\n#slide4 { background: #e74c3c; }\n" - }, - "dataLoaders": [ - { - "dataSourceName": "itemsData", - "type": "inline", - "format": "json", - "content": [ - {"item": "Apples", "category": "Fruits", "price": 1.20}, - {"item": "Bananas", "category": "Fruits", "price": 0.50}, - {"item": "Oranges", "category": "Fruits", "price": 0.80}, - {"item": "Strawberries", "category": "Fruits", "price": 2.50}, - {"item": "Grapes", "category": "Fruits", "price": 2.20}, - {"item": "Bread", "category": "Bakery", "price": 2.00}, - {"item": "Bagels", "category": "Bakery", "price": 1.80}, - {"item": "Croissant", "category": "Bakery", "price": 2.30}, - {"item": "Milk", "category": "Dairy", "price": 1.50}, - {"item": "Cheese", "category": "Dairy", "price": 3.00}, - {"item": "Yogurt", "category": "Dairy", "price": 1.10}, - {"item": "Eggs", "category": "Dairy", "price": 2.40}, - {"item": "Chicken Breast", "category": "Meat", "price": 5.00}, - {"item": "Ground Beef", "category": "Meat", "price": 4.50}, - {"item": "Salmon", "category": "Meat", "price": 7.00}, - {"item": "Carrots", "category": "Vegetables", "price": 0.90}, - {"item": "Broccoli", "category": "Vegetables", "price": 1.30}, - {"item": "Lettuce", "category": "Vegetables", "price": 1.00}, - {"item": "Tomatoes", "category": "Vegetables", "price": 1.20}, - {"item": "Potatoes", "category": "Vegetables", "price": 0.70}, - {"item": "Pasta", "category": "Pantry", "price": 1.10}, - {"item": "Rice", "category": "Pantry", "price": 1.00}, - {"item": "Cereal", "category": "Pantry", "price": 2.80}, - {"item": "Olive Oil", "category": "Pantry", "price": 4.00} - ] - } - ], - "variables": [ - { - "variableId": "itemsData_selected_sum_price", - "type": "object", - "isArray": true, - "initialValue": [], - "calculation": { - "dependsOn": [ - "itemsData_selected" - ], - "dataFrameTransformations": [ - { - "type": "aggregate", - "ops": ["sum"], - "fields": ["price"], - "as": ["sum_price"] - } - ] - } - }, - { - "variableId": "total", - "type": "number", - "initialValue": 0, - "calculation": { - "vegaExpression": "format(data('itemsData_selected_sum_price')[0] ? data('itemsData_selected_sum_price')[0].sum_price : 0, ',.2f')" - } - } - ], - "groups": [ - { - "groupId": "slide1", - "elements": [ - "## Welcome to the Shopping List App\n" - ] - }, - { - "groupId": "slide2", - "elements": [ - "## Here you can select items to buy from a variety of categories.\n", - "### Categories include Fruits, Bakery, Dairy, Meat, Vegetables, and Pantry items.\n", - "### You can select multiple items and see the total price calculated automatically." - ] - }, - { - "groupId": "slide3", - "elements": [ - "## Let's start by selecting some items from the list below.\n", - "### Click on the checkboxes next to the items you want to add to your shopping list." - ] - }, - { - "groupId": "slide4", - "elements": [ - "## Select the items you want to buy\n", - { - "type": "table", - "dataSourceName": "itemsData", - "variableId": "itemsData_selected", - "tabulatorOptions": { - "autoColumns": true, - "layout": "fitColumns", - "minHeight": "200px", - "maxHeight": "200px", - "selectableRows": true, - "rowHeader": { - "formatter": "rowSelection", - "titleFormatter": "rowSelection", - "headerSort": false, - "headerHozAlign": "center", - "hozAlign": "center", - "width": 40 - } - } - }, - "## Total Price\n\n${{total}}\n\n### Categories", - { - "type": "chart", - "chart": { - "chartIntent": "Show category distribution of selected items", - "chartTemplateKey": "bar", - "dataSourceBase": { - "dataSourceName": "itemsData_selected" - }, - "spec": { - "$schema": "https://vega.github.io/schema/vega-lite/v6.json", - "data": { - "name": "itemsData_selected" - }, - "mark": "bar", - "encoding": { - "x": { - "field": "category", - "type": "nominal", - "title": "Category" - }, - "y": { - "aggregate": "count", - "type": "quantitative", - "title": "Number of Items" - }, - "color": { - "field": "category", - "type": "nominal", - "legend": { - "title": "Category" - } - } - } - } - } - } - ] - } - ] -} \ No newline at end of file diff --git a/docs/dist/v1/chartifact.compiler.umd.js b/docs/dist/v1/chartifact.compiler.umd.js index c0c856d0..4976dc2c 100644 --- a/docs/dist/v1/chartifact.compiler.umd.js +++ b/docs/dist/v1/chartifact.compiler.umd.js @@ -192,6 +192,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy function createSpecWithVariables(variables, tableElements, stubDataLoaders) { const spec = { $schema: "https://vega.github.io/schema/vega/v5.json", + description: "This is the central brain of the page", signals: [], data: [] }; @@ -277,8 +278,15 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy function addDynamicDataLoaderToSpec(vegaScope, dataSource) { const { spec } = vegaScope; const { dataSourceName } = dataSource; - const urlSignal = vegaScope.createUrlSignal(dataSource.url); - const url = { signal: urlSignal.name }; + const tokens = tokenizeTemplate(dataSource.url); + const variableCount = tokens.filter((token) => token.type === "variable").length; + let url; + if (variableCount) { + const urlSignal = vegaScope.createUrlSignal(dataSource.url, tokens); + url = { signal: urlSignal.name }; + } else { + url = dataSource.url; + } ensureDataAndSignalsArray(spec); spec.signals.push(dataAsSignal(dataSourceName)); spec.data.unshift({ @@ -293,10 +301,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy __publicField(this, "urlCount", 0); this.spec = spec; } - createUrlSignal(url) { + createUrlSignal(url, tokens) { const name = `url:${this.urlCount++}:${safeVariableName(url)}`; const signal = { name }; - signal.update = encodeTemplateVariables(url); + signal.update = renderVegaExpression(tokens); if (!this.spec.signals) { this.spec.signals = []; } @@ -304,7 +312,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy return signal; } } - const JsonIndent = 2; + const defaultJsonIndent = 2; function tickWrap(tick, content) { return `\`\`\`${tick} ${content} @@ -315,7 +323,7 @@ ${content} } function chartWrap(spec) { const chartType = getChartType(spec); - return jsonWrap(chartType, JSON.stringify(spec, null, JsonIndent)); + return jsonWrap(chartType, JSON.stringify(spec, null, defaultJsonIndent)); } function mdContainerWrap(classname, id, content) { return `::: ${classname} {#${id}} @@ -341,9 +349,29 @@ ${content} mdSections.push(chartWrap(dataLoader.spec)); } for (const group of page.groups) { - mdSections.push(mdContainerWrap(defaultCommonOptions.groupClassName, group.groupId, groupMarkdown(group, variables))); + mdSections.push(mdContainerWrap( + defaultCommonOptions.groupClassName, + group.groupId, + groupMarkdown(group, variables, vegaScope, page.resources) + )); + } + const { data, signals } = vegaScope.spec; + if ((data == null ? void 0 : data.length) === 0) { + delete vegaScope.spec.data; + } else { + data.forEach((d) => { + var _a; + if (((_a = d.transform) == null ? void 0 : _a.length) === 0) { + delete d.transform; + } + }); + } + if ((signals == null ? void 0 : signals.length) === 0) { + delete vegaScope.spec.signals; + } + if (vegaScope.spec.data || vegaScope.spec.signals) { + mdSections.unshift(chartWrap(vegaScope.spec)); } - mdSections.unshift(chartWrap(vegaScope.spec)); const markdown = mdSections.join("\n\n"); return markdown; } @@ -368,11 +396,12 @@ ${content} } return vegaScope; } - function groupMarkdown(group, variables, vegaScope) { - var _a, _b, _c, _d; + function groupMarkdown(group, variables, vegaScope, resources) { + var _a, _b, _c, _d, _e; const mdElements = []; - const addSpec = (pluginName, spec) => { - mdElements.push(jsonWrap(pluginName, JSON.stringify(spec, null, JsonIndent))); + const addSpec = (pluginName, spec, indent = true) => { + const content = indent ? JSON.stringify(spec, null, defaultJsonIndent) : JSON.stringify(spec); + mdElements.push(jsonWrap(pluginName, content)); }; for (const element of group.elements) { if (typeof element === "string") { @@ -380,12 +409,12 @@ ${content} } else if (typeof element === "object") { switch (element.type) { case "chart": { - const { chart } = element; - const chartFull = chart; - if (!chartFull.spec) { + const { chartKey } = element; + const spec = (_a = resources == null ? void 0 : resources.charts) == null ? void 0 : _a[chartKey]; + if (!spec) { mdElements.push("![Chart Spinner](/img/chart-spinner.gif)"); } else { - mdElements.push(chartWrap(chartFull.spec)); + mdElements.push(chartWrap(spec)); } break; } @@ -393,17 +422,17 @@ ${content} const { label, variableId } = element; const cbSpec = { variableId, - value: (_a = variables.find((v) => v.variableId === variableId)) == null ? void 0 : _a.initialValue, + value: (_b = variables.find((v) => v.variableId === variableId)) == null ? void 0 : _b.initialValue, label }; - addSpec("checkbox", cbSpec); + addSpec("checkbox", cbSpec, false); break; } case "dropdown": { const { label, variableId, options, dynamicOptions, multiple, size } = element; const ddSpec = { variableId, - value: (_b = variables.find((v) => v.variableId === variableId)) == null ? void 0 : _b.initialValue, + value: (_c = variables.find((v) => v.variableId === variableId)) == null ? void 0 : _c.initialValue, label }; if (dynamicOptions) { @@ -443,13 +472,13 @@ ${content} const { label, min, max, step, variableId } = element; const sliderSpec = { variableId, - value: (_c = variables.find((v) => v.variableId === variableId)) == null ? void 0 : _c.initialValue, + value: (_d = variables.find((v) => v.variableId === variableId)) == null ? void 0 : _d.initialValue, label, min, max, step }; - addSpec("slider", sliderSpec); + addSpec("slider", sliderSpec, false); break; } case "table": { @@ -462,12 +491,12 @@ ${content} const { variableId, label, multiline, placeholder } = element; const textboxSpec = { variableId, - value: (_d = variables.find((v) => v.variableId === variableId)) == null ? void 0 : _d.initialValue, + value: (_e = variables.find((v) => v.variableId === variableId)) == null ? void 0 : _e.initialValue, label, multiline, placeholder }; - addSpec("textbox", textboxSpec); + addSpec("textbox", textboxSpec, false); break; } } diff --git a/docs/dist/v1/chartifact.editor.umd.js b/docs/dist/v1/chartifact.editor.umd.js index 0ea8f3c2..d8f6d263 100644 --- a/docs/dist/v1/chartifact.editor.umd.js +++ b/docs/dist/v1/chartifact.editor.umd.js @@ -193,6 +193,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy function createSpecWithVariables(variables, tableElements, stubDataLoaders) { const spec = { $schema: "https://vega.github.io/schema/vega/v5.json", + description: "This is the central brain of the page", signals: [], data: [] }; @@ -278,8 +279,15 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy function addDynamicDataLoaderToSpec(vegaScope, dataSource) { const { spec } = vegaScope; const { dataSourceName } = dataSource; - const urlSignal = vegaScope.createUrlSignal(dataSource.url); - const url = { signal: urlSignal.name }; + const tokens = tokenizeTemplate(dataSource.url); + const variableCount = tokens.filter((token) => token.type === "variable").length; + let url; + if (variableCount) { + const urlSignal = vegaScope.createUrlSignal(dataSource.url, tokens); + url = { signal: urlSignal.name }; + } else { + url = dataSource.url; + } ensureDataAndSignalsArray(spec); spec.signals.push(dataAsSignal(dataSourceName)); spec.data.unshift({ @@ -295,10 +303,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy __publicField(this, "urlCount", 0); this.spec = spec; } - createUrlSignal(url) { + createUrlSignal(url, tokens) { const name = `url:${this.urlCount++}:${safeVariableName(url)}`; const signal = { name }; - signal.update = encodeTemplateVariables(url); + signal.update = renderVegaExpression(tokens); if (!this.spec.signals) { this.spec.signals = []; } @@ -306,7 +314,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy return signal; } } - const JsonIndent = 2; + const defaultJsonIndent = 2; function tickWrap(tick, content) { return `\`\`\`${tick} ${content} @@ -317,7 +325,7 @@ ${content} } function chartWrap(spec) { const chartType = getChartType(spec); - return jsonWrap(chartType, JSON.stringify(spec, null, JsonIndent)); + return jsonWrap(chartType, JSON.stringify(spec, null, defaultJsonIndent)); } function mdContainerWrap(classname, id, content) { return `::: ${classname} {#${id}} @@ -343,9 +351,25 @@ ${content} mdSections.push(chartWrap(dataLoader.spec)); } for (const group of page.groups) { - mdSections.push(mdContainerWrap(defaultCommonOptions.groupClassName, group.groupId, groupMarkdown(group, variables))); + mdSections.push(mdContainerWrap(defaultCommonOptions.groupClassName, group.groupId, groupMarkdown(group, variables, vegaScope, page.resources))); + } + const { data, signals } = vegaScope.spec; + if ((data == null ? void 0 : data.length) === 0) { + delete vegaScope.spec.data; + } else { + data.forEach((d) => { + var _a; + if (((_a = d.transform) == null ? void 0 : _a.length) === 0) { + delete d.transform; + } + }); + } + if ((signals == null ? void 0 : signals.length) === 0) { + delete vegaScope.spec.signals; + } + if (vegaScope.spec.data || vegaScope.spec.signals) { + mdSections.unshift(chartWrap(vegaScope.spec)); } - mdSections.unshift(chartWrap(vegaScope.spec)); const markdown = mdSections.join("\n\n"); return markdown; } @@ -370,11 +394,12 @@ ${content} } return vegaScope; } - function groupMarkdown(group, variables, vegaScope) { - var _a, _b, _c, _d; + function groupMarkdown(group, variables, vegaScope, resources) { + var _a, _b, _c, _d, _e; const mdElements = []; - const addSpec = (pluginName, spec) => { - mdElements.push(jsonWrap(pluginName, JSON.stringify(spec, null, JsonIndent))); + const addSpec = (pluginName, spec, indent = true) => { + const content = indent ? JSON.stringify(spec, null, defaultJsonIndent) : JSON.stringify(spec); + mdElements.push(jsonWrap(pluginName, content)); }; for (const element of group.elements) { if (typeof element === "string") { @@ -382,12 +407,12 @@ ${content} } else if (typeof element === "object") { switch (element.type) { case "chart": { - const { chart } = element; - const chartFull = chart; - if (!chartFull.spec) { + const { chartKey } = element; + const spec = (_a = resources == null ? void 0 : resources.charts) == null ? void 0 : _a[chartKey]; + if (!spec) { mdElements.push("![Chart Spinner](/img/chart-spinner.gif)"); } else { - mdElements.push(chartWrap(chartFull.spec)); + mdElements.push(chartWrap(spec)); } break; } @@ -395,17 +420,17 @@ ${content} const { label, variableId } = element; const cbSpec = { variableId, - value: (_a = variables.find((v) => v.variableId === variableId)) == null ? void 0 : _a.initialValue, + value: (_b = variables.find((v) => v.variableId === variableId)) == null ? void 0 : _b.initialValue, label }; - addSpec("checkbox", cbSpec); + addSpec("checkbox", cbSpec, false); break; } case "dropdown": { const { label, variableId, options, dynamicOptions, multiple, size } = element; const ddSpec = { variableId, - value: (_b = variables.find((v) => v.variableId === variableId)) == null ? void 0 : _b.initialValue, + value: (_c = variables.find((v) => v.variableId === variableId)) == null ? void 0 : _c.initialValue, label }; if (dynamicOptions) { @@ -445,13 +470,13 @@ ${content} const { label, min, max, step, variableId } = element; const sliderSpec = { variableId, - value: (_c = variables.find((v) => v.variableId === variableId)) == null ? void 0 : _c.initialValue, + value: (_d = variables.find((v) => v.variableId === variableId)) == null ? void 0 : _d.initialValue, label, min, max, step }; - addSpec("slider", sliderSpec); + addSpec("slider", sliderSpec, false); break; } case "table": { @@ -464,12 +489,12 @@ ${content} const { variableId, label, multiline, placeholder } = element; const textboxSpec = { variableId, - value: (_d = variables.find((v) => v.variableId === variableId)) == null ? void 0 : _d.initialValue, + value: (_e = variables.find((v) => v.variableId === variableId)) == null ? void 0 : _e.initialValue, label, multiline, placeholder }; - addSpec("textbox", textboxSpec); + addSpec("textbox", textboxSpec, false); break; } } @@ -3705,111 +3730,103 @@ document.addEventListener('DOMContentLoaded', () => { "Here is a stacked bar chart of Seattle weather:\nEach bar represents the count of weather types for each month.\nThe colors distinguish between different weather conditions such as sun, fog, drizzle, rain, and snow.", { "type": "chart", - "chart": { - "dataSourceBase": { - "dataSourceName": "data" - }, - "chartTemplateKey": "bar", - "chartIntent": "A bar chart showing the distribution of weather types over months.", - "spec": { - "$schema": "https://vega.github.io/schema/vega-lite/v6.json", - "data": { - "name": "seattle_weather" - }, - "mark": "bar", - "encoding": { - "x": { - "timeUnit": "month", - "field": "date", - "type": "ordinal", - "title": "Month of the year" - }, - "y": { - "aggregate": "count", - "type": "quantitative" - }, - "color": { - "field": "weather", - "type": "nominal", - "scale": { - "domain": [ - "sun", - "fog", - "drizzle", - "rain", - "snow" - ], - "range": [ - "#e7ba52", - "#c7c7c7", - "#aec7e8", - "#1f77b4", - "#9467bd" - ] - }, - "title": "Weather type" - } - } - } - } + "chartKey": "1" }, "This section introduces a heatmap visualization for the Seattle weather dataset.\nThe heatmap is designed to display the distribution and intensity of weather-related variables,\nsuch as temperature, precipitation, or frequency of weather events, across different time periods or categories.\nIt provides an intuitive way to identify patterns, trends, and anomalies in the dataset.", { "type": "chart", - "chart": { - "dataSourceBase": { - "dataSourceName": "data" + "chartKey": "2" + } + ] + } + ], + "resources": { + "charts": { + "1": { + "$schema": "https://vega.github.io/schema/vega-lite/v6.json", + "data": { + "name": "seattle_weather" + }, + "mark": "bar", + "encoding": { + "x": { + "timeUnit": "month", + "field": "date", + "type": "ordinal", + "title": "Month of the year" + }, + "y": { + "aggregate": "count", + "type": "quantitative" + }, + "color": { + "field": "weather", + "type": "nominal", + "scale": { + "domain": [ + "sun", + "fog", + "drizzle", + "rain", + "snow" + ], + "range": [ + "#e7ba52", + "#c7c7c7", + "#aec7e8", + "#1f77b4", + "#9467bd" + ] }, - "chartTemplateKey": "heatmap", - "chartIntent": "A heatmap showing the distribution of daily maximum temperatures in Seattle.", - "spec": { - "$schema": "https://vega.github.io/schema/vega-lite/v6.json", - "data": { - "name": "seattle_weather" - }, - "title": "Daily Max Temperatures (C) in Seattle, WA", - "config": { - "view": { - "strokeWidth": 0, - "step": 13 - }, - "axis": { - "domain": false - } - }, - "mark": "rect", - "encoding": { - "x": { - "field": "date", - "timeUnit": "date", - "type": "ordinal", - "title": "Day", - "axis": { - "labelAngle": 0, - "format": "%e" - } - }, - "y": { - "field": "date", - "timeUnit": "month", - "type": "ordinal", - "title": "Month" - }, - "color": { - "field": "temp_max", - "aggregate": "max", - "type": "quantitative", - "legend": { - "title": null - } - } - } + "title": "Weather type" + } + } + }, + "2": { + "$schema": "https://vega.github.io/schema/vega-lite/v6.json", + "data": { + "name": "seattle_weather" + }, + "title": "Daily Max Temperatures (C) in Seattle, WA", + "config": { + "view": { + "strokeWidth": 0, + "step": 13 + }, + "axis": { + "domain": false + } + }, + "mark": "rect", + "encoding": { + "x": { + "field": "date", + "timeUnit": "date", + "type": "ordinal", + "title": "Day", + "axis": { + "labelAngle": 0, + "format": "%e" + } + }, + "y": { + "field": "date", + "timeUnit": "month", + "type": "ordinal", + "title": "Month" + }, + "color": { + "field": "temp_max", + "aggregate": "max", + "type": "quantitative", + "legend": { + "title": null } } } - ] + } } - ] + } }; const index = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ __proto__: null, diff --git a/docs/dist/v1/chartifact.host.umd.js b/docs/dist/v1/chartifact.host.umd.js index 319fca4d..a31467cb 100644 --- a/docs/dist/v1/chartifact.host.umd.js +++ b/docs/dist/v1/chartifact.host.umd.js @@ -193,6 +193,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy function createSpecWithVariables(variables, tableElements, stubDataLoaders) { const spec = { $schema: "https://vega.github.io/schema/vega/v5.json", + description: "This is the central brain of the page", signals: [], data: [] }; @@ -278,8 +279,15 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy function addDynamicDataLoaderToSpec(vegaScope, dataSource) { const { spec } = vegaScope; const { dataSourceName } = dataSource; - const urlSignal = vegaScope.createUrlSignal(dataSource.url); - const url = { signal: urlSignal.name }; + const tokens = tokenizeTemplate(dataSource.url); + const variableCount = tokens.filter((token) => token.type === "variable").length; + let url; + if (variableCount) { + const urlSignal = vegaScope.createUrlSignal(dataSource.url, tokens); + url = { signal: urlSignal.name }; + } else { + url = dataSource.url; + } ensureDataAndSignalsArray(spec); spec.signals.push(dataAsSignal(dataSourceName)); spec.data.unshift({ @@ -295,10 +303,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy __publicField(this, "urlCount", 0); this.spec = spec; } - createUrlSignal(url) { + createUrlSignal(url, tokens) { const name = `url:${this.urlCount++}:${safeVariableName(url)}`; const signal = { name }; - signal.update = encodeTemplateVariables(url); + signal.update = renderVegaExpression(tokens); if (!this.spec.signals) { this.spec.signals = []; } @@ -306,7 +314,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy return signal; } } - const JsonIndent = 2; + const defaultJsonIndent = 2; function tickWrap(tick, content) { return `\`\`\`${tick} ${content} @@ -317,7 +325,7 @@ ${content} } function chartWrap(spec) { const chartType = getChartType(spec); - return jsonWrap(chartType, JSON.stringify(spec, null, JsonIndent)); + return jsonWrap(chartType, JSON.stringify(spec, null, defaultJsonIndent)); } function mdContainerWrap(classname, id, content) { return `::: ${classname} {#${id}} @@ -343,9 +351,25 @@ ${content} mdSections.push(chartWrap(dataLoader.spec)); } for (const group of page.groups) { - mdSections.push(mdContainerWrap(defaultCommonOptions.groupClassName, group.groupId, groupMarkdown(group, variables))); + mdSections.push(mdContainerWrap(defaultCommonOptions.groupClassName, group.groupId, groupMarkdown(group, variables, vegaScope, page.resources))); + } + const { data, signals } = vegaScope.spec; + if ((data == null ? void 0 : data.length) === 0) { + delete vegaScope.spec.data; + } else { + data.forEach((d) => { + var _a; + if (((_a = d.transform) == null ? void 0 : _a.length) === 0) { + delete d.transform; + } + }); + } + if ((signals == null ? void 0 : signals.length) === 0) { + delete vegaScope.spec.signals; + } + if (vegaScope.spec.data || vegaScope.spec.signals) { + mdSections.unshift(chartWrap(vegaScope.spec)); } - mdSections.unshift(chartWrap(vegaScope.spec)); const markdown = mdSections.join("\n\n"); return markdown; } @@ -370,11 +394,12 @@ ${content} } return vegaScope; } - function groupMarkdown(group, variables, vegaScope) { - var _a, _b, _c, _d; + function groupMarkdown(group, variables, vegaScope, resources) { + var _a, _b, _c, _d, _e; const mdElements = []; - const addSpec = (pluginName, spec) => { - mdElements.push(jsonWrap(pluginName, JSON.stringify(spec, null, JsonIndent))); + const addSpec = (pluginName, spec, indent = true) => { + const content = indent ? JSON.stringify(spec, null, defaultJsonIndent) : JSON.stringify(spec); + mdElements.push(jsonWrap(pluginName, content)); }; for (const element of group.elements) { if (typeof element === "string") { @@ -382,12 +407,12 @@ ${content} } else if (typeof element === "object") { switch (element.type) { case "chart": { - const { chart } = element; - const chartFull = chart; - if (!chartFull.spec) { + const { chartKey } = element; + const spec = (_a = resources == null ? void 0 : resources.charts) == null ? void 0 : _a[chartKey]; + if (!spec) { mdElements.push("![Chart Spinner](/img/chart-spinner.gif)"); } else { - mdElements.push(chartWrap(chartFull.spec)); + mdElements.push(chartWrap(spec)); } break; } @@ -395,17 +420,17 @@ ${content} const { label, variableId } = element; const cbSpec = { variableId, - value: (_a = variables.find((v) => v.variableId === variableId)) == null ? void 0 : _a.initialValue, + value: (_b = variables.find((v) => v.variableId === variableId)) == null ? void 0 : _b.initialValue, label }; - addSpec("checkbox", cbSpec); + addSpec("checkbox", cbSpec, false); break; } case "dropdown": { const { label, variableId, options, dynamicOptions, multiple, size } = element; const ddSpec = { variableId, - value: (_b = variables.find((v) => v.variableId === variableId)) == null ? void 0 : _b.initialValue, + value: (_c = variables.find((v) => v.variableId === variableId)) == null ? void 0 : _c.initialValue, label }; if (dynamicOptions) { @@ -445,13 +470,13 @@ ${content} const { label, min, max, step, variableId } = element; const sliderSpec = { variableId, - value: (_c = variables.find((v) => v.variableId === variableId)) == null ? void 0 : _c.initialValue, + value: (_d = variables.find((v) => v.variableId === variableId)) == null ? void 0 : _d.initialValue, label, min, max, step }; - addSpec("slider", sliderSpec); + addSpec("slider", sliderSpec, false); break; } case "table": { @@ -464,12 +489,12 @@ ${content} const { variableId, label, multiline, placeholder } = element; const textboxSpec = { variableId, - value: (_d = variables.find((v) => v.variableId === variableId)) == null ? void 0 : _d.initialValue, + value: (_e = variables.find((v) => v.variableId === variableId)) == null ? void 0 : _e.initialValue, label, multiline, placeholder }; - addSpec("textbox", textboxSpec); + addSpec("textbox", textboxSpec, false); break; } } diff --git a/docs/schema/idoc_v1.d.ts b/docs/schema/idoc_v1.d.ts index 04f5fe58..eb805a0a 100644 --- a/docs/schema/idoc_v1.d.ts +++ b/docs/schema/idoc_v1.d.ts @@ -142,27 +142,13 @@ interface DropdownElementProps extends VariableControl { /** number of options to show at once */ size?: number; } -interface ChartPlaceholder { - /** A list of available chart templates will be provided below, the Assistant will choose one of these templates to render a chart */ - chartTemplateKey: string; - dataSourceBase: DataSourceBase; - /** what this chart intends to show */ - chartIntent: string; -} -interface ChartFull extends ChartPlaceholder { - /** either a Vega or Vega-Lite spec */ - spec: object; -} -/** When creating a new page: for charts, the Assistant will create a ChartPlaceholder */ -/** When working with existing pages/charts, the Assistant can use ChartFull */ -type ChartValue = ChartPlaceholder | ChartFull; /** * Chart * use for visualizations */ interface ChartElement extends ElementBase { type: 'chart'; - chart: ChartValue; + chartKey: string; } /** * Image element @@ -216,6 +202,7 @@ interface ElementGroup { groupId: string; elements: PageElement[]; } +type Vega_or_VegaLite_spec = object; /** Define the basic structure of an interactive document */ interface InteractiveDocument { title: string; @@ -229,6 +216,11 @@ interface InteractiveDocument { dataLoaders?: DataLoader[]; variables?: Variable[]; style?: PageStyle; + resources?: { + charts?: { + [chartKey: string]: Vega_or_VegaLite_spec; + }; + }; } /** * Use markdown elements to be verbose and descriptive. Do not use as labels for interactive elements. @@ -262,4 +254,4 @@ interface GoogleFontsSpec { type InteractiveDocumentWithSchema = InteractiveDocument & { $schema?: string; }; -export type { Calculation, ChartElement, ChartFull, ChartPlaceholder, ChartValue, CheckboxElement, CheckboxProps, DataLoader, DataLoaderBySpec, DataSource, DataSourceBase, DataSourceBaseFormat, DataSourceByDynamicURL, DataSourceByFile, DataSourceInline, DropdownElement, DropdownElementProps, DynamicDropdownOptions, ElementBase, ElementGroup, GoogleFontsSpec, ImageElement, ImageElementProps, InteractiveDocument, InteractiveDocumentWithSchema, InteractiveElement, MarkdownElement, PageElement, PageStyle, Preset, PresetsElement, PresetsElementProps, ReturnType, SliderElement, SliderElementProps, TableElement, TableElementProps, TemplatedUrl, TextboxElement, TextboxElementProps, Variable, VariableControl, VariableID, VariableType, VariableValue, VariableValueArray, VariableValuePrimitive }; \ No newline at end of file +export type { Calculation, ChartElement, CheckboxElement, CheckboxProps, DataLoader, DataLoaderBySpec, DataSource, DataSourceBase, DataSourceBaseFormat, DataSourceByDynamicURL, DataSourceByFile, DataSourceInline, DropdownElement, DropdownElementProps, DynamicDropdownOptions, ElementBase, ElementGroup, GoogleFontsSpec, ImageElement, ImageElementProps, InteractiveDocument, InteractiveDocumentWithSchema, InteractiveElement, MarkdownElement, PageElement, PageStyle, Preset, PresetsElement, PresetsElementProps, ReturnType, SliderElement, SliderElementProps, TableElement, TableElementProps, TemplatedUrl, TextboxElement, TextboxElementProps, Variable, VariableControl, VariableID, VariableType, VariableValue, VariableValueArray, VariableValuePrimitive, Vega_or_VegaLite_spec }; \ No newline at end of file diff --git a/docs/schema/idoc_v1.json b/docs/schema/idoc_v1.json index 1bd32283..525d774d 100644 --- a/docs/schema/idoc_v1.json +++ b/docs/schema/idoc_v1.json @@ -212,8 +212,8 @@ "additionalProperties": false, "description": "Chart use for visualizations", "properties": { - "chart": { - "$ref": "#/definitions/ChartValue" + "chartKey": { + "type": "string" }, "type": { "const": "chart", @@ -222,70 +222,10 @@ }, "required": [ "type", - "chart" + "chartKey" ], "type": "object" }, - "ChartFull": { - "additionalProperties": false, - "properties": { - "chartIntent": { - "description": "what this chart intends to show", - "type": "string" - }, - "chartTemplateKey": { - "description": "A list of available chart templates will be provided below, the Assistant will choose one of these templates to render a chart", - "type": "string" - }, - "dataSourceBase": { - "$ref": "#/definitions/DataSourceBase" - }, - "spec": { - "description": "either a Vega or Vega-Lite spec", - "type": "object" - } - }, - "required": [ - "chartIntent", - "chartTemplateKey", - "dataSourceBase", - "spec" - ], - "type": "object" - }, - "ChartPlaceholder": { - "additionalProperties": false, - "properties": { - "chartIntent": { - "description": "what this chart intends to show", - "type": "string" - }, - "chartTemplateKey": { - "description": "A list of available chart templates will be provided below, the Assistant will choose one of these templates to render a chart", - "type": "string" - }, - "dataSourceBase": { - "$ref": "#/definitions/DataSourceBase" - } - }, - "required": [ - "chartTemplateKey", - "dataSourceBase", - "chartIntent" - ], - "type": "object" - }, - "ChartValue": { - "anyOf": [ - { - "$ref": "#/definitions/ChartPlaceholder" - }, - { - "$ref": "#/definitions/ChartFull" - } - ], - "description": "When working with existing pages/charts, the Assistant can use ChartFull" - }, "CheckboxElement": { "additionalProperties": false, "description": "Checkbox use for boolean values", @@ -716,29 +656,6 @@ ], "description": "Union type for DataSource" }, - "DataSourceBase": { - "additionalProperties": false, - "properties": { - "dataFrameTransformations": { - "items": { - "$ref": "#/definitions/Transforms" - }, - "type": "array" - }, - "dataSourceName": { - "$ref": "#/definitions/VariableID", - "description": "name of the data source, used to reference it in the UI, has same constraints as VariableID" - }, - "format": { - "$ref": "#/definitions/DataSourceBaseFormat", - "description": "optional, default is 'json'" - } - }, - "required": [ - "dataSourceName" - ], - "type": "object" - }, "DataSourceBaseFormat": { "enum": [ "csv", @@ -1808,6 +1725,18 @@ }, "type": "array" }, + "resources": { + "additionalProperties": false, + "properties": { + "charts": { + "additionalProperties": { + "$ref": "#/definitions/Vega_or_VegaLite_spec" + }, + "type": "object" + } + }, + "type": "object" + }, "style": { "$ref": "#/definitions/PageStyle" }, @@ -3435,6 +3364,9 @@ "minItems": 7, "type": "array" }, + "Vega_or_VegaLite_spec": { + "type": "object" + }, "VoronoiTransform": { "additionalProperties": false, "properties": { diff --git a/package-lock.json b/package-lock.json index e069567d..afcc97c8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6945,6 +6945,10 @@ "node": ">=0.10.0" } }, + "node_modules/examples": { + "resolved": "packages/examples", + "link": true + }, "node_modules/expand-template": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/expand-template/-/expand-template-2.0.3.tgz", @@ -13198,6 +13202,10 @@ "@types/react-dom": "^18.3.1" } }, + "packages/examples": { + "version": "1.0.0", + "license": "MIT" + }, "packages/host": { "name": "@microsoft/chartifact-host", "version": "1.0.0", diff --git a/packages/compiler/src/loader.ts b/packages/compiler/src/loader.ts index 4949993c..bf81a2b9 100644 --- a/packages/compiler/src/loader.ts +++ b/packages/compiler/src/loader.ts @@ -6,6 +6,7 @@ import { DataSourceByDynamicURL, DataSourceByFile, DataSourceInline } from '@mic import { read, SignalRef, ValuesData } from 'vega'; import { VegaScope } from './scope.js'; import { dataAsSignal, ensureDataAndSignalsArray } from './spec.js'; +import { tokenizeTemplate } from 'common'; export function addStaticDataLoaderToSpec(vegaScope: VegaScope, dataSource: DataSourceInline | DataSourceByFile) { const { spec } = vegaScope; @@ -57,11 +58,22 @@ export function addDynamicDataLoaderToSpec(vegaScope: VegaScope, dataSource: Dat const { spec } = vegaScope; const { dataSourceName } = dataSource; - const urlSignal = vegaScope.createUrlSignal(dataSource.url); - const url: SignalRef = { signal: urlSignal.name }; + //look for signal token within the dataSource.url + const tokens = tokenizeTemplate(dataSource.url); + const variableCount = tokens.filter(token => token.type === 'variable').length; - ensureDataAndSignalsArray(spec); + let url: string | SignalRef; + + if (variableCount) { + const urlSignal = vegaScope.createUrlSignal(dataSource.url, tokens); + url = { signal: urlSignal.name }; + } else { + //dont need an extra signal, just load url directly + url = dataSource.url; + } + + ensureDataAndSignalsArray(spec); spec.signals.push(dataAsSignal(dataSourceName)); //real data goes to the beginning of the data array diff --git a/packages/compiler/src/md.ts b/packages/compiler/src/md.ts index 17e88bfd..bd790b0e 100644 --- a/packages/compiler/src/md.ts +++ b/packages/compiler/src/md.ts @@ -4,7 +4,7 @@ */ import { Spec as VegaSpec } from 'vega-typings'; import { TopLevelSpec as VegaLiteSpec } from "vega-lite"; -import { ChartFull, DataSource, ElementGroup, InteractiveDocument, TableElement, Variable } from '@microsoft/chartifact-schema'; +import { DataSource, ElementGroup, InteractiveDocument, TableElement, Variable } from '@microsoft/chartifact-schema'; import { getChartType } from './util.js'; import { addDynamicDataLoaderToSpec, addStaticDataLoaderToSpec } from './loader.js'; import { Plugins } from '@microsoft/chartifact-markdown'; @@ -12,7 +12,7 @@ import { VegaScope } from './scope.js'; import { createSpecWithVariables } from './spec.js'; import { defaultCommonOptions } from 'common'; -const JsonIndent = 2; +const defaultJsonIndent = 2; function tickWrap(tick: string, content: string) { return `\`\`\`${tick}\n${content}\n\`\`\``; @@ -24,7 +24,7 @@ function jsonWrap(type: string, content: string) { function chartWrap(spec: VegaSpec | VegaLiteSpec) { const chartType = getChartType(spec); - return jsonWrap(chartType, JSON.stringify(spec, null, JsonIndent)); + return jsonWrap(chartType, JSON.stringify(spec, null, defaultJsonIndent)); } function mdContainerWrap(classname: string, id: string, content: string) { @@ -57,11 +57,33 @@ export function targetMarkdown(page: InteractiveDocument) { } for (const group of page.groups) { - mdSections.push(mdContainerWrap(defaultCommonOptions.groupClassName, group.groupId, groupMarkdown(group, variables, vegaScope))); + mdSections.push(mdContainerWrap( + defaultCommonOptions.groupClassName, + group.groupId, + groupMarkdown(group, variables, vegaScope, page.resources) + )); } - //spec is at the top of the markdown file - mdSections.unshift(chartWrap(vegaScope.spec)); + const { data, signals } = vegaScope.spec; + + //cleanup the vegaScope.spec + if (data?.length === 0) { + delete vegaScope.spec.data; + } else { + data.forEach(d => { + if (d.transform?.length === 0) { + delete d.transform; + } + }); + } + if (signals?.length === 0) { + delete vegaScope.spec.signals; + } + + if (vegaScope.spec.data || vegaScope.spec.signals) { + //spec is at the top of the markdown file + mdSections.unshift(chartWrap(vegaScope.spec)); + } const markdown = mdSections.join('\n\n'); return markdown; @@ -95,11 +117,12 @@ function dataLoaderMarkdown(dataSources: DataSource[], variables: Variable[], ta type pluginSpecs = Plugins.CheckboxSpec | Plugins.DropdownSpec | Plugins.ImageSpec | Plugins.PresetsSpec | Plugins.SliderSpec | Plugins.TabulatorSpec | Plugins.TextboxSpec; -function groupMarkdown(group: ElementGroup, variables: Variable[], vegaScope: VegaScope) { +function groupMarkdown(group: ElementGroup, variables: Variable[], vegaScope: VegaScope, resources: { charts?: { [chartKey: string]: VegaSpec | VegaLiteSpec } }) { const mdElements: string[] = []; - const addSpec = (pluginName: Plugins.PluginNames, spec: pluginSpecs) => { - mdElements.push(jsonWrap(pluginName, JSON.stringify(spec, null, JsonIndent))); + const addSpec = (pluginName: Plugins.PluginNames, spec: pluginSpecs, indent = true) => { + const content = indent ? JSON.stringify(spec, null, defaultJsonIndent) : JSON.stringify(spec); + mdElements.push(jsonWrap(pluginName, content)); } for (const element of group.elements) { @@ -108,14 +131,14 @@ function groupMarkdown(group: ElementGroup, variables: Variable[], vegaScope: Ve } else if (typeof element === 'object') { switch (element.type) { case 'chart': { - const { chart } = element; - const chartFull = chart as ChartFull; + const { chartKey } = element; + const spec = resources?.charts?.[chartKey]; //see if it's a placeholder or a full chart - if (!chartFull.spec) { + if (!spec) { //add a markdown element (not a chart element) with an image of the spinner at /img/chart-spinner.gif mdElements.push('![Chart Spinner](/img/chart-spinner.gif)'); } else { - mdElements.push(chartWrap(chartFull.spec)); + mdElements.push(chartWrap(spec)); } break; } @@ -126,7 +149,7 @@ function groupMarkdown(group: ElementGroup, variables: Variable[], vegaScope: Ve value: variables.find(v => v.variableId === variableId)?.initialValue as boolean, label, }; - addSpec('checkbox', cbSpec); + addSpec('checkbox', cbSpec, false); break; } case 'dropdown': { @@ -179,7 +202,7 @@ function groupMarkdown(group: ElementGroup, variables: Variable[], vegaScope: Ve max, step, }; - addSpec('slider', sliderSpec); + addSpec('slider', sliderSpec, false); break; } case 'table': { @@ -197,7 +220,7 @@ function groupMarkdown(group: ElementGroup, variables: Variable[], vegaScope: Ve multiline, placeholder, }; - addSpec('textbox', textboxSpec); + addSpec('textbox', textboxSpec, false); break; } } diff --git a/packages/compiler/src/scope.ts b/packages/compiler/src/scope.ts index 632cdd48..7fa64b5a 100644 --- a/packages/compiler/src/scope.ts +++ b/packages/compiler/src/scope.ts @@ -6,19 +6,19 @@ import { Spec as VegaSpec } from 'vega-typings'; import { TemplatedUrl } from '@microsoft/chartifact-schema'; import { NewSignal } from "vega"; import { safeVariableName } from "./util.js"; -import { encodeTemplateVariables } from 'common'; +import { renderVegaExpression, TemplateToken } from 'common'; export class VegaScope { private urlCount = 0; constructor(public spec: VegaSpec) { } - createUrlSignal(url: TemplatedUrl) { + createUrlSignal(url: TemplatedUrl, tokens: TemplateToken[]) { const name = `url:${this.urlCount++}:${safeVariableName(url)}`; const signal: NewSignal = { name }; // Build a string expression for urlPath, replacing variables with encodeURIComponent - signal.update = encodeTemplateVariables(url); + signal.update = renderVegaExpression(tokens); if (!this.spec.signals) { this.spec.signals = []; diff --git a/packages/compiler/src/spec.ts b/packages/compiler/src/spec.ts index 59080dd6..aa348da1 100644 --- a/packages/compiler/src/spec.ts +++ b/packages/compiler/src/spec.ts @@ -14,6 +14,7 @@ export function createSpecWithVariables(variables: Variable[], tableElements: Ta //preload with variables as signals const spec: VegaSpec = { $schema: "https://vega.github.io/schema/vega/v5.json", + description: "This is the central brain of the page", signals: [], data: [], }; diff --git a/packages/editor/src/app.tsx b/packages/editor/src/app.tsx index 985dcb7d..d75596bc 100644 --- a/packages/editor/src/app.tsx +++ b/packages/editor/src/app.tsx @@ -183,109 +183,101 @@ const initialPage: InteractiveDocument = { "Here is a stacked bar chart of Seattle weather:\nEach bar represents the count of weather types for each month.\nThe colors distinguish between different weather conditions such as sun, fog, drizzle, rain, and snow.", { "type": "chart", - "chart": { - "dataSourceBase": { - "dataSourceName": "data" - }, - "chartTemplateKey": "bar", - "chartIntent": "A bar chart showing the distribution of weather types over months.", - "spec": { - "$schema": "https://vega.github.io/schema/vega-lite/v6.json", - "data": { - "name": "seattle_weather" - }, - "mark": "bar", - "encoding": { - "x": { - "timeUnit": "month", - "field": "date", - "type": "ordinal", - "title": "Month of the year" - }, - "y": { - "aggregate": "count", - "type": "quantitative" - }, - "color": { - "field": "weather", - "type": "nominal", - "scale": { - "domain": [ - "sun", - "fog", - "drizzle", - "rain", - "snow" - ], - "range": [ - "#e7ba52", - "#c7c7c7", - "#aec7e8", - "#1f77b4", - "#9467bd" - ] - }, - "title": "Weather type" - } - } - } - } + "chartKey": "1" }, "This section introduces a heatmap visualization for the Seattle weather dataset.\nThe heatmap is designed to display the distribution and intensity of weather-related variables,\nsuch as temperature, precipitation, or frequency of weather events, across different time periods or categories.\nIt provides an intuitive way to identify patterns, trends, and anomalies in the dataset.", { "type": "chart", - "chart": { - "dataSourceBase": { - "dataSourceName": "data" + "chartKey": "2" + } + ] + } + ], + "resources": { + "charts": { + "1": { + "$schema": "https://vega.github.io/schema/vega-lite/v6.json", + "data": { + "name": "seattle_weather" + }, + "mark": "bar", + "encoding": { + "x": { + "timeUnit": "month", + "field": "date", + "type": "ordinal", + "title": "Month of the year" + }, + "y": { + "aggregate": "count", + "type": "quantitative" + }, + "color": { + "field": "weather", + "type": "nominal", + "scale": { + "domain": [ + "sun", + "fog", + "drizzle", + "rain", + "snow" + ], + "range": [ + "#e7ba52", + "#c7c7c7", + "#aec7e8", + "#1f77b4", + "#9467bd" + ] }, - "chartTemplateKey": "heatmap", - "chartIntent": "A heatmap showing the distribution of daily maximum temperatures in Seattle.", - "spec": { - "$schema": "https://vega.github.io/schema/vega-lite/v6.json", - "data": { - "name": "seattle_weather" - }, - "title": "Daily Max Temperatures (C) in Seattle, WA", - "config": { - "view": { - "strokeWidth": 0, - "step": 13 - }, - "axis": { - "domain": false - } - }, - "mark": "rect", - "encoding": { - "x": { - "field": "date", - "timeUnit": "date", - "type": "ordinal", - "title": "Day", - "axis": { - "labelAngle": 0, - "format": "%e" - } - }, - "y": { - "field": "date", - "timeUnit": "month", - "type": "ordinal", - "title": "Month" - }, - "color": { - "field": "temp_max", - "aggregate": "max", - "type": "quantitative", - "legend": { - "title": null - } - } - } + "title": "Weather type" + } + } + }, + "2": { + "$schema": "https://vega.github.io/schema/vega-lite/v6.json", + "data": { + "name": "seattle_weather" + }, + "title": "Daily Max Temperatures (C) in Seattle, WA", + "config": { + "view": { + "strokeWidth": 0, + "step": 13 + }, + "axis": { + "domain": false + } + }, + "mark": "rect", + "encoding": { + "x": { + "field": "date", + "timeUnit": "date", + "type": "ordinal", + "title": "Day", + "axis": { + "labelAngle": 0, + "format": "%e" + } + }, + "y": { + "field": "date", + "timeUnit": "month", + "type": "ordinal", + "title": "Month" + }, + "color": { + "field": "temp_max", + "aggregate": "max", + "type": "quantitative", + "legend": { + "title": null } } } - ] + } } - ] + } }; diff --git a/packages/examples/json/features/chart.idoc.json b/packages/examples/json/features/chart.idoc.json new file mode 100644 index 00000000..c07c59a8 --- /dev/null +++ b/packages/examples/json/features/chart.idoc.json @@ -0,0 +1,72 @@ +{ + "$schema": "../../../../docs/schema/idoc_v1.json", + "title": "Feature: Chart", + "dataLoaders": [ + { + "dataSourceName": "chartData", + "type": "inline", + "format": "json", + "content": [ + { + "category": "A", + "value": 20 + }, + { + "category": "B", + "value": 34 + }, + { + "category": "C", + "value": 55 + }, + { + "category": "D", + "value": 40 + }, + { + "category": "E", + "value": 67 + } + ] + } + ], + "groups": [ + { + "groupId": "main", + "elements": [ + "## Chart\nUse charts for data visualizations with Vega-Lite specifications.", + { + "type": "chart", + "chartKey": "1" + } + ] + } + ], + "resources": { + "charts": { + "1": { + "$schema": "https://vega.github.io/schema/vega-lite/v6.json", + "data": { + "name": "chartData" + }, + "mark": "bar", + "encoding": { + "x": { + "field": "category", + "type": "nominal", + "title": "Category" + }, + "y": { + "field": "value", + "type": "quantitative", + "title": "Value" + }, + "color": { + "field": "category", + "type": "nominal" + } + } + } + } + } +} \ No newline at end of file diff --git a/docs/assets/examples/features-json/data-sources.idoc.json b/packages/examples/json/features/data-sources.idoc.json similarity index 98% rename from docs/assets/examples/features-json/data-sources.idoc.json rename to packages/examples/json/features/data-sources.idoc.json index 882bb90b..6f133bab 100644 --- a/docs/assets/examples/features-json/data-sources.idoc.json +++ b/packages/examples/json/features/data-sources.idoc.json @@ -1,5 +1,5 @@ { - "$schema": "../../../schema/idoc_v1.json", + "$schema": "../../../../docs/schema/idoc_v1.json", "title": "Feature: Data Sources", "dataLoaders": [ { diff --git a/docs/assets/examples/features-json/data-transformations.idoc.json b/packages/examples/json/features/data-transformations.idoc.json similarity index 98% rename from docs/assets/examples/features-json/data-transformations.idoc.json rename to packages/examples/json/features/data-transformations.idoc.json index dee6dbca..b9095cb3 100644 --- a/docs/assets/examples/features-json/data-transformations.idoc.json +++ b/packages/examples/json/features/data-transformations.idoc.json @@ -1,5 +1,5 @@ { - "$schema": "../../../schema/idoc_v1.json", + "$schema": "../../../../docs/schema/idoc_v1.json", "title": "Feature: Data Transformations", "dataLoaders": [ { diff --git a/docs/assets/examples/features-json/data-url.idoc.json b/packages/examples/json/features/data-url.idoc.json similarity index 50% rename from docs/assets/examples/features-json/data-url.idoc.json rename to packages/examples/json/features/data-url.idoc.json index ead2503a..b51b43bc 100644 --- a/docs/assets/examples/features-json/data-url.idoc.json +++ b/packages/examples/json/features/data-url.idoc.json @@ -1,5 +1,5 @@ { - "$schema": "../../../schema/idoc_v1.json", + "$schema": "../../../../docs/schema/idoc_v1.json", "title": "Feature: Data Url", "variables": [ { @@ -31,35 +31,7 @@ }, { "type": "chart", - "chart": { - "chartIntent": "show a grouped bar chart", - "chartTemplateKey": "grouped-bar", - "dataSourceBase": { - "dataSourceName": "jsonData" - }, - "spec": { - "$schema": "https://vega.github.io/schema/vega-lite/v6.json", - "data": { - "name": "jsonData" - }, - "mark": "bar", - "encoding": { - "x": { - "field": "category" - }, - "y": { - "field": "value", - "type": "quantitative" - }, - "xOffset": { - "field": "group" - }, - "color": { - "field": "group" - } - } - } - } + "chartKey": "1" }, { "type": "table", @@ -73,5 +45,31 @@ } ] } - ] + ], + "resources": { + "charts": { + "1": { + "$schema": "https://vega.github.io/schema/vega-lite/v6.json", + "data": { + "name": "jsonData" + }, + "mark": "bar", + "encoding": { + "x": { + "field": "category" + }, + "y": { + "field": "value", + "type": "quantitative" + }, + "xOffset": { + "field": "group" + }, + "color": { + "field": "group" + } + } + } + } + } } \ No newline at end of file diff --git a/docs/assets/examples/features-json/dropdown.idoc.json b/packages/examples/json/features/dropdown.idoc.json similarity index 97% rename from docs/assets/examples/features-json/dropdown.idoc.json rename to packages/examples/json/features/dropdown.idoc.json index 03a97bc8..749a7946 100644 --- a/docs/assets/examples/features-json/dropdown.idoc.json +++ b/packages/examples/json/features/dropdown.idoc.json @@ -1,5 +1,5 @@ { - "$schema": "../../../schema/idoc_v1.json", + "$schema": "../../../../docs/schema/idoc_v1.json", "title": "Feature: Dropdown", "dataLoaders": [ { diff --git a/docs/assets/examples/features-json/image.idoc.json b/packages/examples/json/features/image.idoc.json similarity index 95% rename from docs/assets/examples/features-json/image.idoc.json rename to packages/examples/json/features/image.idoc.json index 7a10ed73..b97cd9c0 100644 --- a/docs/assets/examples/features-json/image.idoc.json +++ b/packages/examples/json/features/image.idoc.json @@ -1,5 +1,5 @@ { - "$schema": "../../../schema/idoc_v1.json", + "$schema": "../../../../docs/schema/idoc_v1.json", "title": "Feature: Image", "variables": [ { @@ -32,7 +32,7 @@ "Example server endpoint: `/api/regressionplot?target={{targetVariable}}&model={{modelType}}&theme={{colorTheme}}`", "", "Images support dynamic URLs with query parameters and can be regenerated in real-time.", - "** samples below provided by [picsum.photos](https://picsum.photos/)**" + "*samples below provided by [picsum.photos](https://picsum.photos/)*" ] }, { diff --git a/docs/assets/examples/features-json/input-controls.idoc.json b/packages/examples/json/features/input-controls.idoc.json similarity index 97% rename from docs/assets/examples/features-json/input-controls.idoc.json rename to packages/examples/json/features/input-controls.idoc.json index 72871251..575b0d6b 100644 --- a/docs/assets/examples/features-json/input-controls.idoc.json +++ b/packages/examples/json/features/input-controls.idoc.json @@ -1,5 +1,5 @@ { - "$schema": "../../../schema/idoc_v1.json", + "$schema": "../../../../docs/schema/idoc_v1.json", "title": "Feature: Input Controls", "variables": [ { diff --git a/docs/assets/examples/features-json/markdown.idoc.json b/packages/examples/json/features/markdown.idoc.json similarity index 90% rename from docs/assets/examples/features-json/markdown.idoc.json rename to packages/examples/json/features/markdown.idoc.json index b701a363..a10ed109 100644 --- a/docs/assets/examples/features-json/markdown.idoc.json +++ b/packages/examples/json/features/markdown.idoc.json @@ -1,5 +1,5 @@ { - "$schema": "../../../schema/idoc_v1.json", + "$schema": "../../../../docs/schema/idoc_v1.json", "title": "Feature: Markdown", "groups": [ { diff --git a/docs/assets/examples/features-json/presets.idoc.json b/packages/examples/json/features/presets.idoc.json similarity index 97% rename from docs/assets/examples/features-json/presets.idoc.json rename to packages/examples/json/features/presets.idoc.json index ecbe4ba0..06b97c45 100644 --- a/docs/assets/examples/features-json/presets.idoc.json +++ b/packages/examples/json/features/presets.idoc.json @@ -1,5 +1,5 @@ { - "$schema": "../../../schema/idoc_v1.json", + "$schema": "../../../../docs/schema/idoc_v1.json", "title": "Feature: Presets", "variables": [ { diff --git a/docs/assets/examples/features-json/styling.idoc.json b/packages/examples/json/features/styling.idoc.json similarity index 98% rename from docs/assets/examples/features-json/styling.idoc.json rename to packages/examples/json/features/styling.idoc.json index c6c93b60..d0cff5d0 100644 --- a/docs/assets/examples/features-json/styling.idoc.json +++ b/packages/examples/json/features/styling.idoc.json @@ -1,5 +1,5 @@ { - "$schema": "../../../schema/idoc_v1.json", + "$schema": "../../../../docs/schema/idoc_v1.json", "title": "Feature: Styling", "style": { "css": ".group { padding: 20px; background-color: #f8f9fa; border: 2px solid #3498db; border-radius: 8px; margin-bottom: 20px; } .group h2 { color: #3498db; } .group h3 { color: #2c3e50; } #demo { background-color: #e8f5e8; border-color: #28a745; } #demo h2 { color: #28a745; }", diff --git a/docs/assets/examples/features-json/table.idoc.json b/packages/examples/json/features/table.idoc.json similarity index 97% rename from docs/assets/examples/features-json/table.idoc.json rename to packages/examples/json/features/table.idoc.json index db7f46a4..4b32e904 100644 --- a/docs/assets/examples/features-json/table.idoc.json +++ b/packages/examples/json/features/table.idoc.json @@ -1,5 +1,5 @@ { - "$schema": "../../../schema/idoc_v1.json", + "$schema": "../../../../docs/schema/idoc_v1.json", "title": "Feature: Table", "dataLoaders": [ { diff --git a/docs/assets/examples/features-json/urls.idoc.json b/packages/examples/json/features/urls.idoc.json similarity index 97% rename from docs/assets/examples/features-json/urls.idoc.json rename to packages/examples/json/features/urls.idoc.json index 030a09e4..77f80a0a 100644 --- a/docs/assets/examples/features-json/urls.idoc.json +++ b/packages/examples/json/features/urls.idoc.json @@ -1,5 +1,5 @@ { - "$schema": "../../../schema/idoc_v1.json", + "$schema": "../../../../docs/schema/idoc_v1.json", "title": "Feature: URLs", "variables": [ { diff --git a/docs/assets/examples/features-json/variables.idoc.json b/packages/examples/json/features/variables.idoc.json similarity index 96% rename from docs/assets/examples/features-json/variables.idoc.json rename to packages/examples/json/features/variables.idoc.json index e620ce4f..f9fe3740 100644 --- a/docs/assets/examples/features-json/variables.idoc.json +++ b/packages/examples/json/features/variables.idoc.json @@ -1,5 +1,5 @@ { - "$schema": "../../../schema/idoc_v1.json", + "$schema": "../../../../docs/schema/idoc_v1.json", "title": "Feature: Variables", "variables": [ { diff --git a/packages/examples/json/grocery-list.idoc.json b/packages/examples/json/grocery-list.idoc.json new file mode 100644 index 00000000..1f75f4ca --- /dev/null +++ b/packages/examples/json/grocery-list.idoc.json @@ -0,0 +1,231 @@ +{ + "$schema": "../../../docs/schema/idoc_v1.json", + "title": "Select Items to Buy", + "dataLoaders": [ + { + "dataSourceName": "itemsData", + "type": "inline", + "format": "json", + "content": [ + { + "item": "Apples", + "category": "Fruits", + "price": 1.20 + }, + { + "item": "Bananas", + "category": "Fruits", + "price": 0.50 + }, + { + "item": "Oranges", + "category": "Fruits", + "price": 0.80 + }, + { + "item": "Strawberries", + "category": "Fruits", + "price": 2.50 + }, + { + "item": "Grapes", + "category": "Fruits", + "price": 2.20 + }, + { + "item": "Bread", + "category": "Bakery", + "price": 2.00 + }, + { + "item": "Bagels", + "category": "Bakery", + "price": 1.80 + }, + { + "item": "Croissant", + "category": "Bakery", + "price": 2.30 + }, + { + "item": "Milk", + "category": "Dairy", + "price": 1.50 + }, + { + "item": "Cheese", + "category": "Dairy", + "price": 3.00 + }, + { + "item": "Yogurt", + "category": "Dairy", + "price": 1.10 + }, + { + "item": "Eggs", + "category": "Dairy", + "price": 2.40 + }, + { + "item": "Chicken Breast", + "category": "Meat", + "price": 5.00 + }, + { + "item": "Ground Beef", + "category": "Meat", + "price": 4.50 + }, + { + "item": "Salmon", + "category": "Meat", + "price": 7.00 + }, + { + "item": "Carrots", + "category": "Vegetables", + "price": 0.90 + }, + { + "item": "Broccoli", + "category": "Vegetables", + "price": 1.30 + }, + { + "item": "Lettuce", + "category": "Vegetables", + "price": 1.00 + }, + { + "item": "Tomatoes", + "category": "Vegetables", + "price": 1.20 + }, + { + "item": "Potatoes", + "category": "Vegetables", + "price": 0.70 + }, + { + "item": "Pasta", + "category": "Pantry", + "price": 1.10 + }, + { + "item": "Rice", + "category": "Pantry", + "price": 1.00 + }, + { + "item": "Cereal", + "category": "Pantry", + "price": 2.80 + }, + { + "item": "Olive Oil", + "category": "Pantry", + "price": 4.00 + } + ] + } + ], + "variables": [ + { + "variableId": "itemsData_selected_sum_price", + "type": "object", + "isArray": true, + "initialValue": [], + "calculation": { + "dependsOn": [ + "itemsData_selected" + ], + "dataFrameTransformations": [ + { + "type": "aggregate", + "ops": [ + "sum" + ], + "fields": [ + "price" + ], + "as": [ + "sum_price" + ] + } + ] + } + }, + { + "variableId": "total", + "type": "number", + "initialValue": 0, + "calculation": { + "vegaExpression": "format(data('itemsData_selected_sum_price')[0] ? data('itemsData_selected_sum_price')[0].sum_price : 0, ',.2f')" + } + } + ], + "groups": [ + { + "groupId": "main", + "elements": [ + "## Select the items you want to buy\n", + { + "type": "table", + "variableId": "itemsData_selected", + "dataSourceName": "itemsData", + "tabulatorOptions": { + "autoColumns": true, + "layout": "fitColumns", + "minHeight": "200px", + "maxHeight": "200px", + "selectableRows": true, + "rowHeader": { + "formatter": "rowSelection", + "titleFormatter": "rowSelection", + "headerSort": false, + "headerHozAlign": "center", + "hozAlign": "center", + "width": 40 + } + } + }, + "## Total Price\n\n${{total}}\n\n### Categories", + { + "type": "chart", + "chartKey": "1" + } + ] + } + ], + "resources": { + "charts": { + "1": { + "$schema": "https://vega.github.io/schema/vega-lite/v6.json", + "data": { + "name": "itemsData_selected" + }, + "mark": "bar", + "encoding": { + "x": { + "field": "category", + "type": "nominal", + "title": "Category" + }, + "y": { + "aggregate": "count", + "type": "quantitative", + "title": "Number of Items" + }, + "color": { + "field": "category", + "type": "nominal", + "legend": { + "title": "Category" + } + } + } + } + } + } +} \ No newline at end of file diff --git a/packages/examples/json/seattle-weather/1.idoc.json b/packages/examples/json/seattle-weather/1.idoc.json new file mode 100644 index 00000000..8de13890 --- /dev/null +++ b/packages/examples/json/seattle-weather/1.idoc.json @@ -0,0 +1,60 @@ +{ + "$schema": "../../../../docs/schema/idoc_v1.json", + "title": "Seattle Weather", + "groups": [ + { + "groupId": "main", + "elements": [ + "# Seattle Weather\n\nHere is a stacked bar chart of Seattle weather:\nEach bar represents the count of weather types for each month.\nThe colors distinguish between different weather conditions such as sun, fog, drizzle, rain, and snow.", + { + "type": "chart", + "chartKey": "1" + } + ] + } + ], + "resources": { + "charts": { + "1": { + "$schema": "https://vega.github.io/schema/vega-lite/v6.json", + "data": { + "url": "https://vega.github.io/editor/data/seattle-weather.csv" + }, + "mark": "bar", + "encoding": { + "x": { + "timeUnit": "month", + "field": "date", + "type": "ordinal", + "title": "Month of the year" + }, + "y": { + "aggregate": "count", + "type": "quantitative" + }, + "color": { + "field": "weather", + "type": "nominal", + "scale": { + "domain": [ + "sun", + "fog", + "drizzle", + "rain", + "snow" + ], + "range": [ + "#e7ba52", + "#c7c7c7", + "#aec7e8", + "#1f77b4", + "#9467bd" + ] + }, + "title": "Weather type" + } + } + } + } + } +} \ No newline at end of file diff --git a/packages/examples/json/seattle-weather/2.idoc.json b/packages/examples/json/seattle-weather/2.idoc.json new file mode 100644 index 00000000..f3395230 --- /dev/null +++ b/packages/examples/json/seattle-weather/2.idoc.json @@ -0,0 +1,108 @@ +{ + "$schema": "../../../../docs/schema/idoc_v1.json", + "title": "Seattle Weather", + "groups": [ + { + "groupId": "main", + "elements": [ + "# Seattle Weather\n\nHere is a stacked bar chart of Seattle weather:\nEach bar represents the count of weather types for each month.\nThe colors distinguish between different weather conditions such as sun, fog, drizzle, rain, and snow.", + { + "type": "chart", + "chartKey": "1" + }, + "This section introduces a heatmap visualization for the Seattle weather dataset.\nThe heatmap is designed to display the distribution and intensity of weather-related variables,\nsuch as temperature, precipitation, or frequency of weather events, across different time periods or categories.\nIt provides an intuitive way to identify patterns, trends, and anomalies in the dataset.", + { + "type": "chart", + "chartKey": "2" + } + ] + } + ], + "resources": { + "charts": { + "1": { + "$schema": "https://vega.github.io/schema/vega-lite/v6.json", + "data": { + "url": "https://vega.github.io/editor/data/seattle-weather.csv" + }, + "mark": "bar", + "encoding": { + "x": { + "timeUnit": "month", + "field": "date", + "type": "ordinal", + "title": "Month of the year" + }, + "y": { + "aggregate": "count", + "type": "quantitative" + }, + "color": { + "field": "weather", + "type": "nominal", + "scale": { + "domain": [ + "sun", + "fog", + "drizzle", + "rain", + "snow" + ], + "range": [ + "#e7ba52", + "#c7c7c7", + "#aec7e8", + "#1f77b4", + "#9467bd" + ] + }, + "title": "Weather type" + } + } + }, + "2": { + "$schema": "https://vega.github.io/schema/vega-lite/v6.json", + "data": { + "url": "https://vega.github.io/editor/data/seattle-weather.csv" + }, + "title": "Daily Max Temperatures (C) in Seattle, WA", + "config": { + "view": { + "strokeWidth": 0, + "step": 13 + }, + "axis": { + "domain": false + } + }, + "mark": "rect", + "encoding": { + "x": { + "field": "date", + "timeUnit": "date", + "type": "ordinal", + "title": "Day", + "axis": { + "labelAngle": 0, + "format": "%e" + } + }, + "y": { + "field": "date", + "timeUnit": "month", + "type": "ordinal", + "title": "Month" + }, + "color": { + "field": "temp_max", + "aggregate": "max", + "type": "quantitative", + "legend": { + "title": null + } + } + } + } + } + } +} \ No newline at end of file diff --git a/packages/examples/json/seattle-weather/3.idoc.json b/packages/examples/json/seattle-weather/3.idoc.json new file mode 100644 index 00000000..116c95dd --- /dev/null +++ b/packages/examples/json/seattle-weather/3.idoc.json @@ -0,0 +1,117 @@ +{ + "$schema": "../../../../docs/schema/idoc_v1.json", + "title": "Seattle Weather", + "dataLoaders": [ + { + "type": "url", + "url": "https://vega.github.io/editor/data/seattle-weather.csv", + "dataSourceName": "seattle_weather", + "format": "csv", + "dataFrameTransformations": [] + } + ], + "groups": [ + { + "groupId": "main", + "elements": [ + "# Seattle Weather\n\nHere is a stacked bar chart of Seattle weather:\nEach bar represents the count of weather types for each month.\nThe colors distinguish between different weather conditions such as sun, fog, drizzle, rain, and snow.", + { + "type": "chart", + "chartKey": "1" + }, + "This section introduces a heatmap visualization for the Seattle weather dataset.\nThe heatmap is designed to display the distribution and intensity of weather-related variables,\nsuch as temperature, precipitation, or frequency of weather events, across different time periods or categories.\nIt provides an intuitive way to identify patterns, trends, and anomalies in the dataset.", + { + "type": "chart", + "chartKey": "2" + } + ] + } + ], + "resources": { + "charts": { + "1": { + "$schema": "https://vega.github.io/schema/vega-lite/v6.json", + "data": { + "name": "seattle_weather" + }, + "mark": "bar", + "encoding": { + "x": { + "timeUnit": "month", + "field": "date", + "type": "ordinal", + "title": "Month of the year" + }, + "y": { + "aggregate": "count", + "type": "quantitative" + }, + "color": { + "field": "weather", + "type": "nominal", + "scale": { + "domain": [ + "sun", + "fog", + "drizzle", + "rain", + "snow" + ], + "range": [ + "#e7ba52", + "#c7c7c7", + "#aec7e8", + "#1f77b4", + "#9467bd" + ] + }, + "title": "Weather type" + } + } + }, + "2": { + "$schema": "https://vega.github.io/schema/vega-lite/v6.json", + "data": { + "name": "seattle_weather" + }, + "title": "Daily Max Temperatures (C) in Seattle, WA", + "config": { + "view": { + "strokeWidth": 0, + "step": 13 + }, + "axis": { + "domain": false + } + }, + "mark": "rect", + "encoding": { + "x": { + "field": "date", + "timeUnit": "date", + "type": "ordinal", + "title": "Day", + "axis": { + "labelAngle": 0, + "format": "%e" + } + }, + "y": { + "field": "date", + "timeUnit": "month", + "type": "ordinal", + "title": "Month" + }, + "color": { + "field": "temp_max", + "aggregate": "max", + "type": "quantitative", + "legend": { + "title": null + } + } + } + } + } + } +} \ No newline at end of file diff --git a/packages/examples/json/seattle-weather/4.idoc.json b/packages/examples/json/seattle-weather/4.idoc.json new file mode 100644 index 00000000..5f116926 --- /dev/null +++ b/packages/examples/json/seattle-weather/4.idoc.json @@ -0,0 +1,123 @@ +{ + "$schema": "../../../../docs/schema/idoc_v1.json", + "title": "Seattle Weather", + "dataLoaders": [ + { + "type": "url", + "url": "https://vega.github.io/editor/data/seattle-weather.csv", + "dataSourceName": "seattle_weather", + "format": "csv", + "dataFrameTransformations": [] + } + ], + "groups": [ + { + "groupId": "main", + "elements": [ + "# Seattle Weather\n\nData table:", + { + "type": "table", + "dataSourceName": "seattle_weather", + "variableId": "seattle_weather_selected" + }, + "Here is a stacked bar chart of Seattle weather:\nEach bar represents the count of weather types for each month.\nThe colors distinguish between different weather conditions such as sun, fog, drizzle, rain, and snow.", + { + "type": "chart", + "chartKey": "1" + }, + "This section introduces a heatmap visualization for the Seattle weather dataset.\nThe heatmap is designed to display the distribution and intensity of weather-related variables,\nsuch as temperature, precipitation, or frequency of weather events, across different time periods or categories.\nIt provides an intuitive way to identify patterns, trends, and anomalies in the dataset.", + { + "type": "chart", + "chartKey": "2" + } + ] + } + ], + "resources": { + "charts": { + "1": { + "$schema": "https://vega.github.io/schema/vega-lite/v6.json", + "data": { + "name": "seattle_weather" + }, + "mark": "bar", + "encoding": { + "x": { + "timeUnit": "month", + "field": "date", + "type": "ordinal", + "title": "Month of the year" + }, + "y": { + "aggregate": "count", + "type": "quantitative" + }, + "color": { + "field": "weather", + "type": "nominal", + "scale": { + "domain": [ + "sun", + "fog", + "drizzle", + "rain", + "snow" + ], + "range": [ + "#e7ba52", + "#c7c7c7", + "#aec7e8", + "#1f77b4", + "#9467bd" + ] + }, + "title": "Weather type" + } + } + }, + "2": { + "$schema": "https://vega.github.io/schema/vega-lite/v6.json", + "data": { + "name": "seattle_weather" + }, + "title": "Daily Max Temperatures (C) in Seattle, WA", + "config": { + "view": { + "strokeWidth": 0, + "step": 13 + }, + "axis": { + "domain": false + } + }, + "mark": "rect", + "encoding": { + "x": { + "field": "date", + "timeUnit": "date", + "type": "ordinal", + "title": "Day", + "axis": { + "labelAngle": 0, + "format": "%e" + } + }, + "y": { + "field": "date", + "timeUnit": "month", + "type": "ordinal", + "title": "Month" + }, + "color": { + "field": "temp_max", + "aggregate": "max", + "type": "quantitative", + "legend": { + "title": null + } + } + } + } + } + } +} \ No newline at end of file diff --git a/packages/examples/json/seattle-weather/5.idoc.json b/packages/examples/json/seattle-weather/5.idoc.json new file mode 100644 index 00000000..1ef9c484 --- /dev/null +++ b/packages/examples/json/seattle-weather/5.idoc.json @@ -0,0 +1,128 @@ +{ + "$schema": "../../../../docs/schema/idoc_v1.json", + "title": "Seattle Weather", + "dataLoaders": [ + { + "type": "url", + "url": "https://vega.github.io/editor/data/seattle-weather.csv", + "dataSourceName": "seattle_weather", + "format": "csv", + "dataFrameTransformations": [ + { + "type": "filter", + "expr": "datum.weather=='sun'" + } + ] + } + ], + "groups": [ + { + "groupId": "main", + "elements": [ + "# Seattle Weather\n\nData table:", + { + "type": "table", + "dataSourceName": "seattle_weather", + "variableId": "seattle_weather_selected" + }, + "Here is a stacked bar chart of Seattle weather:\nEach bar represents the count of weather types for each month.\nThe colors distinguish between different weather conditions such as sun, fog, drizzle, rain, and snow.", + { + "type": "chart", + "chartKey": "1" + }, + "This section introduces a heatmap visualization for the Seattle weather dataset.\nThe heatmap is designed to display the distribution and intensity of weather-related variables,\nsuch as temperature, precipitation, or frequency of weather events, across different time periods or categories.\nIt provides an intuitive way to identify patterns, trends, and anomalies in the dataset.", + { + "type": "chart", + "chartKey": "2" + } + ] + } + ], + "resources": { + "charts": { + "1": { + "$schema": "https://vega.github.io/schema/vega-lite/v6.json", + "data": { + "name": "seattle_weather" + }, + "mark": "bar", + "encoding": { + "x": { + "timeUnit": "month", + "field": "date", + "type": "ordinal", + "title": "Month of the year" + }, + "y": { + "aggregate": "count", + "type": "quantitative" + }, + "color": { + "field": "weather", + "type": "nominal", + "scale": { + "domain": [ + "sun", + "fog", + "drizzle", + "rain", + "snow" + ], + "range": [ + "#e7ba52", + "#c7c7c7", + "#aec7e8", + "#1f77b4", + "#9467bd" + ] + }, + "title": "Weather type" + } + } + }, + "2": { + "$schema": "https://vega.github.io/schema/vega-lite/v6.json", + "data": { + "name": "seattle_weather" + }, + "title": "Daily Max Temperatures (C) in Seattle, WA", + "config": { + "view": { + "strokeWidth": 0, + "step": 13 + }, + "axis": { + "domain": false + } + }, + "mark": "rect", + "encoding": { + "x": { + "field": "date", + "timeUnit": "date", + "type": "ordinal", + "title": "Day", + "axis": { + "labelAngle": 0, + "format": "%e" + } + }, + "y": { + "field": "date", + "timeUnit": "month", + "type": "ordinal", + "title": "Month" + }, + "color": { + "field": "temp_max", + "aggregate": "max", + "type": "quantitative", + "legend": { + "title": null + } + } + } + } + } + } +} \ No newline at end of file diff --git a/packages/examples/json/seattle-weather/6.idoc.json b/packages/examples/json/seattle-weather/6.idoc.json new file mode 100644 index 00000000..78b64b58 --- /dev/null +++ b/packages/examples/json/seattle-weather/6.idoc.json @@ -0,0 +1,141 @@ +{ + "$schema": "../../../../docs/schema/idoc_v1.json", + "title": "Seattle Weather", + "dataLoaders": [ + { + "type": "url", + "url": "https://vega.github.io/editor/data/seattle-weather.csv", + "dataSourceName": "seattle_weather", + "format": "csv", + "dataFrameTransformations": [ + { + "type": "filter", + "expr": "IncludeSun ? true : datum.weather != 'sun'" + } + ] + } + ], + "variables": [ + { + "variableId": "IncludeSun", + "type": "boolean", + "initialValue": true + } + ], + "groups": [ + { + "groupId": "main", + "elements": [ + "# Seattle Weather", + { + "type": "checkbox", + "label": "Include Sun:", + "variableId": "IncludeSun" + }, + "Data table:", + { + "type": "table", + "dataSourceName": "seattle_weather", + "variableId": "seattle_weather_selected" + }, + "Here is a stacked bar chart of Seattle weather:\nEach bar represents the count of weather types for each month.\nThe colors distinguish between different weather conditions such as sun, fog, drizzle, rain, and snow.", + { + "type": "chart", + "chartKey": "1" + }, + "This section introduces a heatmap visualization for the Seattle weather dataset.\nThe heatmap is designed to display the distribution and intensity of weather-related variables,\nsuch as temperature, precipitation, or frequency of weather events, across different time periods or categories.\nIt provides an intuitive way to identify patterns, trends, and anomalies in the dataset.", + { + "type": "chart", + "chartKey": "2" + } + ] + } + ], + "resources": { + "charts": { + "1": { + "$schema": "https://vega.github.io/schema/vega-lite/v6.json", + "data": { + "name": "seattle_weather" + }, + "mark": "bar", + "encoding": { + "x": { + "timeUnit": "month", + "field": "date", + "type": "ordinal", + "title": "Month of the year" + }, + "y": { + "aggregate": "count", + "type": "quantitative" + }, + "color": { + "field": "weather", + "type": "nominal", + "scale": { + "domain": [ + "sun", + "fog", + "drizzle", + "rain", + "snow" + ], + "range": [ + "#e7ba52", + "#c7c7c7", + "#aec7e8", + "#1f77b4", + "#9467bd" + ] + }, + "title": "Weather type" + } + } + }, + "2": { + "$schema": "https://vega.github.io/schema/vega-lite/v6.json", + "data": { + "name": "seattle_weather" + }, + "title": "Daily Max Temperatures (C) in Seattle, WA", + "config": { + "view": { + "strokeWidth": 0, + "step": 13 + }, + "axis": { + "domain": false + } + }, + "mark": "rect", + "encoding": { + "x": { + "field": "date", + "timeUnit": "date", + "type": "ordinal", + "title": "Day", + "axis": { + "labelAngle": 0, + "format": "%e" + } + }, + "y": { + "field": "date", + "timeUnit": "month", + "type": "ordinal", + "title": "Month" + }, + "color": { + "field": "temp_max", + "aggregate": "max", + "type": "quantitative", + "legend": { + "title": null + } + } + } + } + } + } +} \ No newline at end of file diff --git a/packages/examples/json/seattle-weather/7.idoc.json b/packages/examples/json/seattle-weather/7.idoc.json new file mode 100644 index 00000000..455d3f49 --- /dev/null +++ b/packages/examples/json/seattle-weather/7.idoc.json @@ -0,0 +1,197 @@ +{ + "$schema": "../../../../docs/schema/idoc_v1.json", + "title": "Seattle Weather", + "dataLoaders": [ + { + "type": "url", + "url": "https://vega.github.io/editor/data/seattle-weather.csv", + "dataSourceName": "seattle_weather", + "format": "csv", + "dataFrameTransformations": [ + { + "type": "filter", + "expr": "IncludeSun ? true : datum.weather != 'sun'" + }, + { + "type": "filter", + "expr": "IncludeFog ? true : datum.weather != 'fog'" + }, + { + "type": "filter", + "expr": "IncludeDrizzle ? true : datum.weather != 'drizzle'" + }, + { + "type": "filter", + "expr": "IncludeRain ? true : datum.weather != 'rain'" + }, + { + "type": "filter", + "expr": "IncludeSnow ? true : datum.weather != 'snow'" + } + ] + } + ], + "variables": [ + { + "variableId": "IncludeSun", + "type": "boolean", + "initialValue": true + }, + { + "variableId": "IncludeFog", + "type": "boolean", + "initialValue": true + }, + { + "variableId": "IncludeDrizzle", + "type": "boolean", + "initialValue": true + }, + { + "variableId": "IncludeRain", + "type": "boolean", + "initialValue": true + }, + { + "variableId": "IncludeSnow", + "type": "boolean", + "initialValue": true + } + ], + "groups": [ + { + "groupId": "main", + "elements": [ + "# Seattle Weather", + { + "type": "checkbox", + "label": "Include Sun:", + "variableId": "IncludeSun" + }, + { + "type": "checkbox", + "label": "Include Fog:", + "variableId": "IncludeFog" + }, + { + "type": "checkbox", + "label": "Include Drizzle:", + "variableId": "IncludeDrizzle" + }, + { + "type": "checkbox", + "label": "Include Rain:", + "variableId": "IncludeRain" + }, + { + "type": "checkbox", + "label": "Include Snow:", + "variableId": "IncludeSnow" + }, + "Data table:", + { + "type": "table", + "dataSourceName": "seattle_weather", + "variableId": "seattle_weather_selected" + }, + "Here is a stacked bar chart of Seattle weather:\nEach bar represents the count of weather types for each month.\nThe colors distinguish between different weather conditions such as sun, fog, drizzle, rain, and snow.", + { + "type": "chart", + "chartKey": "1" + }, + "This section introduces a heatmap visualization for the Seattle weather dataset.\nThe heatmap is designed to display the distribution and intensity of weather-related variables,\nsuch as temperature, precipitation, or frequency of weather events, across different time periods or categories.\nIt provides an intuitive way to identify patterns, trends, and anomalies in the dataset.", + { + "type": "chart", + "chartKey": "2" + } + ] + } + ], + "resources": { + "charts": { + "1": { + "$schema": "https://vega.github.io/schema/vega-lite/v6.json", + "data": { + "name": "seattle_weather" + }, + "mark": "bar", + "encoding": { + "x": { + "timeUnit": "month", + "field": "date", + "type": "ordinal", + "title": "Month of the year" + }, + "y": { + "aggregate": "count", + "type": "quantitative" + }, + "color": { + "field": "weather", + "type": "nominal", + "scale": { + "domain": [ + "sun", + "fog", + "drizzle", + "rain", + "snow" + ], + "range": [ + "#e7ba52", + "#c7c7c7", + "#aec7e8", + "#1f77b4", + "#9467bd" + ] + }, + "title": "Weather type" + } + } + }, + "2": { + "$schema": "https://vega.github.io/schema/vega-lite/v6.json", + "data": { + "name": "seattle_weather" + }, + "title": "Daily Max Temperatures (C) in Seattle, WA", + "config": { + "view": { + "strokeWidth": 0, + "step": 13 + }, + "axis": { + "domain": false + } + }, + "mark": "rect", + "encoding": { + "x": { + "field": "date", + "timeUnit": "date", + "type": "ordinal", + "title": "Day", + "axis": { + "labelAngle": 0, + "format": "%e" + } + }, + "y": { + "field": "date", + "timeUnit": "month", + "type": "ordinal", + "title": "Month" + }, + "color": { + "field": "temp_max", + "aggregate": "max", + "type": "quantitative", + "legend": { + "title": null + } + } + } + } + } + } +} \ No newline at end of file diff --git a/packages/examples/json/seattle-weather/8.idoc.json b/packages/examples/json/seattle-weather/8.idoc.json new file mode 100644 index 00000000..deebf0c8 --- /dev/null +++ b/packages/examples/json/seattle-weather/8.idoc.json @@ -0,0 +1,227 @@ +{ + "$schema": "../../../../docs/schema/idoc_v1.json", + "title": "Seattle Weather", + "dataLoaders": [ + { + "type": "url", + "url": "https://vega.github.io/editor/data/seattle-weather.csv", + "dataSourceName": "seattle_weather", + "format": "csv", + "dataFrameTransformations": [ + { + "type": "filter", + "expr": "IncludeSun ? true : datum.weather != 'sun'" + }, + { + "type": "filter", + "expr": "IncludeFog ? true : datum.weather != 'fog'" + }, + { + "type": "filter", + "expr": "IncludeDrizzle ? true : datum.weather != 'drizzle'" + }, + { + "type": "filter", + "expr": "IncludeRain ? true : datum.weather != 'rain'" + }, + { + "type": "filter", + "expr": "IncludeSnow ? true : datum.weather != 'snow'" + }, + { + "type": "filter", + "expr": "datum.wind >= MinWind && datum.wind <= MaxWind" + } + ] + } + ], + "variables": [ + { + "variableId": "IncludeSun", + "type": "boolean", + "initialValue": true + }, + { + "variableId": "IncludeFog", + "type": "boolean", + "initialValue": true + }, + { + "variableId": "IncludeDrizzle", + "type": "boolean", + "initialValue": true + }, + { + "variableId": "IncludeRain", + "type": "boolean", + "initialValue": true + }, + { + "variableId": "IncludeSnow", + "type": "boolean", + "initialValue": true + }, + { + "variableId": "MinWind", + "type": "number", + "initialValue": 0 + }, + { + "variableId": "MaxWind", + "type": "number", + "initialValue": 30 + } + ], + "groups": [ + { + "groupId": "main", + "elements": [ + "# Seattle Weather", + { + "type": "checkbox", + "label": "Include Sun:", + "variableId": "IncludeSun" + }, + { + "type": "checkbox", + "label": "Include Fog:", + "variableId": "IncludeFog" + }, + { + "type": "checkbox", + "label": "Include Drizzle:", + "variableId": "IncludeDrizzle" + }, + { + "type": "checkbox", + "label": "Include Rain:", + "variableId": "IncludeRain" + }, + { + "type": "checkbox", + "label": "Include Snow:", + "variableId": "IncludeSnow" + }, + { + "type": "slider", + "label": "Min Wind:", + "variableId": "MinWind", + "min": 0, + "max": 30, + "step": 1 + }, + { + "type": "slider", + "label": "Max Wind:", + "variableId": "MaxWind", + "min": 0, + "max": 30, + "step": 1 + }, + "Data table:", + { + "type": "table", + "dataSourceName": "seattle_weather", + "variableId": "seattle_weather_selected" + }, + "Here is a stacked bar chart of Seattle weather:\nEach bar represents the count of weather types for each month.\nThe colors distinguish between different weather conditions such as sun, fog, drizzle, rain, and snow.", + { + "type": "chart", + "chartKey": "1" + }, + "This section introduces a heatmap visualization for the Seattle weather dataset.\nThe heatmap is designed to display the distribution and intensity of weather-related variables,\nsuch as temperature, precipitation, or frequency of weather events, across different time periods or categories.\nIt provides an intuitive way to identify patterns, trends, and anomalies in the dataset.", + { + "type": "chart", + "chartKey": "2" + } + ] + } + ], + "resources": { + "charts": { + "1": { + "$schema": "https://vega.github.io/schema/vega-lite/v6.json", + "data": { + "name": "seattle_weather" + }, + "mark": "bar", + "encoding": { + "x": { + "timeUnit": "month", + "field": "date", + "type": "ordinal", + "title": "Month of the year" + }, + "y": { + "aggregate": "count", + "type": "quantitative" + }, + "color": { + "field": "weather", + "type": "nominal", + "scale": { + "domain": [ + "sun", + "fog", + "drizzle", + "rain", + "snow" + ], + "range": [ + "#e7ba52", + "#c7c7c7", + "#aec7e8", + "#1f77b4", + "#9467bd" + ] + }, + "title": "Weather type" + } + } + }, + "2": { + "$schema": "https://vega.github.io/schema/vega-lite/v6.json", + "data": { + "name": "seattle_weather" + }, + "title": "Daily Max Temperatures (C) in Seattle, WA", + "config": { + "view": { + "strokeWidth": 0, + "step": 13 + }, + "axis": { + "domain": false + } + }, + "mark": "rect", + "encoding": { + "x": { + "field": "date", + "timeUnit": "date", + "type": "ordinal", + "title": "Day", + "axis": { + "labelAngle": 0, + "format": "%e" + } + }, + "y": { + "field": "date", + "timeUnit": "month", + "type": "ordinal", + "title": "Month" + }, + "color": { + "field": "temp_max", + "aggregate": "max", + "type": "quantitative", + "legend": { + "title": null + } + } + } + } + } + } +} \ No newline at end of file diff --git a/packages/examples/json/seattle-weather/9.idoc.json b/packages/examples/json/seattle-weather/9.idoc.json new file mode 100644 index 00000000..dce4af14 --- /dev/null +++ b/packages/examples/json/seattle-weather/9.idoc.json @@ -0,0 +1,293 @@ +{ + "$schema": "../../../../docs/schema/idoc_v1.json", + "title": "Seattle Weather", + "dataLoaders": [ + { + "type": "url", + "url": "https://vega.github.io/editor/data/seattle-weather.csv", + "dataSourceName": "seattle_weather", + "format": "csv", + "dataFrameTransformations": [ + { + "type": "filter", + "expr": "IncludeSun ? true : datum.weather != 'sun'" + }, + { + "type": "filter", + "expr": "IncludeFog ? true : datum.weather != 'fog'" + }, + { + "type": "filter", + "expr": "IncludeDrizzle ? true : datum.weather != 'drizzle'" + }, + { + "type": "filter", + "expr": "IncludeRain ? true : datum.weather != 'rain'" + }, + { + "type": "filter", + "expr": "IncludeSnow ? true : datum.weather != 'snow'" + }, + { + "type": "filter", + "expr": "datum.wind >= MinWind && datum.wind <= MaxWind" + } + ] + } + ], + "variables": [ + { + "variableId": "IncludeSun", + "type": "boolean", + "initialValue": true + }, + { + "variableId": "IncludeFog", + "type": "boolean", + "initialValue": true + }, + { + "variableId": "IncludeDrizzle", + "type": "boolean", + "initialValue": true + }, + { + "variableId": "IncludeRain", + "type": "boolean", + "initialValue": true + }, + { + "variableId": "IncludeSnow", + "type": "boolean", + "initialValue": true + }, + { + "variableId": "MinWind", + "type": "number", + "initialValue": 0 + }, + { + "variableId": "MaxWind", + "type": "number", + "initialValue": 30 + } + ], + "groups": [ + { + "groupId": "main", + "elements": [ + "# Seattle Weather", + { + "type": "checkbox", + "label": "Include Sun:", + "variableId": "IncludeSun" + }, + { + "type": "checkbox", + "label": "Include Fog:", + "variableId": "IncludeFog" + }, + { + "type": "checkbox", + "label": "Include Drizzle:", + "variableId": "IncludeDrizzle" + }, + { + "type": "checkbox", + "label": "Include Rain:", + "variableId": "IncludeRain" + }, + { + "type": "checkbox", + "label": "Include Snow:", + "variableId": "IncludeSnow" + }, + { + "type": "slider", + "label": "Min Wind:", + "variableId": "MinWind", + "min": 0, + "max": 30, + "step": 1 + }, + { + "type": "slider", + "label": "Max Wind:", + "variableId": "MaxWind", + "min": 0, + "max": 30, + "step": 1 + }, + "Presets allow you to go pre-chosen values:", + { + "type": "presets", + "presets": [ + { + "name": "Basic Gloom", + "state": { + "IncludeSun": false, + "IncludeFog": true, + "IncludeDrizzle": true, + "IncludeRain": false, + "IncludeSnow": false, + "MinWind": 0, + "MaxWind": 5 + } + }, + { + "name": "reset", + "state": { + "MinWind": 0, + "MaxWind": 30, + "IncludeSun": true, + "IncludeFog": true, + "IncludeDrizzle": true, + "IncludeRain": true, + "IncludeSnow": true + } + }, + { + "name": "sunny and calm", + "state": { + "IncludeSun": true, + "IncludeFog": false, + "IncludeDrizzle": false, + "IncludeRain": false, + "IncludeSnow": false, + "MinWind": 0, + "MaxWind": 5 + } + }, + { + "name": "stormy weather", + "state": { + "IncludeSun": false, + "IncludeFog": false, + "IncludeDrizzle": true, + "IncludeRain": true, + "IncludeSnow": true, + "MinWind": 5, + "MaxWind": 30 + } + }, + { + "name": "just snow", + "state": { + "IncludeSun": false, + "IncludeFog": false, + "IncludeDrizzle": false, + "IncludeRain": false, + "IncludeSnow": true, + "MinWind": 0, + "MaxWind": 10 + } + } + ] + }, + "Data table:", + { + "type": "table", + "dataSourceName": "seattle_weather", + "variableId": "seattle_weather_selected" + }, + "Here is a stacked bar chart of Seattle weather:\nEach bar represents the count of weather types for each month.\nThe colors distinguish between different weather conditions such as sun, fog, drizzle, rain, and snow.", + { + "type": "chart", + "chartKey": "1" + }, + "This section introduces a heatmap visualization for the Seattle weather dataset.\nThe heatmap is designed to display the distribution and intensity of weather-related variables,\nsuch as temperature, precipitation, or frequency of weather events, across different time periods or categories.\nIt provides an intuitive way to identify patterns, trends, and anomalies in the dataset.", + { + "type": "chart", + "chartKey": "2" + } + ] + } + ], + "resources": { + "charts": { + "1": { + "$schema": "https://vega.github.io/schema/vega-lite/v6.json", + "data": { + "name": "seattle_weather" + }, + "mark": "bar", + "encoding": { + "x": { + "timeUnit": "month", + "field": "date", + "type": "ordinal", + "title": "Month of the year" + }, + "y": { + "aggregate": "count", + "type": "quantitative" + }, + "color": { + "field": "weather", + "type": "nominal", + "scale": { + "domain": [ + "sun", + "fog", + "drizzle", + "rain", + "snow" + ], + "range": [ + "#e7ba52", + "#c7c7c7", + "#aec7e8", + "#1f77b4", + "#9467bd" + ] + }, + "title": "Weather type" + } + } + }, + "2": { + "$schema": "https://vega.github.io/schema/vega-lite/v6.json", + "data": { + "name": "seattle_weather" + }, + "title": "Daily Max Temperatures (C) in Seattle, WA", + "config": { + "view": { + "strokeWidth": 0, + "step": 13 + }, + "axis": { + "domain": false + } + }, + "mark": "rect", + "encoding": { + "x": { + "field": "date", + "timeUnit": "date", + "type": "ordinal", + "title": "Day", + "axis": { + "labelAngle": 0, + "format": "%e" + } + }, + "y": { + "field": "date", + "timeUnit": "month", + "type": "ordinal", + "title": "Month" + }, + "color": { + "field": "temp_max", + "aggregate": "max", + "type": "quantitative", + "legend": { + "title": null + } + } + } + } + } + } +} \ No newline at end of file diff --git a/packages/examples/json/slides.idoc.json b/packages/examples/json/slides.idoc.json new file mode 100644 index 00000000..9bd20c04 --- /dev/null +++ b/packages/examples/json/slides.idoc.json @@ -0,0 +1,255 @@ +{ + "$schema": "../../../docs/schema/idoc_v1.json", + "title": "Select Items to Buy", + "style": { + "css": "html, body {\n height: 100%;\n margin: 0;\n padding: 0;\n scroll-behavior: smooth;\n overflow-y: auto;\n}\n\nbody {\n scroll-snap-type: y mandatory;\n}\n\n.group {\n color: white;\n scroll-snap-align: start;\n height: 100vh;\n margin: 0;\n padding: 1em;\n box-sizing: border-box;\n}\n\n#slide1 { background: #1abc9c; }\n#slide2 { background: #3498db; }\n#slide3 { background: #9b59b6; }\n#slide4 { background: #e74c3c; }\n" + }, + "dataLoaders": [ + { + "dataSourceName": "itemsData", + "type": "inline", + "format": "json", + "content": [ + { + "item": "Apples", + "category": "Fruits", + "price": 1.20 + }, + { + "item": "Bananas", + "category": "Fruits", + "price": 0.50 + }, + { + "item": "Oranges", + "category": "Fruits", + "price": 0.80 + }, + { + "item": "Strawberries", + "category": "Fruits", + "price": 2.50 + }, + { + "item": "Grapes", + "category": "Fruits", + "price": 2.20 + }, + { + "item": "Bread", + "category": "Bakery", + "price": 2.00 + }, + { + "item": "Bagels", + "category": "Bakery", + "price": 1.80 + }, + { + "item": "Croissant", + "category": "Bakery", + "price": 2.30 + }, + { + "item": "Milk", + "category": "Dairy", + "price": 1.50 + }, + { + "item": "Cheese", + "category": "Dairy", + "price": 3.00 + }, + { + "item": "Yogurt", + "category": "Dairy", + "price": 1.10 + }, + { + "item": "Eggs", + "category": "Dairy", + "price": 2.40 + }, + { + "item": "Chicken Breast", + "category": "Meat", + "price": 5.00 + }, + { + "item": "Ground Beef", + "category": "Meat", + "price": 4.50 + }, + { + "item": "Salmon", + "category": "Meat", + "price": 7.00 + }, + { + "item": "Carrots", + "category": "Vegetables", + "price": 0.90 + }, + { + "item": "Broccoli", + "category": "Vegetables", + "price": 1.30 + }, + { + "item": "Lettuce", + "category": "Vegetables", + "price": 1.00 + }, + { + "item": "Tomatoes", + "category": "Vegetables", + "price": 1.20 + }, + { + "item": "Potatoes", + "category": "Vegetables", + "price": 0.70 + }, + { + "item": "Pasta", + "category": "Pantry", + "price": 1.10 + }, + { + "item": "Rice", + "category": "Pantry", + "price": 1.00 + }, + { + "item": "Cereal", + "category": "Pantry", + "price": 2.80 + }, + { + "item": "Olive Oil", + "category": "Pantry", + "price": 4.00 + } + ] + } + ], + "variables": [ + { + "variableId": "itemsData_selected_sum_price", + "type": "object", + "isArray": true, + "initialValue": [], + "calculation": { + "dependsOn": [ + "itemsData_selected" + ], + "dataFrameTransformations": [ + { + "type": "aggregate", + "ops": [ + "sum" + ], + "fields": [ + "price" + ], + "as": [ + "sum_price" + ] + } + ] + } + }, + { + "variableId": "total", + "type": "number", + "initialValue": 0, + "calculation": { + "vegaExpression": "format(data('itemsData_selected_sum_price')[0] ? data('itemsData_selected_sum_price')[0].sum_price : 0, ',.2f')" + } + } + ], + "groups": [ + { + "groupId": "slide1", + "elements": [ + "## Welcome to the Shopping List App\n" + ] + }, + { + "groupId": "slide2", + "elements": [ + "## Here you can select items to buy from a variety of categories.\n", + "### Categories include Fruits, Bakery, Dairy, Meat, Vegetables, and Pantry items.\n", + "### You can select multiple items and see the total price calculated automatically." + ] + }, + { + "groupId": "slide3", + "elements": [ + "## Let's start by selecting some items from the list below.\n", + "### Click on the checkboxes next to the items you want to add to your shopping list." + ] + }, + { + "groupId": "slide4", + "elements": [ + "## Select the items you want to buy\n", + { + "type": "table", + "dataSourceName": "itemsData", + "variableId": "itemsData_selected", + "tabulatorOptions": { + "autoColumns": true, + "layout": "fitColumns", + "minHeight": "200px", + "maxHeight": "200px", + "selectableRows": true, + "rowHeader": { + "formatter": "rowSelection", + "titleFormatter": "rowSelection", + "headerSort": false, + "headerHozAlign": "center", + "hozAlign": "center", + "width": 40 + } + } + }, + "## Total Price\n\n${{total}}\n\n### Categories", + { + "type": "chart", + "chartKey": "1" + } + ] + } + ], + "resources": { + "charts": { + "1": { + "$schema": "https://vega.github.io/schema/vega-lite/v6.json", + "data": { + "name": "itemsData_selected" + }, + "mark": "bar", + "encoding": { + "x": { + "field": "category", + "type": "nominal", + "title": "Category" + }, + "y": { + "aggregate": "count", + "type": "quantitative", + "title": "Number of Items" + }, + "color": { + "field": "category", + "type": "nominal", + "legend": { + "title": "Category" + } + } + } + } + } + } +} \ No newline at end of file diff --git a/packages/examples/package.json b/packages/examples/package.json new file mode 100644 index 00000000..678bba48 --- /dev/null +++ b/packages/examples/package.json @@ -0,0 +1,14 @@ +{ + "name": "examples", + "version": "1.0.0", + "main": "index.js", + "scripts": { + "convert": "node ./dist/convert.mjs", + "clean": "rimraf dist", + "build": "tsc -p .", + "deploy": "npm run build && npm run readme" + }, + "author": "Dan Marshall", + "license": "MIT", + "description": "" +} diff --git a/packages/examples/src/convert.mts b/packages/examples/src/convert.mts new file mode 100644 index 00000000..8700cc26 --- /dev/null +++ b/packages/examples/src/convert.mts @@ -0,0 +1,72 @@ +import { targetMarkdown } from '@microsoft/chartifact-compiler'; +import { InteractiveDocument } from '@microsoft/chartifact-schema'; +import fs from 'node:fs'; + +function convertToMarkdown(interactiveDocument: InteractiveDocument): string { + // Convert the Interactive Document to Markdown format + let markdown = targetMarkdown(interactiveDocument); + + if (!interactiveDocument.style) { + //remove any line that starts with the group identifier ":::" + markdown = markdown + .split('\n') + .filter(line => !line.startsWith(':::')) + .join('\n'); + } + + return markdown; +} + +async function convertJsonFiles(sourceDir: string, destDir: string, jsonCopyBase: string) { + const files = fs.readdirSync(sourceDir, { withFileTypes: true }); + + for (const file of files) { + const sourcePath = `${sourceDir}/${file.name}`; + const destPath = `${destDir}/${file.name.replace(/\.json$/, '.md')}`; + + // Path for copying json file + const jsonCopyPath = `${jsonCopyBase}/${sourcePath.replace(/^\.\/json\//, '')}`; + + if (file.isDirectory()) { + // Create the destination directory if it doesn't exist + if (!fs.existsSync(destPath)) { + fs.mkdirSync(destPath, { recursive: true }); + console.log(`Created directory: ${destPath}`); + } + // Create the json copy directory if it doesn't exist + const jsonCopyDir = `${jsonCopyBase}/${file.name}`; + if (!fs.existsSync(jsonCopyDir)) { + fs.mkdirSync(jsonCopyDir, { recursive: true }); + console.log(`Created directory: ${jsonCopyDir}`); + } + // Recursively convert files in the subdirectory + await convertJsonFiles(sourcePath, destPath, jsonCopyBase); + } else if (file.isFile() && file.name.endsWith('.json')) { + console.log(`Converting: ${sourcePath} -> ${destPath}`); + // Read the JSON file + const jsonContent = fs.readFileSync(sourcePath, 'utf-8'); + const interactiveDocument: InteractiveDocument = JSON.parse(jsonContent); + + // Convert to Markdown + const markdownContent = convertToMarkdown(interactiveDocument); + + // Write the Markdown file + fs.writeFileSync(destPath, markdownContent); + console.log(`Written: ${destPath}`); + + // Copy the JSON file with $schema set to prod + // Ensure the destination directory exists + const jsonCopyDir = jsonCopyPath.substring(0, jsonCopyPath.lastIndexOf('/')); + if (!fs.existsSync(jsonCopyDir)) { + fs.mkdirSync(jsonCopyDir, { recursive: true }); + } + // Set $schema to prod and write the modified JSON + const jsonCopyObj = { ...interactiveDocument, $schema: "https://microsoft.github.io/chartifact/schema/idoc_v1.json" }; + fs.writeFileSync(jsonCopyPath, JSON.stringify(jsonCopyObj, null, 2)); + console.log(`Copied JSON: ${sourcePath} -> ${jsonCopyPath}`); + } + } +} + +// Main call with explicit json copy destination +convertJsonFiles('./json', '../../docs/assets/examples/markdown', '../../docs/assets/examples/json'); diff --git a/packages/examples/tsconfig.json b/packages/examples/tsconfig.json new file mode 100644 index 00000000..9204ae8a --- /dev/null +++ b/packages/examples/tsconfig.json @@ -0,0 +1,16 @@ +{ + "compilerOptions": { + "module": "node16", + "moduleResolution": "node16", + "skipLibCheck": true, + "target": "esnext", + "allowSyntheticDefaultImports": true, + "lib": [ + "esnext" + ], + "outDir": "dist", + }, + "include": [ + "src" + ] +} \ No newline at end of file diff --git a/packages/schema/src/interactive.ts b/packages/schema/src/interactive.ts index 46825c1c..a4d2118d 100644 --- a/packages/schema/src/interactive.ts +++ b/packages/schema/src/interactive.ts @@ -71,30 +71,15 @@ export interface DropdownElementProps extends VariableControl { size?: number; } -export interface ChartPlaceholder { - /** A list of available chart templates will be provided below, the Assistant will choose one of these templates to render a chart */ - chartTemplateKey: string; - dataSourceBase: DataSourceBase; - /** what this chart intends to show */ - chartIntent: string; -} - -export interface ChartFull extends ChartPlaceholder { - /** either a Vega or Vega-Lite spec */ - spec: object; -} - -/** When creating a new page: for charts, the Assistant will create a ChartPlaceholder */ -/** When working with existing pages/charts, the Assistant can use ChartFull */ -export type ChartValue = ChartPlaceholder | ChartFull; - /** * Chart * use for visualizations */ export interface ChartElement extends ElementBase { type: 'chart'; - chart: ChartValue; + + // key of the chart spec in the page.resources.charts + chartKey: string; } /** diff --git a/packages/schema/src/page.ts b/packages/schema/src/page.ts index f6c709a0..9cd97fe2 100644 --- a/packages/schema/src/page.ts +++ b/packages/schema/src/page.ts @@ -11,6 +11,8 @@ export interface ElementGroup { elements: PageElement[]; } +export type Vega_or_VegaLite_spec = object; + /** Define the basic structure of an interactive document */ export interface InteractiveDocument { title: string; @@ -27,6 +29,10 @@ export interface InteractiveDocument { variables?: Variable[]; style?: PageStyle; + + resources?: { + charts?: { [chartKey: string]: Vega_or_VegaLite_spec } + }; } /** diff --git a/packages/vscode/scripts/resources.mjs b/packages/vscode/scripts/resources.mjs index 2939463a..3fecc14b 100644 --- a/packages/vscode/scripts/resources.mjs +++ b/packages/vscode/scripts/resources.mjs @@ -2,6 +2,8 @@ import { resolve, basename } from 'path'; import { existsSync, mkdirSync, unlinkSync, copyFileSync, readdirSync } from 'fs'; const resources = [ + + //npm dependencies '../../node_modules/react/umd/react.production.min.js', '../../node_modules/react-dom/umd/react-dom.production.min.js', '../../node_modules/vega/build/vega.min.js', @@ -10,12 +12,14 @@ const resources = [ '../../node_modules/css-tree/dist/csstree.js', '../../node_modules/tabulator-tables/dist/js/tabulator.min.js', '../../node_modules/tabulator-tables/dist/css/tabulator.min.css', + + //local umd builds '../../packages/host/dist/umd/chartifact.host.umd.js', '../../packages/sandbox/dist/umd/chartifact.sandbox.umd.js', '../../packages/compiler/dist/umd/chartifact.compiler.umd.js', '../../packages/editor/dist/umd/chartifact.editor.umd.js', - '../../docs/assets/examples/grocery-list.idoc.json', - '../../docs/assets/examples/seattle-weather/1.idoc.md', + + //webview resources '../../packages/vscode-resources/dist/edit.js', '../../packages/vscode-resources/dist/html-json.js', '../../packages/vscode-resources/dist/html-markdown.js', @@ -24,6 +28,10 @@ const resources = [ '../../packages/vscode-resources/html/edit.html', '../../packages/vscode-resources/html/html-json.html', '../../packages/vscode-resources/html/html-markdown.html', + + //sample docs + '../../docs/assets/examples/json/grocery-list.idoc.json', + '../../docs/assets/examples/markdown/seattle-weather/1.idoc.md', ]; const errors = [];