chartjs-plugin-trendline 2.1.1 → 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

@@ -11,7 +11,7 @@ Load Chart.js first, then the plugin which will automatically register itself wi
 
 ```html
 <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"></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 */
-(()=>{"use strict";var t={228:(t,e,s)=>{class i{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}}t=s.hmd(t);const a={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 i=t.ctx;t.data.datasets.forEach(((e,a)=>{const o=e.alwaysShowTrendline||t.isDatasetVisible(a);if(e.trendlineLinear&&o&&e.data.length>1){const o=t.getDatasetMeta(a);r(o,i,e,s,t.scales[o.yAxisID])}})),i.setLineDash([])}},r=(t,e,s,a,r)=>{let o=s.borderColor||"rgba(169,169,169, .6)",n=s.trendlineLinear.colorMin||o,l=s.trendlineLinear.colorMax||o,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",p=s.trendlineLinear.yAxisKey||x?.yAxisKey||"y";let f=new i,y=s.data.findIndex((t=>null!=t)),X=s.data.length-1,g=t.data[y][c],w=t.data[X][c],Y="object"==typeof s.data[y];s.data.forEach(((t,e)=>{if(null!=t)if(["time","timeseries"].includes(a.options.type)){let s=null!=t[c]?t[c]:t.t;void 0!==s?f.add(new Date(s).getTime(),t[p]):f.add(e,t)}else Y?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 b,L,P=a.getPixelForValue(f.minx),C=r.getPixelForValue(f.f(f.minx));if(s.trendlineLinear.projection&&f.scale()<0){let t=f.fo();t<f.minx&&(t=f.maxx),b=a.getPixelForValue(t),L=r.getPixelForValue(f.f(t))}else b=a.getPixelForValue(f.maxx),L=r.getPixelForValue(f.f(f.maxx));Y||(P=g,b=w);let S=t.controller.chart.chartArea.bottom,D=t.controller.chart.width;if(C>S){let t=C-S,e=C-L;C=S,P+=D*(t/e)}else if(L>S){let t=L-S,e=L-C;L=S,b=D-(b-(D-D*(t/e)))}e.lineWidth=h,"dotted"===d?e.setLineDash([2,3]):e.setLineDash([]),e.beginPath(),e.moveTo(P,C),e.lineTo(b,L);let F=e.createLinearGradient(P,C,b,L);L<C?(F.addColorStop(0,l),F.addColorStop(1,n)):(F.addColorStop(0,n),F.addColorStop(1,l)),e.strokeStyle=F,e.stroke(),e.closePath(),u&&(e.fillStyle=u,e.beginPath(),e.moveTo(P,C),e.lineTo(b,L),e.lineTo(b,S),e.lineTo(P,S),e.closePath(),e.fill())};"undefined"!=typeof window&&window.Chart&&(window.Chart.hasOwnProperty("register")?window.Chart.register(a):window.Chart.plugins.register(a));try{t.exports=exports=a}catch(t){}}},e={};function s(i){var a=e[i];if(void 0!==a)return a.exports;var r=e[i]={id:i,loaded:!1,exports:{}};return t[i](r,r.exports,s),r.loaded=!0,r.exports}s.hmd=t=>((t=Object.create(t)).children||(t.children=[]),Object.defineProperty(t,"exports",{enumerable:!0,set:()=>{throw new Error("ES Modules may not assign module.exports or exports.*, Use ESM export syntax, instead: "+t.id)}}),t),s(228)})();
+(()=>{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,6 +1,6 @@
 /*!
  * chartjs-plugin-trendline.js
- * Version: 2.1.1
+ * Version: 2.1.2
  *
  * Copyright 2024 Marcus Alsterfjord
  * Released under the MIT license

package/example/barChart.html

@@ -6,7 +6,7 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>BarChart Example</title>
     <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.umd.js"></script>
-    <script src="./../dist/chartjs-plugin-trendline.min.js"></script>
+    <script src="./../src/chartjs-plugin-trendline.js"></script>
     <script>
             document.addEventListener("DOMContentLoaded", function(event) {
                 // Bar chart

package/example/barChartWithNullValues.html

@@ -6,7 +6,7 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>BarChart Example</title>
     <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.umd.js"></script>
-    <script src="./../dist/chartjs-plugin-trendline.min.js"></script>
+    <script src="./../src/chartjs-plugin-trendline.js"></script>
     <script>
             document.addEventListener("DOMContentLoaded", function(event) {
                 // Bar chart

package/example/lineChart.html

@@ -6,7 +6,7 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>LineChart Example</title>
     <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.umd.js"></script>
-    <script src="./../dist/chartjs-plugin-trendline.min.js"></script>
+    <script src="./../src/chartjs-plugin-trendline.js"></script>
     <script>
             document.addEventListener("DOMContentLoaded", function(event) {
                 new Chart(document.getElementById("line-chart"), {

package/example/lineChartProjection.html

@@ -6,7 +6,7 @@
     <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.3/dist/chart.umd.js"></script>
-    <script src="./../dist/chartjs-plugin-trendline.min.js"></script>
+    <script src="./../src/chartjs-plugin-trendline.js"></script>
     <script>
             document.addEventListener("DOMContentLoaded", function(event) {
                 new Chart(document.getElementById("line-chart"), {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chartjs-plugin-trendline",
-  "version": "2.1.1",
+  "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.90.0",
+    "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.1
+ * Version: 2.1.2
  *
  * Copyright 2024 Marcus Alsterfjord
  * Released under the MIT license
@@ -8,8 +8,6 @@
  *
  * Mod by: vesal: accept also xy-data so works with scatter
  */
-import { LineFitter } from './classes/lineFitter.js';
-
 const pluginTrendlineLinear = {
     id: 'chartjs-plugin-trendline',
     afterDatasetsDraw: (chartInstance) => {
@@ -56,9 +54,14 @@ const addFitter = (datasetMeta, ctx, dataset, xScale, yScale) => {
     let fillColor = dataset.trendlineLinear.fillColor;
 
     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';
+    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) => {
@@ -178,6 +181,59 @@ const addFitter = (datasetMeta, ctx, dataset, xScale, yScale) => {
     }
 };
 
+class LineFitter {
+    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(x, y) {
+        x = parseFloat(x);
+        y = parseFloat(y);
+
+        this.count++;
+        this.sumX += x;
+        this.sumX2 += x * x;
+        this.sumXY += x * y;
+        this.sumY += y;
+        if (x < this.minx) this.minx = x;
+        if (x > this.maxx) this.maxx = x;
+        if (y > this.maxy) this.maxy = y;
+    }
+
+    f(x) {
+        x = parseFloat(x);
+
+        let det = this.count * this.sumX2 - this.sumX * this.sumX;
+        let offset = (this.sumX2 * this.sumY - this.sumX * this.sumXY) / det;
+        let scale = (this.count * this.sumXY - this.sumX * this.sumY) / det;
+        return offset + x * scale;
+    }
+
+    fo() {
+        let det = this.count * this.sumX2 - this.sumX * this.sumX;
+        let offset = (this.sumX2 * this.sumY - this.sumX * this.sumXY) / det;
+        let scale = (this.count * this.sumXY - this.sumX * this.sumY) / det;
+
+        // Get x when y = 0
+        let xo = -offset / scale;
+        return xo;
+    }
+
+    scale() {
+        let det = this.count * this.sumX2 - this.sumX * this.sumX;
+        let scale = (this.count * this.sumXY - this.sumX * this.sumY) / det;
+
+        return scale;
+    }
+}
+
 // If we're in the browser and have access to the global Chart obj, register plugin automatically
 if (typeof window !== 'undefined' && window.Chart) {
     if (window.Chart.hasOwnProperty('register')) {

package/src/classes/lineFitter.js

@@ -1,52 +0,0 @@
-export class LineFitter {
-    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 = (x, y) => {
-        x = parseFloat(x);
-        y = parseFloat(y);
-
-        this.count++;
-        this.sumX += x;
-        this.sumX2 += x * x;
-        this.sumXY += x * y;
-        this.sumY += y;
-        if (x < this.minx) this.minx = x;
-        if (x > this.maxx) this.maxx = x;
-        if (y > this.maxy) this.maxy = y;
-    };
-
-    f = (x) => {
-        x = parseFloat(x);
-
-        let det = this.count * this.sumX2 - this.sumX * this.sumX;
-        let offset = (this.sumX2 * this.sumY - this.sumX * this.sumXY) / det;
-        let scale = (this.count * this.sumXY - this.sumX * this.sumY) / det;
-        return offset + x * scale;
-    };
-
-    fo = () => {
-        let det = this.count * this.sumX2 - this.sumX * this.sumX;
-        let offset = (this.sumX2 * this.sumY - this.sumX * this.sumXY) / det;
-        let scale = (this.count * this.sumXY - this.sumX * this.sumY) / det;
-
-        // Get x when y = 0
-        let xo = -offset / scale;
-        return xo;
-    };
-
-    scale = () => {
-        let det = this.count * this.sumX2 - this.sumX * this.sumX;
-        let scale = (this.count * this.sumXY - this.sumX * this.sumY) / det;
-
-        return scale;
-    };
-}