monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2025-02-04 04:51:16 +08:00
Code Issues Projects Releases Packages Wiki Activity

added a trendline plugin

Browse source
This commit is contained in:
Jack 2020-05-26 17:49:34 +01:00
parent 923aa0eff6
commit 2a8fda75d7
1 changed files with 123 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

123
public/js/chartjs-plugin-trendline.js Normal file
View file

@ -0,0 +1,123 @@
/*!
* chartjs-plugin-trendline.js
* Version: 0.1.3
*
* Copyright 2017 Marcus Alsterfjord
* Released under the MIT license
* https://github.com/Makanz/chartjs-plugin-trendline/blob/master/README.md
*
* Mod by: vesal: accept also xy-data so works with scatter
*/
var pluginTrendlineLinear = {
beforeDraw: function(chartInstance) {
var yScale;
var xScale;
for (var axis in chartInstance.scales) {
if ( axis[0] == 'x')
xScale = chartInstance.scales[axis];
else
yScale = chartInstance.scales[axis];
if ( xScale && yScale ) break;
}
var ctx = chartInstance.chart.ctx;
chartInstance.data.datasets.forEach(function(dataset, index) {
if (dataset.trendlineLinear && chartInstance.isDatasetVisible(index)) {
var datasetMeta = chartInstance.getDatasetMeta(index);
addFitter(datasetMeta, ctx, dataset, xScale, yScale);
}
});
ctx.setLineDash([]);
}
};
function addFitter(datasetMeta, ctx, dataset, xScale, yScale) {
if(datasetMeta.data == [] || datasetMeta.data == null || datasetMeta.data.length == 0) return;
var style = dataset.trendlineLinear.style || dataset.borderColor;
var lineWidth = dataset.trendlineLinear.width || dataset.borderWidth;
var lineStyle = dataset.trendlineLinear.lineStyle || "solid";
style = (style !== undefined) ? style : "rgba(169,169,169, .6)";
lineWidth = (lineWidth !== undefined) ? lineWidth : 3;
var fitter = new LineFitter();
var lastIndex = dataset.data.length - 1;
var startPos = datasetMeta.data[0]._model.x;
var endPos = datasetMeta.data[lastIndex]._model.x;
var xy = false;
if ( dataset.data && typeof dataset.data[0] === 'object') xy = true;
dataset.data.forEach(function(data, index) {
if(data == null)
return;
if ( xy ) fitter.add(data.x, data.y);
else fitter.add(index, data);
});
var x1 = xScale.getPixelForValue(fitter.minx);
var x2 = xScale.getPixelForValue(fitter.maxx);
var y1 = yScale.getPixelForValue(fitter.f(fitter.minx));
var y2 = yScale.getPixelForValue(fitter.f(fitter.maxx));
if ( !xy ) { x1 = startPos; x2 = endPos; }
var drawBottom = datasetMeta.controller.chart.chartArea.bottom;
var chartWidth = datasetMeta.controller.chart.width;
if(y1 > drawBottom) { // Left side is below zero
var diff = y1 - drawBottom;
var lineHeight = y1 - y2;
var overlapPercentage = diff / lineHeight;
var addition = chartWidth * overlapPercentage;
y1 = drawBottom;
x1 = (x1 + addition);
} else if(y2 > drawBottom) { // right side is below zero
var diff = y2 - drawBottom;
var lineHeight = y2 - y1;
var overlapPercentage = diff / lineHeight;
var subtraction = chartWidth - (chartWidth * overlapPercentage);
y2 = drawBottom;
x2 = chartWidth - (x2 - subtraction);
}
ctx.lineWidth = lineWidth;
if (lineStyle === "dotted") { ctx.setLineDash([2, 3]); }
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.strokeStyle = style;
ctx.stroke();
}
Chart.plugins.register(pluginTrendlineLinear);
function LineFitter() {
this.count = 0;
this.sumX = 0;
this.sumX2 = 0;
this.sumXY = 0;
this.sumY = 0;
this.minx = 1e100;
this.maxx = -1e100;
}
LineFitter.prototype = {
'add': function (x, y) {
this.count++;
this.sumX += x;
this.sumX2 += x * x;
this.sumXY += x * y;
this.sumY += y;
if ( x < this.minx ) this.minx = x;
if ( x > this.maxx ) this.maxx = x;
},
'f': function (x) {
var det = this.count * this.sumX2 - this.sumX * this.sumX;
var offset = (this.sumX2 * this.sumY - this.sumX * this.sumXY) / det;
var scale = (this.count * this.sumXY - this.sumX * this.sumY) / det;
return offset + x * scale;
}
};