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

33
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,7 +39,9 @@ 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;
@ -73,7 +75,6 @@ export default class PieChart extends AggregationChart {
endAngle, endAngle,
angle: diffAngle angle: diffAngle
}); });
}); });
this.init = 0; this.init = 0;
} }
@ -99,6 +100,7 @@ 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) {
@ -132,7 +134,34 @@ 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());
}
bindUnits() {
const units = this.components.get('pieSlices').store;
if (!units) return;
units.forEach((unit, index) => {
unit.addEventListener('click', () => {
this.setCurrentDataPoint(index);
});
});
}
mouseMove(e) { mouseMove(e) {
const target = e.target; const target = e.target;
let slices = this.components.get('pieSlices').store; let slices = this.components.get('pieSlices').store;