jingrow/charts
1
0
Fork 0
Code Pull Requests Activity

feat: allow full circle in piechart

Browse Source
This commit is contained in:
Shivam Mishra 2019-07-29 20:09:07 +05:30
parent e4117952dd
commit f0a24a2ced
2 changed files with 18 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,7 +2,7 @@ import AggregationChart from './AggregationChart';
import { getComponent } from '../objects/ChartComponents'; import { getComponent } from '../objects/ChartComponents';
import { getOffset } from '../utils/dom'; import { getOffset } from '../utils/dom';
import { getPositionByAngle } from '../utils/helpers'; import { getPositionByAngle } from '../utils/helpers';
import { makeArcPathStr } from '../utils/draw'; import { makeArcPathStr, makeCircleStr } from '../utils/draw';
import { lightenDarkenColor } from '../utils/colors'; import { lightenDarkenColor } from '../utils/colors';
import { transform } from '../utils/animation'; import { transform } from '../utils/animation';
import { FULL_ANGLE } from '../utils/constants'; import { FULL_ANGLE } from '../utils/constants';
@ -58,7 +58,11 @@ export default class PieChart extends AggregationChart {
curStart = startPosition; curStart = startPosition;
curEnd = endPosition; curEnd = endPosition;
} }
const curPath = makeArcPathStr(curStart, curEnd, this.center, this.radius, clockWise, largeArc); const curPath =
originDiffAngle === 360
? makeCircleStr(curStart, curEnd, this.center, this.radius, clockWise, largeArc)
: makeArcPathStr(curStart, curEnd, this.center, this.radius, clockWise, largeArc)
s.sliceStrings.push(curPath); s.sliceStrings.push(curPath);
s.slicesProperties.push({ s.slicesProperties.push({
startPosition, startPosition,

12
src/js/utils/draw.js
View File

@ -120,6 +120,18 @@ export function makeArcPathStr(startPosition, endPosition, center, radius, clock
${arcEndX} ${arcEndY} z`; ${arcEndX} ${arcEndY} z`;
} }
export function makeCircleStr(startPosition, endPosition, center, radius, clockWise=1, largeArc=0){
let [arcStartX, arcStartY] = [center.x + startPosition.x, center.y + startPosition.y];
let [arcEndX, midArc, arcEndY] = [center.x + endPosition.x, center.y * 2, center.y + endPosition.y];
return `M${center.x} ${center.y}
L${arcStartX} ${arcStartY}
A ${radius} ${radius} 0 ${largeArc} ${clockWise ? 1 : 0}
${arcEndX} ${midArc} z
L${arcStartX} ${midArc}
A ${radius} ${radius} 0 ${largeArc} ${clockWise ? 1 : 0}
${arcEndX} ${arcEndY} z`;
}
export function makeArcStrokePathStr(startPosition, endPosition, center, radius, clockWise=1, largeArc=0){ export function makeArcStrokePathStr(startPosition, endPosition, center, radius, clockWise=1, largeArc=0){
let [arcStartX, arcStartY] = [center.x + startPosition.x, center.y + startPosition.y]; let [arcStartX, arcStartY] = [center.x + startPosition.x, center.y + startPosition.y];
let [arcEndX, arcEndY] = [center.x + endPosition.x, center.y + endPosition.y]; let [arcEndX, arcEndY] = [center.x + endPosition.x, center.y + endPosition.y];