score + filter

src/market/scan/ScanResultTable.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { formatIsk, percentFormater } from '@/formaters';
+import SliderCheckbox from '@/SliderCheckbox.vue';
+import { formatIsk, percentFormater, twoDigitFormater } from '@/formaters';
 import { MarketType, MarketTypeLabel, TaxInput, useMarketTaxStore } from "@/market";
 import { SortableHeader, useSort } from '@/table';
 import { ShoppingCartIcon, TrashIcon } from '@heroicons/vue/24/outline';
@@ -17,6 +18,7 @@ type Result = {
     mmedian: number;
     q3: number;
     profit: number;
+    score: number;
 }
 
 interface Props {
@@ -38,10 +40,13 @@ const marketTaxStore = useMarketTaxStore();
 const days = useStorage('market-scan-days', 365);
 const threshold = useStorage('market-scan-threshold', 10);
 const filter = ref("");
+const onlyCheap = ref(false);
 const { sortedArray, headerProps } = useSort<Result>(computed(() => props.items
     .filter(r => r.type.name.toLowerCase().includes(filter.value.toLowerCase()))
     .map(r => {
         const quartils = getHistoryQuartils(r.history, days.value);
+        const profit = marketTaxStore.calculateProfit(quartils.q1, quartils.q3);
+        const score = profit <= 0 ? 0 : Math.sqrt(quartils.totalVolume * r.sell * profit / days.value);
 
         return {
             type: r.type,
@@ -52,9 +57,10 @@ const { sortedArray, headerProps } = useSort<Result>(computed(() => props.items
             q1: quartils.q1,
             mmedian: quartils.median,
             q3: quartils.q3,
-            profit: marketTaxStore.calculateProfit(quartils.q1, quartils.q3)
+            profit,
+            score
         };
-    })), {
+    }).filter(r => !onlyCheap.value || (r.buy <= r.q1 && r.profit >= (threshold.value / 100)))), {
         defaultSortKey: 'name',
         defaultSortDirection: 'asc'
     })
@@ -71,8 +77,8 @@ const getLineColor = (result: Result) => {
 </script>
 
 <template>
-    <div class="flex">
-        <div class="flex justify-self-end mb-2 mt-4 ms-auto">
+    <div class="flex mb-2 mt-4">
+        <div class="flex justify-self-end ms-auto">
             <TaxInput />
             <div class="end">
                 <span>Profit Threshold: </span>
@@ -82,6 +88,9 @@ const getLineColor = (result: Result) => {
                 <span>Days: </span>
                 <input type="number" min="1" max="365" step="1" v-model="days" />
             </div>
+            <div class="end flex">
+                <SliderCheckbox class="me-1" v-model="onlyCheap" /> Show only cheap items
+            </div>
             <div class="end">
                 <span>Filter: </span>
                 <input type="search" class="w-96" v-model="filter" >
@@ -98,6 +107,7 @@ const getLineColor = (result: Result) => {
                 <SortableHeader v-bind="headerProps" sortKey="median">Median</SortableHeader>
                 <SortableHeader v-bind="headerProps" sortKey="q3">Q3</SortableHeader>
                 <SortableHeader v-bind="headerProps" sortKey="profit">Profit</SortableHeader>
+                <SortableHeader v-bind="headerProps" sortKey="score">Score</SortableHeader>
                 <th></th>
             </tr>
         </thead>
@@ -111,7 +121,8 @@ const getLineColor = (result: Result) => {
                 <td class="text-right">{{ formatIsk(r.q1) }}</td>
                 <td class="text-right">{{ formatIsk(r.mmedian) }}</td>
                 <td class="text-right">{{ formatIsk(r.q3) }}</td>
-                <td class="text-right">{{  percentFormater.format(r.profit) }}</td>
+                <td class="text-right">{{ percentFormater.format(r.profit) }}</td>
+                <td class="text-right">{{ twoDigitFormater.format(r.score) }}</td>
                 <td class="text-right">
                     <button class="btn-icon-stroke me-1" @click="$emit('buy', r.type, r.buy, r.sell)"><ShoppingCartIcon /></button>
                     <button class="btn-icon-stroke me-1" @click="$emit('remove', r.type)"><TrashIcon /></button>