UNPKG

@progress/kendo-ui

Version:

This package is part of the [Kendo UI for jQuery](http://www.telerik.com/kendo-ui) suite.

3 lines (2 loc) 6.98 kB
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("kendo.dataviz.themes.js"),require("kendo.drawing.cmn.chunk.js"),require("kendo.charts.cmn.chunk.js")):"function"==typeof define&&define.amd?define(["exports","kendo.dataviz.themes.min","kendo.drawing.cmn.chunk.min","kendo.charts.cmn.chunk.min"],t):t(((e="undefined"!=typeof globalThis?globalThis:e||self).kendo=e.kendo||{},e.kendo._globals=e.kendo._globals||{},e.kendo._globals.Circularprogressbar={}),e.kendo._globals.DatavizThemes,e.kendo._globals.DrawingCmnChunk,e.kendo._globals.ChartsCmnChunk)}(this,(function(e,t,n,i){!function(e){window.kendo.dataviz=window.kendo.dataviz||{};var t=kendo.dataviz,r=kendo.ui,o=r.Widget,s=n.W,a=n.X,l=n.G;class h extends n.c{constructor(){super(...arguments);var e=this.options,t=this.options.endColor,n=this.options.startColor,i=Math.abs(e.newAngle-e.oldAngle)/e.duration*1e3;e.duration=a(i,150,800),n!==t&&(this.startColor=new kendo.Color(n),this.color=new kendo.Color(t))}step(e){var t=this,n=t.options,r=t.startColor,o=t.color,s=i.i(n.oldAngle,n.newAngle,e);if(this.element.geometry().setEndAngle(s),o){var a=i.r(i.i(r.r,o.r,e)),l=i.r(i.i(r.g,o.g,e)),h=i.r(i.i(r.b,o.b,e));this.element.stroke(new kendo.Color(a,l,h).toHex())}}}var c=o.extend({init:function(e,n){o.fn.init.call(this,e,n),this.theme=function(e,n){var r=t.ui.themes||{},o=e.theme||"",s=o.toLowerCase();if(-1!=t.SASS_THEMES.indexOf(s)){n.addClass("k-gauge");const e=i.g(n[0]);return n.removeClass("k-gauge"),e}return(r[o]||r[s]||{}).gauge}(this.options,this.element),this._value=this.options.value,this.element.addClass("k-gauge"),this.redraw(),this._centerTemplate(),this._aria()},options:{name:"CircularProgressBar",ariaRole:!1,theme:"sass",centerTemplate:"",color:"",colors:[],transitions:!0,pointerWidth:5,indeterminate:!1,label:null,labelId:null},events:[],value:function(e){var t=this;if(undefined===e)return t._value;e=t._restrictValue(e),t._centerSvgElements(),t._pointerChange(t._value,e),t._value=e,t._centerTemplate(),t._updateProgress()},redraw:function(){this._initSurface(),this._buildVisual(),this._draw()},resize:function(){var e=this.options.transitions;this.options.transitions=!1,this._initSurface(),this._buildVisual(),this._draw(),this._centerTemplate(),this.options.transitions=e},destroy:function(){var e=this;e.announce&&e.announce.remove(),o.fn.destroy.call(e)},_aria:function(){var t=this,n=t.options,i=t.value()||0,r=t.element;n.ariaRole&&(r.attr({role:"progressbar"}),n.indeterminate||r.attr({"aria-valuemin":0,"aria-valuemax":100}),n.labelId?r.attr("aria-labelledby",n.labelId):n.label&&r.attr("aria-label",n.label),t.announce=e('<span aria-live="polite" class="k-sr-only k-progress-announce"></span>'),t.announce.appendTo(e("body")),n.indeterminate?t.announce.text("Loading..."):(r.attr("aria-valuenow",i),t.announce.text(i+"%")))},_restrictValue:function(e){return e<0?0:e>100?100:e},_updateProgress:function(){var e=this,t=e.options,n=e.value()||0;t.ariaRole&&!t.indeterminate&&(e.element.attr("aria-valuenow",n),e.announce&&e.announce.text(n+"%"))},_centerSvgElements:function(){var e=this._getCenter();this.circle._geometry.center.x===e.x&&this.circle._geometry.center.y===e.y||(this.circle._geometry.center.x=e.x,this.circle._geometry.center.y=e.y,this.arc._geometry.center.x=e.x,this.arc._geometry.center.y=e.y,this.circle.geometryChange(),this.arc.geometryChange())},_centerTemplate:function(){var e,t,n;this.options.centerTemplate?(t=kendo.template(this.options.centerTemplate),(n=this._getCenterElement()).html(t({color:this._getColor(this.value()),value:this.value()})),e=this._centerTemplatePosition(n.width(),n.height()),n.css(e)):this._centerElement&&(this._centerElement.remove(),this._centerElement=null)},_getCenterElement:function(){var t=this._centerElement;return t||(t=this._centerElement=e("<div></div>").addClass("k-arcgauge-label"),this.element.append(t)),t},_pointerChange:function(e,t){let n;this.options.transitions?(n=new h(this.arc,{oldAngle:this._slotAngle(e),startColor:this._getColor(e),newAngle:this._slotAngle(t),endColor:this._getColor(t)}),n.play()):(this.arc.stroke(this._getColor(t)),this.arc.geometry().setEndAngle(this._slotAngle(t)))},_draw:function(){let t,n,i,r=this.surface;r.clear(),r.draw(this._visuals),this.options.indeterminate?(t=e(r.element).find("path"),n=this._getCenter(),t[0].innerHTML=kendo.format('<animateTransform attributeName="transform" type="rotate" from="0 {0} {1}" to="360 {0} {1}" dur="1s" repeatCount="indefinite" />',n.x,n.y)):this.options.transitions&&(i=new h(this.arc,{oldAngle:this._slotAngle(0),startColor:this._getColor(0),newAngle:this._slotAngle(this.value()),endColor:this._getColor(this.value())}),i.play())},_buildVisual:function(){var e=this._visuals=new l,t=this._getCenter(),i=this._getColor(this.value())||this.theme.pointer.color,r=Math.min(t.x,t.y)-5-this.options.pointerWidth,o=new n.g([t.x,t.y],r+this.options.pointerWidth/2),s=this.circle=new n.f(o,{fill:{color:"none"},stroke:{color:this.theme.scale.rangePlaceholderColor,width:this.options.pointerWidth}});e.append(s),this.options.indeterminate?this.arc=this._createArc(360,r,t,i):this.arc=this._createArc(this._slotAngle(this.value()),r,t,i),e.append(this.arc)},_slotAngle:function(e){return(e-0)/100*360+90+180},_getColor:function(e){var n=this.options,i=n.colors,r=n.color,o=t.isNumber(e)?e:0;if(i)for(var s=0;s<i.length;s++){var a=i[s],l=a.color,h=a.from;void 0===h&&(h=0);var c=a.to;if(void 0===c&&(c=100),h<=o&&o<=c)return l}return r},_createArc:function(e,t,i,r){var o=this.options.pointerWidth,a=new n.A([i.x,i.y],{radiusX:t+o/2,radiusY:t+o/2,startAngle:270,endAngle:e});return new s(a,{stroke:{width:o,color:this.options.color||r,opacity:this.options.opacity}})},_centerTemplatePosition:function(e,t){var n,i,r=this._getSize(),o=this._getCenter(),s=o.x-e/2,a=o.y-t/2;return e<r.width&&(n=s+e,s=Math.max(s,0),n>r.width&&(s-=n-r.width)),t<r.height&&(i=a+t)>r.height&&(a-=i-r.height),{left:s,top:a}},_getCenter:function(){var e=this._getSize();return new t.Point(e.width/2,e.height/2)},_getSize:function(){var e=this.element,t=200,n=200,i=e[0].offsetWidth,r=e[0].offsetHeight;return i||(i=t),r||(r=n),{width:i,height:r}},_surfaceElement:function(){return this.surfaceElement||(this.surfaceElement=document.createElement("div"),this.element[0].appendChild(this.surfaceElement)),this.surfaceElement},_initSurface:function(){var e=this.options,i=this.surface,r=this._surfaceElement(),o=this._getSize();t.elementSize(r,o),i?(this.surface.clear(),this.surface.resize()):this.surface=n.n.create(r,{type:e.renderAs})}});r.plugin(c)}(window.kendo.jQuery);var r=kendo;e.__meta__={id:"circularprogressBar",name:"CircularProgressBar",category:"web",description:"The Circular ProgressBar component represents an SVG loader",depends:["core","dataviz.themes","drawing.cmn.chunk","charts.cmn.chunk"]},e.default=r,Object.defineProperty(e,"__esModule",{value:!0})})); //# sourceMappingURL=kendo.circularprogressbar.min.js.map