score + filter

src/SliderCheckbox.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core';
+
+interface Props {
+    modelValue?: boolean;
+}
+interface Emits {
+    (e: 'update:modelValue', value: boolean): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    modelValue: false
+});
+const emit = defineEmits<Emits>();
+
+const value = useVModel(props, 'modelValue', emit);
+</script>
+
+<template>
+    <label class="flex items-center relative w-max cursor-pointer select-none">
+        <input type="checkbox" class="appearance-none transition-colors cursor-pointer w-10 h-5 rounded-full checked:bg-emerald-500 peer" v-model="value" />
+        <span class="w-5 h-5 right-5 absolute rounded-full transform transition-transform bg-slate-100 peer-checked:bg-emerald-200" />
+    </label>
+</template>
+
+<style scoped lang="postcss">
+    input:checked ~ span:last-child {
+        --tw-translate-x: 1.25rem;
+    }
+</style>

src/formaters.ts

@@ -7,4 +7,8 @@ export const formatIsk = (value: number | bigint) => iskFormater.format(value) +
 export const percentFormater = new Intl.NumberFormat("en-US", {
     style: "percent",
     minimumFractionDigits: 0
+});
+
+export const twoDigitFormater = new Intl.NumberFormat("en-US", {
+    maximumFractionDigits: 2
 });

src/market/scan/HistoryQuartils.ts

@@ -2,6 +2,7 @@ import { MarketOrderHistory } from "@/market";
 
 export type HistoryQuartils = {
     totalVolume: number,
+    totalOrders: number,
     q1: number,
     median: number,
     q3: number,
@@ -10,6 +11,7 @@ export type HistoryQuartils = {
 export const getHistoryQuartils = (history: MarketOrderHistory[], days?: number): HistoryQuartils => {
     const now = Date.now();
 
+    let totalOrders = 0;
     const volumes = history
         .flatMap(h => {
             const volume = h.volume;
@@ -20,6 +22,7 @@ export const getHistoryQuartils = (history: MarketOrderHistory[], days?: number)
 
             const e = estimateVolume(h);
 
+            totalOrders += h.order_count;
             return [[h.highest, e], [h.lowest, volume - e]];
         })
         .filter(h => h[1] > 0)
@@ -45,6 +48,7 @@ export const getHistoryQuartils = (history: MarketOrderHistory[], days?: number)
     }
     return {
         totalVolume,
+        totalOrders,
         q1: quartils[0],
         median: quartils[1],
         q3: quartils[2],

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 mb-2 mt-4">
-        <div class="flex justify-self-end mb-2 mt-4 ms-auto">
+        <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>

src/table/SortableHeader.vue

@@ -29,7 +29,7 @@ th {
     @apply relative h-8 pe-3;
 }
 span.asc, span.desc {
-    @apply absolute end-2 cursor-pointer text-xs;
+    @apply absolute end-1 cursor-pointer text-xs;
 }
 span.asc {
     @apply top-0.5;