days and filter

src/market/MarketResultTable.vue

@@ -3,63 +3,79 @@ import { formatIsk, percentFormater } from '@/formaters';
 import { SortableHeader, useSort } from '@/table';
 import { copyToClipboard } from '@/utils';
 import { ArrowPathIcon } from '@heroicons/vue/24/outline';
-import { computed } from 'vue';
-import { MarketResult } from ".";
-import { MarketTypeLabel } from "./type";
+import { useStorage } from '@vueuse/core';
+import { computed, ref } from 'vue';
+import { MarketResult, getHistoryQuartils } from ".";
+import { MarketType, MarketTypeLabel } from "./type";
 
 interface Props {
-    result?: MarketResult[];
+    items?: MarketResult[];
 }
 
 interface Emits {
-    (e: 'relaod', typeID: number): void;
+    (e: 'relaod', type: MarketType): void;
 }
 
 const props = withDefaults(defineProps<Props>(), {
-    result: () => []
+    items: () => []
 });
 defineEmits<Emits>();
 
-const { sortedArray, headerProps } = useSort(computed(() => props.result.map(r => ({
-    typeID: r.type.id,
-    name: r.type.name,
-    q1: r.q1,
-    mmedian: r.median,
-    q3: r.q3,
-    percent: r.q3 / r.q1
-}))), {
-    defaultSortKey: 'name',
-    defaultSortDirection: 'asc'
-})
+const days = useStorage('market-days', 365);
+const filter = ref("");
+const { sortedArray, headerProps } = useSort(computed(() => props.items
+    .filter(r => r.type.name.toLowerCase().includes(filter.value.toLowerCase()))
+    .map(r => {
+        const quartils = getHistoryQuartils(r.history, days.value);
+
+        return {
+            type: r.type,
+            typeID: r.type.id,
+            name: r.type.name,
+            q1: quartils.q1,
+            mmedian: quartils.median,
+            q3: quartils.q3,
+            percent: quartils.q3 / quartils.q1
+        };
+    })), {
+        defaultSortKey: 'name',
+        defaultSortDirection: 'asc'
+    })
 </script>
 
 <template>
-    <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>
-                    <th></th>
-                </tr>
-            </thead>
-            <tbody>
-                <tr v-for="r in sortedArray" :key="r.typeID" class="cursor-pointer" @click="copyToClipboard(r.name)">
-                    <td>
-                        <MarketTypeLabel :id="r.typeID" :name="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>
-                    <td class="text-right">
-                        <button class="btn-icon" @click="$emit('relaod', r.typeID)"><ArrowPathIcon class="hover:stroke-slate-400"/></button>
-                    </td>
-                </tr>
-            </tbody>
-        </table>
+    <div class="grid grid-cols-1 mb-2 mt-4 ms-auto">
+        <div class="justify-self-end ms-2">
+            <span>Days: </span>
+            <input type="number" min="1" max="365" step="1" v-model="days" />
+            <span class="ms-2">Filter: </span>
+            <input type="text" class="w-96" v-model="filter" >
+        </div>
     </div>
+    <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>
+                <th></th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr v-for="r in sortedArray" :key="r.typeID" class="cursor-pointer" @click="copyToClipboard(r.name)">
+                <td>
+                    <MarketTypeLabel :id="r.typeID" :name="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>
+                <td class="text-right">
+                    <button class="btn-icon" @click="$emit('relaod', r.type)"><ArrowPathIcon class="hover:stroke-slate-400"/></button>
+                </td>
+            </tr>
+        </tbody>
+    </table>
 </template>