Testing dynamically populating graph.

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()