chartjs-plugin-trendline 1.0.3 → 2.0.1

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 (9) hide show
  1. package/LICENSE +1 -1
  2. package/README.md +4 -3
  3. package/dist/chartjs-plugin-trendline.min.js +1 -1
  4. package/dist/chartjs-plugin-trendline.min.js.LICENSE.txt +2 -2
  5. package/example/barChart.html +2 -2
  6. package/example/lineChart.html +4 -3
  7. package/example/lineChartProjection.html +1 -1
  8. package/package.json +3 -3
  9. package/src/chartjs-plugin-trendline.js +32 -7
package/LICENSE CHANGED
@@ -1,6 +1,6 @@
1
1
  MIT License
2
2
 
3
- Copyright (c) 2019 Marcus Alsterfjord
3
+ Copyright (c) 2022 Marcus Alsterfjord
4
4
 
5
5
  Permission is hereby granted, free of charge, to any person obtaining a copy
6
6
  of this software and associated documentation files (the "Software"), to deal
package/README.md CHANGED
@@ -20,8 +20,8 @@ Install & import the plugin via npm:
20
20
  `npm i chart.js chartjs-plugin-trendline`
21
21
 
22
22
  ```js
23
- import ChartJS from "chart.js";
24
- import chartTrendline from "chartjs-plugin-trendline";
23
+ import ChartJS from 'chart.js';
24
+ import chartTrendline from 'chartjs-plugin-trendline';
25
25
 
26
26
  ChartJS.plugins.register(chartTrendline);
27
27
  ```
@@ -33,7 +33,8 @@ To configure the trendline plugin you simply add a new config options to your da
33
33
  ```javascript
34
34
  {
35
35
  trendlineLinear: {
36
- style: "rgba(255,105,180, .8)",
36
+ colorMin: "red",
37
+ colorMax: "green",
37
38
  lineStyle: "dotted|solid",
38
39
  width: 2,
39
40
  projection: true|false (optional)
package/dist/chartjs-plugin-trendline.min.js CHANGED
@@ -1,2 +1,2 @@
1
1
  /*! For license information please see chartjs-plugin-trendline.min.js.LICENSE.txt */
2
- (()=>{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)})();
2
+ (()=>{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){if(i.trendlineLinear&&t.isDatasetVisible(a)&&i.data.length>1){var n=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,c=e.data.findIndex((t=>null!=t)),x=e.data.length-1,f=t.data[c].x,X=t.data[x].x,v="object"==typeof e.data[c];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?m.add(t.x,t.y):m.add(i,t)}));var p,g,w=a.getPixelForValue(m.minx),y=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),g=r.getPixelForValue(m.f(Y))}else p=a.getPixelForValue(m.maxx),g=r.getPixelForValue(m.f(m.maxx));v||(w=f,p=X);var P=t.controller.chart.chartArea.bottom,C=t.controller.chart.width;if(y>P){var L=y-P,b=y-g;y=P,w+=C*(L/b)}else g>P&&(L=g-P,b=g-y,g=P,p=C-(p-(C-C*(L/b))));i.lineWidth=l,"dotted"===u&&i.setLineDash([2,3]),i.beginPath(),i.moveTo(w,y),i.lineTo(p,g);var F=i.createLinearGradient(w,y,p,g);g<y?(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(w,y),i.lineTo(p,g),i.lineTo(p,P),i.lineTo(w,P),i.closePath(),i.fill())}(n,r,i,e,t.scales[n.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 CHANGED
@@ -1,8 +1,8 @@
1
1
  /*!
2
2
  * chartjs-plugin-trendline.js
3
- * Version: 1.0.3
3
+ * Version: 2.0.1
4
4
  *
5
- * Copyright 2022 Marcus Alsterfjord
5
+ * Copyright 2023 Marcus Alsterfjord
6
6
  * Released under the MIT license
7
7
  * https://github.com/Makanz/chartjs-plugin-trendline/blob/master/README.md
8
8
  *
package/example/barChart.html CHANGED
@@ -5,7 +5,7 @@
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
6
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
7
7
  <title>BarChart Example</title>
8
- <script src="https://cdn.jsdelivr.net/npm/chart.js@3.8.0/dist/chart.min.js"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
9
9
  <script src="./../src/chartjs-plugin-trendline.js"></script>
10
10
  <script>
11
11
  document.addEventListener("DOMContentLoaded", function(event) {
@@ -20,7 +20,7 @@
20
20
  backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
21
21
  data: [2478,5267,734,784,433],
22
22
  trendlineLinear: {
23
- style: "rgba(255,105,180, .8)",
23
+ colorMin: "rgba(255,105,180, .8)",
24
24
  lineStyle: "dotted",
25
25
  width: 2
26
26
  }
package/example/lineChart.html CHANGED
@@ -5,7 +5,7 @@
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
6
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
7
7
  <title>LineChart Example</title>
8
- <script src="https://cdn.jsdelivr.net/npm/chart.js@3.8.0/dist/chart.min.js"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
9
9
  <script src="./../src/chartjs-plugin-trendline.js"></script>
10
10
  <script>
11
11
  document.addEventListener("DOMContentLoaded", function(event) {
@@ -19,7 +19,7 @@
19
19
  borderColor: "#3e95cd",
20
20
  fill: false,
21
21
  trendlineLinear: {
22
- style: "#3e95cd",
22
+ colorMin: "#3e95cd",
23
23
  lineStyle: "line",
24
24
  width: 1
25
25
  }
@@ -29,7 +29,8 @@
29
29
  borderColor: "#8e5ea2",
30
30
  fill: false,
31
31
  trendlineLinear: {
32
- style: "#8e5ea2",
32
+ colorMin: "red",
33
+ colorMax: "green",
33
34
  lineStyle: "line",
34
35
  width: 1
35
36
  }
package/example/lineChartProjection.html CHANGED
@@ -18,7 +18,7 @@
18
18
  borderColor: "#3e95cd",
19
19
  fill: false,
20
20
  trendlineLinear: {
21
- style: "#3e95cd",
21
+ colorMin: "#3e95cd",
22
22
  lineStyle: "line",
23
23
  width: 1,
24
24
  projection: true
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "chartjs-plugin-trendline",
3
- "version": "1.0.3",
3
+ "version": "2.0.1",
4
4
  "description": "Trendline for Chart.js",
5
5
  "main": "src/chartjs-plugin-trendline.js",
6
6
  "scripts": {
@@ -17,7 +17,7 @@
17
17
  },
18
18
  "homepage": "https://github.com/Makanz/chartjs-plugin-trendline#readme",
19
19
  "devDependencies": {
20
- "webpack": "^5.73.0",
21
- "webpack-cli": "^4.10.0"
20
+ "webpack": "^5.77.0",
21
+ "webpack-cli": "^5.0.1"
22
22
  }
23
23
  }
package/src/chartjs-plugin-trendline.js CHANGED
@@ -1,8 +1,8 @@
1
1
  /*!
2
2
  * chartjs-plugin-trendline.js
3
- * Version: 1.0.3
3
+ * Version: 2.0.1
4
4
  *
5
- * Copyright 2022 Marcus Alsterfjord
5
+ * Copyright 2023 Marcus Alsterfjord
6
6
  * Released under the MIT license
7
7
  * https://github.com/Makanz/chartjs-plugin-trendline/blob/master/README.md
8
8
  *
@@ -24,7 +24,7 @@ var pluginTrendlineLinear = {
24
24
  if (
25
25
  dataset.trendlineLinear &&
26
26
  chartInstance.isDatasetVisible(index) &&
27
- dataset.data.length != 0
27
+ dataset.data.length > 1
28
28
  ) {
29
29
  var datasetMeta = chartInstance.getDatasetMeta(index);
30
30
  addFitter(
@@ -42,11 +42,13 @@ var pluginTrendlineLinear = {
42
42
  };
43
43
 
44
44
  function addFitter(datasetMeta, ctx, dataset, xScale, yScale) {
45
- var style = dataset.trendlineLinear.style || dataset.borderColor;
45
+ var defaultColor = dataset.borderColor || 'rgba(169,169,169, .6)';
46
+ var colorMin = dataset.trendlineLinear.colorMin || defaultColor;
47
+ var colorMax = dataset.trendlineLinear.colorMax || defaultColor;
46
48
  var lineWidth = dataset.trendlineLinear.width || dataset.borderWidth;
47
49
  var lineStyle = dataset.trendlineLinear.lineStyle || 'solid';
50
+ var fillColor = dataset.trendlineLinear.fillColor;
48
51
 
49
- style = style !== undefined ? style : 'rgba(169,169,169, .6)';
50
52
  lineWidth = lineWidth !== undefined ? lineWidth : 3;
51
53
 
52
54
  var fitter = new LineFitter();
@@ -61,7 +63,7 @@ function addFitter(datasetMeta, ctx, dataset, xScale, yScale) {
61
63
  dataset.data.forEach(function (data, index) {
62
64
  if (data == null) return;
63
65
 
64
- if (xScale.options.type === 'time') {
66
+ if (['time', 'timeseries'].includes(xScale.options.type)) {
65
67
  var x = data.x != null ? data.x : data.t;
66
68
  fitter.add(new Date(x).getTime(), data.y);
67
69
  } else if (xy) {
@@ -126,8 +128,31 @@ function addFitter(datasetMeta, ctx, dataset, xScale, yScale) {
126
128
  ctx.beginPath();
127
129
  ctx.moveTo(x1, y1);
128
130
  ctx.lineTo(x2, y2);
129
- ctx.strokeStyle = style;
131
+
132
+ var gradient = ctx.createLinearGradient(x1, y1, x2, y2);
133
+ if (y2 < y1) {
134
+ gradient.addColorStop(0, colorMax);
135
+ gradient.addColorStop(1, colorMin);
136
+ } else {
137
+ gradient.addColorStop(0, colorMin);
138
+ gradient.addColorStop(1, colorMax);
139
+ }
140
+
141
+ ctx.strokeStyle = gradient;
142
+
130
143
  ctx.stroke();
144
+ ctx.closePath();
145
+
146
+ if (!!fillColor) {
147
+ ctx.fillStyle = fillColor;
148
+ ctx.beginPath();
149
+ ctx.moveTo(x1, y1);
150
+ ctx.lineTo(x2, y2);
151
+ ctx.lineTo(x2, drawBottom);
152
+ ctx.lineTo(x1, drawBottom);
153
+ ctx.closePath();
154
+ ctx.fill();
155
+ }
131
156
  }
132
157
 
133
158
  function LineFitter() {