arrow trending

src/market/track/TrackQuantilsTooltip.vue

@@ -1,11 +1,14 @@
 <script setup lang="ts">
-import { Tooltip } from '@/components';
+import { LoadingSpinner, Tooltip } from '@/components';
 import { formatIsk } from '@/formaters';
 import { getHistory, jitaId } from '@/market';
 import { getHistoryQuartils } from '@/market/scan';
-import { ArrowTrendingUpIcon } from '@heroicons/vue/24/outline';
+import { ArrowTrendingDownIcon, ArrowTrendingUpIcon } from '@heroicons/vue/24/outline';
+import { computedAsync } from '@vueuse/core';
 import { ref, watchEffect } from 'vue';
 
+const trendingScale = 3;
+
 interface Props {
     id: number;
     buy: number;
@@ -20,13 +23,13 @@ const q1 = ref(0);
 const median = ref(0);
 const q3 = ref(0);
 const lineColor = ref('');
+const history = computedAsync(() => getHistory(jitaId, props.id), []);
 
 watchEffect(async () => {
     if (!open.value || !props.id) {
         return;
     }
-    const history = await getHistory(jitaId, props.id);
-    const quartils = getHistoryQuartils(history);
+    const quartils = getHistoryQuartils(history.value);
 
     q1.value = quartils.q1;
     median.value = quartils.median;
@@ -45,7 +48,9 @@ watchEffect(async () => {
 <template>
     <Tooltip v-model:open="open" class="tooltip">
         <template #header>
-            <ArrowTrendingUpIcon />
+            <LoadingSpinner v-if="history.length < trendingScale" />
+            <ArrowTrendingUpIcon v-else-if="history[0].average > history[trendingScale - 1].average" />
+            <ArrowTrendingDownIcon v-else />
         </template>
         <template #default>
             <div class="bg-slate-500 -left-1/2 relative">
@@ -74,7 +79,7 @@ watchEffect(async () => {
 .tooltip {
     @apply ms-auto;
     >:deep(div.header) {
-        @apply btn-icon-stroke px-2;
+        @apply btn-icon px-2;
     }
     &.open>:deep(div.header) {
         @apply bg-slate-600 rounded-t;