From f0a24a2ced5c9f7bac85179bf95decbb72a6fb07 Mon Sep 17 00:00:00 2001 From: Shivam Mishra Date: Mon, 29 Jul 2019 20:09:07 +0530 Subject: [PATCH] feat: allow full circle in piechart --- src/js/charts/PieChart.js | 8 ++++++-- src/js/utils/draw.js | 12 ++++++++++++ 2 files changed, 18 insertions(+), 2 deletions(-) diff --git a/src/js/charts/PieChart.js b/src/js/charts/PieChart.js index b4d473b..160cc3c 100644 --- a/src/js/charts/PieChart.js +++ b/src/js/charts/PieChart.js @@ -2,7 +2,7 @@ import AggregationChart from './AggregationChart'; import { getComponent } from '../objects/ChartComponents'; import { getOffset } from '../utils/dom'; import { getPositionByAngle } from '../utils/helpers'; -import { makeArcPathStr } from '../utils/draw'; +import { makeArcPathStr, makeCircleStr } from '../utils/draw'; import { lightenDarkenColor } from '../utils/colors'; import { transform } from '../utils/animation'; import { FULL_ANGLE } from '../utils/constants'; @@ -58,7 +58,11 @@ export default class PieChart extends AggregationChart { curStart = startPosition; 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.slicesProperties.push({ startPosition, diff --git a/src/js/utils/draw.js b/src/js/utils/draw.js index 136ce8a..8ed8f1e 100644 --- a/src/js/utils/draw.js +++ b/src/js/utils/draw.js @@ -120,6 +120,18 @@ export function makeArcPathStr(startPosition, endPosition, center, radius, clock ${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){ let [arcStartX, arcStartY] = [center.x + startPosition.x, center.y + startPosition.y]; let [arcEndX, arcEndY] = [center.x + endPosition.x, center.y + endPosition.y];