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) 12.4 kB
!function(t){"function"==typeof define&&define.amd?define(["kendo.data.min","kendo.userevents.min","kendo.dataviz.themes.min"],t):t()}((function(){!function(t,e){var i=Math,n=Array.isArray,r=window.kendo,o=r._outerHeight,a=r._outerWidth,h=r.Class,s=r.ui.Widget,l=r.template,d=r.deepExtend,u=r.data.HierarchicalDataSource,c=r.getter,f=r.dataviz,p=".kendoTreeMap",v="change",m="dataBound",g="itemCreated",_=Number.MAX_VALUE,w=s.extend({init:function(e,i){r.destroy(e),t(e).empty(),s.fn.init.call(this,e,i),this.wrapper=this.element,this._initTheme(this.options),this.element.addClass("k-widget k-treemap"),this._setLayout(),this._originalOptions=d({},this.options),this._initDataSource(),this._attachEvents(),r.notify(this,f.ui)},options:{name:"TreeMap",theme:"default",autoBind:!0,textField:"text",valueField:"value",colorField:"color"},events:[m,g],_initTheme:function(t){var e=((f.ui.themes||{})[((t||{}).theme||"").toLowerCase()]||{}).treeMap;this.options=d({},e,t)},_attachEvents:function(){this.element.on("mouseover.kendoTreeMap",this._mouseover.bind(this)).on("mouseleave.kendoTreeMap",this._mouseleave.bind(this)),this._resizeHandler=this.resize.bind(this,!1),r.onResize(this._resizeHandler)},_setLayout:function(){"horizontal"===this.options.type?(this._layout=new C(!1),this._view=new x(this,this.options)):"vertical"===this.options.type?(this._layout=new C(!0),this._view=new x(this,this.options)):(this._layout=new y,this._view=new k(this,this.options))},_initDataSource:function(){var t=this,e=t.options.dataSource;t._dataChangeHandler=t._onDataChange.bind(t),t.dataSource=u.create(e).bind(v,t._dataChangeHandler),e&&t.options.autoBind&&t.dataSource.fetch()},setDataSource:function(t){var e=this;e.dataSource.unbind(v,e._dataChangeHandler),e.dataSource=t.bind(v,e._dataChangeHandler),t&&e.options.autoBind&&e.dataSource.fetch()},_onDataChange:function(t){var e,i,n=t.node,h=t.items,s=this.options;if(n){if(h.length){var l=this._getByUid(n.uid);for(l.children=[],h=new r.data.Query(h)._sortForGrouping(s.valueField,"desc"),i=0;i<h.length;i++)e=h[i],l.children.push(this._wrapItem(e));var d=this._view.htmlSize(l);this._layout.compute(l.children,l.coord,d),this._setColors(l.children),this._view.render(l)}}else this._cleanItems(),this.element.empty(),e=this._wrapItem(h[0]),this._layout.createRoot(e,a(this.element),o(this.element),"vertical"===this.options.type),this._view.createRoot(e),this._root=e,this._colorIdx=0;for(i=0;i<h.length;i++)h[i].load();n&&this.trigger(m,{node:n})},_cleanItems:function(){var t=this;t.angular("cleanup",(function(){return{elements:t.element.find(".k-leaf div,.k-treemap-title,.k-treemap-title-vertical")}}))},_setColors:function(t){var e,i,r=this.options.colors,o=r[this._colorIdx%r.length];n(o)&&(e=function(t,e,i){var n=T(t),r=T(e),o=B(t)-B(e)<0,a=[];a.push(t);for(var h=0;h<i;h++){var s={r:z(n.r,r.r,h,i,o),g:z(n.g,r.g,h,i,o),b:z(n.b,r.b,h,i,o)};a.push(b(s))}return a.push(e),a}(o[0],o[1],t.length));for(var a=!1,h=0;h<t.length;h++)S((i=t[h]).color)||(i.color=e?e[h]:o),i.dataItem.hasChildren||(a=!0);a&&this._colorIdx++},_contentSize:function(t){this.view.renderHeight(t)},_wrapItem:function(t){var e={};return S(this.options.valueField)&&(e.value=I(this.options.valueField,t)),S(this.options.colorField)&&(e.color=I(this.options.colorField,t)),S(this.options.textField)&&(e.text=I(this.options.textField,t)),e.level=t.level(),e.dataItem=t,e},_getByUid:function(t){for(var e,i=[this._root];i.length;){if((e=i.pop()).dataItem.uid===t)return e;e.children&&(i=i.concat(e.children))}},dataItem:function(e){var i=t(e).attr(r.attr("uid")),n=this.dataSource;return n&&n.getByUid(i)},findByUid:function(t){return this.element.find(".k-treemap-tile["+r.attr("uid")+"='"+t+"']")},_mouseover:function(e){var i=t(e.target);i.hasClass("k-leaf")&&(this._removeActiveState(),i.removeClass("k-hover").addClass("k-hover"))},_removeActiveState:function(){this.element.find(".k-hover").removeClass("k-hover")},_mouseleave:function(){this._removeActiveState()},destroy:function(){s.fn.destroy.call(this),this.element.off(p),this.dataSource&&this.dataSource.unbind(v,this._dataChangeHandler),this._root=null,r.unbindResize(this._resizeHandler),r.destroy(this.element)},items:function(){return t()},getSize:function(){return r.dimensions(this.element)},_resize:function(){var t=this._root;if(t){var e=this.element,i=e.children();t.coord.width=a(e),t.coord.height=o(e),i.css({width:t.coord.width,height:t.coord.height}),this._resizeItems(t,i)}},_resizeItems:function(t,e){if(t.children&&t.children.length){var i,n,o=e.children(".k-treemap-wrap").children();this._layout.compute(t.children,t.coord,{text:this._view.titleSize(t,e)});for(var a=0;a<t.children.length;a++)i=t.children[a],n=o.filter("["+r.attr("uid")+"='"+i.dataItem.uid+"']"),this._view.setItemSize(i,n),this._resizeItems(i,n)}},setOptions:function(t){var e=t.dataSource;t.dataSource=undefined,this._originalOptions=d(this._originalOptions,t),this.options=d({},this._originalOptions),this._setLayout(),this._initTheme(this.options),s.fn._setEvents.call(this,t),e&&this.setDataSource(u.create(e)),this.options.autoBind&&this.dataSource.fetch()}}),y=h.extend({createRoot:function(t,e,i){t.coord={width:e,height:i,top:0,left:0}},leaf:function(t){return!t.children},layoutChildren:function(t,e){var i,n=e.width*e.height,r=0,o=[];for(i=0;i<t.length;i++)o[i]=parseFloat(t[i].value),r+=o[i];for(i=0;i<o.length;i++)t[i].area=n*o[i]/r;var a=this.layoutHorizontal()?e.height:e.width,h=[t[0]],s=t.slice(1);this.squarify(s,h,a,e)},squarify:function(t,e,i,n){this.computeDim(t,e,i,n)},computeDim:function(t,e,i,n){if(t.length+e.length!=1)if(t.length>=2&&0===e.length&&(e=[t[0]],t=t.slice(1)),0!==t.length){var r=t[0];if(this.worstAspectRatio(e,i)>=this.worstAspectRatio([r].concat(e),i))this.computeDim(t.slice(1),e.concat([r]),i,n);else{var o=this.layoutRow(e,i,n);this.computeDim(t,[],o.dim,o)}}else e.length>0&&this.layoutRow(e,i,n);else{var a=1==t.length?t:e;this.layoutLast(a,i,n)}},layoutLast:function(t,e,i){t[0].coord=i},layoutRow:function(t,e,i){return this.layoutHorizontal()?this.layoutV(t,e,i):this.layoutH(t,e,i)},orientation:"h",layoutVertical:function(){return"v"===this.orientation},layoutHorizontal:function(){return"h"===this.orientation},layoutChange:function(){this.orientation=this.layoutVertical()?"h":"v"},worstAspectRatio:function(t,e){if(!t||0===t.length)return _;for(var n=0,r=0,o=_,a=0;a<t.length;a++){var h=t[a].area;n+=h,o=o<h?o:h,r=r>h?r:h}return i.max(e*e*r/(n*n),n*n/(e*e*o))},compute:function(t,e,i){if(e.width>=e.height&&this.layoutHorizontal()||this.layoutChange(),t&&t.length>0){var n={width:e.width,height:e.height-i.text,top:0,left:0};this.layoutChildren(t,n)}},layoutV:function(t,e,n){var r=0;e=D(this._totalArea(t)/e);for(var o=0;o<t.length;o++){var a=D(t[o].area/e);t[o].coord={height:a,width:e,top:n.top+r,left:n.left},r+=a}var h={height:n.height,width:n.width-e,top:n.top,left:n.left+e};return h.dim=i.min(h.width,h.height),h.dim!=h.height&&this.layoutChange(),h},layoutH:function(t,e,n){for(var r=D(this._totalArea(t)/e),o=n.top,a=0,h=0;h<t.length;h++)t[h].coord={height:r,width:D(t[h].area/r),top:o,left:n.left+a},a+=t[h].coord.width;var s={height:n.height-r,width:n.width,top:n.top+r,left:n.left};return s.dim=i.min(s.width,s.height),s.dim!=s.width&&this.layoutChange(),s},_totalArea:function(t){for(var e=0,i=0;i<t.length;i++)e+=t[i].area;return e}}),k=h.extend({init:function(e,i){this.options=d({},this.options,i),this.treeMap=e,this.element=t(e.element),this.offset=0},titleSize:function(t,e){return e.children(".k-treemap-title").height()||0},htmlSize:function(t){var e=this._getByUid(t.dataItem.uid),i={text:0};if(t.children){if(this._clean(e),this._getText(t)){var n=this._createTitle(t);e.append(n),this._compile(n,t.dataItem),i.text=n.height()}e.append(this._createWrap()),this.offset=(a(e)-e.innerWidth())/2}return i},_compile:function(t,e){this.treeMap.angular("compile",(function(){return{elements:t,data:[{dataItem:e}]}}))},_getByUid:function(t){return this.element.find(".k-treemap-tile["+r.attr("uid")+"='"+t+"']")},render:function(t){var e=this._getByUid(t.dataItem.uid),i=t.children;if(i)for(var n=e.find(".k-treemap-wrap"),r=0;r<i.length;r++){var o=i[r],a=this._createLeaf(o);n.append(a),this._compile(a.children(),o.dataItem),this.treeMap.trigger(g,{element:a})}},createRoot:function(t){var e=this._createLeaf(t);this.element.append(e),this._compile(e.children(),t.dataItem),this.treeMap.trigger(g,{element:e})},_clean:function(t){this.treeMap.angular("cleanup",(function(){return{elements:t.children(":not(.k-treemap-wrap)")}})),t.css("background-color",""),t.removeClass("k-leaf"),t.removeClass("k-inverse"),t.empty()},_createLeaf:function(e){return this._createTile(e).css("background-color",e.color).addClass("k-leaf").toggleClass("k-inverse",this._tileColorBrightness(e)>180).toggle(0!==e.value).append(t("<div></div>").html(this._getText(e)))},_createTile:function(e){var i=t("<div class='k-treemap-tile'></div>");return this.setItemSize(e,i),S(e.dataItem)&&S(e.dataItem.uid)&&i.attr(r.attr("uid"),e.dataItem.uid),i},_itemCoordinates:function(t){var e={width:t.coord.width,height:t.coord.height,left:t.coord.left,top:t.coord.top};return e.left&&this.offset?e.width+=2*this.offset:e.width+=this.offset,e.top?e.height+=2*this.offset:e.height+=this.offset,e},setItemSize:function(t,e){var i=this._itemCoordinates(t);e.css({width:i.width,height:i.height,left:i.left,top:i.top})},_getText:function(t){var e=t.text;return this.options.template&&(e=this._renderTemplate(t)),e},_renderTemplate:function(t){return l(this.options.template)({dataItem:t.dataItem,text:t.text})},_createTitle:function(e){return t("<div class='k-treemap-title'></div>").append(t("<div></div>").html(this._getText(e)))},_createWrap:function(){return t("<div class='k-treemap-wrap'></div>")},_tileColorBrightness:function(t){return B(t.color)}}),C=h.extend({createRoot:function(t,e,i,n){t.coord={width:e,height:i,top:0,left:0},t.vertical=n},init:function(t){this.vertical=t,this.quotient=t?1:0},compute:function(t,e,i){if(t.length>0){var n=e.width,r=e.height;this.vertical?r-=i.text:n-=i.text;var o={width:n,height:r,top:0,left:0};this.layoutChildren(t,o)}},layoutChildren:function(t,e){var i,n=e.width*e.height,r=0,o=[];for(i=0;i<t.length;i++){var a=t[i];o[i]=parseFloat(t[i].value),r+=o[i],a.vertical=this.vertical}for(i=0;i<o.length;i++)t[i].area=n*o[i]/r;this.sliceAndDice(t,e)},sliceAndDice:function(t,e){var i=this._totalArea(t);t[0].level%2===this.quotient?this.layoutHorizontal(t,e,i):this.layoutVertical(t,e,i)},layoutHorizontal:function(t,e,i){for(var n=0,r=0;r<t.length;r++){var o=t[r],a=o.area/(i/e.width);o.coord={height:e.height,width:a,top:e.top,left:e.left+n},n+=a}},layoutVertical:function(t,e,i){for(var n=0,r=0;r<t.length;r++){var o=t[r],a=o.area/(i/e.height);o.coord={height:a,width:e.width,top:e.top+n,left:e.left},n+=a}},_totalArea:function(t){for(var e=0,i=0;i<t.length;i++)e+=t[i].area;return e}}),x=k.extend({htmlSize:function(t){var e=this._getByUid(t.dataItem.uid),i={text:0,offset:0};if(t.children){if(this._clean(e),this._getText(t)){var n=this._createTitle(t);e.append(n),this._compile(n,t.dataItem),t.vertical?i.text=n.height():i.text=n.width()}e.append(this._createWrap()),this.offset=(a(e)-e.innerWidth())/2}return i},titleSize:function(t,e){return(t.vertical?e.children(".k-treemap-title").height():e.children(".k-treemap-title-vertical").width())||0},_createTitle:function(e){return(e.vertical?t("<div class='k-treemap-title'></div>"):t("<div class='k-treemap-title-vertical'></div>")).append(t("<div></div>").html(this._getText(e)))}});function I(t,e){return null===e?e:c(t,!0)(e)}function S(t){return void 0!==t}function z(t,e,n,r,o){var a=i.min(i.abs(t),i.abs(e)),h=i.max(i.abs(t),i.abs(e)),s=(h-a)/(r+1)*(n+1);return o?a+s:h-s}function b(t){return"#"+H(t.r)+H(t.g)+H(t.b)}function T(t){var e=function(t){var e=t.length,i={};3===e?(i.r=t[0],i.g=t[1],i.b=t[2]):(i.r=t.substring(0,2),i.g=t.substring(2,4),i.b=t.substring(4,6));return i}(t=t.replace("#",""));return{r:A(e.r),g:A(e.g),b:A(e.b)}}function H(t){var e=i.round(t).toString(16).toUpperCase();return 1===e.length&&(e="0"+e),e}function A(t){return parseInt(t.toString(16),16)}function B(t){var e=0;return t&&(t=T(t),e=i.sqrt(.241*t.r*t.r+.691*t.g*t.g+.068*t.b*t.b)),e}function D(t){var e=i.pow(10,4);return i.round(t*e)/e}f.ui.plugin(w)}(window.kendo.jQuery)})); //# sourceMappingURL=kendo.dataviz.treemap.min.js.map