UNPKG

chartjs-chart-radial-gauge

Version:
1 lines 6.3 kB
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("chart.js")):"function"==typeof define&&define.amd?define(["chart.js"],e):t.ChartjsRadialGauge=e(t.Chart)}(this,function(t){"use strict";var e="default"in t?t.default:t;t.elements.RoundedArc=t.elements.Arc.extend({draw:function(){var t=this._chart.ctx,e=this._view,r=e.startAngle,a=e.endAngle,n=(e.outerRadius-e.innerRadius)/2,i=(e.outerRadius+e.innerRadius)/2;t.translate(e.x,e.y),t.rotate(r);var o=a-r;t.beginPath(),e.roundedCorners&&t.arc(i,0,n,Math.PI,0),t.arc(0,0,e.outerRadius,0,o);var d=i*Math.cos(o),l=i*Math.sin(o);e.roundedCorners&&t.arc(d,l,n,o,o+Math.PI),t.arc(0,0,e.innerRadius,o,0,!0),t.closePath(),t.rotate(-r),t.translate(-e.x,-e.y),t.strokeStyle=e.borderColor,t.lineWidth=e.borderWidth,t.fillStyle=e.backgroundColor,t.fill(),t.lineJoin="bevel",e.borderWidth&&t.stroke()}}),t.elements.RoundedArc;var r=function(){return function(t,e){if(Array.isArray(t))return t;if(Symbol.iterator in Object(t))return function(t,e){var r=[],a=!0,n=!1,i=void 0;try{for(var o,d=t[Symbol.iterator]();!(a=(o=d.next()).done)&&(r.push(o.value),!e||r.length!==e);a=!0);}catch(t){n=!0,i=t}finally{try{!a&&d.return&&d.return()}finally{if(n)throw i}}return r}(t,e);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}(),a=e.helpers;e.defaults._set("radialGauge",{animation:{animateRotate:!0,animateScale:!0},centerPercentage:80,rotation:-Math.PI/2,trackColor:"rgb(204, 221, 238)",roundedCorners:!0,centerArea:{displayText:!0,fontFamily:null,fontColor:null,fontSize:null,padding:4,backgroundImage:null,backgroundColor:null,text:null},hover:{mode:"single"},legend:{display:!1},domain:[0,100],tooltips:{callbacks:{title:function(){return""},label:function(t,e){var r=e.labels[t.index];return r+=": "+e.datasets[t.datasetIndex].data[t.index]}}}});var n,i=function(t){t.RadialGauge=function(e,r){return r.type="radialGauge",new t(e,r)}};return(n=e).controllers.radialGauge=n.DatasetController.extend({dataElementType:n.elements.RoundedArc,linkScales:a.noop,draw:function(){this.drawTrack(),this.drawCenterArea();for(var t=arguments.length,e=Array(t),r=0;r<t;r++)e[r]=arguments[r];n.DatasetController.prototype.draw.apply(this,e)},drawTrack:function(){new n.elements.Arc({_view:{backgroundColor:this.chart.options.trackColor,borderColor:this.chart.options.trackColor,startAngle:0,endAngle:2*Math.PI,x:this.centerX,y:this.centerY,innerRadius:this.innerRadius,outerRadius:this.outerRadius,borderWidth:this.borderWidth},_chart:this.chart}).draw()},drawCenterArea:function(){var t=this.chart.ctx,e={ctx:t,value:Math.ceil(this.getMeta().data[0]._view.value),radius:this.innerRadius,options:this.chart.options.centerArea};t.save();try{if(t.translate(this.centerX,this.centerY),e.options.draw)return void e.options.draw(e);e.options.backgroundColor&&this.drawCenterBackground(e),e.options.backgroundImage&&this.drawCenterImage(e),e.options.displayText&&this.drawCenterText(e)}finally{t.restore()}},drawCenterBackground:function(t){var e=t.options,r=t.radius,a=t.ctx,n=r-e.padding;a.beginPath(),a.arc(0,0,n,0,2*Math.PI),a.closePath(),a.fillStyle=e.backgroundColor,a.fill()},drawCenterImage:function(t){var e=t.radius,r=t.options,a=t.ctx,n=e-r.padding;a.beginPath(),a.arc(0,0,n,0,2*Math.PI,!0),a.closePath(),a.clip(),a.drawImage(r.backgroundImage,-n,-n,2*n,2*n)},wrapText:function(t,e,r,a,n,i){for(var o=e.split(" "),d="",l=0;l<o.length;l+=1){var s=d.concat(o[l]," ");t.measureText(s).width>n&&l>0?(t.textAlign="center",t.fillText(d,r,a),d=o[l].concat(" "),a+=i):d=s}t.textAlign="center",t.fillText(d,r,a)},drawCenterText:function(t){var e=t.options,r=t.value,a=e.fontSize||(this.innerRadius/50).toFixed(2)+"em";"number"==typeof a&&(a+="px");var i=e.fontFamily||n.defaults.global.defaultFontFamily,o=e.fontColor||n.defaults.global.defaultFontColor,d="function"==typeof e.text?e.text(r,e):e.text;d=d||""+r,this.chart.ctx.font=a+" "+i,this.chart.ctx.fillStyle=o,this.chart.ctx.textBaseline="middle";var l=this.chart.ctx.measureText(d).width,s=Math.round(-l/2);l<2*this.innerRadius*.8&&this.chart.ctx.fillText(d,s,0),(d=e.subText)&&(a=(this.innerRadius/100).toFixed(2)+"em",this.chart.ctx.font=a+" "+i,l=this.chart.ctx.measureText(d).width,s=Math.round(-l/2),this.wrapText(this.chart.ctx,d,0,.3*this.innerRadius,2*this.innerRadius*.8,this.innerRadius/100+.2*this.innerRadius))},update:function(t){var e=this,r=this.chart,n=r.chartArea,i=r.options,o=i.elements.arc,d=n.right-n.left-o.borderWidth,l=n.bottom-n.top-o.borderWidth,s=Math.min(d,l),u=this.getMeta(),h=i.centerPercentage;this.borderWidth=this.getMaxBorderWidth(u.data),this.outerRadius=Math.max((s-this.borderWidth)/2,0),this.innerRadius=Math.max(h?this.outerRadius/100*h:0,0),u.total=this.getMetricValue(),this.centerX=(n.left+n.right)/2,this.centerY=(n.top+n.bottom)/2,a.each(u.data,function(r,a){e.updateElement(r,a,t)})},updateElement:function(t,e,r){var n=this.chart,i=n.chartArea,o=n.options,d=o.animation,l=(i.left+i.right)/2,s=(i.top+i.bottom)/2,u=o.rotation,h=this.getDataset(),c=r&&d.animateRotate?0:this.calculateArcAngle(h.data[e]),f=r&&d.animateScale?0:this.getMetricValue(),g=u+c,x=this.innerRadius,b=this.outerRadius,m=a.valueAtIndexOrDefault;a.extend(t,{_datasetIndex:this.index,_index:e,_model:{x:l,y:s,startAngle:u,endAngle:g,outerRadius:b,innerRadius:x,label:m(h.label,e,n.data.labels[e]),roundedCorners:o.roundedCorners,value:f}});var p=t._model,v=t.custom||{},C=a.valueAtIndexOrDefault,y=this.chart.options.elements.arc;p.backgroundColor=v.backgroundColor?v.backgroundColor:C(h.backgroundColor,e,y.backgroundColor),p.borderColor=v.borderColor?v.borderColor:C(h.borderColor,e,y.borderColor),p.borderWidth=v.borderWidth?v.borderWidth:C(h.borderWidth,e,y.borderWidth),t.pivot()},getMetricValue:function(){var t=this.getDataset().data[0];return null==t&&(t=this.chart.options.domain[0]),t},getDomain:function(){return this.chart.options.domain},calculateArcAngle:function(){var t=this.getDomain(),e=r(t,2),a=e[0],n=e[1],i=this.getMetricValue(),o=n-a;return o>0?2*Math.PI*(Math.abs(i-a)/o):0},getMaxBorderWidth:function(t){for(var e=0,r=this.index,a=t.length,n=void 0,i=void 0,o=0;o<a;o++)n=t[o]._model?t[o]._model.borderWidth:0,e=(i=t[o]._chart?t[o]._chart.config.data.datasets[r].hoverBorderWidth:0)>(e=n>e?n:e)?i:e;return e}}),i(e),i});