chartjs-plugin-trendline 2.0.4 → 2.1.0

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.3.0.
+It has been tested with Chart.js version 4.4.0.
 
 ## Installation
 
@@ -10,7 +10,7 @@ It has been tested with Chart.js version 4.3.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.3.0/dist/chart.min.js"></script>
+<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>
 ```
 
@@ -38,6 +38,8 @@ To configure the trendline plugin you simply add a new config options to your da
 		colorMax: "green",
 		lineStyle: "dotted|solid",
 		width: 2,
+		xAxisKey: "time" (optional),
+		yAxisKey: "usage" (optional),
 		projection: true|false (optional)
 	}
 }

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,i)=>{var e={id:"chartjs-plugin-trendline",afterDatasetsDraw:function(t){var i,e;for(var a in t.scales)if("x"==a[0]?e=t.scales[a]:i=t.scales[a],e&&i)break;var r=t.ctx;t.data.datasets.forEach((function(i,a){var n=i.alwaysShowTrendline||t.isDatasetVisible(a);if(i.trendlineLinear&&n&&i.data.length>1){var o=t.getDatasetMeta(a);!function(t,i,e,a,r){var n=e.borderColor||"rgba(169,169,169, .6)",o=e.trendlineLinear.colorMin||n,h=e.trendlineLinear.colorMax||n,l=e.trendlineLinear.width||e.borderWidth,u=e.trendlineLinear.lineStyle||"solid",d=e.trendlineLinear.fillColor;l=void 0!==l?l:3;var m=new s,x=e.data.findIndex((t=>null!=t)),c=e.data.length-1,f=t.data[x].x,X=t.data[c].x,v="object"==typeof e.data[x];e.data.forEach((function(t,i){if(null!=t)if(["time","timeseries"].includes(a.options.type)){var e=null!=t.x?t.x:t.t;void 0!==e?m.add(new Date(e).getTime(),t.y):m.add(i,t)}else v?isNaN(t.x)||isNaN(t.y)?isNaN(t.x)?isNaN(t.y)||m.add(i,t.y):m.add(i,t.x):m.add(t.x,t.y):m.add(i,t)}));var p,y,g=a.getPixelForValue(m.minx),w=r.getPixelForValue(m.f(m.minx));if(e.trendlineLinear.projection&&m.scale()<0){var Y=m.fo();Y<m.minx&&(Y=m.maxx),p=a.getPixelForValue(Y),y=r.getPixelForValue(m.f(Y))}else p=a.getPixelForValue(m.maxx),y=r.getPixelForValue(m.f(m.maxx));v||(g=f,p=X);var P=t.controller.chart.chartArea.bottom,C=t.controller.chart.width;if(w>P){var L=w-P,b=w-y;w=P,g+=C*(L/b)}else y>P&&(L=y-P,b=y-w,y=P,p=C-(p-(C-C*(L/b))));i.lineWidth=l,"dotted"===u&&i.setLineDash([2,3]),i.beginPath(),i.moveTo(g,w),i.lineTo(p,y);var F=i.createLinearGradient(g,w,p,y);y<w?(F.addColorStop(0,h),F.addColorStop(1,o)):(F.addColorStop(0,o),F.addColorStop(1,h)),i.strokeStyle=F,i.stroke(),i.closePath(),!d||(i.fillStyle=d,i.beginPath(),i.moveTo(g,w),i.lineTo(p,y),i.lineTo(p,P),i.lineTo(g,P),i.closePath(),i.fill())}(o,r,i,e,t.scales[o.yAxisID])}})),r.setLineDash([])}};function s(){this.count=0,this.sumX=0,this.sumX2=0,this.sumXY=0,this.sumY=0,this.minx=1e100,this.maxx=-1e100,this.maxy=-1e100}s.prototype={add:function(t,i){t=parseFloat(t),i=parseFloat(i),this.count++,this.sumX+=t,this.sumX2+=t*t,this.sumXY+=t*i,this.sumY+=i,t<this.minx&&(this.minx=t),t>this.maxx&&(this.maxx=t),i>this.maxy&&(this.maxy=i)},f:function(t){t=parseFloat(t);var i=this.count*this.sumX2-this.sumX*this.sumX;return(this.sumX2*this.sumY-this.sumX*this.sumXY)/i+t*((this.count*this.sumXY-this.sumX*this.sumY)/i)},fo:function(){var 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:function(){var 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(e):window.Chart.plugins.register(e));try{t.exports=e}catch(t){}}},i={};!function e(s){var a=i[s];if(void 0!==a)return a.exports;var r=i[s]={exports:{}};return t[s](r,r.exports,e),r.exports}(460)})();
+(()=>{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)})();

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

@@ -1,8 +1,8 @@
 /*!
  * chartjs-plugin-trendline.js
- * Version: 2.0.4
+ * Version: 2.1.0
  *
- * Copyright 2023 Marcus Alsterfjord
+ * Copyright 2024 Marcus Alsterfjord
  * Released under the MIT license
  * https://github.com/Makanz/chartjs-plugin-trendline/blob/master/README.md
  *

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.3.0/dist/chart.umd.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/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.3.0/dist/chart.umd.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/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.3.0/dist/chart.umd.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/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.3.0/dist/chart.umd.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/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.0.4",
+  "version": "2.1.0",
   "description": "Trendline for Chart.js",
   "main": "src/chartjs-plugin-trendline.js",
   "scripts": {

package/src/chartjs-plugin-trendline.js

@@ -1,27 +1,27 @@
 /*!
  * chartjs-plugin-trendline.js
- * Version: 2.0.4
+ * Version: 2.1.0
  *
- * Copyright 2023 Marcus Alsterfjord
+ * 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
  */
-var pluginTrendlineLinear = {
+const pluginTrendlineLinear = {
     id: 'chartjs-plugin-trendline',
-    afterDatasetsDraw: function (chartInstance) {
-        var yScale;
-        var xScale;
-        for (var axis in chartInstance.scales) {
+    afterDatasetsDraw: (chartInstance) => {
+        let yScale;
+        let xScale;
+        for (let axis in chartInstance.scales) {
             if (axis[0] == 'x') xScale = chartInstance.scales[axis];
             else yScale = chartInstance.scales[axis];
             if (xScale && yScale) break;
         }
-        var ctx = chartInstance.ctx;
+        const ctx = chartInstance.ctx;
 
-        chartInstance.data.datasets.forEach(function (dataset, index) {
-            var showTrendline =
+        chartInstance.data.datasets.forEach((dataset, index) => {
+            const showTrendline =
                 dataset.alwaysShowTrendline ||
                 chartInstance.isDatasetVisible(index);
 
@@ -30,7 +30,7 @@ var pluginTrendlineLinear = {
                 showTrendline &&
                 dataset.data.length > 1
             ) {
-                var datasetMeta = chartInstance.getDatasetMeta(index);
+                const datasetMeta = chartInstance.getDatasetMeta(index);
                 addFitter(
                     datasetMeta,
                     ctx,
@@ -45,32 +45,37 @@ var pluginTrendlineLinear = {
     },
 };
 
-function addFitter(datasetMeta, ctx, dataset, xScale, yScale) {
-    var defaultColor = dataset.borderColor || 'rgba(169,169,169, .6)';
-    var colorMin = dataset.trendlineLinear.colorMin || defaultColor;
-    var colorMax = dataset.trendlineLinear.colorMax || defaultColor;
-    var lineWidth = dataset.trendlineLinear.width || dataset.borderWidth;
-    var lineStyle = dataset.trendlineLinear.lineStyle || 'solid';
-    var fillColor = dataset.trendlineLinear.fillColor;
+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 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;
 
-    var fitter = new LineFitter();
-    var firstIndex = dataset.data.findIndex((d) => {
+    let fitter = new LineFitter();
+    let firstIndex = dataset.data.findIndex((d) => {
         return d !== undefined && d !== null;
     });
-    var lastIndex = dataset.data.length - 1;
-    var startPos = datasetMeta.data[firstIndex].x;
-    var endPos = datasetMeta.data[lastIndex].x;
-    var xy = typeof dataset.data[firstIndex] === 'object';
+    let lastIndex = dataset.data.length - 1;
+    let startPos = datasetMeta.data[firstIndex][xAxisKey];
+    let endPos = datasetMeta.data[lastIndex][xAxisKey];
+    let xy = typeof dataset.data[firstIndex] === 'object';
 
-    dataset.data.forEach(function (data, index) {
+    dataset.data.forEach((data, index) => {
         if (data == null) return;
 
         if (['time', 'timeseries'].includes(xScale.options.type)) {
-            var x = data.x != null ? data.x : data.t;
+            let x = data[xAxisKey] != null ? data[xAxisKey] : data.t;
             if (x !== undefined) {
-                fitter.add(new Date(x).getTime(), data.y);
+                fitter.add(new Date(x).getTime(), data[yAxisKey]);
             } else {
                 fitter.add(index, data);
             }
@@ -87,16 +92,16 @@ function addFitter(datasetMeta, ctx, dataset, xScale, yScale) {
         }
     });
 
-    var x1 = xScale.getPixelForValue(fitter.minx);
-    var y1 = yScale.getPixelForValue(fitter.f(fitter.minx));
+    let x1 = xScale.getPixelForValue(fitter.minx);
+    let y1 = yScale.getPixelForValue(fitter.f(fitter.minx));
 
-    var x2;
-    var y2;
+    let x2;
+    let y2;
 
     // Project only on x axes, do not project if trendline will never hit x axes
     if (dataset.trendlineLinear.projection && fitter.scale() < 0) {
         //  X
-        var x2value = fitter.fo();
+        let x2value = fitter.fo();
         if (x2value < fitter.minx) x2value = fitter.maxx;
         x2 = xScale.getPixelForValue(x2value);
 
@@ -112,38 +117,42 @@ function addFitter(datasetMeta, ctx, dataset, xScale, yScale) {
         x2 = endPos;
     }
 
-    var drawBottom = datasetMeta.controller.chart.chartArea.bottom;
-    var chartWidth = datasetMeta.controller.chart.width;
+    let drawBottom = datasetMeta.controller.chart.chartArea.bottom;
+    let chartWidth = datasetMeta.controller.chart.width;
 
     if (y1 > drawBottom) {
         // Left side is below zero
-        var diff = y1 - drawBottom;
-        var lineHeight = y1 - y2;
-        var overlapPercentage = diff / lineHeight;
-        var addition = chartWidth * overlapPercentage;
+        let diff = y1 - drawBottom;
+        let lineHeight = y1 - y2;
+        let overlapPercentage = diff / lineHeight;
+        let addition = chartWidth * overlapPercentage;
 
         y1 = drawBottom;
         x1 = x1 + addition;
     } else if (y2 > drawBottom) {
         // right side is below zero
-        var diff = y2 - drawBottom;
-        var lineHeight = y2 - y1;
-        var overlapPercentage = diff / lineHeight;
-        var subtraction = chartWidth - chartWidth * overlapPercentage;
+        let diff = y2 - drawBottom;
+        let lineHeight = y2 - y1;
+        let overlapPercentage = diff / lineHeight;
+        let subtraction = chartWidth - chartWidth * overlapPercentage;
 
         y2 = drawBottom;
         x2 = chartWidth - (x2 - subtraction);
     }
 
     ctx.lineWidth = lineWidth;
+
     if (lineStyle === 'dotted') {
-        ctx.setLineDash([2, 3]);
+        ctx.setLineDash([2, 3]); // Dotted
+    } else {
+        ctx.setLineDash([]); // Solid
     }
+
     ctx.beginPath();
     ctx.moveTo(x1, y1);
     ctx.lineTo(x2, y2);
 
-    var gradient = ctx.createLinearGradient(x1, y1, x2, y2);
+    let gradient = ctx.createLinearGradient(x1, y1, x2, y2);
     if (y2 < y1) {
         gradient.addColorStop(0, colorMax);
         gradient.addColorStop(1, colorMin);
@@ -167,21 +176,21 @@ function addFitter(datasetMeta, ctx, dataset, xScale, yScale) {
         ctx.closePath();
         ctx.fill();
     }
-}
+};
 
-function LineFitter() {
-    this.count = 0;
-    this.sumX = 0;
-    this.sumX2 = 0;
-    this.sumXY = 0;
-    this.sumY = 0;
-    this.minx = 1e100;
-    this.maxx = -1e100;
-    this.maxy = -1e100;
-}
+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;
+    }
 
-LineFitter.prototype = {
-    add: function (x, y) {
+    add(x, y) {
         x = parseFloat(x);
         y = parseFloat(y);
 
@@ -193,31 +202,34 @@ LineFitter.prototype = {
         if (x < this.minx) this.minx = x;
         if (x > this.maxx) this.maxx = x;
         if (y > this.maxy) this.maxy = y;
-    },
-    f: function (x) {
+    }
+
+    f(x) {
         x = parseFloat(x);
 
-        var det = this.count * this.sumX2 - this.sumX * this.sumX;
-        var offset = (this.sumX2 * this.sumY - this.sumX * this.sumXY) / det;
-        var scale = (this.count * this.sumXY - this.sumX * this.sumY) / det;
+        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: function () {
-        var det = this.count * this.sumX2 - this.sumX * this.sumX;
-        var offset = (this.sumX2 * this.sumY - this.sumX * this.sumXY) / det;
-        var scale = (this.count * this.sumXY - this.sumX * this.sumY) / det;
+    }
+
+    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
-        var xo = -offset / scale;
+        // Get x when y = 0
+        let xo = -offset / scale;
         return xo;
-    },
-    scale: function () {
-        var det = this.count * this.sumX2 - this.sumX * this.sumX;
-        var scale = (this.count * this.sumXY - this.sumX * this.sumY) / det;
+    }
+
+    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) {