jingrow/charts
1
0
Fork 0
Code Pull Requests Activity

[fix] percentage tooltip

Browse Source
This commit is contained in:
Prateeksha Singh 2018-04-13 23:01:52 +05:30
parent cbb69089db
commit 7ccb2c5a54
8 changed files with 29 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -535,7 +535,7 @@ function percentageBar(x, y, width, height,
fill: fill, fill: fill,
styles: { styles: {
'stroke': lightenDarkenColor(fill, -25), 'stroke': lightenDarkenColor(fill, -25),
// Diabollically good: https://stackoverflow.com/a/9000859 // Diabolically good: https://stackoverflow.com/a/9000859
// https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray // https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray
'stroke-dasharray': `0, ${height + width}, ${width}, ${height}`, 'stroke-dasharray': `0, ${height + width}, ${width}, ${height}`,
'stroke-width': depth 'stroke-width': depth
@ -2082,23 +2082,25 @@ class PercentageChart extends AggregationChart {
}); });
} }
makeDataByIndex() { }
bindTooltip() { bindTooltip() {
let s = this.state; let s = this.state;
this.container.addEventListener('mousemove', (e) => { this.container.addEventListener('mousemove', (e) => {
let slice = e.target; let bars = this.components.get('percentageBars').store;
if(slice.classList.contains('progress-bar')) { let bar = e.target;
if(bars.includes(bar)) {
let i = slice.getAttribute('data-index'); let i = bars.indexOf(bar);
let gOff = getOffset(this.container), pOff = getOffset(slice); let gOff = getOffset(this.container), pOff = getOffset(bar);
let x = pOff.left - gOff.left + slice.offsetWidth/2; let x = pOff.left - gOff.left + parseInt(bar.getAttribute('width'))/2;
let y = pOff.top - gOff.top - 6; let y = pOff.top - gOff.top;
let title = (this.formattedLabels && this.formattedLabels.length>0 let title = (this.formattedLabels && this.formattedLabels.length>0
? this.formattedLabels[i] : this.state.labels[i]) + ': '; ? this.formattedLabels[i] : this.state.labels[i]) + ': ';
let percent = (s.sliceTotals[i]*100/this.grandTotal).toFixed(1); let fraction = s.sliceTotals[i]/s.grandTotal;
this.tip.setValues(x, y, {name: title, value: percent + "%"}); this.tip.setValues(x, y, {name: title, value: (fraction*100).toFixed(1) + "%"});
this.tip.showTip(); this.tip.showTip();
} }
}); });

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

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

@ -60,23 +60,25 @@ export default class PercentageChart extends AggregationChart {
}); });
} }
makeDataByIndex() { }
bindTooltip() { bindTooltip() {
let s = this.state; let s = this.state;
this.container.addEventListener('mousemove', (e) => { this.container.addEventListener('mousemove', (e) => {
let slice = e.target; let bars = this.components.get('percentageBars').store;
if(slice.classList.contains('progress-bar')) { let bar = e.target;
if(bars.includes(bar)) {
let i = slice.getAttribute('data-index'); let i = bars.indexOf(bar);
let gOff = getOffset(this.container), pOff = getOffset(slice); let gOff = getOffset(this.container), pOff = getOffset(bar);
let x = pOff.left - gOff.left + slice.offsetWidth/2; let x = pOff.left - gOff.left + parseInt(bar.getAttribute('width'))/2;
let y = pOff.top - gOff.top - 6; let y = pOff.top - gOff.top;
let title = (this.formattedLabels && this.formattedLabels.length>0 let title = (this.formattedLabels && this.formattedLabels.length>0
? this.formattedLabels[i] : this.state.labels[i]) + ': '; ? this.formattedLabels[i] : this.state.labels[i]) + ': ';
let percent = (s.sliceTotals[i]*100/this.grandTotal).toFixed(1); let fraction = s.sliceTotals[i]/s.grandTotal;
this.tip.setValues(x, y, {name: title, value: percent + "%"}); this.tip.setValues(x, y, {name: title, value: (fraction*100).toFixed(1) + "%"});
this.tip.showTip(); this.tip.showTip();
} }
}); });