Market quartils

src/market/Market.vue

@@ -1,9 +1,80 @@
 <script setup lang="ts">
-// 10000002
+import { formatIsk, percentFormater } from '@/formaters';
+import { SortableHeader, useSort } from '@/table';
+import { copyToClipboard } from '@/utils';
+import { computed, ref } from 'vue';
+import { getHistoryQuartils, jitaId } from ".";
+import { MarketType, searchMarketType } from "./type/MarketType";
+
+type Result = {
+    type: MarketType,
+    q1: number,
+    median: number,
+    q3: number,
+}
+
+const item = ref("");
+const result = ref<Result[]>([]);
+const addItem = async () => {
+    const type = await searchMarketType(item.value);
+    const quartils = await getHistoryQuartils(jitaId, type.id);
+
+    result.value = [...result.value, {
+        type,
+        q1: quartils[0],
+        median: quartils[1],
+        q3: quartils[2],
+    }];
+}
+const { sortedArray, headerProps } = useSort(computed(() => result.value.map(r => ({
+    typeID: r.type.id,
+    name: r.type.name,
+    q1: r.q1,
+    mmedian: r.median,
+    q3: r.q3,
+    percent: r.q3 / r.q1,
+    icon: `https://images.evetech.net/types/${r.type.id}/icon`,
+}))), {
+    defaultSortKey: 'name',
+    defaultSortDirection: 'asc'
+})
+
 </script>
 
 <template>
-    <div>
+    <div class="grid mb-2 mt-4">
-        
+        <div>
+            <span>Item: </span>
+            <input type="text" v-model="item" />
+            <button class="justify-self-end ms-2" @click="addItem">Add</button>
+        </div>
     </div>
+    <template v-if="result.length > 0">
+        <hr />
+        <div class="grid mt-2">
+            <table>
+                <thead>
+                    <tr>
+                        <SortableHeader v-bind="headerProps" sortKey="name">Item</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="percent">Percent</SortableHeader>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr v-for="r in sortedArray" :key="r.typeID" class="cursor-pointer" @click="copyToClipboard(r.name)">
+                        <td>
+                            <img :src="`https://images.evetech.net/types/${r.typeID}/icon`" class="inline-block w-5 h-5" />
+                            {{ r.name }}
+                        </td>
+                        <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.percent) }}</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </template>
 </template>

src/market/index.ts

@@ -0,0 +1,2 @@
+export * from './market';
+

src/market/market.ts

@@ -0,0 +1,59 @@
+import { esiAxiosInstance } from "@/service";
+
+export const jitaId = 10000002;
+
+export type MarketOrderHistory = {
+    average: number;
+    date: string;
+    highest: number;
+    lowest: number;
+    order_count: number;
+    volume: number;
+}
+
+export const getHistory = async (regionId: number, tyeId: number): Promise<MarketOrderHistory[]> =>  (await esiAxiosInstance.get(`/markets/${regionId}/history/`, { params: { type_id: tyeId } })).data;
+
+export const getHistoryQuartils = async (regionId: number, tyeId: number): Promise<[number, number, number]> => {
+    const history = await getHistory(regionId, tyeId);
+    const volumes = history
+        .flatMap(h => {
+            const volume = h.volume;
+
+            if (volume === 0) {
+                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 quartils;
+}
+
+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/type/MarketType.ts

@@ -0,0 +1,16 @@
+import { apiAxiosInstance } from "@/service";
+
+export type MarketType = {
+    id: number;
+    group_id: number;
+    marketgroup_id: number;
+    name: string;
+    published: boolean;
+    description: string;
+    basePrice: number;
+    icon_id: number;
+    volume: number;
+    portionSize: number;
+}
+
+export const searchMarketType = async (name: string): Promise<MarketType> => (await apiAxiosInstance.post<MarketType[]>("/sde/types/search", [["name", name]])).data[0];

src/reprocess/ReprocessResultTable.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { formatIsk, percentFormater } from '@/formaters';
 import { SortableHeader, useSort } from '@/table';
+import { copyToClipboard } from '@/utils';
 import { useStorage } from '@vueuse/core';
 import { computed } from 'vue';
 import BuySellSlider from './BuySellSlider.vue';
@@ -25,8 +26,6 @@ const { sortedArray, headerProps } = useSort(computed(() => props.result.map(r =
     defaultSortKey: 'name',
     defaultSortDirection: 'asc'
 })
-
-const copyToClipboard = (s: string) => navigator.clipboard.writeText(s);
 </script>
 
 <template>
@@ -50,7 +49,10 @@ const copyToClipboard = (s: string) => navigator.clipboard.writeText(s);
         </thead>
         <tbody>
             <tr v-for="r in sortedArray" :key="r.typeID" class="cursor-pointer" :class="{'bg-emerald-500': (useSellOrder ? r.sell_ratio : r.buy_ratio) >= threshold / 100 }" @click="copyToClipboard(r.name)">
-                <td>{{ r.name }}</td>
+                <td>
+                    <img :src="`https://images.evetech.net/types/${r.typeID}/icon`" class="inline-block w-5 h-5" />
+                    {{ r.name }}
+                </td>
                 <td class="text-right">{{ formatIsk(useSellOrder ? r.sell : r.buy) }}</td>
                 <td class="text-right">{{ formatIsk(useSellOrder ? r.sell_reprocess : r.buy_reprocess) }}</td>
                 <td class="text-right">{{ percentFormater.format(useSellOrder ? r.sell_ratio : r.buy_ratio) }}</td>

src/reprocess/index.ts

@@ -1,2 +1,2 @@
-export { default as Reprocess } from './Reprocess.vue'
+export * from './reprocess';
-export * from './reprocess'
+

src/utils.ts

@@ -0,0 +1 @@
+export const copyToClipboard = (s: string) => navigator.clipboard.writeText(s);