Gitea
80 lines
3.2 KiB
HTML
80 lines
3.2 KiB
HTML
<!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>
|