jingrow/charts
1
0
Fork 0
Code Pull Requests Activity

feat: DonutChart extends PieChart

Browse Source
This commit is contained in:
Shivam Mishra 2020-10-26 11:47:02 +05:30
parent dc00b46a7a
commit 73f1d9b1e3
2 changed files with 32 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

136
src/js/charts/DonutChart.js
View File

@ -1,86 +1,28 @@
import AggregationChart from './AggregationChart';
import PieChart from './PieChart';
import { getComponent } from '../objects/ChartComponents';
import { getOffset } from '../utils/dom';
import { getPositionByAngle } from '../utils/helpers';
import { makeArcStrokePathStr, makeStrokeCircleStr } from '../utils/draw';
import { lightenDarkenColor } from '../utils/colors';
import { transform } from '../utils/animation';
import { FULL_ANGLE } from '../utils/constants';
export default class DonutChart extends AggregationChart {
export default class DonutChart extends PieChart {
constructor(parent, args) {
super(parent, args);
this.type = 'donut';
this.initTimeout = 0;
this.init = 1;
this.setup();
}
configure(args) {
super.configure(args);
this.mouseMove = this.mouseMove.bind(this);
this.mouseLeave = this.mouseLeave.bind(this);
this.hoverRadio = args.hoverRadio || 0.1;
this.config.startAngle = args.startAngle || 0;
this.type = 'donut';
this.sliceName = 'donutSlices';
this.arcFunc = makeArcStrokePathStr;
this.shapeFunc = makeStrokeCircleStr;
this.clockWise = args.clockWise || false;
this.strokeWidth = args.strokeWidth || 30;
}
calc() {
super.calc();
let s = this.state;
this.radius =
this.height > this.width
? this.center.x - this.strokeWidth / 2
: this.center.y - this.strokeWidth / 2;
const { radius, clockWise } = this;
const prevSlicesProperties = s.slicesProperties || [];
s.sliceStrings = [];
s.slicesProperties = [];
let curAngle = 180 - this.config.startAngle;
s.sliceTotals.map((total, i) => {
const startAngle = curAngle;
const originDiffAngle = (total / s.grandTotal) * FULL_ANGLE;
const largeArc = originDiffAngle > 180 ? 1 : 0;
const diffAngle = clockWise ? -originDiffAngle : originDiffAngle;
const endAngle = curAngle = curAngle + diffAngle;
const startPosition = getPositionByAngle(startAngle, radius);
const endPosition = getPositionByAngle(endAngle, radius);
const prevProperty = this.init && prevSlicesProperties[i];
let curStart, curEnd;
if (this.init) {
curStart = prevProperty ? prevProperty.startPosition : startPosition;
curEnd = prevProperty ? prevProperty.endPosition : startPosition;
} else {
curStart = startPosition;
curEnd = endPosition;
}
const curPath =
originDiffAngle === 360
? makeStrokeCircleStr(curStart, curEnd, this.center, this.radius, this.clockWise, largeArc)
: makeArcStrokePathStr(curStart, curEnd, this.center, this.radius, this.clockWise, largeArc);
s.sliceStrings.push(curPath);
s.slicesProperties.push({
startPosition,
endPosition,
value: total,
total: s.grandTotal,
startAngle,
endAngle,
angle: diffAngle
});
});
this.init = 0;
getRadius() {
return this.height > this.width
? this.center.x - this.strokeWidth / 2
: this.center.y - this.strokeWidth / 2;
}
setupComponents() {
@ -88,7 +30,7 @@ export default class DonutChart extends AggregationChart {
let componentConfigs = [
[
'donutSlices',
this.sliceName,
{},
function () {
return {
@ -99,6 +41,8 @@ export default class DonutChart extends AggregationChart {
}.bind(this)
]
];
/* eslint-disable no-console */
console.log(this.sliceName);
this.components = new Map(componentConfigs
.map(args => {
@ -106,56 +50,4 @@ export default class DonutChart extends AggregationChart {
return [args[0], component];
}));
}
calTranslateByAngle(property) {
const { radius, hoverRadio } = this;
const position = getPositionByAngle(property.startAngle + (property.angle / 2), radius);
return `translate3d(${(position.x) * hoverRadio}px,${(position.y) * hoverRadio}px,0)`;
}
hoverSlice(path, i, flag, e) {
if (!path) return;
const color = this.colors[i];
if (flag) {
transform(path, this.calTranslateByAngle(this.state.slicesProperties[i]));
path.style.stroke = lightenDarkenColor(color, 50);
let g_off = getOffset(this.svg);
let x = e.pageX - g_off.left + 10;
let y = e.pageY - g_off.top - 10;
let title = (this.formatted_labels && this.formatted_labels.length > 0
? 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: percent + "%" });
this.tip.showTip();
} else {
transform(path, 'translate3d(0,0,0)');
this.tip.hideTip();
path.style.stroke = color;
}
}
bindTooltip() {
this.container.addEventListener('mousemove', this.mouseMove);
this.container.addEventListener('mouseleave', this.mouseLeave);
}
mouseMove(e) {
const target = e.target;
let slices = this.components.get('donutSlices').store;
let prevIndex = this.curActiveSliceIndex;
let prevAcitve = this.curActiveSlice;
if (slices.includes(target)) {
let i = slices.indexOf(target);
this.hoverSlice(prevAcitve, prevIndex, false);
this.curActiveSlice = target;
this.curActiveSliceIndex = i;
this.hoverSlice(target, i, true, e);
} else {
this.mouseLeave();
}
}
mouseLeave() {
this.hoverSlice(this.curActiveSlice, this.curActiveSliceIndex, false);
}
}

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

@ -10,7 +10,6 @@ import { FULL_ANGLE } from '../utils/constants';
export default class PieChart extends AggregationChart {
constructor(parent, args) {
super(parent, args);
this.type = 'pie';
this.initTimeout = 0;
this.init = 1;
@ -25,13 +24,23 @@ export default class PieChart extends AggregationChart {
this.hoverRadio = args.hoverRadio || 0.1;
this.config.startAngle = args.startAngle || 0;
this.type = 'pie';
this.sliceName = 'pieSlices';
this.arcFunc = makeArcPathStr;
this.shapeFunc = makeCircleStr;
this.clockWise = args.clockWise || false;
}
getRadius() {
return this.height > this.width ? this.center.x : this.center.y;
}
calc() {
super.calc();
let s = this.state;
this.radius = (this.height > this.width ? this.center.x : this.center.y);
this.radius = this.getRadius();
const { radius, clockWise } = this;
@ -60,8 +69,8 @@ export default class PieChart extends AggregationChart {
}
const curPath =
originDiffAngle === 360
? makeCircleStr(curStart, curEnd, this.center, this.radius, clockWise, largeArc)
: makeArcPathStr(curStart, curEnd, this.center, this.radius, clockWise, largeArc);
? this.shapeFunc(curStart, curEnd, this.center, this.radius, clockWise, largeArc)
: this.arcFunc(curStart, curEnd, this.center, this.radius, clockWise, largeArc);
s.sliceStrings.push(curPath);
s.slicesProperties.push({
@ -112,7 +121,8 @@ export default class PieChart extends AggregationChart {
const color = this.colors[i];
if (flag) {
transform(path, this.calTranslateByAngle(this.state.slicesProperties[i]));
path.style.fill = lightenDarkenColor(color, 50);
// path.style.fill = lightenDarkenColor(color, 50);
// path.style.stroke = lightenDarkenColor(color, 50);
let g_off = getOffset(this.svg);
let x = e.pageX - g_off.left + 10;
let y = e.pageY - g_off.top - 10;
@ -135,12 +145,12 @@ export default class PieChart extends AggregationChart {
mouseMove(e) {
const target = e.target;
let slices = this.components.get('pieSlices').store;
let slices = this.components.get(this.sliceName).store;
let prevIndex = this.curActiveSliceIndex;
let prevAcitve = this.curActiveSlice;
let prevActive = this.curActiveSlice;
if (slices.includes(target)) {
let i = slices.indexOf(target);
this.hoverSlice(prevAcitve, prevIndex, false);
this.hoverSlice(prevActive, prevIndex, false);
this.curActiveSlice = target;
this.curActiveSliceIndex = i;
this.hoverSlice(target, i, true, e);