chartjs-plugin-trendline 2.1.2 → 2.1.3
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/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 +2 -2
- package/example/barChart.html +0 -50
|
@@ -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 i={id:"chartjs-plugin-trendline",afterDatasetsDraw:t=>{let e,i;for(let s in t.scales)if("x"==s[0]?i=t.scales[s]:e=t.scales[s],i&&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);s(r,a,e,i,t.scales[r.yAxisID])}})),a.setLineDash([])}},s=(t,e,i,s,n)=>{let r=i.borderColor||"rgba(169,169,169, .6)",o=i.trendlineLinear.colorMin||r,l=i.trendlineLinear.colorMax||r,h=i.trendlineLinear.width??i.borderWidth??3,d=i.trendlineLinear.lineStyle||"solid",u=i.trendlineLinear.fillColor;const m=t.controller.chart.options,x="object"==typeof m.parsing?m.parsing:void 0,c=i.trendlineLinear.xAxisKey||x?.xAxisKey||"x",f=i.trendlineLinear.yAxisKey||x?.yAxisKey||"y";let X=new a,y=i.data.findIndex((t=>null!=t)),p=i.data.length-1,g=t.data[y][c],w=t.data[p][c],Y="object"==typeof i.data[y];i.data.forEach(((t,e)=>{if(null!=t)if(["time","timeseries"].includes(s.options.type)){let i=null!=t[c]?t[c]:t.t;void 0!==i?X.add(new Date(i).getTime(),t[f]):X.add(e,t)}else Y?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 L,F,P=s.getPixelForValue(X.minx),b=n.getPixelForValue(X.f(X.minx));if(i.trendlineLinear.projection&&X.scale()<0){let t=X.fo();t<X.minx&&(t=X.maxx),L=s.getPixelForValue(t),F=n.getPixelForValue(X.f(t))}else L=s.getPixelForValue(X.maxx),F=n.getPixelForValue(X.f(X.maxx));(isFinite(g)||isFinite(w))&&(P=g,L=w);let C=t.controller.chart.chartArea.bottom,D=t.controller.chart.width;if(b>C){let t=b-C,e=b-F;b=C,P+=D*(t/e)}else if(F>C){let t=F-C,e=F-b;F=C,L=D-(L-(D-D*(t/e)))}e.lineWidth=h,"dotted"===d?e.setLineDash([2,3]):e.setLineDash([]),e.beginPath(),e.moveTo(P,b),e.lineTo(L,F);let v=e.createLinearGradient(P,b,L,F);F<b?(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(P,b),e.lineTo(L,F),e.lineTo(L,C),e.lineTo(P,C),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(i):window.Chart.plugins.register(i));try{t.exports=i}catch(t){}}},e={};!function i(s){var a=e[s];if(void 0!==a)return a.exports;var n=e[s]={exports:{}};return t[s](n,n.exports,i),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.3
|
|
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
|
}
|
package/example/barChart.html
DELETED
|
@@ -1,50 +0,0 @@
|
|
|
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
|
-
document.addEventListener("DOMContentLoaded", function(event) {
|
|
12
|
-
// Bar chart
|
|
13
|
-
new Chart(document.getElementById("bar-chart"), {
|
|
14
|
-
type: 'bar',
|
|
15
|
-
data: {
|
|
16
|
-
labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
|
|
17
|
-
datasets: [
|
|
18
|
-
{
|
|
19
|
-
label: "Population (millions)",
|
|
20
|
-
backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
|
|
21
|
-
data: [2478,5267,734,784,433],
|
|
22
|
-
trendlineLinear: {
|
|
23
|
-
colorMin: "rgba(255,105,180, .8)",
|
|
24
|
-
lineStyle: "dotted",
|
|
25
|
-
width: 2
|
|
26
|
-
}
|
|
27
|
-
},
|
|
28
|
-
]
|
|
29
|
-
},
|
|
30
|
-
options: {
|
|
31
|
-
legend: { display: false },
|
|
32
|
-
title: {
|
|
33
|
-
display: true,
|
|
34
|
-
text: 'Predicted world population (millions) in 2050'
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
|
-
});
|
|
38
|
-
});
|
|
39
|
-
</script>
|
|
40
|
-
</head>
|
|
41
|
-
<body>
|
|
42
|
-
<h1>Bar Chart</h1>
|
|
43
|
-
|
|
44
|
-
<div style="width: 800px;">
|
|
45
|
-
<canvas id="bar-chart"></canvas>
|
|
46
|
-
</div>
|
|
47
|
-
|
|
48
|
-
<p>Using example code from <a href="http://tobiasahlin.com/blog/chartjs-charts-to-get-you-started/" target="_blank">tobiasahlin.com.</a></p>
|
|
49
|
-
</body>
|
|
50
|
-
</html>
|