score weight + quantils tooltip

src/market/track/BuyModal.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import Modal from '@/Modal.vue';
+import { Modal } from '@/components';
 import { formatIsk } from '@/formaters';
 import { MarketType } from '@/market';
 import { ref } from 'vue';

src/market/track/SellModal.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import Modal from '@/Modal.vue';
+import { Modal } from '@/components';
 import { MarketType } from '@/market';
 import { ref } from 'vue';
 import { useTrackedItemStore } from './track';

src/market/track/TrackQuantilsTooltip.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { 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 { ref, watchEffect } from 'vue';
+
+interface Props {
+    id: number;
+    buy: number;
+    sell: number;
+}
+
+const props = defineProps<Props>();
+
+const open = ref(false);
+
+const q1 = ref(0);
+const median = ref(0);
+const q3 = ref(0);
+const lineColor = ref('');
+
+watchEffect(async () => {
+    if (!open.value || !props.id) {
+        return;
+    }
+    const history = await getHistory(jitaId, props.id);
+    const quartils = getHistoryQuartils(history);
+
+    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 = '';
+    }
+})
+</script>
+
+<template>
+    <Tooltip v-model:open="open" class="tooltip">
+        <template #header>
+            <ArrowTrendingUpIcon />
+        </template>
+        <template #default>
+            <div class="bg-slate-500 -left-1/2 relative -top-2">
+                <table>
+                    <thead>
+                        <tr>
+                            <th>Q1</th>
+                            <th>Median</th>
+                            <th>Q3</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr :class="lineColor">
+                            <td class="text-right">{{ formatIsk(q1) }}</td>
+                            <td class="text-right">{{ formatIsk(median) }}</td>
+                            <td class="text-right">{{ formatIsk(q3) }}</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </template>
+    </Tooltip>
+</template>
+
+<style scoped lang="postcss">
+.tooltip {
+    @apply ms-auto;
+    >:deep(div.header) {
+        @apply btn-icon-stroke px-2;
+    }
+    &.open>:deep(div.header) {
+        @apply bg-slate-600 rounded-t;
+    }
+}
+</style>

src/market/track/TrackResultTable.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
+import { SortableHeader, useSort } from '@/components/table';
 import { formatIsk, percentFormater } from '@/formaters';
 import { MarketType, MarketTypeLabel, TaxInput, useMarketTaxStore } from "@/market";
-import { SortableHeader, useSort } from '@/table';
 import { MinusIcon, PlusIcon } from '@heroicons/vue/24/outline';
 import { useStorage } from '@vueuse/core';
 import { computed, ref } from 'vue';
 import { TrackedItem } from '.';
+import TrackQuantilsTooltip from './TrackQuantilsTooltip.vue';
 
 type Result = {
     type: MarketType;
@@ -97,7 +98,10 @@ const getLineColor = (result: Result) => {
         <tbody>
             <tr v-for="r in sortedArray" :key="r.typeID" :class="getLineColor(r)">
                 <td>
-                    <MarketTypeLabel :id="r.typeID" :name="r.name" />
+                    <div class="flex">
+                        <MarketTypeLabel :id="r.typeID" :name="r.name" />
+                        <TrackQuantilsTooltip :id="r.typeID" :buy="r.buy" :sell="r.sell" />
+                    </div>
                 </td>
                 <td class="text-right">{{ formatIsk(r.buy) }}</td>
                 <td class="text-right">{{ formatIsk(r.sell) }}</td>
@@ -118,4 +122,4 @@ const getLineColor = (result: Result) => {
 div.end {
     @apply justify-self-end ms-2;
 }
-</style>
+</style>@/components/table