Add method for admins to override our provided echart behavior

assets/js/scoreboard.js

@@ -16,7 +16,9 @@ Alpine.data("ScoreboardDetail", () => ({
  async update() {
  this.data = await CTFd.pages.scoreboard.getScoreboardDetail(10);
 
- let option = getOption(CTFd.config.userMode, this.data);
+ let optionMerge = window.scoreboardChartOptions;
+ let option = getOption(CTFd.config.userMode, this.data, optionMerge);
+
  embed(this.$refs.scoregraph, option);
  this.show = Object.keys(this.data).length > 0;
  },

assets/js/teams/private.js

@@ -191,13 +191,16 @@ Alpine.data("TeamGraphs", () => ({
  this.failCount = this.fails.meta.count;
  this.awardCount = this.awards.meta.count;
 
+ let optionMerge = window.teamScoreGraphChartOptions;
+
  embed(
  this.$refs.scoregraph,
  getUserScoreOption(
  CTFd.team.id,
  CTFd.team.name,
  this.solves.data,
  this.awards.data,
+ optionMerge,
  ),
  );
  },

assets/js/teams/public.js

@@ -61,13 +61,16 @@ Alpine.data("TeamGraphs", () => ({
  this.failCount = this.fails.meta.count;
  this.awardCount = this.awards.meta.count;
 
+ let optionMerge = window.teamScoreGraphChartOptions;
+
  embed(
  this.$refs.scoregraph,
  getUserScoreOption(
  window.TEAM.id,
  window.TEAM.name,
  this.solves.data,
  this.awards.data,
+ optionMerge,
  ),
  );
  },

assets/js/users/private.js

@@ -64,13 +64,16 @@ Alpine.data("UserGraphs", () => ({
  this.failCount = this.fails.meta.count;
  this.awardCount = this.awards.meta.count;
 
+ let optionMerge = window.userScoreGraphChartOptions;
+
  embed(
  this.$refs.scoregraph,
  getUserScoreOption(
  CTFd.user.id,
  CTFd.user.name,
  this.solves.data,
  this.awards.data,
+ optionMerge,
  ),
  );
  },

assets/js/users/public.js

@@ -64,13 +64,16 @@ Alpine.data("UserGraphs", () => ({
  this.failCount = this.fails.meta.count;
  this.awardCount = this.awards.meta.count;
 
+ let optionMerge = window.userScoreGraphChartOptions;
+
  embed(
  this.$refs.scoregraph,
  getUserScoreOption(
  window.USER.id,
  window.USER.name,
  this.solves.data,
  this.awards.data,
+ optionMerge,
  ),
  );
  },

assets/js/utils/graphs/echarts/categories.js

@@ -1,6 +1,7 @@
 import { colorHash } from "@ctfdio/ctfd-js/ui";
+import { mergeObjects } from "../../objects";
 
-export function getOption(solves) {
+export function getOption(solves, optionMerge) {
  let option = {
  title: {
  left: "center",
@@ -99,5 +100,8 @@ export function getOption(solves) {
  });
  });
 
+ if (optionMerge) {
+ option = mergeObjects(option, optionMerge);
+ }
  return option;
 }

assets/js/utils/graphs/echarts/scoreboard.js

@@ -1,17 +1,9 @@
 import { colorHash } from "@ctfdio/ctfd-js/ui";
+import { mergeObjects } from "../../objects";
+import { cumulativeSum } from "../../math";
 import dayjs from "dayjs";
 
-export function cumulativeSum(arr) {
- let result = arr.concat();
- for (let i = 0; i < arr.length; i++) {
- result[i] = arr.slice(0, i + 1).reduce(function (p, i) {
- return p + i;
- });
- }
- return result;
-}
-
-export function getOption(mode, places) {
+export function getOption(mode, places, optionMerge) {
  let option = {
  title: {
  left: "center",
@@ -102,5 +94,8 @@ export function getOption(mode, places) {
  option.series.push(data);
  }
 
+ if (optionMerge) {
+ option = mergeObjects(option, optionMerge);
+ }
  return option;
 }

assets/js/utils/graphs/echarts/solve-percentage.js

@@ -1,4 +1,6 @@
-export function getOption(solves, fails) {
+import { mergeObjects } from "../../objects";
+
+export function getOption(solves, fails, optionMerge) {
  let option = {
  title: {
  left: "center",
@@ -77,5 +79,9 @@ export function getOption(solves, fails) {
  },
  ],
  };
+
+ if (optionMerge) {
+ option = mergeObjects(option, optionMerge);
+ }
  return option;
 }

assets/js/utils/graphs/echarts/userscore.js

@@ -1,8 +1,9 @@
 import { colorHash } from "@ctfdio/ctfd-js/ui";
-import { cumulativeSum } from "./scoreboard";
+import { cumulativeSum } from "../../math";
+import { mergeObjects } from "../../objects";
 import dayjs from "dayjs";
 
-export function getOption(id, name, solves, awards) {
+export function getOption(id, name, solves, awards, optionMerge) {
  let option = {
  title: {
  left: "center",
@@ -98,5 +99,9 @@ export function getOption(id, name, solves, awards) {
  },
  data: cumulativeSum(scores),
  });
+
+ if (optionMerge) {
+ option = mergeObjects(option, optionMerge);
+ }
  return option;
 }

assets/js/utils/objects.js

@@ -0,0 +1,11 @@
+export function mergeObjects(target, source) {
+ // https://stackoverflow.com/a/65817907
+ // Iterate through `source` properties and if an `Object` set property to merge of `target` and `source` properties
+ for (const key of Object.keys(source)) {
+ if (source[key] instanceof Object)
+ Object.assign(source[key], mergeObjects(target[key], source[key]));
+ }
+ // Join `target` and modified `source`
+ Object.assign(target || {}, source);
+ return target;
+}