Rework to use marbas and authentik instead of poketbase (#1)

Reviewed-on: #1

src/market/tracking/HistoryQuartils.ts

@@ -0,0 +1,59 @@
+import { MarketOrderHistory } from "@/market";
+
+export type HistoryQuartils = {
+    totalVolume: number,
+    q1: number,
+    median: number,
+    q3: number,
+}
+
+export const getHistoryQuartils = (history: MarketOrderHistory[], days?: number): HistoryQuartils => {
+    const now = Date.now();
+
+    const volumes = history
+        .flatMap(h => {
+            const volume = h.volume;
+
+            if (volume === 0 || (days && new Date(h.date).getTime() < now - days * 24 * 60 * 60 * 1000)) {
+                return [];
+            }
+
+            const e = estimateVolume(h);
+
+            return [[h.highest, e], [h.lowest, volume - e]];
+        })
+        .filter(h => h[1] > 0)
+        .sort((a, b) => a[0] - b[0]);
+
+    const totalVolume = volumes.reduce((acc, [_, v]) => acc + v, 0);
+    const quartilVolume = totalVolume / 4;
+    const quartils: [number, number, number] = [0, 0, 0];
+
+    let currentVolume = 0;
+    let quartil = 0;
+
+    for (const [price, volume] of volumes) {
+        currentVolume += volume;
+
+        if (currentVolume >= quartilVolume * (quartil + 1)) {
+            quartils[quartil] = price;
+            if (quartil === 2) {
+                break;
+            }
+            quartil++;
+        }
+    }
+    return {
+        totalVolume,
+        q1: quartils[0],
+        median: quartils[1],
+        q3: quartils[2],
+    };
+}
+
+const estimateVolume = (history: MarketOrderHistory): number => {
+    if (history.volume === 0) {
+        return 0;
+    }
+    return Math.max(1, Math.round(history.volume * ((history.average - history.lowest) / (history.highest - history.lowest))));
+}

src/market/tracking/TrackingResultTable.vue

@@ -0,0 +1,156 @@
+<script setup lang="ts">
+import { SliderCheckbox } from '@/components';
+import { SortableHeader, useSort } from '@/components/table';
+import { formatIsk, percentFormater } from '@/formaters';
+import { MarketType, MarketTypeLabel, TaxInput, useMarketTaxStore } from "@/market";
+import { BookmarkSlashIcon, ShoppingCartIcon } from '@heroicons/vue/24/outline';
+import { useStorage } from '@vueuse/core';
+import { computed, ref } from 'vue';
+import { TrackingResult, getHistoryQuartils } from '.';
+
+type Result = {
+    type: MarketType;
+    typeID: number;
+    name: string;
+    buy: number;
+    sell: number;
+    q1: number;
+    median: number;
+    q3: number;
+    profit: number;
+    score: number;
+}
+
+interface Props {
+    items?: TrackingResult[];
+    infoOnly?: boolean;
+    ignoredColums?: string[];
+}
+
+interface Emits {
+    (e: 'buy', type: MarketType, buy: number, sell: number): void;
+    (e: 'remove', type: MarketType): void;
+}
+
+const scoreFormater = new Intl.NumberFormat("en-US", {
+    maximumFractionDigits: 0
+});
+
+const props = withDefaults(defineProps<Props>(), {
+    items: () => [],
+    infoOnly: false,
+    ignoredColums: () => []
+});
+defineEmits<Emits>();
+
+const marketTaxStore = useMarketTaxStore();
+
+const days = useStorage('market-tracking-days', 365);
+const threshold = useStorage('market-tracking-threshold', 10);
+const filter = ref("");
+const onlyCheap = ref(false);
+const columnsToIgnore = computed(() => {
+    if (props.infoOnly && !props.ignoredColums.includes('buttons')) {
+        return [...props.ignoredColums, 'buttons'];
+    }
+    return props.ignoredColums;
+});
+const { sortedArray, headerProps, showColumn } = 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 = quartils.q1 === 0 ||  quartils.q3 === 0 ? 0 : marketTaxStore.calculateProfit(quartils.q1, quartils.q3);
+        const score = profit <= 0 ? 0 : Math.sqrt((Math.pow(quartils.totalVolume, 1.1) * Math.pow(quartils.q1, 1.2) *  Math.pow(profit, 0.5) * Math.pow(Math.max(1, r.orderCount), -0.7)) / days.value);
+
+        return {
+            type: r.type,
+            typeID: r.type.id,
+            name: r.type.name,
+            buy: r.buy,
+            sell: r.sell,
+            q1: quartils.q1,
+            median: quartils.median,
+            q3: quartils.q3,
+            profit,
+            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">
+            <TaxInput />
+            <div class="end">
+                <span>Profit Threshold: </span>
+                <input type="number" min="0" max="1000" step="1" v-model="threshold" />
+            </div>
+            <div class="end">
+                <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" >
+            </div>
+        </div>
+    </div>
+    <table>
+        <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="profit">Profit</SortableHeader>
+                <SortableHeader v-bind="headerProps" sortKey="score">Score</SortableHeader>
+                <SortableHeader v-bind="headerProps" sortKey="buttons" unsortable></SortableHeader>
+            </tr>
+        </thead>
+        <tbody>
+            <tr v-for="r in sortedArray" :key="r.typeID" :class="getLineColor(r)">
+                <td v-if="showColumn('name')">
+                    <MarketTypeLabel :id="r.typeID" :name="r.name" />
+                </td>
+                <td v-if="showColumn('buy')" class="text-right">{{ formatIsk(r.buy) }}</td>
+                <td v-if="showColumn('sell')" class="text-right">{{ formatIsk(r.sell) }}</td>
+                <td v-if="showColumn('q1')" class="text-right">{{ formatIsk(r.q1) }}</td>
+                <td v-if="showColumn('median')" class="text-right">{{ formatIsk(r.median) }}</td>
+                <td v-if="showColumn('q3')" class="text-right">{{ formatIsk(r.q3) }}</td>
+                <td v-if="showColumn('profit')" class="text-right">{{ percentFormater.format(r.profit) }}</td>
+                <td v-if="showColumn('score')" class="text-right">{{ scoreFormater.format(r.score) }}</td>
+                <td v-if="showColumn('buttons')" class="text-right">
+                    <button class="btn-icon me-1" @click="$emit('buy', r.type, r.buy, r.sell)"><ShoppingCartIcon /></button>
+                    <button class="btn-icon me-1" @click="$emit('remove', r.type)"><BookmarkSlashIcon /></button>
+                </td>
+            </tr>
+        </tbody>
+    </table>
+</template>
+
+<style scoped lang="postcss">
+div.end {
+    @apply justify-self-end ms-2;
+}
+</style>

src/market/tracking/index.ts

@@ -0,0 +1,5 @@
+export * from './HistoryQuartils';
+export * from './tracking';
+
+export { default as TrackingResultTable } from './TrackingResultTable.vue';
+

src/market/tracking/tracking.ts

@@ -0,0 +1,41 @@
+import { MarketOrderHistory, MarketType, MarketTypePrice, getHistory, jitaId } from "@/market";
+import { marbasAxiosInstance } from "@/service";
+import { defineStore } from "pinia";
+import { computed, ref } from "vue";
+
+export type TrackingResult = {
+    type: MarketType;
+    history: MarketOrderHistory[];
+    buy: number,
+    sell: number,
+    orderCount: number,
+}
+
+type MarketTracking = {
+    id: number,
+    type: number
+};
+
+const endpoint = '/api/types_tracking/';
+
+export const useMarketTrackingStore = defineStore('marketTracking', () => {
+    const trackedTypes = ref<number[]>([]);
+
+    const types = computed(() => trackedTypes.value ?? []);
+    const addType = async (type: number) => {
+        if (!trackedTypes.value.includes(type)) {
+            await marbasAxiosInstance.post(endpoint, { type });
+        }
+    }
+    const removeType = async (type: number) => {
+        if (trackedTypes.value.includes(type)) {
+            await marbasAxiosInstance.delete(`${endpoint}${type}`);
+        }
+    }
+
+    marbasAxiosInstance.get<MarketTracking[]>(endpoint).then(res => trackedTypes.value = res.data.map(item => item.type));
+
+    return { types, addType, removeType };
+});
+
+export const createResult = async (id: number, price: MarketTypePrice): Promise<TrackingResult> => ({ history: await getHistory(jitaId, id), ...price });