diff --git a/db/.gitkeep b/db/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/src/site/fetchUptimeAndGenerateBarGraph.js b/src/site/fetchUptimeAndGenerateBarGraph.js index 7f72d7a..61a28b1 100644 --- a/src/site/fetchUptimeAndGenerateBarGraph.js +++ b/src/site/fetchUptimeAndGenerateBarGraph.js @@ -1,4 +1,6 @@ +const eventWidth = 16 + const clickEventPopupIncident = (event) => { const element = event.toElement; const indicentId = element.getAttribute('incident-id'); @@ -20,20 +22,47 @@ const createEvent = (event) => { return element; } +const appendEventToParent = (event, parent) => { + const eventElement = createEvent(event); + if (event.isOk == false) + eventElement.className += ' error' + + parent.appendChild(eventElement) +} + +const getGraphWidth = () => { + const graph = document.getElementById('bar-graph'); + return graph.offsetWidth; +} + +let lastResizePoint = 0; +console.log('lastResizePoint', lastResizePoint) + function fetchUptimeAndGenerateBarGraph() { const graph = document.getElementById('bar-graph'); + const graphWidth = graph.offsetWidth; + if (graphWidth < lastResizePoint + 100 && graphWidth > lastResizePoint - 100) { + return + } + lastResizePoint = graphWidth; + console.log('lastResizePoint', lastResizePoint) + + graph.innerHTML = ''; + const numberOfEventsToFillGraph = Math.floor(graphWidth / eventWidth); + + Array(numberOfEventsToFillGraph).fill().map(() => appendEventToParent({ + isOk: Math.random() > 0.2 ? true : false, + date: new Date(), + _id: Math.random() + }, graph)) + + return fetch('/uptime') .then(resp => resp.json()) - .then(uptimeEvents => { - uptimeEvents.map(event => { - const eventElement = createEvent(event); - if (event.isOk == false) - eventElement.className += ' error' - - graph.appendChild(eventElement) - }) - }) + .then(uptimeEvents => uptimeEvents.map(event => appendEventToParent(event, graph))) } +window.onresize = fetchUptimeAndGenerateBarGraph + fetchUptimeAndGenerateBarGraph() \ No newline at end of file