scan front

2026-06-11 20:32:46 +02:00
parent dd031551ca
commit 7ca38aee70
11 changed files with 155 additions and 175 deletions
@@ -0,0 +1,170 @@
+<script setup lang="ts">
+import {SliderCheckbox} from '@/components';
+import {SortableHeader, useSort, VirtualScrollTable} from '@/components/table';
+import {formatIsk, percentFormater} from "@/formaters";
+import {MarketType, MarketTypeLabel} from "@/market";
+import {ShoppingCartIcon} from '@heroicons/vue/24/outline';
+import {useStorage} from '@vueuse/core';
+import {computed, ref} from 'vue';
+import {useAcquiredTypesStore} from '../acquisition';
+import {ScanResult} from './scan';
+
+type Result = {
+    type: MarketType;
+    typeID: number;
+    name: string;
+    buy: number;
+    sell: number;
+    q1: number;
+    median: number;
+    q3: number;
+    totalVolume: number;
+    acquisitions: number;
+    profit: number;
+    score: number;
+}
+
+interface Props {
+    items?: ScanResult[];
+    infoOnly?: boolean;
+    ignoredColums?: string[] | string;
+}
+
+interface Emits {
+    (e: 'buy', type: MarketType, buy: number, sell: number): void;
+}
+
+const scoreFormater = new Intl.NumberFormat("en-US", {
+    maximumFractionDigits: 0
+});
+const volumeFormater = new Intl.NumberFormat("en-US", {
+    maximumFractionDigits: 0
+});
+
+const props = withDefaults(defineProps<Props>(), {
+    items: () => [],
+    infoOnly: false,
+    ignoredColums: () => []
+});
+defineEmits<Emits>();
+
+const acquiredTypesStore = useAcquiredTypesStore();
+
+const threshold = useStorage('market-scan-threshold', 10);
+const filter = ref("");
+const onlyCheap = ref(false);
+const columnsToIgnore = computed(() => {
+    const ic = typeof props.ignoredColums === 'string' ? [props.ignoredColums] : props.ignoredColums;
+
+    if (props.infoOnly && !ic.includes('buttons')) {
+        return [...ic, 'buttons'];
+    }
+    return ic;
+});
+const { sortedArray, headerProps, showColumn } = useSort<Result>(computed(() => props.items
+    .filter(r => r.type.name.toLowerCase().includes(filter.value.toLowerCase()))
+    .map(r => {
+        const acquisitions = columnsToIgnore.value.includes('acquisitions') ? 0 : acquiredTypesStore.acquiredTypes
+            .filter(t => t.type === r.type.id)
+            .reduce((a, b) => a + b.remaining, 0);
+
+        return {
+            type: r.type,
+            typeID: r.type.id,
+            name: r.type.name,
+            buy: r.buy,
+            sell: r.sell,
+            q1: r.q1,
+            median: r.median,
+            q3: r.q3,
+            totalVolume: r.totalVolume,
+            acquisitions,
+            profit: r.profit,
+            score: r.score
+        };
+    }).filter(r => !onlyCheap.value || (r.buy <= r.q1 && r.profit >= (threshold.value / 100)))), {
+        defaultSortKey: 'score',
+        defaultSortDirection: 'desc',
+        ignoredColums: columnsToIgnore
+    })
+const getLineColor = (result: Result) => {
+    if (props.infoOnly) {
+        return '';
+    } else if (result.profit < (threshold.value / 100)) {
+        return 'line-red';
+    } else if (result.sell > 0 && result.sell <= result.q1) {
+        return 'line-blue';
+    } else if (result.buy <= result.q1) {
+        return 'line-green';
+    }
+    return '';
+}
+</script>
+
+<template>
+    <div v-if="!infoOnly" class="flex mb-2 mt-4">
+        <div class="flex justify-self-end ms-auto">
+            <div class="end">
+                <span>Profit Threshold: </span>
+                <input type="number" min="0" max="1000" step="1" v-model="threshold" />
+            </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" />
+            </div>
+        </div>
+    </div>
+    <VirtualScrollTable :list="sortedArray" :itemHeight="33" bottom="1rem">
+        <template #default="{ list }">
+            <thead>
+                <tr>
+                    <SortableHeader v-bind="headerProps" sortKey="name">Item</SortableHeader>
+                    <SortableHeader v-bind="headerProps" sortKey="buy">Buy</SortableHeader>
+                    <SortableHeader v-bind="headerProps" sortKey="sell">Sell</SortableHeader>
+                    <SortableHeader v-bind="headerProps" sortKey="q1">Q1</SortableHeader>
+                    <SortableHeader v-bind="headerProps" sortKey="median">Median</SortableHeader>
+                    <SortableHeader v-bind="headerProps" sortKey="q3">Q3</SortableHeader>
+                    <SortableHeader v-bind="headerProps" sortKey="totalVolume">Volume</SortableHeader>
+                    <SortableHeader v-bind="headerProps" sortKey="profit">Profit</SortableHeader>
+                    <SortableHeader v-bind="headerProps" sortKey="score">Score</SortableHeader>
+                    <SortableHeader v-bind="headerProps" sortKey="acquisitions">Acquisitions</SortableHeader>
+                    <SortableHeader v-bind="headerProps" sortKey="buttons" unsortable />
+                </tr>
+            </thead>
+            <tbody>
+                <tr v-for="r in list" :key="r.data.typeID" :class="getLineColor(r.data)">
+                    <td v-if="showColumn('name')">
+                        <MarketTypeLabel :id="r.data.typeID" :name="r.data.name" />
+                    </td>
+                    <td v-if="showColumn('buy')" class="text-right">{{ formatIsk(r.data.buy) }}</td>
+                    <td v-if="showColumn('sell')" class="text-right">{{ formatIsk(r.data.sell) }}</td>
+                    <td v-if="showColumn('q1')" class="text-right">{{ formatIsk(r.data.q1) }}</td>
+                    <td v-if="showColumn('median')" class="text-right">{{ formatIsk(r.data.median) }}</td>
+                    <td v-if="showColumn('q3')" class="text-right">{{ formatIsk(r.data.q3) }}</td>
+                    <td v-if="showColumn('totalVolume')" class="text-right">{{ volumeFormater.format(r.data.totalVolume) }}</td>
+                    <td v-if="showColumn('profit')" class="text-right">{{ percentFormater.format(r.data.profit) }}</td>
+                    <td v-if="showColumn('score')" class="text-right">{{ scoreFormater.format(r.data.score) }}</td>
+                    <td v-if="showColumn('acquisitions')" class="text-right">{{ r.data.acquisitions }}</td>
+                    <td v-if="showColumn('buttons')" class="text-right">
+                        <button class="btn-icon me-1" title="Add acquisitions" @click="$emit('buy', r.data.type, r.data.buy, r.data.sell)"><ShoppingCartIcon /></button>
+                    </td>
+                </tr>
+            </tbody>
+        </template>
+        <template #empty>
+            <div class="text-center mt-4">
+                <span>No items found</span>
+            </div>
+        </template>
+    </VirtualScrollTable>
+</template>
+
+<style scoped>
+@reference "@/style.css";
+div.end {
+    @apply justify-self-end ms-2;
+}
+</style>
@@ -0,0 +1,3 @@
+export * from './scan';
+
+export { default as ScanResultTable } from './ScanResultTable.vue';
@@ -0,0 +1,53 @@
+import { getHistory, getHistoryQuartils, HistoryQuartils, MarketType, MarketTypePrice } from "@/market";
+import { MarketScanResponse } from "@/generated/mammon";
+
+export type ScanResult = {
+    type: MarketType;
+    buy: number;
+    sell: number;
+    q1: number;
+    median: number;
+    q3: number;
+    totalVolume: number;
+    profit: number;
+    score: number;
+}
+
+// Mirrors mammon's MarketScoreCalculator so the client-side path matches the backend scan.
+export const calculateScore = (quartils: HistoryQuartils, profit: number, orderCount: number, days: number): number => {
+    if (profit <= 0) {
+        return 0;
+    }
+    return Math.sqrt((Math.pow(quartils.totalVolume, 1.1) * Math.pow(quartils.q1, 1.2) * Math.pow(profit, 0.5) * Math.pow(Math.max(1, orderCount), -0.7)) / days);
+}
+
+export const toScanResult = (res: MarketScanResponse, type: MarketType, price: MarketTypePrice): ScanResult => ({
+    type,
+    buy: price.buy,
+    sell: price.sell,
+    q1: res.q1,
+    median: res.median,
+    q3: res.q3,
+    totalVolume: res.totalVolume,
+    profit: res.profit,
+    score: res.score,
+});
+
+// Client-side scan result for a single type (used where the scan endpoint can't be queried per-type).
+export const buildScanResult = async (price: MarketTypePrice, days: number, calculateProfit: (buy: number, sell: number) => number): Promise<ScanResult> => {
+    const history = await getHistory(price.type.id);
+    const quartils = getHistoryQuartils(history, days);
+    const profit = quartils.q1 === 0 || quartils.q3 === 0 ? 0 : calculateProfit(quartils.q1, quartils.q3);
+
+    return {
+        type: price.type,
+        buy: price.buy,
+        sell: price.sell,
+        q1: quartils.q1,
+        median: quartils.median,
+        q3: quartils.q3,
+        totalVolume: quartils.totalVolume,
+        profit,
+        score: calculateScore(quartils, profit, price.orderCount, days),
+    };
+}