Tampermonkey_PowerSchool_Graph.js

// ==UserScript==
// @name         Powerschool graphing
// @version      1.0
// @author       You
// @require      https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.18.2/babel.js
// @require      https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.16.0/polyfill.js
// @require      https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js
// ---------------------------------------------------------------
// ------------------ UPDATE THE URL YOURSELF --------------------
// @match        https://powerschool.*.net/guardian/scores.html?*
// ---------------------------------------------------------------
// @grant        none
// @run-at      document-idle
// ==/UserScript==

/* jshint ignore:start */
var inline_src = (<><![CDATA[
/* jshint ignore:end */
/* jshint esnext: false */
/* jshint esversion: 6 */
  const $ = jQuery;
  $('.box-round').before('<canvas id="chart" height="50"></canvas>');
  const canvas = $('#chart')[0];
  const ctx = canvas.getContext('2d');
  const data = collectData();
  var max = Math.ceil(Math.max.apply(Math, data));
  var gradientStroke = ctx.createLinearGradient(500, 0, 100, 0);
  gradientStroke.addColorStop(0, "#80b6f4");
  gradientStroke.addColorStop(1, "#f49080");
  //
  var fillGradient = ctx.createLinearGradient(0, 0, 0, 200);
  fillGradient.addColorStop(0, "rgba(0,100,200,.3)");
  fillGradient.addColorStop(1, "rgba(0,0,0,0)");
  var myLineChart = new Chart(canvas, {
      type: 'line',
      data: {
          labels: data.map((x, y) => ''),
          datasets: [{
              label: 'Grade',
              borderColor: gradientStroke,
              pointBorderColor: gradientStroke,
              pointBackgroundColor: gradientStroke,
              pointHoverBackgroundColor: gradientStroke,
              pointHoverBorderColor: gradientStroke,
              pointBorderWidth: 8,
              pointHoverRadius: 8,
              pointHoverBorderWidth: 1,
              pointRadius: 3,
              borderWidth: 4,
              data,
              backgroundColor: fillGradient,
          }]
      },
      options: {
          scales: {
              yAxes: [{
                  ticks: {
                      beginAtZero: true,
                      max: max < 100 ? 100 : max,
                      min: 0,
                  }
              }]
          }
      }
  });

  function collectData() {
      const scores = [];
      let currentScore = 0;
      let totalOutOf = 0;
      jQuery('.box-round table td span').each((id, el) => {
          const score = jQuery(el).text();
          if (score.indexOf('/') === -1 || score.indexOf('--') !== -1)
              return;
          const [value, outOf] = score.split('/');
          const percentage = (value / outOf) * 100;
          currentScore += Number(value);
          totalOutOf += Number(outOf);
          scores.push((currentScore / totalOutOf) * 100);
      });
      return scores;
  }
/* jshint ignore:start */
]]></>).toString();
var c = Babel.transform(inline_src, { presets: [ "es2015", "es2016" ] });
eval(c.code);
/* jshint ignore:end */