LaravelTest
210 строк · 6.8 Кб
1(function (root, factory) {2if (typeof define === 'function' && define.amd) {3// AMD. Register as an anonymous module.4define(factory);5} else if (typeof exports === 'object') {6// Node. Does not work with strict CommonJS, but7// only CommonJS-like enviroments that support module.exports,8// like Node.9module.exports = factory();10} else {11// Browser globals (root is window)12root.Sparkline = factory();13}14}(window, function () {15function extend(specific, general) {16var obj = {};17for (var key in general) {18obj[key] = key in specific ? specific[key] : general[key];19}20return obj;21}22
23function Sparkline(element, options) {24this.element = element;25this.options = extend(options || {}, Sparkline.options);26
27init: {28this.element.innerHTML = "<canvas></canvas>";29this.canvas = this.element.firstChild;30this.context = this.canvas.getContext("2d");31this.ratio = window.devicePixelRatio || 1;32
33if (this.options.tooltip) {34this.canvas.style.position = "relative";35this.canvas.onmousemove = showTooltip.bind(this);36}37}38}39
40Sparkline.options = {41width: 100,42height: null,43lineColor: "black",44lineWidth: 1.5,45startColor: "transparent",46endColor: "black",47maxColor: "transparent",48minColor: "transparent",49minValue: null,50maxValue: null,51minMaxValue: null,52maxMinValue: null,53dotRadius: 2.5,54tooltip: null,55fillBelow: true,56fillLighten: 0.5,57startLine: false,58endLine: false,59minLine: false,60maxLine: false,61bottomLine: false,62topLine: false,63averageLine: false64};65
66Sparkline.init = function (element, options) {67return new Sparkline(element, options);68};69
70Sparkline.draw = function (element, points, options) {71var sparkline = new Sparkline(element, options);72sparkline.draw(points);73return sparkline;74}75
76function getY(minValue, maxValue, offsetY, height, index) {77var range = maxValue - minValue;78if (range == 0) {79return offsetY + height / 2;80} else {81return (offsetY + height) - ((this[index] - minValue) / range) * height;82}83}84
85function drawDot(radius, x1, x2, color, line, x, y) {86this.context.beginPath();87this.context.fillStyle = color;88this.context.arc(x, y, radius, 0, Math.PI * 2, false);89this.context.fill();90drawLine.call(this, x1, x2, line, x, y);91}92
93function drawLine(x1, x2, style, x, y){94if(!style) return;95
96this.context.save();97this.context.strokeStyle = style.color || 'black';98this.context.lineWidth = (style.width || 1) * this.ratio;99this.context.globalAlpha = style.alpha || 1;100this.context.beginPath();101this.context.moveTo(style.direction != 'right' ? x1 : x, y);102this.context.lineTo(style.direction != 'left' ? x2 : x, y);103this.context.stroke();104this.context.restore();105}106
107function showTooltip(e) {108var x = e.offsetX || e.layerX || 0;109var delta = ((this.options.width - this.options.dotRadius * 2) / (this.points.length - 1));110var index = minmax(0, Math.round((x - this.options.dotRadius) / delta), this.points.length - 1);111
112this.canvas.title = this.options.tooltip(this.points[index], index, this.points);113}114
115Sparkline.prototype.draw = function (points) {116
117points = points || [];118this.points = points;119
120this.canvas.width = this.options.width * this.ratio;121this.canvas.style.width = this.options.width + 'px';122
123var pxHeight = this.options.height || this.element.offsetHeight;124this.canvas.height = pxHeight * this.ratio;125this.canvas.style.height = pxHeight + 'px';126
127var lineWidth = this.options.lineWidth * this.ratio;128var offsetX = Math.max(this.options.dotRadius * this.ratio, lineWidth/2);129var offsetY = Math.max(this.options.dotRadius * this.ratio, lineWidth/2);130var width = this.canvas.width - offsetX * 2;131var height = this.canvas.height - offsetY * 2;132
133var minValue = Math.min.apply(Math, points);134var maxValue = Math.max.apply(Math, points);135var bottomValue = this.options.minValue != undefined ? this.options.minValue : Math.min(minValue, this.options.maxMinValue != undefined ? this.options.maxMinValue : minValue);136var topValue = this.options.maxValue != undefined ? this.options.maxValue : Math.max(maxValue, this.options.minMaxValue != undefined ? this.options.minMaxValue : maxValue);137var minX = offsetX;138var maxX = offsetX;139
140var x = offsetX;141var y = getY.bind(points, bottomValue, topValue, offsetY, height);142var delta = width / (points.length - 1);143
144var dot = drawDot.bind(this, this.options.dotRadius * this.ratio, offsetX, width + offsetX);145var line = drawLine.bind(this, offsetX, width + offsetX);146
147this.context.save();148
149this.context.strokeStyle = this.options.lineColor;150this.context.fillStyle = this.options.lineColor;151this.context.lineWidth = lineWidth;152this.context.lineCap = 'round';153this.context.lineJoin = 'round';154
155if(this.options.fillBelow && points.length > 1){156this.context.save();157this.context.beginPath();158this.context.moveTo(x, y(0));159for (var i = 1; i < points.length; i++) {160x += delta;161
162minX = points[i] == minValue ? x : minX;163maxX = points[i] == maxValue ? x : maxX;164
165this.context.lineTo(x, y(i));166}167this.context.lineTo(width+offsetX, height + offsetY + lineWidth/2);168this.context.lineTo(offsetX, height + offsetY + lineWidth/2);169this.context.fill();170if(this.options.fillLighten > 0){171this.context.fillStyle = 'white';172this.context.globalAlpha = this.options.fillLighten;173this.context.fill();174this.context.globalAlpha = 1;175}else if(this.options.fillLighten < 0){176this.context.fillStyle = 'black';177this.context.globalAlpha = -this.options.fillLighten;178this.context.fill();179}180this.context.restore();181}182
183x = offsetX;184this.context.beginPath();185this.context.moveTo(x, y(0));186for (var i = 1; i < points.length; i++) {187x += delta;188this.context.lineTo(x, y(i));189}190this.context.stroke();191
192this.context.restore();193
194line(this.options.bottomLine, 0, offsetY);195line(this.options.topLine, 0, height + offsetY+lineWidth/2);196
197dot(this.options.startColor, this.options.startLine, offsetX + (points.length == 1 ? width / 2 : 0), y(0));198dot(this.options.endColor, this.options.endLine, offsetX + (points.length == 1 ? width / 2 : width), y(points.length-1));199dot(this.options.minColor, this.options.minLine, minX + (points.length == 1 ? width / 2 : 0), y(points.indexOf(minValue)));200dot(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
205function minmax(a, b, c) {206return Math.max(a, Math.min(b, c));207}208
209return Sparkline;210}));211