30:T609,AxisTop = (g, scale) => g .selectAll('.x-axis-top') .data(['x-axis-top']) .join('g') .attr('class', d => d) .attr("transform", `translate(${-10}, ${20})`) .call( d3 .axisTop() .scale(scale) // .tickSize(-height + margin.top + margin.bottom) .tickPadding(2) .tickSizeOuter(0) // .ticks(d3.timeHour.every(6) || d3.timeDay.every(1)) // .tickFormat(function(d) { // var hours; // hours = d.getHours(); // if (hours === 12) { // // font awesome's sun icon // return '🌞'; // } else if (hours === 0) { // // font awesome's moon icon // // return '🌒'; // } else { // return d3.timeFormat('%-I%p')(d); // } // }) ) .call(g => { g.selectAll('text') .filter(function(d, i) { if (d3.select(this).text() === '12AM') { d3.select(d3.select(this).node().parentNode).remove(); } }) .remove(); g.selectAll('line').attr('stroke-dasharray', [2, 10]); g.selectAll('.domain') .attr('stroke-width', 2 /* 2 * (height - margin.top - margin.bottom)*/) .attr('opacity', 1) .attr('stroke', '#f5f5f5'); // g.selectAll('line') // .filter(function(d, i) { // if(d3.select(this).text() === '12AM') // return true; // if(d3.select(this).text()===) // ); // }) // .remove(); })31:T2151,function drawMonthView() { manageHistory(); const [start_of_month, end_of_month] = getStartEndTimes('timeMonth'); const month_data = getFilteredData(start_of_month, end_of_month); const max_value = getMaxValue(month_data); // Define week labels and axis let week_labels = d3.timeWeeks( d3.timeWeek(start_of_month), d3.timeWeek.ceil(end_of_month) ); const weekScale = d3 .scaleBand() .rangeRound([label_padding, width], 0.05) .domain( week_labels.map(weekday => { return +d3.timeFormat('%W')(weekday); //weekday.week(); }) ); // Add month data items to the overview items.selectAll('.item-block-month').remove(); const item_block = items .selectAll('.item-block-month') .data(month_data) .enter() .append('g') .attr('class', 'item item-block-month') .attr('width', () => { return (width - label_padding) / week_labels.length - gutter * 5; }) .attr('height', () => { return Math.min(dayScale.bandwidth(), max_block_height); }) .attr( 'transform', d => `translate( ${weekScale(+d3.timeFormat('%W')(d3.timeWeek(d.date)))}, ${dayScale(+d.date.getDay()) + dayScale.bandwidth() / 1.75 - 15} )` ) .attr('total', d => d.total) .attr('date', d => { return d.date; }) .attr('offset', 0) .on('click', d => { if (calendarHeatmap.in_transition) { return; } // Don't transition if there is no data to show if (d.total === 0) { return; } calendarHeatmap.in_transition = true; // Set selected date to the one clicked on calendarHeatmap.selected = d; // Hide tooltip calendarHeatmap.hideTooltip(); // Remove all month overview related items and labels calendarHeatmap.removeMonthView(); // Redraw the chart calendarHeatmap.overview = 'day'; drawChart(); }); const item_width = (width - label_padding) / week_labels.length - gutter * 5; const itemScale = d3.scaleLinear().rangeRound([0, item_width]); item_block .selectAll('.item-block-rect') .data(d => { return d.summary; }) .enter() .append('rect') .attr('class', 'item item-block-rect') .attr('x', function(d) { const total = parseInt(d3.select(this.parentNode).attr('total')); const offset = parseInt(d3.select(this.parentNode).attr('offset')); itemScale.domain([0, total]); d3.select(this.parentNode).attr('offset', offset + itemScale(d.value)); return offset; }) .attr('width', function(d) { const total = parseInt(d3.select(this.parentNode).attr('total')); itemScale.domain([0, total]); return Math.max(itemScale(d.value) - item_gutter, 1); }) .attr('height', () => { return Math.min(dayScale.bandwidth(), max_block_height); }) .attr('fill', function(d) { console.log(d); let clr = 'transparent'; const colorFuture = d3 .scaleLinear() .range(['#ffffff', futureColor]) .domain([-0.1 * max_value, max_value]); const colorPast = d3 .scaleLinear() .range(['#ffffff', pastColor]) .domain([-0.1 * max_value, max_value]); const colorToday = d3 .scaleLinear() .range(['#ffffff', todayColor]) .domain([-0.1 * max_value, max_value]); const dated = +new Date(d3.select(this.parentNode).attr('date')); if (now === dated) { clr = colorToday(d.value); } else { if (dated < now) { clr = colorPast(d.value); } else if (dated > now) { clr = colorFuture(d.value); } } return clr; }) .style('opacity', 0) .on('mouseover', function(d) { if (calendarHeatmap.in_transition) { return; } // Get date from the parent node const date = new Date(d3.select(this.parentNode).attr('date')); // Construct tooltip let tooltip_html = `

${ d.value ? calendarHeatmap.formatTime(d.value) : 'No time' } tracked

on ${d3.timeFormat('%A, %b %-d %Y')(date)}

`; // Calculate tooltip position let x = weekScale(+d3.timeFormat('%W')(date)) + tooltip_padding; while (width - x < tooltip_width + tooltip_padding * 3) { x -= 10; } const y = dayScale(date.getDay()) + tooltip_padding * 2; // Show tooltip tooltip .html(tooltip_html) .style('left', `${x}px`) .style('top', `${y}px`) .transition() .duration(transition_duration / 2) .ease(d3.easeBackIn) .style('opacity', 1); }) .on('mouseout', () => { if (calendarHeatmap.in_transition) { return; } calendarHeatmap.hideTooltip(); }) .transition() .delay(() => { return (Math.cos(Math.PI * Math.random()) + 1) * transition_duration; }) .duration(() => { return transition_duration; }) .ease(d3.easeBackIn) .style('opacity', 1) .call(transitionCallback); /////// ////////////// // /////// //AddWeekLabels(weekScale, week_labels, '.item-block-month', d3.easeBackIn) // AddWeekdayLabels()('.item-block-month', d3.easeBackIn); /////////////////////////////// // // // // // // // / /// //// /// // Add week labels labels.selectAll('.label-week').remove(); labels .selectAll('.label-week') .data(week_labels) .enter() .append('text') .attr('class', 'label label-week') .attr('font-size', () => { return `${Math.floor(label_padding / 3)}px`; }) .text(d => { return `Week ${+d3.timeFormat('%-U')(d)}`; }) .attr('x', d => { return +weekScale(+d3.timeFormat('%W')(d)); }) .attr('y', label_padding / 2) .on('mouseenter', weekday => { if (calendarHeatmap.in_transition) { return; } items .selectAll('.item-block-month') .transition() .duration(transition_duration) .ease(d3.easeBackIn) .style('opacity', d => { return +d3.timeWeek(d.date) === +d3.timeWeek(weekday) ? 1 : 0.1; }); }) .on('mouseout', () => { if (calendarHeatmap.in_transition) { return; } items .selectAll('.item-block-month') .transition() .duration(transition_duration) .ease(d3.easeBackIn) .style('opacity', 1); }) .on('click', d => { if (calendarHeatmap.in_transition) { return; } // Check week data const week_data = calendarHeatmap.data.filter(e => { return +d3.timeWeek(d) <= +e.date && +e.date < d3.timeWeek.offset(d, 1); }); // mutable _week_data = week_data; // Don't transition if there is no data to show if (!week_data.length) { return; } calendarHeatmap.in_transition = true; // Set selected month to the one clicked on calendarHeatmap.selected = { date: d }; // Hide tooltip calendarHeatmap.hideTooltip(); // Remove all year overview related items and labels calendarHeatmap.removeMonthView(); // Redraw the chart calendarHeatmap.overview = 'week'; drawChart(); }); AddDayLabels() .on('mouseenter', d => { if (calendarHeatmap.in_transition) { return; } const selected_day = d; items .selectAll('.item-block-month') .transition() .duration(transition_duration) .ease(d3.easeBackIn) .style('opacity', d => { return +d.date.getDay() === +selected_day.getDay() ? 1 : 0.1; }); }) .on('mouseout', () => { if (calendarHeatmap.in_transition) { return; } items .selectAll('.item-block-month') .transition() .duration(transition_duration) .ease(d3.easeBackIn) .style('opacity', 1); }); calendarHeatmap.drawButton(); }32:T24f6,function drawGlobalView() { manageHistory(); // Define start and end of the dataset const start = d3.timeYear(calendarHeatmap.data[0].date); const end = d3.timeSecond.offset( d3.timeYear.ceil( new Date(calendarHeatmap.data[calendarHeatmap.data.length - 1].date) ), -1 ); // Define array of years and total values const year_data = d3.timeYears(start, end).map(d => { const date = d; return { date: date, total: calendarHeatmap.data.reduce((prev, current) => { if (current.date.getFullYear() === date.getFullYear()) { prev += current.total; } return prev; }, 0), summary: (() => { const summary = calendarHeatmap.data.reduce((summary, d) => { if (d.date.getFullYear() === date.getFullYear()) { for (let i = 0; i < d.summary.length; i++) { if (!summary[d.summary[i].name]) { summary[d.summary[i].name] = { value: d.summary[i].value }; } else { summary[d.summary[i].name].value += d.summary[i].value; } } } return summary; }, {}); const unsorted_summary = Object.keys(summary).map(key => { return { name: key, value: summary[key].value }; }); return unsorted_summary.sort((a, b) => { return b.value - a.value; }); })() }; }); // Calculate max value of all the years in the dataset const max_value = d3.max(year_data, d => { return d.total; }); // Define year labels and axis const year_labels = d3.timeYears(start, end).map(d => { return d; }); const yearScale = d3 .scaleBand() .rangeRound([0, width]) .padding([0.05]) .domain( year_labels.map(d => { return d.getFullYear(); }) ); // Add global data items to the overview items.selectAll('.item-block-year').remove(); const item_block = items .selectAll('.item-block-year') .data(year_data) .enter() .append('rect') .attr('class', 'item item-block-year') .attr('width', () => { return (width - label_padding) / year_labels.length - gutter * 5; }) .attr('height', () => { return height - label_padding; }) .attr('transform', d => { return `translate(${yearScale(d.date.getFullYear())},${tooltip_padding * 2})`; }) .attr('fill', d => { const color = d3 .scaleLinear() .range(['#ffffff', calendarHeatmap.color || '#ff4500']) .domain([-0.15 * max_value, max_value]); return color(d.total) || '#ff4500'; }) .on('click', d => { if (calendarHeatmap.in_transition) { return; } // Set in_transition flag calendarHeatmap.in_transition = true; // Set selected date to the one clicked on calendarHeatmap.selected = d; // Hide tooltip calendarHeatmap.hideTooltip(); // Remove all global overview related items and labels calendarHeatmap.removeGlobalView(); // Redraw the chart calendarHeatmap.overview = 'year'; drawChart(); }) .style('opacity', 0) /////////////////////////////////////////// /////////////////////////////////////////// /////////////////////////////////////////// /////////////////////////////////////////// /////////////////////////////////////////// /////////////////////////////////////////// /////////////////////////////////////////// /////////////////////////////////////////// /////////////////////////////////////////// /////////////////////////////////////////// .on('mouseover', function(d) { globalMouseOver(this, d, yearScale); }) /////////////////////////////////////////// /////////////////////////////////////////// /////////////////////////////////////////// /////////////////////////////////////////// /////////////////////////////////////////// /////////////////////////////////////////// /////////////////////////////////////////// /////////////////////////////////////////// /////////////////////////////////////////// /////////////////////////////////////////// /////////////////////////////////////////// .on('mouseout', () => { if (calendarHeatmap.in_transition) { return; } calendarHeatmap.hideTooltip(); }) .transition() .delay((d, i) => { return (transition_duration * (i + 1)) / 10; }) .duration(() => { return transition_duration; }) .ease(d3.easeLinear) .style('opacity', 1) .call( (transition, callback) => { if (transition.empty()) { callback(); } let n = 0; transition .each(() => { ++n; }) .on('end', function(...args) { if (!--n) { callback.apply(this, args); } }); }, () => { calendarHeatmap.in_transition = false; } ); // Add year labels labels.selectAll('.label-year').remove(); labels .selectAll('.label-year') .data(year_labels) .enter() .append('text') .attr('class', 'label label-year') .attr('font-size', () => { return `${Math.floor(label_padding / 3)}px`; }) .text(d => { return d.getFullYear(); }) .attr('x', d => { return yearScale(d.getFullYear()); }) .attr('y', label_padding / 2) .on('mouseenter', year_label => { if (calendarHeatmap.in_transition) { return; } items .selectAll('.item-block-year') .transition() .duration(transition_duration) .ease(d3.easeLinear) .style('opacity', d => { return d.date.getFullYear() === year_label.getFullYear() ? 1 : 0.1; }); }) .on('mouseout', () => { if (calendarHeatmap.in_transition) { return; } items .selectAll('.item-block-year') .transition() .duration(transition_duration) .ease(d3.easeLinear) .style('opacity', 1); }) .on('click', d => { if (calendarHeatmap.in_transition) { return; } // Set in_transition flag calendarHeatmap.in_transition = true; // Set selected year to the one clicked on calendarHeatmap.selected = { date: d }; // Hide tooltip calendarHeatmap.hideTooltip(); // Remove all global overview related items and labels calendarHeatmap.removeGlobalView(); // Redraw the chart calendarHeatmap.overview = 'year'; drawChart(); }); calendarHeatmap.hideButton(); function globalMouseOver(g, d, yearScale) { if (calendarHeatmap.in_transition) { return; } // Construct tooltip let tooltip_html = ''; tooltip_html += '

Total time tracked:'; const sec = parseInt(d.total, 10); const days = Math.floor(sec / 86400); if (days > 0) { tooltip_html += `${ days === 1 ? '1 day' : `${days} days` }

`; } const hours = Math.floor((sec - days * 86400) / 3600); if (hours > 0) { if (days > 0) { tooltip_html += `

${ hours === 1 ? '1 hour' : `${hours} hours` }

`; } else { tooltip_html += `${ hours === 1 ? '1 hour' : `${hours} hours` }`; } } const minutes = Math.floor((sec - days * 86400 - hours * 3600) / 60); if (minutes > 0) { if (days > 0 || hours > 0) { tooltip_html += `

${ minutes === 1 ? '1 minute' : `${minutes} minutes` }

`; } else { tooltip_html += `${ minutes === 1 ? '1 minute' : `${minutes} minutes` }`; } } tooltip_html += '
'; // Add summary to the tooltip if (d.summary.length <= 5) { for (var i = 0; i < d.summary.length; i++) { tooltip_html += `

${d.summary[i].name}`; tooltip_html += `${calendarHeatmap.formatTime( d.summary[i].value )}

`; } } else { for (var i = 0; i < 5; i++) { tooltip_html += `

${d.summary[i].name}`; tooltip_html += `${calendarHeatmap.formatTime( d.summary[i].value )}

`; } tooltip_html += '
'; let other_projects_sum = 0; for (var i = 5; i < d.summary.length; i++) { other_projects_sum = +d.summary[i].value; } tooltip_html += '

Other:'; tooltip_html += `${calendarHeatmap.formatTime( other_projects_sum )}

`; } // Calculate tooltip position let x = yearScale(d.date.getFullYear()) + tooltip_padding; while (width - x < tooltip_width + tooltip_padding * 5) { x -= 10; } const y = +d3.select(g).attr('height') + tooltip_padding; // Show tooltip tooltip .html(tooltip_html) .style('left', `${x}px`) .style('top', `${y}px`) .transition() .duration(transition_duration / 2) .ease(d3.easeLinear) .style('opacity', 1); } }33:T2759,function drawYearView() { manageHistory(); const [start_of_year, end_of_year] = getStartEndTimes('timeYear'); const year_data = getFilteredData(start_of_year, end_of_year); // Calculate max value of the year data const max_value = d3.max(year_data, d => { return d.total; }); ////////////////////////////////// let color = colorScale(max_value), colorPast = colorPastScale(max_value), colorToday = colorTodayScale(max_value); ////////////////////////////////// let calcItemX = d => getItemX(d, start_of_year); const calcItemY = d => getItemY(d); const calcItemSize = d => { if (max_value <= 0) { return item_size; } //return item_size * 0.75 + (item_size * d.total / max_value) * 0.25; return item_size * 0.95; }; items.selectAll('.item-circle').remove(); items .selectAll('.item-circle') .data(year_data) .enter() .append('rect') .attr('class', 'item item-circle') .style('opacity', 0) .attr('x', d => { return calcItemX(d) + (item_size - calcItemSize(d)) / 2; }) .attr('y', d => { return calcItemY(d) + (item_size - calcItemSize(d)) / 2; }) .attr('rx', function(d) { return calcItemSize(d); }) .attr('ry', function(d) { return calcItemSize(d); }) .attr('width', d => { return calcItemSize(d); }) .attr('height', d => { return calcItemSize(d); }) .attr('stroke', d => { if (+d3.timeDay(new Date()) === +d.date) { return '#232323'; } else { return 'transparent'; } }) .attr('fill', d => { //return (d.total > 0) ? color(d.total) : 'transparent'; let clr = '#996633'; if (d.total <= 0) { } else { if (+d3.timeDay(new Date()) === +d.date) { clr = colorToday(d.total); } else { const dat = +d.date; if (dat < now) { clr = colorPast(d.total); } else { clr = color(d.total); } } } return clr; }) .on('click', d => { if (calendarHeatmap.in_transition) { return; } // Don't transition if there is no data to show if (d.total === 0) { return; } calendarHeatmap.in_transition = true; // Set selected date to the one clicked on calendarHeatmap.selected = d; // Hide tooltip calendarHeatmap.hideTooltip(); // Remove all year overview related items and labels calendarHeatmap.removeYearView(); // Redraw the chart calendarHeatmap.overview = 'day'; drawChart(); }) .on('mouseover', function(d) { if (calendarHeatmap.in_transition) { return; } // Pulsating animation let circle = d3.select(this); (function repeat() { circle = circle .transition() .duration(transition_duration) .ease(d3.easeLinear) .attr('x', d => { return calcItemX(d) - (item_size * 1.1 - item_size) / 2; }) .attr('y', d => { return calcItemY(d) - (item_size * 1.1 - item_size) / 2; }) .attr('width', item_size * 1.1) .attr('height', item_size * 1.1) .transition() .duration(transition_duration) .ease(d3.easeLinear) .attr('x', d => { return calcItemX(d) + (item_size - calcItemSize(d)) / 2; }) .attr('y', d => { return calcItemY(d) + (item_size - calcItemSize(d)) / 2; }) .attr('width', d => { return calcItemSize(d); }) .attr('height', d => { return calcItemSize(d); }) .on('end', repeat); })(); // Construct tooltip let tooltip_html = `

on ${d3.timeFormat('%A, %b %d %Y')(d.date)}

${d.summary .map( each => `

${each.name} ${calendarHeatmap.formatTime(each.value)}

` ) .join('')}`; let transform = d3.select(this); mutable temp = transform; // Calculate tooltip position let x = +d3.select(this).attr('x') + item_size; if (width - x < tooltip_width + tooltip_padding * 3) { x -= tooltip_width + tooltip_padding * 2; } const y = +d3.select(this).attr('y') + item_size; // this.getBoundingClientRect().top + item_size; // +d3.select(this).attr('height') + item_size; // // Show tooltip tooltip .html(tooltip_html) .style('left', `${x}px`) .style('top', `${y}px`) .transition() .duration(transition_duration / 2) .ease(d3.easeLinear) .style('opacity', 1); }) .on('mouseout', function() { if (calendarHeatmap.in_transition) { return; } // Set circle radius back to what it's supposed to be d3.select(this) .transition() .duration(transition_duration / 2) .ease(d3.easeLinear) .attr('x', d => { return calcItemX(d) + (item_size - calcItemSize(d)) / 2; }) .attr('y', d => { return calcItemY(d) + (item_size - calcItemSize(d)) / 2; }) .attr('width', d => { return calcItemSize(d); }) .attr('height', d => { return calcItemSize(d); }); // Hide tooltip calendarHeatmap.hideTooltip(); }) .transition() .delay(() => { return (Math.cos(Math.PI * Math.random()) + 1) * transition_duration; }) .duration(() => { return transition_duration; }) .ease(d3.easeLinear) .style('opacity', 1) .call(transitionCallback); /////************************************************************ /////************************************************************ /////************************************************************ /////************************************************************ /////************************************************************ // Add month labels const month_labels = d3.timeMonths( d3.timeYear(new Date()), d3.timeYear.ceil(new Date()) ); const monthScale = d3 .scaleLinear() .range([label_padding, width]) .domain([0, month_labels.length]); labels.selectAll('.label-month').remove(); labels .selectAll('.label-month') .data(month_labels) .join('text') .attr('class', 'label label-month') .attr('font-size', () => { return `${Math.floor(label_padding / 3)}px`; }) .text(d => { return d3.timeFormat('%b')(d); //d.toLocaleDateString('en-us', { month: 'short' }); }) .attr('x', (d, i) => { return monthScale(i) + (monthScale(i) - monthScale(i - 1)) / 2; }) .attr('y', label_padding / 2) .on('mouseenter', d => { if (calendarHeatmap.in_transition) { return; } const selected_month = d; items .selectAll('.item-circle') .transition() .duration(transition_duration) .ease(d3.easeLinear) .style('opacity', d => { mutable temp2 = { selected_month, d }; return selected_month.getMonth() === d.date.getMonth() ? 1 : 0.1; }); }) .on('mouseout', () => { if (calendarHeatmap.in_transition) { return; } items .selectAll('.item-circle') .transition() .duration(transition_duration) .ease(d3.easeLinear) .style('opacity', 1); }) .on('click', d => { if (calendarHeatmap.in_transition) { return; } // Check month data const month_data = calendarHeatmap.data.filter(e => { return ( +d3.timeMonth(d) <= +e.date && +e.date < +d3.timeSecond.offset(d3.timeMonth.offset(d, 1), -1) ); }); // mutable temp = { monthData: month_data }; // Don't transition if there is no data to show if (!month_data.length) { return; } // Set selected month to the one clicked on calendarHeatmap.selected = { date: d }; calendarHeatmap.in_transition = true; // Hide tooltip calendarHeatmap.hideTooltip(); // Remove all year overview related items and labels calendarHeatmap.removeYearView(); // Redraw the chart calendarHeatmap.overview = 'month'; drawChart(); }); // Add day labels labels.selectAll('.label-day').remove(); labels .selectAll('.label-day') .data(day_labels) .enter() .append('text') .attr('class', 'label label-day') .attr('x', label_padding / 3) .attr('y', (d, i) => { return dayScale(i) + dayScale.bandwidth() / 1.75; }) .style('text-anchor', 'left') .attr('font-size', () => { return `${Math.floor(label_padding / 3)}px`; }) .text(d => { return d3.timeFormat('%A')(d)[0]; }) .on('pointermove', function(d, i) { if (calendarHeatmap.in_transition) { return; } const selected_day = d; items .selectAll('.item-circle') .transition() .duration(transition_duration) .ease(d3.easeLinear) .style('opacity', d => { return +d.date.getDay() === +selected_day.getDay() ? 1 : 0.1; // return +d3.timeDay(d.date) === +d3.timeDay(selected_day) ? 1 : 0.1; }); }) .on('mouseout', () => { if (calendarHeatmap.in_transition) { return; } items .selectAll('.item-circle') .transition() .duration(transition_duration) .ease(d3.easeLinear) .style('opacity', 1); }); // Add button to switch back to previous overview calendarHeatmap.drawButton(); function AddMonthLabels() {} }34:Ta1c,function AddMonthLabels() { // Add month labels const month_labels = d3.timeMonths( d3.timeYear(new Date()), d3.timeYear.ceil(new Date()) ); const monthScale = d3 .scaleLinear() .range([0, width]) .domain([0, month_labels.length]); labels.selectAll('.label-month').remove(); labels .selectAll('.label-month') .data(month_labels) .enter() .append('text') .attr('class', 'label label-month') .attr('font-size', () => { return `${Math.floor(label_padding / 3)}px`; }) .text(d => { return d3.timeFormat('%b')(d); //d.toLocaleDateString('en-us', { month: 'short' }); }) .attr('x', (d, i) => { return monthScale(i) + (monthScale(i) - monthScale(i - 1)) / 2; }) .attr('y', label_padding / 2) .on('mouseenter', d => { if (calendarHeatmap.in_transition) { return; } const selected_month = d; items .selectAll('.item-circle') .transition() .duration(transition_duration) .ease(d3.easeLinear) .style('opacity', d => { mutable temp = { selected_month, d }; return +d3.timeMonth(selected_month) === +d3.timeMonth(d.date) ? 1 : 0.1; }); }) .on('mouseout', () => { if (calendarHeatmap.in_transition) { return; } items .selectAll('.item-circle') .transition() .duration(transition_duration) .ease(d3.easeLinear) .style('opacity', 1); }) .on('click', d => { if (calendarHeatmap.in_transition) { return; } // Check month data const month_data = calendarHeatmap.data.filter(e => { return ( +d3.timeMonth(d) <= +e.date && +e.date < +d3.timeSecond.offset(d3.timeMonth.offset(d, 1), -1) ); }); // mutable temp = { monthData: month_data }; // Don't transition if there is no data to show if (!month_data.length) { return; } // Set selected month to the one clicked on calendarHeatmap.selected = { date: d }; calendarHeatmap.in_transition = true; // Hide tooltip calendarHeatmap.hideTooltip(); // Remove all year overview related items and labels calendarHeatmap.removeYearView(); // Redraw the chart calendarHeatmap.overview = 'month'; drawChart(); }); }35:T484,AddWeekLabels = () => function AddWeekLabels(scale, labels, selector, ease) { // Add week labels labels.selectAll('.label-week').remove(); return labels .selectAll('.label-week') .data(labels) .enter() .append('text') .attr('class', 'label label-week') .attr('font-size', () => `${Math.floor(label_padding / 3)}px`) .text(d => `Week ${d3.timeFormat('%U')(d)}`) .attr('x', d => scale(+d3.timeFormat('%U')(d))) .attr('y', d => label_padding / 2) .on('mouseenter', weekday => { if (calendarHeatmap.in_transition) { return; } items .selectAll(selector) .transition() .duration(transition_duration) .ease() .style('opacity', d => +d3.timeWeek(d.date) === +d3.timeWeek(weekday) ? 1 : 0.1 ); }) .on('mouseout', () => { if (calendarHeatmap.in_transition) { return; } items .selectAll(selector) .transition() .duration(transition_duration) .ease(ease) .style('opacity', 1); }); }36:T206c,function drawWeekView() { manageHistory(); const [start_of_week, end_of_week] = getStartEndTimes('timeWeek'); let week_data = getFilteredData(start_of_week, end_of_week); const max_value = d3.max(week_data, d => { return d3.max(d.summary, d => { return d.value; }); }); const dayScale = d3 .scaleBand() .rangeRound([label_padding, height]) .domain( day_labels.map(d => { return +d.getDay(); }) ); // Define week labels and axis const week_labels = [start_of_week]; const weekScale = d3 .scaleBand() .rangeRound([label_padding, width], 0.01) .domain( week_labels.map(week => { return +d3.timeFormat('%W')(week); }) ); // Add week data items to the overview items.selectAll('.item-block-week').remove(); const item_block = items .selectAll('.item-block-week') .data(week_data) .enter() .append('g') .attr('class', 'item item-block-week') .attr('width', () => { return (width - label_padding) / week_labels.length - gutter * 5; }) .attr('height', () => { return Math.min(dayScale.bandwidth(), max_block_height); }) .attr('transform', d => { return `translate( ${weekScale(+d3.timeFormat('%W')(d3.timeWeek(d.date)))}, ${dayScale(+d.date.getDay()) + dayScale.bandwidth() / 1.75 - 15} )`; }) .attr('total', d => { return d.total; }) .attr('date', d => { return d.date; }) .attr('offset', 0) .on('click', d => { if (calendarHeatmap.in_transition) { return; } // Don't transition if there is no data to show if (d.total === 0) { return; } calendarHeatmap.in_transition = true; // Set selected date to the one clicked on calendarHeatmap.selected = d; // Hide tooltip calendarHeatmap.hideTooltip(); // Remove all week overview related items and labels calendarHeatmap.removeWeekView(); // Redraw the chart calendarHeatmap.overview = 'day'; drawChart(); }); const item_width = (width - label_padding) / week_labels.length - gutter * 5; const itemScale = d3.scaleLinear().rangeRound([0, item_width]); item_block .selectAll('.item-block-rect') .data(d => { return d.summary; }) .enter() .append('rect') .attr('class', 'item item-block-rect') .attr('x', function(d) { const total = parseInt(d3.select(this.parentNode).attr('total')); const offset = parseInt(d3.select(this.parentNode).attr('offset')); itemScale.domain([0, total]); d3.select(this.parentNode).attr('offset', offset + itemScale(d.value)); return offset; }) .attr('width', function(d) { const total = parseInt(d3.select(this.parentNode).attr('total')); itemScale.domain([0, total]); return Math.max(itemScale(d.value) - item_gutter, 1); }) .attr('height', () => { return Math.min(dayScale.bandwidth(), max_block_height); }) .attr('fill', d => { const color = d3 .scaleLinear() .range(['#ffffff', calendarHeatmap.color || '#ff4500']) .domain([-0.15 * max_value, max_value]); return color(d.value) || '#ff4500'; }) .style('opacity', 0) .on('mouseover', function(d) { if (calendarHeatmap.in_transition) { return; } // Get date from the parent node const date = new Date(d3.select(this.parentNode).attr('date')); // Construct tooltip let tooltip_html = `

${ d.value ? calendarHeatmap.formatTime(d.value) : 'No time' } tracked

on ${d3.timeFormat('%A, %b %d %y')(date)}

`; // Calculate tooltip position const total = parseInt(d3.select(this.parentNode).attr('total')); itemScale.domain([0, total]); let x = parseInt(d3.select(this).attr('x')) + itemScale(d.value) / 4 + tooltip_width / 4; while (width - x < tooltip_width + tooltip_padding * 3) { x -= 10; } const y = dayScale(+date.getDay()) + tooltip_padding * 1.5; // Show tooltip tooltip .html(tooltip_html) .style('left', `${x}px`) .style('top', `${y}px`) .transition() .duration(transition_duration / 2) .ease(d3.easeBackIn) .style('opacity', 1); }) .on('mouseout', () => { if (calendarHeatmap.in_transition) { return; } calendarHeatmap.hideTooltip(); }) .transition() .delay(() => { return (Math.cos(Math.PI * Math.random()) + 1) * transition_duration; }) .duration(() => { return transition_duration; }) .ease(d3.easeBackIn) .style('opacity', 1) .call(transitionCallback); // Add week labels labels.selectAll('.label-week').remove(); labels .selectAll('.label-week') .data(week_labels) .enter() .append('text') .attr('class', 'label label-week') .attr('font-size', () => { return `${Math.floor(label_padding / 3)}px`; }) .text(d => { return `Week ${+d3.timeFormat('%-U')(d)}`; }) .attr('x', d => { return +weekScale(+d3.timeFormat('%U')(d)); }) .attr('y', label_padding / 2) .on('mouseenter', weekday => { if (calendarHeatmap.in_transition) { return; } items .selectAll('.item-block-month') .transition() .duration(transition_duration) .ease(d3.easeBackIn) .style('opacity', d => { return d3.timeWeek(d.date) === d3.timeWeek(weekday) ? 1 : 0.1; }); }) .on('mouseout', () => { if (calendarHeatmap.in_transition) { return; } items .selectAll('.item-block-month') .transition() .duration(transition_duration) .ease(d3.easeBackIn) .style('opacity', 1); }) .on('click', d => { if (calendarHeatmap.in_transition) { return; } // Check week data const week_data = calendarHeatmap.data.filter(e => { return +d3.timeWeek(d) <= +e.date && +e.date < d3.timeWeek.offset(d, 1); }); // mutable _week_data = week_data; // Don't transition if there is no data to show if (!week_data.length) { return; } calendarHeatmap.in_transition = true; // Set selected month to the one clicked on calendarHeatmap.selected = { date: d }; // Hide tooltip calendarHeatmap.hideTooltip(); // Remove all year overview related items and labels calendarHeatmap.removeMonthView(); // Redraw the chart calendarHeatmap.overview = 'week'; drawChart(); }); // // // // // // // // // // Add day labels AddDayLabels() .on('mouseenter', d => { if (calendarHeatmap.in_transition) { return; } const selected_day = d; items .selectAll('.item-block-week') .transition() .duration(transition_duration) .ease(d3.easeBackIn) .style('opacity', d => { return +d.date.getDay() === +selected_day.getDay() ? 1 : 0.1; }); }) .on('mouseout', () => { if (calendarHeatmap.in_transition) { return; } items .selectAll('.item-block-week') .transition() .duration(transition_duration) .ease(d3.easeBackIn) .style('opacity', 1); }); // // // // // // // // // // // // // // // // // AddWeekLabels(weekScale, week_labels, '.item-block-week', d3.easeBackIn); // AddWeekdayLabels('.item-block-week', d3.easeBackIn); // Add button to switch back to year overview calendarHeatmap.drawButton(); }37:T1622,function drawDayView() { manageHistory(); // Initialize selected date to today if it was not set if (!Object.keys(calendarHeatmap.selected).length) { calendarHeatmap.selected = calendarHeatmap.data[calendarHeatmap.data.length - 1]; } const project_labels = calendarHeatmap.selected.summary.map(project => { return project.name; }); const projectScale = d3 .scaleBand() .rangeRound([label_padding, height]) .domain(project_labels); const itemScale = d3 .scaleTime() .range([label_padding * 2, width]) .domain([ d3.timeDay(calendarHeatmap.selected.date), d3.timeDay.offset(calendarHeatmap.selected.date, 1) ]); items.selectAll('.item-block').remove(); items .selectAll('.item-block') .data(calendarHeatmap.selected.details) .join('rect') .attr('class', 'item item-block') .attr('x', d => { return itemScale(d.date); }) .attr('y', d => { return projectScale(d.name) + projectScale.bandwidth() / 2 - 15; }) .attr('width', d => { const end = itemScale(d3.timeSecond.offset(d.date, d.value)); return Math.max(end - itemScale(d.date), 1); }) .attr('height', () => { return Math.min(projectScale.bandwidth(), max_block_height); }) .attr('fill', () => { return calendarHeatmap.color || '#ff4500'; }) .style('opacity', 0) .on('mouseover', function(d) { ////********************************************* ////********************************************* ////********************************************* ////********************************************* ////********************************************* ////********************************************* ////********************************************* ////********************************************* ///******************************************** dayMouseOver(this, d, itemScale, projectScale); ////********************************************* ////********************************************* ////********************************************* ////********************************************* ////********************************************* ////********************************************* ////********************************************* ////********************************************* ////********************************************* ////********************************************* ////********************************************* ////********************************************* ////********************************************* ////********************************************* ////********************************************* }) .on('mouseout', function(d) { if (calendarHeatmap.in_transition) { return; } calendarHeatmap.hideTooltip(); }) .on('click', function(d) { if ( !!calendarHeatmap.handler && typeof calendarHeatmap.handler == 'function' ) { calendarHeatmap.handler(d); } }) .transition() .delay(() => { return (Math.cos(Math.PI * Math.random()) + 1) * transition_duration; }) .duration(() => { return transition_duration; }) .ease(d3.easeBackIn) .style('opacity', 0.5) .call(transitionCallback); const timeScale = d3 .scaleTime() .range([label_padding * 2, width]) .domain([ d3.timeDay(calendarHeatmap.selected.date), d3.timeSecond.offset( d3.timeDay.offset(calendarHeatmap.selected.date, 1), -1 ) ]); labels.selectAll('.label').remove(); labels .selectAll('.x-axis-top') .data(['x-axis-top']) .join('g') .attr('class', d => d) .call(AxisTop, timeScale); // Add time labels // const timeLabels = d3.timeHours( // d3.timeDay(calendarHeatmap.selected.date), // d3.timeSecond.offset( // d3.timeDay.offset(calendarHeatmap.selected.date, 1), // -1 // ) // ); // labels.selectAll('.label-time').remove(); // labels // .selectAll('.label-time') // .data(timeLabels) // .enter() // .append('text') // .attr('class', 'label label-time') // .attr('font-size', () => { // return `${Math.floor(label_padding / 3)}px`; // }) // .text(d => d3.timeFormat('%-I%p')(d)) // .attr('x', (d, i) => { // return timeScale(i); // }) // .attr('y', label_padding / 2) // .on('mouseenter', d => { // if (calendarHeatmap.in_transition) { // return; // } // const selected = itemScale(d); // items // .selectAll('.item-block') // .transition() // .duration(transition_duration) // .ease(d3.easeBackIn) // .style('opacity', d => { // const start = itemScale(d.date); // const end = itemScale(d3.timeSecond.offset(d.date, d.value)); // return +selected >= +start && +selected <= +end ? 1 : 0.1; // }); // }) // .on('mouseout', () => { // if (calendarHeatmap.in_transition) { // return; // } // items // .selectAll('.item-block') // .transition() // .duration(transition_duration) // .ease(d3.easeBackIn) // .style('opacity', 0.5); // }); AddCategoryLabel(project_labels, projectScale, '.item-block', d3.easeBackIn); // Add button to switch back to year overview calendarHeatmap.drawButton(); }38:T606,function AddCategoryLabel(categories, scale, selector, ease) { // Add project labels labels.selectAll('.label-project').remove(); labels .selectAll('.label-project') .data(categories) .enter() .append('text') .attr('class', 'label label-project') .attr('x', gutter) .attr('y', d => { return scale(d) + scale.bandwidth() / 2; }) .attr('min-height', () => { return scale.bandwidth(); }) .style('text-anchor', 'left') .attr('font-size', () => { return `${Math.floor(label_padding / 3)}px`; }) .text(d => { return d; }) .each(function() { const obj = d3.select(this); let text_length = obj.node().getComputedTextLength(); let text = obj.text(); while (text_length > label_padding * 1.5 && text.length > 0) { text = text.slice(0, -1); obj.text(`${text}...`); text_length = obj.node().getComputedTextLength(); } }) .on('mouseenter', project => { if (calendarHeatmap.in_transition) { return; } items .selectAll(selector) .transition() .duration(transition_duration) .ease(ease) .style('opacity', d => { return d.name === project ? 1 : 0.1; }); }) .on('mouseout', () => { if (calendarHeatmap.in_transition) { return; } items .selectAll(selector) .transition() .duration(transition_duration) .ease(ease) .style('opacity', 0.5); }); }39:T63a,function drawButton() { buttons.selectAll('.button').remove(); const button = buttons .append('g') .attr('class', 'button button-back') .style('opacity', 0) .on('click', () => { if (calendarHeatmap.in_transition) { return; } // Set transition boolean calendarHeatmap.in_transition = true; // Clean the canvas from whichever overview type was on if (calendarHeatmap.overview === 'year') { calendarHeatmap.removeYearView(); } else if (calendarHeatmap.overview === 'month') { calendarHeatmap.removeMonthView(); } else if (calendarHeatmap.overview === 'week') { calendarHeatmap.removeWeekView(); } else if (calendarHeatmap.overview === 'day') { calendarHeatmap.removeDayView(); } // Redraw the chart calendarHeatmap.history.pop(); calendarHeatmap.overview = calendarHeatmap.history.pop(); drawChart(); }); button .append('rect') .attr('rx', 5) .attr('ry', 5) .attr('height', 30) .attr('width', 40); button .append('path') .attr('d', 'M35 15h-30l10 10 l0 -20l-10 10') .attr('stroke', 'black') .style('fill', 'black'); // .attr('x', label_padding / 2.25) // .attr('y', label_padding / 2.75) // .attr('dy', () => { // return Math.floor(width / 100) / 2.5; // }) // .attr('font-size', () => { // return `${Math.floor(label_padding / 3)}px`; // }) // .html('←'); button .transition() .duration(transition_duration) .ease(d3.easeBackIn) .style('opacity', 1.0); }3a:T58d,GeneratedData = { //initialize random data var now = d3.timeSecond.offset(d3.timeDay.ceil(new Date()), -1); var eoy = d3.timeSecond.offset(d3.timeYear.ceil(new Date()), -1); var max_date = new Date(+eoy - (+d3.timeDay.ceil(new Date()) - +new Date())); var time_ago = d3.timeYear.offset(d3.timeDay(new Date()), -10); var example_data = d3 .timeDays(time_ago, max_date) .map(function(dateElement, index) { return { date: dateElement, details: Array.apply( null, new Array(Math.floor(Math.random() * 15)) ).map(function(e, i, arr) { return { name: Routes[~~(Math.random() * Routes.length)], date: (function() { var projectDate = new Date(dateElement.getTime()); projectDate.setHours(Math.floor(Math.random() * 24)); projectDate.setMinutes(Math.floor(Math.random() * 60)); return projectDate; })(), value: 3600 * ((arr.length - i) / 5) + Math.floor(Math.random() * 3600) * Math.round(Math.random() * (index / 365)) }; }), init: function() { this.total = this.details.reduce(function(prev, e) { return prev + e.value; }, 0); return this; } }.init(); }); generateSummary(example_data); return example_data; }3b:T53f,styles = html``3c:[] 2e:{"title":"Multi Calendar","cells":[{"id":562,"value":"md`# Multi Calendar`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4140,"value":"//removed moment.js","pinned":true,"hidden":false,"mode":"ojs"},{"id":2535,"value":"viewof nav = {\n let view = html``;\n view.value = d3.select(view);\n return view;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":874,"value":"viewof calendarHeatmap = {\n RESET;\n let view = html`\n

`;\n //

\n\n // init(, viewof calendarHeatmap.id, COLOR, 'global')\n\n let data = GeneratedData,\n container = view.id,\n color =\n turboColorScheme[Math.round(Math.random() * turboColorScheme.length) - 1],\n overview = 'month',\n history = ['global', 'year'],\n selected = { date: d3.timeDay(new Date()) },\n // Set handler function\n handler = () => {},\n // No transition to start with\n in_transition = false;\n\n view.value = {\n data,\n container,\n color,\n overview,\n history,\n selected,\n handler,\n in_transition\n };\n yield view;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3991,"value":"Refresh = {\n let DT = d3\n .select(viewof calendarHeatmap)\n .append('h2')\n .style('position', 'absolute')\n .style('bottom', 0)\n .style('right', 0)\n .style('font-size', width / 20 + 'px')\n .style('opacity', 0.2);\n let dateFormatting = d3.timeFormat('%A, %-d %b %Y');\n let date = calendarHeatmap.selected.date;\n let shortFormat = d3.timeFormat('%Y-%m-%-d');\n DT.text(dateFormatting(date));\n yield `Today is ${shortFormat(date)}`;\n while (true) {\n if (+date !== +calendarHeatmap.selected.date) {\n date = calendarHeatmap.selected.date;\n DT.text(dateFormatting(date));\n yield `${shortFormat(date)}`;\n }\n await Promises.delay(1000);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2181,"value":"viewof RESET = html`