render
/
spoc-bot-vr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
report.tmpl
View File

@ -3,6 +3,7 @@
<head> <head>
<meta name="viewport" content="width=device-width, initial-scale=1"> <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"> <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"> <script type="module">
const allMessages = {{ json "Marshal" .messages }}; const allMessages = {{ json "Marshal" .messages }};
@ -136,30 +137,38 @@
byWeekday = byWeekday.map((cnt, idx) => { byWeekday = byWeekday.map((cnt, idx) => {
return {x: prettyWeekday(idx), y: cnt}; return {x: prettyWeekday(idx), y: cnt};
}); });
console.log("drawEventVolumeByWeekday", byWeekday);
const ele = document.getElementById("eventVolumeByWeekday"); draw("eventVolumeByWeekday", byWeekday);
ele.innerHTML = "";
eventVolumeByWeekday.append(draw(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) {} function drawEventVolumeByAsset(messages) {}
import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm"; function draw(id, points) {
document.getElementById(id).innerHTML = "";
function draw(points) { Highcharts.chart(id, {
var ymax = 0; chart: { type: 'column' },
points.forEach((point) => { title: { text: '' },
ymax = ymax > point.y ? ymax : point.y; 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> </script>
<style> <style>
@ -198,7 +207,7 @@
</rows> </rows>
<rows> <rows>
<h3>by Hour</h3> <h3>by Hour</h3>
<div>DRAW ME</div> <div id="eventVolumeByHour"></div>
</rows> </rows>
</columns> </columns>
<rows> <rows>