From f0a24a2ced5c9f7bac85179bf95decbb72a6fb07 Mon Sep 17 00:00:00 2001 From: Shivam Mishra Date: Mon, 29 Jul 2019 20:09:07 +0530 Subject: [PATCH 1/3] 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]; From 49afbd8e6c7f8bdb286ea8a33029fd9e6ff5e151 Mon Sep 17 00:00:00 2001 From: Shivam Mishra Date: Tue, 30 Jul 2019 09:52:54 +0530 Subject: [PATCH 2/3] 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); From 0390fb641aad6be41b76572bacbd390581e4eb70 Mon Sep 17 00:00:00 2001 From: Shivam Mishra Date: Tue, 30 Jul 2019 09:54:30 +0530 Subject: [PATCH 3/3] style: minor linting fixes --- src/js/charts/PieChart.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/js/charts/PieChart.js b/src/js/charts/PieChart.js index 160cc3c..656f108 100644 --- a/src/js/charts/PieChart.js +++ b/src/js/charts/PieChart.js @@ -61,7 +61,7 @@ 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) + : makeArcPathStr(curStart, curEnd, this.center, this.radius, clockWise, largeArc); s.sliceStrings.push(curPath); s.slicesProperties.push({