feat: add arrow graphs

GlycanAge · Oct 4, 2024 · 3f44fad · 3f44fad
1 parent 28ea491
commit 3f44fad
Show file tree

Hide file tree

Showing 5 changed files with 203 additions and 0 deletions.
diff --git a/packages/lib/index.ts b/packages/lib/index.ts
@@ -27,4 +27,5 @@ export default () => {
   import('./src/single-overview/single-overview.wc.svelte');
   import('./src/main-result/main-result.wc.svelte');
   import('./src/insights-overview/insights-overview.wc.svelte');
+  import('./src/arrow-graph/arrow-graph.wc.svelte');
 };
diff --git a/packages/lib/src/arrow-graph/arrow-graph.wc.svelte b/packages/lib/src/arrow-graph/arrow-graph.wc.svelte
@@ -0,0 +1,139 @@
+<svelte:options customElement={{ tag: 'ga-arrow-graph', shadow: 'open' }}/>
+
+<script lang="ts">
+    import {onMount} from 'svelte';
+    import {Service} from '../shared/utils/service';
+    import {getTranslation} from '../shared/functions/helpers';
+    import Arrow2 from '../shared/components/Arrow2.svelte';
+
+    export let lang: string;
+    export let subtype: string;
+    export let report: string;
+    export let direction: string;
+    export let service: Service = window.GaReportService;
+
+    let subtypes = [
+        {
+            name: 'mature',
+            label: 'Mature',
+            csvName: 'G0percentile',
+        },
+        {
+            name: 'youth',
+            label: 'Youth',
+            csvName: 'G2percentile',
+        },
+        {
+            name: 'shield',
+            label: 'Shield',
+            csvName: 'Spercentile',
+        },
+        {
+            name: 'lifestyle',
+            label: 'Lifestyle',
+            csvName: 'Bpercentile',
+        },
+        {
+            name: 'median',
+            label: 'Median',
+            csvName: 'G1percentile',
+        },
+        {
+            name: 'peak18',
+            label: 'Glycan 18',
+            csvName: 'P18percentile',
+        },
+        {
+            name: 'peak22',
+            label: 'Glycan 22',
+            csvName: 'P22percentile',
+        },
+        {
+            name: 'peak23',
+            label: 'Glycan 23',
+            csvName: 'P23percentile',
+        },
+        {
+            name: 'peak26',
+            label: 'Glycan 26',
+            csvName: 'P26percentile',
+        }
+
+    ]
+
+    let reportData: any;
+
+    let message = '';
+    let percentile = 0;
+
+    const details = subtypes.find(x => x.name === subtype);
+
+    function getMessage() {
+        if (percentile < 34) {
+            return getTranslation(lang, 'BELOW_AVERAGE');
+        }
+        if (percentile >= 34 && percentile <= 66) {
+            return getTranslation(lang, 'AROUND_AVERAGE');
+        }
+        if (percentile > 66) {
+            return getTranslation(lang, 'ABOVE_AVERAGE');
+        }
+    }
+
+    onMount(async () => {
+        reportData = await service.getReport(report);
+
+        if (details) {
+            percentile = Number(reportData[details.csvName]);
+            message = getMessage();
+        }
+
+        if (percentile === 100 || percentile === 0) {
+            percentile = percentile === 100 ? 99 : 1;
+        }
+
+        return;
+    });
+
+    function color(perc: number, dir: string) {
+        if (dir === 'left') {
+            return perc >= 34 ? '#119999' : perc > 18 && perc < 34 ? '#EE6600' : '#DD2222';
+        } else {
+            return perc <= 66 ? '#119999' : perc > 66 && perc < 82 ? '#EE6600' : '#DD2222';
+        }
+    }
+</script>
+
+
+<div class="main">
+    <div class="label" style="font-size: 0.8rem;">
+        <div style="display: flex; flex-direction: column; padding-left: 0.3rem;">
+            <div style="font-size: 0.9rem;"><b>{getTranslation(lang, 'GLYCAN')}</b> <b>{details.label}</b></div>
+            <div>{message}</div>
+        </div>
+    </div>
+    <div style="width: 70%; display: flex; align-items: center; justify-content: center;">
+        <Arrow2 {direction} {percentile} />
+    </div>
+    <div style="width: 5%; height: 100%; display: flex; align-items: center;">
+        <svg width="30" height="28" viewBox="0 0 30 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M13.599 14.9335L11.6656 13.0335C11.4212 12.789 11.1156 12.6668 10.749 12.6668C10.3823 12.6668 10.0656 12.8002 9.79896 13.0668C9.55451 13.3113 9.43229 13.6224 9.43229 14.0002C9.43229 14.3779 9.55451 14.689 9.79896 14.9335L12.6656 17.8002C12.9323 18.0668 13.2434 18.2002 13.599 18.2002C13.9545 18.2002 14.2656 18.0668 14.5323 17.8002L20.199 12.1335C20.4656 11.8668 20.5934 11.5557 20.5823 11.2002C20.5712 10.8446 20.4434 10.5335 20.199 10.2668C19.9323 10.0002 19.6156 9.86127 19.249 9.85016C18.8823 9.83905 18.5656 9.96683 18.299 10.2335L13.599 14.9335ZM9.86563 27.0002L7.93229 23.7335L4.26563 22.9335C3.93229 22.8668 3.66563 22.6946 3.46563 22.4168C3.26563 22.1391 3.18785 21.8335 3.23229 21.5002L3.59896 17.7335L1.09896 14.8668C0.876736 14.6224 0.765625 14.3335 0.765625 14.0002C0.765625 13.6668 0.876736 13.3779 1.09896 13.1335L3.59896 10.2668L3.23229 6.50016C3.18785 6.16683 3.26563 5.86127 3.46563 5.58349C3.66563 5.30571 3.93229 5.13349 4.26563 5.06683L7.93229 4.26683L9.86563 1.00016C10.0434 0.711269 10.2878 0.516825 10.599 0.416825C10.9101 0.316825 11.2212 0.333491 11.5323 0.466825L14.999 1.93349L18.4656 0.466825C18.7767 0.333491 19.0878 0.316825 19.399 0.416825C19.7101 0.516825 19.9545 0.711269 20.1323 1.00016L22.0656 4.26683L25.7323 5.06683C26.0656 5.13349 26.3323 5.30571 26.5323 5.58349C26.7323 5.86127 26.8101 6.16683 26.7656 6.50016L26.399 10.2668L28.899 13.1335C29.1212 13.3779 29.2323 13.6668 29.2323 14.0002C29.2323 14.3335 29.1212 14.6224 28.899 14.8668L26.399 17.7335L26.7656 21.5002C26.8101 21.8335 26.7323 22.1391 26.5323 22.4168C26.3323 22.6946 26.0656 22.8668 25.7323 22.9335L22.0656 23.7335L20.1323 27.0002C19.9545 27.2891 19.7101 27.4835 19.399 27.5835C19.0878 27.6835 18.7767 27.6668 18.4656 27.5335L14.999 26.0668L11.5323 27.5335C11.2212 27.6668 10.9101 27.6835 10.599 27.5835C10.2878 27.4835 10.0434 27.2891 9.86563 27.0002Z"
+                  fill="{color(percentile, direction)}"/>
+        </svg>
+    </div>
+</div>
+
+
+<style>
+    .main {
+        height: 100%;
+        width: 100%;
+        display: flex;
+    }
+
+    .label {
+        width: 25%;
+        display: flex;
+        align-items: center;
+    }
+</style>
diff --git a/packages/lib/src/insights-overview/insights-overview.wc.svelte b/packages/lib/src/insights-overview/insights-overview.wc.svelte
@@ -340,6 +340,7 @@
         border-top: 1px solid #09341F33;
         display: flex;
         padding-top: 0.8rem;
+        margin-bottom: 1.1rem;
     }
 
     .diseases {

diff --git a/packages/lib/src/shared/components/Arrow2.svelte b/packages/lib/src/shared/components/Arrow2.svelte
@@ -0,0 +1,60 @@
+<script lang="ts">
+    import {scale} from '../functions/helpers';
+
+    export let percentile = 0;
+    export let direction = '';
+
+    function calculate(perc: number) {
+        if (perc === 50) {
+            return 50;
+        } else if (perc < 2) {
+            return 9;
+        } else if (perc > 98) {
+            return 91;
+        } else if (perc >= 2 && perc < 50) {
+            return scale(perc, 9.2, 50, 13, 50);
+        } else if (perc > 50 && perc <= 98) {
+            return scale(perc, 50, 90.8, 50, 86.8);
+        }
+    }
+
+    function color(perc: number, dir: string) {
+        if (dir === 'left') {
+            return perc >= 34 ? '#119999' : perc > 18 && perc < 34 ? '#EE6600' : '#DD2222';
+        } else {
+            return perc <= 66 ? '#119999' : perc > 66 && perc < 82 ? '#EE6600' : '#DD2222';
+        }
+    }
+</script>
+
+
+<div style="position: relative; width: 92%; height: 4px; display: flex; justify-content: space-between; gap: 4px;">
+    <div style="position: relative; height: 100%; flex: 1; background-color: {direction === 'left' ? '#DD2222' : '#CADBD1'}; border-radius: 4px;">
+        {#if direction === 'left'}
+            <div style="position: absolute; right: 4px; bottom: 8px; height: 3px; width: 24px; background-color: #DD2222; border-radius: 4px; transform: rotate(135deg);"></div>
+            <div style="position: absolute; right: 4px; top: 8px; height: 3px; width: 24px; background-color: #DD2222; border-radius: 4px; transform: rotate(-135deg);"></div>
+        {/if}
+    </div>
+    <div style="height: 100%; flex: 2; background-color: {direction === 'left' ? '#DD2222' : '#CADBD1'}; border-radius: 4px;"></div>
+    <div style="height: 100%; flex: 2; background-color: {direction === 'left' ? '#F2800D' : '#CADBD1'}; border-radius: 4px;"></div>
+    <div style="position: relative; height: 100%; flex: 2; background-color: #CADBD1; border-radius: 4px;"></div>
+    <div style="height: 100%; flex: 2; background-color: #CADBD1; border-radius: 4px;"></div>
+    <div style="height: 100%; flex: 2; background-color: {direction === 'left' ? '#CADBD1' : '#F2800D'}; border-radius: 4px;"></div>
+    <div style="height: 100%; flex: 2; background-color: {direction === 'left' ? '#CADBD1' : '#DD2222'}; border-radius: 4px;"></div>
+    <div style="position: relative; height: 100%; flex: 1; background-color: {direction === 'left' ? '#CADBD1' : '#DD2222'}; border-radius: 4px;">
+        {#if direction === 'right'}
+            <div style="position: absolute; left: 4px; bottom: 8px; height: 3px; width: 24px; background-color: #DD2222; border-radius: 4px; transform: rotate(45deg);"></div>
+            <div style="position: absolute; left: 4px; top: 8px; height: 3px; width: 24px; background-color: #DD2222; border-radius: 4px; transform: rotate(-45deg);"></div>
+        {/if}
+    </div>
+
+    <div style="left: {calculate(percentile)}%; position: absolute; transform: translate(-50%, -100%); display: flex; align-items: center; flex-direction: column; width: 100px; height: 38px;">
+        <svg style="position: relative;" width="60" height="60" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M20.0001 35.5418C19.6112 35.5418 19.2223 35.4724 18.8334 35.3335C18.4445 35.1946 18.0973 34.9863 17.7917 34.7085C15.9862 33.0418 14.389 31.4168 13.0001 29.8335C11.6112 28.2502 10.4515 26.7154 9.52091 25.2293C8.59036 23.7432 7.88203 22.3127 7.39591 20.9377C6.9098 19.5627 6.66675 18.2502 6.66675 17.0002C6.66675 12.8335 8.00703 9.51405 10.6876 7.04183C13.3681 4.56961 16.4723 3.3335 20.0001 3.3335C23.5279 3.3335 26.632 4.56961 29.3126 7.04183C31.9931 9.51405 33.3334 12.8335 33.3334 17.0002C33.3334 18.2502 33.0904 19.5627 32.6042 20.9377C32.1181 22.3127 31.4098 23.7432 30.4792 25.2293C29.5487 26.7154 28.389 28.2502 27.0001 29.8335C25.6112 31.4168 24.014 33.0418 22.2084 34.7085C21.9029 34.9863 21.5556 35.1946 21.1667 35.3335C20.7779 35.4724 20.389 35.5418 20.0001 35.5418Z"
+                  fill="{color(percentile, direction)}"/>
+        </svg>
+    </div>
+    <div style="left: {calculate(percentile)}%; position: absolute; transform: translate(-50%, -80%); display: flex; align-items: center; flex-direction: column; width: 100px; height: 38px; color: white; font-size: 0.75rem;">
+        <b>{percentile}</b>
+    </div>
+</div>
diff --git a/packages/lib/src/shared/consts/languages.const.ts b/packages/lib/src/shared/consts/languages.const.ts
@@ -4,8 +4,10 @@ export let english = {
   GLYCAN: 'Glycan',
   PEAK: 'Peak',
   LOWER_THAN_AVERAGE: 'Lower than average',
+  BELOW_AVERAGE: 'Below average',
   AROUND_AVERAGE: 'Around average',
   HIGHER_THAN_AVERAGE: 'Higher than average',
+  ABOVE_AVERAGE: 'Above average',
   SOME_OVERLAP_LONG: 'Some overlap',
   MINOR_OVERLAP_LONG: 'Minor overlap',
   NO_OVERLAP_LONG: 'No significant overlap',