https://kiranu.com/assets/admin/js/sparkline.js

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}));