From 9e32b31ae24d894f4798ed2c400fa9fca03b3cb1 Mon Sep 17 00:00:00 2001
From: rkyle35242 <keasterling@shipt.com>
Date: Thu, 2 May 2024 09:50:34 -0500
Subject: [PATCH] draw segments in two strokes

---
 .../__snapshots__/RangesDisplay.spec.js.snap  |  8 +++---
 .../__snapshots__/Segment.spec.js.snap        |  4 +--
 .../__snapshots__/arcHelpers.spec.js.snap     |  5 ++++
 src/utils/__tests__/arcHelpers.spec.js        |  8 ++----
 src/utils/arcHelpers.js                       | 26 ++++++++++++++++---
 5 files changed, 35 insertions(+), 16 deletions(-)
 create mode 100644 src/utils/__tests__/__snapshots__/arcHelpers.spec.js.snap

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`] = `
 >
   <RNSVGDefs>
     <RNSVGPath
-      d="M 40 150 A 110 110 0 0 1 260 150"
+      d="M 40 150 A 110 110 0 0 1 150 40 A 110 110 0 0 1 260 150"
       fill={
         {
           "payload": 4278190080,
@@ -21,7 +21,7 @@ exports[`RangesDisplay renders default 1`] = `
       name="TextPath-1.25-0"
     />
     <RNSVGPath
-      d="M 258.3288528313429 169.10129954336233 A 110 110 0 0 1 41.671147168657114 130.89870045663764"
+      d="M 258.3288528313429 169.10129954336233 A 110 110 0 0 1 130.89870045663767 258.3288528313429 A 110 110 0 0 1 41.671147168657114 130.89870045663764"
       fill={
         {
           "payload": 4278190080,
@@ -31,7 +31,7 @@ exports[`RangesDisplay renders default 1`] = `
       name="TextPath-2.5-1"
     />
     <RNSVGPath
-      d="M 46.633811713550074 112.37778423417645 A 110 110 0 0 1 253.36618828644993 187.62221576582357"
+      d="M 46.633811713550074 112.37778423417645 A 110 110 0 0 1 187.6222157658235 46.63381171355006 A 110 110 0 0 1 253.36618828644993 187.62221576582357"
       fill={
         {
           "payload": 4278190080,
@@ -41,7 +41,7 @@ exports[`RangesDisplay renders default 1`] = `
       name="TextPath-3.75-2"
     />
     <RNSVGPath
-      d="M 245.2627944162883 204.99999999999991 A 110 110 0 0 1 54.737205583711784 94.99999999999993"
+      d="M 245.2627944162883 204.99999999999991 A 110 110 0 0 1 95.00000000000009 245.2627944162883 A 110 110 0 0 1 54.737205583711784 94.99999999999993"
       fill={
         {
           "payload": 4278190080,
diff --git a/src/components/__tests__/__snapshots__/Segment.spec.js.snap b/src/components/__tests__/__snapshots__/Segment.spec.js.snap
index b753db6..c531f9c 100644
--- a/src/components/__tests__/__snapshots__/Segment.spec.js.snap
+++ b/src/components/__tests__/__snapshots__/Segment.spec.js.snap
@@ -10,7 +10,7 @@ exports[`Segment renders default 1`] = `
   }
 >
   <RNSVGPath
-    d="M 190.71067811865476 190.71067811865476 A 100 100 0 0 0 213.35804264972018 84.16320504546997"
+    d="M 190.71067811865476 190.71067811865476 A 100 100 0 0 0 217.81476007338057 140.79116908177593 A 100 100 0 0 0 213.35804264972018 84.16320504546997"
     fill={null}
     propList={
       [
@@ -28,7 +28,7 @@ exports[`Segment renders default 1`] = `
     strokeWidth={2}
   />
   <RNSVGPath
-    d="M 190.71067811865476 190.71067811865476 A 100 100 0 0 0 213.35804264972018 84.16320504546997"
+    d="M 190.71067811865476 190.71067811865476 A 100 100 0 0 0 217.81476007338057 140.79116908177593 A 100 100 0 0 0 213.35804264972018 84.16320504546997"
     fill={null}
     propList={
       [
diff --git a/src/utils/__tests__/__snapshots__/arcHelpers.spec.js.snap b/src/utils/__tests__/__snapshots__/arcHelpers.spec.js.snap
new file mode 100644
index 0000000..05f7211
--- /dev/null
+++ b/src/utils/__tests__/__snapshots__/arcHelpers.spec.js.snap
@@ -0,0 +1,5 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`arc helpers returns d path for an arc - opposite angle needed for ratings range display 1`] = `"M 248.4271208749459 113.04091428474516 A 104 104 0 0 1 239.4680573482968 95.73865497772863 A 104 104 0 0 1 227.43893458527793 80.41112412784959"`;
+
+exports[`arc helpers returns d path for an arc 1`] = `"M 248.4271208749459 113.04091428474516 A 104 104 0 0 0 239.4680573482968 95.73865497772863 A 104 104 0 0 0 227.43893458527793 80.41112412784959"`;
diff --git a/src/utils/__tests__/arcHelpers.spec.js b/src/utils/__tests__/arcHelpers.spec.js
index a22d38e..01c64b7 100644
--- a/src/utils/__tests__/arcHelpers.spec.js
+++ b/src/utils/__tests__/arcHelpers.spec.js
@@ -6,14 +6,10 @@ describe('arc helpers', () => {
   });
 
   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;
 };