mirror of
https://github.com/monkeytypegame/monkeytype.git
synced 2025-02-01 19:38:24 +08:00
converted chart.js to an npm dependency
This commit is contained in:
typer
parent
1679e69123
commit
adc097ffc2
7 changed files with 56 additions and 1260 deletions
48
package-lock.json
generated
48
package-lock.json
generated
|
|
@ -2166,6 +2166,45 @@
|
|||
"integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==",
|
||||
"dev": true
|
||||
},
|
||||
"chart.js": {
|
||||
"version": "2.9.4",
|
||||
"resolved": "https://registry.npmjs.org/chart.js/-/chart.js-2.9.4.tgz",
|
||||
"integrity": "sha512-B07aAzxcrikjAPyV+01j7BmOpxtQETxTSlQ26BEYJ+3iUkbNKaOJ/nDbT6JjyqYxseM0ON12COHYdU2cTIjC7A==",
|
||||
"requires": {
|
||||
"chartjs-color": "^2.1.0",
|
||||
"moment": "^2.10.2"
|
||||
}
|
||||
},
|
||||
"chartjs-color": {
|
||||
"version": "2.4.1",
|
||||
"resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.4.1.tgz",
|
||||
"integrity": "sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==",
|
||||
"requires": {
|
||||
"chartjs-color-string": "^0.6.0",
|
||||
"color-convert": "^1.9.3"
|
||||
}
|
||||
},
|
||||
"chartjs-color-string": {
|
||||
"version": "0.6.0",
|
||||
"resolved": "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz",
|
||||
"integrity": "sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==",
|
||||
"requires": {
|
||||
"color-name": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"chartjs-plugin-annotation": {
|
||||
"version": "0.5.7",
|
||||
"resolved": "https://registry.npmjs.org/chartjs-plugin-annotation/-/chartjs-plugin-annotation-0.5.7.tgz",
|
||||
"integrity": "sha1-G/DjAZmmqf+Yic4PN6HnVagNEL8=",
|
||||
"requires": {
|
||||
"chart.js": "^2.4.0"
|
||||
}
|
||||
},
|
||||
"chartjs-plugin-trendline": {
|
||||
"version": "0.2.2",
|
||||
"resolved": "https://registry.npmjs.org/chartjs-plugin-trendline/-/chartjs-plugin-trendline-0.2.2.tgz",
|
||||
"integrity": "sha512-Zla3736i2M0vQGoMvda3OiLm6pHo4ThBw8ba3BMxElebRH32k+GQPEdJUcWhlCbazsmL4UMpEC8PTXansMA1cw=="
|
||||
},
|
||||
"chokidar": {
|
||||
"version": "3.4.3",
|
||||
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.4.3.tgz",
|
||||
|
|
@ -2313,7 +2352,6 @@
|
|||
"version": "1.9.3",
|
||||
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
|
||||
"integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"color-name": "1.1.3"
|
||||
}
|
||||
|
|
@ -2321,8 +2359,7 @@
|
|||
"color-name": {
|
||||
"version": "1.1.3",
|
||||
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
|
||||
"integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
|
||||
"dev": true
|
||||
"integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
|
||||
},
|
||||
"color-support": {
|
||||
"version": "1.1.3",
|
||||
|
|
@ -5957,6 +5994,11 @@
|
|||
"xtend": "^4.0.0"
|
||||
}
|
||||
},
|
||||
"moment": {
|
||||
"version": "2.29.1",
|
||||
"resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz",
|
||||
"integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ=="
|
||||
},
|
||||
"mri": {
|
||||
"version": "1.1.6",
|
||||
"resolved": "https://registry.npmjs.org/mri/-/mri-1.1.6.tgz",
|
||||
|
|
|
|||
|
|
@ -42,6 +42,9 @@
|
|||
}
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.12.5"
|
||||
"@babel/runtime": "^7.12.5",
|
||||
"chart.js": "^2.9.4",
|
||||
"chartjs-plugin-annotation": "^0.5.7",
|
||||
"chartjs-plugin-trendline": "^0.2.2"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,12 @@
|
|||
//this file should be concatenated at the top of the legacy js files
|
||||
|
||||
import Chart from "chart.js";
|
||||
import chartTrendline from "chartjs-plugin-trendline";
|
||||
import chartAnnotation from "chartjs-plugin-annotation";
|
||||
|
||||
Chart.plugins.register(chartTrendline);
|
||||
Chart.plugins.register(chartAnnotation);
|
||||
|
||||
import {
|
||||
db_getSnapshot,
|
||||
db_setSnapshot,
|
||||
|
|
|
|||
|
|
@ -3431,10 +3431,6 @@
|
|||
<script src="js/easing.js"></script>
|
||||
<script src="js/jquery.cookie-1.4.1.min.js"></script>
|
||||
<script src="js/moment.min.js"></script>
|
||||
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script> -->
|
||||
<script src="js/chart.min.js"></script>
|
||||
<script src="js/chartjs-plugin-trendline.js"></script>
|
||||
<script src="js/chartjs-plugin-annotation.js"></script>
|
||||
<script src="js/html2canvas.min.js"></script>
|
||||
<script src="js/monkeytype.js"></script>
|
||||
</html>
|
||||
|
|
|
|||
6
static/js/chart.min.js
vendored
6
static/js/chart.min.js
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load diff
|
|
@ -1,132 +0,0 @@
|
|||
/*!
|
||||
* 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 = {
|
||||
afterDatasetsDraw: 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([6, 6]);
|
||||
}
|
||||
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;
|
||||
},
|
||||
};
|
||||
Loading…
Reference in a new issue