Add code to update scoregraph when active bracket changes

CTFd · Sep 7, 2024 · 0a12523 · 0a12523
1 parent dbc603a
commit 0a12523
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 8 deletions.
diff --git a/assets/js/scoreboard.js b/assets/js/scoreboard.js
@@ -12,9 +12,10 @@ const scoreboardUpdateInterval = window.scoreboardUpdateInterval || 300000;
 Alpine.data("ScoreboardDetail", () => ({
   data: {},
   show: true,
+  activeBracket: null,
 
   async update() {
-    this.data = await CTFd.pages.scoreboard.getScoreboardDetail(10);
+    this.data = await CTFd.pages.scoreboard.getScoreboardDetail(10, this.activeBracket);
 
     let optionMerge = window.scoreboardChartOptions;
     let option = getOption(CTFd.config.userMode, this.data, optionMerge);
@@ -38,15 +39,15 @@ Alpine.data("ScoreboardList", () => ({
   activeBracket: null,
 
   async update() {
-    let response = await CTFd.fetch(`/api/v1/brackets?type=${CTFd.config.userMode}`, {
-      method: "GET",
-    });
-    const body = await response.json();
-    this.brackets = body["data"];
+    this.brackets = await CTFd.pages.scoreboard.getBrackets(CTFd.config.userMode);
     this.standings = await CTFd.pages.scoreboard.getScoreboard();
   },
 
   async init() {
+    this.$watch("activeBracket", value => {
+      this.$dispatch("bracket-change", value);
+    });
+
     this.update();
 
     setInterval(() => {

diff --git a/assets/js/utils/graphs/echarts/index.js b/assets/js/utils/graphs/echarts/index.js
@@ -34,7 +34,11 @@ echarts.use([
 
 export function embed(target, option) {
   let chart = echarts.init(target);
-  chart.setOption(option);
+
+  // https://echarts.apache.org/en/api.html#echartsInstance.setOption
+  // https://github.com/apache/echarts/issues/6202#issuecomment-315054637
+  // https://stackoverflow.com/a/72211534
+  chart.setOption(option, true);
 
   window.addEventListener("resize", () => {
     if (chart) {

diff --git a/templates/scoreboard.html b/templates/scoreboard.html
@@ -11,7 +11,7 @@ <h1>
   <div class="container">
     {% include "components/errors.html" %}
 
-    <div id="score-graph" class="align-items-center" :class="{'d-flex': show, 'd-none': !show}" x-data="ScoreboardDetail" x-ref="scoregraph">
+    <div id="score-graph" class="align-items-center" :class="{'d-flex': show, 'd-none': !show}" x-data="ScoreboardDetail" x-ref="scoregraph" @bracket-change.window="activeBracket=$event.detail; update();">
       <div class="col-md-12 text-center">
         <i class="fas fa-circle-notch fa-spin fa-3x fa-fw spinner"></i>
       </div>