jingrow/charts
1
0
Fork 0
Code Pull Requests Activity

chore: format donut chart and pie chart

Browse Source
This commit is contained in:
Shivam Mishra 2020-10-23 13:14:39 +05:30
parent fd28107795
commit dc00b46a7a
2 changed files with 36 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -47,7 +47,7 @@ export default class DonutChart extends AggregationChart {
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);
@ -55,8 +55,8 @@ export default class DonutChart 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 {
@ -89,8 +89,8 @@ export default class DonutChart extends AggregationChart {
let componentConfigs = [ let componentConfigs = [
[ [
'donutSlices', 'donutSlices',
{ }, {},
function() { function () {
return { return {
sliceStrings: s.sliceStrings, sliceStrings: s.sliceStrings,
colors: this.colors, colors: this.colors,
@ -107,16 +107,16 @@ export default class DonutChart extends AggregationChart {
})); }));
} }
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.stroke = lightenDarkenColor(color, 50); path.style.stroke = lightenDarkenColor(color, 50);
let g_off = getOffset(this.svg); let g_off = getOffset(this.svg);
@ -125,10 +125,10 @@ export default class DonutChart 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.stroke = color; path.style.stroke = color;
} }
@ -139,14 +139,14 @@ export default class DonutChart extends AggregationChart {
this.container.addEventListener('mouseleave', this.mouseLeave); this.container.addEventListener('mouseleave', this.mouseLeave);
} }
mouseMove(e){ mouseMove(e) {
const target = e.target; const target = e.target;
let slices = this.components.get('donutSlices').store; let slices = this.components.get('donutSlices').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);
@ -155,7 +155,7 @@ export default class DonutChart extends AggregationChart {
} }
} }
mouseLeave(){ mouseLeave() {
this.hoverSlice(this.curActiveSlice,this.curActiveSliceIndex,false); this.hoverSlice(this.curActiveSlice, this.curActiveSliceIndex, false);
} }
} }

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

@ -42,7 +42,7 @@ export default class PieChart extends AggregationChart {
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 +50,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 {
@ -84,8 +84,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
@ -101,16 +101,16 @@ export default class PieChart extends AggregationChart {
})); }));
} }
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 +119,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;
} }
@ -133,14 +133,14 @@ export default class PieChart extends AggregationChart {
this.container.addEventListener('mouseleave', this.mouseLeave); this.container.addEventListener('mouseleave', this.mouseLeave);
} }
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;
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 +149,7 @@ export default class PieChart extends AggregationChart {
} }
} }
mouseLeave(){ mouseLeave() {
this.hoverSlice(this.curActiveSlice,this.curActiveSliceIndex,false); this.hoverSlice(this.curActiveSlice, this.curActiveSliceIndex, false);
} }
} }