jingrow/charts
1
0
Fork 0
Code Pull Requests Activity

add custom legend for heatmap

Browse Source
This commit is contained in:
IDDT 2017-11-07 22:03:59 +07:00 committed by pratu16x7
parent 1efedb3094
commit 03fc057a5d
3 changed files with 22 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -368,6 +368,7 @@ 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],
height: 115, height: 115,
discrete_domains: 1 // default 0 discrete_domains: 1 // default 0
}); });
@ -388,6 +389,7 @@ Array.prototype.slice.call(
parent: "#chart-heatmap", parent: "#chart-heatmap",
data: heatmap_data, data: heatmap_data,
type: 'heatmap', type: 'heatmap',
legend_scale: [0, 1, 2, 4, 5],
height: 115, height: 115,
discrete_domains: discrete_domains discrete_domains: discrete_domains
}); });

6
docs/index.html
View File

@ -238,6 +238,12 @@
<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",
data: heatmap_data, // object with date/timestamp-value pairs data: heatmap_data, // object with date/timestamp-value pairs
legend_colors: [ // optional
'#ebedf0', '#c6e48b', '#7bc96f', '#239a3b', '#196127'
],
legend_scale: [ // optional, calculated linearly if not provided
0, 1, 2, 4, 5 // starting values for each color
],
type: 'heatmap', type: 'heatmap',
height: 115, height: 115,
discrete_domains: 1 // default 0 discrete_domains: 1 // default 0

24
src/scripts/charts/Heatmap.js
View File

@ -9,7 +9,9 @@ export default class Heatmap extends BaseChart {
subdomain = '', subdomain = '',
data = {}, data = {},
discrete_domains = 0, discrete_domains = 0,
count_label = '' count_label = '',
legend_colors = null,
legend_scale = []
}) { }) {
super(arguments[0]); super(arguments[0]);
@ -22,9 +24,10 @@ export default class Heatmap extends BaseChart {
this.count_label = count_label; this.count_label = count_label;
let today = new Date(); let today = new Date();
this.start = start || add_days(today, 365); this.start = start || this.add_days(today, 365);
this.legend_colors = ['#ebedf0', '#c6e48b', '#7bc96f', '#239a3b', '#196127']; this.legend_colors = legend_colors || ['#ebedf0', '#c6e48b', '#7bc96f', '#239a3b', '#196127'];
this.legend_scale = legend_scale;
this.translate_x = 0; this.translate_x = 0;
this.setup(); this.setup();
@ -71,7 +74,13 @@ export default class Heatmap extends BaseChart {
setup_values() { setup_values() {
this.domain_label_group.textContent = ''; this.domain_label_group.textContent = '';
this.data_groups.textContent = ''; this.data_groups.textContent = '';
this.distribution = this.get_distribution(this.data, this.legend_colors);
if (this.legend_scale.length !== this.legend_colors.length) {
this.distribution = this.get_distribution(this.data, this.legend_colors);
} else {
this.distribution = this.legend_scale;
}
this.month_names = ["January", "February", "March", "April", "May", "June", this.month_names = ["January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December" "July", "August", "September", "October", "November", "December"
]; ];
@ -264,11 +273,6 @@ export default class Heatmap extends BaseChart {
} }
get_max_checkpoint(value, distribution) { get_max_checkpoint(value, distribution) {
return distribution.filter((d, i) => { return distribution.filter((d) => d <= value).length - 1;
if(i === 1) {
return distribution[0] < value;
}
return d <= value;
}).length - 1;
} }
} }