score weight + quantils tooltip

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>