2024-11-21 20:39:49 +01:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
2024-11-21 21:31:01 +01:00
|
|
|
<title>Space-Themed Heatmap</title>
|
2024-11-21 20:39:49 +01:00
|
|
|
<script src="https://d3js.org/d3.v7.min.js"></script>
|
|
|
|
|
<style>
|
2024-11-21 22:43:47 +01:00
|
|
|
html, body {
|
2024-11-21 22:19:38 +01:00
|
|
|
background-color: #0B0C10;
|
|
|
|
|
color: #E5E5E5;
|
2024-11-21 21:31:01 +01:00
|
|
|
font-family: Arial, sans-serif;
|
|
|
|
|
}
|
|
|
|
|
|
2024-11-21 21:08:35 +01:00
|
|
|
svg {
|
|
|
|
|
display: block;
|
|
|
|
|
margin: auto;
|
2024-11-21 20:39:49 +01:00
|
|
|
}
|
2024-11-21 21:25:29 +01:00
|
|
|
|
2024-11-21 22:19:38 +01:00
|
|
|
#title {
|
|
|
|
|
padding: 1rem 2rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.divider {
|
|
|
|
|
height: 1px;
|
|
|
|
|
width: 80%;
|
|
|
|
|
|
|
|
|
|
background-color: #E5E5E5;
|
|
|
|
|
}
|
|
|
|
|
|
2024-11-21 21:25:29 +01:00
|
|
|
.legend {
|
|
|
|
|
font-size: 12px;
|
2024-11-21 21:31:01 +01:00
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
flex-wrap: wrap;
|
2024-11-21 21:25:29 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.legend-item {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
2024-11-21 21:31:01 +01:00
|
|
|
margin: 5px;
|
2024-11-21 21:25:29 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.legend-color {
|
|
|
|
|
width: 15px;
|
|
|
|
|
height: 15px;
|
|
|
|
|
margin-right: 5px;
|
2024-11-21 21:20:38 +01:00
|
|
|
}
|
2024-11-21 20:39:49 +01:00
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
2024-11-21 22:19:38 +01:00
|
|
|
<h2 id="title">Live Activity</h2>
|
2024-11-21 21:52:20 +01:00
|
|
|
|
2024-11-21 20:39:49 +01:00
|
|
|
<div id="chart"></div>
|
2024-11-21 21:25:29 +01:00
|
|
|
<div id="legend" class="legend"></div>
|
2024-11-21 20:39:49 +01:00
|
|
|
|
|
|
|
|
<script>
|
2024-11-21 21:52:20 +01:00
|
|
|
const horizontal = true;
|
2024-11-21 22:19:38 +01:00
|
|
|
const categoryAmount = 10;
|
2024-11-22 12:56:28 +01:00
|
|
|
const intervalTime = 500
|
|
|
|
|
|
|
|
|
|
let categoryQueue = [];
|
|
|
|
|
let intervalNow = Math.floor(Date.now() / 1000) - 1;
|
|
|
|
|
setInterval(() => {
|
|
|
|
|
const unixTimestampNow = Math.floor(Date.now() / 1000);
|
|
|
|
|
let resp = fetch("http://localhost:3000/metrics?start=" + intervalNow + "&end=" + unixTimestampNow)
|
|
|
|
|
.then((resp) => {
|
|
|
|
|
if (resp.ok) {
|
|
|
|
|
return resp.json()
|
|
|
|
|
} else {
|
|
|
|
|
throw new Error("failed to get response")
|
|
|
|
|
}
|
|
|
|
|
}).then((json) => {
|
|
|
|
|
categoryQueue = [
|
|
|
|
|
...categoryQueue,
|
|
|
|
|
json
|
|
|
|
|
]
|
|
|
|
|
console.log("received category")
|
|
|
|
|
});
|
|
|
|
|
intervalNow = unixTimestampNow;
|
|
|
|
|
}, intervalTime);
|
2024-11-21 22:19:38 +01:00
|
|
|
|
|
|
|
|
const parentWidth = document.querySelector('#chart').parentElement.offsetWidth;
|
2024-11-21 21:52:20 +01:00
|
|
|
|
2024-11-21 21:08:35 +01:00
|
|
|
// Dimensions
|
|
|
|
|
const margin = { top: 20, right: 20, bottom: 20, left: 50 };
|
2024-11-21 22:19:38 +01:00
|
|
|
//const width = 1200 - margin.left - margin.right;
|
|
|
|
|
const width = parentWidth - margin.left - margin.right;
|
|
|
|
|
const blockLength = width / (60 * 2); // 60 seconds * 2 poll rate pr second
|
|
|
|
|
const height = 75 * categoryAmount / 2 - margin.top - margin.bottom;
|
2024-11-21 20:39:49 +01:00
|
|
|
|
2024-11-21 21:25:29 +01:00
|
|
|
// Categories with labels
|
|
|
|
|
const categories = [
|
2024-11-21 22:19:38 +01:00
|
|
|
{ id: 0, label: "User Onboarded", color: "#D90429" }, // NASA Red
|
|
|
|
|
{ id: 1, label: "Payment Accepted", color: "#0E79B2" }, // Space Blue
|
|
|
|
|
{ id: 2, label: "Payment Failed", color: "#F46036" }, // Fuel Orange
|
|
|
|
|
{ id: 3, label: "Product Added to Cart", color: "#F2C94C" }, // Solar Gold
|
|
|
|
|
{ id: 4, label: "Checkout Started", color: "#9CA3AF" }, // Neutral Gray
|
2024-11-21 21:31:01 +01:00
|
|
|
{ id: 5, label: "Order Placed", color: "#8B4513" },
|
|
|
|
|
{ id: 6, label: "Order Cancelled", color: "#FF69B4" },
|
|
|
|
|
{ id: 7, label: "Refund Processed", color: "#A9A9A9" },
|
|
|
|
|
{ id: 8, label: "Subscription Renewed", color: "#BDB76B" },
|
|
|
|
|
{ id: 9, label: "Feedback Submitted", color: "#00FFFF" },
|
2024-11-21 21:52:20 +01:00
|
|
|
].filter((c) => c.id < categoryAmount);
|
2024-11-21 21:25:29 +01:00
|
|
|
|
|
|
|
|
// Store last intensity for each category
|
|
|
|
|
const lastIntensity = new Map(categories.map(c => [c.id, Math.random()]));
|
|
|
|
|
|
|
|
|
|
// Create Legend
|
|
|
|
|
const legend = d3.select("#legend");
|
|
|
|
|
categories.forEach(category => {
|
|
|
|
|
const item = legend.append("div").attr("class", "legend-item");
|
|
|
|
|
item.append("div")
|
|
|
|
|
.attr("class", "legend-color")
|
|
|
|
|
.style("background-color", category.color);
|
|
|
|
|
item.append("span").text(category.label);
|
|
|
|
|
});
|
|
|
|
|
|
2024-11-21 20:39:49 +01:00
|
|
|
// Create SVG
|
|
|
|
|
const svg = d3.select("#chart")
|
|
|
|
|
.append("svg")
|
2024-11-21 21:08:35 +01:00
|
|
|
.attr("width", width + margin.left + margin.right)
|
|
|
|
|
.attr("height", height + margin.top + margin.bottom)
|
2024-11-21 20:39:49 +01:00
|
|
|
.append("g")
|
2024-11-21 21:08:35 +01:00
|
|
|
.attr("transform", `translate(${margin.left},${margin.top})`);
|
2024-11-21 20:39:49 +01:00
|
|
|
|
2024-11-21 22:19:38 +01:00
|
|
|
const defs = svg.append("defs");
|
|
|
|
|
defs.append("filter")
|
|
|
|
|
.attr("id", "blend-multiply")
|
|
|
|
|
.append("feBlend")
|
|
|
|
|
.attr("mode", "multiply")
|
|
|
|
|
.attr("in", "SourceGraphic")
|
|
|
|
|
.attr("in2", "BackgroundImage");
|
|
|
|
|
|
2024-11-21 21:08:35 +01:00
|
|
|
// Time scales
|
2024-11-21 21:52:20 +01:00
|
|
|
var x, y;
|
|
|
|
|
if (horizontal) {
|
|
|
|
|
x = d3.scaleTime()
|
|
|
|
|
.domain([new Date(Date.now() - 60000), new Date()]) // Past 1 min to now
|
|
|
|
|
.range([width, 0]);
|
|
|
|
|
|
|
|
|
|
y = d3.scaleBand()
|
|
|
|
|
.domain(categories.map(c => c.id)) // Category IDs
|
|
|
|
|
.range([0, height]);
|
|
|
|
|
} else {
|
|
|
|
|
y = d3.scaleTime()
|
|
|
|
|
.domain([new Date(Date.now() - 60000), new Date()]) // Past 1 min to now
|
|
|
|
|
.range([height, 0]);
|
|
|
|
|
|
|
|
|
|
x = d3.scaleBand()
|
|
|
|
|
.domain(categories.map(c => c.id)) // Category IDs
|
|
|
|
|
.range([0, width]);
|
|
|
|
|
}
|
2024-11-21 20:39:49 +01:00
|
|
|
|
2024-11-21 21:52:20 +01:00
|
|
|
|
2024-11-21 20:39:49 +01:00
|
|
|
|
2024-11-21 21:25:29 +01:00
|
|
|
// Heatmap group
|
2024-11-21 21:08:35 +01:00
|
|
|
const grid = svg.append("g");
|
2024-11-21 20:39:49 +01:00
|
|
|
|
2024-11-21 21:08:35 +01:00
|
|
|
// Initialize heatmap
|
|
|
|
|
function updateHeatmap(data) {
|
|
|
|
|
const cells = grid.selectAll("rect").data(data, d => d.id);
|
2024-11-21 20:39:49 +01:00
|
|
|
|
2024-11-21 21:52:20 +01:00
|
|
|
if (horizontal) {
|
|
|
|
|
cells.enter()
|
|
|
|
|
.append("rect")
|
|
|
|
|
.attr("y", d => y(d.category))
|
2024-11-21 22:19:38 +01:00
|
|
|
//.attr("width", 12)
|
|
|
|
|
.attr("width", blockLength)
|
2024-11-21 21:52:20 +01:00
|
|
|
.attr("x", d => x(new Date(d.timestamp)))
|
|
|
|
|
.attr("height", 25) // Minimized spacing between blocks
|
|
|
|
|
.attr("fill", d => categories[d.category].color)
|
|
|
|
|
.attr("opacity", d => d.intensity)
|
2024-11-21 22:43:47 +01:00
|
|
|
//.attr("filter", "url(#blend-multiply)") // Apply blend mode
|
2024-11-21 21:52:20 +01:00
|
|
|
.merge(cells) // Merge updates
|
|
|
|
|
.attr("x", d => x(new Date(d.timestamp)))
|
|
|
|
|
.attr("opacity", d => d.intensity)
|
|
|
|
|
.attr("visibility", d =>
|
|
|
|
|
x(new Date(d.timestamp)) >= 0 && x(new Date(d.timestamp)) <= width
|
|
|
|
|
? "visible"
|
|
|
|
|
: "hidden"
|
|
|
|
|
);
|
|
|
|
|
} else {
|
|
|
|
|
// Enter new data
|
|
|
|
|
cells.enter()
|
|
|
|
|
.append("rect")
|
|
|
|
|
.attr("x", d => x(d.category))
|
|
|
|
|
.attr("width", x.bandwidth())
|
|
|
|
|
.attr("y", d => y(new Date(d.timestamp)))
|
|
|
|
|
.attr("height", 4) // Minimized spacing between blocks
|
|
|
|
|
.attr("fill", d => categories[d.category].color)
|
|
|
|
|
.attr("opacity", d => d.intensity)
|
|
|
|
|
.merge(cells) // Merge updates
|
|
|
|
|
.attr("y", d => y(new Date(d.timestamp)))
|
|
|
|
|
.attr("opacity", d => d.intensity)
|
|
|
|
|
.attr("visibility", d =>
|
|
|
|
|
y(new Date(d.timestamp)) >= 0 && y(new Date(d.timestamp)) <= height
|
|
|
|
|
? "visible"
|
|
|
|
|
: "hidden"
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
2024-11-21 21:08:35 +01:00
|
|
|
|
|
|
|
|
// Remove old data that moves off the screen
|
|
|
|
|
cells.exit().remove();
|
2024-11-21 20:39:49 +01:00
|
|
|
}
|
|
|
|
|
|
2024-11-21 21:11:23 +01:00
|
|
|
// Real-time simulation
|
2024-11-21 21:08:35 +01:00
|
|
|
let allData = [];
|
2024-11-21 21:31:01 +01:00
|
|
|
const scrollingSpeed = 20; // Pixels per second
|
2024-11-22 12:56:28 +01:00
|
|
|
let maxIntensity = 1;
|
|
|
|
|
|
|
|
|
|
setInterval(() => {
|
|
|
|
|
let newMax = 1;
|
|
|
|
|
allData.map(c => {
|
|
|
|
|
if (c.amount > newMax) {
|
|
|
|
|
if (newMax < maxIntensity) {
|
|
|
|
|
maxIntensity = newMax;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}, 10000)
|
2024-11-21 21:11:23 +01:00
|
|
|
|
|
|
|
|
function generateData() {
|
2024-11-22 12:56:28 +01:00
|
|
|
const item = categoryQueue.pop();
|
|
|
|
|
if (item == undefined) {
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const newData = item.metrics.map((c, i) => {
|
|
|
|
|
if (c.amount > maxIntensity) {
|
|
|
|
|
maxIntensity = c.amount;
|
|
|
|
|
}
|
|
|
|
|
if (c.amount == 0) {
|
|
|
|
|
return null
|
|
|
|
|
}
|
|
|
|
|
const newIntensity = c.amount / maxIntensity
|
|
|
|
|
console.log(maxIntensity);
|
|
|
|
|
const smoothIntensity = d3.interpolate(lastIntensity.get(i), newIntensity)(0.5); // Smooth transition
|
|
|
|
|
lastIntensity.set(c.event_name, smoothIntensity); // Update last intensity
|
2024-11-21 21:25:29 +01:00
|
|
|
return {
|
2024-11-22 12:56:28 +01:00
|
|
|
id: `${Date.now()}-${c.event_name}`,
|
|
|
|
|
category: i,
|
2024-11-21 21:25:29 +01:00
|
|
|
timestamp: Date.now(),
|
|
|
|
|
intensity: smoothIntensity,
|
2024-11-22 12:56:28 +01:00
|
|
|
color: categories[i].color,
|
|
|
|
|
amount: c.amount,
|
|
|
|
|
}
|
|
|
|
|
}).filter(Boolean);
|
|
|
|
|
|
|
|
|
|
|
2024-11-21 21:08:35 +01:00
|
|
|
|
2024-11-22 12:56:28 +01:00
|
|
|
allData = [...allData, ...newData].filter(d => new Date(d.timestamp) >= new Date(Date.now() - 600000))
|
|
|
|
|
return
|
|
|
|
|
|
|
|
|
|
// Simulate sporadic events with intensity
|
|
|
|
|
//const newData = categories.map(c => {
|
|
|
|
|
// if (Math.random() < 0.7) return null; // 70% chance no data for this category
|
|
|
|
|
// const newIntensity = Math.random(); // Random intensity
|
|
|
|
|
// const smoothIntensity = d3.interpolate(lastIntensity.get(c.id), newIntensity)(0.5); // Smooth transition
|
|
|
|
|
// lastIntensity.set(c.id, smoothIntensity); // Update last intensity
|
|
|
|
|
// return {
|
|
|
|
|
// id: `${Date.now()}-${c.id}`,
|
|
|
|
|
// category: c.id,
|
|
|
|
|
// timestamp: Date.now(),
|
|
|
|
|
// intensity: smoothIntensity,
|
|
|
|
|
// };
|
|
|
|
|
//}).filter(Boolean); // Remove null values
|
|
|
|
|
|
|
|
|
|
//// Append new data and remove older ones beyond the last 60 seconds
|
|
|
|
|
//allData = [...allData, ...newData].filter(d =>
|
|
|
|
|
// new Date(d.timestamp) >= new Date(Date.now() - 60000)
|
|
|
|
|
//);
|
2024-11-21 21:11:23 +01:00
|
|
|
}
|
2024-11-21 20:39:49 +01:00
|
|
|
|
2024-11-21 21:11:23 +01:00
|
|
|
// Continuous scroll
|
2024-11-21 21:20:38 +01:00
|
|
|
let lastTimestamp = Date.now();
|
|
|
|
|
|
2024-11-21 21:11:23 +01:00
|
|
|
d3.timer(elapsed => {
|
2024-11-21 21:20:38 +01:00
|
|
|
const now = Date.now();
|
|
|
|
|
const delta = now - lastTimestamp;
|
|
|
|
|
|
2024-11-21 21:31:01 +01:00
|
|
|
// Generate data periodically (every 500ms for more activity)
|
|
|
|
|
if (delta >= 500) {
|
2024-11-21 21:11:23 +01:00
|
|
|
generateData();
|
2024-11-21 21:20:38 +01:00
|
|
|
lastTimestamp = now;
|
2024-11-21 21:11:23 +01:00
|
|
|
}
|
2024-11-21 21:08:35 +01:00
|
|
|
|
2024-11-21 21:11:23 +01:00
|
|
|
// Update the domain of the y-axis
|
2024-11-21 21:20:38 +01:00
|
|
|
const currentTime = new Date();
|
|
|
|
|
const pastTime = new Date(currentTime.getTime() - 60000);
|
2024-11-21 21:52:20 +01:00
|
|
|
if (horizontal) {
|
|
|
|
|
x.domain([pastTime, currentTime]);
|
|
|
|
|
} else {
|
|
|
|
|
y.domain([pastTime, currentTime]);
|
|
|
|
|
}
|
2024-11-21 21:11:23 +01:00
|
|
|
|
|
|
|
|
// Update positions of all heatmap cells
|
2024-11-21 21:08:35 +01:00
|
|
|
updateHeatmap(allData);
|
2024-11-22 12:56:28 +01:00
|
|
|
}, 150);
|
2024-11-21 20:39:49 +01:00
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
