jingrow/charts
1
0
Fork 0
Code Pull Requests Activity

add github halloween colors demo to docs :D

Browse Source
This commit is contained in:
pratu16x7 2017-11-12 23:04:43 +05:30
parent ed17f74325
commit f957084320
2 changed files with 55 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
docs/assets/js/index.js
View File

@ -385,13 +385,61 @@ Array.prototype.slice.call(
discrete_domains = 1; 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({ new Chart({
parent: "#chart-heatmap", parent: "#chart-heatmap",
data: heatmap_data, data: heatmap_data,
type: 'heatmap', type: 'heatmap',
legend_scale: [0, 1, 2, 4, 5], legend_scale: [0, 1, 2, 4, 5],
height: 115, height: 115,
discrete_domains: discrete_domains 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,
legend_colors: colors
}); });
Array.prototype.slice.call( Array.prototype.slice.call(

8
docs/index.html
View File

@ -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 active" data-mode="discrete">Discrete</button>
<button type="button" class="btn btn-sm btn-secondary" data-mode="continuous">Continuous</button> <button type="button" class="btn btn-sm btn-secondary" data-mode="continuous">Continuous</button>
</div> </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({ <pre><code class="hljs javascript margin-vertical-px"> let heatmap = new Chart({
parent: "#heatmap", parent: "#heatmap",
type: 'heatmap', type: 'heatmap',
@ -248,9 +252,9 @@
// default: today's date in past year // default: today's date in past year
// for an annual heatmap // for an annual heatmap
legend_colors: ['#ebedf0', '#c6e48b', '#7bc96f', '#239a3b', '#196127'], legend_colors: ['#ebedf0', '#fdf436', '#ffc700', '#ff9100', '#06001c'],
// Set of five incremental colors, // 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'] // default: ['#ebedf0', '#c6e48b', '#7bc96f', '#239a3b', '#196127']
});</code></pre> });</code></pre>