sense-calendar-heatmap
Version:
Qlik Sense Visualization Extension with a diverging color scale. The values are displayed as colored cells per day. Days are arranged into columns by week, then grouped by month and years.
1 lines • 3.01 kB
JavaScript
define(["jquery","underscore","qvangular","text!./swr-calendarview.ng.html","text!./swr-calendarview.css","text!./colorbrewer.css","./../../js/calendar","./../../external/d3/d3.min"],function(t,e,a,n,r,s,o){"use strict";a.directive("swrCalendarview",[function(){function a(t){var e=d3.values(t).sort(function(t,e){return d3.ascending(t.Measure,e.Measure)})[0];return e?parseFloat(e.Measure):null}function c(t){var e=d3.values(t).sort(function(t,e){return d3.descending(t.Measure,e.Measure)})[0];return e?parseFloat(e.Measure):null}function i(t){var e=[];return d3.nest().key(function(t){return t.Date.substr(0,4)}).sortKeys(d3.ascending).entries(t).forEach(function(t){e.push(parseInt(t.key))}),e}function l(n,r,s){if(r&&0!==r.length){t("#chart_"+n).empty();var l=s-25,d=14,u=~~((l-2*d)/53),p=u>>1,f=7*u,h=i(r),y=d3.select("#chart_"+n).selectAll("svg").data(h).enter().append("svg:svg").attr("width",l).attr("height",f+2*p).attr("class","RdYlGn").append("svg:g").attr("transform","translate("+d+","+p+")");y.append("svg:text").attr("transform","translate(-6,"+f/2+")rotate(-90)").attr("text-anchor","middle").text(function(t){return t}),y.selectAll("rect.D3CV_day").data(o.dates).enter().append("svg:rect").attr("x",function(t){return t.week*u}).attr("y",function(t){return t.day*u}).attr("class","D3CV_day").attr("width",u).attr("height",u),y.selectAll("path.D3CV_month").data(o.months).enter().append("svg:path").attr("class","D3CV_month").attr("d",function(t){return"M"+(t.firstWeek+1)*u+","+t.firstDay*u+"H"+t.firstWeek*u+"V"+7*u+"H"+t.lastWeek*u+"V"+(t.lastDay+1)*u+"H"+(t.lastWeek+1)*u+"V0H"+(t.firstWeek+1)*u+"Z"});var v=d3.nest().key(function(t){return t.Date}).rollup(function(t){return{Measure:t[0].Measure,ToolTip:t[0].ToolTip}}).map(r),g=a(r),D=c(r);g===D&&(g=2*g,D=2*D);var m=d3.select("#chart_"+n).append("div").attr("class","D3CV_ToolTip").style("opacity",0),_=d3.scale.quantize().domain([g,D]).range(d3.range(9)),w=t("#chart_"+n).offset().left,k=t("#chart_"+n).offset().top;y.selectAll("rect.D3CV_day").attr("class",function(t){return e.isEmpty(v[t.Date])?"D3CV_day":Object.keys(v).length>1?"D3CV_day q"+_(v[t.Date].Measure)+"-9":"D3CV_day D3CV_day_single"}).on("click",function(){}).on("mouseover",function(t){m.transition().duration(200).style("opacity",.99).style("display","block"),m.html("Date: "+t.Date+"<br/>"+(e.isEmpty(v[t.Date])?"":v[t.Date].ToolTip)).style("left",d3.event.pageX-w+"px").style("top",d3.event.pageY-m.attr("height")-k+5+"px")}).on("mouseout",function(){m.transition().duration(200).style("opacity",0).style("display","none")})}}return t("<style>").html(r).appendTo("head"),t("<style>").html(s).appendTo("head"),{restrict:"EA",scope:{objectId:"=",cvData:"="},template:n,link:function(e){e.$watchCollection("cvData",function(){e.render()}),e.$watch(function(){return[t("#chart_"+e.objectId).width(),t("#chart_"+e.objectId).height()].join("x")},function(t,a){t!==a&&(void 0,e.render())}),e.render=function(){l(e.objectId,e.cvData,t("#chart_"+e.objectId).width())}}}}])});