AtCoderHeuristicContestBarChart

横軸を順位、縦軸を総スコアとする棒グラフを、順位表上部に出力

As of 2023-10-13. See the latest version.

  1. // ==UserScript==
  2. // @name AtCoderHeuristicContestBarChart
  3. // @namespace http://tampermonkey.net/
  4. // @version 0.1
  5. // @description 横軸を順位、縦軸を総スコアとする棒グラフを、順位表上部に出力
  6. // @author pitP
  7. // @license MIT
  8. // @match https://atcoder.jp/contests/ahc*/standings
  9. // @require https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js
  10. // ==/UserScript==
  11.  
  12. (function () {
  13. 'use strict';
  14. $('#vue-standings').prepend(`
  15. <div>
  16. <canvas id='BarChart'></canvas>
  17. </div>
  18. `);
  19.  
  20. vueStandings.$watch('standings', function (newVal, oldVal) {
  21. if (!newVal) {
  22. return;
  23. }
  24. var data;
  25. var task = newVal.TaskInfo;
  26. if (vueStandings.filtered) {
  27. data = vueStandings.filteredStandings;
  28. }
  29. else {
  30. data = newVal.StandingsData;
  31. }
  32.  
  33.  
  34. const target_user = data.filter(item => item.TotalResult.Count > 0);
  35. const rank = Array.from({ length: target_user.length }, (_, i) => i + 1);
  36. const score = target_user.map(item => item.TotalResult.Score / 100);
  37.  
  38. var ctx = document.getElementById("BarChart");
  39. var BarChart = new Chart(ctx, {
  40. type: 'bar',
  41. data: {
  42. labels: rank,
  43. datasets: [
  44. {
  45. label: 'TotalScore',
  46. data: score,
  47. backgroundColor: "rgba(0, 255, 0, 1)",
  48. }
  49. ]
  50. },
  51. });
  52. }, { deep: true, immediate: true })
  53. })();