yearView = d => { mutable selected = d; // const [start_of_year, end_of_year] = getStartEndTimes(d, '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 => (max_value <= 0 ? item_size : item_size * 0.95); // items.selectAll('.item-task').remove(); // items // .selectAll('.item-task') // .data(year_data) // .enter() // .append('rect') // .attr('class', 'item item-task') // .style('opacity', 0) // .attr('x', d => calcItemX(d) + (item_size - calcItemSize(d)) / 2) // .attr('y', d => calcItemY(d) + (item_size - calcItemSize(d)) / 2) // .attr('rx', d => calcItemSize(d)) // .attr('ry', d => calcItemSize(d)) // .attr('width', d => calcItemSize(d)) // .attr('height', d => calcItemSize(d)) // .attr('stroke', d => // +d3.timeDay(new Date()) === +d.date ? '#232323' : 'transparent' // ) // .attr('fill', d => { // 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)} // //

` // )}`; // // 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; // // 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([0, 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', () => `${Math.floor(label_padding / 3)}px`) // .text(d => d3.timeFormat('%b')(d)) // .attr( // 'x', // (d, i) => 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', () => // calendarHeatmap.in_transition // ? null // : 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', () => `${Math.floor(label_padding / 3)}px`) // .text(d => d3.timeFormat('%A')(d)[0]) // .on('mouseenter', d => // calendarHeatmap.in_transition // ? null // : items // .selectAll('.item-circle') // .transition() // .duration(transition_duration) // .ease(d3.easeLinear) // .style('opacity', item => // +d3.timeDay(item.date) === +d3.timeDay(d) ? 1 : 0.1 // ) // ) // .on('mouseout', () => // calendarHeatmap.in_transition // ? null // : items // .selectAll('.item-circle') // .transition() // .duration(transition_duration) // .ease(d3.easeLinear) // .style('opacity', 1) // ); // // Add button to switch back to previous overview // calendarHeatmap.drawButton(); }