chartjs-plugin-trendline 1.0.0 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.prettierrc +6 -0
- package/README.md +3 -2
- package/dist/chartjs-plugin-trendline.min.js +2 -1
- package/dist/chartjs-plugin-trendline.min.js.LICENSE.txt +10 -0
- package/example/barChart.html +2 -2
- package/example/lineChart.html +2 -2
- package/example/lineChartProjection.html +55 -0
- package/package.json +4 -10
- package/pnpm-lock.yaml +837 -0
- package/src/chartjs-plugin-trendline.js +154 -111
- package/webpack.config.js +9 -0
- package/gulpfile.js +0 -37
- package/shrinkwrap.yaml +0 -2608
package/.prettierrc
ADDED
package/README.md
CHANGED
|
@@ -9,7 +9,7 @@ This plugin draws an linear trendline in your Chart. Made for Chart.js 3.X
|
|
|
9
9
|
Load ChartJS first, then the plugin which will automatically register itself with ChartJS
|
|
10
10
|
|
|
11
11
|
```html
|
|
12
|
-
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.
|
|
12
|
+
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.0/dist/chart.min.js"></script>
|
|
13
13
|
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-trendline"></script>
|
|
14
14
|
```
|
|
15
15
|
|
|
@@ -35,7 +35,8 @@ To configure the trendline plugin you simply add a new config options to your da
|
|
|
35
35
|
trendlineLinear: {
|
|
36
36
|
style: "rgba(255,105,180, .8)",
|
|
37
37
|
lineStyle: "dotted|solid",
|
|
38
|
-
width: 2
|
|
38
|
+
width: 2,
|
|
39
|
+
projection: true|false (optional)
|
|
39
40
|
}
|
|
40
41
|
}
|
|
41
42
|
```
|
|
@@ -1 +1,2 @@
|
|
|
1
|
-
|
|
1
|
+
/*! For license information please see chartjs-plugin-trendline.min.js.LICENSE.txt */
|
|
2
|
+
(()=>{var t={460:(t,s)=>{var i={id:"chartjs-plugin-trendline",afterDatasetsDraw:function(t){var s,i;for(var a in t.scales)if("x"==a[0]?i=t.scales[a]:s=t.scales[a],i&&s)break;var r=t.ctx;t.data.datasets.forEach((function(s,a){if(s.trendlineLinear&&t.isDatasetVisible(a)&&0!=s.data.length){var n=t.getDatasetMeta(a);!function(t,s,i,a,r){var n=i.trendlineLinear.style||i.borderColor,h=i.trendlineLinear.width||i.borderWidth,o=i.trendlineLinear.lineStyle||"solid";n=void 0!==n?n:"rgba(169,169,169, .6)",h=void 0!==h?h:3;var u=new e,m=i.data.length-1,l=t.data[0].x,d=t.data[m].x,x=!1;i.data&&"object"==typeof i.data[0]&&(x=!0),i.data.forEach((function(t,s){if(null!=t)if("time"===a.options.type){var i=null!=t.x?t.x:t.t;u.add(new Date(i).getTime(),t.y)}else x?u.add(t.x,t.y):u.add(s,t)}));var c,f,X=a.getPixelForValue(u.minx),v=r.getPixelForValue(u.f(u.minx));if(i.trendlineLinear.projection&&u.scale()<0){var p=u.fo();p<u.minx&&(p=u.maxx),c=a.getPixelForValue(p),f=r.getPixelForValue(u.f(p))}else c=a.getPixelForValue(u.maxx),f=r.getPixelForValue(u.f(u.maxx));x||(X=l,c=d);var g=t.controller.chart.chartArea.bottom,w=t.controller.chart.width;if(v>g){var y=v-g,Y=v-f;v=g,X+=w*(y/Y)}else f>g&&(y=f-g,Y=f-v,f=g,c=w-(c-(w-w*(y/Y))));s.lineWidth=h,"dotted"===o&&s.setLineDash([2,3]),s.beginPath(),s.moveTo(X,v),s.lineTo(c,f),s.strokeStyle=n,s.stroke()}(n,r,s,i,t.scales[n.yAxisID])}})),r.setLineDash([])}};function e(){this.count=0,this.sumX=0,this.sumX2=0,this.sumXY=0,this.sumY=0,this.minx=1e100,this.maxx=-1e100,this.maxy=-1e100}e.prototype={add:function(t,s){t=parseFloat(t),s=parseFloat(s),this.count++,this.sumX+=t,this.sumX2+=t*t,this.sumXY+=t*s,this.sumY+=s,t<this.minx&&(this.minx=t),t>this.maxx&&(this.maxx=t),s>this.maxy&&(this.maxy=s)},f:function(t){t=parseFloat(t);var s=this.count*this.sumX2-this.sumX*this.sumX;return(this.sumX2*this.sumY-this.sumX*this.sumXY)/s+t*((this.count*this.sumXY-this.sumX*this.sumY)/s)},fo:function(){var t=this.count*this.sumX2-this.sumX*this.sumX;return-(this.sumX2*this.sumY-this.sumX*this.sumXY)/t/((this.count*this.sumXY-this.sumX*this.sumY)/t)},scale:function(){var t=this.count*this.sumX2-this.sumX*this.sumX;return(this.count*this.sumXY-this.sumX*this.sumY)/t}},"undefined"!=typeof window&&window.Chart&&(window.Chart.hasOwnProperty("register")?window.Chart.register(i):window.Chart.plugins.register(i));try{t.exports=i}catch(t){}}},s={};!function i(e){var a=s[e];if(void 0!==a)return a.exports;var r=s[e]={exports:{}};return t[e](r,r.exports,i),r.exports}(460)})();
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
* chartjs-plugin-trendline.js
|
|
3
|
+
* Version: 1.0.2
|
|
4
|
+
*
|
|
5
|
+
* Copyright 2022 Marcus Alsterfjord
|
|
6
|
+
* Released under the MIT license
|
|
7
|
+
* https://github.com/Makanz/chartjs-plugin-trendline/blob/master/README.md
|
|
8
|
+
*
|
|
9
|
+
* Mod by: vesal: accept also xy-data so works with scatter
|
|
10
|
+
*/
|
package/example/barChart.html
CHANGED
|
@@ -5,8 +5,8 @@
|
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
6
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
7
7
|
<title>BarChart Example</title>
|
|
8
|
-
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.
|
|
9
|
-
<script src="
|
|
8
|
+
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.0/dist/chart.min.js"></script>
|
|
9
|
+
<script src="./../src/chartjs-plugin-trendline.js"></script>
|
|
10
10
|
<script>
|
|
11
11
|
document.addEventListener("DOMContentLoaded", function(event) {
|
|
12
12
|
// Bar chart
|
package/example/lineChart.html
CHANGED
|
@@ -5,8 +5,8 @@
|
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
6
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
7
7
|
<title>LineChart Example</title>
|
|
8
|
-
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.
|
|
9
|
-
<script src="
|
|
8
|
+
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.0/dist/chart.min.js"></script>
|
|
9
|
+
<script src="./../src/chartjs-plugin-trendline.js"></script>
|
|
10
10
|
<script>
|
|
11
11
|
document.addEventListener("DOMContentLoaded", function(event) {
|
|
12
12
|
new Chart(document.getElementById("line-chart"), {
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
7
|
+
<title>XYlineChart Projection Example</title>
|
|
8
|
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
|
|
9
|
+
<script src="./../src/chartjs-plugin-trendline.js"></script>
|
|
10
|
+
<script>
|
|
11
|
+
document.addEventListener("DOMContentLoaded", function(event) {
|
|
12
|
+
new Chart(document.getElementById("line-chart"), {
|
|
13
|
+
type: 'line',
|
|
14
|
+
data: {
|
|
15
|
+
datasets: [{
|
|
16
|
+
data: [{x: 0, y: 30}, {x: 5, y:25}, {x: 10, y: 23}],
|
|
17
|
+
label: "Count",
|
|
18
|
+
borderColor: "#3e95cd",
|
|
19
|
+
fill: false,
|
|
20
|
+
trendlineLinear: {
|
|
21
|
+
style: "#3e95cd",
|
|
22
|
+
lineStyle: "line",
|
|
23
|
+
width: 1,
|
|
24
|
+
projection: true
|
|
25
|
+
}
|
|
26
|
+
}, {
|
|
27
|
+
data: [{x: 60, y: 0}],
|
|
28
|
+
borderColor: "black",
|
|
29
|
+
label: "Goal",
|
|
30
|
+
fill: false
|
|
31
|
+
}]
|
|
32
|
+
},
|
|
33
|
+
options: {
|
|
34
|
+
title: {
|
|
35
|
+
display: true,
|
|
36
|
+
text: 'Cigarettes per days',
|
|
37
|
+
},
|
|
38
|
+
maintainAspectRatio: false,
|
|
39
|
+
responsive: true,
|
|
40
|
+
scales: {
|
|
41
|
+
xAxes: [{ type: 'linear', position: 'bottom', scaleLabel: { labelString: 'days', display: true}}],
|
|
42
|
+
yAxes: [{ type: 'linear', position: 'left', scaleLabel: { labelString: 'cigarretts/day', display: true}, display: true }],
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
});
|
|
46
|
+
});
|
|
47
|
+
</script>
|
|
48
|
+
</head>
|
|
49
|
+
<body>
|
|
50
|
+
<h1>X/Y Chart with trendline projection on x axis</h1>
|
|
51
|
+
<canvas id="line-chart" width="600" height="450"></canvas>
|
|
52
|
+
|
|
53
|
+
<p>Using example code from <a href="http://tobiasahlin.com/blog/chartjs-charts-to-get-you-started/" target="_blank">tobiasahlin.com.</a></p>
|
|
54
|
+
</body>
|
|
55
|
+
</html>
|
package/package.json
CHANGED
|
@@ -1,12 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "chartjs-plugin-trendline",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.2",
|
|
4
4
|
"description": "Trendline for Chart.js",
|
|
5
5
|
"main": "src/chartjs-plugin-trendline.js",
|
|
6
6
|
"scripts": {
|
|
7
|
-
"build": "
|
|
8
|
-
"bump-minor": "gulp bump-minor",
|
|
9
|
-
"bump-patch": "gulp bump-patch"
|
|
7
|
+
"build": "webpack --mode=production"
|
|
10
8
|
},
|
|
11
9
|
"repository": {
|
|
12
10
|
"type": "git",
|
|
@@ -19,11 +17,7 @@
|
|
|
19
17
|
},
|
|
20
18
|
"homepage": "https://github.com/Makanz/chartjs-plugin-trendline#readme",
|
|
21
19
|
"devDependencies": {
|
|
22
|
-
"
|
|
23
|
-
"
|
|
24
|
-
"gulp-bump": "^3.2.0",
|
|
25
|
-
"gulp-rename": "^2.0.0",
|
|
26
|
-
"gulp-uglify": "^3.0.2",
|
|
27
|
-
"pump": "^3.0.0"
|
|
20
|
+
"webpack": "^5.66.0",
|
|
21
|
+
"webpack-cli": "^4.9.1"
|
|
28
22
|
}
|
|
29
23
|
}
|