Updated nps result component

bcc-code · Jun 26, 2024 · 17ffa23 · 17ffa23
1 parent c9df38d
commit 17ffa23
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 26 deletions.
diff --git a/design-library/src/components/BccNpsResult/BccNpsResult.vue b/design-library/src/components/BccNpsResult/BccNpsResult.vue
@@ -16,15 +16,15 @@ const props = withDefaults(defineProps<Props>(), {
   animated: true,
 });
 
-const TOT_DEGREES = 250;
-const MIN_DEGREES = 170;
+const TOT_DEGREES = 250; // 70% of 360
+const MIN_DEGREES = -170;
 const MAX_DEGREES = 80;
 
 function scoreToDegrees(score: number) {
   const perc = (score + 100) / 200;
-  const degr = perc * TOT_DEGREES - MIN_DEGREES;
+  const degr = perc * TOT_DEGREES + MIN_DEGREES;
   if (degr > MAX_DEGREES) return MAX_DEGREES;
-  if (degr < -MIN_DEGREES) return -MIN_DEGREES;
+  if (degr < MIN_DEGREES) return MIN_DEGREES;
   return degr;
 }
 
@@ -34,7 +34,7 @@ setTimeout(() => {
 }, 150);
 
 const degrees = computed(() => {
-  const startingPoint = -170;
+  const startingPoint = MIN_DEGREES;
 
   if (started.value && props.score !== undefined) {
     return scoreToDegrees(props.score);
@@ -45,33 +45,50 @@ const degrees = computed(() => {
 
 <template>
   <div class="bcc-nps-result" :class="{ animated }">
-    <svg class="result-gauge" viewBox="0 0 177 178" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg class="result-gauge" viewBox="0 0 180 180" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
-        d="M174.619 71L129.269 80.8641C129.604 82.9717 129.78 85.1312 129.78 87.3333C129.78 96.5843 126.701 105.125 121.5 112L158.155 141C166.173 130.681 171.626 119.536 174.376 107.845C177.126 96.1542 177.206 83.7678 174.616 71H174.619Z"
-        fill="#DFF9E5"
+        d="M16.2765 141.622C4.14125 124.291 -1.50042 103.239 0.342066 82.1622C2.18456 61.0855 11.3934 41.3317 26.3516 26.3693L54.9935 55.0031C46.7664 63.2324 41.7016 74.097 40.6882 85.6892C39.6748 97.2814 42.7777 108.86 49.4521 118.392L16.2765 141.622Z"
+        fill="#FFE3E3"
       />
       <path
-        d="M128.329 77L173.5 67.0861C170.46 54.3393 165.164 43.0565 157.742 33.5201C150.321 23.9869 140.682 16.0803 129.069 10L108.5 51.0306C118.246 56.54 125.535 65.8768 128.329 77Z"
-        fill="#FFF0DB"
+        d="M26.3605 26.3604C43.2388 9.48211 66.1307 -2.84641e-07 90.0001 0V40.5C76.8719 40.5 64.2814 45.7152 54.9984 54.9982L26.3605 26.3604Z"
+        fill="#FFE9D4"
       />
       <path
-        d="M46.9258 87.2829C46.9258 64.4003 65.3608 45.8512 88.1025 45.8512C94.157 45.8512 99.9034 47.1647 105.079 49.5248L125.5 8.52267C113.693 2.86646 101.117 0 88.0872 0C72.1198 0 56.4422 4.40098 42.7533 12.7303C28.6891 21.2867 17.3427 33.6641 9.9431 48.5243C2.3727 63.7282 -0.738426 80.4636 0.945241 96.9197C2.57096 112.783 8.6102 127.981 18.4407 141L54.969 111.887C49.9149 105.007 46.9258 96.4992 46.9258 87.286V87.2829Z"
-        fill="#FFE3E3"
+        d="M90.0001 0C113.87 2.84641e-07 136.761 9.48211 153.64 26.3604L125.002 54.9982C115.719 45.7152 103.128 40.5 90.0001 40.5V0Z"
+        fill="#FEFDE8"
       />
       <path
-        d="M174.633 71L155.354 75.2305C156.065 79.156 156.441 83.2004 156.441 87.3333C156.441 102.776 151.24 117.005 142.5 128.373L158.318 141C166.265 130.681 171.669 119.536 174.395 107.845C177.12 96.1542 177.199 83.7678 174.633 71Z"
-        fill="#34C759"
+        d="M153.64 26.3604C170.518 43.2387 180 66.1305 180 90L139.5 90C139.5 76.8718 134.285 64.2813 125.002 54.9982L153.64 26.3604Z"
+        fill="#D7FFE7"
       />
       <path
-        d="M154.191 71L173.5 66.7724C170.469 54.0956 165.188 42.8748 157.789 33.3909C150.389 23.91 140.779 16.0469 129.201 10L120.5 27.3104C137.203 36.312 149.676 52.1145 154.191 70.997V71Z"
-        fill="#FF921B"
+        d="M180 90C180 109.47 173.686 128.415 162.006 143.993L129.603 119.696C136.027 111.128 139.5 100.709 139.5 90L180 90Z"
+        fill="#DCEEE4"
       />
       <path
-        d="M20.6948 87.2829C20.6948 49.8255 50.8757 19.4576 88.1025 19.4576C98.3814 19.4576 108.12 21.7778 116.838 25.9179L125.5 8.52267C113.693 2.86646 101.117 0 88.0872 0C72.1198 0 56.4422 4.40098 42.7533 12.7303C28.6891 21.2867 17.3427 33.6641 9.9431 48.5243C2.3727 63.7282 -0.738426 80.4636 0.945241 96.9197C2.57096 112.783 8.6102 127.981 18.4407 141L34.399 128.279C25.8007 116.893 20.6917 102.689 20.6917 87.2829H20.6948Z"
+        d="M16.2765 141.622C4.14125 124.291 -1.50042 103.239 0.342066 82.1622C2.18456 61.0855 11.3934 41.3317 26.3516 26.3693L39.0813 39.0954C27.1148 51.0653 19.7477 66.8684 18.2737 83.7298C16.7997 100.591 21.313 117.433 31.0212 131.298L16.2765 141.622Z"
         fill="#F93A4F"
       />
       <path
-        d="M143.247 32.3886L91.5927 77.9944C90.3998 77.5143 89.0778 77.2935 87.7092 77.4053C82.9969 77.79 79.487 81.9285 79.8722 86.646C80.2573 91.3634 84.392 94.8778 89.1042 94.4931C93.8165 94.1084 97.3264 89.9699 96.9413 85.2524C96.9029 84.7825 96.8257 84.325 96.7159 83.8824L145.82 35.152C147.469 33.4324 145.08 30.8628 143.247 32.3886Z"
+        d="M26.3605 26.3604C43.2388 9.48211 66.1307 -2.84641e-07 90.0001 0V18C70.9046 18 52.5911 25.5857 39.0885 39.0883L26.3605 26.3604Z"
+        fill="#FE7F39"
+      />
+      <path
+        d="M90.0001 0C113.87 2.84641e-07 136.761 9.48211 153.64 26.3604L140.912 39.0883C127.409 25.5857 109.096 18 90.0001 18V0Z"
+        fill="#FCDD13"
+      />
+      <path
+        d="M153.64 26.3604C170.518 43.2387 180 66.1305 180 90H162C162 70.9044 154.414 52.5909 140.912 39.0883L153.64 26.3604Z"
+        fill="#09DE62"
+      />
+      <path
+        d="M180 90C180 109.47 173.686 128.415 162.006 143.993L147.605 133.194C156.949 120.732 162 105.576 162 90H180Z"
+        fill="#01B84E"
+      />
+
+      <path
+        d="M128.292 49.4565L92.4146 83.7227C91.5428 83.4108 90.5855 83.2892 89.604 83.4082C86.2246 83.8177 83.816 86.8941 84.226 90.2772C84.636 93.6603 87.7097 96.0722 91.089 95.6627C94.4684 95.2532 96.877 92.1769 96.4671 88.7937C96.4262 88.4568 96.3578 88.1298 96.2663 87.8144L130.221 51.3721C131.359 50.0885 129.568 48.3071 128.292 49.4565Z"
         fill="black"
         class="result-gauge-dial"
         :style="`transform: rotate(${degrees}deg)`"

diff --git a/design-library/src/components/BccNpsResult/__snapshots__/BccNpsResult.spec.ts.snap b/design-library/src/components/BccNpsResult/__snapshots__/BccNpsResult.spec.ts.snap
@@ -1,14 +1,18 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`BccNpsResult > renders a nps result 1`] = `
-"<div class=\\"bcc-nps-result animated\\"><svg class=\\"result-gauge\\" viewBox=\\"0 0 177 178\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\">
-    <path d=\\"M174.619 71L129.269 80.8641C129.604 82.9717 129.78 85.1312 129.78 87.3333C129.78 96.5843 126.701 105.125 121.5 112L158.155 141C166.173 130.681 171.626 119.536 174.376 107.845C177.126 96.1542 177.206 83.7678 174.616 71H174.619Z\\" fill=\\"#DFF9E5\\"></path>
-    <path d=\\"M128.329 77L173.5 67.0861C170.46 54.3393 165.164 43.0565 157.742 33.5201C150.321 23.9869 140.682 16.0803 129.069 10L108.5 51.0306C118.246 56.54 125.535 65.8768 128.329 77Z\\" fill=\\"#FFF0DB\\"></path>
-    <path d=\\"M46.9258 87.2829C46.9258 64.4003 65.3608 45.8512 88.1025 45.8512C94.157 45.8512 99.9034 47.1647 105.079 49.5248L125.5 8.52267C113.693 2.86646 101.117 0 88.0872 0C72.1198 0 56.4422 4.40098 42.7533 12.7303C28.6891 21.2867 17.3427 33.6641 9.9431 48.5243C2.3727 63.7282 -0.738426 80.4636 0.945241 96.9197C2.57096 112.783 8.6102 127.981 18.4407 141L54.969 111.887C49.9149 105.007 46.9258 96.4992 46.9258 87.286V87.2829Z\\" fill=\\"#FFE3E3\\"></path>
-    <path d=\\"M174.633 71L155.354 75.2305C156.065 79.156 156.441 83.2004 156.441 87.3333C156.441 102.776 151.24 117.005 142.5 128.373L158.318 141C166.265 130.681 171.669 119.536 174.395 107.845C177.12 96.1542 177.199 83.7678 174.633 71Z\\" fill=\\"#34C759\\"></path>
-    <path d=\\"M154.191 71L173.5 66.7724C170.469 54.0956 165.188 42.8748 157.789 33.3909C150.389 23.91 140.779 16.0469 129.201 10L120.5 27.3104C137.203 36.312 149.676 52.1145 154.191 70.997V71Z\\" fill=\\"#FF921B\\"></path>
-    <path d=\\"M20.6948 87.2829C20.6948 49.8255 50.8757 19.4576 88.1025 19.4576C98.3814 19.4576 108.12 21.7778 116.838 25.9179L125.5 8.52267C113.693 2.86646 101.117 0 88.0872 0C72.1198 0 56.4422 4.40098 42.7533 12.7303C28.6891 21.2867 17.3427 33.6641 9.9431 48.5243C2.3727 63.7282 -0.738426 80.4636 0.945241 96.9197C2.57096 112.783 8.6102 127.981 18.4407 141L34.399 128.279C25.8007 116.893 20.6917 102.689 20.6917 87.2829H20.6948Z\\" fill=\\"#F93A4F\\"></path>
-    <path d=\\"M143.247 32.3886L91.5927 77.9944C90.3998 77.5143 89.0778 77.2935 87.7092 77.4053C82.9969 77.79 79.487 81.9285 79.8722 86.646C80.2573 91.3634 84.392 94.8778 89.1042 94.4931C93.8165 94.1084 97.3264 89.9699 96.9413 85.2524C96.9029 84.7825 96.8257 84.325 96.7159 83.8824L145.82 35.152C147.469 33.4324 145.08 30.8628 143.247 32.3886Z\\" fill=\\"black\\" class=\\"result-gauge-dial\\" style=\\"transform: rotate(-170deg);\\"></path>
+"<div class=\\"bcc-nps-result animated\\"><svg class=\\"result-gauge\\" viewBox=\\"0 0 180 180\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\">
+    <path d=\\"M16.2765 141.622C4.14125 124.291 -1.50042 103.239 0.342066 82.1622C2.18456 61.0855 11.3934 41.3317 26.3516 26.3693L54.9935 55.0031C46.7664 63.2324 41.7016 74.097 40.6882 85.6892C39.6748 97.2814 42.7777 108.86 49.4521 118.392L16.2765 141.622Z\\" fill=\\"#FFE3E3\\"></path>
+    <path d=\\"M26.3605 26.3604C43.2388 9.48211 66.1307 -2.84641e-07 90.0001 0V40.5C76.8719 40.5 64.2814 45.7152 54.9984 54.9982L26.3605 26.3604Z\\" fill=\\"#FFE9D4\\"></path>
+    <path d=\\"M90.0001 0C113.87 2.84641e-07 136.761 9.48211 153.64 26.3604L125.002 54.9982C115.719 45.7152 103.128 40.5 90.0001 40.5V0Z\\" fill=\\"#FEFDE8\\"></path>
+    <path d=\\"M153.64 26.3604C170.518 43.2387 180 66.1305 180 90L139.5 90C139.5 76.8718 134.285 64.2813 125.002 54.9982L153.64 26.3604Z\\" fill=\\"#D7FFE7\\"></path>
+    <path d=\\"M180 90C180 109.47 173.686 128.415 162.006 143.993L129.603 119.696C136.027 111.128 139.5 100.709 139.5 90L180 90Z\\" fill=\\"#DCEEE4\\"></path>
+    <path d=\\"M16.2765 141.622C4.14125 124.291 -1.50042 103.239 0.342066 82.1622C2.18456 61.0855 11.3934 41.3317 26.3516 26.3693L39.0813 39.0954C27.1148 51.0653 19.7477 66.8684 18.2737 83.7298C16.7997 100.591 21.313 117.433 31.0212 131.298L16.2765 141.622Z\\" fill=\\"#F93A4F\\"></path>
+    <path d=\\"M26.3605 26.3604C43.2388 9.48211 66.1307 -2.84641e-07 90.0001 0V18C70.9046 18 52.5911 25.5857 39.0885 39.0883L26.3605 26.3604Z\\" fill=\\"#FE7F39\\"></path>
+    <path d=\\"M90.0001 0C113.87 2.84641e-07 136.761 9.48211 153.64 26.3604L140.912 39.0883C127.409 25.5857 109.096 18 90.0001 18V0Z\\" fill=\\"#FCDD13\\"></path>
+    <path d=\\"M153.64 26.3604C170.518 43.2387 180 66.1305 180 90H162C162 70.9044 154.414 52.5909 140.912 39.0883L153.64 26.3604Z\\" fill=\\"#09DE62\\"></path>
+    <path d=\\"M180 90C180 109.47 173.686 128.415 162.006 143.993L147.605 133.194C156.949 120.732 162 105.576 162 90H180Z\\" fill=\\"#01B84E\\"></path>
+    <path d=\\"M128.292 49.4565L92.4146 83.7227C91.5428 83.4108 90.5855 83.2892 89.604 83.4082C86.2246 83.8177 83.816 86.8941 84.226 90.2772C84.636 93.6603 87.7097 96.0722 91.089 95.6627C94.4684 95.2532 96.877 92.1769 96.4671 88.7937C96.4262 88.4568 96.3578 88.1298 96.2663 87.8144L130.221 51.3721C131.359 50.0885 129.568 48.3071 128.292 49.4565Z\\" fill=\\"black\\" class=\\"result-gauge-dial\\" style=\\"transform: rotate(-170deg);\\"></path>
   </svg>
   <div class=\\"bcc-nps-result-labels md\\">
     <h3 class=\\"bcc-nps-result-labels--heading\\">20</h3><label class=\\"bcc-nps-result-labels--label\\"></label>