npm - chartjs-plugin-trendline - Versions diffs - 0.2.2 → 1.0.3 - Mend

chartjs-plugin-trendline 0.2.2 → 1.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (14) hide show

package/.prettierrc +6 -0
package/README.md +4 -3
package/dist/chartjs-plugin-trendline.min.js +2 -1
package/dist/chartjs-plugin-trendline.min.js.LICENSE.txt +10 -0
package/example/barChart.html +2 -2
package/example/lineChart.html +2 -2
package/example/lineChartProjection.html +55 -0
package/package.json +4 -10
package/src/chartjs-plugin-trendline.js +101 -52
package/webpack.config.js +9 -0
package/example/ScatterChart.html +0 -75
package/example/XYlineChart.html +0 -75
package/gulpfile.js +0 -37
package/shrinkwrap.yaml +0 -2608

package/.prettierrc ADDED Viewed

@@ -0,0 +1,6 @@
+{
+    "trailingComma": "es5",
+    "tabWidth": 4,
+    "semi": true,
+    "singleQuote": true
+}

package/README.md CHANGED Viewed

@@ -1,6 +1,6 @@
 # chartjs-plugin-trendline
-This plugin draws an linear trendline in your Chart. Made for Chart.js > 2.0
+This plugin draws an linear trendline in your Chart. Made for Chart.js 3.X
 ## Installation
@@ -9,7 +9,7 @@ This plugin draws an linear trendline in your Chart. Made for Chart.js > 2.0
 Load ChartJS first, then the plugin which will automatically register itself with ChartJS
 ```html
-<script src="https://cdn.jsdelivr.net/npm/chart.js/dist/Chart.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/chart.js@3.8.0/dist/chart.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-trendline"></script>
 ```
@@ -35,7 +35,8 @@ To configure the trendline plugin you simply add a new config options to your da
 	trendlineLinear: {
 		style: "rgba(255,105,180, .8)",
 		lineStyle: "dotted|solid",
-		width: 2
+		width: 2,
+		projection: true|false (optional)
 	}
 }
 ```

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

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

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

@@ -0,0 +1,10 @@
+/*!
+ * chartjs-plugin-trendline.js
+ * Version: 1.0.3
+ *
+ * Copyright 2022 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 CHANGED Viewed

@@ -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://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
-    <script src="../src/chartjs-plugin-trendline.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.8.0/dist/chart.min.js"></script>
+    <script src="./../src/chartjs-plugin-trendline.js"></script>
     <script>
             document.addEventListener("DOMContentLoaded", function(event) {
                 // Bar chart

package/example/lineChart.html CHANGED Viewed

@@ -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>LineChart Example</title>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
-    <script src="../src/chartjs-plugin-trendline.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.8.0/dist/chart.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 ADDED Viewed

@@ -0,0 +1,55 @@
+<!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>XYlineChart Projection Example</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.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: {
+                            datasets: [{
+                                data: [{x: 0, y: 30}, {x: 5, y:25}, {x: 10, y: 23}],
+                                label: "Count",
+                                borderColor: "#3e95cd",
+                                fill: false,
+                                trendlineLinear: {
+                                    style: "#3e95cd",
+                                    lineStyle: "line",
+                                    width: 1,
+                                    projection: true
+                                }
+                            }, {
+                            	data: [{x: 60, y: 0}],
+                              borderColor: "black",
+                              label: "Goal",
+                              fill: false
+                            }]
+                        },
+                        options: {
+                            title: {
+                                display: true,
+                                text: 'Cigarettes per days',
+                            },
+                            maintainAspectRatio: false,
+                            responsive: true,
+                            scales: {
+                                xAxes: [{ type: 'linear', position: 'bottom', scaleLabel: { labelString: 'days', display: true}}],
+                                yAxes: [{ type: 'linear', position: 'left',   scaleLabel: { labelString: 'cigarretts/day', display: true}, display: true }],
+                            }
+                        }
+                        });
+                });
+        </script>
+</head>
+<body>
+    <h1>X/Y Chart with trendline projection on x axis</h1>
+    <canvas id="line-chart" width="600" height="450"></canvas>
+    <p>Using example code from <a href="http://tobiasahlin.com/blog/chartjs-charts-to-get-you-started/" target="_blank">tobiasahlin.com.</a></p>
+</body>
+</html>

package/package.json CHANGED Viewed

@@ -1,12 +1,10 @@
 {
   "name": "chartjs-plugin-trendline",
-  "version": "0.2.2",
+  "version": "1.0.3",
   "description": "Trendline for Chart.js",
   "main": "src/chartjs-plugin-trendline.js",
   "scripts": {
-    "build": "gulp",
-    "bump-minor": "gulp bump-minor",
-    "bump-patch": "gulp bump-patch"
+    "build": "webpack --mode=production"
   },
   "repository": {
     "type": "git",
@@ -19,11 +17,7 @@
   },
   "homepage": "https://github.com/Makanz/chartjs-plugin-trendline#readme",
   "devDependencies": {
-    "del": "^6.0.0",
-    "gulp": "^4.0.2",
-    "gulp-bump": "^3.2.0",
-    "gulp-rename": "^2.0.0",
-    "gulp-uglify": "^3.0.2",
-    "pump": "^3.0.0"
+    "webpack": "^5.73.0",
+    "webpack-cli": "^4.10.0"
   }
 }

package/src/chartjs-plugin-trendline.js CHANGED Viewed

@@ -1,101 +1,128 @@
 /*!
  * chartjs-plugin-trendline.js
- * Version: 0.2.2
+ * Version: 1.0.3
  *
- * Copyright 2020 Marcus Alsterfjord
+ * Copyright 2022 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 = {
-    id: "trendlineLinear",
-    afterDraw: function(chartInstance) {
+    id: 'chartjs-plugin-trendline',
+    afterDatasetsDraw: function (chartInstance) {
         var yScale;
         var xScale;
         for (var axis in chartInstance.scales) {
-            if ( axis[0] == 'x')
-                xScale = chartInstance.scales[axis];
-            else
-                yScale = chartInstance.scales[axis];
-            if ( xScale && yScale ) break;
+            if (axis[0] == 'x') xScale = chartInstance.scales[axis];
+            else yScale = chartInstance.scales[axis];
+            if (xScale && yScale) break;
         }
-        var ctx = chartInstance.chart.ctx;
-        chartInstance.data.datasets.forEach(function(dataset, index) {
-            if (dataset.trendlineLinear && chartInstance.isDatasetVisible(index) && dataset.data.length != 0) {
+        var ctx = chartInstance.ctx;
+        chartInstance.data.datasets.forEach(function (dataset, index) {
+            if (
+                dataset.trendlineLinear &&
+                chartInstance.isDatasetVisible(index) &&
+                dataset.data.length != 0
+            ) {
                 var datasetMeta = chartInstance.getDatasetMeta(index);
-                addFitter(datasetMeta, ctx, dataset, xScale, chartInstance.scales[datasetMeta.yAxisID]);
+                addFitter(
+                    datasetMeta,
+                    ctx,
+                    dataset,
+                    xScale,
+                    chartInstance.scales[datasetMeta.yAxisID]
+                );
             }
         });
         ctx.setLineDash([]);
-    }
+    },
 };
 function addFitter(datasetMeta, ctx, dataset, xScale, yScale) {
     var style = dataset.trendlineLinear.style || dataset.borderColor;
     var lineWidth = dataset.trendlineLinear.width || dataset.borderWidth;
-    var lineStyle = dataset.trendlineLinear.lineStyle || "solid";
+    var lineStyle = dataset.trendlineLinear.lineStyle || 'solid';
-    style = (style !== undefined) ? style : "rgba(169,169,169, .6)";
-    lineWidth = (lineWidth !== undefined) ? lineWidth : 3;
+    style = style !== undefined ? style : 'rgba(169,169,169, .6)';
+    lineWidth = lineWidth !== undefined ? lineWidth : 3;
     var fitter = new LineFitter();
+    var firstIndex = dataset.data.findIndex((d) => {
+        return d !== undefined && d !== null;
+    });
     var lastIndex = dataset.data.length - 1;
-    var startPos = datasetMeta.data[0]._model.x;
-    var endPos = datasetMeta.data[lastIndex]._model.x;
+    var startPos = datasetMeta.data[firstIndex].x;
+    var endPos = datasetMeta.data[lastIndex].x;
+    var xy = typeof dataset.data[firstIndex] === 'object';
-    var xy = false;
-    if ( dataset.data && typeof dataset.data[0] === 'object') xy = true;
+    dataset.data.forEach(function (data, index) {
+        if (data == null) return;
-    dataset.data.forEach(function(data, index) {
-        if(data == null)
-            return;
-        if (xScale.options.type === "time") {
+        if (xScale.options.type === 'time') {
             var x = data.x != null ? data.x : data.t;
             fitter.add(new Date(x).getTime(), data.y);
-        }
-        else if (xy) {
+        } else if (xy) {
             fitter.add(data.x, data.y);
-        }
-        else {
+        } else {
             fitter.add(index, data);
         }
     });
     var x1 = xScale.getPixelForValue(fitter.minx);
-    var x2 = xScale.getPixelForValue(fitter.maxx);
     var y1 = yScale.getPixelForValue(fitter.f(fitter.minx));
-    var y2 = yScale.getPixelForValue(fitter.f(fitter.maxx));
-    if ( !xy ) { x1 = startPos; x2 = endPos; }
+    var x2;
+    var 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();
+        if (x2value < fitter.minx) x2value = fitter.maxx;
+        x2 = xScale.getPixelForValue(x2value);
+        //  Y
+        y2 = yScale.getPixelForValue(fitter.f(x2value));
+    } else {
+        x2 = xScale.getPixelForValue(fitter.maxx);
+        y2 = yScale.getPixelForValue(fitter.f(fitter.maxx));
+    }
+    if (!xy) {
+        x1 = startPos;
+        x2 = endPos;
+    }
     var drawBottom = datasetMeta.controller.chart.chartArea.bottom;
     var chartWidth = datasetMeta.controller.chart.width;
-    if(y1 > drawBottom) { // Left side is below zero
+    if (y1 > drawBottom) {
+        // Left side is below zero
         var diff = y1 - drawBottom;
         var lineHeight = y1 - y2;
         var overlapPercentage = diff / lineHeight;
         var addition = chartWidth * overlapPercentage;
         y1 = drawBottom;
-        x1 = (x1 + addition);
-    } else if(y2 > drawBottom) { // right side is below zero
+        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);
+        var subtraction = chartWidth - chartWidth * overlapPercentage;
         y2 = drawBottom;
         x2 = chartWidth - (x2 - subtraction);
     }
     ctx.lineWidth = lineWidth;
-    if (lineStyle === "dotted") { ctx.setLineDash([2, 3]); }
+    if (lineStyle === 'dotted') {
+        ctx.setLineDash([2, 3]);
+    }
     ctx.beginPath();
     ctx.moveTo(x1, y1);
     ctx.lineTo(x2, y2);
@@ -111,34 +138,56 @@ function LineFitter() {
     this.sumY = 0;
     this.minx = 1e100;
     this.maxx = -1e100;
+    this.maxy = -1e100;
 }
 LineFitter.prototype = {
-    'add': function (x, y) {
+    add: function (x, y) {
         x = parseFloat(x);
-		y = parseFloat(y);
+        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 (x < this.minx) this.minx = x;
+        if (x > this.maxx) this.maxx = x;
+        if (y > this.maxy) this.maxy = y;
     },
-    'f': function (x) {
+    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
-if (typeof window !== "undefined" && window.Chart)
-    window.Chart.plugins.register(pluginTrendlineLinear);
+if (typeof window !== 'undefined' && window.Chart) {
+    if (window.Chart.hasOwnProperty('register')) {
+        window.Chart.register(pluginTrendlineLinear);
+    } else {
+        window.Chart.plugins.register(pluginTrendlineLinear);
+    }
+}
 // Otherwise, try to export the plugin
 try {

package/webpack.config.js ADDED Viewed

@@ -0,0 +1,9 @@
+const path = require('path');
+module.exports = {
+    entry: './src/chartjs-plugin-trendline.js',
+    output: {
+        filename: 'chartjs-plugin-trendline.min.js',
+        path: path.resolve(__dirname, 'dist'),
+    },
+};

package/example/ScatterChart.html DELETED Viewed

@@ -1,75 +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>ScatterChart Example</title>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
-    <script src="../src/chartjs-plugin-trendline.js"></script>
-    <script>
-            document.addEventListener("DOMContentLoaded", function(event) {
-                new Chart(document.getElementById("line-chart"), {
-                        type: 'scatter',
-                        data: {
-                            datasets: [{
-                                data: [{x: 1500, y: 86},{x: 1600, y: 114},{x: 1700, y: 106},{x: 1750, y: 106},{x: 1800, y: 107},{x: 1850, y: 111},{x: 1900, y: 133},{x: 1950, y: 221},{x: 1999, y: 783},{x: 2050, y: 2478}],
-                                label: "Africa",
-                                borderColor: "#3e95cd",
-                                fill: false,
-                                trendlineLinear: {
-                                    style: "#3e95cd",
-                                    lineStyle: "line",
-                                    width: 1
-                                }
-                            }, {
-                                data: [{x: 1500, y: 282},{x: 1600, y: 350},{x: 1700, y: 411},{x: 1750, y: 502},{x: 1800, y: 635},{x: 1850, y: 809},{x: 1900, y: 947},{x: 1950, y: 1402},{x: 1999, y: 3700},{x: 2050, y: 5267}],
-                                label: "Asia",
-                                borderColor: "#8e5ea2",
-                                fill: false,
-                                trendlineLinear: {
-                                    style: "#8e5ea2",
-                                    lineStyle: "line",
-                                    width: 1
-                                }
-                            }, {
-                                data: [{x: 1500, y: 168},{x: 1600, y: 170},{x: 1700, y: 178},{x: 1750, y: 190},{x: 1800, y: 203},{x: 1850, y: 276},{x: 1900, y: 408},{x: 1950, y: 547},{x: 1999, y: 675},{x: 2050, y: 734}],
-                                label: "Europe",
-                                borderColor: "#3cba9f",
-                                fill: false
-                            }, {
-                                data: [{x: 1500, y: 40},{x: 1600, y: 20},{x: 1700, y: 10},{x: 1750, y: 16},{x: 1800, y: 24},{x: 1850, y: 38},{x: 1900, y: 74},{x: 1950, y: 167},{x: 1999, y: 508},{x: 2050, y: 784}],
-                                label: "Latin America",
-                                borderColor: "#e8c3b9",
-                                fill: false
-                            }, {
-                                data: [{x: 1500, y: 6},{x: 1600, y: 3},{x: 1700, y: 2},{x: 1750, y: 2},{x: 1800, y: 7},{x: 1850, y: 26},{x: 1900, y: 82},{x: 1950, y: 172},{x: 1999, y: 312},{x: 2050, y: 433}],
-                                label: "North America",
-                                borderColor: "#c45850",
-                                fill: false
-                            }
-                            ]
-                        },
-                        options: {
-                            title: {
-                                display: true,
-                                text: 'World population per region (in millions)',
-                            },
-                            maintainAspectRatio: false,
-                            responsive: true,
-                            scales: {
-                                xAxes: [{ type: 'linear', position: 'bottom', scaleLabel: { labelString: 'year', display: true} }],
-                                yAxes: [{ type: 'linear', position: 'left',   scaleLabel: { labelString: 'population/1M', display: true}, display: true }],
-                            }
-                        }
-                        });
-                });
-        </script>
-</head>
-<body>
-    <h1>Line Chart</h1>
-    <canvas id="line-chart" width="600" height="450"></canvas>
-    <p>Using example code from <a href="http://tobiasahlin.com/blog/chartjs-charts-to-get-you-started/" target="_blank">tobiasahlin.com.</a></p>
-</body>
-</html>

package/example/XYlineChart.html DELETED Viewed

@@ -1,75 +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>XYlineChart Example</title>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.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: {
-                            datasets: [{
-                                data: [{x: 1500, y: 86},{x: 1600, y: 114},{x: 1700, y: 106},{x: 1750, y: 106},{x: 1800, y: 107},{x: 1850, y: 111},{x: 1900, y: 133},{x: 1950, y: 221},{x: 1999, y: 783},{x: 2050, y: 2478}],
-                                label: "Africa",
-                                borderColor: "#3e95cd",
-                                fill: false,
-                                trendlineLinear: {
-                                    style: "#3e95cd",
-                                    lineStyle: "line",
-                                    width: 1
-                                }
-                            }, {
-                                data: [{x: 1500, y: 282},{x: 1600, y: 350},{x: 1700, y: 411},{x: 1750, y: 502},{x: 1800, y: 635},{x: 1850, y: 809},{x: 1900, y: 947},{x: 1950, y: 1402},{x: 1999, y: 3700},{x: 2050, y: 5267}],
-                                label: "Asia",
-                                borderColor: "#8e5ea2",
-                                fill: false,
-                                trendlineLinear: {
-                                    style: "#8e5ea2",
-                                    lineStyle: "line",
-                                    width: 1
-                                }
-                            }, {
-                                data: [{x: 1500, y: 168},{x: 1600, y: 170},{x: 1700, y: 178},{x: 1750, y: 190},{x: 1800, y: 203},{x: 1850, y: 276},{x: 1900, y: 408},{x: 1950, y: 547},{x: 1999, y: 675},{x: 2050, y: 734}],
-                                label: "Europe",
-                                borderColor: "#3cba9f",
-                                fill: false
-                            }, {
-                                data: [{x: 1500, y: 40},{x: 1600, y: 20},{x: 1700, y: 10},{x: 1750, y: 16},{x: 1800, y: 24},{x: 1850, y: 38},{x: 1900, y: 74},{x: 1950, y: 167},{x: 1999, y: 508},{x: 2050, y: 784}],
-                                label: "Latin America",
-                                borderColor: "#e8c3b9",
-                                fill: false
-                            }, {
-                                data: [{x: 1500, y: 6},{x: 1600, y: 3},{x: 1700, y: 2},{x: 1750, y: 2},{x: 1800, y: 7},{x: 1850, y: 26},{x: 1900, y: 82},{x: 1950, y: 172},{x: 1999, y: 312},{x: 2050, y: 433}],
-                                label: "North America",
-                                borderColor: "#c45850",
-                                fill: false
-                            }
-                            ]
-                        },
-                        options: {
-                            title: {
-                                display: true,
-                                text: 'World population per region (in millions)',
-                            },
-                            maintainAspectRatio: false,
-                            responsive: true,
-                            scales: {
-                                xAxes: [{ type: 'linear', position: 'bottom', scaleLabel: { labelString: 'year', display: true} }],
-                                yAxes: [{ type: 'linear', position: 'left',   scaleLabel: { labelString: 'population/1M', display: true}, display: true }],
-                            }
-                        }
-                        });
-                });
-        </script>
-</head>
-<body>
-    <h1>Scatter Chart</h1>
-    <canvas id="line-chart" width="600" height="450"></canvas>
-    <p>Using example code from <a href="http://tobiasahlin.com/blog/chartjs-charts-to-get-you-started/" target="_blank">tobiasahlin.com.</a></p>
-</body>
-</html>

package/gulpfile.js DELETED Viewed

@@ -1,37 +0,0 @@
-var gulp = require('gulp');
-var uglify = require('gulp-uglify');
-var pump = require('pump');
-var rename = require('gulp-rename');
-var del = require('del');
-var bump = require('gulp-bump');
-gulp.task('clean', function () {
-    return del([
-        'dist/',
-    ]);
-});
-gulp.task('compress', function (cb) {
-    pump([
-            gulp.src('src/*.js'),
-            uglify(),
-            rename('chartjs-plugin-trendline.min.js'),
-            gulp.dest('dist/')
-        ],
-        cb
-        );
-});
-gulp.task('bump-minor', function(){
-    return gulp.src(['./package.json', './src/chartjs-plugin-trendline.js'], {base: './'})
-    .pipe(bump({type:'minor'}))
-    .pipe(gulp.dest('./'));
-});
-gulp.task('bump-patch', function(){
-    return gulp.src(['./package.json', './src/chartjs-plugin-trendline.js'], {base: './'})
-    .pipe(bump({type:'patch'}))
-    .pipe(gulp.dest('./'));
-});
-gulp.task('default', gulp.series('clean', 'compress'));