chartjs-plugin-trendline 1.0.0 → 1.0.2

package/src/chartjs-plugin-trendline.js

@@ -1,151 +1,194 @@
 /*!
  * chartjs-plugin-trendline.js
- * Version: 1.0.0
+ * Version: 1.0.2
  *
- * Copyright 2021 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: "chartjs-plugin-trendline",
-    afterDraw: function(chartInstance) {
-        var yScale;
-        var xScale;
+    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.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]);
+        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]
+                )
             }
-        });
+        })
 
-        ctx.setLineDash([]);
-    }
-};
+        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 style = dataset.trendlineLinear.style || dataset.borderColor
+    var lineWidth = dataset.trendlineLinear.width || dataset.borderWidth
+    var lineStyle = dataset.trendlineLinear.lineStyle || 'solid'
+
+    style = style !== undefined ? style : 'rgba(169,169,169, .6)'
+    lineWidth = lineWidth !== undefined ? lineWidth : 3
+
+    var fitter = new LineFitter()
+    var lastIndex = dataset.data.length - 1
+    var startPos = datasetMeta.data[0].x
+    var endPos = datasetMeta.data[lastIndex].x
+
+    var xy = false
+    if (dataset.data && typeof dataset.data[0] === 'object') xy = true
+
+    dataset.data.forEach(function (data, index) {
+        if (data == null) return
+
+        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) {
+            fitter.add(data.x, data.y)
+        } else {
+            fitter.add(index, data)
+        }
+    })
 
-    style = (style !== undefined) ? style : "rgba(169,169,169, .6)";
-    lineWidth = (lineWidth !== undefined) ? lineWidth : 3;
+    var x1 = xScale.getPixelForValue(fitter.minx)
+    var y1 = yScale.getPixelForValue(fitter.f(fitter.minx))
 
-    var fitter = new LineFitter();
-    var lastIndex = dataset.data.length - 1;
-    var startPos = datasetMeta.data[0].x;
-    var endPos = datasetMeta.data[lastIndex].x;
+    var x2
+    var y2
 
-    var xy = false;
-    if ( dataset.data && typeof dataset.data[0] === 'object') xy = true;
+    // 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)
 
-    dataset.data.forEach(function(data, index) {
+        //  Y
+        y2 = yScale.getPixelForValue(fitter.f(x2value))
+    } else {
+        x2 = xScale.getPixelForValue(fitter.maxx)
+        y2 = yScale.getPixelForValue(fitter.f(fitter.maxx))
+    }
 
-        if(data == null)
-            return;
+    if (!xy) {
+        x1 = startPos
+        x2 = endPos
+    }
 
-        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) {
-            fitter.add(data.x, data.y);
-        }
-        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 drawBottom = datasetMeta.controller.chart.chartArea.bottom;
-    var 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;
-
-        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);
-
-        y2 = drawBottom;
-        x2 = chartWidth - (x2 - subtraction);
+    var drawBottom = datasetMeta.controller.chart.chartArea.bottom
+    var 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
+
+        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
+
+        y2 = drawBottom
+        x2 = chartWidth - (x2 - subtraction)
     }
 
-    ctx.lineWidth = lineWidth;
-    if (lineStyle === "dotted") { ctx.setLineDash([2, 3]); }
-    ctx.beginPath();
-    ctx.moveTo(x1, y1);
-    ctx.lineTo(x2, y2);
-    ctx.strokeStyle = style;
-    ctx.stroke();
+    ctx.lineWidth = lineWidth
+    if (lineStyle === 'dotted') {
+        ctx.setLineDash([2, 3])
+    }
+    ctx.beginPath()
+    ctx.moveTo(x1, y1)
+    ctx.lineTo(x2, y2)
+    ctx.strokeStyle = style
+    ctx.stroke()
 }
 
 function LineFitter() {
-    this.count = 0;
-    this.sumX = 0;
-    this.sumX2 = 0;
-    this.sumXY = 0;
-    this.sumY = 0;
-    this.minx = 1e100;
-    this.maxx = -1e100;
+    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;
+    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;
-    }
-};
+    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) {
+if (typeof window !== 'undefined' && window.Chart) {
     if (window.Chart.hasOwnProperty('register')) {
-        window.Chart.register(pluginTrendlineLinear);
+        window.Chart.register(pluginTrendlineLinear)
     } else {
-        window.Chart.plugins.register(pluginTrendlineLinear);
+        window.Chart.plugins.register(pluginTrendlineLinear)
     }
 }
 
 // Otherwise, try to export the plugin
 try {
-    module.exports = exports = pluginTrendlineLinear;
+    module.exports = exports = pluginTrendlineLinear
 } catch (e) {}

package/webpack.config.js

@@ -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/gulpfile.js

@@ -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'));