chartjs-plugin-trendline 2.1.3 → 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
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={339:(t,e)=>{const
|
|
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,50 @@
|
|
|
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>
|
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
|
|
@@ -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();
|