chartjs-plugin-trendline 2.1.2 → 2.1.4
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/README.md +1 -1
- package/dist/chartjs-plugin-trendline.min.js +1 -1
- package/dist/chartjs-plugin-trendline.min.js.LICENSE.txt +1 -1
- package/example/barChart_not_working.html +79 -0
- package/example/barChart_working.html +72 -0
- package/package.json +1 -1
- package/src/chartjs-plugin-trendline.js +17 -6
package/README.md
CHANGED
|
@@ -36,7 +36,7 @@ To configure the trendline plugin you simply add a new config options to your da
|
|
|
36
36
|
trendlineLinear: {
|
|
37
37
|
colorMin: "red",
|
|
38
38
|
colorMax: "green",
|
|
39
|
-
lineStyle: "dotted|solid",
|
|
39
|
+
lineStyle: "dotted|solid|dashed|dashdot",
|
|
40
40
|
width: 2,
|
|
41
41
|
xAxisKey: "time" (optional),
|
|
42
42
|
yAxisKey: "usage" (optional),
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/*! For license information please see chartjs-plugin-trendline.min.js.LICENSE.txt */
|
|
2
|
-
(()=>{var t={
|
|
2
|
+
(()=>{var t={339:(t,e)=>{const s={id:"chartjs-plugin-trendline",afterDatasetsDraw:t=>{let e,s;for(let i in t.scales)if("x"==i[0]?s=t.scales[i]:e=t.scales[i],s&&e)break;const a=t.ctx;t.data.datasets.forEach(((e,n)=>{const r=e.alwaysShowTrendline||t.isDatasetVisible(n);if(e.trendlineLinear&&r&&e.data.length>1){const r=t.getDatasetMeta(n);i(r,a,e,s,t.scales[r.yAxisID])}})),a.setLineDash([])}},i=(t,e,s,i,n)=>{let r=s.borderColor||"rgba(169,169,169, .6)",o=s.trendlineLinear.colorMin||r,l=s.trendlineLinear.colorMax||r,h=s.trendlineLinear.width??s.borderWidth??3,d=s.trendlineLinear.lineStyle||"solid",u=s.trendlineLinear.fillColor;const m=t.controller.chart.options,c="object"==typeof m.parsing?m.parsing:void 0,x=s.trendlineLinear.xAxisKey||c?.xAxisKey||"x",f=s.trendlineLinear.yAxisKey||c?.yAxisKey||"y";let X=new a,y=s.data.findIndex((t=>null!=t)),p=s.data.length-1,g=t.data[y][x],w=t.data[p][x],L="object"==typeof s.data[y];s.data.forEach(((t,e)=>{if(null!=t)if(["time","timeseries"].includes(i.options.type)){let s=null!=t[x]?t[x]:t.t;void 0!==s?X.add(new Date(s).getTime(),t[f]):X.add(e,t)}else L?isNaN(t.x)||isNaN(t.y)?isNaN(t.x)?isNaN(t.y)||X.add(e,t.y):X.add(e,t.x):X.add(t.x,t.y):X.add(e,t)}));let Y,b,D=i.getPixelForValue(X.minx),F=n.getPixelForValue(X.f(X.minx));if(s.trendlineLinear.projection&&X.scale()<0){let t=X.fo();t<X.minx&&(t=X.maxx),Y=i.getPixelForValue(t),b=n.getPixelForValue(X.f(t))}else Y=i.getPixelForValue(X.maxx),b=n.getPixelForValue(X.f(X.maxx));(isFinite(g)||isFinite(w))&&(D=g,Y=w);let P=t.controller.chart.chartArea.bottom,C=t.controller.chart.width;if(F>P){let t=F-P,e=F-b;F=P,D+=C*(t/e)}else if(b>P){let t=b-P,e=b-F;b=P,Y=C-(Y-(C-C*(t/e)))}switch(e.lineWidth=h,d){case"dotted":e.setLineDash([2,2]);break;case"dashed":e.setLineDash([8,3]);break;case"dashdot":e.setLineDash([8,3,2,3]);break;default:e.setLineDash([])}e.beginPath(),e.moveTo(D,F),e.lineTo(Y,b);let v=e.createLinearGradient(D,F,Y,b);b<F?(v.addColorStop(0,l),v.addColorStop(1,o)):(v.addColorStop(0,o),v.addColorStop(1,l)),e.strokeStyle=v,e.stroke(),e.closePath(),u&&(e.fillStyle=u,e.beginPath(),e.moveTo(D,F),e.lineTo(Y,b),e.lineTo(Y,P),e.lineTo(D,P),e.closePath(),e.fill())};class a{constructor(){this.count=0,this.sumX=0,this.sumX2=0,this.sumXY=0,this.sumY=0,this.minx=1e100,this.maxx=-1e100,this.maxy=-1e100}add(t,e){t=parseFloat(t),e=parseFloat(e),this.count++,this.sumX+=t,this.sumX2+=t*t,this.sumXY+=t*e,this.sumY+=e,t<this.minx&&(this.minx=t),t>this.maxx&&(this.maxx=t),e>this.maxy&&(this.maxy=e)}f(t){t=parseFloat(t);let e=this.count*this.sumX2-this.sumX*this.sumX;return(this.sumX2*this.sumY-this.sumX*this.sumXY)/e+t*((this.count*this.sumXY-this.sumX*this.sumY)/e)}fo(){let 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(){let 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(s):window.Chart.plugins.register(s));try{t.exports=s}catch(t){}}},e={};!function s(i){var a=e[i];if(void 0!==a)return a.exports;var n=e[i]={exports:{}};return t[i](n,n.exports,s),n.exports}(339)})();
|
|
@@ -0,0 +1,79 @@
|
|
|
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>BarChart Example</title>
|
|
8
|
+
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.umd.js"></script>
|
|
9
|
+
<script src="./../src/chartjs-plugin-trendline.js"></script>
|
|
10
|
+
<script>
|
|
11
|
+
|
|
12
|
+
const datasets = [{
|
|
13
|
+
data: [
|
|
14
|
+
{ x: '202309', y: 144214.8 },
|
|
15
|
+
{ x: '202310', y: 144514.8 },
|
|
16
|
+
{ x: '202311', y: 150626 },
|
|
17
|
+
{ x: '202312', y: 204523 },
|
|
18
|
+
{ x: '202401', y: 125402 },
|
|
19
|
+
{ x: '202402', y: 225232 },
|
|
20
|
+
{ x: '202403', y: 2786435 },
|
|
21
|
+
{ x: '202404', y: 584833 },
|
|
22
|
+
],
|
|
23
|
+
label: 'Usage Not Working!',
|
|
24
|
+
yAxisID: 'y',
|
|
25
|
+
lineTension: 0,
|
|
26
|
+
borderWidth: 2,
|
|
27
|
+
trendlineLinear: {
|
|
28
|
+
colorMin: '#ff0000',
|
|
29
|
+
colorMax: '#00ff00',
|
|
30
|
+
lineStyle: 'dotted',
|
|
31
|
+
width: 2,
|
|
32
|
+
yAxisKey: 'y',
|
|
33
|
+
xAxisKey: 'x',
|
|
34
|
+
projection: true,
|
|
35
|
+
},
|
|
36
|
+
}, ]
|
|
37
|
+
const chartConfig = {
|
|
38
|
+
type: 'line',
|
|
39
|
+
data: {
|
|
40
|
+
datasets: datasets
|
|
41
|
+
},
|
|
42
|
+
options: {
|
|
43
|
+
scales: {
|
|
44
|
+
x: {
|
|
45
|
+
ticks: {
|
|
46
|
+
padding: 8
|
|
47
|
+
},
|
|
48
|
+
},
|
|
49
|
+
y: {
|
|
50
|
+
type: 'linear',
|
|
51
|
+
display: true,
|
|
52
|
+
position: 'left',
|
|
53
|
+
title: {
|
|
54
|
+
display: true,
|
|
55
|
+
text: 'Usage',
|
|
56
|
+
padding: 8,
|
|
57
|
+
},
|
|
58
|
+
},
|
|
59
|
+
},
|
|
60
|
+
},
|
|
61
|
+
plugins: [pluginTrendlineLinear],
|
|
62
|
+
};
|
|
63
|
+
|
|
64
|
+
document.addEventListener("DOMContentLoaded", function(event) {
|
|
65
|
+
// Bar chart
|
|
66
|
+
new Chart(document.getElementById("bar-chart"), chartConfig);
|
|
67
|
+
});
|
|
68
|
+
</script>
|
|
69
|
+
</head>
|
|
70
|
+
<body>
|
|
71
|
+
<h1>Bar Chart</h1>
|
|
72
|
+
|
|
73
|
+
<div style="width: 800px;">
|
|
74
|
+
<canvas id="bar-chart"></canvas>
|
|
75
|
+
</div>
|
|
76
|
+
|
|
77
|
+
<p>Using example code from <a href="http://tobiasahlin.com/blog/chartjs-charts-to-get-you-started/" target="_blank">tobiasahlin.com.</a></p>
|
|
78
|
+
</body>
|
|
79
|
+
</html>
|
|
@@ -0,0 +1,72 @@
|
|
|
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>BarChart Example</title>
|
|
8
|
+
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.umd.js"></script>
|
|
9
|
+
<script src="./../src/chartjs-plugin-trendline.js"></script>
|
|
10
|
+
<script>
|
|
11
|
+
|
|
12
|
+
const datasets = [{
|
|
13
|
+
data: [144214.8, 144514.8, 150626, 204523, 125402, 225232, 2786435, 584833],
|
|
14
|
+
label: 'Usage',
|
|
15
|
+
yAxisID: 'y',
|
|
16
|
+
lineTension: 0,
|
|
17
|
+
borderWidth: 2,
|
|
18
|
+
trendlineLinear: {
|
|
19
|
+
colorMin: '#ff0000',
|
|
20
|
+
colorMax: '#00ff00',
|
|
21
|
+
lineStyle: 'dotted',
|
|
22
|
+
width: 2,
|
|
23
|
+
yAxisKey: 'y',
|
|
24
|
+
xAxisKey: 'x',
|
|
25
|
+
projection: true,
|
|
26
|
+
},
|
|
27
|
+
}, ]
|
|
28
|
+
|
|
29
|
+
const chartConfig = {
|
|
30
|
+
type: 'line',
|
|
31
|
+
data: {
|
|
32
|
+
datasets: datasets,
|
|
33
|
+
labels: ['202309', '202310', '202311', '202401', '202402', '202403', '202404', '20240'],
|
|
34
|
+
},
|
|
35
|
+
options: {
|
|
36
|
+
scales: {
|
|
37
|
+
x: {
|
|
38
|
+
ticks: {
|
|
39
|
+
padding: 8
|
|
40
|
+
},
|
|
41
|
+
},
|
|
42
|
+
y: {
|
|
43
|
+
type: 'linear',
|
|
44
|
+
display: true,
|
|
45
|
+
position: 'left',
|
|
46
|
+
title: {
|
|
47
|
+
display: true,
|
|
48
|
+
text: 'Usage',
|
|
49
|
+
padding: 8,
|
|
50
|
+
},
|
|
51
|
+
},
|
|
52
|
+
},
|
|
53
|
+
},
|
|
54
|
+
plugins: [pluginTrendlineLinear],
|
|
55
|
+
};
|
|
56
|
+
|
|
57
|
+
document.addEventListener("DOMContentLoaded", function(event) {
|
|
58
|
+
// Bar chart
|
|
59
|
+
new Chart(document.getElementById("bar-chart"), chartConfig);
|
|
60
|
+
});
|
|
61
|
+
</script>
|
|
62
|
+
</head>
|
|
63
|
+
<body>
|
|
64
|
+
<h1>Bar Chart</h1>
|
|
65
|
+
|
|
66
|
+
<div style="width: 800px;">
|
|
67
|
+
<canvas id="bar-chart"></canvas>
|
|
68
|
+
</div>
|
|
69
|
+
|
|
70
|
+
<p>Using example code from <a href="http://tobiasahlin.com/blog/chartjs-charts-to-get-you-started/" target="_blank">tobiasahlin.com.</a></p>
|
|
71
|
+
</body>
|
|
72
|
+
</html>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* chartjs-plugin-trendline.js
|
|
3
|
-
* Version: 2.1.
|
|
3
|
+
* Version: 2.1.4
|
|
4
4
|
*
|
|
5
5
|
* Copyright 2024 Marcus Alsterfjord
|
|
6
6
|
* Released under the MIT license
|
|
@@ -115,7 +115,7 @@ const addFitter = (datasetMeta, ctx, dataset, xScale, yScale) => {
|
|
|
115
115
|
y2 = yScale.getPixelForValue(fitter.f(fitter.maxx));
|
|
116
116
|
}
|
|
117
117
|
|
|
118
|
-
if (
|
|
118
|
+
if(isFinite(startPos) || isFinite(endPos)) {
|
|
119
119
|
x1 = startPos;
|
|
120
120
|
x2 = endPos;
|
|
121
121
|
}
|
|
@@ -145,10 +145,21 @@ const addFitter = (datasetMeta, ctx, dataset, xScale, yScale) => {
|
|
|
145
145
|
|
|
146
146
|
ctx.lineWidth = lineWidth;
|
|
147
147
|
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
148
|
+
// line styles
|
|
149
|
+
switch (lineStyle) {
|
|
150
|
+
case 'dotted':
|
|
151
|
+
ctx.setLineDash([2, 2]); // Dotted
|
|
152
|
+
break;
|
|
153
|
+
case 'dashed':
|
|
154
|
+
ctx.setLineDash([8, 3]); // Dashed
|
|
155
|
+
break;
|
|
156
|
+
case 'dashdot':
|
|
157
|
+
ctx.setLineDash([8, 3, 2, 3]); // Dash-dot
|
|
158
|
+
break;
|
|
159
|
+
case 'solid':
|
|
160
|
+
default:
|
|
161
|
+
ctx.setLineDash([]); // Solid
|
|
162
|
+
break;
|
|
152
163
|
}
|
|
153
164
|
|
|
154
165
|
ctx.beginPath();
|