this is getting k

main
Bel LaPointe 2024-04-15 08:45:20 -06:00
parent d7cbcb9926
commit ba833fa315
1 changed files with 27 additions and 18 deletions

View File

@ -3,6 +3,7 @@
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
<script src="https://code.highcharts.com/10/highcharts.js"></script>
<script type="module">
const allMessages = {{ json "Marshal" .messages }};
@ -136,30 +137,38 @@
byWeekday = byWeekday.map((cnt, idx) => {
return {x: prettyWeekday(idx), y: cnt};
});
console.log("drawEventVolumeByWeekday", byWeekday);
const ele = document.getElementById("eventVolumeByWeekday");
ele.innerHTML = "";
eventVolumeByWeekday.append(draw(byWeekday));
draw("eventVolumeByWeekday", byWeekday);
}
function drawEventVolumeByHour(messages) {}
function drawEventVolumeByHour(messages) {
var byHour = [];
for(var i = 0; i < 24; i++)
byHour.push(0);
for(var m of messages) {
var d = new Date(1000 * m.TS);
byHour[d.getHours()] += 1;
}
byHour = byHour.map((cnt, idx) => {
return {x: idx, y: cnt};
});
draw("eventVolumeByHour", byHour);
}
function drawEventVolumeByAsset(messages) {}
import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";
function draw(points) {
var ymax = 0;
points.forEach((point) => {
ymax = ymax > point.y ? ymax : point.y;
function draw(id, points) {
document.getElementById(id).innerHTML = "";
Highcharts.chart(id, {
chart: { type: 'column' },
title: { text: '' },
xAxis: { categories: points.map((point) => `${point.x}`) },
yAxis: { allowDecimals: false, title: { text: '' } },
legend: { enabled: false },
series: [{data: points.map((point) => point.y) }],
plotOptions: { column: { stacking: 'normal' } },
});
const svg = d3.create("svg");
const x = d3.scaleLinear().domain([0, points.length]).range([0, 250]);
const y = d3.scaleLinear().domain([0, ymax]).range([0, 250]);
svg.append("g").call(d3.axisBottom(x));
svg.append("g").call(d3.axisLeft(y));
return svg.node();
}
</script>
<style>
@ -198,7 +207,7 @@
</rows>
<rows>
<h3>by Hour</h3>
<div>DRAW ME</div>
<div id="eventVolumeByHour"></div>
</rows>
</columns>
<rows>