this is getting k
parent
d7cbcb9926
commit
ba833fa315
45
report.tmpl
45
report.tmpl
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue