diff --git a/README.md b/README.md index 65ebd9f..fb0d783 100644 --- a/README.md +++ b/README.md @@ -38,6 +38,8 @@ To configure the trendline plugin you simply add a new config options to your da colorMax: "green", lineStyle: "dotted|solid", width: 2, + xAxisKey: "time" (optional), + yAxisKey: "usage" (optional), projection: true|false (optional) } } diff --git a/dist/chartjs-plugin-trendline.min.js b/dist/chartjs-plugin-trendline.min.js index a2a3c7f..f3cfda2 100644 --- a/dist/chartjs-plugin-trendline.min.js +++ b/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,e)=>{const s={id:"chartjs-plugin-trendline",afterDatasetsDraw:t=>{let e,s;for(let i in t.scales)if("x"==i[0]?s=t.scales[i]:e=t.scales[i],s&&e)break;const i=t.ctx;t.data.datasets.forEach(((e,a)=>{const r=e.alwaysShowTrendline||t.isDatasetVisible(a);if(e.trendlineLinear&&r&&e.data.length>1){const r=t.getDatasetMeta(a);addFitter(r,i,e,s,t.scales[r.yAxisID])}})),i.setLineDash([])}};addFitter=(t,e,s,a,r)=>{let o=s.borderColor||"rgba(169,169,169, .6)",l=s.trendlineLinear.colorMin||o,n=s.trendlineLinear.colorMax||o,h=s.trendlineLinear.width||s.borderWidth,d=s.trendlineLinear.lineStyle||"solid",u=s.trendlineLinear.fillColor;h=void 0!==h?h:3;let m=new i,x=s.data.findIndex((t=>null!=t)),c=s.data.length-1,X=t.data[x].x,f=t.data[c].x,p="object"==typeof s.data[x];s.data.forEach(((t,e)=>{if(null!=t)if(["time","timeseries"].includes(a.options.type)){let s=null!=t.x?t.x:t.t;void 0!==s?m.add(new Date(s).getTime(),t.y):m.add(e,t)}else p?isNaN(t.x)||isNaN(t.y)?isNaN(t.x)?isNaN(t.y)||m.add(e,t.y):m.add(e,t.x):m.add(t.x,t.y):m.add(e,t)}));let g,w,y=a.getPixelForValue(m.minx),Y=r.getPixelForValue(m.f(m.minx));if(s.trendlineLinear.projection&&m.scale()<0){let t=m.fo();tF){let t=Y-F,e=Y-w;Y=F,y+=L*(t/e)}else if(w>F){let t=w-F,e=w-Y;w=F,g=L-(g-(L-L*(t/e)))}e.lineWidth=h,"dotted"===d?e.setLineDash([2,3]):e.setLineDash([]),e.beginPath(),e.moveTo(y,Y),e.lineTo(g,w);let P=e.createLinearGradient(y,Y,g,w);wthis.maxx&&(this.maxx=t),e>this.maxy&&(this.maxy=e)}f(t){t=parseFloat(t);let 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)}fo(){let 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(){let 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(s):window.Chart.plugins.register(s));try{t.exports=s}catch(t){}}},e={};!function s(i){var a=e[i];if(void 0!==a)return a.exports;var r=e[i]={exports:{}};return t[i](r,r.exports,s),r.exports}(460)})(); \ No newline at end of file +(()=>{var t={460:(t,e)=>{const s={id:"chartjs-plugin-trendline",afterDatasetsDraw:t=>{let e,s;for(let i in t.scales)if("x"==i[0]?s=t.scales[i]:e=t.scales[i],s&&e)break;const a=t.ctx;t.data.datasets.forEach(((e,r)=>{const n=e.alwaysShowTrendline||t.isDatasetVisible(r);if(e.trendlineLinear&&n&&e.data.length>1){const n=t.getDatasetMeta(r);i(n,a,e,s,t.scales[n.yAxisID])}})),a.setLineDash([])}},i=(t,e,s,i,r)=>{let n=s.borderColor||"rgba(169,169,169, .6)",o=s.trendlineLinear.colorMin||n,l=s.trendlineLinear.colorMax||n,h=s.trendlineLinear.width||s.borderWidth,d=s.trendlineLinear.lineStyle||"solid",u=s.trendlineLinear.fillColor;const m=s.trendlineLinear.xAxisKey||t.controller.chart.options.parsing.xAxisKey,x=s.trendlineLinear.yAxisKey||t.controller.chart.options.parsing.yAxisKey;h=void 0!==h?h:3;let c=new a,X=s.data.findIndex((t=>null!=t)),f=s.data.length-1,p=t.data[X][m],y=t.data[f][m],g="object"==typeof s.data[X];s.data.forEach(((t,e)=>{if(null!=t)if(["time","timeseries"].includes(i.options.type)){let s=null!=t[m]?t[m]:t.t;void 0!==s?c.add(new Date(s).getTime(),t[x]):c.add(e,t)}else g?isNaN(t.x)||isNaN(t.y)?isNaN(t.x)?isNaN(t.y)||c.add(e,t.y):c.add(e,t.x):c.add(t.x,t.y):c.add(e,t)}));let w,Y,L=i.getPixelForValue(c.minx),P=r.getPixelForValue(c.f(c.minx));if(s.trendlineLinear.projection&&c.scale()<0){let t=c.fo();tC){let t=P-C,e=P-Y;P=C,L+=b*(t/e)}else if(Y>C){let t=Y-C,e=Y-P;Y=C,w=b-(w-(b-b*(t/e)))}e.lineWidth=h,"dotted"===d?e.setLineDash([2,3]):e.setLineDash([]),e.beginPath(),e.moveTo(L,P),e.lineTo(w,Y);let D=e.createLinearGradient(L,P,w,Y);Ythis.maxx&&(this.maxx=t),e>this.maxy&&(this.maxy=e)}f(t){t=parseFloat(t);let 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)}fo(){let 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(){let 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(s):window.Chart.plugins.register(s));try{t.exports=s}catch(t){}}},e={};!function s(i){var a=e[i];if(void 0!==a)return a.exports;var r=e[i]={exports:{}};return t[i](r,r.exports,s),r.exports}(460)})(); \ No newline at end of file diff --git a/package.json b/package.json index 75016b9..dfb4d88 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "chartjs-plugin-trendline", - "version": "2.0.5", + "version": "2.1.0", "description": "Trendline for Chart.js", "main": "src/chartjs-plugin-trendline.js", "scripts": { diff --git a/src/chartjs-plugin-trendline.js b/src/chartjs-plugin-trendline.js index b678aed..149fc7e 100644 --- a/src/chartjs-plugin-trendline.js +++ b/src/chartjs-plugin-trendline.js @@ -45,7 +45,7 @@ const pluginTrendlineLinear = { }, }; -addFitter = (datasetMeta, ctx, dataset, xScale, yScale) => { +const addFitter = (datasetMeta, ctx, dataset, xScale, yScale) => { let defaultColor = dataset.borderColor || 'rgba(169,169,169, .6)'; let colorMin = dataset.trendlineLinear.colorMin || defaultColor; let colorMax = dataset.trendlineLinear.colorMax || defaultColor; @@ -53,6 +53,11 @@ addFitter = (datasetMeta, ctx, dataset, xScale, yScale) => { let lineStyle = dataset.trendlineLinear.lineStyle || 'solid'; let fillColor = dataset.trendlineLinear.fillColor; + const parsing = typeof datasetMeta.controller.chart.options.parsing === "object" ? + datasetMeta.controller.chart.options.parsing : undefined; + const xAxisKey = dataset.trendlineLinear.xAxisKey || parsing ? parsing.xAxisKey : "x"; + const yAxisKey = dataset.trendlineLinear.yAxisKey || parsing ? parsing.yAxisKey : "y"; + lineWidth = lineWidth !== undefined ? lineWidth : 3; let fitter = new LineFitter(); @@ -60,17 +65,17 @@ addFitter = (datasetMeta, ctx, dataset, xScale, yScale) => { return d !== undefined && d !== null; }); let lastIndex = dataset.data.length - 1; - let startPos = datasetMeta.data[firstIndex].x; - let endPos = datasetMeta.data[lastIndex].x; + let startPos = datasetMeta.data[firstIndex][xAxisKey]; + let endPos = datasetMeta.data[lastIndex][xAxisKey]; let xy = typeof dataset.data[firstIndex] === 'object'; dataset.data.forEach((data, index) => { if (data == null) return; if (['time', 'timeseries'].includes(xScale.options.type)) { - let x = data.x != null ? data.x : data.t; + let x = data[xAxisKey] != null ? data[xAxisKey] : data.t; if (x !== undefined) { - fitter.add(new Date(x).getTime(), data.y); + fitter.add(new Date(x).getTime(), data[yAxisKey]); } else { fitter.add(index, data); }