rework market trends

src/market/acquisition/AcquisitionQuartilesTooltip.vue

@@ -1,12 +1,9 @@
 <script setup lang="ts">
 import {LoadingSpinner, Tooltip} from '@/components';
 import {formatIsk} from '@/formaters';
-import {getHistory, getHistoryQuartils} from '@/market';
-import {ArrowTrendingDownIcon, ArrowTrendingUpIcon} from '@heroicons/vue/24/outline';
+import {getQuartiles, type HistoryQuartiles, MarketTrendIcon} from '@/market';
 import {computedAsync} from '@vueuse/core';
-import {ref, watchEffect} from 'vue';
-
-const trendingScale = 3;
+import {computed, ref} from 'vue';
 
 interface Props {
     id: number;
@@ -17,42 +14,36 @@ interface Props {
 const props = defineProps<Props>();
 
 const open = ref(false);
+const loading = ref(false);
 
-const q1 = ref(0);
-const median = ref(0);
-const q3 = ref(0);
-const lineColor = ref('');
-const history = computedAsync(() => getHistory(props.id), []);
+const quartiles = computedAsync<HistoryQuartiles | null>(
+    () => open.value && props.id ? getQuartiles(props.id) : null,
+    null,
+    loading,
+);
 
-watchEffect(async () => {
-    if (!open.value || !props.id) {
-        return;
+const lineColor = computed(() => {
+    if (!quartiles.value) {
+        return '';
     }
-    const quartils = getHistoryQuartils(history.value);
-
-    q1.value = quartils.q1;
-    median.value = quartils.median;
-    q3.value = quartils.q3;
-
-    if (props.buy >= quartils.q3) {
-        lineColor.value = 'line-blue';
-    } else if (props.sell >= quartils.q3) {
-        lineColor.value = 'line-green';
-    } else {
-        lineColor.value = '';
+    if (props.buy >= quartiles.value.q3) {
+        return 'line-blue';
     }
-})
+    if (props.sell >= quartiles.value.q3) {
+        return 'line-green';
+    }
+    return '';
+});
 </script>
 
 <template>
     <Tooltip v-model:open="open" class="tooltip">
         <template #header>
-            <LoadingSpinner v-if="history.length < trendingScale" />
-            <ArrowTrendingUpIcon v-else-if="history[0].average > history[trendingScale - 1].average" />
-            <ArrowTrendingDownIcon v-else />
+            <LoadingSpinner v-if="loading || !quartiles" />
+            <MarketTrendIcon v-else :trend="quartiles.trend" />
         </template>
         <template #default>
-            <div class="bg-slate-500 -left-1/2 relative tooltip-content" v-if="history.length > 0">
+            <div class="bg-slate-500 -left-1/2 relative tooltip-content" v-if="quartiles">
                 <table>
                     <thead>
                         <tr>
@@ -63,9 +54,9 @@ watchEffect(async () => {
                     </thead>
                     <tbody>
                         <tr :class="lineColor">
-                            <td class="text-right text-nowrap">{{ formatIsk(q1) }}</td>
-                            <td class="text-right text-nowrap">{{ formatIsk(median) }}</td>
-                            <td class="text-right text-nowrap">{{ formatIsk(q3) }}</td>
+                            <td class="text-right text-nowrap">{{ formatIsk(quartiles.q1) }}</td>
+                            <td class="text-right text-nowrap">{{ formatIsk(quartiles.median) }}</td>
+                            <td class="text-right text-nowrap">{{ formatIsk(quartiles.q3) }}</td>
                         </tr>
                     </tbody>
                 </table>

src/market/acquisition/AcquisitionResultTable.vue

@@ -5,7 +5,7 @@ import {MinusIcon, PlusIcon} from '@heroicons/vue/24/outline';
 import {useStorage} from '@vueuse/core';
 import {computed, ref} from 'vue';
 import {AcquiredType} from './AcquiredType';
-import AcquisitionQuantilsTooltip from './AcquisitionQuantilsTooltip.vue';
+import AcquisitionQuartilesTooltip from './AcquisitionQuartilesTooltip.vue';
 import {formatEveDate, formatIsk, percentFormater} from "@/formaters.ts";
 
 type Result = {
@@ -189,7 +189,7 @@ const total = computed(() => {
                     <td v-if="showColumn('name')">
                         <div class="flex">
                             <MarketTypeLabel :id="r.data.type.id" :name="r.data.name" />
-                            <AcquisitionQuantilsTooltip :id="r.data.type.id" :buy="r.data.buy" :sell="r.data.sell" />
+                            <AcquisitionQuartilesTooltip :id="r.data.type.id" :buy="r.data.buy" :sell="r.data.sell" />
                         </div>
                     </td>
                     <td v-if="showColumn('buy')" class="text-right">{{ formatIsk(r.data.buy) }}</td>