gemory/src/market/tracking/TrackingResultTable.vue

<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" title="Add to acquisitions" @click="$emit('buy', r.type, r.buy, r.sell)"><ShoppingCartIcon /></button>
                    <button class="btn-icon me-1" title="Untrack" @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>