fake-your-git-history.js

fake.js

let currentColor = '#ebedf0';
let clicking = false; 
const boxes = document.querySelectorAll('.js-calendar-graph-svg rect');
const graph = document.querySelector('.js-calendar-graph-svg');
// code for switching the current color

function handleColorChange(e) {
  const el = e.currentTarget;
  currentColor = el.style['background-color'];
  console.log(currentColor)
}

function handlePointerEnter(e) {
  const rect = e.currentTarget;
  if(clicking) {
    rect.setAttribute('fill', currentColor)
  }
}

boxes.forEach(box => box.addEventListener('pointermove', handlePointerEnter))
boxes.forEach(box => box.addEventListener('pointerup', handlePointerEnter))

document.querySelectorAll('.legend li').forEach(li => li.addEventListener('click', handleColorChange))

graph.addEventListener('pointerup', () => {clicking = false});
graph.addEventListener('pointerdown', () => {clicking = true});
graph.addEventListener('pointerleave', () => {clicking = false});

hey forked and added 1 line so that when you click on a date it doesnt "shade" the rest of the boxes (undoing some of your hard work! )

https://gist.github.com/mybundletv/69446faff894802d198c560f98bea728