chartjs-plugin-trendline 2.1.0 → 2.1.2

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2022 Marcus Alsterfjord
+Copyright (c) 2024 Marcus Alsterfjord
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,7 +1,7 @@
 # chartjs-plugin-trendline
 
 This plugin draws an linear trendline in your Chart.
-It has been tested with Chart.js version 4.4.0.
+It has been tested with Chart.js version 4.4.3.
 
 ## Installation
 
@@ -10,8 +10,8 @@ It has been tested with Chart.js version 4.4.0.
 Load Chart.js first, then the plugin which will automatically register itself with Chart.js
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-trendline"></script>
+<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-trendline/dist/chartjs-plugin-trendline.min.js"></script>
 ```
 
 #### As a Chart.JS plugin

package/dist/chartjs-plugin-trendline.min.js

@@ -1,2 +1,2 @@
-/*! For license information please see chartjs-plugin-trendline.min.js.LICENSE.txt */
-(()=>{var t={460:(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,o)=>{const r=e.alwaysShowTrendline||t.isDatasetVisible(o);if(e.trendlineLinear&&r&&e.data.length>1){const r=t.getDatasetMeta(o);i(r,a,e,s,t.scales[r.yAxisID])}})),a.setLineDash([])}},i=(t,e,s,i,o)=>{let r=s.borderColor||"rgba(169,169,169, .6)",n=s.trendlineLinear.colorMin||r,l=s.trendlineLinear.colorMax||r,h=s.trendlineLinear.width||s.borderWidth,d=s.trendlineLinear.lineStyle||"solid",u=s.trendlineLinear.fillColor;const m="object"==typeof t.controller.chart.options.parsing?t.controller.chart.options.parsing:void 0,x=s.trendlineLinear.xAxisKey||m?m.xAxisKey:"x",c=s.trendlineLinear.yAxisKey||m?m.yAxisKey:"y";h=void 0!==h?h:3;let f=new a,X=s.data.findIndex((t=>null!=t)),p=s.data.length-1,y=t.data[X][x],g=t.data[p][x],w="object"==typeof s.data[X];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?f.add(new Date(s).getTime(),t[c]):f.add(e,t)}else w?isNaN(t.x)||isNaN(t.y)?isNaN(t.x)?isNaN(t.y)||f.add(e,t.y):f.add(e,t.x):f.add(t.x,t.y):f.add(e,t)}));let Y,L,P=i.getPixelForValue(f.minx),b=o.getPixelForValue(f.f(f.minx));if(s.trendlineLinear.projection&&f.scale()<0){let t=f.fo();t<f.minx&&(t=f.maxx),Y=i.getPixelForValue(t),L=o.getPixelForValue(f.f(t))}else Y=i.getPixelForValue(f.maxx),L=o.getPixelForValue(f.f(f.maxx));w||(P=y,Y=g);let C=t.controller.chart.chartArea.bottom,v=t.controller.chart.width;if(b>C){let t=b-C,e=b-L;b=C,P+=v*(t/e)}else if(L>C){let t=L-C,e=L-b;L=C,Y=v-(Y-(v-v*(t/e)))}e.lineWidth=h,"dotted"===d?e.setLineDash([2,3]):e.setLineDash([]),e.beginPath(),e.moveTo(P,b),e.lineTo(Y,L);let D=e.createLinearGradient(P,b,Y,L);L<b?(D.addColorStop(0,l),D.addColorStop(1,n)):(D.addColorStop(0,n),D.addColorStop(1,l)),e.strokeStyle=D,e.stroke(),e.closePath(),u&&(e.fillStyle=u,e.beginPath(),e.moveTo(P,b),e.lineTo(Y,L),e.lineTo(Y,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(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 o=e[i]={exports:{}};return t[i](o,o.exports,s),o.exports}(460)})();
+/*! For license information please see chartjs-plugin-trendline.min.js.LICENSE.txt */
+(()=>{var t={460:(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,r)=>{const n=e.alwaysShowTrendline||t.isDatasetVisible(r);if(e.trendlineLinear&&n&&e.data.length>1){const n=t.getDatasetMeta(r);i(n,a,e,s,t.scales[n.yAxisID])}})),a.setLineDash([])}},i=(t,e,s,i,r)=>{let n=s.borderColor||"rgba(169,169,169, .6)",o=s.trendlineLinear.colorMin||n,l=s.trendlineLinear.colorMax||n,h=s.trendlineLinear.width??s.borderWidth??3,d=s.trendlineLinear.lineStyle||"solid",u=s.trendlineLinear.fillColor;const m=t.controller.chart.options,x="object"==typeof m.parsing?m.parsing:void 0,c=s.trendlineLinear.xAxisKey||x?.xAxisKey||"x",f=s.trendlineLinear.yAxisKey||x?.yAxisKey||"y";let X=new a,y=s.data.findIndex((t=>null!=t)),p=s.data.length-1,g=t.data[y][c],w=t.data[p][c],Y="object"==typeof s.data[y];s.data.forEach(((t,e)=>{if(null!=t)if(["time","timeseries"].includes(i.options.type)){let s=null!=t[c]?t[c]:t.t;void 0!==s?X.add(new Date(s).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,P,b=i.getPixelForValue(X.minx),C=r.getPixelForValue(X.f(X.minx));if(s.trendlineLinear.projection&&X.scale()<0){let t=X.fo();t<X.minx&&(t=X.maxx),L=i.getPixelForValue(t),P=r.getPixelForValue(X.f(t))}else L=i.getPixelForValue(X.maxx),P=r.getPixelForValue(X.f(X.maxx));Y||(b=g,L=w);let D=t.controller.chart.chartArea.bottom,F=t.controller.chart.width;if(C>D){let t=C-D,e=C-P;C=D,b+=F*(t/e)}else if(P>D){let t=P-D,e=P-C;P=D,L=F-(L-(F-F*(t/e)))}e.lineWidth=h,"dotted"===d?e.setLineDash([2,3]):e.setLineDash([]),e.beginPath(),e.moveTo(b,C),e.lineTo(L,P);let v=e.createLinearGradient(b,C,L,P);P<C?(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(b,C),e.lineTo(L,P),e.lineTo(L,D),e.lineTo(b,D),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 r=e[i]={exports:{}};return t[i](r,r.exports,s),r.exports}(460)})();

package/dist/chartjs-plugin-trendline.min.js.LICENSE.txt

@@ -1,10 +1,10 @@
-/*!
- * chartjs-plugin-trendline.js
- * Version: 2.1.0
- *
- * Copyright 2024 Marcus Alsterfjord
- * Released under the MIT license
- * https://github.com/Makanz/chartjs-plugin-trendline/blob/master/README.md
- *
- * Mod by: vesal: accept also xy-data so works with scatter
- */
+/*!
+ * chartjs-plugin-trendline.js
+ * Version: 2.1.2
+ *
+ * Copyright 2024 Marcus Alsterfjord
+ * Released under the MIT license
+ * https://github.com/Makanz/chartjs-plugin-trendline/blob/master/README.md
+ *
+ * Mod by: vesal: accept also xy-data so works with scatter
+ */

package/example/barChart.html

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>BarChart Example</title>
-    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.umd.js"></script>
     <script src="./../src/chartjs-plugin-trendline.js"></script>
     <script>
             document.addEventListener("DOMContentLoaded", function(event) {

package/example/barChartWithNullValues.html

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>BarChart Example</title>
-    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.umd.js"></script>
     <script src="./../src/chartjs-plugin-trendline.js"></script>
     <script>
             document.addEventListener("DOMContentLoaded", function(event) {

package/example/lineChart.html

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>LineChart Example</title>
-    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.umd.js"></script>
     <script src="./../src/chartjs-plugin-trendline.js"></script>
     <script>
             document.addEventListener("DOMContentLoaded", function(event) {

package/example/lineChartProjection.html

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>XYlineChart Projection Example</title>
-    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.umd.js"></script>
     <script src="./../src/chartjs-plugin-trendline.js"></script>
     <script>
             document.addEventListener("DOMContentLoaded", function(event) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chartjs-plugin-trendline",
-  "version": "2.1.0",
+  "version": "2.1.2",
   "description": "Trendline for Chart.js",
   "main": "src/chartjs-plugin-trendline.js",
   "scripts": {
@@ -17,7 +17,7 @@
   },
   "homepage": "https://github.com/Makanz/chartjs-plugin-trendline#readme",
   "devDependencies": {
-    "webpack": "^5.88.2",
+    "webpack": "^5.92.1",
     "webpack-cli": "^5.1.4"
   }
 }

package/src/chartjs-plugin-trendline.js

@@ -1,6 +1,6 @@
 /*!
  * chartjs-plugin-trendline.js
- * Version: 2.1.0
+ * Version: 2.1.2
  *
  * Copyright 2024 Marcus Alsterfjord
  * Released under the MIT license
@@ -49,16 +49,19 @@ const addFitter = (datasetMeta, ctx, dataset, xScale, yScale) => {
     let defaultColor = dataset.borderColor || 'rgba(169,169,169, .6)';
     let colorMin = dataset.trendlineLinear.colorMin || defaultColor;
     let colorMax = dataset.trendlineLinear.colorMax || defaultColor;
-    let lineWidth = dataset.trendlineLinear.width || dataset.borderWidth;
+    let lineWidth = dataset.trendlineLinear.width ?? dataset.borderWidth ?? 3;
     let lineStyle = dataset.trendlineLinear.lineStyle || 'solid';
     let fillColor = dataset.trendlineLinear.fillColor;
 
-    const parsing = typeof datasetMeta.controller.chart.options.parsing === "object" ?
-        datasetMeta.controller.chart.options.parsing : undefined;
-    const xAxisKey = dataset.trendlineLinear.xAxisKey || parsing ? parsing.xAxisKey : "x";
-    const yAxisKey = dataset.trendlineLinear.yAxisKey || parsing ? parsing.yAxisKey : "y";
-
-    lineWidth = lineWidth !== undefined ? lineWidth : 3;
+    const chartOptions = datasetMeta.controller.chart.options;
+    const parsingOptions =
+        typeof chartOptions.parsing === 'object'
+            ? chartOptions.parsing
+            : undefined;
+    const xAxisKey =
+        dataset.trendlineLinear.xAxisKey || parsingOptions?.xAxisKey || 'x';
+    const yAxisKey =
+        dataset.trendlineLinear.yAxisKey || parsingOptions?.yAxisKey || 'y';
 
     let fitter = new LineFitter();
     let firstIndex = dataset.data.findIndex((d) => {