first

2026-05-26 12:00:42 +05:30
parent edc579abec
commit df8de787c0
5 changed files with 708 additions and 73 deletions
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Fixed Vega-Lite Revenue Share Chart</title>
+    <!-- CDN Links for Libraries -->
+    <script src="https://jsdelivr.net"></script>
+    <script src="https://jsdelivr.net"></script>
+    <script src="https://jsdelivr.net"></script>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            background-color: #f4f6f9;
+            margin: 0;
+        }
+        #chart-container {
+            background: white;
+            padding: 30px;
+            border-radius: 12px;
+            box-shadow: 0 8px 16px rgba(0,0,0,0.1);
+        }
+    </style>
+</head>
+<body>
+
+    <!-- This div holds your live UI chart -->
+    <div id="chart-container"></div>
+
+    <script>
+        // सुधरा हुआ Vega-Lite JSON (सभी सिंटैक्स एरर्स फिक्स कर दिए गए हैं)
+        const correctedSpec = {
+            "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
+            "title": "Monthly Revenue Share Across Electronics Product Categories",
+            "data": {
+                "values": [
+                    { "product_category": "Smartphones", "total_revenue": 145000, "order_month": "January" },
+                    { "product_category": "Laptops", "total_revenue": 210000, "order_month": "January" },
+                    { "product_category": "Audio Wearables", "total_revenue": 65000, "order_month": "January" },
+                    { "product_category": "Smartphones", "total_revenue": 160000, "order_month": "February" },
+                    { "product_category": "Laptops", "total_revenue": 195000, "order_month": "February" },
+                    { "product_category": "Audio Wearables", "total_revenue": 85000, "order_month": "February" }
+                ]
+            },
+            "transform": [
+                {
+                    "joinaggregate": [{ "op": "sum", "field": "total_revenue", "as": "monthly_total" }],
+                    "groupby": ["order_month"]
+                },
+                {
+                    "calculate": "datum.total_revenue / datum.monthly_total",
+                    "as": "revenue_share"
+                }
+            ],
+            "mark": "bar",
+            "encoding": {
+                "x": { "field": "product_category", "type": "nominal", "axis": { "labelAngle": 0 }, "title": "Category" },
+                "y": { "field": "revenue_share", "type": "quantitative", "axis": { "format": "%" }, "title": "Revenue Share" },
+                "color": { "field": "product_category", "type": "nominal" }
+            },
+            "facet": {
+                "columns": 2,
+                "field": "order_month",
+                "type": "nominal",
+                "title": "Timeline"
+            }
+        };
+
+        // Render the view
+        vegaEmbed('#chart-container', correctedSpec, { actions: false })
+            .then(result => console.log("UI Render Success!"))
+            .catch(console.error);
+    </script>
+</body>
+</html>