diff --git a/docs/assets/js/index.js b/docs/assets/js/index.js
index 16081e4..a4167d6 100755
--- a/docs/assets/js/index.js
+++ b/docs/assets/js/index.js
@@ -9,6 +9,7 @@ let bar_data = {
{
"color": "blue",
"values": [108048, 0, 0, 101500, 50000.88, 24010, 0, 0, 25840, 108048.82, 51682, 0],
+ // "values": [-108048, 0, 0, -101500, -50000.88, 24010, 0, 0, 25840, 108048.82, 51682, 0],
"formatted": ["₹ 0.00", "₹ 0.00", "₹ 0.00", "₹ 61,500.00", "₹ 82,936.88", "₹ 24,010.00", "₹ 0.00", "₹ 0.00", "₹ 25,840.00", "₹ 5,08,048.82", "₹ 1,16,820.00", "₹ 0.00"],
}
]
@@ -84,6 +85,8 @@ bar_chart.parent.addEventListener('data-select', (e) => {
console.log("chart", bar_chart);
+let heatmap_data = {}
+
// update_test() {
// setTimeout(() => {
// this.update_values([{values: [0, 0, 0, 21500, 50000.88, 24010, 0, 0, 25840, 108048.82, 516820, 0]},
diff --git a/src/charts.js b/src/charts.js
index 7305adc..329eac2 100644
--- a/src/charts.js
+++ b/src/charts.js
@@ -1,13 +1,13 @@
// specific_values = [
// {
-// name: "Average",
+// title: "Average",
// line_type: "dashed", // "dashed" or "solid"
// value: 10
// },
// summary = [
// {
-// name: "Total",
+// title: "Total",
// color: 'blue', // Indicator colors: 'grey', 'blue', 'red', 'green', 'orange',
// // 'purple', 'darkgrey', 'black', 'yellow', 'lightblue'
// value: 80
@@ -48,7 +48,6 @@ frappe.chart.FrappeChart = class {
}
this.parent = document.querySelector(parent);
-
this.title = title;
this.subtitle = subtitle;
@@ -108,7 +107,13 @@ frappe.chart.FrappeChart = class {
}
set_width() {
- this.base_width = this.parent.offsetWidth;
+ let special_values_width = 0;
+ this.specific_values.map(val => {
+ if(this.get_strwidth(val.title) > special_values_width) {
+ special_values_width = this.get_strwidth(val.title);
+ }
+ });
+ this.base_width = this.parent.offsetWidth - special_values_width;
this.width = this.base_width - this.translate_x * 2;
}
@@ -175,7 +180,7 @@ frappe.chart.FrappeChart = class {
this.summary.map(d => {
let stats = $$.create('div', {
className: 'stats',
- innerHTML: `${d.name}: ${d.value}`
+ innerHTML: `${d.title}: ${d.value}`
});
this.stats_wrapper.appendChild(stats);
});
@@ -288,11 +293,19 @@ frappe.chart.AxisChart = class AxisChart extends frappe.chart.FrappeChart {
this.x = this.data.labels;
this.y = this.data.datasets;
+ this.get_x_label = this.format_lambdas.x_label;
+ this.get_y_label = this.format_lambdas.y_label;
+ this.get_x_tooltip = this.format_lambdas.x_tooltip;
+ this.get_y_tooltip = this.format_lambdas.y_tooltip;
+
this.colors = ['lightblue', 'purple', 'blue', 'green', 'lightgreen',
'yellow', 'orange', 'red'];
}
setup_values() {
+ this.data.datasets.map(d => {
+ d.values = d.values.map(val => (!isNaN(val) ? val : 0));
+ });
this.setup_x();
this.setup_y();
}
@@ -468,8 +481,8 @@ frappe.chart.AxisChart = class AxisChart extends frappe.chart.FrappeChart {
let line = $$.createSVG('line', {
className: d.line_type === "dashed" ? "dashed": "",
x1: 0,
- x2: 0,
- y1: this.width,
+ x2: this.width,
+ y1: 0,
y2: 0
});
@@ -478,7 +491,7 @@ frappe.chart.AxisChart = class AxisChart extends frappe.chart.FrappeChart {
x: this.width + 5,
y: 0,
dy: '.32em',
- innerHTML: d.name.toUpperCase()
+ innerHTML: d.title.toUpperCase()
});
let specific_y_level = $$.createSVG('g', {
@@ -518,8 +531,8 @@ frappe.chart.AxisChart = class AxisChart extends frappe.chart.FrappeChart {
let x_val = this.x_axis_values[i];
// let delta = i === 0 ? this.avg_unit_width : x_val - this.x_axis_values[i-1];
if(relX > x_val - this.avg_unit_width/2) {
- let x = x_val + this.translate_x - 0.5;
- let y = this.y_min_tops[i] + this.translate_y + 4; // adjustment
+ let x = x_val + this.translate_x;
+ let y = this.y_min_tops[i] + this.translate_y;
let title = this.x.formatted && this.x.formatted.length>0
? this.x.formatted[i] : this.x[i];
@@ -564,12 +577,12 @@ frappe.chart.AxisChart = class AxisChart extends frappe.chart.FrappeChart {
// elements_to_animate = elements_to_animate.concat(this.update_y_axis());
let anim_svg = $$.runSVGAnimation(this.svg, elements_to_animate);
- this.chart_wrapper.innerHTML = '';
+ this.chart_wrapper.removeChild(this.svg);
this.chart_wrapper.appendChild(anim_svg);
// Replace the new svg (data has long been replaced)
setTimeout(() => {
- this.chart_wrapper.innerHTML = '';
+ this.chart_wrapper.removeChild(anim_svg);
this.chart_wrapper.appendChild(this.svg);
}, 250);
}
@@ -850,7 +863,7 @@ frappe.chart.PercentageChart = class PercentageChart extends frappe.chart.Frappe
part.addEventListener('mouseenter', () => {
let g_off = this.chart_wrapper.offset(), p_off = part.offset();
- let x = p_off.left - g_off.left + part.width()/2;
+ let x = p_off.left - g_off.left + part.offsetWidth/2;
let y = p_off.top - g_off.top - 6;
let title = (this.x.formatted && this.x.formatted.length>0
? this.x.formatted[i] : this.x[i]) + ': ';
@@ -891,6 +904,8 @@ frappe.chart.HeatMap = class HeatMap extends frappe.chart.FrappeChart {
}) {
super(arguments[0]);
+ this.type = 'heatmap';
+
this.domain = domain;
this.subdomain = subdomain;
this.start = start;
@@ -899,6 +914,8 @@ frappe.chart.HeatMap = class HeatMap extends frappe.chart.FrappeChart {
this.count_label = count_label;
this.legend_colors = ['#ebedf0', '#c6e48b', '#7bc96f', '#239a3b', '#196127'];
+
+ this.translate_x = 0;
this.setup();
}
@@ -937,6 +954,8 @@ frappe.chart.HeatMap = class HeatMap extends frappe.chart.FrappeChart {
}
setup_values() {
+ this.domain_label_group.textContent = '';
+ this.data_groups.textContent = '';
this.distribution = this.get_distribution(this.data, this.legend_colors);
this.month_names = ["January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"
@@ -1050,6 +1069,11 @@ frappe.chart.HeatMap = class HeatMap extends frappe.chart.FrappeChart {
// let last_month_start = this.month_start_points.pop();
// render last month if
+ this.months.shift();
+ this.month_start_points.shift();
+ this.months.pop();
+ this.month_start_points.pop();
+
this.month_start_points.map((start, i) => {
let month_name = this.month_names[this.months[i]].substring(0, 3);
@@ -1076,29 +1100,33 @@ frappe.chart.HeatMap = class HeatMap extends frappe.chart.FrappeChart {
}
bind_tooltip() {
- this.chart_wrapper.addEventListener('mouseenter', (e) => {
- let subdomain = $(e.target);
- let count = subdomain.attr('data-value');
- let date_parts = subdomain.attr('data-date').split('-');
+ Array.prototype.slice.call(
+ document.querySelectorAll(".data-group .day")
+ ).map(el => {
+ el.addEventListener('mouseenter', (e) => {
+ let count = e.target.getAttribute('data-value');
+ let date_parts = e.target.getAttribute('data-date').split('-');
- let month = this.month_names[parseInt(date_parts[1])-1].substring(0, 3);
+ let month = this.month_names[parseInt(date_parts[1])-1].substring(0, 3);
- let g_off = this.chart_wrapper.offset(), p_off = subdomain.offset();
+ let g_off = this.chart_wrapper.getBoundingClientRect(), p_off = e.target.getBoundingClientRect();
- let width = parseInt(subdomain.attr('width'));
- let x = p_off.left - g_off.left + (width+2)/2;
- let y = p_off.top - g_off.top - (width+2)/2;
- let value = count + ' ' + this.count_label;
- let name = ' on ' + month + ' ' + date_parts[0] + ', ' + date_parts[2];
+ let width = parseInt(e.target.getAttribute('width'));
+ let x = p_off.left - g_off.left + (width+2)/2;
+ let y = p_off.top - g_off.top - (width+2)/2;
+ let value = count + ' ' + this.count_label;
+ let name = ' on ' + month + ' ' + date_parts[0] + ', ' + date_parts[2];
- this.tip.set_values(x, y, name, value, [], 1);
- this.tip.show_tip();
+ this.tip.set_values(x, y, name, value, [], 1);
+ this.tip.show_tip();
+ });
});
}
update(data) {
this.data = data;
this.setup_values();
+ this.bind_tooltip();
}
get_distribution(data={}, mapper_array) {
@@ -1192,13 +1220,12 @@ frappe.chart.SvgTip = class {
make_tooltip() {
this.container = $$.create('div', {
+ inside: this.parent,
className: 'graph-svg-tip comparison',
innerHTML: `
`
});
-
- this.parent.appendChild(this.container);
this.hide_tip();
this.title = this.container.querySelector('.title');