From 49afbd8e6c7f8bdb286ea8a33029fd9e6ff5e151 Mon Sep 17 00:00:00 2001 From: Shivam Mishra Date: Tue, 30 Jul 2019 09:52:54 +0530 Subject: [PATCH] feat: allow full circle in donut chart --- src/js/charts/DonutChart.js | 7 +++++-- src/js/utils/draw.js | 12 ++++++++++++ 2 files changed, 17 insertions(+), 2 deletions(-) diff --git a/src/js/charts/DonutChart.js b/src/js/charts/DonutChart.js index e251126..b0ae67b 100644 --- a/src/js/charts/DonutChart.js +++ b/src/js/charts/DonutChart.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 { makeArcStrokePathStr } from '../utils/draw'; +import { makeArcStrokePathStr, makeStrokeCircleStr } from '../utils/draw'; import { lightenDarkenColor } from '../utils/colors'; import { transform } from '../utils/animation'; import { FULL_ANGLE } from '../utils/constants'; @@ -63,7 +63,10 @@ export default class DonutChart extends AggregationChart { curStart = startPosition; curEnd = endPosition; } - const curPath = makeArcStrokePathStr(curStart, curEnd, this.center, this.radius, this.clockWise, largeArc); + 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({ diff --git a/src/js/utils/draw.js b/src/js/utils/draw.js index 8ed8f1e..3db8f51 100644 --- a/src/js/utils/draw.js +++ b/src/js/utils/draw.js @@ -141,6 +141,18 @@ export function makeArcStrokePathStr(startPosition, endPosition, center, radius, ${arcEndX} ${arcEndY}`; } +export function makeStrokeCircleStr(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, radius * 2 + arcStartY, center.y + startPosition.y]; + + return `M${arcStartX} ${arcStartY} + A ${radius} ${radius} 0 ${largeArc} ${clockWise ? 1 : 0} + ${arcEndX} ${midArc} + M${arcStartX} ${midArc} + A ${radius} ${radius} 0 ${largeArc} ${clockWise ? 1 : 0} + ${arcEndX} ${arcEndY}`; +} + export function makeGradient(svgDefElem, color, lighter = false) { let gradientId ='path-fill-gradient' + '-' + color + '-' +(lighter ? 'lighter' : 'default'); let gradientDef = renderVerticalGradient(svgDefElem, gradientId);