chartjs-plugin-trendline 2.0.3 → 2.0.5

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;m.add(new Date(e).getTime(),t.y)}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,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)})();

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

@@ -1,6 +1,6 @@
 /*!
  * chartjs-plugin-trendline.js
- * Version: 2.0.3
+ * Version: 2.0.5
  *
  * Copyright 2023 Marcus Alsterfjord
  * Released under the MIT license

package/example/lineChart-blood-sugar.html

@@ -0,0 +1,72 @@
+<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

@@ -0,0 +1,111 @@
+<!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

@@ -0,0 +1,67 @@
+<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>

package/package.json

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

package/src/chartjs-plugin-trendline.js

@@ -1,6 +1,6 @@
 /*!
  * chartjs-plugin-trendline.js
- * Version: 2.0.3
+ * Version: 2.0.5
  *
  * Copyright 2023 Marcus Alsterfjord
  * Released under the MIT license
@@ -25,6 +25,7 @@ var pluginTrendlineLinear = {
                 dataset.alwaysShowTrendline ||
                 chartInstance.isDatasetVisible(index);
 
+            // TODO: Add support for objects
             if (
                 dataset.trendlineLinear &&
                 showTrendline &&
@@ -65,11 +66,16 @@ function addFitter(datasetMeta, ctx, dataset, xScale, yScale) {
     var xy = typeof dataset.data[firstIndex] === 'object';
 
     dataset.data.forEach(function (data, index) {
+        console.log('forEach');
         if (data == null) return;
 
         if (['time', 'timeseries'].includes(xScale.options.type)) {
             var x = data.x != null ? data.x : data.t;
-            fitter.add(new Date(x).getTime(), data.y);
+            if (x !== undefined) {
+                fitter.add(new Date(x).getTime(), data.y);
+            } else {
+                fitter.add(index, data);
+            }
         } else if (xy) {
             if (!isNaN(data.x) && !isNaN(data.y)) {
                 fitter.add(data.x, data.y);
@@ -132,9 +138,13 @@ function addFitter(datasetMeta, ctx, dataset, xScale, yScale) {
     }
 
     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);

package/example/lineChart.html

@@ -1,73 +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>
-            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>