Sales dashboard example

docs/assets/css/footer.css

@@ -3,7 +3,7 @@
 .footer {
     background: #f8f9fa;
     border-top: 1px solid #e9ecef;
-    padding: 0.75rem 0;
+    padding: 0.75rem 5px;
     margin-top: auto;
     font-size: 0.75rem;
 }

docs/assets/examples/json/sales-dashboard.idoc.json

@@ -0,0 +1,308 @@
+{
+  "$schema": "https://microsoft.github.io/chartifact/schema/idoc_v1.json",
+  "title": "Sales Performance Dashboard",
+  "style": {
+    "css": [
+      "body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 0; padding: 20px; background: #f5f7fa; }",
+      "body { display: grid; grid-template-areas: 'header header header' 'revenue orders avg' 'category trend trend' 'data data data'; grid-template-columns: 1fr 1fr 1fr; gap: 20px; max-width: 1400px; margin: 0 auto; }",
+      ".group { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }",
+      "#header { grid-area: header; background: #667eea; color: white; text-align: center; }",
+      "#revenue { grid-area: revenue; text-align: center; }",
+      "#orders { grid-area: orders; text-align: center; }",
+      "#avg { grid-area: avg; text-align: center; }",
+      "#category { grid-area: category; }",
+      "#trend { grid-area: trend; }",
+      "#data { grid-area: data; }",
+      "h1 { margin: 0; padding: 10px 0; font-size: 1.5em; font-weight: 400; }",
+      "h2 { margin: 10px 0; font-size: 2em; color: #333; }",
+      "h3 { margin: 0 0 10px 0; font-size: 1em; color: #666; text-transform: uppercase; }"
+    ]
+  },
+  "dataLoaders": [
+    {
+      "dataSourceName": "salesData",
+      "type": "inline",
+      "format": "json",
+      "content": [
+        {
+          "timestamp": "2025-08-01",
+          "order_id": "ORD-1001",
+          "product": "Wireless Mouse",
+          "category": "Electronics",
+          "region": "West",
+          "salesperson": "Jane Smith",
+          "units": 3,
+          "unit_price": 25
+        },
+        {
+          "timestamp": "2025-08-02",
+          "order_id": "ORD-1002",
+          "product": "Office Chair",
+          "category": "Furniture",
+          "region": "East",
+          "salesperson": "Bob Johnson",
+          "units": 1,
+          "unit_price": 199.99
+        },
+        {
+          "timestamp": "2025-08-03",
+          "order_id": "ORD-1003",
+          "product": "Laptop Stand",
+          "category": "Electronics",
+          "region": "North",
+          "salesperson": "Alice Chen",
+          "units": 2,
+          "unit_price": 45.5
+        },
+        {
+          "timestamp": "2025-08-05",
+          "order_id": "ORD-1004",
+          "product": "Desk Lamp",
+          "category": "Furniture",
+          "region": "South",
+          "salesperson": "Charlie Brown",
+          "units": 1,
+          "unit_price": 89
+        },
+        {
+          "timestamp": "2025-08-06",
+          "order_id": "ORD-1005",
+          "product": "Bluetooth Headphones",
+          "category": "Electronics",
+          "region": "West",
+          "salesperson": "Jane Smith",
+          "units": 4,
+          "unit_price": 79.99
+        }
+      ]
+    }
+  ],
+  "variables": [
+    {
+      "variableId": "revenueCalculation",
+      "type": "object",
+      "isArray": true,
+      "initialValue": [],
+      "calculation": {
+        "dependsOn": [
+          "salesData"
+        ],
+        "vegaExpression": "data('salesData')",
+        "dataFrameTransformations": [
+          {
+            "type": "formula",
+            "expr": "datum.units * datum.unit_price",
+            "as": "revenue"
+          },
+          {
+            "type": "aggregate",
+            "ops": [
+              "sum"
+            ],
+            "fields": [
+              "revenue"
+            ],
+            "as": [
+              "total"
+            ]
+          }
+        ]
+      }
+    },
+    {
+      "variableId": "totalRevenueFormatted",
+      "type": "string",
+      "initialValue": "$0",
+      "calculation": {
+        "dependsOn": [
+          "revenueCalculation"
+        ],
+        "vegaExpression": "'$' + format(data('revenueCalculation')[0] ? data('revenueCalculation')[0].total : 0, ',.2f')"
+      }
+    },
+    {
+      "variableId": "totalOrders",
+      "type": "number",
+      "initialValue": 0,
+      "calculation": {
+        "dependsOn": [
+          "salesData"
+        ],
+        "vegaExpression": "length(data('salesData'))"
+      }
+    },
+    {
+      "variableId": "averageOrderValue",
+      "type": "string",
+      "initialValue": "$0.00",
+      "calculation": {
+        "dependsOn": [
+          "revenueCalculation",
+          "totalOrders"
+        ],
+        "vegaExpression": "'$' + format((data('revenueCalculation')[0] ? data('revenueCalculation')[0].total : 0) / (totalOrders > 0 ? totalOrders : 1), ',.2f')"
+      }
+    },
+    {
+      "variableId": "categoryRevenue",
+      "type": "object",
+      "isArray": true,
+      "initialValue": [],
+      "calculation": {
+        "dependsOn": [
+          "salesData"
+        ],
+        "vegaExpression": "data('salesData')",
+        "dataFrameTransformations": [
+          {
+            "type": "formula",
+            "expr": "datum.units * datum.unit_price",
+            "as": "revenue"
+          },
+          {
+            "type": "aggregate",
+            "groupby": [
+              "category"
+            ],
+            "ops": [
+              "sum"
+            ],
+            "fields": [
+              "revenue"
+            ],
+            "as": [
+              "total_revenue"
+            ]
+          }
+        ]
+      }
+    }
+  ],
+  "groups": [
+    {
+      "groupId": "header",
+      "elements": [
+        "# Sales Performance Dashboard"
+      ]
+    },
+    {
+      "groupId": "revenue",
+      "elements": [
+        "### Total Revenue",
+        "## {{totalRevenueFormatted}}"
+      ]
+    },
+    {
+      "groupId": "orders",
+      "elements": [
+        "### Total Orders",
+        "## {{totalOrders}}"
+      ]
+    },
+    {
+      "groupId": "avg",
+      "elements": [
+        "### Average Order Value",
+        "## {{averageOrderValue}}"
+      ]
+    },
+    {
+      "groupId": "category",
+      "elements": [
+        "### Sales by Category",
+        {
+          "type": "chart",
+          "chartKey": "categoryChart"
+        }
+      ]
+    },
+    {
+      "groupId": "trend",
+      "elements": [
+        "### Sales Trend",
+        {
+          "type": "chart",
+          "chartKey": "trendChart"
+        }
+      ]
+    },
+    {
+      "groupId": "data",
+      "elements": [
+        "### Sales Data",
+        {
+          "type": "table",
+          "dataSourceName": "salesData",
+          "variableId": "salesSelected"
+        }
+      ]
+    }
+  ],
+  "resources": {
+    "charts": {
+      "categoryChart": {
+        "$schema": "https://vega.github.io/schema/vega-lite/v6.json",
+        "width": "container",
+        "data": {
+          "name": "categoryRevenue"
+        },
+        "mark": "bar",
+        "encoding": {
+          "x": {
+            "field": "category",
+            "type": "nominal",
+            "title": "Category"
+          },
+          "y": {
+            "field": "total_revenue",
+            "type": "quantitative",
+            "title": "Revenue ($)"
+          },
+          "color": {
+            "field": "category",
+            "type": "nominal",
+            "scale": {
+              "range": [
+                "#667eea",
+                "#764ba2"
+              ]
+            }
+          }
+        }
+      },
+      "trendChart": {
+        "$schema": "https://vega.github.io/schema/vega-lite/v6.json",
+        "width": "container",
+        "data": {
+          "name": "salesData"
+        },
+        "transform": [
+          {
+            "calculate": "datum.units * datum.unit_price",
+            "as": "revenue"
+          }
+        ],
+        "mark": {
+          "type": "line",
+          "point": true,
+          "strokeWidth": 3
+        },
+        "encoding": {
+          "x": {
+            "field": "timestamp",
+            "type": "temporal",
+            "title": "Date"
+          },
+          "y": {
+            "field": "revenue",
+            "type": "quantitative",
+            "title": "Revenue ($)"
+          },
+          "color": {
+            "value": "#667eea"
+          }
+        }
+      }
+    }
+  }
+}

docs/assets/examples/json/why-chartifact.idoc.json

@@ -76,15 +76,15 @@
         "❌ Not interactive",
         "❌ Static forever",
         "",
+        "### HTML:",
+        "✅ Powerful & interactive",
+        "❌ Security nightmare",
+        "❌ Corporate systems won't serve it",
+        "",
         "### Markdown: **Clear winner** so far",
         "✅ Human-readable",
         "✅ Version controllable",
-        "❌ Limited interactivity",
-        "",
-        "### HTML: **\"The Chosen One\"**",
-        "✅ Powerful & interactive",
-        "❌ Security nightmare",
-        "❌ Corporate systems won't serve it"
+        "❌ Limited interactivity"
       ]
     },
     {
@@ -105,11 +105,11 @@
       "groupId": "slide5",
       "elements": [
         "## 🔒 Proprietary Solutions Miss the Point",
-        "### Anthropic's Claude Artifacts (and similar)",
+        "### Most LLMs build apps, not documents",
         "- Proprietary and platform-locked 🔐",
         "- Force information workers to become developers 👩‍💻",
         "- **All they wanted to do was remix a presentation!**",
-        "- No portability - trapped in vendor ecosystem",
+        "- Sometimes trapped in vendor ecosystem",
         "- Require hosting and maintenance",
         "",
         "### What we actually need:",