chartjs-plugin-trendline 2.0.5 → 2.1.1

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.3.
 
 ## 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.3/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 L=t.controller.chart.chartArea.bottom,P=t.controller.chart.width;if(w>L){var C=w-L,b=w-y;w=L,g+=P*(C/b)}else y>L&&(C=y-L,b=y-w,y=L,p=P-(p-(P-P*(C/b))));i.lineWidth=l,"dotted"===u?i.setLineDash([2,3]):i.setLineDash([]),i.beginPath(),i.moveTo(g,w),i.lineTo(p,y);var D=i.createLinearGradient(g,w,p,y);y<w?(D.addColorStop(0,h),D.addColorStop(1,o)):(D.addColorStop(0,o),D.addColorStop(1,h)),i.strokeStyle=D,i.stroke(),i.closePath(),!d||(i.fillStyle=d,i.beginPath(),i.moveTo(g,w),i.lineTo(p,y),i.lineTo(p,L),i.lineTo(g,L),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)})();
+/*! 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)})();

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

@@ -1,10 +1,10 @@
-/*!
- * chartjs-plugin-trendline.js
- * Version: 2.0.5
- *
- * Copyright 2023 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.1
+ *
+ * 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,8 +5,8 @@
     <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="./../src/chartjs-plugin-trendline.js"></script>
+    <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>
             document.addEventListener("DOMContentLoaded", function(event) {
                 // Bar chart

package/example/barChartWithNullValues.html

@@ -5,8 +5,8 @@
     <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="./../src/chartjs-plugin-trendline.js"></script>
+    <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>
             document.addEventListener("DOMContentLoaded", function(event) {
                 // Bar chart

package/example/lineChart.html

@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <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.3/dist/chart.umd.js"></script>
+    <script src="./../dist/chartjs-plugin-trendline.min.js"></script>
+    <script>
+            document.addEventListener("DOMContentLoaded", function(event) {
+                new Chart(document.getElementById("line-chart"), {
+                        type: 'line',
+                        data: {
+                            labels: [1500,1600,1700,1750,1800,1850,1900,1950,1999,2050],
+                            datasets: [{ 
+                                data: [86,114,106,106,107,111,133,221,783,2478],
+                                label: "Africa",
+                                borderColor: "#3e95cd",
+                                fill: false,
+                                trendlineLinear: {
+                                    colorMin: "#3e95cd",
+                                    lineStyle: "line",
+                                    width: 1
+                                }
+                            }, { 
+                                data: [282,350,411,502,635,809,947,1402,3700,5267],
+                                label: "Asia",
+                                borderColor: "#8e5ea2",
+                                fill: false,
+                                trendlineLinear: {
+                                    colorMin: "red",
+                                    colorMax: "green",
+                                    lineStyle: "line",
+                                    width: 1
+                                }
+                            }, { 
+                                data: [168,170,178,190,203,276,408,547,675,734],
+                                label: "Europe",
+                                borderColor: "#3cba9f",
+                                fill: false
+                            }, { 
+                                data: [40,20,10,16,24,38,74,167,508,784],
+                                label: "Latin America",
+                                borderColor: "#e8c3b9",
+                                fill: false
+                            }, { 
+                                data: [6,3,2,2,7,26,82,172,312,433],
+                                label: "North America",
+                                borderColor: "#c45850",
+                                fill: false
+                            }
+                            ]
+                        },
+                        options: {
+                            title: {
+                            display: true,
+                            text: 'World population per region (in millions)'
+                            }
+                        }
+                        });
+                });
+        </script>
+</head>
+<body>
+    <h1>Line Chart</h1>
+
+    <div style="width: 800px;">
+        <canvas id="line-chart"></canvas>
+    </div>
+
+</body>
+</html>

package/example/lineChartProjection.html

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chartjs-plugin-trendline",
-  "version": "2.0.5",
+  "version": "2.1.1",
   "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.90.0",
     "webpack-cli": "^5.1.4"
   }
 }

package/src/chartjs-plugin-trendline.js

@@ -1,37 +1,38 @@
 /*!
  * chartjs-plugin-trendline.js
- * Version: 2.0.5
+ * Version: 2.1.1
  *
- * 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 = {
+import { LineFitter } from './classes/lineFitter.js';
+
+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);
 
-            // TODO: Add support for objects
             if (
                 dataset.trendlineLinear &&
                 showTrendline &&
                 dataset.data.length > 1
             ) {
-                var datasetMeta = chartInstance.getDatasetMeta(index);
+                const datasetMeta = chartInstance.getDatasetMeta(index);
                 addFitter(
                     datasetMeta,
                     ctx,
@@ -46,33 +47,35 @@ 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;
-
-    lineWidth = lineWidth !== undefined ? lineWidth : 3;
-
-    var fitter = new LineFitter();
-    var firstIndex = dataset.data.findIndex((d) => {
+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 ?? 3;
+    let lineStyle = dataset.trendlineLinear.lineStyle || 'solid';
+    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';
+
+    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) {
-        console.log('forEach');
+    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);
             }
@@ -89,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);
 
@@ -114,24 +117,24 @@ 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);
@@ -149,7 +152,7 @@ function addFitter(datasetMeta, ctx, dataset, xScale, yScale) {
     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);
@@ -173,56 +176,6 @@ 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;
-}
-
-LineFitter.prototype = {
-    add: function (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: function (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;
-        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;
-
-        //  Get x when y = 0
-        var 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;
-
-        return scale;
-    },
 };
 
 // If we're in the browser and have access to the global Chart obj, register plugin automatically

package/src/classes/lineFitter.js

@@ -0,0 +1,52 @@
+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;
+    };
+}

package/example/lineChart-blood-sugar.html

@@ -1,72 +0,0 @@
-<html>
-
-<head>
-  <title>Time scale chart.js</title>
-</head>
-<style>
-  .chartBox {
-    width: 700px
-  }
-</style>
-
-<body>
-  <div class="chartBox">
-    <canvas id="myChart"></canvas>
-  </div>
-
-  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-
-  <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
-
-  <script src="./../src/chartjs-plugin-trendline.js"></script>
-
-  <script>
-    const data = {
-      "labels": [
-    "2023-08-10 20:00:00",
-    "2023-08-10 21:30:00",
-    "2023-08-10 22:30:30",
-    "2023-08-11 07:00:00",
-    "2023-08-11 07:15:00",
-    "2023-08-11 08:00:00"
-  ],
-  "datasets": [
-    {
-      "type": "line",
-      "label": "Blood Sugar",
-      "data": {
-        "2023-08-10 21:30:00": "6.20",
-        "2023-08-10 22:30:30": "6.60",
-        "2023-08-11 07:00:00": "5.90",
-        "2023-08-11 08:00:00": "4.60",
-        "2023-08-11 11:17:00": "5.10",
-        "2023-08-11 12:15:00": "4.90"
-      },
-      "backgroundColor": "#A9CCE3",
-      "pointStyle": "circle",
-      "pointRadius": 6,
-      "pointHoverRadius": 12,
-      "borderColor": "#5DADE2",
-      "trendlineLinear": {
-        "colorMin": "red",
-        "colorMax": "green",
-        "lineStyle": "dotted",
-        "width": 3,
-        "projection": true
-      }
-    }
-  ],
-    };
-    const config = {
-      type: 'line',
-      data
-    };
-    console.log("Loaded");
-    const myChart = new Chart(
-      document.getElementById('myChart'),
-      config,
-    );
-  </script>
-</body>
-
-</html>

package/example/lineChart-double.html

@@ -1,111 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <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="./../src/chartjs-plugin-trendline.js"></script>
-    <script>
-let data = {
-    "labels": [
-        202303,
-        202304,
-        202305,
-        202306,
-        202307,
-        202308,
-        202309
-    ],
-    "datasets": [
-    {
-        "label": "Dataset 1",
-        "data": [
-            10,
-            30,
-            50,
-            20,
-            25,
-            44,
-            -10
-        ],
-        "borderColor": "#4dc9f6",
-        "backgroundColor": "#4dc9f6",
-        "trendlineLinear": {
-            "colorMin": "#4dc9f6",
-            "colorMax": "#4dc9f6",
-            "lineStyle": "dotted",
-            "width": 2,
-            "projection": false
-        }
-    },
-    {
-        "label": "Dataset 2",
-        "data": [
-            100,
-            33,
-            22,
-            19,
-            11,
-            49,
-            200
-        ],
-        "borderColor": "#f67019",
-        "backgroundColor": "#f67019",
-        "trendlineLinear": {
-            "colorMin": "#f67019",
-            "colorMax": "#f67019",
-            "lineStyle": "solid",
-            "width": 2,
-            "projection": false
-        }
-    }
-]
-};
-
-var lineOptions = {
-    plugins: {
-        legend: {
-            display: true,
-            labels: {
-                fontSize: 10,
-                fontColor: "#000",
-            },
-        },
-    },
-    scales: {
-        x:
-        {
-            gridLines: {
-                display: true,
-            },
-            display: true,
-            color: "rgba(255, 255, 255, 0.1)",
-        },
-        y:
-        {
-            display: false,
-        },
-    },
-    responsive: true,
-    maintainAspectRatio: true,
-};
-            document.addEventListener("DOMContentLoaded", function(event) {
-                new Chart(document.getElementById("line-chart"), {
-                        type: 'line',
-                        data: data,
-                        options:lineOptions
-                        });
-                });
-        </script>
-</head>
-<body>
-    <h1>Line Chart</h1>
-
-    <div style="width: 800px;">
-        <canvas id="line-chart"></canvas>
-    </div>
-
-</body>
-</html>

package/example/lineChart-time-scale.html

@@ -1,67 +0,0 @@
-<html>
-
-<head>
-  <title>Time scale chart.js</title>
-</head>
-<style>
-  .chartBox {
-    width: 700px
-  }
-</style>
-
-<body>
-  <div class="chartBox">
-    <canvas id="myChart"></canvas>
-  </div>
-
-  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-
-  <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
-
-  <script src="./../src/chartjs-plugin-trendline.js"></script>
-
-  <script>
-    const data = {
-      labels: [
-        "2023-01-01T08:00:00.000Z",
-        "2023-01-02T08:00:00.000Z",
-        "2023-01-03T08:00:00.000Z",
-        "2023-01-04T08:00:00.000Z",
-      ],
-      datasets: [{
-        label: "Default",
-        data: [65, 59, 80, 81],
-        trendlineLinear: {
-          colorMin: "red",
-          colorMax: "green",
-          lineStyle: "dotted",
-          width: 2,
-          projection: false,
-        },
-      }],
-    };
-    const config = {
-      type: 'line',
-      data,
-      options: {
-        scales: {
-          x: {
-            type: 'time',
-            time: {
-              unit: 'day',
-            },
-          },
-          y: {
-            beginAtZero: true
-          }
-        }
-      }
-    };
-    const myChart = new Chart(
-      document.getElementById('myChart'),
-      config,
-    );
-  </script>
-</body>
-
-</html>