add github halloween colors demo to docs :D

docs/assets/js/index.js

@@ -385,13 +385,61 @@ Array.prototype.slice.call(
 			discrete_domains = 1;
 		}
 
+		let colors = [];
+		let colors_mode = document
+			.querySelector('.heatmap-color-buttons .active')
+			.getAttribute('data-color');
+		if(colors_mode === 'halloween') {
+			colors = ['#ebedf0', '#fdf436', '#ffc700', '#ff9100', '#06001c'];
+		}
+
+		new Chart({
+			parent: "#chart-heatmap",
+			data: heatmap_data,
+			type: 'heatmap',
+			legend_scale: [0, 1, 2, 4, 5],
+			height: 115,
+			discrete_domains: discrete_domains,
+			legend_colors: colors
+		});
+
+		Array.prototype.slice.call(
+			btn.parentNode.querySelectorAll('button')).map(el => {
+			el.classList.remove('active');
+		});
+		btn.classList.add('active');
+	});
+});
+
+Array.prototype.slice.call(
+	document.querySelectorAll('.heatmap-color-buttons button')
+).map(el => {
+	el.addEventListener('click', (e) => {
+		let btn = e.target;
+		let colors_mode = btn.getAttribute('data-color');
+		let colors = [];
+
+		if(colors_mode === 'halloween') {
+			colors = ['#ebedf0', '#fdf436', '#ffc700', '#ff9100', '#06001c'];
+		}
+
+		let discrete_domains = 1;
+
+		let view_mode = document
+			.querySelector('.heatmap-mode-buttons .active')
+			.getAttribute('data-mode');
+		if(view_mode === 'continuous') {
+			discrete_domains = 0;
+		}
+
 		new Chart({
 			parent: "#chart-heatmap",
 			data: heatmap_data,
 			type: 'heatmap',
 			legend_scale: [0, 1, 2, 4, 5],
 			height: 115,
-			discrete_domains: discrete_domains
+			discrete_domains: discrete_domains,
+			legend_colors: colors
 		});
 
 		Array.prototype.slice.call(

docs/index.html

@@ -235,6 +235,10 @@
                 <button type="button" class="btn btn-sm btn-secondary active" data-mode="discrete">Discrete</button>
                 <button type="button" class="btn btn-sm btn-secondary" data-mode="continuous">Continuous</button>
               </div>
+              <div class="heatmap-color-buttons btn-group mt-1 mx-auto" role="group">
+                <button type="button" class="btn btn-sm btn-secondary active" data-color="default">Default green</button>
+                <button type="button" class="btn btn-sm btn-secondary" data-color="halloween">GitHub's Halloween</button>
+              </div>
               <pre><code class="hljs javascript margin-vertical-px">  let heatmap = new Chart({
     parent: "#heatmap",
     type: 'heatmap',
@@ -248,9 +252,9 @@
                   // default: today's date in past year
                   //          for an annual heatmap
 
-    legend_colors: ['#ebedf0', '#c6e48b', '#7bc96f', '#239a3b', '#196127'],
+    legend_colors: ['#ebedf0', '#fdf436', '#ffc700', '#ff9100', '#06001c'],
                   // Set of five incremental colors,
-                  // beginning with a muted color for zero data;
+                  // beginning with a low-saturation color for zero data;
                   // default: ['#ebedf0', '#c6e48b', '#7bc96f', '#239a3b', '#196127']
 
   });</code></pre>