diff --git a/src/components/__tests__/__snapshots__/RangesDisplay.spec.js.snap b/src/components/__tests__/__snapshots__/RangesDisplay.spec.js.snap index 0ad23df..efa55ed 100644 --- a/src/components/__tests__/__snapshots__/RangesDisplay.spec.js.snap +++ b/src/components/__tests__/__snapshots__/RangesDisplay.spec.js.snap @@ -11,7 +11,7 @@ exports[`RangesDisplay renders default 1`] = ` > { }); it('returns d path for an arc', () => { - expect(drawArc(152, 152, 104, 136.5, 158)).toEqual( - 'M 248.4271208749459 113.04091428474516 A 104 104 0 0 0 227.43893458527793 80.41112412784959' - ); + expect(drawArc(152, 152, 104, 136.5, 158)).toMatchSnapshot(); }); it('returns d path for an arc - opposite angle needed for ratings range display', () => { - expect(drawArc(152, 152, 104, 136.5, 158, true)).toEqual( - 'M 248.4271208749459 113.04091428474516 A 104 104 0 0 1 227.43893458527793 80.41112412784959' - ); + expect(drawArc(152, 152, 104, 136.5, 158, true)).toMatchSnapshot(); }); }); diff --git a/src/utils/arcHelpers.js b/src/utils/arcHelpers.js index 4246906..934aded 100644 --- a/src/utils/arcHelpers.js +++ b/src/utils/arcHelpers.js @@ -9,13 +9,31 @@ export const polarToCartesian = (centerX, centerY, radius, angleInDegrees) => { export const drawArc = (x, y, radius, startAngle, endAngle, range = false) => { const start = polarToCartesian(x, y, radius, endAngle); + const midPoint = polarToCartesian(x, y, radius, (startAngle + endAngle) / 2); const end = polarToCartesian(x, y, radius, startAngle); - const largeArcFlag = endAngle - startAngle <= 180 ? '0' : '1'; - const sweepFlag = range ? 1 : 0; - const d = ['M', start.x, start.y, 'A', radius, radius, 0, largeArcFlag, sweepFlag, end.x, end.y].join(' '); - + const d = [ + 'M', + start.x, + start.y, + 'A', + radius, + radius, + 0, + 0, + sweepFlag, + midPoint.x, + midPoint.y, + 'A', + radius, + radius, + 0, + 0, + sweepFlag, + end.x, + end.y + ].join(' '); return d; };