8000 Add custom legend for Heatmap chart. by IDDT · Pull Request #53 · frappe/charts · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Add custom legend for Heatmap chart. #53

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Nov 12, 2017
Merged

Add custom legend for Heatmap chart. #53

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
03fc057
add custom legend for heatmap
IDDT Nov 7, 2017
ed17f74
add and use distribution utils
pratu16x7 Nov 12, 2017
f957084
add github halloween colors demo to docs :D
pratu16x7 Nov 12, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
119 changes: 74 additions & 45 deletions dist/frappe-charts.min.cjs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -675,6 +675,29 @@ function runSVGAnimation(svg_container, elements) {
// //
// }

function calc_distribution(values, distribution_size) {
// Assume non-negative values,
// implying distribution minimum at zero

var data_max_value = Math.max.apply(Math, toConsumableArray(values));

var distribution_step = 1 / (distribution_size - 1);
var distribution = [];

for (var i = 0; i < distribution_size; i++) {
var checkpoint = data_max_value * (distribution_step * i);
distribution.push(checkpoint);
}

return distribution;
}

function get_max_checkpoint(value, distribution) {
return distribution.filter(function (d) {
return d < value;
}).length;
}

function calc_y_intervals(array) {
//*** Where the magic happens ***

Expand Down Expand Up @@ -2641,6 +2664,12 @@ function lighten_darken_color(col, amt) {
return (usePound ? "#" : "") + (g | b << 8 | r << 16).toString(16);
}

function is_valid_color(string) {
// https://stackoverflow.com/a/8027444/6495043
return (/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(string)
);
}

var ANGLE_RATIO = Math.PI / 180;
var FULL_ANGLE = 360;

Expand Down Expand Up @@ -2945,7 +2974,9 @@ var Heatmap = function (_BaseChart) {
_ref$discrete_domains = _ref.discrete_domains,
discrete_domains = _ref$discrete_domains === undefined ? 0 : _ref$discrete_domains,
_ref$count_label = _ref.count_label,
count_label = _ref$count_label === undefined ? '' : _ref$count_label;
count_label = _ref$count_label === undefined ? '' : _ref$count_label,
_ref$legend_colors = _ref.legend_colors,
legend_colors = _ref$legend_colors === undefined ? [] : _ref$legend_colors;
classCallCheck(this, Heatmap);

var _this = possibleConstructorReturn(this, (Heatmap.__proto__ || Object.getPrototypeOf(Heatmap)).call(this, arguments[0]));
Expand All @@ -2961,14 +2992,34 @@ var Heatmap = function (_BaseChart) {
var today = new Date();
_this.start = start || add_days(today, 365);

_this.legend_colors = ['#ebedf0', '#c6e48b', '#7bc96f', '#239a3b', '#196127'];
legend_colors = legend_colors.slice(0, 5);
_this.legend_colors = _this.validate_colors(legend_colors) ? legend_colors : ['#ebedf0', '#c6e48b', '#7bc96f', '#239a3b', '#196127'];

// Hardcoded for a fixed 5-color theme,
// More colors are difficult to parse visually
_this.distribution_size = 5;

_this.translate_x = 0;
_this.setup();
return _this;
}

createClass(Heatmap, [{
key: 'validate_colors',
value: function validate_colors(colors) {
if (colors.length < 5) return 0;

var valid = 1;
colors.forEach(function (string) {
if (!is_valid_color(string)) {
valid = 0;
console.warn('"' + string + '" is not a valid color.');
}
}, this);

return valid;
}
}, {
key: 'setup_base_values',
value: function setup_base_values() {
this.today = new Date();
Expand Down Expand Up @@ -3012,9 +3063,16 @@ var Heatmap = function (_BaseChart) {
}, {
key: 'setup_values',
value: function setup_values() {
var _this2 = this;

this.domain_label_group.textContent = '';
this.data_groups.textContent = '';
this.distribution = this.get_distribution(this.data, this.legend_colors);

var data_values = Object.keys(this.data).map(function (key) {
return _this2.data[key];
});
this.distribution = calc_distribution(data_values, this.distribution_size);

this.month_names = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

this.render_all_weeks_and_store_x_values(this.no_of_cols);
Expand Down Expand Up @@ -3081,12 +3139,14 @@ var Heatmap = function (_BaseChart) {

if (this.data[timestamp]) {
data_value = this.data[timestamp];
color_index = this.get_max_checkpoint(data_value, this.distribution);
}

if (this.data[Math.round(timestamp)]) {
data_value = this.data[Math.round(timestamp)];
color_index = this.get_max_checkpoint(data_value, this.distribution);
}

if (data_value) {
color_index = get_max_checkpoint(data_value, this.distribution);
}

var x = 13 + (index + week_col_change) * 12;
Expand Down Expand Up @@ -3124,7 +3184,7 @@ var Heatmap = function (_BaseChart) {
}, {
key: 'render_month_labels',
value: function render_month_labels() {
var _this2 = this;
var _this3 = this;

// this.first_month_label = 1;
// if (this.first_week_start.getDate() > 8) {
Expand All @@ -3146,11 +3206,11 @@ var Heatmap = function (_BaseChart) {
this.month_start_points.pop();

this.month_start_points.map(function (start, i) {
var month_name = _this2.month_names[_this2.months[i]].substring(0, 3);
var month_name = _this3.month_names[_this3.months[i]].substring(0, 3);

$.createSVG('text', {
className: 'y-value-text',
inside: _this2.domain_label_group,
inside: _this3.domain_label_group,
x: start + 12,
y: 10,
dy: '.32em',
Expand All @@ -3170,26 +3230,26 @@ var Heatmap = function (_BaseChart) {
}, {
key: 'bind_tooltip',
value: function bind_tooltip() {
var _this3 = this;
var _this4 = this;

Array.prototype.slice.call(document.querySelectorAll(".data-group .day")).map(function (el) {
el.addEventListener('mouseenter', function (e) {
var count = e.target.getAttribute('data-value');
var date_parts = e.target.getAttribute('data-date').split('-');

var month = _this3.month_names[parseInt(date_parts[1]) - 1].substring(0, 3);
var month = _this4.month_names[parseInt(date_parts[1]) - 1].substring(0, 3);

var g_off = _this3.chart_wrapper.getBoundingClientRect(),
var g_off = _this4.chart_wrapper.getBoundingClientRect(),
p_off = e.target.getBoundingClientRect();

var width = parseInt(e.target.getAttribute('width'));
var x = p_off.left - g_off.left + (width + 2) / 2;
var y = p_off.top - g_off.top - (width + 2) / 2;
var value = count + ' ' + _this3.count_label;
var value = count + ' ' + _this4.count_label;
var name = ' on ' + month + ' ' + date_parts[0] + ', ' + date_parts[2];

_this3.tip.set_values(x, y, name, value, [], 1);
_this3.tip.show_tip();
_this4.tip.set_values(x, y, name, value, [], 1);
_this4.tip.show_tip();
});
});
}
Expand All @@ -3200,37 +3260,6 @@ var Heatmap = function (_BaseChart) {
this.setup_values();
this.bind_tooltip();
}
}, {
key: 'get_distribution',
value: function get_distribution() {
var data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var mapper_array = arguments[1];

var data_values = Object.keys(data).map(function (key) {
return data[key];
});
var data_max_value = Math.max.apply(Math, toConsumableArray(data_values));

var distribution_step = 1 / (mapper_array.length - 1);
var distribution = [];

mapper_array.map(function (color, i) {
var checkpoint = data_max_value * (distribution_step * i);
distribution.push(checkpoint);
});

return distribution;
}
}, {
key: 'get_max_checkpoint',
value: function get_max_checkpoint(value, distribution) {
return distribution.filter(function (d, i) {
if (i === 1) {
return distribution[0] < value;
}
return d <= value;
}).length - 1;
}
}]);
return Heatmap;
}(BaseChart);
Expand Down
Loading
0