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>