jingrow/charts
1
0
Fork 0
Code Pull Requests Activity

Merge pull request #385 from lxhyl/master

Browse Source 
feat: pie chart add select event
This commit is contained in:
Arjun 2022-11-21 12:16:13 +05:30 committed by GitHub
commit 030e674a0a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 49 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,6 @@
import AggregationChart from './AggregationChart'; import AggregationChart from './AggregationChart';
import { getComponent } from '../objects/ChartComponents'; import { getComponent } from '../objects/ChartComponents';
import { getOffset } from '../utils/dom'; import { getOffset, fire } from '../utils/dom';
import { getPositionByAngle } from '../utils/helpers'; import { getPositionByAngle } from '../utils/helpers';
import { makeArcPathStr, makeCircleStr } from '../utils/draw'; import { makeArcPathStr, makeCircleStr } from '../utils/draw';
import { lightenDarkenColor } from '../utils/colors'; import { lightenDarkenColor } from '../utils/colors';
@ -39,10 +39,12 @@ export default class PieChart extends AggregationChart {
s.sliceStrings = []; s.sliceStrings = [];
s.slicesProperties = []; s.slicesProperties = [];
let curAngle = 180 - this.config.startAngle; let curAngle = 180 - this.config.startAngle;
s.sliceTotals.map((total, i) => { s.sliceTotals.map((total, i) => {
const startAngle = curAngle; const startAngle = curAngle;
const originDiffAngle = (total / s.grandTotal) * FULL_ANGLE; const originDiffAngle = (total / s.grandTotal) * FULL_ANGLE;
const largeArc = originDiffAngle > 180 ? 1: 0; const largeArc = originDiffAngle > 180 ? 1 : 0;
const diffAngle = clockWise ? -originDiffAngle : originDiffAngle; const diffAngle = clockWise ? -originDiffAngle : originDiffAngle;
const endAngle = curAngle = curAngle + diffAngle; const endAngle = curAngle = curAngle + diffAngle;
const startPosition = getPositionByAngle(startAngle, radius); const startPosition = getPositionByAngle(startAngle, radius);
@ -50,8 +52,8 @@ export default class PieChart extends AggregationChart {
const prevProperty = this.init && prevSlicesProperties[i]; const prevProperty = this.init && prevSlicesProperties[i];
let curStart,curEnd; let curStart, curEnd;
if(this.init) { if (this.init) {
curStart = prevProperty ? prevProperty.startPosition : startPosition; curStart = prevProperty ? prevProperty.startPosition : startPosition;
curEnd = prevProperty ? prevProperty.endPosition : startPosition; curEnd = prevProperty ? prevProperty.endPosition : startPosition;
} else { } else {
@ -73,7 +75,6 @@ export default class PieChart extends AggregationChart {
endAngle, endAngle,
angle: diffAngle angle: diffAngle
}); });
}); });
this.init = 0; this.init = 0;
} }
@ -84,8 +85,8 @@ export default class PieChart extends AggregationChart {
let componentConfigs = [ let componentConfigs = [
[ [
'pieSlices', 'pieSlices',
{ }, {},
function() { function () {
return { return {
sliceStrings: s.sliceStrings, sliceStrings: s.sliceStrings,
colors: this.colors colors: this.colors
@ -99,18 +100,19 @@ export default class PieChart extends AggregationChart {
let component = getComponent(...args); let component = getComponent(...args);
return [args[0], component]; return [args[0], component];
})); }));
} }
calTranslateByAngle(property){ calTranslateByAngle(property) {
const{radius,hoverRadio} = this; const { radius, hoverRadio } = this;
const position = getPositionByAngle(property.startAngle+(property.angle / 2),radius); const position = getPositionByAngle(property.startAngle + (property.angle / 2), radius);
return `translate3d(${(position.x) * hoverRadio}px,${(position.y) * hoverRadio}px,0)`; return `translate3d(${(position.x) * hoverRadio}px,${(position.y) * hoverRadio}px,0)`;
} }
hoverSlice(path,i,flag,e){ hoverSlice(path, i, flag, e) {
if(!path) return; if (!path) return;
const color = this.colors[i]; const color = this.colors[i];
if(flag) { if (flag) {
transform(path, this.calTranslateByAngle(this.state.slicesProperties[i])); transform(path, this.calTranslateByAngle(this.state.slicesProperties[i]));
path.style.fill = lightenDarkenColor(color, 50); path.style.fill = lightenDarkenColor(color, 50);
let g_off = getOffset(this.svg); let g_off = getOffset(this.svg);
@ -119,10 +121,10 @@ export default class PieChart extends AggregationChart {
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.state.labels[i]) + ': '; ? this.formatted_labels[i] : this.state.labels[i]) + ': ';
let percent = (this.state.sliceTotals[i] * 100 / this.state.grandTotal).toFixed(1); let percent = (this.state.sliceTotals[i] * 100 / this.state.grandTotal).toFixed(1);
this.tip.setValues(x, y, {name: title, value: percent + "%"}); this.tip.setValues(x, y, { name: title, value: percent + "%" });
this.tip.showTip(); this.tip.showTip();
} else { } else {
transform(path,'translate3d(0,0,0)'); transform(path, 'translate3d(0,0,0)');
this.tip.hideTip(); this.tip.hideTip();
path.style.fill = color; path.style.fill = color;
} }
@ -132,15 +134,42 @@ export default class PieChart extends AggregationChart {
this.container.addEventListener('mousemove', this.mouseMove); this.container.addEventListener('mousemove', this.mouseMove);
this.container.addEventListener('mouseleave', this.mouseLeave); this.container.addEventListener('mouseleave', this.mouseLeave);
} }
getDataPoint(index = this.state.currentIndex) {
let s = this.state;
let data_point = {
index: index,
label: s.labels[index],
values: s.sliceTotals[index]
};
return data_point;
}
setCurrentDataPoint(index) {
let s = this.state;
index = parseInt(index);
if (index < 0) index = 0;
if (index >= s.labels.length) index = s.labels.length - 1;
if (index === s.currentIndex) return;
s.currentIndex = index;
fire(this.parent, "data-select", this.getDataPoint());
}
mouseMove(e){ bindUnits() {
const units = this.components.get('pieSlices').store;
if (!units) return;
units.forEach((unit, index) => {
unit.addEventListener('click', () => {
this.setCurrentDataPoint(index);
});
});
}
mouseMove(e) {
const target = e.target; const target = e.target;
let slices = this.components.get('pieSlices').store; let slices = this.components.get('pieSlices').store;
let prevIndex = this.curActiveSliceIndex; let prevIndex = this.curActiveSliceIndex;
let prevAcitve = this.curActiveSlice; let prevAcitve = this.curActiveSlice;
if(slices.includes(target)) { if (slices.includes(target)) {
let i = slices.indexOf(target); let i = slices.indexOf(target);
this.hoverSlice(prevAcitve, prevIndex,false); this.hoverSlice(prevAcitve, prevIndex, false);
this.curActiveSlice = target; this.curActiveSlice = target;
this.curActiveSliceIndex = i; this.curActiveSliceIndex = i;
this.hoverSlice(target, i, true, e); this.hoverSlice(target, i, true, e);
@ -149,7 +178,7 @@ export default class PieChart extends AggregationChart {
} }
} }
mouseLeave(){ mouseLeave() {
this.hoverSlice(this.curActiveSlice,this.curActiveSliceIndex,false); this.hoverSlice(this.curActiveSlice, this.curActiveSliceIndex, false);
} }
} }