216 lines
7.0 KiB
HTML
216 lines
7.0 KiB
HTML
{{ define "content" }}
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Interactive Dashboard</title>
|
|
<link
|
|
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
|
|
rel="stylesheet"
|
|
/>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script
|
|
type="text/javascript"
|
|
src="https://www.gstatic.com/charts/loader.js"
|
|
></script>
|
|
</head>
|
|
<body class="bg-gray-100">
|
|
<div class="flex-1 flex flex-col overflow-hidden">
|
|
<!-- Dashboard Content -->
|
|
<div class="flex-1 overflow-auto">
|
|
<!-- Top Stats Cards -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
|
|
<!-- Active Locations Card -->
|
|
<div
|
|
class="bg-white border-r border-b border-gray-200 p-8 hover:shadow-md transition-shadow cursor-pointer"
|
|
onclick="focusMap()"
|
|
>
|
|
<div class="flex items-center">
|
|
<div
|
|
class="w-14 h-14 bg-blue-100 flex items-center justify-center"
|
|
>
|
|
<i class="fas fa-map-marker-alt text-blue-600 text-xl"></i>
|
|
</div>
|
|
<div class="ml-4">
|
|
<p class="text-sm font-medium text-gray-600">
|
|
Active Locations
|
|
</p>
|
|
<p class="text-2xl font-bold text-gray-900">24</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Total Visitors Card -->
|
|
<div
|
|
class="bg-white border-r border-b border-gray-200 p-8 hover:shadow-md transition-shadow cursor-pointer"
|
|
onclick="updateChart('visitors')"
|
|
>
|
|
<div class="flex items-center">
|
|
<div
|
|
class="w-14 h-14 bg-green-100 flex items-center justify-center"
|
|
>
|
|
<i class="fas fa-users text-green-600 text-xl"></i>
|
|
</div>
|
|
<div class="ml-4">
|
|
<p class="text-sm font-medium text-gray-600">Total Visitors</p>
|
|
<p class="text-2xl font-bold text-gray-900">12,847</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Revenue Card -->
|
|
<div
|
|
class="bg-white border-r border-b border-gray-200 p-8 hover:shadow-md transition-shadow cursor-pointer"
|
|
onclick="updateChart('revenue')"
|
|
>
|
|
<div class="flex items-center">
|
|
<div
|
|
class="w-14 h-14 bg-purple-100 flex items-center justify-center"
|
|
>
|
|
<i class="fas fa-dollar-sign text-purple-600 text-xl"></i>
|
|
</div>
|
|
<div class="ml-4">
|
|
<p class="text-sm font-medium text-gray-600">Revenue</p>
|
|
<p class="text-2xl font-bold text-gray-900">$47,392</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Conversion Rate Card -->
|
|
<div
|
|
class="bg-white border-b border-gray-200 p-8 hover:shadow-md transition-shadow cursor-pointer"
|
|
onclick="updateChart('conversion')"
|
|
>
|
|
<div class="flex items-center">
|
|
<div
|
|
class="w-14 h-14 bg-orange-100 flex items-center justify-center"
|
|
>
|
|
<i class="fas fa-percentage text-orange-600 text-xl"></i>
|
|
</div>
|
|
<div class="ml-4">
|
|
<p class="text-sm font-medium text-gray-600">Conversion Rate</p>
|
|
<p class="text-2xl font-bold text-gray-900">3.2%</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Full Width Google Map -->
|
|
<div class="bg-white border-b border-gray-200 p-8">
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-6">
|
|
Location Analytics
|
|
</h3>
|
|
<div id="map" class="w-full h-[600px] border border-gray-200"></div>
|
|
</div>
|
|
|
|
<!-- Performance Metrics Chart - Full Width Bottom -->
|
|
<div class="bg-white border-gray-200 p-8">
|
|
<div class="flex items-center justify-between mb-6">
|
|
<h3 class="text-lg font-semibold text-gray-900">
|
|
Performance Metrics
|
|
</h3>
|
|
<div class="flex items-center gap-2">
|
|
<button
|
|
onclick="updateChart('daily')"
|
|
class="px-3 py-1 text-sm border border-gray-300 hover:bg-gray-50 transition-colors"
|
|
>
|
|
Daily
|
|
</button>
|
|
<button
|
|
onclick="updateChart('weekly')"
|
|
class="px-3 py-1 text-sm bg-blue-600 text-white hover:bg-blue-700 transition-colors"
|
|
>
|
|
Weekly
|
|
</button>
|
|
<button
|
|
onclick="updateChart('monthly')"
|
|
class="px-3 py-1 text-sm border border-gray-300 hover:bg-gray-50 transition-colors"
|
|
>
|
|
Monthly
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div id="analytics_chart" class="w-full h-[400px]"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
let map;
|
|
|
|
function focusMap() {
|
|
// Center map example
|
|
map.setCenter({ lat: 43.0896, lng: -79.0849 }); // Niagara Falls
|
|
map.setZoom(12);
|
|
}
|
|
|
|
function initMap() {
|
|
const niagaraFalls = { lat: 43.0896, lng: -79.0849 };
|
|
|
|
map = new google.maps.Map(document.getElementById("map"), {
|
|
zoom: 12,
|
|
center: niagaraFalls,
|
|
});
|
|
|
|
new google.maps.Marker({
|
|
position: niagaraFalls,
|
|
map,
|
|
title: "Niagara Falls",
|
|
});
|
|
}
|
|
|
|
// Google Charts
|
|
google.charts.load("current", { packages: ["corechart", "line"] });
|
|
google.charts.setOnLoadCallback(drawAnalyticsChart);
|
|
|
|
function drawAnalyticsChart() {
|
|
var data = new google.visualization.DataTable();
|
|
data.addColumn("string", "Time");
|
|
data.addColumn("number", "Visitors");
|
|
data.addColumn("number", "Revenue");
|
|
|
|
data.addRows([
|
|
["Jan", 4200, 32000],
|
|
["Feb", 4800, 38000],
|
|
["Mar", 5200, 42000],
|
|
["Apr", 4900, 39000],
|
|
["May", 5800, 45000],
|
|
["Jun", 6200, 48000],
|
|
]);
|
|
|
|
var options = {
|
|
title: "Performance Over Time",
|
|
backgroundColor: "transparent",
|
|
hAxis: { title: "Month" },
|
|
vAxis: { title: "Value" },
|
|
colors: ["#3B82F6", "#10B981"],
|
|
chartArea: {
|
|
left: 60,
|
|
top: 40,
|
|
width: "90%",
|
|
height: "70%",
|
|
},
|
|
legend: { position: "top", alignment: "center" },
|
|
};
|
|
|
|
var chart = new google.visualization.LineChart(
|
|
document.getElementById("analytics_chart")
|
|
);
|
|
chart.draw(data, options);
|
|
}
|
|
|
|
function updateChart(type) {
|
|
drawAnalyticsChart();
|
|
}
|
|
</script>
|
|
|
|
<script
|
|
async
|
|
defer
|
|
src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE&callback=initMap"
|
|
></script>
|
|
</body>
|
|
</html>
|
|
{{ end }}
|