reactjs-calendar-heatmap
Advanced tools
Comparing version 0.0.5 to 0.0.6
@@ -1,1 +0,1 @@ | ||
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("react"),require("moment"),require("d3")):"function"==typeof define&&define.amd?define(["react","moment","d3"],e):"object"==typeof exports?exports.CalendarHeatmap=e(require("react"),require("moment"),require("d3")):t.CalendarHeatmap=e(t.React,t.moment,t.d3)}(this,function(t,e,i){return function(t){function e(n){if(i[n])return i[n].exports;var a=i[n]={i:n,l:!1,exports:{}};return t[n].call(a.exports,a,a.exports,e),a.l=!0,a.exports}var i={};return e.m=t,e.c=i,e.d=function(t,i,n){e.o(t,i)||Object.defineProperty(t,i,{configurable:!1,enumerable:!0,get:n})},e.n=function(t){var i=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(i,"a",i),i},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="/",e(e.s=0)}([function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var n=i(1),a=function(t){return t&&t.__esModule?t:{default:t}}(n);e.default=a.default,t.exports=e.default},function(t,e,i){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function a(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function s(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}Object.defineProperty(e,"__esModule",{value:!0});var r=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}(),o=i(2),l=i(3),d=function(t){return t&&t.__esModule?t:{default:t}}(l),u=i(4),c=function(t){if(t&&t.__esModule)return t;var e={};if(null!=t)for(var i in t)Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e.default=t,e}(u),h=function(t){function e(t){n(this,e);var i=a(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t));return i.settings={gutter:5,item_gutter:1,width:1e3,height:200,item_size:10,label_padding:40,max_block_height:20,transition_duration:500,tooltip_width:250,tooltip_padding:15},i.in_transition=!1,i.overview=i.props.overview,i.history=["global"],i.selected={},i.calcDimensions=i.calcDimensions.bind(i),i}return s(e,t),r(e,[{key:"componentDidMount",value:function(){this.createElements(),this.parseData(),this.drawChart(),window.addEventListener("resize",this.calcDimensions)}},{key:"componentWillUnmount",value:function(){window.removeEventListener("resize",this.calcDimensions)}},{key:"createElements",value:function(){this.svg=c.select("#calendar-heatmap").append("svg").attr("class","svg"),this.items=this.svg.append("g"),this.labels=this.svg.append("g"),this.buttons=this.svg.append("g"),this.tooltip=c.select("#calendar-heatmap").append("div").attr("class","heatmap-tooltip").style("opacity",0).style("pointer-events","none").style("position","absolute").style("z-index",9999).style("width","250px").style("max-width","250px").style("overflow","hidden").style("padding","15px").style("font-size","12px").style("line-height","14px").style("color","rgb(51, 51, 51)").style("background","rgba(255, 255, 255, 0.75)"),this.calcDimensions()}},{key:"calcDimensions",value:function(){var t=Math.round(((0,d.default)()-(0,d.default)().subtract(1,"year").startOf("week"))/864e5),e=Math.trunc(t/7),i=e+1;this.settings.width=this.container.offsetWidth<1e3?1e3:this.container.offsetWidth,this.settings.item_size=(this.settings.width-this.settings.label_padding)/i-this.settings.gutter,this.settings.height=this.settings.label_padding+7*(this.settings.item_size+this.settings.gutter),this.svg.attr("width",this.settings.width).attr("height",this.settings.height),this.props.data&&this.props.data[0].summary&&this.drawChart()}},{key:"parseData",value:function(){this.props.data&&(this.props.data[0].summary||this.props.data.map(function(t){var e=t.details.reduce(function(t,e){return t[e.name]?t[e.name].value+=e.value:t[e.name]={value:e.value},t},{}),i=Object.keys(e).map(function(t){return{name:t,value:e[t].value}});return t.summary=i.sort(function(t,e){return e.value-t.value}),t}))}},{key:"drawChart",value:function(){"global"===this.overview?this.drawGlobalOverview():"year"===this.overview?this.drawYearOverview():"month"===this.overview?this.drawMonthOverview():"week"===this.overview?this.drawWeekOverview():"day"===this.overview&&this.drawDayOverview()}},{key:"drawGlobalOverview",value:function(){var t=this;this.history[this.history.length-1]!==this.overview&&this.history.push(this.overview);var e=(0,d.default)(this.props.data[0].date).startOf("year"),i=(0,d.default)(this.props.data[this.props.data.length-1].date).endOf("year"),n=c.timeYears(e,i).map(function(e){var i=(0,d.default)(e);return{date:i,total:t.props.data.reduce(function(t,e){return(0,d.default)(e.date).year()===i.year()&&(t+=e.total),t},0),summary:function(){var e=t.props.data.reduce(function(t,e){return(0,d.default)(e.date).year()===i.year()&&e.summary.map(function(e){t[e.name]?t[e.name].value+=e.value:t[e.name]={value:e.value}}),t},{});return Object.keys(e).map(function(t){return{name:t,value:e[t].value}}).sort(function(t,e){return e.value-t.value})}()}}),a=c.max(n,function(t){return t.total}),s=c.timeYears(e,i).map(function(t){return(0,d.default)(t)}),r=c.scaleBand().rangeRound([0,this.settings.width]).padding([.05]).domain(s.map(function(t){return t.year()}));this.items.selectAll(".item-block-year").remove();this.items.selectAll(".item-block-year").data(n).enter().append("rect").attr("class","item item-block-year").style("cursor","pointer").attr("width",function(){return(t.settings.width-t.settings.label_padding)/s.length-5*t.settings.gutter}).attr("height",function(){return t.settings.height-t.settings.label_padding}).attr("transform",function(e){return"translate("+r(e.date.year())+","+2*t.settings.tooltip_padding+")"}).attr("fill",function(e){return c.scaleLinear().range(["#ffffff",t.props.color]).domain([-.15*a,a])(e.total)||"#ff4500"}).on("click",function(e){t.in_transition||(t.in_transition=!0,t.selected=e,t.hideTooltip(),t.removeGlobalOverview(),t.overview="year",t.drawChart())}).style("opacity",0).on("mouseover",function(e){if(!t.in_transition){var i="";i+='<div><span style="display: inline-block; width: 50%; padding-right: 10px; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"><strong>Total time tracked:</strong></span>';var n=parseInt(e.total,10),a=Math.floor(n/86400);a>0&&(i+='<span style="display: inline-block; width: 50%; padding-right: 10px; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">'+(1===a?"1 day":a+" days")+"</span></div>");var s=Math.floor((n-86400*a)/3600);s>0&&(i+=a>0?'<div><span style="display: inline-block; width: 50%; padding-right: 10px; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"></span><span style="display: inline-block; width: 50%; padding-right: 10px; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">'+(1===s?"1 hour":s+" hours")+"</span></div>":'<span style="display: inline-block; width: 50%; padding-right: 10px; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">'+(1===s?"1 hour":s+" hours")+"</span></div>");var o=Math.floor((n-86400*a-3600*s)/60);if(o>0&&(i+=a>0||s>0?'<div><span style="display: inline-block; width: 50%; padding-right: 10px; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"></span><span style="display: inline-block; width: 50%; padding-right: 10px; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">'+(1===o?"1 minute":o+" minutes")+"</span></div>":'<span style="display: inline-block; width: 50%; padding-right: 10px; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">'+(1===o?"1 minute":o+" minutes")+"</span></div>"),i+="<br />",e.summary.length<=5)for(var l=0;l<e.summary.length;)i+='<div><span style="display: inline-block; width: 50%; padding-right: 10px; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"><strong>'+e.summary[l].name+"</strong></span>",i+="<span>"+t.formatTime(e.summary[l].value)+"</span></div>",l++;else{for(var d=0;d<5;)i+='<div><span style="display: inline-block; width: 50%; padding-right: 10px; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"><strong>'+e.summary[d].name+"</strong></span>",i+='<span style="display: inline-block; width: 50%; padding-right: 10px; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">'+t.formatTime(e.summary[d].value)+"</span></div>",d++;i+="<br />",d=5;for(var u=0;d<e.summary.length;)u=+e.summary[d].value,d++;i+='<div><span style="display: inline-block; width: 50%; padding-right: 10px; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"><strong>Other:</strong></span>',i+='<span style="display: inline-block; width: 50%; padding-right: 10px; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">'+t.formatTime(u)+"</span></div>"}for(var h=r(e.date.year())+2*t.settings.tooltip_padding;t.settings.width-h<t.settings.tooltip_width+5*t.settings.tooltip_padding;)h-=10;var f=3*t.settings.tooltip_padding;t.tooltip.html(i).style("left",h+"px").style("top",f+"px").transition().duration(t.settings.transition_duration/2).ease(c.easeLinear).style("opacity",1)}}).on("mouseout",function(){t.in_transition||t.hideTooltip()}).transition().delay(function(e,i){return t.settings.transition_duration*(i+1)/10}).duration(function(){return t.settings.transition_duration}).ease(c.easeLinear).style("opacity",1).call(function(t,e){t.empty()&&e();var i=0;t.each(function(){++i}).on("end",function(){--i||e.apply(this,arguments)})},function(){t.in_transition=!1});this.labels.selectAll(".label-year").remove(),this.labels.selectAll(".label-year").data(s).enter().append("text").attr("class","label label-year").style("cursor","pointer").style("fill","rgb(170, 170, 170)").attr("font-size",function(){return Math.floor(t.settings.label_padding/3)+"px"}).text(function(t){return t.year()}).attr("x",function(t){return r(t.year())}).attr("y",this.settings.label_padding/2).on("mouseenter",function(e){t.in_transition||t.items.selectAll(".item-block-year").transition().duration(t.settings.transition_duration).ease(c.easeLinear).style("opacity",function(t){return(0,d.default)(t.date).year()===e.year()?1:.1})}).on("mouseout",function(){t.in_transition||t.items.selectAll(".item-block-year").transition().duration(t.settings.transition_duration).ease(c.easeLinear).style("opacity",1)}).on("click",function(e){t.in_transition||(t.in_transition=!0,t.selected=e,t.hideTooltip(),t.removeGlobalOverview(),t.overview="year",t.drawChart())})}},{key:"drawYearOverview",value:function(){var t=this;this.history[this.history.length-1]!==this.overview&&this.history.push(this.overview);var e=(0,d.default)(this.selected.date).startOf("year"),i=(0,d.default)(this.selected.date).endOf("year"),n=this.props.data.filter(function(t){return e<=(0,d.default)(t.date)&&(0,d.default)(t.date)<i}),a=c.max(n,function(t){return t.total}),s=c.scaleLinear().range(["#ffffff",this.props.color]).domain([-.15*a,a]),r=function(i){var n=(0,d.default)(i.date),a=Math.round((n-(0,d.default)(e).startOf("week"))/864e5);return Math.trunc(a/7)*(t.settings.item_size+t.settings.gutter)+t.settings.label_padding},o=function(e){return t.settings.label_padding+(0,d.default)(e.date).weekday()*(t.settings.item_size+t.settings.gutter)},l=function(e){return a<=0?t.settings.item_size:.75*t.settings.item_size+t.settings.item_size*e.total/a*.25};this.items.selectAll(".item-circle").remove(),this.items.selectAll(".item-circle").data(n).enter().append("rect").attr("class","item item-circle").style("cursor","pointer").style("opacity",0).attr("x",function(e){return r(e)+(t.settings.item_size-l(e))/2}).attr("y",function(e){return o(e)+(t.settings.item_size-l(e))/2}).attr("rx",function(t){return l(t)}).attr("ry",function(t){return l(t)}).attr("width",function(t){return l(t)}).attr("height",function(t){return l(t)}).attr("fill",function(t){return t.total>0?s(t.total):"transparent"}).on("click",function(e){t.in_transition||0!==e.total&&(t.in_transition=!0,t.selected=e,t.hideTooltip(),t.removeYearOverview(),t.overview="day",t.drawChart())}).on("mouseover",function(e){if(!t.in_transition){var i=c.select(c.event.currentTarget);!function e(){i=i.transition().duration(t.settings.transition_duration).ease(c.easeLinear).attr("x",function(e){return r(e)-(1.1*t.settings.item_size-t.settings.item_size)/2}).attr("y",function(e){return o(e)-(1.1*t.settings.item_size-t.settings.item_size)/2}).attr("width",1.1*t.settings.item_size).attr("height",1.1*t.settings.item_size).transition().duration(t.settings.transition_duration).ease(c.easeLinear).attr("x",function(e){return r(e)+(t.settings.item_size-l(e))/2}).attr("y",function(e){return o(e)+(t.settings.item_size-l(e))/2}).attr("width",function(t){return l(t)}).attr("height",function(t){return l(t)}).on("end",e)}();var n="";n+='<div class="header"><strong style="display: inline-block; width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">'+(e.total?t.formatTime(e.total):"No time")+" tracked</strong></div>",n+="<div>on "+(0,d.default)(e.date).format("dddd, MMM Do YYYY")+"</div><br>";for(var a=0;a<e.summary.length;)n+='<div><span style="display: inline-block; width: 50%; padding-right: 10px; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"><strong>'+e.summary[a].name+"</strong></span>",n+='<span style="display: inline-block; width: 50%; padding-right: 10px; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">'+t.formatTime(e.summary[a].value)+"</span></div>",a++;var s=r(e)+t.settings.item_size;t.settings.width-s<t.settings.tooltip_width+3*t.settings.tooltip_padding&&(s-=t.settings.tooltip_width+2*t.settings.tooltip_padding);var u=o(e)+t.settings.item_size;t.tooltip.html(n).style("left",s+"px").style("top",u+"px").transition().duration(t.settings.transition_duration/2).ease(c.easeLinear).style("opacity",1)}}).on("mouseout",function(){t.in_transition||(c.select(c.event.currentTarget).transition().duration(t.settings.transition_duration/2).ease(c.easeLinear).attr("x",function(e){return r(e)+(t.settings.item_size-l(e))/2}).attr("y",function(e){return o(e)+(t.settings.item_size-l(e))/2}).attr("width",function(t){return l(t)}).attr("height",function(t){return l(t)}),t.hideTooltip())}).transition().delay(function(){return(Math.cos(Math.PI*Math.random())+1)*t.settings.transition_duration}).duration(function(){return t.settings.transition_duration}).ease(c.easeLinear).style("opacity",1).call(function(t,e){t.empty()&&e();var i=0;t.each(function(){return++i}).on("end",function(){--i||e.apply(this,arguments)})},function(){t.in_transition=!1});var u=c.timeMonths(e,i),h=c.scaleLinear().range([0,this.settings.width]).domain([0,u.length]);this.labels.selectAll(".label-month").remove(),this.labels.selectAll(".label-month").data(u).enter().append("text").attr("class","label label-month").style("cursor","pointer").style("fill","rgb(170, 170, 170)").attr("font-size",function(){return Math.floor(t.settings.label_padding/3)+"px"}).text(function(t){return t.toLocaleDateString("en-us",{month:"short"})}).attr("x",function(t,e){return h(e)+(h(e)-h(e-1))/2}).attr("y",this.settings.label_padding/2).on("mouseenter",function(e){if(!t.in_transition){var i=(0,d.default)(e);t.items.selectAll(".item-circle").transition().duration(t.settings.transition_duration).ease(c.easeLinear).style("opacity",function(t){return(0,d.default)(t.date).isSame(i,"month")?1:.1})}}).on("mouseout",function(){t.in_transition||t.items.selectAll(".item-circle").transition().duration(t.settings.transition_duration).ease(c.easeLinear).style("opacity",1)}).on("click",function(e){if(!t.in_transition){t.props.data.filter(function(t){return(0,d.default)(e).startOf("month")<=(0,d.default)(t.date)&&(0,d.default)(t.date)<(0,d.default)(e).endOf("month")}).length&&(t.selected={date:e},t.in_transition=!0,t.hideTooltip(),t.removeYearOverview(),t.overview="month",t.drawChart())}});var f=c.timeDays((0,d.default)().startOf("week"),(0,d.default)().endOf("week")),p=c.scaleBand().rangeRound([this.settings.label_padding,this.settings.height]).domain(f.map(function(t){return(0,d.default)(t).weekday()}));this.labels.selectAll(".label-day").remove(),this.labels.selectAll(".label-day").data(f).enter().append("text").attr("class","label label-day").style("cursor","pointer").style("fill","rgb(170, 170, 170)").attr("x",this.settings.label_padding/3).attr("y",function(t,e){return p(e)+p.bandwidth()/1.75}).style("text-anchor","left").attr("font-size",function(){return Math.floor(t.settings.label_padding/3)+"px"}).text(function(t){return(0,d.default)(t).format("dddd")[0]}).on("mouseenter",function(e){if(!t.in_transition){var i=(0,d.default)(e);t.items.selectAll(".item-circle").transition().duration(t.settings.transition_duration).ease(c.easeLinear).style("opacity",function(t){return(0,d.default)(t.date).day()===i.day()?1:.1})}}).on("mouseout",function(){t.in_transition||t.items.selectAll(".item-circle").transition().duration(t.settings.transition_duration).ease(c.easeLinear).style("opacity",1)}),this.drawButton()}},{key:"drawMonthOverview",value:function(){var t=this;this.history[this.history.length-1]!==this.overview&&this.history.push(this.overview);for(var e=(0,d.default)(this.selected.date).startOf("month"),i=(0,d.default)(this.selected.date).endOf("month"),n=this.props.data.filter(function(t){return e<=(0,d.default)(t.date)&&(0,d.default)(t.date)<i}),a=c.max(n,function(t){return c.max(t.summary,function(t){return t.value})}),s=c.timeDays((0,d.default)().startOf("week"),(0,d.default)().endOf("week")),r=c.scaleBand().rangeRound([this.settings.label_padding,this.settings.height]).domain(s.map(function(t){return(0,d.default)(t).weekday()})),o=[e.clone()];e.week()!==i.week();)o.push(e.add(1,"week").clone());var l=c.scaleBand().rangeRound([this.settings.label_padding,this.settings.width]).padding([.05]).domain(o.map(function(t){return t.week()}));this.items.selectAll(".item-block-month").remove();var u=this.items.selectAll(".item-block-month").data(n).enter().append("g").attr("class","item item-block-month").style("cursor","pointer").attr("width",function(){return(t.settings.width-t.settings.label_padding)/o.length-5*t.settings.gutter}).attr("height",function(){return Math.min(r.bandwidth(),t.settings.max_block_height)}).attr("transform",function(t){return"translate("+l((0,d.default)(t.date).week())+","+(r((0,d.default)(t.date).weekday())+r.bandwidth()/1.75-15)+")"}).attr("total",function(t){return t.total}).attr("date",function(t){return t.date}).attr("offset",0).on("click",function(e){t.in_transition||0!==e.total&&(t.in_transition=!0,t.selected=e,t.hideTooltip(),t.removeMonthOverview(),t.overview="day",t.drawChart())}),h=(this.settings.width-this.settings.label_padding)/o.length-5*this.settings.gutter,f=c.scaleLinear().rangeRound([0,h]),p=this.settings.item_gutter;u.selectAll(".item-block-rect").data(function(t){return t.summary}).enter().append("rect").attr("class","item item-block-rect").style("cursor","pointer").attr("x",function(t){var e=parseInt(c.select(this.parentNode).attr("total")),i=parseInt(c.select(this.parentNode).attr("offset"));return f.domain([0,e]),c.select(this.parentNode).attr("offset",i+f(t.value)),i}).attr("width",function(t){var e=parseInt(c.select(this.parentNode).attr("total"));return f.domain([0,e]),Math.max(f(t.value)-p,1)}).attr("height",function(){return Math.min(r.bandwidth(),t.settings.max_block_height)}).attr("fill",function(e){return c.scaleLinear().range(["#ffffff",t.props.color]).domain([-.15*a,a])(e.value)||"#ff4500"}).style("opacity",0).on("mouseover",function(e){if(!t.in_transition){var i=c.select(c.event.currentTarget.parentNode),n=new Date(i.attr("date")),a="";a+='<div class="header"><strong style="display: inline-block; width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">'+e.name+"</strong></div><br>",a+="<div><strong>"+(e.value?t.formatTime(e.value):"No time")+" tracked</strong></div>",a+="<div>on "+(0,d.default)(n).format("dddd, MMM Do YYYY")+"</div>";for(var s=l((0,d.default)(n).week())+t.settings.tooltip_padding;t.settings.width-s<t.settings.tooltip_width+3*t.settings.tooltip_padding;)s-=10;var o=r((0,d.default)(n).weekday())+2*t.settings.tooltip_padding;t.tooltip.html(a).style("left",s+"px").style("top",o+"px").transition().duration(t.settings.transition_duration/2).ease(c.easeLinear).style("opacity",1)}}).on("mouseout",function(){t.in_transition||t.hideTooltip()}).transition().delay(function(){return(Math.cos(Math.PI*Math.random())+1)*t.settings.transition_duration}).duration(function(){return t.settings.transition_duration}).ease(c.easeLinear).style("opacity",1).call(function(t,e){t.empty()&&e();var i=0;t.each(function(){return++i}).on("end",function(){--i||e.apply(this,arguments)})},function(){t.in_transition=!1}),this.labels.selectAll(".label-week").remove(),this.labels.selectAll(".label-week").data(o).enter().append("text").attr("class","label label-week").style("cursor","pointer").style("fill","rgb(170, 170, 170)").attr("font-size",function(){return Math.floor(t.settings.label_padding/3)+"px"}).text(function(t){return"Week "+t.week()}).attr("x",function(t){return l(t.week())}).attr("y",this.settings.label_padding/2).on("mouseenter",function(e){t.in_transition||t.items.selectAll(".item-block-month").transition().duration(t.settings.transition_duration).ease(c.easeLinear).style("opacity",function(t){return(0,d.default)(t.date).week()===e.week()?1:.1})}).on("mouseout",function(){t.in_transition||t.items.selectAll(".item-block-month").transition().duration(t.settings.transition_duration).ease(c.easeLinear).style("opacity",1)}).on("click",function(e){if(!t.in_transition){t.props.data.filter(function(t){return e.startOf("week")<=(0,d.default)(t.date)&&(0,d.default)(t.date)<e.endOf("week")}).length&&(t.in_transition=!0,t.selected={date:e},t.hideTooltip(),t.removeMonthOverview(),t.overview="week",t.drawChart())}}),this.labels.selectAll(".label-day").remove(),this.labels.selectAll(".label-day").data(s).enter().append("text").attr("class","label label-day").style("cursor","pointer").style("fill","rgb(170, 170, 170)").attr("x",this.settings.label_padding/3).attr("y",function(t,e){return r(e)+r.bandwidth()/1.75}).style("text-anchor","left").attr("font-size",function(){return Math.floor(t.settings.label_padding/3)+"px"}).text(function(t){return(0,d.default)(t).format("dddd")[0]}).on("mouseenter",function(e){if(!t.in_transition){var i=(0,d.default)(e);t.items.selectAll(".item-block-month").transition().duration(t.settings.transition_duration).ease(c.easeLinear).style("opacity",function(t){return(0,d.default)(t.date).day()===i.day()?1:.1})}}).on("mouseout",function(){t.in_transition||t.items.selectAll(".item-block-month").transition().duration(t.settings.transition_duration).ease(c.easeLinear).style("opacity",1)}),this.drawButton()}},{key:"drawWeekOverview",value:function(){var t=this;this.history[this.history.length-1]!==this.overview&&this.history.push(this.overview);var e=(0,d.default)(this.selected.date).startOf("week"),i=(0,d.default)(this.selected.date).endOf("week"),n=this.props.data.filter(function(t){return e<=(0,d.default)(t.date)&&(0,d.default)(t.date)<i}),a=c.max(n,function(t){return c.max(t.summary,function(t){return t.value})}),s=c.timeDays((0,d.default)().startOf("week"),(0,d.default)().endOf("week")),r=c.scaleBand().rangeRound([this.settings.label_padding,this.settings.height]).domain(s.map(function(t){return(0,d.default)(t).weekday()})),o=[e],l=c.scaleBand().rangeRound([this.settings.label_padding,this.settings.width]).padding([.01]).domain(o.map(function(t){return t.week()}));this.items.selectAll(".item-block-week").remove();var u=this.items.selectAll(".item-block-week").data(n).enter().append("g").attr("class","item item-block-week").style("cursor","pointer").attr("width",function(){return(t.settings.width-t.settings.label_padding)/o.length-5*t.settings.gutter}).attr("height",function(){return Math.min(r.bandwidth(),t.settings.max_block_height)}).attr("transform",function(t){return"translate("+l((0,d.default)(t.date).week())+","+(r((0,d.default)(t.date).weekday())+r.bandwidth()/1.75-15)+")"}).attr("total",function(t){return t.total}).attr("date",function(t){return t.date}).attr("offset",0).on("click",function(e){t.in_transition||0!==e.total&&(t.in_transition=!0,t.selected=e,t.hideTooltip(),t.removeWeekOverview(),t.overview="day",t.drawChart())}),h=(this.settings.width-this.settings.label_padding)/o.length-5*this.settings.gutter,f=c.scaleLinear().rangeRound([0,h]),p=this.settings.item_gutter;u.selectAll(".item-block-rect").data(function(t){return t.summary}).enter().append("rect").attr("class","item item-block-rect").style("cursor","pointer").attr("x",function(t){var e=parseInt(c.select(this.parentNode).attr("total")),i=parseInt(c.select(this.parentNode).attr("offset"));return f.domain([0,e]),c.select(this.parentNode).attr("offset",i+f(t.value)),i}).attr("width",function(t){var e=parseInt(c.select(this.parentNode).attr("total"));return f.domain([0,e]),Math.max(f(t.value)-p,1)}).attr("height",function(){return Math.min(r.bandwidth(),t.settings.max_block_height)}).attr("fill",function(e){return c.scaleLinear().range(["#ffffff",t.props.color]).domain([-.15*a,a])(e.value)||"#ff4500"}).style("opacity",0).on("mouseover",function(e){if(!t.in_transition){var i=c.select(c.event.currentTarget.parentNode),n=new Date(i.attr("date")),a="";a+='<div class="header"><strong style="display: inline-block; width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">'+e.name+"</strong></div><br>",a+="<div><strong>"+(e.value?t.formatTime(e.value):"No time")+" tracked</strong></div>",a+="<div>on "+(0,d.default)(n).format("dddd, MMM Do YYYY")+"</div>";var s=parseInt(i.attr("total"));f.domain([0,s]);for(var o=parseInt(c.select(c.event.currentTarget).attr("x"))+f(e.value)/4+t.settings.tooltip_width/4;t.settings.width-o<t.settings.tooltip_width+3*t.settings.tooltip_padding;)o-=10;var l=r((0,d.default)(n).weekday())+1.5*t.settings.tooltip_padding;t.tooltip.html(a).style("left",o+"px").style("top",l+"px").transition().duration(t.settings.transition_duration/2).ease(c.easeLinear).style("opacity",1)}}).on("mouseout",function(){t.in_transition||t.hideTooltip()}).transition().delay(function(){return(Math.cos(Math.PI*Math.random())+1)*t.settings.transition_duration}).duration(function(){return t.settings.transition_duration}).ease(c.easeLinear).style("opacity",1).call(function(t,e){t.empty()&&e();var i=0;t.each(function(){return++i}).on("end",function(){--i||e.apply(this,arguments)})},function(){t.in_transition=!1}),this.labels.selectAll(".label-week").remove(),this.labels.selectAll(".label-week").data(o).enter().append("text").attr("class","label label-week").style("cursor","pointer").style("fill","rgb(170, 170, 170)").attr("font-size",function(){return Math.floor(t.settings.label_padding/3)+"px"}).text(function(t){return"Week "+t.week()}).attr("x",function(t){return l(t.week())}).attr("y",this.settings.label_padding/2).on("mouseenter",function(e){t.in_transition||t.items.selectAll(".item-block-week").transition().duration(t.settings.transition_duration).ease(c.easeLinear).style("opacity",function(t){return(0,d.default)(t.date).week()===e.week()?1:.1})}).on("mouseout",function(){t.in_transition||t.items.selectAll(".item-block-week").transition().duration(t.settings.transition_duration).ease(c.easeLinear).style("opacity",1)}),this.labels.selectAll(".label-day").remove(),this.labels.selectAll(".label-day").data(s).enter().append("text").attr("class","label label-day").style("cursor","pointer").style("fill","rgb(170, 170, 170)").attr("x",this.settings.label_padding/3).attr("y",function(t,e){return r(e)+r.bandwidth()/1.75}).style("text-anchor","left").attr("font-size",function(){return Math.floor(t.settings.label_padding/3)+"px"}).text(function(t){return(0,d.default)(t).format("dddd")[0]}).on("mouseenter",function(e){if(!t.in_transition){var i=(0,d.default)(e);t.items.selectAll(".item-block-week").transition().duration(t.settings.transition_duration).ease(c.easeLinear).style("opacity",function(t){return(0,d.default)(t.date).day()===i.day()?1:.1})}}).on("mouseout",function(){t.in_transition||t.items.selectAll(".item-block-week").transition().duration(t.settings.transition_duration).ease(c.easeLinear).style("opacity",1)}),this.drawButton()}},{key:"drawDayOverview",value:function(){var t=this;this.history[this.history.length-1]!==this.overview&&this.history.push(this.overview),Object.keys(this.selected).length||(this.selected=this.props.data[this.props.data.length-1]);var e=this.selected.summary.map(function(t){return t.name}),i=c.scaleBand().rangeRound([this.settings.label_padding,this.settings.height]).domain(e),n=c.scaleTime().range([2*this.settings.label_padding,this.settings.width]).domain([(0,d.default)(this.selected.date).startOf("day"),(0,d.default)(this.selected.date).endOf("day")]);this.items.selectAll(".item-block").remove(),this.items.selectAll(".item-block").data(this.selected.details).enter().append("rect").attr("class","item item-block").style("cursor","pointer").attr("x",function(t){return n((0,d.default)(t.date))}).attr("y",function(t){return i(t.name)+i.bandwidth()/2-15}).attr("width",function(t){var e=n(c.timeSecond.offset((0,d.default)(t.date),t.value));return Math.max(e-n((0,d.default)(t.date)),1)}).attr("height",function(){return Math.min(i.bandwidth(),t.settings.max_block_height)}).attr("fill",function(){return t.props.color}).style("opacity",0).on("mouseover",function(e){if(!t.in_transition){var a="";a+='<div class="header"><strong style="display: inline-block; width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">'+e.name+"</strong><div><br>",a+="<div><strong>"+(e.value?t.formatTime(e.value):"No time")+" tracked</strong></div>",a+="<div>on "+(0,d.default)(e.date).format("dddd, MMM Do YYYY HH:mm")+"</div>";for(var s=100*e.value/86400+n((0,d.default)(e.date));t.settings.width-s<t.settings.tooltip_width+3*t.settings.tooltip_padding;)s-=10;var r=i(e.name)+i.bandwidth()/2+t.settings.tooltip_padding/2;t.tooltip.html(a).style("left",s+"px").style("top",r+"px").transition().duration(t.settings.transition_duration/2).ease(c.easeLinear).style("opacity",1)}}).on("mouseout",function(){t.in_transition||t.hideTooltip()}).on("click",function(e){t.props.handler&&"function"==typeof t.props.handler&&t.props.handler(e)}).transition().delay(function(){return(Math.cos(Math.PI*Math.random())+1)*t.settings.transition_duration}).duration(function(){return t.settings.transition_duration}).ease(c.easeLinear).style("opacity",.5).call(function(t,e){t.empty()&&e();var i=0;t.each(function(){return++i}).on("end",function(){--i||e.apply(this,arguments)})},function(){t.in_transition=!1});var a=c.timeHours((0,d.default)(this.selected.date).startOf("day"),(0,d.default)(this.selected.date).endOf("day")),s=c.scaleTime().range([2*this.settings.label_padding,this.settings.width]).domain([0,a.length]);this.labels.selectAll(".label-time").remove(),this.labels.selectAll(".label-time").data(a).enter().append("text").attr("class","label label-time").style("cursor","pointer").style("fill","rgb(170, 170, 170)").attr("font-size",function(){return Math.floor(t.settings.label_padding/3)+"px"}).text(function(t){return(0,d.default)(t).format("HH:mm")}).attr("x",function(t,e){return s(e)}).attr("y",this.settings.label_padding/2).on("mouseenter",function(e){if(!t.in_transition){var i=n((0,d.default)(e));t.items.selectAll(".item-block").transition().duration(t.settings.transition_duration).ease(c.easeLinear).style("opacity",function(t){var e=n((0,d.default)(t.date)),a=n((0,d.default)(t.date).add(t.value,"seconds"));return i>=e&&i<=a?1:.1})}}).on("mouseout",function(){t.in_transition||t.items.selectAll(".item-block").transition().duration(t.settings.transition_duration).ease(c.easeLinear).style("opacity",.5)});var r=this.settings.label_padding;this.labels.selectAll(".label-project").remove(),this.labels.selectAll(".label-project").data(e).enter().append("text").attr("class","label label-project").style("cursor","pointer").style("fill","rgb(170, 170, 170)").attr("x",this.settings.gutter).attr("y",function(t){return i(t)+i.bandwidth()/2}).attr("min-height",function(){return i.bandwidth()}).style("text-anchor","left").attr("font-size",function(){return Math.floor(t.settings.label_padding/3)+"px"}).text(function(t){return t}).each(function(){for(var t=c.select(this),e=t.node().getComputedTextLength(),i=t.text();e>1.5*r&&i.length>0;)i=i.slice(0,-1),t.text(i+"..."),e=t.node().getComputedTextLength()}).on("mouseenter",function(e){t.in_transition||t.items.selectAll(".item-block").transition().duration(t.settings.transition_duration).ease(c.easeLinear).style("opacity",function(t){return t.name===e?1:.1})}).on("mouseout",function(){t.in_transition||t.items.selectAll(".item-block").transition().duration(t.settings.transition_duration).ease(c.easeLinear).style("opacity",.5)}),this.drawButton()}},{key:"drawButton",value:function(){var t=this;this.buttons.selectAll(".button").remove();var e=this.buttons.append("g").attr("class","button button-back").style("cursor","pointer").attr("fill","transparent").style("opacity",0).style("stroke-width",2).style("stroke","rgb(170, 170, 170)").on("click",function(){t.in_transition||(t.in_transition=!0,"year"===t.overview?t.removeYearOverview():"month"===t.overview?t.removeMonthOverview():"week"===t.overview?t.removeWeekOverview():"day"===t.overview&&t.removeDayOverview(),t.history.pop(),t.overview=t.history.pop(),t.drawChart())});e.append("circle").attr("cx",this.settings.label_padding/2.25).attr("cy",this.settings.label_padding/2.5).attr("r",this.settings.item_size/2),e.append("text").attr("x",this.settings.label_padding/3.25).attr("y",this.settings.label_padding/2.5).attr("dy",function(){return Math.floor(t.settings.width/100)/3}).attr("font-size",function(){return Math.floor(t.settings.label_padding/3)+"px"}).html("←"),e.transition().duration(this.settings.transition_duration).ease(c.easeLinear).style("opacity",1)}},{key:"removeGlobalOverview",value:function(){this.items.selectAll(".item-block-year").transition().duration(this.settings.transition_duration).ease(c.easeLinear).style("opacity",0).remove(),this.labels.selectAll(".label-year").remove()}},{key:"removeYearOverview",value:function(){this.items.selectAll(".item-circle").transition().duration(this.settings.transition_duration).ease(c.easeLinear).style("opacity",0).remove(),this.labels.selectAll(".label-day").remove(),this.labels.selectAll(".label-month").remove(),this.hideBackButton()}},{key:"removeMonthOverview",value:function(){var t=this;this.items.selectAll(".item-block-month").selectAll(".item-block-rect").transition().duration(this.settings.transition_duration).ease(c.easeLinear).style("opacity",0).attr("x",function(e,i){return i%2==0?-t.settings.width/3:t.settings.width/3}).remove(),this.labels.selectAll(".label-day").remove(),this.labels.selectAll(".label-week").remove(),this.hideBackButton()}},{key:"removeWeekOverview",value:function(){var t=this;this.items.selectAll(".item-block-week").selectAll(".item-block-rect").transition().duration(this.settings.transition_duration).ease(c.easeLinear).style("opacity",0).attr("x",function(e,i){return i%2==0?-t.settings.width/3:t.settings.width/3}).remove(),this.labels.selectAll(".label-day").remove(),this.labels.selectAll(".label-week").remove(),this.hideBackButton()}},{key:"removeDayOverview",value:function(){var t=this;this.items.selectAll(".item-block").transition().duration(this.settings.transition_duration).ease(c.easeLinear).style("opacity",0).attr("x",function(e,i){return i%2==0?-t.settings.width/3:t.settings.width/3}).remove(),this.labels.selectAll(".label-time").remove(),this.labels.selectAll(".label-project").remove(),this.hideBackButton()}},{key:"hideTooltip",value:function(){this.tooltip.transition().duration(this.settings.transition_duration/2).ease(c.easeLinear).style("opacity",0)}},{key:"hideBackButton",value:function(){this.buttons.selectAll(".button").transition().duration(this.settings.transition_duration).ease(c.easeLinear).style("opacity",0).remove()}},{key:"formatTime",value:function(t){var e=Math.floor(t/3600),i=Math.floor((t-3600*e)/60),n="";return e>0&&(n+=1===e?"1 hour ":e+" hours "),i>0&&(n+=1===i?"1 minute":i+" minutes"),0===e&&0===i&&(n=Math.round(t)+" seconds"),n}},{key:"render",value:function(){var t=this,e={userSelect:"none",fontFamily:"Helvetica, Arial, sans-serif"};return React.createElement("div",{id:"calendar-heatmap",style:e,ref:function(e){t.container=e}})}}]),e}(o.Component);h.defaultProps={data:[],overview:"year",color:"#ff4500",handler:void 0},e.default=h,t.exports=e.default},function(e,i){e.exports=t},function(t,i){t.exports=e},function(t,e){t.exports=i}])}); | ||
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("react"),require("moment"),require("d3")):"function"==typeof define&&define.amd?define(["react","moment","d3"],e):"object"==typeof exports?exports.CalendarHeatmap=e(require("react"),require("moment"),require("d3")):t.CalendarHeatmap=e(t.React,t.moment,t.d3)}(this,function(t,e,i){return function(t){function e(n){if(i[n])return i[n].exports;var a=i[n]={i:n,l:!1,exports:{}};return t[n].call(a.exports,a,a.exports,e),a.l=!0,a.exports}var i={};return e.m=t,e.c=i,e.d=function(t,i,n){e.o(t,i)||Object.defineProperty(t,i,{configurable:!1,enumerable:!0,get:n})},e.n=function(t){var i=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(i,"a",i),i},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="/",e(e.s=0)}([function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var n=i(1),a=function(t){return t&&t.__esModule?t:{default:t}}(n);e.default=a.default,t.exports=e.default},function(t,e,i){"use strict";function n(t){if(t&&t.__esModule)return t;var e={};if(null!=t)for(var i in t)Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e.default=t,e}function a(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function s(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function r(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}Object.defineProperty(e,"__esModule",{value:!0});var o=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}(),l=i(2),d=n(l),u=i(3),c=function(t){return t&&t.__esModule?t:{default:t}}(u),h=i(4),f=n(h),p=function(t){function e(t){a(this,e);var i=s(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t));return i.settings={gutter:5,item_gutter:1,width:1e3,height:200,item_size:10,label_padding:40,max_block_height:20,transition_duration:500,tooltip_width:250,tooltip_padding:15},i.in_transition=!1,i.overview=i.props.overview,i.history=["global"],i.selected={},i.calcDimensions=i.calcDimensions.bind(i),i}return r(e,t),o(e,[{key:"componentDidMount",value:function(){this.createElements(),this.parseData(),this.drawChart(),window.addEventListener("resize",this.calcDimensions)}},{key:"componentWillUnmount",value:function(){window.removeEventListener("resize",this.calcDimensions)}},{key:"createElements",value:function(){this.svg=f.select("#calendar-heatmap").append("svg").attr("class","svg"),this.items=this.svg.append("g"),this.labels=this.svg.append("g"),this.buttons=this.svg.append("g"),this.tooltip=f.select("#calendar-heatmap").append("div").attr("class","heatmap-tooltip").style("opacity",0).style("pointer-events","none").style("position","absolute").style("z-index",9999).style("width","250px").style("max-width","250px").style("overflow","hidden").style("padding","15px").style("font-size","12px").style("line-height","14px").style("color","rgb(51, 51, 51)").style("background","rgba(255, 255, 255, 0.75)"),this.calcDimensions()}},{key:"calcDimensions",value:function(){var t=Math.round(((0,c.default)()-(0,c.default)().subtract(1,"year").startOf("week"))/864e5),e=Math.trunc(t/7),i=e+1;this.settings.width=this.container.offsetWidth<1e3?1e3:this.container.offsetWidth,this.settings.item_size=(this.settings.width-this.settings.label_padding)/i-this.settings.gutter,this.settings.height=this.settings.label_padding+7*(this.settings.item_size+this.settings.gutter),this.svg.attr("width",this.settings.width).attr("height",this.settings.height),this.props.data&&this.props.data[0].summary&&this.drawChart()}},{key:"parseData",value:function(){this.props.data&&(this.props.data[0].summary||this.props.data.map(function(t){var e=t.details.reduce(function(t,e){return t[e.name]?t[e.name].value+=e.value:t[e.name]={value:e.value},t},{}),i=Object.keys(e).map(function(t){return{name:t,value:e[t].value}});return t.summary=i.sort(function(t,e){return e.value-t.value}),t}))}},{key:"drawChart",value:function(){"global"===this.overview?this.drawGlobalOverview():"year"===this.overview?this.drawYearOverview():"month"===this.overview?this.drawMonthOverview():"week"===this.overview?this.drawWeekOverview():"day"===this.overview&&this.drawDayOverview()}},{key:"drawGlobalOverview",value:function(){var t=this;this.history[this.history.length-1]!==this.overview&&this.history.push(this.overview);var e=(0,c.default)(this.props.data[0].date).startOf("year"),i=(0,c.default)(this.props.data[this.props.data.length-1].date).endOf("year"),n=f.timeYears(e,i).map(function(e){var i=(0,c.default)(e);return{date:i,total:t.props.data.reduce(function(t,e){return(0,c.default)(e.date).year()===i.year()&&(t+=e.total),t},0),summary:function(){var e=t.props.data.reduce(function(t,e){return(0,c.default)(e.date).year()===i.year()&&e.summary.map(function(e){t[e.name]?t[e.name].value+=e.value:t[e.name]={value:e.value}}),t},{});return Object.keys(e).map(function(t){return{name:t,value:e[t].value}}).sort(function(t,e){return e.value-t.value})}()}}),a=f.max(n,function(t){return t.total}),s=f.timeYears(e,i).map(function(t){return(0,c.default)(t)}),r=f.scaleBand().rangeRound([0,this.settings.width]).padding([.05]).domain(s.map(function(t){return t.year()}));this.items.selectAll(".item-block-year").remove();this.items.selectAll(".item-block-year").data(n).enter().append("rect").attr("class","item item-block-year").style("cursor","pointer").attr("width",function(){return(t.settings.width-t.settings.label_padding)/s.length-5*t.settings.gutter}).attr("height",function(){return t.settings.height-t.settings.label_padding}).attr("transform",function(e){return"translate("+r(e.date.year())+","+2*t.settings.tooltip_padding+")"}).attr("fill",function(e){return f.scaleLinear().range(["#ffffff",t.props.color]).domain([-.15*a,a])(e.total)||"#ff4500"}).on("click",function(e){t.in_transition||(t.in_transition=!0,t.selected=e,t.hideTooltip(),t.removeGlobalOverview(),t.overview="year",t.drawChart())}).style("opacity",0).on("mouseover",function(e){if(!t.in_transition){var i="";i+='<div><span style="display: inline-block; width: 50%; padding-right: 10px; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"><strong>Total time tracked:</strong></span>';var n=parseInt(e.total,10),a=Math.floor(n/86400);a>0&&(i+='<span style="display: inline-block; width: 50%; padding-right: 10px; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">'+(1===a?"1 day":a+" days")+"</span></div>");var s=Math.floor((n-86400*a)/3600);s>0&&(i+=a>0?'<div><span style="display: inline-block; width: 50%; padding-right: 10px; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"></span><span style="display: inline-block; width: 50%; padding-right: 10px; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">'+(1===s?"1 hour":s+" hours")+"</span></div>":'<span style="display: inline-block; width: 50%; padding-right: 10px; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">'+(1===s?"1 hour":s+" hours")+"</span></div>");var o=Math.floor((n-86400*a-3600*s)/60);if(o>0&&(i+=a>0||s>0?'<div><span style="display: inline-block; width: 50%; padding-right: 10px; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"></span><span style="display: inline-block; width: 50%; padding-right: 10px; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">'+(1===o?"1 minute":o+" minutes")+"</span></div>":'<span style="display: inline-block; width: 50%; padding-right: 10px; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">'+(1===o?"1 minute":o+" minutes")+"</span></div>"),i+="<br />",e.summary.length<=5)for(var l=0;l<e.summary.length;)i+='<div><span style="display: inline-block; width: 50%; padding-right: 10px; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"><strong>'+e.summary[l].name+"</strong></span>",i+="<span>"+t.formatTime(e.summary[l].value)+"</span></div>",l++;else{for(var d=0;d<5;)i+='<div><span style="display: inline-block; width: 50%; padding-right: 10px; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"><strong>'+e.summary[d].name+"</strong></span>",i+='<span style="display: inline-block; width: 50%; padding-right: 10px; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">'+t.formatTime(e.summary[d].value)+"</span></div>",d++;i+="<br />",d=5;for(var u=0;d<e.summary.length;)u=+e.summary[d].value,d++;i+='<div><span style="display: inline-block; width: 50%; padding-right: 10px; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"><strong>Other:</strong></span>',i+='<span style="display: inline-block; width: 50%; padding-right: 10px; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">'+t.formatTime(u)+"</span></div>"}for(var c=r(e.date.year())+2*t.settings.tooltip_padding;t.settings.width-c<t.settings.tooltip_width+5*t.settings.tooltip_padding;)c-=10;var h=3*t.settings.tooltip_padding;t.tooltip.html(i).style("left",c+"px").style("top",h+"px").transition().duration(t.settings.transition_duration/2).ease(f.easeLinear).style("opacity",1)}}).on("mouseout",function(){t.in_transition||t.hideTooltip()}).transition().delay(function(e,i){return t.settings.transition_duration*(i+1)/10}).duration(function(){return t.settings.transition_duration}).ease(f.easeLinear).style("opacity",1).call(function(t,e){t.empty()&&e();var i=0;t.each(function(){++i}).on("end",function(){--i||e.apply(this,arguments)})},function(){t.in_transition=!1});this.labels.selectAll(".label-year").remove(),this.labels.selectAll(".label-year").data(s).enter().append("text").attr("class","label label-year").style("cursor","pointer").style("fill","rgb(170, 170, 170)").attr("font-size",function(){return Math.floor(t.settings.label_padding/3)+"px"}).text(function(t){return t.year()}).attr("x",function(t){return r(t.year())}).attr("y",this.settings.label_padding/2).on("mouseenter",function(e){t.in_transition||t.items.selectAll(".item-block-year").transition().duration(t.settings.transition_duration).ease(f.easeLinear).style("opacity",function(t){return(0,c.default)(t.date).year()===e.year()?1:.1})}).on("mouseout",function(){t.in_transition||t.items.selectAll(".item-block-year").transition().duration(t.settings.transition_duration).ease(f.easeLinear).style("opacity",1)}).on("click",function(e){t.in_transition||(t.in_transition=!0,t.selected=e,t.hideTooltip(),t.removeGlobalOverview(),t.overview="year",t.drawChart())})}},{key:"drawYearOverview",value:function(){var t=this;this.history[this.history.length-1]!==this.overview&&this.history.push(this.overview);var e=(0,c.default)(this.selected.date).startOf("year"),i=(0,c.default)(this.selected.date).endOf("year"),n=this.props.data.filter(function(t){return e<=(0,c.default)(t.date)&&(0,c.default)(t.date)<i}),a=f.max(n,function(t){return t.total}),s=f.scaleLinear().range(["#ffffff",this.props.color]).domain([-.15*a,a]),r=function(i){var n=(0,c.default)(i.date),a=Math.round((n-(0,c.default)(e).startOf("week"))/864e5);return Math.trunc(a/7)*(t.settings.item_size+t.settings.gutter)+t.settings.label_padding},o=function(e){return t.settings.label_padding+(0,c.default)(e.date).weekday()*(t.settings.item_size+t.settings.gutter)},l=function(e){return a<=0?t.settings.item_size:.75*t.settings.item_size+t.settings.item_size*e.total/a*.25};this.items.selectAll(".item-circle").remove(),this.items.selectAll(".item-circle").data(n).enter().append("rect").attr("class","item item-circle").style("cursor","pointer").style("opacity",0).attr("x",function(e){return r(e)+(t.settings.item_size-l(e))/2}).attr("y",function(e){return o(e)+(t.settings.item_size-l(e))/2}).attr("rx",function(t){return l(t)}).attr("ry",function(t){return l(t)}).attr("width",function(t){return l(t)}).attr("height",function(t){return l(t)}).attr("fill",function(t){return t.total>0?s(t.total):"transparent"}).on("click",function(e){t.in_transition||0!==e.total&&(t.in_transition=!0,t.selected=e,t.hideTooltip(),t.removeYearOverview(),t.overview="day",t.drawChart())}).on("mouseover",function(e){if(!t.in_transition){var i=f.select(f.event.currentTarget);!function e(){i=i.transition().duration(t.settings.transition_duration).ease(f.easeLinear).attr("x",function(e){return r(e)-(1.1*t.settings.item_size-t.settings.item_size)/2}).attr("y",function(e){return o(e)-(1.1*t.settings.item_size-t.settings.item_size)/2}).attr("width",1.1*t.settings.item_size).attr("height",1.1*t.settings.item_size).transition().duration(t.settings.transition_duration).ease(f.easeLinear).attr("x",function(e){return r(e)+(t.settings.item_size-l(e))/2}).attr("y",function(e){return o(e)+(t.settings.item_size-l(e))/2}).attr("width",function(t){return l(t)}).attr("height",function(t){return l(t)}).on("end",e)}();var n="";n+='<div class="header"><strong style="display: inline-block; width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">'+(e.total?t.formatTime(e.total):"No time")+" tracked</strong></div>",n+="<div>on "+(0,c.default)(e.date).format("dddd, MMM Do YYYY")+"</div><br>";for(var a=0;a<e.summary.length;)n+='<div><span style="display: inline-block; width: 50%; padding-right: 10px; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"><strong>'+e.summary[a].name+"</strong></span>",n+='<span style="display: inline-block; width: 50%; padding-right: 10px; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">'+t.formatTime(e.summary[a].value)+"</span></div>",a++;var s=r(e)+t.settings.item_size;t.settings.width-s<t.settings.tooltip_width+3*t.settings.tooltip_padding&&(s-=t.settings.tooltip_width+2*t.settings.tooltip_padding);var d=o(e)+t.settings.item_size;t.tooltip.html(n).style("left",s+"px").style("top",d+"px").transition().duration(t.settings.transition_duration/2).ease(f.easeLinear).style("opacity",1)}}).on("mouseout",function(){t.in_transition||(f.select(f.event.currentTarget).transition().duration(t.settings.transition_duration/2).ease(f.easeLinear).attr("x",function(e){return r(e)+(t.settings.item_size-l(e))/2}).attr("y",function(e){return o(e)+(t.settings.item_size-l(e))/2}).attr("width",function(t){return l(t)}).attr("height",function(t){return l(t)}),t.hideTooltip())}).transition().delay(function(){return(Math.cos(Math.PI*Math.random())+1)*t.settings.transition_duration}).duration(function(){return t.settings.transition_duration}).ease(f.easeLinear).style("opacity",1).call(function(t,e){t.empty()&&e();var i=0;t.each(function(){return++i}).on("end",function(){--i||e.apply(this,arguments)})},function(){t.in_transition=!1});var d=f.timeMonths(e,i),u=f.scaleLinear().range([0,this.settings.width]).domain([0,d.length]);this.labels.selectAll(".label-month").remove(),this.labels.selectAll(".label-month").data(d).enter().append("text").attr("class","label label-month").style("cursor","pointer").style("fill","rgb(170, 170, 170)").attr("font-size",function(){return Math.floor(t.settings.label_padding/3)+"px"}).text(function(t){return t.toLocaleDateString("en-us",{month:"short"})}).attr("x",function(t,e){return u(e)+(u(e)-u(e-1))/2}).attr("y",this.settings.label_padding/2).on("mouseenter",function(e){if(!t.in_transition){var i=(0,c.default)(e);t.items.selectAll(".item-circle").transition().duration(t.settings.transition_duration).ease(f.easeLinear).style("opacity",function(t){return(0,c.default)(t.date).isSame(i,"month")?1:.1})}}).on("mouseout",function(){t.in_transition||t.items.selectAll(".item-circle").transition().duration(t.settings.transition_duration).ease(f.easeLinear).style("opacity",1)}).on("click",function(e){if(!t.in_transition){t.props.data.filter(function(t){return(0,c.default)(e).startOf("month")<=(0,c.default)(t.date)&&(0,c.default)(t.date)<(0,c.default)(e).endOf("month")}).length&&(t.selected={date:e},t.in_transition=!0,t.hideTooltip(),t.removeYearOverview(),t.overview="month",t.drawChart())}});var h=f.timeDays((0,c.default)().startOf("week"),(0,c.default)().endOf("week")),p=f.scaleBand().rangeRound([this.settings.label_padding,this.settings.height]).domain(h.map(function(t){return(0,c.default)(t).weekday()}));this.labels.selectAll(".label-day").remove(),this.labels.selectAll(".label-day").data(h).enter().append("text").attr("class","label label-day").style("cursor","pointer").style("fill","rgb(170, 170, 170)").attr("x",this.settings.label_padding/3).attr("y",function(t,e){return p(e)+p.bandwidth()/1.75}).style("text-anchor","left").attr("font-size",function(){return Math.floor(t.settings.label_padding/3)+"px"}).text(function(t){return(0,c.default)(t).format("dddd")[0]}).on("mouseenter",function(e){if(!t.in_transition){var i=(0,c.default)(e);t.items.selectAll(".item-circle").transition().duration(t.settings.transition_duration).ease(f.easeLinear).style("opacity",function(t){return(0,c.default)(t.date).day()===i.day()?1:.1})}}).on("mouseout",function(){t.in_transition||t.items.selectAll(".item-circle").transition().duration(t.settings.transition_duration).ease(f.easeLinear).style("opacity",1)}),this.drawButton()}},{key:"drawMonthOverview",value:function(){var t=this;this.history[this.history.length-1]!==this.overview&&this.history.push(this.overview);for(var e=(0,c.default)(this.selected.date).startOf("month"),i=(0,c.default)(this.selected.date).endOf("month"),n=this.props.data.filter(function(t){return e<=(0,c.default)(t.date)&&(0,c.default)(t.date)<i}),a=f.max(n,function(t){return f.max(t.summary,function(t){return t.value})}),s=f.timeDays((0,c.default)().startOf("week"),(0,c.default)().endOf("week")),r=f.scaleBand().rangeRound([this.settings.label_padding,this.settings.height]).domain(s.map(function(t){return(0,c.default)(t).weekday()})),o=[e.clone()];e.week()!==i.week();)o.push(e.add(1,"week").clone());var l=f.scaleBand().rangeRound([this.settings.label_padding,this.settings.width]).padding([.05]).domain(o.map(function(t){return t.week()}));this.items.selectAll(".item-block-month").remove();var d=this.items.selectAll(".item-block-month").data(n).enter().append("g").attr("class","item item-block-month").style("cursor","pointer").attr("width",function(){return(t.settings.width-t.settings.label_padding)/o.length-5*t.settings.gutter}).attr("height",function(){return Math.min(r.bandwidth(),t.settings.max_block_height)}).attr("transform",function(t){return"translate("+l((0,c.default)(t.date).week())+","+(r((0,c.default)(t.date).weekday())+r.bandwidth()/1.75-15)+")"}).attr("total",function(t){return t.total}).attr("date",function(t){return t.date}).attr("offset",0).on("click",function(e){t.in_transition||0!==e.total&&(t.in_transition=!0,t.selected=e,t.hideTooltip(),t.removeMonthOverview(),t.overview="day",t.drawChart())}),u=(this.settings.width-this.settings.label_padding)/o.length-5*this.settings.gutter,h=f.scaleLinear().rangeRound([0,u]),p=this.settings.item_gutter;d.selectAll(".item-block-rect").data(function(t){return t.summary}).enter().append("rect").attr("class","item item-block-rect").style("cursor","pointer").attr("x",function(t){var e=parseInt(f.select(this.parentNode).attr("total")),i=parseInt(f.select(this.parentNode).attr("offset"));return h.domain([0,e]),f.select(this.parentNode).attr("offset",i+h(t.value)),i}).attr("width",function(t){var e=parseInt(f.select(this.parentNode).attr("total"));return h.domain([0,e]),Math.max(h(t.value)-p,1)}).attr("height",function(){return Math.min(r.bandwidth(),t.settings.max_block_height)}).attr("fill",function(e){return f.scaleLinear().range(["#ffffff",t.props.color]).domain([-.15*a,a])(e.value)||"#ff4500"}).style("opacity",0).on("mouseover",function(e){if(!t.in_transition){var i=f.select(f.event.currentTarget.parentNode),n=new Date(i.attr("date")),a="";a+='<div class="header"><strong style="display: inline-block; width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">'+e.name+"</strong></div><br>",a+="<div><strong>"+(e.value?t.formatTime(e.value):"No time")+" tracked</strong></div>",a+="<div>on "+(0,c.default)(n).format("dddd, MMM Do YYYY")+"</div>";for(var s=l((0,c.default)(n).week())+t.settings.tooltip_padding;t.settings.width-s<t.settings.tooltip_width+3*t.settings.tooltip_padding;)s-=10;var o=r((0,c.default)(n).weekday())+2*t.settings.tooltip_padding;t.tooltip.html(a).style("left",s+"px").style("top",o+"px").transition().duration(t.settings.transition_duration/2).ease(f.easeLinear).style("opacity",1)}}).on("mouseout",function(){t.in_transition||t.hideTooltip()}).transition().delay(function(){return(Math.cos(Math.PI*Math.random())+1)*t.settings.transition_duration}).duration(function(){return t.settings.transition_duration}).ease(f.easeLinear).style("opacity",1).call(function(t,e){t.empty()&&e();var i=0;t.each(function(){return++i}).on("end",function(){--i||e.apply(this,arguments)})},function(){t.in_transition=!1}),this.labels.selectAll(".label-week").remove(),this.labels.selectAll(".label-week").data(o).enter().append("text").attr("class","label label-week").style("cursor","pointer").style("fill","rgb(170, 170, 170)").attr("font-size",function(){return Math.floor(t.settings.label_padding/3)+"px"}).text(function(t){return"Week "+t.week()}).attr("x",function(t){return l(t.week())}).attr("y",this.settings.label_padding/2).on("mouseenter",function(e){t.in_transition||t.items.selectAll(".item-block-month").transition().duration(t.settings.transition_duration).ease(f.easeLinear).style("opacity",function(t){return(0,c.default)(t.date).week()===e.week()?1:.1})}).on("mouseout",function(){t.in_transition||t.items.selectAll(".item-block-month").transition().duration(t.settings.transition_duration).ease(f.easeLinear).style("opacity",1)}).on("click",function(e){if(!t.in_transition){t.props.data.filter(function(t){return e.startOf("week")<=(0,c.default)(t.date)&&(0,c.default)(t.date)<e.endOf("week")}).length&&(t.in_transition=!0,t.selected={date:e},t.hideTooltip(),t.removeMonthOverview(),t.overview="week",t.drawChart())}}),this.labels.selectAll(".label-day").remove(),this.labels.selectAll(".label-day").data(s).enter().append("text").attr("class","label label-day").style("cursor","pointer").style("fill","rgb(170, 170, 170)").attr("x",this.settings.label_padding/3).attr("y",function(t,e){return r(e)+r.bandwidth()/1.75}).style("text-anchor","left").attr("font-size",function(){return Math.floor(t.settings.label_padding/3)+"px"}).text(function(t){return(0,c.default)(t).format("dddd")[0]}).on("mouseenter",function(e){if(!t.in_transition){var i=(0,c.default)(e);t.items.selectAll(".item-block-month").transition().duration(t.settings.transition_duration).ease(f.easeLinear).style("opacity",function(t){return(0,c.default)(t.date).day()===i.day()?1:.1})}}).on("mouseout",function(){t.in_transition||t.items.selectAll(".item-block-month").transition().duration(t.settings.transition_duration).ease(f.easeLinear).style("opacity",1)}),this.drawButton()}},{key:"drawWeekOverview",value:function(){var t=this;this.history[this.history.length-1]!==this.overview&&this.history.push(this.overview);var e=(0,c.default)(this.selected.date).startOf("week"),i=(0,c.default)(this.selected.date).endOf("week"),n=this.props.data.filter(function(t){return e<=(0,c.default)(t.date)&&(0,c.default)(t.date)<i}),a=f.max(n,function(t){return f.max(t.summary,function(t){return t.value})}),s=f.timeDays((0,c.default)().startOf("week"),(0,c.default)().endOf("week")),r=f.scaleBand().rangeRound([this.settings.label_padding,this.settings.height]).domain(s.map(function(t){return(0,c.default)(t).weekday()})),o=[e],l=f.scaleBand().rangeRound([this.settings.label_padding,this.settings.width]).padding([.01]).domain(o.map(function(t){return t.week()}));this.items.selectAll(".item-block-week").remove();var d=this.items.selectAll(".item-block-week").data(n).enter().append("g").attr("class","item item-block-week").style("cursor","pointer").attr("width",function(){return(t.settings.width-t.settings.label_padding)/o.length-5*t.settings.gutter}).attr("height",function(){return Math.min(r.bandwidth(),t.settings.max_block_height)}).attr("transform",function(t){return"translate("+l((0,c.default)(t.date).week())+","+(r((0,c.default)(t.date).weekday())+r.bandwidth()/1.75-15)+")"}).attr("total",function(t){return t.total}).attr("date",function(t){return t.date}).attr("offset",0).on("click",function(e){t.in_transition||0!==e.total&&(t.in_transition=!0,t.selected=e,t.hideTooltip(),t.removeWeekOverview(),t.overview="day",t.drawChart())}),u=(this.settings.width-this.settings.label_padding)/o.length-5*this.settings.gutter,h=f.scaleLinear().rangeRound([0,u]),p=this.settings.item_gutter;d.selectAll(".item-block-rect").data(function(t){return t.summary}).enter().append("rect").attr("class","item item-block-rect").style("cursor","pointer").attr("x",function(t){var e=parseInt(f.select(this.parentNode).attr("total")),i=parseInt(f.select(this.parentNode).attr("offset"));return h.domain([0,e]),f.select(this.parentNode).attr("offset",i+h(t.value)),i}).attr("width",function(t){var e=parseInt(f.select(this.parentNode).attr("total"));return h.domain([0,e]),Math.max(h(t.value)-p,1)}).attr("height",function(){return Math.min(r.bandwidth(),t.settings.max_block_height)}).attr("fill",function(e){return f.scaleLinear().range(["#ffffff",t.props.color]).domain([-.15*a,a])(e.value)||"#ff4500"}).style("opacity",0).on("mouseover",function(e){if(!t.in_transition){var i=f.select(f.event.currentTarget.parentNode),n=new Date(i.attr("date")),a="";a+='<div class="header"><strong style="display: inline-block; width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">'+e.name+"</strong></div><br>",a+="<div><strong>"+(e.value?t.formatTime(e.value):"No time")+" tracked</strong></div>",a+="<div>on "+(0,c.default)(n).format("dddd, MMM Do YYYY")+"</div>";var s=parseInt(i.attr("total"));h.domain([0,s]);for(var o=parseInt(f.select(f.event.currentTarget).attr("x"))+h(e.value)/4+t.settings.tooltip_width/4;t.settings.width-o<t.settings.tooltip_width+3*t.settings.tooltip_padding;)o-=10;var l=r((0,c.default)(n).weekday())+1.5*t.settings.tooltip_padding;t.tooltip.html(a).style("left",o+"px").style("top",l+"px").transition().duration(t.settings.transition_duration/2).ease(f.easeLinear).style("opacity",1)}}).on("mouseout",function(){t.in_transition||t.hideTooltip()}).transition().delay(function(){return(Math.cos(Math.PI*Math.random())+1)*t.settings.transition_duration}).duration(function(){return t.settings.transition_duration}).ease(f.easeLinear).style("opacity",1).call(function(t,e){t.empty()&&e();var i=0;t.each(function(){return++i}).on("end",function(){--i||e.apply(this,arguments)})},function(){t.in_transition=!1}),this.labels.selectAll(".label-week").remove(),this.labels.selectAll(".label-week").data(o).enter().append("text").attr("class","label label-week").style("cursor","pointer").style("fill","rgb(170, 170, 170)").attr("font-size",function(){return Math.floor(t.settings.label_padding/3)+"px"}).text(function(t){return"Week "+t.week()}).attr("x",function(t){return l(t.week())}).attr("y",this.settings.label_padding/2).on("mouseenter",function(e){t.in_transition||t.items.selectAll(".item-block-week").transition().duration(t.settings.transition_duration).ease(f.easeLinear).style("opacity",function(t){return(0,c.default)(t.date).week()===e.week()?1:.1})}).on("mouseout",function(){t.in_transition||t.items.selectAll(".item-block-week").transition().duration(t.settings.transition_duration).ease(f.easeLinear).style("opacity",1)}),this.labels.selectAll(".label-day").remove(),this.labels.selectAll(".label-day").data(s).enter().append("text").attr("class","label label-day").style("cursor","pointer").style("fill","rgb(170, 170, 170)").attr("x",this.settings.label_padding/3).attr("y",function(t,e){return r(e)+r.bandwidth()/1.75}).style("text-anchor","left").attr("font-size",function(){return Math.floor(t.settings.label_padding/3)+"px"}).text(function(t){return(0,c.default)(t).format("dddd")[0]}).on("mouseenter",function(e){if(!t.in_transition){var i=(0,c.default)(e);t.items.selectAll(".item-block-week").transition().duration(t.settings.transition_duration).ease(f.easeLinear).style("opacity",function(t){return(0,c.default)(t.date).day()===i.day()?1:.1})}}).on("mouseout",function(){t.in_transition||t.items.selectAll(".item-block-week").transition().duration(t.settings.transition_duration).ease(f.easeLinear).style("opacity",1)}),this.drawButton()}},{key:"drawDayOverview",value:function(){var t=this;this.history[this.history.length-1]!==this.overview&&this.history.push(this.overview),Object.keys(this.selected).length||(this.selected=this.props.data[this.props.data.length-1]);var e=this.selected.summary.map(function(t){return t.name}),i=f.scaleBand().rangeRound([this.settings.label_padding,this.settings.height]).domain(e),n=f.scaleTime().range([2*this.settings.label_padding,this.settings.width]).domain([(0,c.default)(this.selected.date).startOf("day"),(0,c.default)(this.selected.date).endOf("day")]);this.items.selectAll(".item-block").remove(),this.items.selectAll(".item-block").data(this.selected.details).enter().append("rect").attr("class","item item-block").style("cursor","pointer").attr("x",function(t){return n((0,c.default)(t.date))}).attr("y",function(t){return i(t.name)+i.bandwidth()/2-15}).attr("width",function(t){var e=n(f.timeSecond.offset((0,c.default)(t.date),t.value));return Math.max(e-n((0,c.default)(t.date)),1)}).attr("height",function(){return Math.min(i.bandwidth(),t.settings.max_block_height)}).attr("fill",function(){return t.props.color}).style("opacity",0).on("mouseover",function(e){if(!t.in_transition){var a="";a+='<div class="header"><strong style="display: inline-block; width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">'+e.name+"</strong><div><br>",a+="<div><strong>"+(e.value?t.formatTime(e.value):"No time")+" tracked</strong></div>",a+="<div>on "+(0,c.default)(e.date).format("dddd, MMM Do YYYY HH:mm")+"</div>";for(var s=100*e.value/86400+n((0,c.default)(e.date));t.settings.width-s<t.settings.tooltip_width+3*t.settings.tooltip_padding;)s-=10;var r=i(e.name)+i.bandwidth()/2+t.settings.tooltip_padding/2;t.tooltip.html(a).style("left",s+"px").style("top",r+"px").transition().duration(t.settings.transition_duration/2).ease(f.easeLinear).style("opacity",1)}}).on("mouseout",function(){t.in_transition||t.hideTooltip()}).on("click",function(e){t.props.handler&&"function"==typeof t.props.handler&&t.props.handler(e)}).transition().delay(function(){return(Math.cos(Math.PI*Math.random())+1)*t.settings.transition_duration}).duration(function(){return t.settings.transition_duration}).ease(f.easeLinear).style("opacity",.5).call(function(t,e){t.empty()&&e();var i=0;t.each(function(){return++i}).on("end",function(){--i||e.apply(this,arguments)})},function(){t.in_transition=!1});var a=f.timeHours((0,c.default)(this.selected.date).startOf("day"),(0,c.default)(this.selected.date).endOf("day")),s=f.scaleTime().range([2*this.settings.label_padding,this.settings.width]).domain([0,a.length]);this.labels.selectAll(".label-time").remove(),this.labels.selectAll(".label-time").data(a).enter().append("text").attr("class","label label-time").style("cursor","pointer").style("fill","rgb(170, 170, 170)").attr("font-size",function(){return Math.floor(t.settings.label_padding/3)+"px"}).text(function(t){return(0,c.default)(t).format("HH:mm")}).attr("x",function(t,e){return s(e)}).attr("y",this.settings.label_padding/2).on("mouseenter",function(e){if(!t.in_transition){var i=n((0,c.default)(e));t.items.selectAll(".item-block").transition().duration(t.settings.transition_duration).ease(f.easeLinear).style("opacity",function(t){var e=n((0,c.default)(t.date)),a=n((0,c.default)(t.date).add(t.value,"seconds"));return i>=e&&i<=a?1:.1})}}).on("mouseout",function(){t.in_transition||t.items.selectAll(".item-block").transition().duration(t.settings.transition_duration).ease(f.easeLinear).style("opacity",.5)});var r=this.settings.label_padding;this.labels.selectAll(".label-project").remove(),this.labels.selectAll(".label-project").data(e).enter().append("text").attr("class","label label-project").style("cursor","pointer").style("fill","rgb(170, 170, 170)").attr("x",this.settings.gutter).attr("y",function(t){return i(t)+i.bandwidth()/2}).attr("min-height",function(){return i.bandwidth()}).style("text-anchor","left").attr("font-size",function(){return Math.floor(t.settings.label_padding/3)+"px"}).text(function(t){return t}).each(function(){for(var t=f.select(this),e=t.node().getComputedTextLength(),i=t.text();e>1.5*r&&i.length>0;)i=i.slice(0,-1),t.text(i+"..."),e=t.node().getComputedTextLength()}).on("mouseenter",function(e){t.in_transition||t.items.selectAll(".item-block").transition().duration(t.settings.transition_duration).ease(f.easeLinear).style("opacity",function(t){return t.name===e?1:.1})}).on("mouseout",function(){t.in_transition||t.items.selectAll(".item-block").transition().duration(t.settings.transition_duration).ease(f.easeLinear).style("opacity",.5)}),this.drawButton()}},{key:"drawButton",value:function(){var t=this;this.buttons.selectAll(".button").remove();var e=this.buttons.append("g").attr("class","button button-back").style("cursor","pointer").attr("fill","transparent").style("opacity",0).style("stroke-width",2).style("stroke","rgb(170, 170, 170)").on("click",function(){t.in_transition||(t.in_transition=!0,"year"===t.overview?t.removeYearOverview():"month"===t.overview?t.removeMonthOverview():"week"===t.overview?t.removeWeekOverview():"day"===t.overview&&t.removeDayOverview(),t.history.pop(),t.overview=t.history.pop(),t.drawChart())});e.append("circle").attr("cx",this.settings.label_padding/2.25).attr("cy",this.settings.label_padding/2.5).attr("r",this.settings.item_size/2),e.append("text").attr("x",this.settings.label_padding/3.25).attr("y",this.settings.label_padding/2.5).attr("dy",function(){return Math.floor(t.settings.width/100)/3}).attr("font-size",function(){return Math.floor(t.settings.label_padding/3)+"px"}).html("←"),e.transition().duration(this.settings.transition_duration).ease(f.easeLinear).style("opacity",1)}},{key:"removeGlobalOverview",value:function(){this.items.selectAll(".item-block-year").transition().duration(this.settings.transition_duration).ease(f.easeLinear).style("opacity",0).remove(),this.labels.selectAll(".label-year").remove()}},{key:"removeYearOverview",value:function(){this.items.selectAll(".item-circle").transition().duration(this.settings.transition_duration).ease(f.easeLinear).style("opacity",0).remove(),this.labels.selectAll(".label-day").remove(),this.labels.selectAll(".label-month").remove(),this.hideBackButton()}},{key:"removeMonthOverview",value:function(){var t=this;this.items.selectAll(".item-block-month").selectAll(".item-block-rect").transition().duration(this.settings.transition_duration).ease(f.easeLinear).style("opacity",0).attr("x",function(e,i){return i%2==0?-t.settings.width/3:t.settings.width/3}).remove(),this.labels.selectAll(".label-day").remove(),this.labels.selectAll(".label-week").remove(),this.hideBackButton()}},{key:"removeWeekOverview",value:function(){var t=this;this.items.selectAll(".item-block-week").selectAll(".item-block-rect").transition().duration(this.settings.transition_duration).ease(f.easeLinear).style("opacity",0).attr("x",function(e,i){return i%2==0?-t.settings.width/3:t.settings.width/3}).remove(),this.labels.selectAll(".label-day").remove(),this.labels.selectAll(".label-week").remove(),this.hideBackButton()}},{key:"removeDayOverview",value:function(){var t=this;this.items.selectAll(".item-block").transition().duration(this.settings.transition_duration).ease(f.easeLinear).style("opacity",0).attr("x",function(e,i){return i%2==0?-t.settings.width/3:t.settings.width/3}).remove(),this.labels.selectAll(".label-time").remove(),this.labels.selectAll(".label-project").remove(),this.hideBackButton()}},{key:"hideTooltip",value:function(){this.tooltip.transition().duration(this.settings.transition_duration/2).ease(f.easeLinear).style("opacity",0)}},{key:"hideBackButton",value:function(){this.buttons.selectAll(".button").transition().duration(this.settings.transition_duration).ease(f.easeLinear).style("opacity",0).remove()}},{key:"formatTime",value:function(t){var e=Math.floor(t/3600),i=Math.floor((t-3600*e)/60),n="";return e>0&&(n+=1===e?"1 hour ":e+" hours "),i>0&&(n+=1===i?"1 minute":i+" minutes"),0===e&&0===i&&(n=Math.round(t)+" seconds"),n}},{key:"render",value:function(){var t=this,e={userSelect:"none",fontFamily:"Helvetica, Arial, sans-serif"};return d.createElement("div",{id:"calendar-heatmap",style:e,ref:function(e){t.container=e}})}}]),e}(d.Component);p.defaultProps={data:[],overview:"year",color:"#ff4500",handler:void 0},e.default=p,t.exports=e.default},function(e,i){e.exports=t},function(t,i){t.exports=e},function(t,e){t.exports=i}])}); |
{ | ||
"name": "reactjs-calendar-heatmap", | ||
"version": "0.0.5", | ||
"version": "0.0.6", | ||
"description": "React component for d3.js calendar heatmap graph.", | ||
@@ -5,0 +5,0 @@ "homepage": "https://github.com/g1eb/reactjs-calendar-heatmap#readme", |
@@ -1,2 +0,2 @@ | ||
import { Component } from 'react' | ||
import * as React from 'react' | ||
@@ -6,3 +6,3 @@ import moment from 'moment' | ||
class CalendarHeatmap extends Component { | ||
class CalendarHeatmap extends React.Component { | ||
@@ -78,5 +78,5 @@ constructor(props) { | ||
calcDimensions() { | ||
var dayIndex = Math.round((moment() - moment().subtract(1, 'year').startOf('week')) / 86400000) | ||
var colIndex = Math.trunc(dayIndex / 7) | ||
var numWeeks = colIndex + 1 | ||
let dayIndex = Math.round((moment() - moment().subtract(1, 'year').startOf('week')) / 86400000) | ||
let colIndex = Math.trunc(dayIndex / 7) | ||
let numWeeks = colIndex + 1 | ||
@@ -100,3 +100,3 @@ this.settings.width = this.container.offsetWidth < 1000 ? 1000 : this.container.offsetWidth | ||
this.props.data.map(d => { | ||
var summary = d.details.reduce((uniques, project) => { | ||
let summary = d.details.reduce((uniques, project) => { | ||
if (!uniques[project.name]) { | ||
@@ -111,3 +111,3 @@ uniques[project.name] = { | ||
}, {}) | ||
var unsorted_summary = Object.keys(summary).map(key => { | ||
let unsorted_summary = Object.keys(summary).map(key => { | ||
return { | ||
@@ -152,10 +152,10 @@ 'name': key, | ||
// Define start and end of the dataset | ||
var start = moment(this.props.data[0].date).startOf('year') | ||
var end = moment(this.props.data[this.props.data.length - 1].date).endOf('year') | ||
let start = moment(this.props.data[0].date).startOf('year') | ||
let end = moment(this.props.data[this.props.data.length - 1].date).endOf('year') | ||
// Define array of years and total values | ||
var year_data = d3.timeYears(start, end).map(d => { | ||
var date = moment(d) | ||
let year_data = d3.timeYears(start, end).map(d => { | ||
let date = moment(d) | ||
let getSummary = () => { | ||
var summary = this.props.data.reduce((summary, d) => { | ||
let summary = this.props.data.reduce((summary, d) => { | ||
if (moment(d.date).year() === date.year()) { | ||
@@ -174,3 +174,3 @@ d.summary.map(item => { | ||
}, {}) | ||
var unsorted_summary = Object.keys(summary).map(key => { | ||
let unsorted_summary = Object.keys(summary).map(key => { | ||
return { | ||
@@ -198,3 +198,3 @@ 'name': key, | ||
// Calculate max value of all the years in the dataset | ||
var max_value = d3.max(year_data, d => { | ||
let max_value = d3.max(year_data, d => { | ||
return d.total | ||
@@ -204,6 +204,6 @@ }) | ||
// Define year labels and axis | ||
var year_labels = d3.timeYears(start, end).map(d => { | ||
let year_labels = d3.timeYears(start, end).map(d => { | ||
return moment(d) | ||
}) | ||
var yearScale = d3.scaleBand() | ||
let yearScale = d3.scaleBand() | ||
.rangeRound([0, this.settings.width]) | ||
@@ -217,3 +217,3 @@ .padding([0.05]) | ||
this.items.selectAll('.item-block-year').remove() | ||
var item_block = this.items.selectAll('.item-block-year') | ||
let item_block = this.items.selectAll('.item-block-year') | ||
.data(year_data) | ||
@@ -234,3 +234,3 @@ .enter() | ||
.attr('fill', d => { | ||
var color = d3.scaleLinear() | ||
let color = d3.scaleLinear() | ||
.range(['#ffffff', this.props.color]) | ||
@@ -264,11 +264,11 @@ .domain([-0.15 * max_value, max_value]) | ||
// Construct tooltip | ||
var tooltip_html = '' | ||
let tooltip_html = '' | ||
tooltip_html += '<div><span style="display: inline-block; width: 50%; padding-right: 10px; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"><strong>Total time tracked:</strong></span>' | ||
var sec = parseInt(d.total, 10) | ||
var days = Math.floor(sec / 86400) | ||
let sec = parseInt(d.total, 10) | ||
let days = Math.floor(sec / 86400) | ||
if (days > 0) { | ||
tooltip_html += '<span style="display: inline-block; width: 50%; padding-right: 10px; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">' + (days === 1 ? '1 day' : days + ' days') + '</span></div>' | ||
} | ||
var hours = Math.floor((sec - (days * 86400)) / 3600) | ||
let hours = Math.floor((sec - (days * 86400)) / 3600) | ||
if (hours > 0) { | ||
@@ -281,3 +281,3 @@ if (days > 0) { | ||
} | ||
var minutes = Math.floor((sec - (days * 86400) - (hours * 3600)) / 60) | ||
let minutes = Math.floor((sec - (days * 86400) - (hours * 3600)) / 60) | ||
if (minutes > 0) { | ||
@@ -321,7 +321,7 @@ if (days > 0 || hours > 0) { | ||
// Calculate tooltip position | ||
var x = yearScale(d.date.year()) + this.settings.tooltip_padding * 2 | ||
let x = yearScale(d.date.year()) + this.settings.tooltip_padding * 2 | ||
while (this.settings.width - x < (this.settings.tooltip_width + this.settings.tooltip_padding * 5)) { | ||
x -= 10 | ||
} | ||
var y = this.settings.tooltip_padding * 3 | ||
let y = this.settings.tooltip_padding * 3 | ||
@@ -354,3 +354,3 @@ // Show tooltip | ||
} | ||
var n = 0 | ||
let n = 0 | ||
transition | ||
@@ -438,7 +438,7 @@ .each(() => {++n }) | ||
// Define start and end date of the selected year | ||
var start_of_year = moment(this.selected.date).startOf('year') | ||
var end_of_year = moment(this.selected.date).endOf('year') | ||
let start_of_year = moment(this.selected.date).startOf('year') | ||
let end_of_year = moment(this.selected.date).endOf('year') | ||
// Filter data down to the selected year | ||
var year_data = this.props.data.filter(d => { | ||
let year_data = this.props.data.filter(d => { | ||
return start_of_year <= moment(d.date) && moment(d.date) < end_of_year | ||
@@ -448,20 +448,20 @@ }) | ||
// Calculate max value of the year data | ||
var max_value = d3.max(year_data, d => d.total) | ||
let max_value = d3.max(year_data, d => d.total) | ||
var color = d3.scaleLinear() | ||
let color = d3.scaleLinear() | ||
.range(['#ffffff', this.props.color]) | ||
.domain([-0.15 * max_value, max_value]) | ||
var calcItemX = (d) => { | ||
var date = moment(d.date) | ||
var dayIndex = Math.round((date - moment(start_of_year).startOf('week')) / 86400000) | ||
var colIndex = Math.trunc(dayIndex / 7) | ||
let calcItemX = (d) => { | ||
let date = moment(d.date) | ||
let dayIndex = Math.round((date - moment(start_of_year).startOf('week')) / 86400000) | ||
let colIndex = Math.trunc(dayIndex / 7) | ||
return colIndex * (this.settings.item_size + this.settings.gutter) + this.settings.label_padding | ||
} | ||
var calcItemY = d => { | ||
let calcItemY = d => { | ||
return this.settings.label_padding + moment(d.date).weekday() * (this.settings.item_size + this.settings.gutter) | ||
} | ||
var calcItemSize = d => { | ||
let calcItemSize = d => { | ||
if ( max_value <= 0 ) { | ||
@@ -527,3 +527,3 @@ return this.settings.item_size | ||
// Pulsating animation | ||
var circle = d3.select(d3.event.currentTarget) | ||
let circle = d3.select(d3.event.currentTarget) | ||
let repeat = () => { | ||
@@ -561,3 +561,3 @@ circle = circle.transition() | ||
// Construct tooltip | ||
var tooltip_html = '' | ||
let tooltip_html = '' | ||
tooltip_html += '<div class="header"><strong style="display: inline-block; width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">' + (d.total ? this.formatTime(d.total) : 'No time') + ' tracked</strong></div>' | ||
@@ -575,7 +575,7 @@ tooltip_html += '<div>on ' + moment(d.date).format('dddd, MMM Do YYYY') + '</div><br>' | ||
// Calculate tooltip position | ||
var x = calcItemX(d) + this.settings.item_size | ||
let x = calcItemX(d) + this.settings.item_size | ||
if (this.settings.width - x < (this.settings.tooltip_width + this.settings.tooltip_padding * 3)) { | ||
x -= this.settings.tooltip_width + this.settings.tooltip_padding * 2 | ||
} | ||
var y = calcItemY(d) + this.settings.item_size | ||
let y = calcItemY(d) + this.settings.item_size | ||
@@ -627,3 +627,3 @@ // Show tooltip | ||
} | ||
var n = 0 | ||
let n = 0 | ||
transition | ||
@@ -641,4 +641,4 @@ .each(() => ++n) | ||
// Add month labels | ||
var month_labels = d3.timeMonths(start_of_year, end_of_year) | ||
var monthScale = d3.scaleLinear() | ||
let month_labels = d3.timeMonths(start_of_year, end_of_year) | ||
let monthScale = d3.scaleLinear() | ||
.range([0, this.settings.width]) | ||
@@ -667,3 +667,3 @@ .domain([0, month_labels.length]) | ||
var selected_month = moment(d) | ||
let selected_month = moment(d) | ||
this.items.selectAll('.item-circle') | ||
@@ -690,3 +690,3 @@ .transition() | ||
// Check month data | ||
var month_data = this.props.data.filter(e => { | ||
let month_data = this.props.data.filter(e => { | ||
return moment(d).startOf('month') <= moment(e.date) && moment(e.date) < moment(d).endOf('month') | ||
@@ -715,4 +715,4 @@ }) | ||
// Add day labels | ||
var day_labels = d3.timeDays(moment().startOf('week'), moment().endOf('week')) | ||
var dayScale = d3.scaleBand() | ||
let day_labels = d3.timeDays(moment().startOf('week'), moment().endOf('week')) | ||
let dayScale = d3.scaleBand() | ||
.rangeRound([this.settings.label_padding, this.settings.height]) | ||
@@ -744,3 +744,3 @@ .domain(day_labels.map(d => { | ||
var selected_day = moment(d) | ||
let selected_day = moment(d) | ||
this.items.selectAll('.item-circle') | ||
@@ -779,10 +779,10 @@ .transition() | ||
// Define beginning and end of the month | ||
var start_of_month = moment(this.selected.date).startOf('month') | ||
var end_of_month = moment(this.selected.date).endOf('month') | ||
let start_of_month = moment(this.selected.date).startOf('month') | ||
let end_of_month = moment(this.selected.date).endOf('month') | ||
// Filter data down to the selected month | ||
var month_data = this.props.data.filter(d => { | ||
let month_data = this.props.data.filter(d => { | ||
return start_of_month <= moment(d.date) && moment(d.date) < end_of_month | ||
}) | ||
var max_value = d3.max(month_data, d => { | ||
let max_value = d3.max(month_data, d => { | ||
return d3.max(d.summary, d => { | ||
@@ -794,4 +794,4 @@ return d.value | ||
// Define day labels and axis | ||
var day_labels = d3.timeDays(moment().startOf('week'), moment().endOf('week')) | ||
var dayScale = d3.scaleBand() | ||
let day_labels = d3.timeDays(moment().startOf('week'), moment().endOf('week')) | ||
let dayScale = d3.scaleBand() | ||
.rangeRound([this.settings.label_padding, this.settings.height]) | ||
@@ -803,7 +803,7 @@ .domain(day_labels.map(d => { | ||
// Define week labels and axis | ||
var week_labels = [start_of_month.clone()] | ||
let week_labels = [start_of_month.clone()] | ||
while (start_of_month.week() !== end_of_month.week()) { | ||
week_labels.push(start_of_month.add(1, 'week').clone()) | ||
} | ||
var weekScale = d3.scaleBand() | ||
let weekScale = d3.scaleBand() | ||
.rangeRound([this.settings.label_padding, this.settings.width]) | ||
@@ -817,3 +817,3 @@ .padding([0.05]) | ||
this.items.selectAll('.item-block-month').remove() | ||
var item_block = this.items.selectAll('.item-block-month') | ||
let item_block = this.items.selectAll('.item-block-month') | ||
.data(month_data) | ||
@@ -862,7 +862,7 @@ .enter() | ||
var item_width = (this.settings.width - this.settings.label_padding) / week_labels.length - this.settings.gutter * 5 | ||
var itemScale = d3.scaleLinear() | ||
let item_width = (this.settings.width - this.settings.label_padding) / week_labels.length - this.settings.gutter * 5 | ||
let itemScale = d3.scaleLinear() | ||
.rangeRound([0, item_width]) | ||
var item_gutter = this.settings.item_gutter | ||
let item_gutter = this.settings.item_gutter | ||
item_block.selectAll('.item-block-rect') | ||
@@ -875,4 +875,4 @@ .data(d => d.summary) | ||
.attr('x', function(d) { | ||
var total = parseInt(d3.select(this.parentNode).attr('total')) | ||
var offset = parseInt(d3.select(this.parentNode).attr('offset')) | ||
let total = parseInt(d3.select(this.parentNode).attr('total')) | ||
let offset = parseInt(d3.select(this.parentNode).attr('offset')) | ||
itemScale.domain([0, total]) | ||
@@ -883,3 +883,3 @@ d3.select(this.parentNode).attr('offset', offset + itemScale(d.value)) | ||
.attr('width', function(d) { | ||
var total = parseInt(d3.select(this.parentNode).attr('total')) | ||
let total = parseInt(d3.select(this.parentNode).attr('total')) | ||
itemScale.domain([0, total]) | ||
@@ -892,3 +892,3 @@ return Math.max((itemScale(d.value) - item_gutter), 1) | ||
.attr('fill', d => { | ||
var color = d3.scaleLinear() | ||
let color = d3.scaleLinear() | ||
.range(['#ffffff', this.props.color]) | ||
@@ -903,7 +903,7 @@ .domain([-0.15 * max_value, max_value]) | ||
// Get date from the parent node | ||
var parentNode = d3.select(d3.event.currentTarget.parentNode) | ||
var date = new Date(parentNode.attr('date')) | ||
let parentNode = d3.select(d3.event.currentTarget.parentNode) | ||
let date = new Date(parentNode.attr('date')) | ||
// Construct tooltip | ||
var tooltip_html = '' | ||
let tooltip_html = '' | ||
tooltip_html += '<div class="header"><strong style="display: inline-block; width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">' + d.name + '</strong></div><br>' | ||
@@ -914,7 +914,7 @@ tooltip_html += '<div><strong>' + (d.value ? this.formatTime(d.value) : 'No time') + ' tracked</strong></div>' | ||
// Calculate tooltip position | ||
var x = weekScale(moment(date).week()) + this.settings.tooltip_padding | ||
let x = weekScale(moment(date).week()) + this.settings.tooltip_padding | ||
while (this.settings.width - x < (this.settings.tooltip_width + this.settings.tooltip_padding * 3)) { | ||
x -= 10 | ||
} | ||
var y = dayScale(moment(date).weekday()) + this.settings.tooltip_padding * 2 | ||
let y = dayScale(moment(date).weekday()) + this.settings.tooltip_padding * 2 | ||
@@ -947,3 +947,3 @@ // Show tooltip | ||
} | ||
var n = 0 | ||
let n = 0 | ||
transition | ||
@@ -1003,3 +1003,3 @@ .each(() => ++n) | ||
// Check week data | ||
var week_data = this.props.data.filter(e => { | ||
let week_data = this.props.data.filter(e => { | ||
return d.startOf('week') <= moment(e.date) && moment(e.date) < d.endOf('week') | ||
@@ -1050,3 +1050,3 @@ }) | ||
var selected_day = moment(d) | ||
let selected_day = moment(d) | ||
this.items.selectAll('.item-block-month') | ||
@@ -1085,10 +1085,10 @@ .transition() | ||
// Define beginning and end of the week | ||
var start_of_week = moment(this.selected.date).startOf('week') | ||
var end_of_week = moment(this.selected.date).endOf('week') | ||
let start_of_week = moment(this.selected.date).startOf('week') | ||
let end_of_week = moment(this.selected.date).endOf('week') | ||
// Filter data down to the selected week | ||
var week_data = this.props.data.filter(d => { | ||
let week_data = this.props.data.filter(d => { | ||
return start_of_week <= moment(d.date) && moment(d.date) < end_of_week | ||
}) | ||
var max_value = d3.max(week_data, d => { | ||
let max_value = d3.max(week_data, d => { | ||
return d3.max(d.summary, d => { | ||
@@ -1100,4 +1100,4 @@ return d.value | ||
// Define day labels and axis | ||
var day_labels = d3.timeDays(moment().startOf('week'), moment().endOf('week')) | ||
var dayScale = d3.scaleBand() | ||
let day_labels = d3.timeDays(moment().startOf('week'), moment().endOf('week')) | ||
let dayScale = d3.scaleBand() | ||
.rangeRound([this.settings.label_padding, this.settings.height]) | ||
@@ -1109,4 +1109,4 @@ .domain(day_labels.map(d => { | ||
// Define week labels and axis | ||
var week_labels = [start_of_week] | ||
var weekScale = d3.scaleBand() | ||
let week_labels = [start_of_week] | ||
let weekScale = d3.scaleBand() | ||
.rangeRound([this.settings.label_padding, this.settings.width]) | ||
@@ -1120,3 +1120,3 @@ .padding([0.01]) | ||
this.items.selectAll('.item-block-week').remove() | ||
var item_block = this.items.selectAll('.item-block-week') | ||
let item_block = this.items.selectAll('.item-block-week') | ||
.data(week_data) | ||
@@ -1165,7 +1165,7 @@ .enter() | ||
var item_width = (this.settings.width - this.settings.label_padding) / week_labels.length - this.settings.gutter * 5 | ||
var itemScale = d3.scaleLinear() | ||
let item_width = (this.settings.width - this.settings.label_padding) / week_labels.length - this.settings.gutter * 5 | ||
let itemScale = d3.scaleLinear() | ||
.rangeRound([0, item_width]) | ||
var item_gutter = this.settings.item_gutter | ||
let item_gutter = this.settings.item_gutter | ||
item_block.selectAll('.item-block-rect') | ||
@@ -1178,4 +1178,4 @@ .data(d => d.summary) | ||
.attr('x', function(d) { | ||
var total = parseInt(d3.select(this.parentNode).attr('total')) | ||
var offset = parseInt(d3.select(this.parentNode).attr('offset')) | ||
let total = parseInt(d3.select(this.parentNode).attr('total')) | ||
let offset = parseInt(d3.select(this.parentNode).attr('offset')) | ||
itemScale.domain([0, total]) | ||
@@ -1186,3 +1186,3 @@ d3.select(this.parentNode).attr('offset', offset + itemScale(d.value)) | ||
.attr('width', function(d) { | ||
var total = parseInt(d3.select(this.parentNode).attr('total')) | ||
let total = parseInt(d3.select(this.parentNode).attr('total')) | ||
itemScale.domain([0, total]) | ||
@@ -1195,3 +1195,3 @@ return Math.max((itemScale(d.value) - item_gutter), 1) | ||
.attr('fill', d => { | ||
var color = d3.scaleLinear() | ||
let color = d3.scaleLinear() | ||
.range(['#ffffff', this.props.color]) | ||
@@ -1206,7 +1206,7 @@ .domain([-0.15 * max_value, max_value]) | ||
// Get date from the parent node | ||
var parentNode = d3.select(d3.event.currentTarget.parentNode) | ||
var date = new Date(parentNode.attr('date')) | ||
let parentNode = d3.select(d3.event.currentTarget.parentNode) | ||
let date = new Date(parentNode.attr('date')) | ||
// Construct tooltip | ||
var tooltip_html = '' | ||
let tooltip_html = '' | ||
tooltip_html += '<div class="header"><strong style="display: inline-block; width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">' + d.name + '</strong></div><br>' | ||
@@ -1217,9 +1217,9 @@ tooltip_html += '<div><strong>' + (d.value ? this.formatTime(d.value) : 'No time') + ' tracked</strong></div>' | ||
// Calculate tooltip position | ||
var total = parseInt(parentNode.attr('total')) | ||
let total = parseInt(parentNode.attr('total')) | ||
itemScale.domain([0, total]) | ||
var x = parseInt(d3.select(d3.event.currentTarget).attr('x')) + itemScale(d.value) / 4 + this.settings.tooltip_width / 4 | ||
let x = parseInt(d3.select(d3.event.currentTarget).attr('x')) + itemScale(d.value) / 4 + this.settings.tooltip_width / 4 | ||
while (this.settings.width - x < (this.settings.tooltip_width + this.settings.tooltip_padding * 3)) { | ||
x -= 10 | ||
} | ||
var y = dayScale(moment(date).weekday()) + this.settings.tooltip_padding * 1.5 | ||
let y = dayScale(moment(date).weekday()) + this.settings.tooltip_padding * 1.5 | ||
@@ -1252,3 +1252,3 @@ // Show tooltip | ||
} | ||
var n = 0 | ||
let n = 0 | ||
transition | ||
@@ -1328,3 +1328,3 @@ .each(() => ++n) | ||
var selected_day = moment(d) | ||
let selected_day = moment(d) | ||
this.items.selectAll('.item-block-week') | ||
@@ -1367,10 +1367,10 @@ .transition() | ||
var project_labels = this.selected.summary.map(project => { | ||
let project_labels = this.selected.summary.map(project => { | ||
return project.name | ||
}) | ||
var projectScale = d3.scaleBand() | ||
let projectScale = d3.scaleBand() | ||
.rangeRound([this.settings.label_padding, this.settings.height]) | ||
.domain(project_labels) | ||
var itemScale = d3.scaleTime() | ||
let itemScale = d3.scaleTime() | ||
.range([this.settings.label_padding * 2, this.settings.width]) | ||
@@ -1392,3 +1392,3 @@ .domain([moment(this.selected.date).startOf('day'), moment(this.selected.date).endOf('day')]) | ||
.attr('width', d => { | ||
var end = itemScale(d3.timeSecond.offset(moment(d.date), d.value)) | ||
let end = itemScale(d3.timeSecond.offset(moment(d.date), d.value)) | ||
return Math.max((end - itemScale(moment(d.date))), 1) | ||
@@ -1407,3 +1407,3 @@ }) | ||
// Construct tooltip | ||
var tooltip_html = '' | ||
let tooltip_html = '' | ||
tooltip_html += '<div class="header"><strong style="display: inline-block; width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">' + d.name + '</strong><div><br>' | ||
@@ -1414,7 +1414,7 @@ tooltip_html += '<div><strong>' + (d.value ? this.formatTime(d.value) : 'No time') + ' tracked</strong></div>' | ||
// Calculate tooltip position | ||
var x = d.value * 100 / (60 * 60 * 24) + itemScale(moment(d.date)) | ||
let x = d.value * 100 / (60 * 60 * 24) + itemScale(moment(d.date)) | ||
while (this.settings.width - x < (this.settings.tooltip_width + this.settings.tooltip_padding * 3)) { | ||
x -= 10 | ||
} | ||
var y = projectScale(d.name) + projectScale.bandwidth() / 2 + this.settings.tooltip_padding / 2 | ||
let y = projectScale(d.name) + projectScale.bandwidth() / 2 + this.settings.tooltip_padding / 2 | ||
@@ -1452,3 +1452,3 @@ // Show tooltip | ||
} | ||
var n = 0 | ||
let n = 0 | ||
transition | ||
@@ -1466,7 +1466,7 @@ .each(() => ++n) | ||
// Add time labels | ||
var timeLabels = d3.timeHours( | ||
let timeLabels = d3.timeHours( | ||
moment(this.selected.date).startOf('day'), | ||
moment(this.selected.date).endOf('day') | ||
) | ||
var timeScale = d3.scaleTime() | ||
let timeScale = d3.scaleTime() | ||
.range([this.settings.label_padding * 2, this.settings.width]) | ||
@@ -1495,3 +1495,3 @@ .domain([0, timeLabels.length]) | ||
var selected = itemScale(moment(d)) | ||
let selected = itemScale(moment(d)) | ||
this.items.selectAll('.item-block') | ||
@@ -1502,4 +1502,4 @@ .transition() | ||
.style('opacity', d => { | ||
var start = itemScale(moment(d.date)) | ||
var end = itemScale(moment(d.date).add(d.value, 'seconds')) | ||
let start = itemScale(moment(d.date)) | ||
let end = itemScale(moment(d.date).add(d.value, 'seconds')) | ||
return (selected >= start && selected <= end) ? 1 : 0.1 | ||
@@ -1519,3 +1519,3 @@ }) | ||
// Add project labels | ||
var label_padding = this.settings.label_padding | ||
let label_padding = this.settings.label_padding | ||
this.labels.selectAll('.label-project').remove() | ||
@@ -1542,3 +1542,3 @@ this.labels.selectAll('.label-project') | ||
.each(function() { | ||
var obj = d3.select(this), | ||
let obj = d3.select(this), | ||
text_length = obj.node().getComputedTextLength(), | ||
@@ -1583,3 +1583,3 @@ text = obj.text() | ||
this.buttons.selectAll('.button').remove() | ||
var button = this.buttons.append('g') | ||
let button = this.buttons.append('g') | ||
.attr('class', 'button button-back') | ||
@@ -1721,3 +1721,2 @@ .style('cursor', 'pointer') | ||
/** | ||
@@ -1752,5 +1751,5 @@ * Helper function to hide the tooltip | ||
formatTime(seconds) { | ||
var hours = Math.floor(seconds / 3600) | ||
var minutes = Math.floor((seconds - (hours * 3600)) / 60) | ||
var time = '' | ||
let hours = Math.floor(seconds / 3600) | ||
let minutes = Math.floor((seconds - (hours * 3600)) / 60) | ||
let time = '' | ||
if (hours > 0) { | ||
@@ -1757,0 +1756,0 @@ time += hours === 1 ? '1 hour ' : hours + ' hours ' |
Sorry, the diff of this file is too big to display
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
947583
19
3058