chartjs-plugin-trendline 0.2.0 → 1.0.2

package/src/chartjs-plugin-trendline.js

@@ -1,146 +1,194 @@
 /*!
  * chartjs-plugin-trendline.js
- * Version: 0.2.0
+ * Version: 1.0.2
  *
- * 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",
-    beforeDraw: 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.chart.ctx;
-
-        chartInstance.data.datasets.forEach(function(dataset, index) {
-            if (dataset.trendlineLinear && chartInstance.isDatasetVisible(index)) {
-                var datasetMeta = chartInstance.getDatasetMeta(index);
-                addFitter(datasetMeta, ctx, dataset, xScale, yScale);
+        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";
-
-    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]._model.x;
-    var endPos = datasetMeta.data[lastIndex]._model.x;
-
-    var xy = false;
-    if ( dataset.data && typeof dataset.data[0] === 'object') xy = true;
-
-    dataset.data.forEach(function(data, index) {
+    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)
+        }
+    })
+
+    var x1 = xScale.getPixelForValue(fitter.minx)
+    var y1 = yScale.getPixelForValue(fitter.f(fitter.minx))
+
+    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(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)
-    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 {
-    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/.whitesource

@@ -1,15 +0,0 @@
-{
-  "scanSettings": {
-    "configMode": "AUTO",
-    "configExternalURL": ""
-  },
-  "generalSettings": {
-    "shouldScanRepo": true
-  },
-  "checkRunSettings": {
-    "vulnerableCheckRunConclusionLevel": "failure"
-  },
-  "issueSettings": {
-    "minSeverityLevel": "LOW"
-  }
-}

package/example/ScatterChart.html

@@ -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

@@ -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

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