jingrow/charts
1
0
Fork 0
Code Pull Requests Activity

[fix] percentage tooltip

Browse Source
This commit is contained in:
Prateeksha Singh 2018-03-05 16:49:32 +05:30
parent fb61523b1a
commit 21238c9c8e
13 changed files with 121 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

111
dist/frappe-charts.esm.js vendored
View File

@ -89,10 +89,10 @@ class SvgTip {
}) { }) {
this.parent = parent; this.parent = parent;
this.colors = colors; this.colors = colors;
this.title_name = ''; this.titleName = '';
this.title_value = ''; this.titleValue = '';
this.list_values = []; this.listValues = [];
this.title_value_first = 0; this.titleValueFirst = 0;
this.x = 0; this.x = 0;
this.y = 0; this.y = 0;
@ -104,16 +104,16 @@ class SvgTip {
} }
setup() { setup() {
this.make_tooltip(); this.makeTooltip();
} }
refresh() { refresh() {
this.fill(); this.fill();
this.calc_position(); this.calcPosition();
// this.show_tip(); // this.showTip();
} }
make_tooltip() { makeTooltip() {
this.container = $.create('div', { this.container = $.create('div', {
inside: this.parent, inside: this.parent,
className: 'graph-svg-tip comparison', className: 'graph-svg-tip comparison',
@ -121,27 +121,27 @@ class SvgTip {
<ul class="data-point-list"></ul> <ul class="data-point-list"></ul>
<div class="svg-pointer"></div>` <div class="svg-pointer"></div>`
}); });
this.hide_tip(); this.hideTip();
this.title = this.container.querySelector('.title'); this.title = this.container.querySelector('.title');
this.data_point_list = this.container.querySelector('.data-point-list'); this.dataPointList = this.container.querySelector('.data-point-list');
this.parent.addEventListener('mouseleave', () => { this.parent.addEventListener('mouseleave', () => {
this.hide_tip(); this.hideTip();
}); });
} }
fill() { fill() {
let title; let title;
if(this.title_value_first) { if(this.titleValueFirst) {
title = `<strong>${this.title_value}</strong>${this.title_name}`; title = `<strong>${this.titleValue}</strong>${this.titleName}`;
} else { } else {
title = `${this.title_name}<strong>${this.title_value}</strong>`; title = `${this.titleName}<strong>${this.titleValue}</strong>`;
} }
this.title.innerHTML = title; this.title.innerHTML = title;
this.data_point_list.innerHTML = ''; this.dataPointList.innerHTML = '';
this.list_values.map((set, i) => { this.listValues.map((set, i) => {
const color = this.colors[i] || 'black'; const color = this.colors[i] || 'black';
let li = $.create('li', { let li = $.create('li', {
@ -152,50 +152,50 @@ class SvgTip {
${set.title ? set.title : '' }` ${set.title ? set.title : '' }`
}); });
this.data_point_list.appendChild(li); this.dataPointList.appendChild(li);
}); });
} }
calc_position() { calcPosition() {
let width = this.container.offsetWidth; let width = this.container.offsetWidth;
this.top = this.y - this.container.offsetHeight; this.top = this.y - this.container.offsetHeight;
this.left = this.x - width/2; this.left = this.x - width/2;
let max_left = this.parent.offsetWidth - width; let maxLeft = this.parent.offsetWidth - width;
let pointer = this.container.querySelector('.svg-pointer'); let pointer = this.container.querySelector('.svg-pointer');
if(this.left < 0) { if(this.left < 0) {
pointer.style.left = `calc(50% - ${-1 * this.left}px)`; pointer.style.left = `calc(50% - ${-1 * this.left}px)`;
this.left = 0; this.left = 0;
} else if(this.left > max_left) { } else if(this.left > maxLeft) {
let delta = this.left - max_left; let delta = this.left - maxLeft;
let pointer_offset = `calc(50% + ${delta}px)`; let pointerOffset = `calc(50% + ${delta}px)`;
pointer.style.left = pointer_offset; pointer.style.left = pointerOffset;
this.left = max_left; this.left = maxLeft;
} else { } else {
pointer.style.left = `50%`; pointer.style.left = `50%`;
} }
} }
set_values(x, y, title_name = '', title_value = '', list_values = [], title_value_first = 0) { setValues(x, y, titleName = '', titleValue = '', listValues = [], titleValueFirst = 0) {
this.title_name = title_name; this.titleName = titleName;
this.title_value = title_value; this.titleValue = titleValue;
this.list_values = list_values; this.listValues = listValues;
this.x = x; this.x = x;
this.y = y; this.y = y;
this.title_value_first = title_value_first; this.titleValueFirst = titleValueFirst;
this.refresh(); this.refresh();
} }
hide_tip() { hideTip() {
this.container.style.top = '0px'; this.container.style.top = '0px';
this.container.style.left = '0px'; this.container.style.left = '0px';
this.container.style.opacity = '0'; this.container.style.opacity = '0';
} }
show_tip() { showTip() {
this.container.style.top = this.top + 'px'; this.container.style.top = this.top + 'px';
this.container.style.left = this.left + 'px'; this.container.style.left = this.left + 'px';
this.container.style.opacity = '1'; this.container.style.opacity = '1';
@ -1440,10 +1440,10 @@ class AggregationChart extends BaseChart {
this.colors[maxSlices-1] = 'grey'; this.colors[maxSlices-1] = 'grey';
} }
this.labels = []; s.labels = [];
totals.map(d => { totals.map(d => {
s.sliceTotals.push(d[0]); s.sliceTotals.push(d[0]);
this.labels.push(d[1]); s.labels.push(d[1]);
}); });
} }
@ -1457,7 +1457,7 @@ class AggregationChart extends BaseChart {
this.legendTotals = s.sliceTotals.slice(0, this.config.maxLegendPoints); this.legendTotals = s.sliceTotals.slice(0, this.config.maxLegendPoints);
let x_values = this.formatted_labels && this.formatted_labels.length > 0 let x_values = this.formatted_labels && this.formatted_labels.length > 0
? this.formatted_labels : this.labels; ? this.formatted_labels : s.labels;
this.legendTotals.map((d, i) => { this.legendTotals.map((d, i) => {
if(d) { if(d) {
let stats = $.create('div', { let stats = $.create('div', {
@ -1513,6 +1513,7 @@ class PercentageChart extends AggregationChart {
s.sliceTotals.map((total, i) => { s.sliceTotals.map((total, i) => {
let slice = $.create('div', { let slice = $.create('div', {
className: `progress-bar`, className: `progress-bar`,
'data-index': i,
inside: this.percentageBar, inside: this.percentageBar,
styles: { styles: {
background: this.colors[i], background: this.colors[i],
@ -1524,21 +1525,25 @@ class PercentageChart extends AggregationChart {
} }
bindTooltip() { bindTooltip() {
let s = this.state;
// this.slices.map((slice, i) => {
// slice.addEventListener('mouseenter', () => {
// let g_off = getOffset(this.chartWrapper), p_off = getOffset(slice);
// let x = p_off.left - g_off.left + slice.offsetWidth/2; this.chartWrapper.addEventListener('mousemove', (e) => {
// let y = p_off.top - g_off.top - 6; let slice = e.target;
// let title = (this.formatted_labels && this.formatted_labels.length>0 if(slice.classList.contains('progress-bar')) {
// ? this.formatted_labels[i] : this.labels[i]) + ': ';
// let percent = (s.sliceTotals[i]*100/this.grand_total).toFixed(1);
// this.tip.set_values(x, y, title, percent + "%"); let i = slice.getAttribute('data-index');
// this.tip.show_tip(); let g_off = getOffset(this.chartWrapper), p_off = getOffset(slice);
// });
// }); let x = p_off.left - g_off.left + slice.offsetWidth/2;
let y = p_off.top - g_off.top - 6;
let title = (this.formatted_labels && this.formatted_labels.length>0
? this.formatted_labels[i] : this.state.labels[i]) + ': ';
let percent = (s.sliceTotals[i]*100/this.grand_total).toFixed(1);
this.tip.setValues(x, y, title, percent + "%");
this.tip.showTip();
}
});
} }
} }
@ -1639,7 +1644,7 @@ class PieChart extends AggregationChart {
let x = e.pageX - g_off.left + 10; let x = e.pageX - g_off.left + 10;
let y = e.pageY - g_off.top - 10; let y = e.pageY - g_off.top - 10;
let title = (this.formatted_labels && this.formatted_labels.length > 0 let title = (this.formatted_labels && this.formatted_labels.length > 0
? this.formatted_labels[i] : this.labels[i]) + ': '; ? this.formatted_labels[i] : this.state.labels[i]) + ': ';
let percent = (this.state.sliceTotals[i]*100/this.grand_total).toFixed(1); let percent = (this.state.sliceTotals[i]*100/this.grand_total).toFixed(1);
this.tip.set_values(x, y, title, percent + "%"); this.tip.set_values(x, y, title, percent + "%");
this.tip.show_tip(); this.tip.show_tip();
@ -2160,8 +2165,8 @@ class Heatmap extends BaseChart {
let value = count + ' ' + this.count_label; let value = count + ' ' + this.count_label;
let name = ' on ' + month + ' ' + date_parts[0] + ', ' + date_parts[2]; let name = ' on ' + month + ' ' + date_parts[0] + ', ' + date_parts[2];
this.tip.set_values(x, y, name, value, [], 1); this.tip.setValues(x, y, name, value, [], 1);
this.tip.show_tip(); this.tip.showTip();
}); });
}); });
} }
@ -2978,7 +2983,7 @@ class AxisChart extends BaseChart {
if(relY < this.height + this.translateY * 2) { if(relY < this.height + this.translateY * 2) {
this.mapTooltipXPosition(relX); this.mapTooltipXPosition(relX);
} else { } else {
this.tip.hide_tip(); this.tip.hideTip();
} }
}); });
} }
@ -3009,8 +3014,8 @@ class AxisChart extends BaseChart {
}; };
}); });
this.tip.set_values(x, y, titles[i], '', values); this.tip.setValues(x, y, titles[i], '', values);
this.tip.show_tip(); this.tip.showTip();
break; break;
} }
} }

2
dist/frappe-charts.min.cjs.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/frappe-charts.min.esm.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/frappe-charts.min.iife.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/frappe-charts.min.iife.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
docs/assets/js/frappe-charts.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
docs/assets/js/frappe-charts.min.js.map
View File

File diff suppressed because one or more lines are too long

6
src/js/charts/AggregationChart.js
View File

@ -40,10 +40,10 @@ export default class AggregationChart extends BaseChart {
this.colors[maxSlices-1] = 'grey'; this.colors[maxSlices-1] = 'grey';
} }
this.labels = []; s.labels = [];
totals.map(d => { totals.map(d => {
s.sliceTotals.push(d[0]); s.sliceTotals.push(d[0]);
this.labels.push(d[1]); s.labels.push(d[1]);
}); });
} }
@ -57,7 +57,7 @@ export default class AggregationChart extends BaseChart {
this.legendTotals = s.sliceTotals.slice(0, this.config.maxLegendPoints); this.legendTotals = s.sliceTotals.slice(0, this.config.maxLegendPoints);
let x_values = this.formatted_labels && this.formatted_labels.length > 0 let x_values = this.formatted_labels && this.formatted_labels.length > 0
? this.formatted_labels : this.labels; ? this.formatted_labels : s.labels;
this.legendTotals.map((d, i) => { this.legendTotals.map((d, i) => {
if(d) { if(d) {
let stats = $.create('div', { let stats = $.create('div', {

6
src/js/charts/AxisChart.js
View File

@ -345,7 +345,7 @@ export default class AxisChart extends BaseChart {
if(relY < this.height + this.translateY * 2) { if(relY < this.height + this.translateY * 2) {
this.mapTooltipXPosition(relX); this.mapTooltipXPosition(relX);
} else { } else {
this.tip.hide_tip(); this.tip.hideTip();
} }
}); });
} }
@ -376,8 +376,8 @@ export default class AxisChart extends BaseChart {
}; };
}); });
this.tip.set_values(x, y, titles[i], '', values); this.tip.setValues(x, y, titles[i], '', values);
this.tip.show_tip(); this.tip.showTip();
break; break;
} }
} }

4
src/js/charts/Heatmap.js
View File

@ -245,8 +245,8 @@ export default class Heatmap extends BaseChart {
let value = count + ' ' + this.count_label; let value = count + ' ' + this.count_label;
let name = ' on ' + month + ' ' + date_parts[0] + ', ' + date_parts[2]; let name = ' on ' + month + ' ' + date_parts[0] + ', ' + date_parts[2];
this.tip.set_values(x, y, name, value, [], 1); this.tip.setValues(x, y, name, value, [], 1);
this.tip.show_tip(); this.tip.showTip();
}); });
}); });
} }

29
src/js/charts/PercentageChart.js
View File

@ -40,6 +40,7 @@ export default class PercentageChart extends AggregationChart {
s.sliceTotals.map((total, i) => { s.sliceTotals.map((total, i) => {
let slice = $.create('div', { let slice = $.create('div', {
className: `progress-bar`, className: `progress-bar`,
'data-index': i,
inside: this.percentageBar, inside: this.percentageBar,
styles: { styles: {
background: this.colors[i], background: this.colors[i],
@ -52,19 +53,23 @@ export default class PercentageChart extends AggregationChart {
bindTooltip() { bindTooltip() {
let s = this.state; let s = this.state;
// this.slices.map((slice, i) => {
// slice.addEventListener('mouseenter', () => {
// let g_off = getOffset(this.chartWrapper), p_off = getOffset(slice);
// let x = p_off.left - g_off.left + slice.offsetWidth/2; this.chartWrapper.addEventListener('mousemove', (e) => {
// let y = p_off.top - g_off.top - 6; let slice = e.target;
// let title = (this.formatted_labels && this.formatted_labels.length>0 if(slice.classList.contains('progress-bar')) {
// ? this.formatted_labels[i] : this.labels[i]) + ': ';
// let percent = (s.sliceTotals[i]*100/this.grand_total).toFixed(1);
// this.tip.set_values(x, y, title, percent + "%"); let i = slice.getAttribute('data-index');
// this.tip.show_tip(); let g_off = getOffset(this.chartWrapper), p_off = getOffset(slice);
// });
// }); let x = p_off.left - g_off.left + slice.offsetWidth/2;
let y = p_off.top - g_off.top - 6;
let title = (this.formatted_labels && this.formatted_labels.length>0
? this.formatted_labels[i] : this.state.labels[i]) + ': ';
let percent = (s.sliceTotals[i]*100/this.grand_total).toFixed(1);
this.tip.setValues(x, y, title, percent + "%");
this.tip.showTip();
}
});
} }
} }

2
src/js/charts/PieChart.js
View File

@ -103,7 +103,7 @@ export default class PieChart extends AggregationChart {
let x = e.pageX - g_off.left + 10; let x = e.pageX - g_off.left + 10;
let y = e.pageY - g_off.top - 10; let y = e.pageY - g_off.top - 10;
let title = (this.formatted_labels && this.formatted_labels.length > 0 let title = (this.formatted_labels && this.formatted_labels.length > 0
? this.formatted_labels[i] : this.labels[i]) + ': '; ? this.formatted_labels[i] : this.state.labels[i]) + ': ';
let percent = (this.state.sliceTotals[i]*100/this.grand_total).toFixed(1); let percent = (this.state.sliceTotals[i]*100/this.grand_total).toFixed(1);
this.tip.set_values(x, y, title, percent + "%"); this.tip.set_values(x, y, title, percent + "%");
this.tip.show_tip(); this.tip.show_tip();

62
src/js/objects/SvgTip.js
View File

@ -7,10 +7,10 @@ export default class SvgTip {
}) { }) {
this.parent = parent; this.parent = parent;
this.colors = colors; this.colors = colors;
this.title_name = ''; this.titleName = '';
this.title_value = ''; this.titleValue = '';
this.list_values = []; this.listValues = [];
this.title_value_first = 0; this.titleValueFirst = 0;
this.x = 0; this.x = 0;
this.y = 0; this.y = 0;
@ -22,16 +22,16 @@ export default class SvgTip {
} }
setup() { setup() {
this.make_tooltip(); this.makeTooltip();
} }
refresh() { refresh() {
this.fill(); this.fill();
this.calc_position(); this.calcPosition();
// this.show_tip(); // this.showTip();
} }
make_tooltip() { makeTooltip() {
this.container = $.create('div', { this.container = $.create('div', {
inside: this.parent, inside: this.parent,
className: 'graph-svg-tip comparison', className: 'graph-svg-tip comparison',
@ -39,27 +39,27 @@ export default class SvgTip {
<ul class="data-point-list"></ul> <ul class="data-point-list"></ul>
<div class="svg-pointer"></div>` <div class="svg-pointer"></div>`
}); });
this.hide_tip(); this.hideTip();
this.title = this.container.querySelector('.title'); this.title = this.container.querySelector('.title');
this.data_point_list = this.container.querySelector('.data-point-list'); this.dataPointList = this.container.querySelector('.data-point-list');
this.parent.addEventListener('mouseleave', () => { this.parent.addEventListener('mouseleave', () => {
this.hide_tip(); this.hideTip();
}); });
} }
fill() { fill() {
let title; let title;
if(this.title_value_first) { if(this.titleValueFirst) {
title = `<strong>${this.title_value}</strong>${this.title_name}`; title = `<strong>${this.titleValue}</strong>${this.titleName}`;
} else { } else {
title = `${this.title_name}<strong>${this.title_value}</strong>`; title = `${this.titleName}<strong>${this.titleValue}</strong>`;
} }
this.title.innerHTML = title; this.title.innerHTML = title;
this.data_point_list.innerHTML = ''; this.dataPointList.innerHTML = '';
this.list_values.map((set, i) => { this.listValues.map((set, i) => {
const color = this.colors[i] || 'black'; const color = this.colors[i] || 'black';
let li = $.create('li', { let li = $.create('li', {
@ -70,50 +70,50 @@ export default class SvgTip {
${set.title ? set.title : '' }` ${set.title ? set.title : '' }`
}); });
this.data_point_list.appendChild(li); this.dataPointList.appendChild(li);
}); });
} }
calc_position() { calcPosition() {
let width = this.container.offsetWidth; let width = this.container.offsetWidth;
this.top = this.y - this.container.offsetHeight; this.top = this.y - this.container.offsetHeight;
this.left = this.x - width/2; this.left = this.x - width/2;
let max_left = this.parent.offsetWidth - width; let maxLeft = this.parent.offsetWidth - width;
let pointer = this.container.querySelector('.svg-pointer'); let pointer = this.container.querySelector('.svg-pointer');
if(this.left < 0) { if(this.left < 0) {
pointer.style.left = `calc(50% - ${-1 * this.left}px)`; pointer.style.left = `calc(50% - ${-1 * this.left}px)`;
this.left = 0; this.left = 0;
} else if(this.left > max_left) { } else if(this.left > maxLeft) {
let delta = this.left - max_left; let delta = this.left - maxLeft;
let pointer_offset = `calc(50% + ${delta}px)`; let pointerOffset = `calc(50% + ${delta}px)`;
pointer.style.left = pointer_offset; pointer.style.left = pointerOffset;
this.left = max_left; this.left = maxLeft;
} else { } else {
pointer.style.left = `50%`; pointer.style.left = `50%`;
} }
} }
set_values(x, y, title_name = '', title_value = '', list_values = [], title_value_first = 0) { setValues(x, y, titleName = '', titleValue = '', listValues = [], titleValueFirst = 0) {
this.title_name = title_name; this.titleName = titleName;
this.title_value = title_value; this.titleValue = titleValue;
this.list_values = list_values; this.listValues = listValues;
this.x = x; this.x = x;
this.y = y; this.y = y;
this.title_value_first = title_value_first; this.titleValueFirst = titleValueFirst;
this.refresh(); this.refresh();
} }
hide_tip() { hideTip() {
this.container.style.top = '0px'; this.container.style.top = '0px';
this.container.style.left = '0px'; this.container.style.left = '0px';
this.container.style.opacity = '0'; this.container.style.opacity = '0';
} }
show_tip() { showTip() {
this.container.style.top = this.top + 'px'; this.container.style.top = this.top + 'px';
this.container.style.left = this.left + 'px'; this.container.style.left = this.left + 'px';
this.container.style.opacity = '1'; this.container.style.opacity = '1';