chartjs-plugin-trendline 1.0.3 → 2.0.0
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/LICENSE +1 -1
- package/README.md +4 -3
- package/dist/chartjs-plugin-trendline.min.js +2 -2
- package/dist/chartjs-plugin-trendline.min.js.LICENSE.txt +10 -10
- package/example/barChart.html +1 -1
- package/example/lineChart.html +3 -2
- package/example/lineChartProjection.html +1 -1
- package/package.json +1 -1
- package/src/chartjs-plugin-trendline.js +29 -4
package/LICENSE
CHANGED
package/README.md
CHANGED
|
@@ -20,8 +20,8 @@ Install & import the plugin via npm:
|
|
|
20
20
|
`npm i chart.js chartjs-plugin-trendline`
|
|
21
21
|
|
|
22
22
|
```js
|
|
23
|
-
import ChartJS from
|
|
24
|
-
import chartTrendline from
|
|
23
|
+
import ChartJS from 'chart.js';
|
|
24
|
+
import chartTrendline from 'chartjs-plugin-trendline';
|
|
25
25
|
|
|
26
26
|
ChartJS.plugins.register(chartTrendline);
|
|
27
27
|
```
|
|
@@ -33,7 +33,8 @@ To configure the trendline plugin you simply add a new config options to your da
|
|
|
33
33
|
```javascript
|
|
34
34
|
{
|
|
35
35
|
trendlineLinear: {
|
|
36
|
-
|
|
36
|
+
colorMin: "red",
|
|
37
|
+
colorMax: "green",
|
|
37
38
|
lineStyle: "dotted|solid",
|
|
38
39
|
width: 2,
|
|
39
40
|
projection: true|false (optional)
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
/*! For license information please see chartjs-plugin-trendline.min.js.LICENSE.txt */
|
|
2
|
-
(()=>{var t={460:(t,
|
|
1
|
+
/*! For license information please see chartjs-plugin-trendline.min.js.LICENSE.txt */
|
|
2
|
+
(()=>{var t={460:(t,i)=>{var e={id:"chartjs-plugin-trendline",afterDatasetsDraw:function(t){var i,e;for(var a in t.scales)if("x"==a[0]?e=t.scales[a]:i=t.scales[a],e&&i)break;var r=t.ctx;t.data.datasets.forEach((function(i,a){if(i.trendlineLinear&&t.isDatasetVisible(a)&&0!=i.data.length){var n=t.getDatasetMeta(a);!function(t,i,e,a,r){var n=e.borderColor||"rgba(169,169,169, .6)",o=e.trendlineLinear.colorMin||n,h=e.trendlineLinear.colorMax||n,l=e.trendlineLinear.width||e.borderWidth,u=e.trendlineLinear.lineStyle||"solid",d=e.trendlineLinear.fillColor;l=void 0!==l?l:3;var m=new s,c=e.data.findIndex((t=>null!=t)),x=e.data.length-1,f=t.data[c].x,X=t.data[x].x,v="object"==typeof e.data[c];e.data.forEach((function(t,i){if(null!=t)if("time"===a.options.type){var e=null!=t.x?t.x:t.t;m.add(new Date(e).getTime(),t.y)}else v?m.add(t.x,t.y):m.add(i,t)}));var p,g,w=a.getPixelForValue(m.minx),y=r.getPixelForValue(m.f(m.minx));if(e.trendlineLinear.projection&&m.scale()<0){var Y=m.fo();Y<m.minx&&(Y=m.maxx),p=a.getPixelForValue(Y),g=r.getPixelForValue(m.f(Y))}else p=a.getPixelForValue(m.maxx),g=r.getPixelForValue(m.f(m.maxx));v||(w=f,p=X);var P=t.controller.chart.chartArea.bottom,C=t.controller.chart.width;if(y>P){var L=y-P,b=y-g;y=P,w+=C*(L/b)}else g>P&&(L=g-P,b=g-y,g=P,p=C-(p-(C-C*(L/b))));i.lineWidth=l,"dotted"===u&&i.setLineDash([2,3]),i.beginPath(),i.moveTo(w,y),i.lineTo(p,g);var F=i.createLinearGradient(w,y,p,g);g<y?(F.addColorStop(0,h),F.addColorStop(1,o)):(F.addColorStop(0,o),F.addColorStop(1,h)),i.strokeStyle=F,i.stroke(),i.closePath(),!d||(i.fillStyle=d,i.beginPath(),i.moveTo(w,y),i.lineTo(p,g),i.lineTo(p,P),i.lineTo(w,P),i.closePath(),i.fill())}(n,r,i,e,t.scales[n.yAxisID])}})),r.setLineDash([])}};function s(){this.count=0,this.sumX=0,this.sumX2=0,this.sumXY=0,this.sumY=0,this.minx=1e100,this.maxx=-1e100,this.maxy=-1e100}s.prototype={add:function(t,i){t=parseFloat(t),i=parseFloat(i),this.count++,this.sumX+=t,this.sumX2+=t*t,this.sumXY+=t*i,this.sumY+=i,t<this.minx&&(this.minx=t),t>this.maxx&&(this.maxx=t),i>this.maxy&&(this.maxy=i)},f:function(t){t=parseFloat(t);var i=this.count*this.sumX2-this.sumX*this.sumX;return(this.sumX2*this.sumY-this.sumX*this.sumXY)/i+t*((this.count*this.sumXY-this.sumX*this.sumY)/i)},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(e):window.Chart.plugins.register(e));try{t.exports=e}catch(t){}}},i={};!function e(s){var a=i[s];if(void 0!==a)return a.exports;var r=i[s]={exports:{}};return t[s](r,r.exports,e),r.exports}(460)})();
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
/*!
|
|
2
|
-
* chartjs-plugin-trendline.js
|
|
3
|
-
* Version:
|
|
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
|
-
*/
|
|
1
|
+
/*!
|
|
2
|
+
* chartjs-plugin-trendline.js
|
|
3
|
+
* Version: 2.0.0
|
|
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
package/example/lineChart.html
CHANGED
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
borderColor: "#3e95cd",
|
|
20
20
|
fill: false,
|
|
21
21
|
trendlineLinear: {
|
|
22
|
-
|
|
22
|
+
colorMin: "#3e95cd",
|
|
23
23
|
lineStyle: "line",
|
|
24
24
|
width: 1
|
|
25
25
|
}
|
|
@@ -29,7 +29,8 @@
|
|
|
29
29
|
borderColor: "#8e5ea2",
|
|
30
30
|
fill: false,
|
|
31
31
|
trendlineLinear: {
|
|
32
|
-
|
|
32
|
+
colorMin: "red",
|
|
33
|
+
colorMax: "green",
|
|
33
34
|
lineStyle: "line",
|
|
34
35
|
width: 1
|
|
35
36
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* chartjs-plugin-trendline.js
|
|
3
|
-
* Version:
|
|
3
|
+
* Version: 2.0.0
|
|
4
4
|
*
|
|
5
5
|
* Copyright 2022 Marcus Alsterfjord
|
|
6
6
|
* Released under the MIT license
|
|
@@ -42,11 +42,13 @@ var pluginTrendlineLinear = {
|
|
|
42
42
|
};
|
|
43
43
|
|
|
44
44
|
function addFitter(datasetMeta, ctx, dataset, xScale, yScale) {
|
|
45
|
-
var
|
|
45
|
+
var defaultColor = dataset.borderColor || 'rgba(169,169,169, .6)';
|
|
46
|
+
var colorMin = dataset.trendlineLinear.colorMin || defaultColor;
|
|
47
|
+
var colorMax = dataset.trendlineLinear.colorMax || defaultColor;
|
|
46
48
|
var lineWidth = dataset.trendlineLinear.width || dataset.borderWidth;
|
|
47
49
|
var lineStyle = dataset.trendlineLinear.lineStyle || 'solid';
|
|
50
|
+
var fillColor = dataset.trendlineLinear.fillColor;
|
|
48
51
|
|
|
49
|
-
style = style !== undefined ? style : 'rgba(169,169,169, .6)';
|
|
50
52
|
lineWidth = lineWidth !== undefined ? lineWidth : 3;
|
|
51
53
|
|
|
52
54
|
var fitter = new LineFitter();
|
|
@@ -126,8 +128,31 @@ function addFitter(datasetMeta, ctx, dataset, xScale, yScale) {
|
|
|
126
128
|
ctx.beginPath();
|
|
127
129
|
ctx.moveTo(x1, y1);
|
|
128
130
|
ctx.lineTo(x2, y2);
|
|
129
|
-
|
|
131
|
+
|
|
132
|
+
var gradient= ctx.createLinearGradient(x1, y1, x2, y2);
|
|
133
|
+
if (y2 < y1) {
|
|
134
|
+
gradient.addColorStop(0, colorMax);
|
|
135
|
+
gradient.addColorStop(1, colorMin);
|
|
136
|
+
} else{
|
|
137
|
+
gradient.addColorStop(0, colorMin);
|
|
138
|
+
gradient.addColorStop(1, colorMax);
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
ctx.strokeStyle = gradient;
|
|
142
|
+
|
|
130
143
|
ctx.stroke();
|
|
144
|
+
ctx.closePath();
|
|
145
|
+
|
|
146
|
+
if (!!fillColor) {
|
|
147
|
+
ctx.fillStyle = fillColor;
|
|
148
|
+
ctx.beginPath();
|
|
149
|
+
ctx.moveTo(x1, y1);
|
|
150
|
+
ctx.lineTo(x2, y2);
|
|
151
|
+
ctx.lineTo(x2, drawBottom);
|
|
152
|
+
ctx.lineTo(x1, drawBottom);
|
|
153
|
+
ctx.closePath();
|
|
154
|
+
ctx.fill();
|
|
155
|
+
}
|
|
131
156
|
}
|
|
132
157
|
|
|
133
158
|
function LineFitter() {
|