LaravelTest

1
(function (root, factory) {
2
  if (typeof define === 'function' && define.amd) {
3
    // AMD. Register as an anonymous module.
4
    define(factory);
5
  } else if (typeof exports === 'object') {
6
    // Node. Does not work with strict CommonJS, but
7
    // only CommonJS-like enviroments that support module.exports,
8
    // like Node.
9
    module.exports = factory();
10
  } else {
11
    // Browser globals (root is window)
12
    root.Sparkline = factory();
13
  }
14
}(window, function () {
15
  function extend(specific, general) {
16
    var obj = {};
17
    for (var key in general) {
18
      obj[key] = key in specific ? specific[key] : general[key];
19
    }
20
    return obj;
21
  }
22

23
  function Sparkline(element, options) {
24
    this.element = element;
25
    this.options = extend(options || {}, Sparkline.options);
26

27
    init: {
28
      this.element.innerHTML = "<canvas></canvas>";
29
      this.canvas = this.element.firstChild;
30
      this.context = this.canvas.getContext("2d");
31
      this.ratio = window.devicePixelRatio || 1;
32

33
      if (this.options.tooltip) {
34
        this.canvas.style.position = "relative";
35
        this.canvas.onmousemove = showTooltip.bind(this);
36
      }
37
    }
38
  }
39

40
  Sparkline.options = {
41
    width: 100,
42
    height: null,
43
    lineColor: "black",
44
    lineWidth: 1.5,
45
    startColor: "transparent",
46
    endColor: "black",
47
    maxColor: "transparent",
48
    minColor: "transparent",
49
    minValue: null,
50
    maxValue: null,
51
    minMaxValue: null,
52
    maxMinValue: null,
53
    dotRadius: 2.5,
54
    tooltip: null,
55
    fillBelow: true,
56
    fillLighten: 0.5,
57
    startLine: false,
58
    endLine: false,
59
    minLine: false,
60
    maxLine: false,
61
    bottomLine: false,
62
    topLine: false,
63
    averageLine: false
64
  };
65

66
  Sparkline.init = function (element, options) {
67
    return new Sparkline(element, options);
68
  };
69

70
  Sparkline.draw = function (element, points, options) {
71
    var sparkline = new Sparkline(element, options);
72
    sparkline.draw(points);
73
    return sparkline;
74
  }
75

76
  function getY(minValue, maxValue, offsetY, height, index) {
77
    var range = maxValue - minValue;
78
    if (range == 0) {
79
      return offsetY + height / 2;
80
    } else {
81
      return (offsetY + height) - ((this[index] - minValue) / range) * height;
82
    }
83
  }
84

85
  function drawDot(radius, x1, x2, color, line, x, y) {
86
    this.context.beginPath();
87
    this.context.fillStyle = color;
88
    this.context.arc(x, y, radius, 0, Math.PI * 2, false);
89
    this.context.fill();
90
    drawLine.call(this, x1, x2, line, x, y);
91
  }
92

93
  function drawLine(x1, x2, style, x, y){
94
    if(!style) return;
95

96
    this.context.save();
97
    this.context.strokeStyle = style.color || 'black';
98
    this.context.lineWidth = (style.width || 1) * this.ratio;
99
    this.context.globalAlpha = style.alpha || 1;
100
    this.context.beginPath();
101
    this.context.moveTo(style.direction != 'right' ? x1 : x, y);
102
    this.context.lineTo(style.direction != 'left' ? x2 : x, y);
103
    this.context.stroke();
104
    this.context.restore();
105
  }
106

107
  function showTooltip(e) {
108
    var x = e.offsetX || e.layerX || 0;
109
    var delta = ((this.options.width - this.options.dotRadius * 2) / (this.points.length - 1));
110
    var index = minmax(0, Math.round((x - this.options.dotRadius) / delta), this.points.length - 1);
111

112
    this.canvas.title = this.options.tooltip(this.points[index], index, this.points);
113
  }
114

115
  Sparkline.prototype.draw = function (points) {
116

117
    points = points || [];
118
    this.points = points;
119

120
    this.canvas.width = this.options.width * this.ratio;
121
    this.canvas.style.width = this.options.width + 'px';
122

123
    var pxHeight = this.options.height || this.element.offsetHeight;
124
    this.canvas.height = pxHeight * this.ratio;
125
    this.canvas.style.height = pxHeight + 'px';
126

127
    var lineWidth = this.options.lineWidth * this.ratio;
128
    var offsetX = Math.max(this.options.dotRadius * this.ratio, lineWidth/2);
129
    var offsetY = Math.max(this.options.dotRadius * this.ratio, lineWidth/2);
130
    var width = this.canvas.width - offsetX * 2;
131
    var height = this.canvas.height - offsetY * 2;
132

133
    var minValue = Math.min.apply(Math, points);
134
    var maxValue = Math.max.apply(Math, points);
135
    var bottomValue = this.options.minValue != undefined ? this.options.minValue : Math.min(minValue, this.options.maxMinValue != undefined ? this.options.maxMinValue : minValue);
136
    var topValue = this.options.maxValue != undefined ? this.options.maxValue : Math.max(maxValue, this.options.minMaxValue != undefined ? this.options.minMaxValue : maxValue);
137
    var minX = offsetX;
138
    var maxX = offsetX;
139

140
    var x = offsetX;
141
    var y = getY.bind(points, bottomValue, topValue, offsetY, height);
142
    var delta = width / (points.length - 1);
143

144
    var dot = drawDot.bind(this, this.options.dotRadius * this.ratio, offsetX, width + offsetX);
145
    var line = drawLine.bind(this, offsetX, width + offsetX);
146

147
    this.context.save();
148

149
    this.context.strokeStyle = this.options.lineColor;
150
    this.context.fillStyle = this.options.lineColor;
151
    this.context.lineWidth = lineWidth;
152
    this.context.lineCap = 'round';
153
    this.context.lineJoin = 'round';
154

155
    if(this.options.fillBelow && points.length > 1){
156
      this.context.save();
157
      this.context.beginPath();
158
      this.context.moveTo(x, y(0));
159
      for (var i = 1; i < points.length; i++) {
160
        x += delta;
161

162
        minX = points[i] == minValue ? x : minX;
163
        maxX = points[i] == maxValue ? x : maxX;
164

165
        this.context.lineTo(x, y(i));
166
      }
167
      this.context.lineTo(width+offsetX, height + offsetY + lineWidth/2);
168
      this.context.lineTo(offsetX, height + offsetY + lineWidth/2);
169
      this.context.fill();
170
      if(this.options.fillLighten > 0){
171
        this.context.fillStyle = 'white';
172
        this.context.globalAlpha = this.options.fillLighten;
173
        this.context.fill();
174
        this.context.globalAlpha = 1;
175
      }else if(this.options.fillLighten < 0){
176
        this.context.fillStyle = 'black';
177
        this.context.globalAlpha = -this.options.fillLighten;
178
        this.context.fill();
179
      }
180
      this.context.restore();
181
    }
182

183
    x = offsetX;
184
    this.context.beginPath();
185
    this.context.moveTo(x, y(0));
186
    for (var i = 1; i < points.length; i++) {
187
      x += delta;
188
      this.context.lineTo(x, y(i));
189
    }
190
    this.context.stroke();
191

192
    this.context.restore();
193

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

197
    dot(this.options.startColor, this.options.startLine, offsetX + (points.length == 1 ? width / 2 : 0), y(0));
198
    dot(this.options.endColor, this.options.endLine, offsetX + (points.length == 1 ? width / 2 : width), y(points.length-1));
199
    dot(this.options.minColor, this.options.minLine, minX + (points.length == 1 ? width / 2 : 0), y(points.indexOf(minValue)));
200
    dot(this.options.maxColor, this.options.maxLine, maxX + (points.length == 1 ? width / 2 : 0), y(points.indexOf(maxValue)));
201

202
    //line(this.options.averageLine, )
203
  }
204

205
  function minmax(a, b, c) {
206
    return Math.max(a, Math.min(b, c));
207
  }
208

209
  return Sparkline;
210
}));
211