2016-02-12 07:16:43 +01:00
|
|
|
/*global window: false */
|
|
|
|
/*global document: false */
|
2016-02-12 04:30:53 +01:00
|
|
|
"use strict";
|
|
|
|
|
2016-02-14 02:12:26 +01:00
|
|
|
var color = require('chartjs-color');
|
2016-02-12 04:30:53 +01:00
|
|
|
|
2016-02-12 07:16:43 +01:00
|
|
|
module.exports = function(Chart) {
|
2016-02-14 23:06:00 +01:00
|
|
|
//Global Chart helpers object for utility methods and classes
|
|
|
|
var helpers = Chart.helpers = {};
|
|
|
|
|
|
|
|
//-- Basic js utility methods
|
|
|
|
helpers.each = function(loopable, callback, self, reverse) {
|
|
|
|
// Check to see if null or undefined firstly.
|
|
|
|
var i, len;
|
|
|
|
if (helpers.isArray(loopable)) {
|
|
|
|
len = loopable.length;
|
|
|
|
if (reverse) {
|
|
|
|
for (i = len - 1; i >= 0; i--) {
|
|
|
|
callback.call(self, loopable[i], i);
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
for (i = 0; i < len; i++) {
|
|
|
|
callback.call(self, loopable[i], i);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
} else if (typeof loopable === 'object') {
|
|
|
|
var keys = Object.keys(loopable);
|
|
|
|
len = keys.length;
|
|
|
|
for (i = 0; i < len; i++) {
|
|
|
|
callback.call(self, loopable[keys[i]], keys[i]);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
helpers.clone = function(obj) {
|
|
|
|
var objClone = {};
|
|
|
|
helpers.each(obj, function(value, key) {
|
2016-05-16 23:31:47 +02:00
|
|
|
if (helpers.isArray(value)) {
|
|
|
|
objClone[key] = value.slice(0);
|
|
|
|
} else if (typeof value === 'object' && value !== null) {
|
|
|
|
objClone[key] = helpers.clone(value);
|
|
|
|
} else {
|
|
|
|
objClone[key] = value;
|
2016-02-14 23:06:00 +01:00
|
|
|
}
|
|
|
|
});
|
|
|
|
return objClone;
|
|
|
|
};
|
|
|
|
helpers.extend = function(base) {
|
2016-06-05 22:40:29 +02:00
|
|
|
var setFn = function(value, key) { base[key] = value; };
|
|
|
|
for (var i = 1, ilen = arguments.length; i < ilen; i++) {
|
|
|
|
helpers.each(arguments[i], setFn);
|
2016-02-14 23:06:00 +01:00
|
|
|
}
|
|
|
|
return base;
|
|
|
|
};
|
|
|
|
// Need a special merge function to chart configs since they are now grouped
|
|
|
|
helpers.configMerge = function(_base) {
|
|
|
|
var base = helpers.clone(_base);
|
|
|
|
helpers.each(Array.prototype.slice.call(arguments, 1), function(extension) {
|
|
|
|
helpers.each(extension, function(value, key) {
|
2016-05-16 23:31:47 +02:00
|
|
|
if (key === 'scales') {
|
|
|
|
// Scale config merging is complex. Add out own function here for that
|
|
|
|
base[key] = helpers.scaleMerge(base.hasOwnProperty(key) ? base[key] : {}, value);
|
|
|
|
|
|
|
|
} else if (key === 'scale') {
|
|
|
|
// Used in polar area & radar charts since there is only one scale
|
|
|
|
base[key] = helpers.configMerge(base.hasOwnProperty(key) ? base[key] : {}, Chart.scaleService.getScaleDefaults(value.type), value);
|
|
|
|
} else if (base.hasOwnProperty(key) && helpers.isArray(base[key]) && helpers.isArray(value)) {
|
|
|
|
// In this case we have an array of objects replacing another array. Rather than doing a strict replace,
|
|
|
|
// merge. This allows easy scale option merging
|
|
|
|
var baseArray = base[key];
|
|
|
|
|
|
|
|
helpers.each(value, function(valueObj, index) {
|
|
|
|
|
|
|
|
if (index < baseArray.length) {
|
|
|
|
if (typeof baseArray[index] === 'object' && baseArray[index] !== null && typeof valueObj === 'object' && valueObj !== null) {
|
|
|
|
// Two objects are coming together. Do a merge of them.
|
|
|
|
baseArray[index] = helpers.configMerge(baseArray[index], valueObj);
|
2016-02-14 23:06:00 +01:00
|
|
|
} else {
|
2016-05-16 23:31:47 +02:00
|
|
|
// Just overwrite in this case since there is nothing to merge
|
|
|
|
baseArray[index] = valueObj;
|
2016-02-14 23:06:00 +01:00
|
|
|
}
|
2016-05-16 23:31:47 +02:00
|
|
|
} else {
|
|
|
|
baseArray.push(valueObj); // nothing to merge
|
|
|
|
}
|
|
|
|
});
|
2016-02-14 23:06:00 +01:00
|
|
|
|
2016-05-16 23:31:47 +02:00
|
|
|
} else if (base.hasOwnProperty(key) && typeof base[key] === "object" && base[key] !== null && typeof value === "object") {
|
|
|
|
// If we are overwriting an object with an object, do a merge of the properties.
|
|
|
|
base[key] = helpers.configMerge(base[key], value);
|
2016-02-14 23:06:00 +01:00
|
|
|
|
2016-05-16 23:31:47 +02:00
|
|
|
} else {
|
|
|
|
// can just overwrite the value in this case
|
|
|
|
base[key] = value;
|
2016-02-14 23:06:00 +01:00
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
return base;
|
|
|
|
};
|
|
|
|
helpers.scaleMerge = function(_base, extension) {
|
|
|
|
var base = helpers.clone(_base);
|
|
|
|
|
|
|
|
helpers.each(extension, function(value, key) {
|
2016-05-16 23:31:47 +02:00
|
|
|
if (key === 'xAxes' || key === 'yAxes') {
|
|
|
|
// These properties are arrays of items
|
|
|
|
if (base.hasOwnProperty(key)) {
|
|
|
|
helpers.each(value, function(valueObj, index) {
|
|
|
|
var axisType = helpers.getValueOrDefault(valueObj.type, key === 'xAxes' ? 'category' : 'linear');
|
|
|
|
var axisDefaults = Chart.scaleService.getScaleDefaults(axisType);
|
|
|
|
if (index >= base[key].length || !base[key][index].type) {
|
|
|
|
base[key].push(helpers.configMerge(axisDefaults, valueObj));
|
|
|
|
} else if (valueObj.type && valueObj.type !== base[key][index].type) {
|
|
|
|
// Type changed. Bring in the new defaults before we bring in valueObj so that valueObj can override the correct scale defaults
|
|
|
|
base[key][index] = helpers.configMerge(base[key][index], axisDefaults, valueObj);
|
|
|
|
} else {
|
|
|
|
// Type is the same
|
|
|
|
base[key][index] = helpers.configMerge(base[key][index], valueObj);
|
|
|
|
}
|
|
|
|
});
|
2016-02-14 23:06:00 +01:00
|
|
|
} else {
|
2016-05-16 23:31:47 +02:00
|
|
|
base[key] = [];
|
|
|
|
helpers.each(value, function(valueObj) {
|
|
|
|
var axisType = helpers.getValueOrDefault(valueObj.type, key === 'xAxes' ? 'category' : 'linear');
|
|
|
|
base[key].push(helpers.configMerge(Chart.scaleService.getScaleDefaults(axisType), valueObj));
|
|
|
|
});
|
2016-02-14 23:06:00 +01:00
|
|
|
}
|
2016-05-16 23:31:47 +02:00
|
|
|
} else if (base.hasOwnProperty(key) && typeof base[key] === "object" && base[key] !== null && typeof value === "object") {
|
|
|
|
// If we are overwriting an object with an object, do a merge of the properties.
|
|
|
|
base[key] = helpers.configMerge(base[key], value);
|
|
|
|
|
|
|
|
} else {
|
|
|
|
// can just overwrite the value in this case
|
|
|
|
base[key] = value;
|
2016-02-14 23:06:00 +01:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
return base;
|
|
|
|
};
|
|
|
|
helpers.getValueAtIndexOrDefault = function(value, index, defaultValue) {
|
|
|
|
if (value === undefined || value === null) {
|
|
|
|
return defaultValue;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (helpers.isArray(value)) {
|
|
|
|
return index < value.length ? value[index] : defaultValue;
|
|
|
|
}
|
|
|
|
|
|
|
|
return value;
|
|
|
|
};
|
|
|
|
helpers.getValueOrDefault = function(value, defaultValue) {
|
|
|
|
return value === undefined ? defaultValue : value;
|
|
|
|
};
|
2016-06-05 22:40:29 +02:00
|
|
|
helpers.indexOf = Array.prototype.indexOf?
|
|
|
|
function(array, item) { return array.indexOf(item); } :
|
|
|
|
function(array, item) {
|
|
|
|
for (var i = 0, ilen = array.length; i < ilen; ++i) {
|
|
|
|
if (array[i] === item) {
|
2016-02-14 23:06:00 +01:00
|
|
|
return i;
|
2016-06-05 22:40:29 +02:00
|
|
|
}
|
2016-02-14 23:06:00 +01:00
|
|
|
}
|
|
|
|
return -1;
|
2016-06-05 22:40:29 +02:00
|
|
|
};
|
2016-02-14 23:06:00 +01:00
|
|
|
helpers.where = function(collection, filterCallback) {
|
2016-05-14 21:59:40 +02:00
|
|
|
if (helpers.isArray(collection) && Array.prototype.filter) {
|
|
|
|
return collection.filter(filterCallback);
|
|
|
|
} else {
|
|
|
|
var filtered = [];
|
2016-02-14 23:06:00 +01:00
|
|
|
|
2016-05-14 21:59:40 +02:00
|
|
|
helpers.each(collection, function(item) {
|
|
|
|
if (filterCallback(item)) {
|
|
|
|
filtered.push(item);
|
|
|
|
}
|
|
|
|
});
|
2016-02-14 23:06:00 +01:00
|
|
|
|
2016-05-14 21:59:40 +02:00
|
|
|
return filtered;
|
|
|
|
}
|
2016-02-14 23:06:00 +01:00
|
|
|
};
|
2016-06-05 22:40:29 +02:00
|
|
|
helpers.findIndex = Array.prototype.findIndex?
|
|
|
|
function(array, callback, scope) { return array.findIndex(callback, scope); } :
|
|
|
|
function(array, callback, scope) {
|
|
|
|
scope = scope === undefined? array : scope;
|
|
|
|
for (var i = 0, ilen = array.length; i < ilen; ++i) {
|
|
|
|
if (callback.call(scope, array[i], i, array)) {
|
|
|
|
return i;
|
2016-03-13 17:24:33 +01:00
|
|
|
}
|
|
|
|
}
|
2016-06-05 22:40:29 +02:00
|
|
|
return -1;
|
|
|
|
};
|
2016-02-14 23:06:00 +01:00
|
|
|
helpers.findNextWhere = function(arrayToSearch, filterCallback, startIndex) {
|
|
|
|
// Default to start of the array
|
|
|
|
if (startIndex === undefined || startIndex === null) {
|
|
|
|
startIndex = -1;
|
|
|
|
}
|
|
|
|
for (var i = startIndex + 1; i < arrayToSearch.length; i++) {
|
|
|
|
var currentItem = arrayToSearch[i];
|
|
|
|
if (filterCallback(currentItem)) {
|
|
|
|
return currentItem;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
helpers.findPreviousWhere = function(arrayToSearch, filterCallback, startIndex) {
|
|
|
|
// Default to end of the array
|
|
|
|
if (startIndex === undefined || startIndex === null) {
|
|
|
|
startIndex = arrayToSearch.length;
|
|
|
|
}
|
|
|
|
for (var i = startIndex - 1; i >= 0; i--) {
|
|
|
|
var currentItem = arrayToSearch[i];
|
|
|
|
if (filterCallback(currentItem)) {
|
|
|
|
return currentItem;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
helpers.inherits = function(extensions) {
|
|
|
|
//Basic javascript inheritance based on the model created in Backbone.js
|
|
|
|
var parent = this;
|
|
|
|
var ChartElement = (extensions && extensions.hasOwnProperty("constructor")) ? extensions.constructor : function() {
|
|
|
|
return parent.apply(this, arguments);
|
|
|
|
};
|
|
|
|
|
|
|
|
var Surrogate = function() {
|
|
|
|
this.constructor = ChartElement;
|
|
|
|
};
|
|
|
|
Surrogate.prototype = parent.prototype;
|
|
|
|
ChartElement.prototype = new Surrogate();
|
|
|
|
|
|
|
|
ChartElement.extend = helpers.inherits;
|
|
|
|
|
|
|
|
if (extensions) {
|
|
|
|
helpers.extend(ChartElement.prototype, extensions);
|
|
|
|
}
|
|
|
|
|
|
|
|
ChartElement.__super__ = parent.prototype;
|
|
|
|
|
|
|
|
return ChartElement;
|
|
|
|
};
|
|
|
|
helpers.noop = function() {};
|
|
|
|
helpers.uid = (function() {
|
|
|
|
var id = 0;
|
|
|
|
return function() {
|
2016-04-21 17:11:52 +02:00
|
|
|
return id++;
|
2016-02-14 23:06:00 +01:00
|
|
|
};
|
|
|
|
})();
|
|
|
|
//-- Math methods
|
|
|
|
helpers.isNumber = function(n) {
|
|
|
|
return !isNaN(parseFloat(n)) && isFinite(n);
|
|
|
|
};
|
|
|
|
helpers.almostEquals = function(x, y, epsilon) {
|
|
|
|
return Math.abs(x - y) < epsilon;
|
|
|
|
};
|
|
|
|
helpers.max = function(array) {
|
|
|
|
return array.reduce(function(max, value) {
|
|
|
|
if (!isNaN(value)) {
|
|
|
|
return Math.max(max, value);
|
|
|
|
} else {
|
|
|
|
return max;
|
|
|
|
}
|
|
|
|
}, Number.NEGATIVE_INFINITY);
|
|
|
|
};
|
|
|
|
helpers.min = function(array) {
|
|
|
|
return array.reduce(function(min, value) {
|
|
|
|
if (!isNaN(value)) {
|
|
|
|
return Math.min(min, value);
|
|
|
|
} else {
|
|
|
|
return min;
|
|
|
|
}
|
|
|
|
}, Number.POSITIVE_INFINITY);
|
|
|
|
};
|
2016-06-05 22:40:29 +02:00
|
|
|
helpers.sign = Math.sign?
|
|
|
|
function(x) { return Math.sign(x); } :
|
|
|
|
function(x) {
|
2016-02-14 23:06:00 +01:00
|
|
|
x = +x; // convert to a number
|
|
|
|
if (x === 0 || isNaN(x)) {
|
|
|
|
return x;
|
|
|
|
}
|
|
|
|
return x > 0 ? 1 : -1;
|
2016-06-05 22:40:29 +02:00
|
|
|
};
|
|
|
|
helpers.log10 = Math.log10?
|
|
|
|
function(x) { return Math.log10(x); } :
|
|
|
|
function(x) {
|
2016-02-14 23:06:00 +01:00
|
|
|
return Math.log(x) / Math.LN10;
|
2016-06-05 22:40:29 +02:00
|
|
|
};
|
2016-02-14 23:06:00 +01:00
|
|
|
helpers.toRadians = function(degrees) {
|
|
|
|
return degrees * (Math.PI / 180);
|
|
|
|
};
|
|
|
|
helpers.toDegrees = function(radians) {
|
|
|
|
return radians * (180 / Math.PI);
|
|
|
|
};
|
|
|
|
// Gets the angle from vertical upright to the point about a centre.
|
|
|
|
helpers.getAngleFromPoint = function(centrePoint, anglePoint) {
|
|
|
|
var distanceFromXCenter = anglePoint.x - centrePoint.x,
|
|
|
|
distanceFromYCenter = anglePoint.y - centrePoint.y,
|
|
|
|
radialDistanceFromCenter = Math.sqrt(distanceFromXCenter * distanceFromXCenter + distanceFromYCenter * distanceFromYCenter);
|
|
|
|
|
|
|
|
var angle = Math.atan2(distanceFromYCenter, distanceFromXCenter);
|
|
|
|
|
|
|
|
if (angle < (-0.5 * Math.PI)) {
|
|
|
|
angle += 2.0 * Math.PI; // make sure the returned angle is in the range of (-PI/2, 3PI/2]
|
|
|
|
}
|
|
|
|
|
|
|
|
return {
|
|
|
|
angle: angle,
|
|
|
|
distance: radialDistanceFromCenter
|
|
|
|
};
|
|
|
|
};
|
|
|
|
helpers.aliasPixel = function(pixelWidth) {
|
|
|
|
return (pixelWidth % 2 === 0) ? 0 : 0.5;
|
|
|
|
};
|
|
|
|
helpers.splineCurve = function(firstPoint, middlePoint, afterPoint, t) {
|
|
|
|
//Props to Rob Spencer at scaled innovation for his post on splining between points
|
|
|
|
//http://scaledinnovation.com/analytics/splines/aboutSplines.html
|
|
|
|
|
|
|
|
// This function must also respect "skipped" points
|
|
|
|
|
|
|
|
var previous = firstPoint.skip ? middlePoint : firstPoint,
|
|
|
|
current = middlePoint,
|
|
|
|
next = afterPoint.skip ? middlePoint : afterPoint;
|
|
|
|
|
|
|
|
var d01 = Math.sqrt(Math.pow(current.x - previous.x, 2) + Math.pow(current.y - previous.y, 2));
|
|
|
|
var d12 = Math.sqrt(Math.pow(next.x - current.x, 2) + Math.pow(next.y - current.y, 2));
|
|
|
|
|
|
|
|
var s01 = d01 / (d01 + d12);
|
|
|
|
var s12 = d12 / (d01 + d12);
|
|
|
|
|
|
|
|
// If all points are the same, s01 & s02 will be inf
|
|
|
|
s01 = isNaN(s01) ? 0 : s01;
|
|
|
|
s12 = isNaN(s12) ? 0 : s12;
|
|
|
|
|
|
|
|
var fa = t * s01; // scaling factor for triangle Ta
|
|
|
|
var fb = t * s12;
|
|
|
|
|
|
|
|
return {
|
|
|
|
previous: {
|
|
|
|
x: current.x - fa * (next.x - previous.x),
|
|
|
|
y: current.y - fa * (next.y - previous.y)
|
|
|
|
},
|
|
|
|
next: {
|
|
|
|
x: current.x + fb * (next.x - previous.x),
|
|
|
|
y: current.y + fb * (next.y - previous.y)
|
|
|
|
}
|
|
|
|
};
|
|
|
|
};
|
2016-08-08 14:01:30 +02:00
|
|
|
helpers.EPSILON = Number.EPSILON || 1e-14;
|
|
|
|
helpers.splineCurveMonotone = function(points) {
|
|
|
|
// This function calculates Bézier control points in a similar way than |splineCurve|,
|
|
|
|
// but preserves monotonicity of the provided data and ensures no local extremums are added
|
|
|
|
// between the dataset discrete points due to the interpolation.
|
|
|
|
// See : https://en.wikipedia.org/wiki/Monotone_cubic_interpolation
|
|
|
|
|
|
|
|
var pointsWithTangents = (points || []).map(function(point) {
|
|
|
|
return {
|
|
|
|
model: point._model,
|
|
|
|
deltaK: 0,
|
|
|
|
mK: 0
|
|
|
|
};
|
|
|
|
});
|
|
|
|
|
|
|
|
// Calculate slopes (deltaK) and initialize tangents (mK)
|
|
|
|
var pointsLen = pointsWithTangents.length;
|
|
|
|
var i, pointBefore, pointCurrent, pointAfter;
|
|
|
|
for (i = 0; i < pointsLen; ++i) {
|
|
|
|
pointCurrent = pointsWithTangents[i];
|
|
|
|
if (pointCurrent.model.skip) continue;
|
|
|
|
pointBefore = i > 0 ? pointsWithTangents[i - 1] : null;
|
|
|
|
pointAfter = i < pointsLen - 1 ? pointsWithTangents[i + 1] : null;
|
|
|
|
if (pointAfter && !pointAfter.model.skip) {
|
|
|
|
pointCurrent.deltaK = (pointAfter.model.y - pointCurrent.model.y) / (pointAfter.model.x - pointCurrent.model.x);
|
|
|
|
}
|
|
|
|
if (!pointBefore || pointBefore.model.skip) pointCurrent.mK = pointCurrent.deltaK;
|
|
|
|
else if (!pointAfter || pointAfter.model.skip) pointCurrent.mK = pointBefore.deltaK;
|
|
|
|
else if (Math.sign(pointBefore.deltaK) != Math.sign(pointCurrent.deltaK)) pointCurrent.mK = 0;
|
|
|
|
else pointCurrent.mK = (pointBefore.deltaK + pointCurrent.deltaK) / 2;
|
|
|
|
}
|
|
|
|
|
|
|
|
// Adjust tangents to ensure monotonic properties
|
|
|
|
var alphaK, betaK, tauK, squaredMagnitude;
|
|
|
|
for (i = 0; i < pointsLen - 1; ++i) {
|
|
|
|
pointCurrent = pointsWithTangents[i];
|
|
|
|
pointAfter = pointsWithTangents[i + 1];
|
2016-08-08 15:56:53 +02:00
|
|
|
if (pointCurrent.model.skip || pointAfter.model.skip) continue;
|
2016-08-08 14:01:30 +02:00
|
|
|
if (helpers.almostEquals(pointCurrent.deltaK, 0, this.EPSILON))
|
|
|
|
{
|
|
|
|
pointCurrent.mK = pointAfter.mK = 0;
|
|
|
|
continue;
|
|
|
|
}
|
|
|
|
alphaK = pointCurrent.mK / pointCurrent.deltaK;
|
|
|
|
betaK = pointAfter.mK / pointCurrent.deltaK;
|
|
|
|
squaredMagnitude = Math.pow(alphaK, 2) + Math.pow(betaK, 2);
|
|
|
|
if (squaredMagnitude <= 9) continue;
|
|
|
|
tauK = 3 / Math.sqrt(squaredMagnitude);
|
|
|
|
pointCurrent.mK = alphaK * tauK * pointCurrent.deltaK;
|
|
|
|
pointAfter.mK = betaK * tauK * pointCurrent.deltaK;
|
|
|
|
}
|
|
|
|
|
|
|
|
// Compute control points
|
|
|
|
var deltaX;
|
|
|
|
for (i = 0; i < pointsLen; ++i) {
|
|
|
|
pointCurrent = pointsWithTangents[i];
|
|
|
|
if (pointCurrent.model.skip) continue;
|
|
|
|
pointBefore = i > 0 ? pointsWithTangents[i - 1] : null;
|
|
|
|
pointAfter = i < pointsLen - 1 ? pointsWithTangents[i + 1] : null;
|
|
|
|
if (pointBefore && !pointBefore.model.skip) {
|
|
|
|
deltaX = (pointCurrent.model.x - pointBefore.model.x) / 3;
|
|
|
|
pointCurrent.model.controlPointPreviousX = pointCurrent.model.x - deltaX;
|
|
|
|
pointCurrent.model.controlPointPreviousY = pointCurrent.model.y - deltaX * pointCurrent.mK;
|
|
|
|
}
|
|
|
|
if (pointAfter && !pointAfter.model.skip) {
|
|
|
|
deltaX = (pointAfter.model.x - pointCurrent.model.x) / 3;
|
|
|
|
pointCurrent.model.controlPointNextX = pointCurrent.model.x + deltaX;
|
|
|
|
pointCurrent.model.controlPointNextY = pointCurrent.model.y + deltaX * pointCurrent.mK;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
2016-02-14 23:06:00 +01:00
|
|
|
helpers.nextItem = function(collection, index, loop) {
|
|
|
|
if (loop) {
|
|
|
|
return index >= collection.length - 1 ? collection[0] : collection[index + 1];
|
|
|
|
}
|
|
|
|
|
|
|
|
return index >= collection.length - 1 ? collection[collection.length - 1] : collection[index + 1];
|
|
|
|
};
|
|
|
|
helpers.previousItem = function(collection, index, loop) {
|
|
|
|
if (loop) {
|
|
|
|
return index <= 0 ? collection[collection.length - 1] : collection[index - 1];
|
|
|
|
}
|
|
|
|
return index <= 0 ? collection[0] : collection[index - 1];
|
|
|
|
};
|
|
|
|
// Implementation of the nice number algorithm used in determining where axis labels will go
|
|
|
|
helpers.niceNum = function(range, round) {
|
|
|
|
var exponent = Math.floor(helpers.log10(range));
|
|
|
|
var fraction = range / Math.pow(10, exponent);
|
|
|
|
var niceFraction;
|
|
|
|
|
|
|
|
if (round) {
|
|
|
|
if (fraction < 1.5) {
|
|
|
|
niceFraction = 1;
|
|
|
|
} else if (fraction < 3) {
|
|
|
|
niceFraction = 2;
|
|
|
|
} else if (fraction < 7) {
|
|
|
|
niceFraction = 5;
|
|
|
|
} else {
|
|
|
|
niceFraction = 10;
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
if (fraction <= 1.0) {
|
|
|
|
niceFraction = 1;
|
|
|
|
} else if (fraction <= 2) {
|
|
|
|
niceFraction = 2;
|
|
|
|
} else if (fraction <= 5) {
|
|
|
|
niceFraction = 5;
|
|
|
|
} else {
|
|
|
|
niceFraction = 10;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
return niceFraction * Math.pow(10, exponent);
|
|
|
|
};
|
|
|
|
//Easing functions adapted from Robert Penner's easing equations
|
|
|
|
//http://www.robertpenner.com/easing/
|
|
|
|
var easingEffects = helpers.easingEffects = {
|
|
|
|
linear: function(t) {
|
|
|
|
return t;
|
|
|
|
},
|
|
|
|
easeInQuad: function(t) {
|
|
|
|
return t * t;
|
|
|
|
},
|
|
|
|
easeOutQuad: function(t) {
|
|
|
|
return -1 * t * (t - 2);
|
|
|
|
},
|
|
|
|
easeInOutQuad: function(t) {
|
|
|
|
if ((t /= 1 / 2) < 1) {
|
|
|
|
return 1 / 2 * t * t;
|
|
|
|
}
|
|
|
|
return -1 / 2 * ((--t) * (t - 2) - 1);
|
|
|
|
},
|
|
|
|
easeInCubic: function(t) {
|
|
|
|
return t * t * t;
|
|
|
|
},
|
|
|
|
easeOutCubic: function(t) {
|
|
|
|
return 1 * ((t = t / 1 - 1) * t * t + 1);
|
|
|
|
},
|
|
|
|
easeInOutCubic: function(t) {
|
|
|
|
if ((t /= 1 / 2) < 1) {
|
|
|
|
return 1 / 2 * t * t * t;
|
|
|
|
}
|
|
|
|
return 1 / 2 * ((t -= 2) * t * t + 2);
|
|
|
|
},
|
|
|
|
easeInQuart: function(t) {
|
|
|
|
return t * t * t * t;
|
|
|
|
},
|
|
|
|
easeOutQuart: function(t) {
|
|
|
|
return -1 * ((t = t / 1 - 1) * t * t * t - 1);
|
|
|
|
},
|
|
|
|
easeInOutQuart: function(t) {
|
|
|
|
if ((t /= 1 / 2) < 1) {
|
|
|
|
return 1 / 2 * t * t * t * t;
|
|
|
|
}
|
|
|
|
return -1 / 2 * ((t -= 2) * t * t * t - 2);
|
|
|
|
},
|
|
|
|
easeInQuint: function(t) {
|
|
|
|
return 1 * (t /= 1) * t * t * t * t;
|
|
|
|
},
|
|
|
|
easeOutQuint: function(t) {
|
|
|
|
return 1 * ((t = t / 1 - 1) * t * t * t * t + 1);
|
|
|
|
},
|
|
|
|
easeInOutQuint: function(t) {
|
|
|
|
if ((t /= 1 / 2) < 1) {
|
|
|
|
return 1 / 2 * t * t * t * t * t;
|
|
|
|
}
|
|
|
|
return 1 / 2 * ((t -= 2) * t * t * t * t + 2);
|
|
|
|
},
|
|
|
|
easeInSine: function(t) {
|
|
|
|
return -1 * Math.cos(t / 1 * (Math.PI / 2)) + 1;
|
|
|
|
},
|
|
|
|
easeOutSine: function(t) {
|
|
|
|
return 1 * Math.sin(t / 1 * (Math.PI / 2));
|
|
|
|
},
|
|
|
|
easeInOutSine: function(t) {
|
|
|
|
return -1 / 2 * (Math.cos(Math.PI * t / 1) - 1);
|
|
|
|
},
|
|
|
|
easeInExpo: function(t) {
|
|
|
|
return (t === 0) ? 1 : 1 * Math.pow(2, 10 * (t / 1 - 1));
|
|
|
|
},
|
|
|
|
easeOutExpo: function(t) {
|
|
|
|
return (t === 1) ? 1 : 1 * (-Math.pow(2, -10 * t / 1) + 1);
|
|
|
|
},
|
|
|
|
easeInOutExpo: function(t) {
|
|
|
|
if (t === 0) {
|
|
|
|
return 0;
|
|
|
|
}
|
|
|
|
if (t === 1) {
|
|
|
|
return 1;
|
|
|
|
}
|
|
|
|
if ((t /= 1 / 2) < 1) {
|
|
|
|
return 1 / 2 * Math.pow(2, 10 * (t - 1));
|
|
|
|
}
|
|
|
|
return 1 / 2 * (-Math.pow(2, -10 * --t) + 2);
|
|
|
|
},
|
|
|
|
easeInCirc: function(t) {
|
|
|
|
if (t >= 1) {
|
|
|
|
return t;
|
|
|
|
}
|
|
|
|
return -1 * (Math.sqrt(1 - (t /= 1) * t) - 1);
|
|
|
|
},
|
|
|
|
easeOutCirc: function(t) {
|
|
|
|
return 1 * Math.sqrt(1 - (t = t / 1 - 1) * t);
|
|
|
|
},
|
|
|
|
easeInOutCirc: function(t) {
|
|
|
|
if ((t /= 1 / 2) < 1) {
|
|
|
|
return -1 / 2 * (Math.sqrt(1 - t * t) - 1);
|
|
|
|
}
|
|
|
|
return 1 / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1);
|
|
|
|
},
|
|
|
|
easeInElastic: function(t) {
|
|
|
|
var s = 1.70158;
|
|
|
|
var p = 0;
|
|
|
|
var a = 1;
|
|
|
|
if (t === 0) {
|
|
|
|
return 0;
|
|
|
|
}
|
|
|
|
if ((t /= 1) === 1) {
|
|
|
|
return 1;
|
|
|
|
}
|
|
|
|
if (!p) {
|
|
|
|
p = 1 * 0.3;
|
|
|
|
}
|
|
|
|
if (a < Math.abs(1)) {
|
|
|
|
a = 1;
|
|
|
|
s = p / 4;
|
|
|
|
} else {
|
|
|
|
s = p / (2 * Math.PI) * Math.asin(1 / a);
|
|
|
|
}
|
|
|
|
return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * 1 - s) * (2 * Math.PI) / p));
|
|
|
|
},
|
|
|
|
easeOutElastic: function(t) {
|
|
|
|
var s = 1.70158;
|
|
|
|
var p = 0;
|
|
|
|
var a = 1;
|
|
|
|
if (t === 0) {
|
|
|
|
return 0;
|
|
|
|
}
|
|
|
|
if ((t /= 1) === 1) {
|
|
|
|
return 1;
|
|
|
|
}
|
|
|
|
if (!p) {
|
|
|
|
p = 1 * 0.3;
|
|
|
|
}
|
|
|
|
if (a < Math.abs(1)) {
|
|
|
|
a = 1;
|
|
|
|
s = p / 4;
|
|
|
|
} else {
|
|
|
|
s = p / (2 * Math.PI) * Math.asin(1 / a);
|
|
|
|
}
|
|
|
|
return a * Math.pow(2, -10 * t) * Math.sin((t * 1 - s) * (2 * Math.PI) / p) + 1;
|
|
|
|
},
|
|
|
|
easeInOutElastic: function(t) {
|
|
|
|
var s = 1.70158;
|
|
|
|
var p = 0;
|
|
|
|
var a = 1;
|
|
|
|
if (t === 0) {
|
|
|
|
return 0;
|
|
|
|
}
|
|
|
|
if ((t /= 1 / 2) === 2) {
|
|
|
|
return 1;
|
|
|
|
}
|
|
|
|
if (!p) {
|
|
|
|
p = 1 * (0.3 * 1.5);
|
|
|
|
}
|
|
|
|
if (a < Math.abs(1)) {
|
|
|
|
a = 1;
|
|
|
|
s = p / 4;
|
|
|
|
} else {
|
|
|
|
s = p / (2 * Math.PI) * Math.asin(1 / a);
|
|
|
|
}
|
|
|
|
if (t < 1) {
|
|
|
|
return -0.5 * (a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * 1 - s) * (2 * Math.PI) / p));
|
|
|
|
}
|
|
|
|
return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * 1 - s) * (2 * Math.PI) / p) * 0.5 + 1;
|
|
|
|
},
|
|
|
|
easeInBack: function(t) {
|
|
|
|
var s = 1.70158;
|
|
|
|
return 1 * (t /= 1) * t * ((s + 1) * t - s);
|
|
|
|
},
|
|
|
|
easeOutBack: function(t) {
|
|
|
|
var s = 1.70158;
|
|
|
|
return 1 * ((t = t / 1 - 1) * t * ((s + 1) * t + s) + 1);
|
|
|
|
},
|
|
|
|
easeInOutBack: function(t) {
|
|
|
|
var s = 1.70158;
|
|
|
|
if ((t /= 1 / 2) < 1) {
|
|
|
|
return 1 / 2 * (t * t * (((s *= (1.525)) + 1) * t - s));
|
|
|
|
}
|
|
|
|
return 1 / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2);
|
|
|
|
},
|
|
|
|
easeInBounce: function(t) {
|
|
|
|
return 1 - easingEffects.easeOutBounce(1 - t);
|
|
|
|
},
|
|
|
|
easeOutBounce: function(t) {
|
|
|
|
if ((t /= 1) < (1 / 2.75)) {
|
|
|
|
return 1 * (7.5625 * t * t);
|
|
|
|
} else if (t < (2 / 2.75)) {
|
|
|
|
return 1 * (7.5625 * (t -= (1.5 / 2.75)) * t + 0.75);
|
|
|
|
} else if (t < (2.5 / 2.75)) {
|
|
|
|
return 1 * (7.5625 * (t -= (2.25 / 2.75)) * t + 0.9375);
|
|
|
|
} else {
|
|
|
|
return 1 * (7.5625 * (t -= (2.625 / 2.75)) * t + 0.984375);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
easeInOutBounce: function(t) {
|
|
|
|
if (t < 1 / 2) {
|
|
|
|
return easingEffects.easeInBounce(t * 2) * 0.5;
|
|
|
|
}
|
|
|
|
return easingEffects.easeOutBounce(t * 2 - 1) * 0.5 + 1 * 0.5;
|
|
|
|
}
|
|
|
|
};
|
|
|
|
//Request animation polyfill - http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
|
|
|
|
helpers.requestAnimFrame = (function() {
|
|
|
|
return window.requestAnimationFrame ||
|
|
|
|
window.webkitRequestAnimationFrame ||
|
|
|
|
window.mozRequestAnimationFrame ||
|
|
|
|
window.oRequestAnimationFrame ||
|
|
|
|
window.msRequestAnimationFrame ||
|
|
|
|
function(callback) {
|
|
|
|
return window.setTimeout(callback, 1000 / 60);
|
|
|
|
};
|
|
|
|
})();
|
|
|
|
helpers.cancelAnimFrame = (function() {
|
|
|
|
return window.cancelAnimationFrame ||
|
|
|
|
window.webkitCancelAnimationFrame ||
|
|
|
|
window.mozCancelAnimationFrame ||
|
|
|
|
window.oCancelAnimationFrame ||
|
|
|
|
window.msCancelAnimationFrame ||
|
|
|
|
function(callback) {
|
|
|
|
return window.clearTimeout(callback, 1000 / 60);
|
|
|
|
};
|
|
|
|
})();
|
|
|
|
//-- DOM methods
|
|
|
|
helpers.getRelativePosition = function(evt, chart) {
|
|
|
|
var mouseX, mouseY;
|
|
|
|
var e = evt.originalEvent || evt,
|
|
|
|
canvas = evt.currentTarget || evt.srcElement,
|
|
|
|
boundingRect = canvas.getBoundingClientRect();
|
|
|
|
|
2016-05-14 21:59:40 +02:00
|
|
|
var touches = e.touches;
|
|
|
|
if (touches && touches.length > 0) {
|
|
|
|
mouseX = touches[0].clientX;
|
|
|
|
mouseY = touches[0].clientY;
|
2016-02-14 23:06:00 +01:00
|
|
|
|
|
|
|
} else {
|
|
|
|
mouseX = e.clientX;
|
|
|
|
mouseY = e.clientY;
|
|
|
|
}
|
|
|
|
|
|
|
|
// Scale mouse coordinates into canvas coordinates
|
|
|
|
// by following the pattern laid out by 'jerryj' in the comments of
|
|
|
|
// http://www.html5canvastutorials.com/advanced/html5-canvas-mouse-coordinates/
|
2016-02-28 21:32:15 +01:00
|
|
|
var paddingLeft = parseFloat(helpers.getStyle(canvas, 'padding-left'));
|
|
|
|
var paddingTop = parseFloat(helpers.getStyle(canvas, 'padding-top'));
|
|
|
|
var paddingRight = parseFloat(helpers.getStyle(canvas, 'padding-right'));
|
|
|
|
var paddingBottom = parseFloat(helpers.getStyle(canvas, 'padding-bottom'));
|
|
|
|
var width = boundingRect.right - boundingRect.left - paddingLeft - paddingRight;
|
|
|
|
var height = boundingRect.bottom - boundingRect.top - paddingTop - paddingBottom;
|
2016-02-14 23:06:00 +01:00
|
|
|
|
|
|
|
// We divide by the current device pixel ratio, because the canvas is scaled up by that amount in each direction. However
|
|
|
|
// the backend model is in unscaled coordinates. Since we are going to deal with our model coordinates, we go back here
|
2016-02-28 21:32:15 +01:00
|
|
|
mouseX = Math.round((mouseX - boundingRect.left - paddingLeft) / (width) * canvas.width / chart.currentDevicePixelRatio);
|
|
|
|
mouseY = Math.round((mouseY - boundingRect.top - paddingTop) / (height) * canvas.height / chart.currentDevicePixelRatio);
|
2016-02-14 23:06:00 +01:00
|
|
|
|
|
|
|
return {
|
|
|
|
x: mouseX,
|
|
|
|
y: mouseY
|
|
|
|
};
|
|
|
|
|
|
|
|
};
|
|
|
|
helpers.addEvent = function(node, eventType, method) {
|
|
|
|
if (node.addEventListener) {
|
|
|
|
node.addEventListener(eventType, method);
|
|
|
|
} else if (node.attachEvent) {
|
|
|
|
node.attachEvent("on" + eventType, method);
|
|
|
|
} else {
|
|
|
|
node["on" + eventType] = method;
|
|
|
|
}
|
|
|
|
};
|
|
|
|
helpers.removeEvent = function(node, eventType, handler) {
|
|
|
|
if (node.removeEventListener) {
|
|
|
|
node.removeEventListener(eventType, handler, false);
|
|
|
|
} else if (node.detachEvent) {
|
|
|
|
node.detachEvent("on" + eventType, handler);
|
|
|
|
} else {
|
|
|
|
node["on" + eventType] = helpers.noop;
|
|
|
|
}
|
|
|
|
};
|
|
|
|
helpers.bindEvents = function(chartInstance, arrayOfEvents, handler) {
|
|
|
|
// Create the events object if it's not already present
|
2016-05-14 21:59:40 +02:00
|
|
|
var events = chartInstance.events = chartInstance.events || {};
|
2016-02-14 23:06:00 +01:00
|
|
|
|
|
|
|
helpers.each(arrayOfEvents, function(eventName) {
|
2016-05-14 21:59:40 +02:00
|
|
|
events[eventName] = function() {
|
2016-02-14 23:06:00 +01:00
|
|
|
handler.apply(chartInstance, arguments);
|
|
|
|
};
|
2016-05-14 21:59:40 +02:00
|
|
|
helpers.addEvent(chartInstance.chart.canvas, eventName, events[eventName]);
|
2016-02-14 23:06:00 +01:00
|
|
|
});
|
|
|
|
};
|
|
|
|
helpers.unbindEvents = function(chartInstance, arrayOfEvents) {
|
2016-05-14 21:59:40 +02:00
|
|
|
var canvas = chartInstance.chart.canvas;
|
2016-02-14 23:06:00 +01:00
|
|
|
helpers.each(arrayOfEvents, function(handler, eventName) {
|
2016-05-14 21:59:40 +02:00
|
|
|
helpers.removeEvent(canvas, eventName, handler);
|
2016-02-14 23:06:00 +01:00
|
|
|
});
|
|
|
|
};
|
2016-04-02 05:11:01 +02:00
|
|
|
|
|
|
|
// Private helper function to convert max-width/max-height values that may be percentages into a number
|
2016-04-02 15:19:33 +02:00
|
|
|
function parseMaxStyle(styleValue, node, parentProperty) {
|
2016-04-02 05:11:01 +02:00
|
|
|
var valueInPixels;
|
|
|
|
if (typeof(styleValue) === 'string') {
|
|
|
|
valueInPixels = parseInt(styleValue, 10);
|
|
|
|
|
|
|
|
if (styleValue.indexOf('%') != -1) {
|
|
|
|
// percentage * size in dimension
|
2016-04-02 15:19:33 +02:00
|
|
|
valueInPixels = valueInPixels / 100 * node.parentNode[parentProperty];
|
2016-04-02 05:11:01 +02:00
|
|
|
}
|
|
|
|
} else {
|
|
|
|
valueInPixels = styleValue;
|
|
|
|
}
|
|
|
|
|
|
|
|
return valueInPixels;
|
|
|
|
}
|
|
|
|
|
2016-05-25 00:04:59 +02:00
|
|
|
/**
|
|
|
|
* Returns if the given value contains an effective constraint.
|
|
|
|
* @private
|
|
|
|
*/
|
|
|
|
function isConstrainedValue(value) {
|
|
|
|
return value !== undefined && value !== null && value !== 'none';
|
|
|
|
}
|
|
|
|
|
2016-04-02 15:19:33 +02:00
|
|
|
// Private helper to get a constraint dimension
|
|
|
|
// @param domNode : the node to check the constraint on
|
2016-05-25 00:04:59 +02:00
|
|
|
// @param maxStyle : the style that defines the maximum for the direction we are using (maxWidth / maxHeight)
|
2016-04-02 15:19:33 +02:00
|
|
|
// @param percentageProperty : property of parent to use when calculating width as a percentage
|
2016-05-25 00:04:59 +02:00
|
|
|
// @see http://www.nathanaeljones.com/blog/2013/reading-max-width-cross-browser
|
2016-04-02 15:19:33 +02:00
|
|
|
function getConstraintDimension(domNode, maxStyle, percentageProperty) {
|
2016-05-25 00:04:59 +02:00
|
|
|
var view = document.defaultView;
|
|
|
|
var parentNode = domNode.parentNode;
|
|
|
|
var constrainedNode = view.getComputedStyle(domNode)[maxStyle];
|
|
|
|
var constrainedContainer = view.getComputedStyle(parentNode)[maxStyle];
|
|
|
|
var hasCNode = isConstrainedValue(constrainedNode);
|
|
|
|
var hasCContainer = isConstrainedValue(constrainedContainer);
|
|
|
|
var infinity = Number.POSITIVE_INFINITY;
|
2016-04-02 15:19:33 +02:00
|
|
|
|
|
|
|
if (hasCNode || hasCContainer) {
|
2016-05-25 00:04:59 +02:00
|
|
|
return Math.min(
|
|
|
|
hasCNode? parseMaxStyle(constrainedNode, domNode, percentageProperty) : infinity,
|
|
|
|
hasCContainer? parseMaxStyle(constrainedContainer, parentNode, percentageProperty) : infinity);
|
2016-02-14 23:06:00 +01:00
|
|
|
}
|
2016-05-25 00:04:59 +02:00
|
|
|
|
|
|
|
return 'none';
|
2016-04-02 15:19:33 +02:00
|
|
|
}
|
|
|
|
// returns Number or undefined if no constraint
|
|
|
|
helpers.getConstraintWidth = function(domNode) {
|
|
|
|
return getConstraintDimension(domNode, 'max-width', 'clientWidth');
|
2016-02-14 23:06:00 +01:00
|
|
|
};
|
|
|
|
// returns Number or undefined if no constraint
|
|
|
|
helpers.getConstraintHeight = function(domNode) {
|
2016-04-02 15:19:33 +02:00
|
|
|
return getConstraintDimension(domNode, 'max-height', 'clientHeight');
|
2016-02-14 23:06:00 +01:00
|
|
|
};
|
|
|
|
helpers.getMaximumWidth = function(domNode) {
|
|
|
|
var container = domNode.parentNode;
|
|
|
|
var padding = parseInt(helpers.getStyle(container, 'padding-left')) + parseInt(helpers.getStyle(container, 'padding-right'));
|
|
|
|
var w = container.clientWidth - padding;
|
|
|
|
var cw = helpers.getConstraintWidth(domNode);
|
2016-05-25 00:04:59 +02:00
|
|
|
return isNaN(cw)? w : Math.min(w, cw);
|
2016-02-14 23:06:00 +01:00
|
|
|
};
|
|
|
|
helpers.getMaximumHeight = function(domNode) {
|
|
|
|
var container = domNode.parentNode;
|
|
|
|
var padding = parseInt(helpers.getStyle(container, 'padding-top')) + parseInt(helpers.getStyle(container, 'padding-bottom'));
|
|
|
|
var h = container.clientHeight - padding;
|
|
|
|
var ch = helpers.getConstraintHeight(domNode);
|
2016-05-25 00:04:59 +02:00
|
|
|
return isNaN(ch)? h : Math.min(h, ch);
|
2016-02-14 23:06:00 +01:00
|
|
|
};
|
|
|
|
helpers.getStyle = function(el, property) {
|
|
|
|
return el.currentStyle ?
|
|
|
|
el.currentStyle[property] :
|
|
|
|
document.defaultView.getComputedStyle(el, null).getPropertyValue(property);
|
|
|
|
};
|
|
|
|
helpers.retinaScale = function(chart) {
|
|
|
|
var ctx = chart.ctx;
|
2016-05-14 21:59:40 +02:00
|
|
|
var canvas = chart.canvas;
|
|
|
|
var width = canvas.width;
|
|
|
|
var height = canvas.height;
|
2016-02-14 23:06:00 +01:00
|
|
|
var pixelRatio = chart.currentDevicePixelRatio = window.devicePixelRatio || 1;
|
|
|
|
|
|
|
|
if (pixelRatio !== 1) {
|
2016-05-14 21:59:40 +02:00
|
|
|
canvas.height = height * pixelRatio;
|
|
|
|
canvas.width = width * pixelRatio;
|
2016-02-14 23:06:00 +01:00
|
|
|
ctx.scale(pixelRatio, pixelRatio);
|
|
|
|
|
|
|
|
// Store the device pixel ratio so that we can go backwards in `destroy`.
|
|
|
|
// The devicePixelRatio changes with zoom, so there are no guarantees that it is the same
|
|
|
|
// when destroy is called
|
|
|
|
chart.originalDevicePixelRatio = chart.originalDevicePixelRatio || pixelRatio;
|
|
|
|
}
|
2016-03-16 01:03:28 +01:00
|
|
|
|
2016-05-14 21:59:40 +02:00
|
|
|
canvas.style.width = width + 'px';
|
|
|
|
canvas.style.height = height + 'px';
|
2016-02-14 23:06:00 +01:00
|
|
|
};
|
|
|
|
//-- Canvas methods
|
|
|
|
helpers.clear = function(chart) {
|
|
|
|
chart.ctx.clearRect(0, 0, chart.width, chart.height);
|
|
|
|
};
|
|
|
|
helpers.fontString = function(pixelSize, fontStyle, fontFamily) {
|
|
|
|
return fontStyle + " " + pixelSize + "px " + fontFamily;
|
|
|
|
};
|
2016-06-03 18:01:52 +02:00
|
|
|
helpers.longestText = function(ctx, font, arrayOfThings, cache) {
|
2016-02-14 23:06:00 +01:00
|
|
|
cache = cache || {};
|
2016-05-14 21:59:40 +02:00
|
|
|
var data = cache.data = cache.data || {};
|
|
|
|
var gc = cache.garbageCollect = cache.garbageCollect || [];
|
2016-02-14 23:06:00 +01:00
|
|
|
|
|
|
|
if (cache.font !== font) {
|
2016-05-14 21:59:40 +02:00
|
|
|
data = cache.data = {};
|
|
|
|
gc = cache.garbageCollect = [];
|
2016-02-14 23:06:00 +01:00
|
|
|
cache.font = font;
|
|
|
|
}
|
|
|
|
|
|
|
|
ctx.font = font;
|
|
|
|
var longest = 0;
|
2016-06-03 18:01:52 +02:00
|
|
|
helpers.each(arrayOfThings, function(thing) {
|
|
|
|
// Undefined strings and arrays should not be measured
|
|
|
|
if (thing !== undefined && thing !== null && helpers.isArray(thing) !== true) {
|
|
|
|
longest = helpers.measureText(ctx, data, gc, longest, thing);
|
|
|
|
} else if (helpers.isArray(thing)) {
|
|
|
|
// if it is an array lets measure each element
|
|
|
|
// to do maybe simplify this function a bit so we can do this more recursively?
|
|
|
|
helpers.each(thing, function(nestedThing) {
|
|
|
|
// Undefined strings and arrays should not be measured
|
2016-06-03 21:15:29 +02:00
|
|
|
if (nestedThing !== undefined && nestedThing !== null && !helpers.isArray(nestedThing)) {
|
2016-06-03 18:01:52 +02:00
|
|
|
longest = helpers.measureText(ctx, data, gc, longest, nestedThing);
|
|
|
|
}
|
|
|
|
});
|
2016-02-14 23:06:00 +01:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2016-05-14 21:59:40 +02:00
|
|
|
var gcLen = gc.length / 2;
|
2016-06-03 18:01:52 +02:00
|
|
|
if (gcLen > arrayOfThings.length) {
|
2016-02-14 23:06:00 +01:00
|
|
|
for (var i = 0; i < gcLen; i++) {
|
2016-05-14 21:59:40 +02:00
|
|
|
delete data[gc[i]];
|
2016-02-14 23:06:00 +01:00
|
|
|
}
|
2016-05-14 21:59:40 +02:00
|
|
|
gc.splice(0, gcLen);
|
2016-02-14 23:06:00 +01:00
|
|
|
}
|
|
|
|
return longest;
|
|
|
|
};
|
2016-06-03 18:01:52 +02:00
|
|
|
helpers.measureText = function (ctx, data, gc, longest, string) {
|
|
|
|
var textWidth = data[string];
|
|
|
|
if (!textWidth) {
|
|
|
|
textWidth = data[string] = ctx.measureText(string).width;
|
|
|
|
gc.push(string);
|
|
|
|
}
|
|
|
|
if (textWidth > longest) {
|
|
|
|
longest = textWidth;
|
|
|
|
}
|
|
|
|
return longest;
|
|
|
|
};
|
|
|
|
helpers.numberOfLabelLines = function(arrayOfThings) {
|
|
|
|
var numberOfLines = 1;
|
|
|
|
helpers.each(arrayOfThings, function(thing) {
|
|
|
|
if (helpers.isArray(thing)) {
|
|
|
|
if (thing.length > numberOfLines) {
|
|
|
|
numberOfLines = thing.length;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
return numberOfLines;
|
|
|
|
};
|
2016-02-14 23:06:00 +01:00
|
|
|
helpers.drawRoundedRectangle = function(ctx, x, y, width, height, radius) {
|
|
|
|
ctx.beginPath();
|
|
|
|
ctx.moveTo(x + radius, y);
|
|
|
|
ctx.lineTo(x + width - radius, y);
|
|
|
|
ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
|
|
|
|
ctx.lineTo(x + width, y + height - radius);
|
|
|
|
ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
|
|
|
|
ctx.lineTo(x + radius, y + height);
|
|
|
|
ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
|
|
|
|
ctx.lineTo(x, y + radius);
|
|
|
|
ctx.quadraticCurveTo(x, y, x + radius, y);
|
|
|
|
ctx.closePath();
|
|
|
|
};
|
|
|
|
helpers.color = function(c) {
|
|
|
|
if (!color) {
|
|
|
|
console.log('Color.js not found!');
|
|
|
|
return c;
|
|
|
|
}
|
2016-04-12 17:36:56 +02:00
|
|
|
|
|
|
|
/* global CanvasGradient */
|
|
|
|
if (c instanceof CanvasGradient) {
|
|
|
|
return color(Chart.defaults.global.defaultColor);
|
|
|
|
}
|
|
|
|
|
2016-02-14 23:06:00 +01:00
|
|
|
return color(c);
|
|
|
|
};
|
|
|
|
helpers.addResizeListener = function(node, callback) {
|
|
|
|
// Hide an iframe before the node
|
|
|
|
var hiddenIframe = document.createElement('iframe');
|
|
|
|
var hiddenIframeClass = 'chartjs-hidden-iframe';
|
|
|
|
|
|
|
|
if (hiddenIframe.classlist) {
|
|
|
|
// can use classlist
|
|
|
|
hiddenIframe.classlist.add(hiddenIframeClass);
|
|
|
|
} else {
|
|
|
|
hiddenIframe.setAttribute('class', hiddenIframeClass);
|
|
|
|
}
|
|
|
|
|
|
|
|
// Set the style
|
2016-05-14 21:59:40 +02:00
|
|
|
var style = hiddenIframe.style;
|
|
|
|
style.width = '100%';
|
|
|
|
style.display = 'block';
|
|
|
|
style.border = 0;
|
|
|
|
style.height = 0;
|
|
|
|
style.margin = 0;
|
|
|
|
style.position = 'absolute';
|
|
|
|
style.left = 0;
|
|
|
|
style.right = 0;
|
|
|
|
style.top = 0;
|
|
|
|
style.bottom = 0;
|
2016-02-14 23:06:00 +01:00
|
|
|
|
|
|
|
// Insert the iframe so that contentWindow is available
|
|
|
|
node.insertBefore(hiddenIframe, node.firstChild);
|
|
|
|
|
|
|
|
(hiddenIframe.contentWindow || hiddenIframe).onresize = function() {
|
|
|
|
if (callback) {
|
|
|
|
callback();
|
|
|
|
}
|
|
|
|
};
|
|
|
|
};
|
|
|
|
helpers.removeResizeListener = function(node) {
|
|
|
|
var hiddenIframe = node.querySelector('.chartjs-hidden-iframe');
|
|
|
|
|
|
|
|
// Remove the resize detect iframe
|
|
|
|
if (hiddenIframe) {
|
|
|
|
hiddenIframe.parentNode.removeChild(hiddenIframe);
|
|
|
|
}
|
|
|
|
};
|
2016-06-05 22:40:29 +02:00
|
|
|
helpers.isArray = Array.isArray?
|
|
|
|
function(obj) { return Array.isArray(obj); } :
|
|
|
|
function(obj) {
|
2016-02-14 23:06:00 +01:00
|
|
|
return Object.prototype.toString.call(obj) === '[object Array]';
|
2016-06-05 22:40:29 +02:00
|
|
|
};
|
2016-05-22 00:21:59 +02:00
|
|
|
//! @see http://stackoverflow.com/a/14853974
|
|
|
|
helpers.arrayEquals = function(a0, a1) {
|
|
|
|
var i, ilen, v0, v1;
|
|
|
|
|
|
|
|
if (!a0 || !a1 || a0.length != a1.length) {
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
|
|
|
|
for (i = 0, ilen=a0.length; i < ilen; ++i) {
|
|
|
|
v0 = a0[i];
|
|
|
|
v1 = a1[i];
|
|
|
|
|
|
|
|
if (v0 instanceof Array && v1 instanceof Array) {
|
|
|
|
if (!helpers.arrayEquals(v0, v1)) {
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
} else if (v0 != v1) {
|
|
|
|
// NOTE: two different object instances will never be equal: {x:20} != {x:20}
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
return true;
|
|
|
|
};
|
2016-02-14 23:06:00 +01:00
|
|
|
helpers.callCallback = function(fn, args, _tArg) {
|
|
|
|
if (fn && typeof fn.call === 'function') {
|
|
|
|
fn.apply(_tArg, args);
|
|
|
|
}
|
|
|
|
};
|
2016-05-09 08:24:32 +02:00
|
|
|
helpers.getHoverColor = function(color) {
|
2016-05-12 23:24:20 +02:00
|
|
|
/* global CanvasPattern */
|
2016-05-09 08:24:32 +02:00
|
|
|
return (color instanceof CanvasPattern) ?
|
|
|
|
color :
|
|
|
|
helpers.color(color).saturate(0.5).darken(0.1).rgbString();
|
2016-05-07 23:24:00 +02:00
|
|
|
};
|
2016-04-12 17:36:56 +02:00
|
|
|
};
|