kjuulh/iamvisual
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add i am alive

Browse Source 
Signed-off-by: kjuulh <contact@kjuulh.io>
This commit is contained in:
Kasper Juul Hermansen 2024-11-21 22:19:38 +01:00
parent bbf5770828
commit 198446ea2a
Signed by: kjuulh
GPG Key ID: D85D7535F18F35FA
1 changed files with 37 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
index.html
View File

@ -7,8 +7,8 @@
<script src="https://d3js.org/d3.v7.min.js"></script>
<style>
body {
background-color: black;
color: white;
background-color: #0B0C10;
color: #E5E5E5;
font-family: Arial, sans-serif;
}
@ -17,6 +17,17 @@
margin: auto;
}
#title {
padding: 1rem 2rem;
}
.divider {
height: 1px;
width: 80%;
background-color: #E5E5E5;
}
.legend {
font-size: 12px;
display: flex;
@ -38,30 +49,31 @@
</style>
</head>
<body>
<h2>Live Activity</h2>
<div class="divider"></div>
<h2 id="title">Live Activity</h2>
<div id="chart"></div>
<div id="legend" class="legend"></div>
<script>
const horizontal = true;
const categoryAmount = 5;
const categoryAmount = 10;
const parentWidth = document.querySelector('#chart').parentElement.offsetWidth;
// Dimensions
const margin = { top: 20, right: 20, bottom: 20, left: 50 };
const width = 800 - margin.left - margin.right;
const height = 85 * categoryAmount / 2 - margin.top - margin.bottom;
//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;
// Categories with labels
const categories = [
{ id: 0, label: "User Onboarded", color: "#FFD700" },
{ id: 1, label: "Payment Accepted", color: "#00BFFF" },
{ id: 2, label: "Payment Failed", color: "#FF4500" },
{ id: 3, label: "Product Added to Cart", color: "#9400D3" },
{ id: 4, label: "Checkout Started", color: "#32CD32" },
{ 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
{ id: 5, label: "Order Placed", color: "#8B4513" },
{ id: 6, label: "Order Cancelled", color: "#FF69B4" },
{ id: 7, label: "Refund Processed", color: "#A9A9A9" },
@ -90,6 +102,14 @@
.append("g")
.attr("transform", `translate(${margin.left},${margin.top})`);
const defs = svg.append("defs");
defs.append("filter")
.attr("id", "blend-multiply")
.append("feBlend")
.attr("mode", "multiply")
.attr("in", "SourceGraphic")
.attr("in2", "BackgroundImage");
// Time scales
var x, y;
if (horizontal) {
@ -123,11 +143,13 @@
cells.enter()
.append("rect")
.attr("y", d => y(d.category))
.attr("width", 12)
//.attr("width", 12)
.attr("width", blockLength)
.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)
.attr("filter", "url(#blend-multiply)") // Apply blend mode
.merge(cells) // Merge updates
.attr("x", d => x(new Date(d.timestamp)))
.attr("opacity", d => d.intensity)