jingrow/charts
1
0
Fork 0
Code Pull Requests Activity

feat: fixed funnel chart tooltip

Browse Source
This commit is contained in:
Shivam Mishra 2019-09-28 19:34:37 +05:30
parent fff25ecf4f
commit b099ffe1c9
1 changed files with 22 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/js/charts/FunnelChart.js
View File

@ -23,13 +23,13 @@ export default class FunnelChart extends AggregationChart {
// as height decreases, area decreases by the square of the reduction // as height decreases, area decreases by the square of the reduction
// hence, compensating by squaring the index value // hence, compensating by squaring the index value
const reducer = (accumulator, currentValue, index) => accumulator + currentValue * (Math.pow(index+1, 2)); const reducer = (accumulator, currentValue, index) => accumulator + currentValue;
const weightage = s.sliceTotals.reduce(reducer, 0.0); const weightage = s.sliceTotals.reduce(reducer, 0.0);
let slicePoints = []; let slicePoints = [];
let startPoint = [[0, 0], [FUNNEL_CHART_BASE_WIDTH, 0]] let startPoint = [[0, 0], [FUNNEL_CHART_BASE_WIDTH, 0]]
s.sliceTotals.forEach((d, i) => { s.sliceTotals.forEach((d, i) => {
let height = totalheight * d * Math.pow(i+1, 2) / weightage; let height = totalheight * d / weightage;
let endPoint = getEndpointsForTrapezoid(startPoint, height); let endPoint = getEndpointsForTrapezoid(startPoint, height);
slicePoints.push([startPoint, endPoint]); slicePoints.push([startPoint, endPoint]);
startPoint = endPoint; startPoint = endPoint;
@ -63,24 +63,27 @@ export default class FunnelChart extends AggregationChart {
makeDataByIndex() { } makeDataByIndex() { }
bindTooltip() { bindTooltip() {
// let s = this.state; function getPolygonWidth(slice) {
// this.container.addEventListener('mousemove', (e) => { const points = slice.points;
// let bars = this.components.get('percentageBars').store; return points[1].x - points[0].x
// let bar = e.target; }
// if(bars.includes(bar)) {
// let i = bars.indexOf(bar); let s = this.state;
// let gOff = getOffset(this.container), pOff = getOffset(bar); this.container.addEventListener('mousemove', (e) => {
let slices = this.components.get('funnelSlices').store;
let slice = e.target;
if(slices.includes(slice)) {
let i = slices.indexOf(slice);
// let x = pOff.left - gOff.left + parseInt(bar.getAttribute('width'))/2; let gOff = getOffset(this.container), pOff = getOffset(slice);
// let y = pOff.top - gOff.top; let x = pOff.left - gOff.left + getPolygonWidth(slice)/2;
// let title = (this.formattedLabels && this.formattedLabels.length>0 let y = pOff.top - gOff.top;
// ? this.formattedLabels[i] : this.state.labels[i]) + ': '; let title = (this.formatted_labels && this.formatted_labels.length > 0
// let fraction = s.sliceTotals[i]/s.grandTotal; ? this.formatted_labels[i] : this.state.labels[i]) + ': ';
let percent = (this.state.sliceTotals[i] * 100 / this.state.grandTotal).toFixed(1);
// this.tip.setValues(x, y, {name: title, value: (fraction*100).toFixed(1) + "%"}); this.tip.setValues(x, y, {name: title, value: percent + "%"});
// this.tip.showTip(); this.tip.showTip();
// } }
// }); });
} }
} }