Initializemain

2 files changed, 389 insertions, 0 deletions

diff --git a/build/resources/main/static/plugins/sparklines/sparkline.js b/build/resources/main/static/plugins/sparklines/sparkline.js
new file mode 100644
index 0000000..fac7ef1
--- /dev/null
+++ b/build/resources/main/static/plugins/sparklines/sparkline.js
@@ -0,0 +1,210 @@
+(function (root, factory) {

+  if (typeof define === 'function' && define.amd) {

+    // AMD. Register as an anonymous module.

+    define(factory);

+  } else if (typeof exports === 'object') {

+    // Node. Does not work with strict CommonJS, but

+    // only CommonJS-like enviroments that support module.exports,

+    // like Node.

+    module.exports = factory();

+  } else {

+    // Browser globals (root is window)

+    root.Sparkline = factory();

+  }

+}(window, function () {

+  function extend(specific, general) {

+    var obj = {};

+    for (var key in general) {

+      obj[key] = key in specific ? specific[key] : general[key];

+    }

+    return obj;

+  }

+

+  function Sparkline(element, options) {

+    this.element = element;

+    this.options = extend(options || {}, Sparkline.options);

+

+    init: {

+      this.element.innerHTML = "<canvas></canvas>";

+      this.canvas = this.element.firstChild;

+      this.context = this.canvas.getContext("2d");

+      this.ratio = window.devicePixelRatio || 1;

+

+      if (this.options.tooltip) {

+        this.canvas.style.position = "relative";

+        this.canvas.onmousemove = showTooltip.bind(this);

+      }

+    }

+  }

+

+  Sparkline.options = {

+    width: 100,

+    height: null,

+    lineColor: "black",

+    lineWidth: 1.5,

+    startColor: "transparent",

+    endColor: "black",

+    maxColor: "transparent",

+    minColor: "transparent",

+    minValue: null,

+    maxValue: null,

+    minMaxValue: null,

+    maxMinValue: null,

+    dotRadius: 2.5,

+    tooltip: null,

+    fillBelow: true,

+    fillLighten: 0.5,

+    startLine: false,

+    endLine: false,

+    minLine: false,

+    maxLine: false,

+    bottomLine: false,

+    topLine: false,

+    averageLine: false

+  };

+

+  Sparkline.init = function (element, options) {

+    return new Sparkline(element, options);

+  };

+

+  Sparkline.draw = function (element, points, options) {

+    var sparkline = new Sparkline(element, options);

+    sparkline.draw(points);

+    return sparkline;

+  }

+

+  function getY(minValue, maxValue, offsetY, height, index) {

+    var range = maxValue - minValue;

+    if (range == 0) {

+      return offsetY + height / 2;

+    } else {

+      return (offsetY + height) - ((this[index] - minValue) / range) * height;

+    }

+  }

+

+  function drawDot(radius, x1, x2, color, line, x, y) {

+    this.context.beginPath();

+    this.context.fillStyle = color;

+    this.context.arc(x, y, radius, 0, Math.PI * 2, false);

+    this.context.fill();

+    drawLine.call(this, x1, x2, line, x, y);

+  }

+

+  function drawLine(x1, x2, style, x, y){

+    if(!style) return;

+

+    this.context.save();

+    this.context.strokeStyle = style.color || 'black';

+    this.context.lineWidth = (style.width || 1) * this.ratio;

+    this.context.globalAlpha = style.alpha || 1;

+    this.context.beginPath();

+    this.context.moveTo(style.direction != 'right' ? x1 : x, y);

+    this.context.lineTo(style.direction != 'left' ? x2 : x, y);

+    this.context.stroke();

+    this.context.restore();

+  }

+

+  function showTooltip(e) {

+    var x = e.offsetX || e.layerX || 0;

+    var delta = ((this.options.width - this.options.dotRadius * 2) / (this.points.length - 1));

+    var index = minmax(0, Math.round((x - this.options.dotRadius) / delta), this.points.length - 1);

+

+    this.canvas.title = this.options.tooltip(this.points[index], index, this.points);

+  }

+

+  Sparkline.prototype.draw = function (points) {

+

+    points = points || [];

+    this.points = points;

+

+    this.canvas.width = this.options.width * this.ratio;

+    this.canvas.style.width = this.options.width + 'px';

+

+    var pxHeight = this.options.height || this.element.offsetHeight;

+    this.canvas.height = pxHeight * this.ratio;

+    this.canvas.style.height = pxHeight + 'px';

+

+    var lineWidth = this.options.lineWidth * this.ratio;

+    var offsetX = Math.max(this.options.dotRadius * this.ratio, lineWidth/2);

+    var offsetY = Math.max(this.options.dotRadius * this.ratio, lineWidth/2);

+    var width = this.canvas.width - offsetX * 2;

+    var height = this.canvas.height - offsetY * 2;

+

+    var minValue = Math.min.apply(Math, points);

+    var maxValue = Math.max.apply(Math, points);

+    var bottomValue = this.options.minValue != undefined ? this.options.minValue : Math.min(minValue, this.options.maxMinValue != undefined ? this.options.maxMinValue : minValue);

+    var topValue = this.options.maxValue != undefined ? this.options.maxValue : Math.max(maxValue, this.options.minMaxValue != undefined ? this.options.minMaxValue : maxValue);

+    var minX = offsetX;

+    var maxX = offsetX;

+

+    var x = offsetX;

+    var y = getY.bind(points, bottomValue, topValue, offsetY, height);

+    var delta = width / (points.length - 1);

+

+    var dot = drawDot.bind(this, this.options.dotRadius * this.ratio, offsetX, width + offsetX);

+    var line = drawLine.bind(this, offsetX, width + offsetX);

+

+    this.context.save();

+

+    this.context.strokeStyle = this.options.lineColor;

+    this.context.fillStyle = this.options.lineColor;

+    this.context.lineWidth = lineWidth;

+    this.context.lineCap = 'round';

+    this.context.lineJoin = 'round';

+

+    if(this.options.fillBelow && points.length > 1){

+      this.context.save();

+      this.context.beginPath();

+      this.context.moveTo(x, y(0));

+      for (var i = 1; i < points.length; i++) {

+        x += delta;

+

+        minX = points[i] == minValue ? x : minX;

+        maxX = points[i] == maxValue ? x : maxX;

+

+        this.context.lineTo(x, y(i));

+      }

+      this.context.lineTo(width+offsetX, height + offsetY + lineWidth/2);

+      this.context.lineTo(offsetX, height + offsetY + lineWidth/2);

+      this.context.fill();

+      if(this.options.fillLighten > 0){

+        this.context.fillStyle = 'white';

+        this.context.globalAlpha = this.options.fillLighten;

+        this.context.fill();

+        this.context.globalAlpha = 1;

+      }else if(this.options.fillLighten < 0){

+        this.context.fillStyle = 'black';

+        this.context.globalAlpha = -this.options.fillLighten;

+        this.context.fill();

+      }

+      this.context.restore();

+    }

+

+    x = offsetX;

+    this.context.beginPath();

+    this.context.moveTo(x, y(0));

+    for (var i = 1; i < points.length; i++) {

+      x += delta;

+      this.context.lineTo(x, y(i));

+    }

+    this.context.stroke();

+

+    this.context.restore();

+

+    line(this.options.bottomLine, 0, offsetY);

+    line(this.options.topLine, 0, height + offsetY+lineWidth/2);

+

+    dot(this.options.startColor, this.options.startLine, offsetX + (points.length == 1 ? width / 2 : 0), y(0));

+    dot(this.options.endColor, this.options.endLine, offsetX + (points.length == 1 ? width / 2 : width), y(points.length-1));

+    dot(this.options.minColor, this.options.minLine, minX + (points.length == 1 ? width / 2 : 0), y(points.indexOf(minValue)));

+    dot(this.options.maxColor, this.options.maxLine, maxX + (points.length == 1 ? width / 2 : 0), y(points.indexOf(maxValue)));

+

+    //line(this.options.averageLine, )

+  }

+

+  function minmax(a, b, c) {

+    return Math.max(a, Math.min(b, c));

+  }

+

+  return Sparkline;

+}));

diff --git a/build/resources/main/static/plugins/sparklines/sparkline.mjs b/build/resources/main/static/plugins/sparklines/sparkline.mjs
new file mode 100644
index 0000000..b22f895
--- /dev/null
+++ b/build/resources/main/static/plugins/sparklines/sparkline.mjs
@@ -0,0 +1,179 @@
+export default class Sparkline {
+  constructor(element, options = {}) {
+    this.element = element;
+    this.options = { ...Sparkline.options, ...options };
+
+    init: {
+      this.element.innerHTML = "<canvas></canvas>";
+      this.canvas = this.element.firstChild;
+      this.context = this.canvas.getContext("2d");
+      this.ratio = window.devicePixelRatio || 1;
+
+      if (this.options.tooltip) {
+        this.canvas.style.position = "relative";
+        this.canvas.addEventListener('mousemove', e => {
+          const x = e.offsetX || e.layerX || 0;
+          const delta = ((this.options.width - this.options.dotRadius * 2) / (this._points.length - 1));
+          const index = minmax(0, Math.round((x - this.options.dotRadius) / delta), this._points.length - 1);
+
+          this.canvas.title = this.options.tooltip(this._points[index], index, this._points);
+        }, false);
+      }
+    }
+  }
+
+  set points(points) {
+    this.draw(points);
+  }
+
+  get points() {
+    return this._points;
+  }
+
+  draw(points = []) {
+    this._points = points;
+
+    this.canvas.width = this.options.width * this.ratio;
+    this.canvas.style.width = `${this.options.width}px`;
+
+    const pxHeight = this.options.height || this.element.offsetHeight;
+    this.canvas.height = pxHeight * this.ratio;
+    this.canvas.style.height = `${pxHeight}px`;
+
+    const lineWidth = this.options.lineWidth * this.ratio;
+    const offsetX = Math.max(this.options.dotRadius * this.ratio, lineWidth / 2);
+    const offsetY = Math.max(this.options.dotRadius * this.ratio, lineWidth / 2);
+    const width = this.canvas.width - offsetX * 2;
+    const height = this.canvas.height - offsetY * 2;
+
+    const minValue = Math.min.apply(Math, points);
+    const maxValue = Math.max.apply(Math, points);
+    const bottomValue = this.options.minValue != undefined ? this.options.minValue : Math.min(minValue, this.options.maxMinValue != undefined ? this.options.maxMinValue : minValue);
+    const topValue = this.options.maxValue != undefined ? this.options.maxValue : Math.max(maxValue, this.options.minMaxValue != undefined ? this.options.minMaxValue : maxValue);
+    let minX = offsetX;
+    let maxX = offsetX;
+
+    let x = offsetX;
+    const y = index => (topValue === bottomValue)
+      ? offsetY + height / 2
+      : (offsetY + height) - ((points[index] - bottomValue) / (topValue - bottomValue)) * height;
+    const delta = width / (points.length - 1);
+
+    const line = (style, x, y) => {
+      if (!style) return;
+
+      this.context.save();
+      this.context.strokeStyle = style.color || 'black';
+      this.context.lineWidth = (style.width || 1) * this.ratio;
+      this.context.globalAlpha = style.alpha || 1;
+      this.context.beginPath();
+      this.context.moveTo(style.direction != 'right' ? offsetX : x, y);
+      this.context.lineTo(style.direction != 'left' ? width + offsetX : x, y);
+      this.context.stroke();
+      this.context.restore();
+    }
+
+    const dot = (color, lineStyle, x, y) => {
+      this.context.beginPath();
+      this.context.fillStyle = color;
+      this.context.arc(x, y, this.options.dotRadius * this.ratio, 0, Math.PI * 2, false);
+      this.context.fill();
+      line(lineStyle, x, y);
+    }
+
+    this.context.save();
+
+    this.context.strokeStyle = this.options.lineColor;
+    this.context.fillStyle = this.options.lineColor;
+    this.context.lineWidth = lineWidth;
+    this.context.lineCap = 'round';
+    this.context.lineJoin = 'round';
+
+    if (this.options.fillBelow && points.length > 1) {
+      this.context.save();
+      this.context.beginPath();
+      this.context.moveTo(x, y(0));
+      for (let i = 1; i < points.length; i++) {
+        x += delta;
+
+        minX = points[i] == minValue ? x : minX;
+        maxX = points[i] == maxValue ? x : maxX;
+
+        this.context.lineTo(x, y(i));
+      }
+      this.context.lineTo(width + offsetX, height + offsetY + lineWidth / 2);
+      this.context.lineTo(offsetX, height + offsetY + lineWidth / 2);
+      this.context.fill();
+      if (this.options.fillLighten > 0) {
+        this.context.fillStyle = 'white';
+        this.context.globalAlpha = this.options.fillLighten;
+        this.context.fill();
+        this.context.globalAlpha = 1;
+      } else if (this.options.fillLighten < 0) {
+        this.context.fillStyle = 'black';
+        this.context.globalAlpha = -this.options.fillLighten;
+        this.context.fill();
+      }
+      this.context.restore();
+    }
+
+    x = offsetX;
+    this.context.beginPath();
+    this.context.moveTo(x, y(0));
+    for (let i = 1; i < points.length; i++) {
+      x += delta;
+      this.context.lineTo(x, y(i));
+    }
+    this.context.stroke();
+
+    this.context.restore();
+
+    line(this.options.bottomLine, 0, offsetY);
+    line(this.options.topLine, 0, height + offsetY + lineWidth / 2);
+
+    dot(this.options.startColor, this.options.startLine, offsetX + (points.length == 1 ? width / 2 : 0), y(0));
+    dot(this.options.endColor, this.options.endLine, offsetX + (points.length == 1 ? width / 2 : width), y(points.length - 1));
+    dot(this.options.minColor, this.options.minLine, minX + (points.length == 1 ? width / 2 : 0), y(points.indexOf(minValue)));
+    dot(this.options.maxColor, this.options.maxLine, maxX + (points.length == 1 ? width / 2 : 0), y(points.indexOf(maxValue)));
+  }
+
+  static init(element, options) {
+    return new Sparkline(element, options);
+  }
+
+  static draw(element, points, options) {
+    const sparkline = new Sparkline(element, options);
+    sparkline.draw(points);
+    return sparkline;
+  }
+}
+
+Sparkline.options = {
+  width: 100,
+  height: null,
+  lineColor: "black",
+  lineWidth: 1.5,
+  startColor: "transparent",
+  endColor: "black",
+  maxColor: "transparent",
+  minColor: "transparent",
+  minValue: null,
+  maxValue: null,
+  minMaxValue: null,
+  maxMinValue: null,
+  dotRadius: 2.5,
+  tooltip: null,
+  fillBelow: true,
+  fillLighten: 0.5,
+  startLine: false,
+  endLine: false,
+  minLine: false,
+  maxLine: false,
+  bottomLine: false,
+  topLine: false,
+  averageLine: false
+};
+
+function minmax(a, b, c) {
+  return Math.max(a, Math.min(b, c));
+}