unterstützte konfigurierbare "Streaks"

Ein Streak ist ein Zeitraum der zählt wie viele gleiche Ereignisse in
zeitlicher Folge aufgetreten sind. Ein Streak wird durch ein nicht
positives Ereignis beendet.

1 files changed, 58 insertions, 2 deletions

diff --git a/index.js b/index.js
index 8f145dc..55ce7b0 100644
--- a/index.js
+++ b/index.js
@@ -25,11 +25,16 @@
  *
  */
 
+// Observer der auf 'resize' events unseres Graphs reagiert und die
+// Streak Anzeige gegebenfalls anpasst.
+let graphResizeObserver;
+
 // Zeichne das Diagramm und erstelle eine Liste aller Events,
 // wenn die Seite komplett geladen wurde
 window.onload = function() {
   zeichne();
   zeichneBilder();
+  zeichneStreak();
   listeEvents();
 }
 
@@ -90,7 +95,7 @@ async function zeichneBilder() {
     // Die Url des Klassenbildes ist der Klassenbezeichner unter dem Bilderpfad
     let bildUrl = `${bilder_pfad}/${klasse.bezeichner}.png`;
 
-    // Teste ob das Bild existiert
+    // Teste, ob das Bild existiert
     let ok = (await fetch(bildUrl, {method: 'HEAD'})).ok;
     // Das Bild existiert nicht
     if (!ok) { continue; }
@@ -119,8 +124,59 @@ async function zeichneBilder() {
   diagramm.update();
 }
 
+// Zeichne den Streak für alle Klassen.
+// Die globale Variable daten.streakEreignisse muss definiert sein und ein Iterable
+// aller Ereignisse, die für den Streak relevant sind, enthalten.
+// Ereignisse ohne positives Delta beenden einen Streak.
+function zeichneStreak() {
+  // Es gibt keine Streak-Ereignisse
+  if (!daten.streakEreignisse) {
+    return;
+  }
+
+  // Variable um den laufenden Streak per Klasse zu bestimmen
+  let streaks = Object.fromEntries(daten.klassen.map(klasse => [klasse.bezeichner, 0]));
+
+  for (let ereignis of daten.streakEreignisse) {
+    const klasse = `${ereignis.Jahrgang}${ereignis.Bezeichner}`;
+
+    // Das Streak Ereignis bringt keine Punkte und unterbricht damit den Streak.
+    if (ereignis.Delta == 0) {
+      streaks[klasse] = 0;
+    // Erhöhe den Streak.
+    } else {
+      streaks[klasse] = streaks[klasse] + 1;
+    }
+  }
+
+  let streakNodes = document.getElementById('streaks');
+  for (const klasse of Object.keys(streaks)) {
+    const streak = streaks[klasse];
+    let streakNode = document.createElement("td");
+    streakNode.classList.add("streak");
+    streakNode.innerHTML = `${streak}/${streak_anzahl} ${streak_ziel}`;
+    // Füge den Streak-Node der Klasse den Streak Nodes auf der Webseite hinzu.
+    streakNodes.appendChild(streakNode);
+  }
+
+  const zeichenflaeche = document.getElementById('zeichenflaeche');
+  let streakTabelle = document.getElementById('streaks-tabelle');
+  // Setze die Breite passend zum Graphen
+  streakTabelle.setAttribute("style", `width:${zeichenflaeche.style.width}px`);
+
+  // Erzeuge ein Observer der auf Größenveränderungen des Graphen reagiert.
+  graphResizeObserver = new ResizeObserver((entries) => {
+    for (const entry of entries) {
+      // Passe die Breite unserer Streak-Tabelle an die des Graphen an.
+      streakTabelle.setAttribute("style", `width:${entry.contentRect.width}px`);
+    }
+  });
+
+  graphResizeObserver.observe(zeichenflaeche);
+}
+
 // Erzeuge eine Liste aller Ereignisse.
-// Die globale Variable ereignisse muss definiert sein und ein Iterable aller
+// Die globale Variable daten.ereignisse muss definiert sein und ein Iterable aller
 // Ereignisse, die angezeigt werden sollen, enthalten.
 function listeEvents() {
   let liste = document.getElementById("ereignisse");