chartjs-gauge/dist/chartjs-gauge.min.js

Gauge chart for chart.js

/*!
 * chartjs-gauge.js v0.3.0
 * https://github.com/haiiaaa/chartjs-gauge/
 * (c) 2021 chartjs-gauge.js Contributors
 * Released under the MIT License
 */
!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=t||self).Gauge=e(t.Chart)}(this,(function(t){"use strict";function e(t,e,r){return e in t?Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[e]=r,t}function r(t,e){var r=Object.keys(t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(t);e&&(a=a.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),r.push.apply(r,a)}return r}(t=t&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t).defaults._set("gauge",{needle:{radiusPercentage:2,widthPercentage:3.2,lengthPercentage:80,color:"rgba(0, 0, 0, 1)"},valueLabel:{display:!0,formatter:null,color:"rgba(255, 255, 255, 1)",backgroundColor:"rgba(0, 0, 0, 1)",borderRadius:5,padding:{top:5,right:5,bottom:5,left:5},bottomMarginPercentage:5},animation:{duration:1e3,animateRotate:!0,animateScale:!1},cutoutPercentage:50,rotation:-Math.PI,circumference:Math.PI,legend:{display:!1},tooltips:{enabled:!1}});var a=t.controllers.doughnut.extend({getValuePercent:function(t,e){var r=t.minValue,a=t.data,n=r||0;return(e-n)/((a[a.length-1]||1)-n)},getWidth:function(t){return t.chartArea.right-t.chartArea.left},getTranslation:function(t){var e=t.chartArea,r=t.offsetX,a=t.offsetY;return{dx:(e.left+e.right)/2+r,dy:(e.top+e.bottom)/2+a}},getAngle:function(t){var e=t.chart,r=t.valuePercent,a=e.options;return a.rotation+a.circumference*r},drawNeedle:function(t){this.chart.animating||(t=1);var e=this.chart,r=e.ctx,a=e.config,n=e.innerRadius,i=e.outerRadius,o=a.data.datasets[this.index],l=this.getMeta().previous,c=a.options.needle,s=c.radiusPercentage,u=c.widthPercentage,h=c.lengthPercentage,d=c.color,g=this.getWidth(this.chart),f=s/100*g,p=u/100*g,b=h/100*(i-n)+n,P=this.getTranslation(this.chart),v=P.dx,m=P.dy,y=this.getAngle({chart:this.chart,valuePercent:l.valuePercent}),x=y+(this.getAngle({chart:this.chart,valuePercent:this.getValuePercent(o,o.value)})-y)*t;r.save(),r.translate(v,m),r.rotate(x),r.fillStyle=d,r.beginPath(),r.ellipse(0,0,f,f,0,0,2*Math.PI),r.fill(),r.beginPath(),r.moveTo(0,p/2),r.lineTo(b,0),r.lineTo(0,-p/2),r.fill(),r.restore()},drawValueLabel:function(e){if(this.chart.config.options.valueLabel.display){var r=this.chart,a=r.ctx,n=r.config,i=n.options.defaultFontFamily,o=n.data.datasets[this.index],l=n.options.valueLabel,c=l.formatter,s=l.fontSize,u=l.color,h=l.backgroundColor,d=l.borderRadius,g=l.padding,f=l.bottomMarginPercentage/100*this.getWidth(this.chart),p=(c||function(t){return t})(o.value).toString();a.textBaseline="middle",a.textAlign="center",s&&(a.font="".concat(s,"px ").concat(i));var b=a.measureText(p).width,P=Math.max(a.measureText("m").width,a.measureText("Ｗ").width),v=-(g.left+b/2),m=-(g.top+P/2),y=g.left+b+g.right,x=g.top+P+g.bottom,w=this.getTranslation(this.chart),O=w.dx,j=w.dy,M=this.chart.options.rotation%(2*Math.PI);O+=f*Math.cos(M+Math.PI/2),j+=f*Math.sin(M+Math.PI/2),a.save(),a.translate(O,j),a.beginPath(),t.helpers.canvas.roundedRect(a,v,m,y,x,d),a.fillStyle=h,a.fill(),a.fillStyle=u||n.options.defaultFontColor;a.fillText(p,0,.075*P),a.restore()}},update:function(e){var r=this.chart.config.data.datasets[this.index];r.minValue=r.minValue||0;var a=this.getMeta(),n={valuePercent:0};e?(a.previous=null,a.current=n):(r.data.sort((function(t,e){return t-e})),a.previous=a.current||n,a.current={valuePercent:this.getValuePercent(r,r.value)}),t.controllers.doughnut.prototype.update.call(this,e)},updateElement:function(a,n,i){t.controllers.doughnut.prototype.updateElement.call(this,a,n,i);var o=this.getDataset(),l=o.data,c=0===n?o.minValue:l[n-1],s=l[n],u=this.getAngle({chart:this.chart,valuePercent:this.getValuePercent(o,c)}),h=this.getAngle({chart:this.chart,valuePercent:this.getValuePercent(o,s)}),d=h-u;a._model=function(t){for(var a=1;a<arguments.length;a++){var n=null!=arguments[a]?arguments[a]:{};a%2?r(Object(n),!0).forEach((function(r){e(t,r,n[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):r(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}({},a._model,{startAngle:u,endAngle:h,circumference:d})},draw:function(e){t.controllers.doughnut.prototype.draw.call(this,e),this.drawNeedle(e),this.drawValueLabel(e)}});return void 0===CanvasRenderingContext2D.prototype.ellipse&&(CanvasRenderingContext2D.prototype.ellipse=function(t,e,r,a,n,i,o,l){this.save(),this.translate(t,e),this.rotate(n),this.scale(r,a),this.arc(0,0,1,i,o,l),this.restore()}),t.controllers.gauge=a,t.Gauge=function(e,r){return r.type="gauge",new t(e,r)},t.Gauge}));