Cal Heatmap Playground

by Renan Ribeiro Brando

HTML

<link rel="stylesheet" href="//cdn.jsdelivr.net/cal-heatmap/3.3.10/cal-heatmap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.js"></script>
<script src="//cdn.jsdelivr.net/cal-heatmap/3.3.10/cal-heatmap.min.js"></script>
<div id="cal-heatmap"></div>
<button id="previous">Previous</button>
<button id="next">Next</button>

CSS

.q3{fill:rgb(251, 128, 114);}
.q2{fill:rgb(255, 255, 179);}
.q1{fill:rgb(179, 222, 105);}
.q0{fill:rgb(217, 217, 217);}

JavaScript

var cal = new CalHeatMap();
var data = [
	{
  	date: 1542153600000,
    value: 40
  },
  {
  	date: new Date("2018-11-13").getTime(),
    value: 30
  },
  {
  	date: new Date(2018,1,1).getTime().toString(),
    value: 70
  },
  {
  	date: new Date("2018-11-11").getTime().toString(),
    value: 10
  },
  {
  	date: new Date("2018-11-10").getTime().toString(),
    value: 20
  },
  {
  	date: new Date("2018-11-09").getTime().toString(),
    value: 40
  }
];

var parser = function(data) {
	var stats = {};
	for (var d in data) {
		stats[data[d].date] = data[d].value;
	}
	return stats;
};

cal.init({
		start: new Date(2018, 1, 0),
		data: data,
    range: 12, 
    domain: "month",
    subDomain: "day",
    tooltip: true,
    domainGutter: 12,
    cellSize: 15,
    domainLabelFormat: function(date){
    			var dateLabel = "";
    			switch (date.getMonth()){
          	case 0:
                dateLabel = "Jan-" + date.getFullYear();
                break;
            case 1:
                dateLabel = "Fev-" + date.getFullYear();
                break;
            case 2:
                dateLabel = "Mar-" + date.getFullYear();
                break;
            case 3:
                dateLabel = "Abr-" + date.getFullYear();
                break;
            case 4:
                dateLabel = "Mai-" + date.getFullYear();
                break;
            case 5:
                dateLabel = "Jun-" + date.getFullYear();
                break;
            case 6:
                dateLabel = "Jul-" + date.getFullYear();
                break;
            case 7:
                dateLabel = "Ago-" + date.getFullYear();
                break;
            case 8:
                dateLabel = "Set-" + date.getFullYear();
                break;
            case 9:
                dateLabel = "Out-" + date.getFullYear();
                break;
            case 10:
                dateLabel = "Nov-" + date.getFullYear();
                break;
            case 11:
            ...