feat: add shield graph

GlycanAge · Aug 22, 2024 · e3d34ff · e3d34ff
1 parent 1f03468
commit e3d34ff
Show file tree

Hide file tree

Showing 4 changed files with 244 additions and 3 deletions.
diff --git a/packages/lib/index.ts b/packages/lib/index.ts
@@ -19,4 +19,5 @@ export default () => {
   import('./src/endometrial/endometrial.wc.svelte');
   import('./src/ovarian/ovarian.wc.svelte');
   import('./src/age-graph/age-graph.wc.svelte');
+  import('./src/shield-graph/shield-graph.wc.svelte');
 };
diff --git a/packages/lib/src/age-graph/age-graph.wc.svelte b/packages/lib/src/age-graph/age-graph.wc.svelte
@@ -51,12 +51,12 @@
             <p style="font-size: 1.5rem;">
                 <b>{glycanAge}</b>
             </p>
-            <svg class="rotateImg" width="18%" height="18%" viewBox="0 0 42 37" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <svg class="rotateImg" width="14%" height="14%" viewBox="0 0 42 37" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path d="M14.0718 4C17.151 -1.33334 24.849 -1.33333 27.9282 4.00001L40.0525 25C43.1317 30.3333 39.2827 37 33.1243 37L8.87563 37C2.71722 37 -1.13177 30.3333 1.94743 25L14.0718 4Z" fill="#09371F"/>
             </svg>
         </div>
         <div class="slider-bottom">
-            <svg width="16%" height="16%" viewBox="0 0 42 37" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <svg width="12%" height="12%" viewBox="0 0 42 37" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path d="M14.0718 4C17.151 -1.33334 24.849 -1.33333 27.9282 4.00001L40.0525 25C43.1317 30.3333 39.2827 37 33.1243 37L8.87563 37C2.71722 37 -1.13177 30.3333 1.94743 25L14.0718 4Z" fill="#09371F"/>
             </svg>
             <div style="font-size: 1.5rem;">

diff --git a/packages/lib/src/shared/functions/helpers.ts b/packages/lib/src/shared/functions/helpers.ts
@@ -1,6 +1,5 @@
 import {english, polish} from '../consts/languages.const';
 
-
 export function suffix(perc: number) {
   if (perc === 11 || perc === 12 || perc === 13) {
     return 'th';
@@ -42,4 +41,51 @@ export function getTranslation(language: string = 'english', key: string) {
   };
 
   return translations[language][key];
+}
+
+export function scale(value: number, inMin: number, inMax: number, outMin: number, outMax: number) {
+  const result = (value - inMin) * (outMax - outMin) / (inMax - inMin) + outMin;
+
+  if (result < outMin) {
+    return outMin;
+  } else if (result > outMax) {
+    return outMax;
+  }
+  return result;
+}
+
+export function calculateSliderPosition(min: number, mid: number, max: number, result: number) {
+  if (result === mid) {
+    return 50;
+  } else if (result === min) {
+    return 9.5;
+  } else if (result === max) {
+    return 90.5;
+  } else if (result < min) {
+    return 5;
+  } else if (result > max) {
+    return 95;
+  } else if (result > min && result < mid) {
+    return scale(result, min, mid, 10, 50);
+  } else if (result > mid && result < max) {
+    return scale(result, mid, max, 50, 90);
+  } else {
+    return 0;
+  }
+}
+
+export function getColorRedToBlue(min: number, mid: number, max: number, result: number) {
+  const position = calculateSliderPosition(min, mid, max, result);
+
+  if (position < 23) {
+    return '#DF2120';
+  } else if (position >= 23 && position <= 36) {
+    return '#F2800D';
+  } else if (position > 36 && position < 64) {
+    return '#66CCAA';
+  } else if (position >= 64 && position <= 77) {
+    return '#13A195';
+  } else if (position > 77) {
+    return '#015566';
+  }
 }
diff --git a/packages/lib/src/shield-graph/shield-graph.wc.svelte b/packages/lib/src/shield-graph/shield-graph.wc.svelte
@@ -0,0 +1,194 @@
+<svelte:options customElement={{ tag: 'ga-shield-graph', shadow: 'open' }}/>
+
+<script lang="ts">
+    import {onMount} from 'svelte';
+    import {Service} from '../shared/utils/service';
+    import {calculateSliderPosition, getColorRedToBlue, suffix} from '../shared/functions/helpers';
+
+    export let report: string;
+    export let service: Service = window.GaReportService;
+
+    let reportData: any;
+
+    let min = 0; // Sxmin
+    let mid = 0; // Sxaverage
+    let max = 0; // Sxmax
+    let result = 0; // Syourscore
+    let percentile = 0; // Spercentile
+
+    let show = false;
+
+    onMount(async () => {
+        reportData = await service.getReport(report);
+        min = Number(reportData.Sxmin);
+        mid = Number(reportData.Sxaverage);
+        max = Number(reportData.Sxmax);
+        result = Number(reportData.Syourscore);
+        percentile = Number(reportData.Spercentile);
+
+        show = true;
+    });
+</script>
+
+{#if show}
+    <div class="parent">
+        <div class="colorBoxShort" style="background-color: #DF2120;"></div>
+        <div class="colorBox" style="background-color: #DF2120;"></div>
+        <div class="colorBox" style="background-color: #F2800D;"></div>
+        <div class="colorBox" style="background-color: #66CCAA;"></div>
+        <div class="colorBox" style="background-color: #66CCAA;"></div>
+        <div class="colorBox" style="background-color: #13A195;"></div>
+        <div class="colorBox" style="background-color: #015566;"></div>
+        <div class="colorBoxShort" style="background-color: #015566;"></div>
+
+        <div class="slider" style="left: {calculateSliderPosition(min, mid, max, result)}%;">
+            <p style="font-size: 1rem;">
+                Your result
+            </p>
+            <p style="font-size: 1.5rem;">
+                <b>{result}</b>
+            </p>
+            <svg class="rotateImg" width="14%" height="14%" viewBox="0 0 42 37" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M14.0718 4C17.151 -1.33334 24.849 -1.33333 27.9282 4.00001L40.0525 25C43.1317 30.3333 39.2827 37 33.1243 37L8.87563 37C2.71722 37 -1.13177 30.3333 1.94743 25L14.0718 4Z" fill="#09371F"/>
+            </svg>
+        </div>
+
+        <div class="bottom-triangle" style="left: 9.5%;">
+            <svg width="40%" height="40%" viewBox="0 0 42 37" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M14.0718 4C17.151 -1.33334 24.849 -1.33333 27.9282 4.00001L40.0525 25C43.1317 30.3333 39.2827 37 33.1243 37L8.87563 37C2.71722 37 -1.13177 30.3333 1.94743 25L14.0718 4Z" fill="#6B8779"/>
+            </svg>
+            <div><b>{min}</b></div>
+        </div>
+
+        <div class="bottom-triangle" style="left: 50%;">
+            <svg width="40%" height="40%" viewBox="0 0 42 37" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M14.0718 4C17.151 -1.33334 24.849 -1.33333 27.9282 4.00001L40.0525 25C43.1317 30.3333 39.2827 37 33.1243 37L8.87563 37C2.71722 37 -1.13177 30.3333 1.94743 25L14.0718 4Z" fill="#6B8779"/>
+            </svg>
+            <div><b>{mid}</b></div>
+        </div>
+
+        <div class="bottom-triangle" style="left: 90.5%;">
+            <svg width="40%" height="40%" viewBox="0 0 42 37" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M14.0718 4C17.151 -1.33334 24.849 -1.33333 27.9282 4.00001L40.0525 25C43.1317 30.3333 39.2827 37 33.1243 37L8.87563 37C2.71722 37 -1.13177 30.3333 1.94743 25L14.0718 4Z" fill="#6B8779"/>
+            </svg>
+            <div><b>{max}</b></div>
+        </div>
+
+        <div class="message-one">
+            <p>This result ranks you in the</p>
+            <div class="colored-percentile" style="background-color: {getColorRedToBlue(min, mid, max, result)};">
+                <b>{percentile}<sup>{suffix(percentile)}</sup> percentile</b>
+            </div>
+            <p>*</p>
+        </div>
+        <div class="message-two">
+            <p>Having a</p>
+            <div class="higher">higher</div>
+            <p>percentile ranking <b>is better</b> for this index.</p>
+        </div>
+    </div>
+{/if}
+
+<style>
+    .parent {
+        display: flex;
+        width: 100%;
+        height: 10px;
+        position: relative;
+        font-family: 'Sen', 'Noto Sans JP', sans-serif;
+    }
+
+    .slider {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        position: absolute;
+        transform: translate(-50%, -110%);
+        width: 24%;
+        max-height: 85px;
+    }
+
+    .bottom-triangle {
+        position: absolute;
+        top: 100%;
+        transform: translate(-50%, 10%);
+        width: 8%;
+        max-height: 60px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        color: #6B8779;
+    }
+
+    .message-one {
+        position: absolute;
+        top: 5rem;
+        width: 55%;
+        height: 3rem;
+        transform: translate(-50%, 0%);
+        left: 50%;
+        max-height: 40px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 1.1rem;
+        gap: .25rem;
+    }
+
+    .message-two {
+        position: absolute;
+        top: 8rem;
+        width: 55%;
+        height: 2rem;
+        transform: translate(-50%, 0%);
+        left: 50%;
+        max-height: 30px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 0.7rem;
+        gap: .25rem;
+    }
+
+    .colored-percentile {
+        height: 90%;
+        width: 32%;
+        color: white;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 7px;
+    }
+
+    .higher {
+        height: 60%;
+        width: 10%;
+        background-color: #015566;
+        color: white;
+        border-radius: 5px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .colorBox {
+        width: 14%;
+        border-radius: 24px;
+        margin-left: 0.2%;
+        margin-right: 0.2%;
+    }
+
+    .colorBoxShort {
+        width: 10%;
+        border-radius: 24px;
+    }
+
+    .rotateImg {
+        transform: rotate(180deg);
+    }
+
+    p {
+        margin: 0;
+    }
+</style>