/
heatmap.js
1 lines (1 loc) · 10.1 KB
/
heatmap.js
1
(function(t,a,e){if(typeof module!=="undefined"&&module.exports){module.exports=e()}else if(typeof define==="function"&&define.amd){define(e)}else{a[t]=e()}})("h337",this,function(){var t={defaultRadius:40,defaultRenderer:"canvas2d",defaultGradient:{.25:"rgb(0,0,255)",.55:"rgb(0,255,0)",.85:"yellow",1:"rgb(255,0,0)"},defaultMaxOpacity:1,defaultMinOpacity:0,defaultBlur:.85,defaultXField:"x",defaultYField:"y",defaultValueField:"value",plugins:{}};var a=function h(){var a=function i(t){this._coordinator={};this._data=[];this._radi=[];this._min=10;this._max=1;this._xField=t["xField"]||t.defaultXField;this._yField=t["yField"]||t.defaultYField;this._valueField=t["valueField"]||t.defaultValueField;if(t["radius"]){this._cfgRadius=t["radius"]}};var e=t.defaultRadius;a.prototype={_organiseData:function(t,a){var i=t[this._xField];var r=t[this._yField];var n=this._radi;var s=this._data;var h=this._max;var o=this._min;var d=t[this._valueField]||1;var l=t.radius||this._cfgRadius||e;if(!s[i]){s[i]=[];n[i]=[]}if(!s[i][r]){s[i][r]=d;n[i][r]=l}else{s[i][r]+=d}var u=s[i][r];if(u>h){if(!a){this._max=u}else{this.setDataMax(u)}return false}else if(u<o){if(!a){this._min=u}else{this.setDataMin(u)}return false}else{return{x:i,y:r,value:d,radius:l,min:o,max:h}}},_unOrganizeData:function(){var t=[];var a=this._data;var e=this._radi;for(var i in a){for(var r in a[i]){t.push({x:i,y:r,radius:e[i][r],value:a[i][r]})}}return{min:this._min,max:this._max,data:t}},_onExtremaChange:function(){this._coordinator.emit("extremachange",{min:this._min,max:this._max})},addData:function(){if(arguments[0].length>0){var t=arguments[0];var a=t.length;while(a--){this.addData.call(this,t[a])}}else{var e=this._organiseData(arguments[0],true);if(e){if(this._data.length===0){this._min=this._max=e.value}this._coordinator.emit("renderpartial",{min:this._min,max:this._max,data:[e]})}}return this},setData:function(t){var a=t.data;var e=a.length;this._data=[];this._radi=[];for(var i=0;i<e;i++){this._organiseData(a[i],false)}this._max=t.max;this._min=t.min||0;this._onExtremaChange();this._coordinator.emit("renderall",this._getInternalData());return this},removeData:function(){},setDataMax:function(t){this._max=t;this._onExtremaChange();this._coordinator.emit("renderall",this._getInternalData());return this},setDataMin:function(t){this._min=t;this._onExtremaChange();this._coordinator.emit("renderall",this._getInternalData());return this},setCoordinator:function(t){this._coordinator=t},_getInternalData:function(){return{max:this._max,min:this._min,data:this._data,radi:this._radi}},getData:function(){return this._unOrganizeData()}};return a}();var e=function o(){var t=function(t){var a=t.gradient||t.defaultGradient;var e=document.createElement("canvas");var i=e.getContext("2d");e.width=256;e.height=1;var r=i.createLinearGradient(0,0,256,1);for(var n in a){r.addColorStop(n,a[n])}i.fillStyle=r;i.fillRect(0,0,256,1);return i.getImageData(0,0,256,1).data};var a=function(t,a){var e=document.createElement("canvas");var i=e.getContext("2d");var r=t;var n=t;e.width=e.height=t*2;if(a==1){i.beginPath();i.arc(r,n,t,0,2*Math.PI,false);i.fillStyle="rgba(0,0,0,1)";i.fill()}else{var s=i.createRadialGradient(r,n,t*a,r,n,t);s.addColorStop(0,"rgba(0,0,0,1)");s.addColorStop(1,"rgba(0,0,0,0)");i.fillStyle=s;i.fillRect(0,0,2*t,2*t)}return e};var e=function(t){var a=[];var e=t.min;var i=t.max;var r=t.radi;var t=t.data;var n=Object.keys(t);var s=n.length;while(s--){var h=n[s];var o=Object.keys(t[h]);var d=o.length;while(d--){var l=o[d];var u=t[h][l];var c=r[h][l];a.push({x:h,y:l,value:u,radius:c})}}return{min:e,max:i,data:a}};function i(a){var e=a.container;var i=this.shadowCanvas=document.createElement("canvas");var r=this.canvas=a.canvas||document.createElement("canvas");var n=this._renderBoundaries=[1e4,1e4,0,0];var s=getComputedStyle(a.container)||{};r.className="heatmap-canvas";this._width=r.width=i.width=a.width||+s.width.replace(/px/,"");this._height=r.height=i.height=a.height||+s.height.replace(/px/,"");this.shadowCtx=i.getContext("2d");this.ctx=r.getContext("2d");r.style.cssText=i.style.cssText="position:absolute;left:0;top:0;";e.style.position="relative";e.appendChild(r);this._palette=t(a);this._templates={};this._setStyles(a)}i.prototype={renderPartial:function(t){if(t.data.length>0){this._drawAlpha(t);this._colorize()}},renderAll:function(t){this._clear();if(t.data.length>0){this._drawAlpha(e(t));this._colorize()}},_updateGradient:function(a){this._palette=t(a)},updateConfig:function(t){if(t["gradient"]){this._updateGradient(t)}this._setStyles(t)},setDimensions:function(t,a){this._width=t;this._height=a;this.canvas.width=this.shadowCanvas.width=t;this.canvas.height=this.shadowCanvas.height=a},_clear:function(){this.shadowCtx.clearRect(0,0,this._width,this._height);this.ctx.clearRect(0,0,this._width,this._height)},_setStyles:function(t){this._blur=t.blur==0?0:t.blur||t.defaultBlur;if(t.backgroundColor){this.canvas.style.backgroundColor=t.backgroundColor}this._width=this.canvas.width=this.shadowCanvas.width=t.width||this._width;this._height=this.canvas.height=this.shadowCanvas.height=t.height||this._height;this._opacity=(t.opacity||0)*255;this._maxOpacity=(t.maxOpacity||t.defaultMaxOpacity)*255;this._minOpacity=(t.minOpacity||t.defaultMinOpacity)*255;this._useGradientOpacity=!!t.useGradientOpacity},_drawAlpha:function(t){var e=this._min=t.min;var i=this._max=t.max;var t=t.data||[];var r=t.length;var n=1-this._blur;while(r--){var s=t[r];var h=s.x;var o=s.y;var d=s.radius;var l=Math.min(s.value,i);var u=h-d;var c=o-d;var f=this.shadowCtx;var v;if(!this._templates[d]){this._templates[d]=v=a(d,n)}else{v=this._templates[d]}var _=(l-e)/(i-e);f.globalAlpha=_<.01?.01:_;f.drawImage(v,u,c);if(u<this._renderBoundaries[0]){this._renderBoundaries[0]=u}if(c<this._renderBoundaries[1]){this._renderBoundaries[1]=c}if(u+2*d>this._renderBoundaries[2]){this._renderBoundaries[2]=u+2*d}if(c+2*d>this._renderBoundaries[3]){this._renderBoundaries[3]=c+2*d}}},_colorize:function(){var t=this._renderBoundaries[0];var a=this._renderBoundaries[1];var e=this._renderBoundaries[2]-t;var i=this._renderBoundaries[3]-a;var r=this._width;var n=this._height;var s=this._opacity;var h=this._maxOpacity;var o=this._minOpacity;var d=this._useGradientOpacity;if(t<0){t=0}if(a<0){a=0}if(t+e>r){e=r-t}if(a+i>n){i=n-a}var l=this.shadowCtx.getImageData(t,a,e,i);var u=l.data;var c=u.length;var f=this._palette;for(var v=3;v<c;v+=4){var _=u[v];var g=_*4;if(!g){continue}var m;if(s>0){m=s}else{if(_<h){if(_<o){m=o}else{m=_}}else{m=h}}u[v-3]=f[g];u[v-2]=f[g+1];u[v-1]=f[g+2];u[v]=d?f[g+3]:m}l.data=u;this.ctx.putImageData(l,t,a);this._renderBoundaries=[1e3,1e3,0,0]},getValueAt:function(t){var a;var e=this.shadowCtx;var i=e.getImageData(t.x,t.y,1,1);var r=i.data[3];var n=this._max;var s=this._min;a=Math.abs(n-s)*(r/255)>>0;return a},getDataURL:function(){return this.canvas.toDataURL()}};return i}();var i=function d(){var a=false;if(t["defaultRenderer"]==="canvas2d"){a=e}return a}();var r={merge:function(){var t={};var a=arguments.length;for(var e=0;e<a;e++){var i=arguments[e];for(var r in i){t[r]=i[r]}}return t}};var n=function l(){var e=function h(){function t(){this.cStore={}}t.prototype={on:function(t,a,e){var i=this.cStore;if(!i[t]){i[t]=[]}i[t].push(function(t){return a.call(e,t)})},emit:function(t,a){var e=this.cStore;if(e[t]){var i=e[t].length;for(var r=0;r<i;r++){var n=e[t][r];n(a)}}}};return t}();var n=function(t){var a=t._renderer;var e=t._coordinator;var i=t._store;e.on("renderpartial",a.renderPartial,a);e.on("renderall",a.renderAll,a);e.on("extremachange",function(a){t._config.onExtremaChange&&t._config.onExtremaChange({min:a.min,max:a.max,gradient:t._config["gradient"]||t._config["defaultGradient"]})});i.setCoordinator(e)};function s(){var s=this._config=r.merge(t,arguments[0]||{});this._coordinator=new e;if(s["plugin"]){var h=s["plugin"];if(!t.plugins[h]){throw new Error("Plugin '"+h+"' not found. Maybe it was not registered.")}else{var o=t.plugins[h];this._renderer=new o.renderer(s);this._store=new o.store(s)}}else{this._renderer=new i(s);this._store=new a(s)}n(this)}s.prototype={addData:function(){this._store.addData.apply(this._store,arguments);return this},removeData:function(){this._store.removeData&&this._store.removeData.apply(this._store,arguments);return this},setData:function(){this._store.setData.apply(this._store,arguments);return this},setDataMax:function(){this._store.setDataMax.apply(this._store,arguments);return this},setDataMin:function(){this._store.setDataMin.apply(this._store,arguments);return this},configure:function(t){this._config=r.merge(this._config,t);this._renderer.updateConfig(this._config);this._coordinator.emit("renderall",this._store._getInternalData());return this},repaint:function(){this._coordinator.emit("renderall",this._store._getInternalData());return this},getData:function(){return this._store.getData()},getDataURL:function(){return this._renderer.getDataURL()},getValueAt:function(t){if(this._store.getValueAt){return this._store.getValueAt(t)}else if(this._renderer.getValueAt){return this._renderer.getValueAt(t)}else{return null}}};return s}();var s={create:function(t){return new n(t)},register:function(a,e){t.plugins[a]=e}};return s});"use strict";(function(t){var a;var e=/[\/\$#\[\]\.]/;var i=document.location.host.split(e).join("_")+document.location.pathname.split(e).join("_");var r=(new Date).getTime();var n=function(t){var a=(new Date).getTime()-r;return Math.log(a)*t};var s=document.getElementsByTagName("body")[0];var h={radius:60,container:s,visible:true,opacity:.7,blur:1};var o=document.body;var d=document.documentElement;h.width=Math.max(o.scrollWidth,o.offsetWidth,d.clientWidth,d.scrollWidth,d.offsetWidth);h.height=Math.max(o.scrollHeight,o.offsetHeight,d.clientHeight,d.scrollHeight,d.offsetHeight);a=window.h337.create(h);window.firebase.database().ref("events/"+i).on("child_added",function(t){var e=t.val();if(e.a==="click"){a.addData({x:e.x,y:e.y,value:n(.5)})}else{a.addData({x:e.x,y:e.y,value:n(.2)})}console.log("Event",e)},function(t){console.log(t)});window.firebase.database().ref("users").on("value",function(t){console.log(t.val())},function(t){console.log(t)});window.firebase.database().ref("views/"+i).on("child_added",function(t){console.log("View",t.val())},function(t){console.log(t)})})(window);