days and filter

package-lock.json

@@ -16,6 +16,7 @@
         "vue-router": "^4.2.4"
       },
       "devDependencies": {
+        "@tailwindcss/nesting": "^0.0.0-insiders.565cd3e",
         "@types/node": "^20.4.5",
         "@vitejs/plugin-vue": "^4.2.3",
         "autoprefixer": "^10.4.14",
@@ -491,6 +492,37 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@tailwindcss/nesting": {
+      "version": "0.0.0-insiders.565cd3e",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/nesting/-/nesting-0.0.0-insiders.565cd3e.tgz",
+      "integrity": "sha512-WhHoFBx19TnH/c+xLwT/sxei6+4RpdfiyG3MYXfmLaMsADmVqBkF7B6lDalgZD9YdM459MF7DtxVbWkOrV7IaQ==",
+      "dev": true,
+      "dependencies": {
+        "postcss-nested": "^5.0.5"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/@tailwindcss/nesting/node_modules/postcss-nested": {
+      "version": "5.0.6",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-5.0.6.tgz",
+      "integrity": "sha512-rKqm2Fk0KbA8Vt3AdGN0FB9OBOMDVajMG6ZCf/GoHgdxUJ4sBFp0A/uMIRm+MJUdo33YXEtjqIz8u7DAp8B7DA==",
+      "dev": true,
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.6"
+      },
+      "engines": {
+        "node": ">=12.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.14"
+      }
+    },
     "node_modules/@types/node": {
       "version": "20.6.1",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.6.1.tgz",

package.json

@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@tailwindcss/nesting": "^0.0.0-insiders.565cd3e",
     "@heroicons/vue": "^2.0.18",
     "@vueuse/core": "^10.2.1",
     "@vueuse/integrations": "^10.2.1",

postcss.config.js

@@ -1,5 +1,7 @@
 export default {
   plugins: {
+    'postcss-import': {},
+    'tailwindcss/nesting': {},
     tailwindcss: {},
     autoprefixer: {},
   },

src/market/Market.vue

@@ -1,57 +1,45 @@
 <script setup lang="ts">
 import { ArrowPathIcon } from '@heroicons/vue/24/outline';
 import { useStorage } from '@vueuse/core';
-import { onMounted, ref } from 'vue';
+import { onMounted, ref, watch } from 'vue';
-import { MarketOrderHistory, MarketResult, getHistory, getHistoryQuartils, jitaId } from ".";
+import { MarketOrderHistory, MarketResult, getHistory, jitaId } from ".";
 import MarketReultTable from "./MarketResultTable.vue";
-import { getMarketType, searchMarketType } from "./type";
+import { MarketType, getMarketType, getMarketTypes } from "./type";
 
-type MarketItem = {
+type MarketItemStorage = {
     typeID: number;
     history: MarketOrderHistory[];
 }
 
 const item = ref("");
-const items = useStorage<MarketItem[]>('market-items', []);
+const itemsStorage = useStorage<MarketItemStorage[]>('market-items', []);
-const result = ref<MarketResult[]>([]);
+const items = ref<MarketResult[]>([]);
-const processResult = async (i: MarketItem) => {
+const addOrRelaod = async (type: MarketType) => {
-    const type = getMarketType(i.typeID);
+    const typeID = type.id;
-    const quartils = getHistoryQuartils(i.history)
-
-    return {
-        type: await type,
-        q1: quartils.q1,
-        median: quartils.median,
-        q3: quartils.q3
-    };
-}
-const addOrRelaod = async (typeID: number) => {
     const history = await getHistory(jitaId, typeID);
-    const item = { typeID, history };
+    const item = { type, history };
 
-    if (items.value.some(i => i.typeID === typeID)) {
+    if (items.value.some(i => i.type.id === typeID)) {
-        items.value = items.value.map(i => i.typeID === typeID ? item : i);
+        items.value = items.value.map(i => i.type.id === typeID ? item : i);
     } else {
         items.value = [ ...items.value, item];
     }
-    
-    const filteredResult = result.value.filter(r => r.type.id !== typeID);
-    
-    result.value = [ ...filteredResult, await processResult(item) ];
 }
 const reloadAll = async () => {
-    items.value = await Promise.all(items.value.map( async i => ({ ...i, history: await getHistory(jitaId, i.typeID) })));
+    items.value = await Promise.all(items.value.map( async i => ({ ...i, history: await getHistory(jitaId, i.type.id) })));
-    
-    result.value = await Promise.all(items.value.map(processResult));
 }
 const addItem = async () => {
-    const type = await searchMarketType(item.value.split('\t')[0]);
+    const type = await getMarketType(item.value.split('\t')[0]);
     
     item.value = "";
-    addOrRelaod(type.id);
+    addOrRelaod(type);
 }
+
+watch(items, itms => itemsStorage.value = itms.map(i => ({ typeID: i.type.id, history: i.history })));
 onMounted(async () => {
-    result.value = await Promise.all(items.value.map(processResult));
+    const types = await getMarketTypes(itemsStorage.value.map(i => i.typeID));
+
+    items.value = itemsStorage.value.map(i => ({ ...i, type: types.find(t => t.id === i.typeID) as MarketType }));
 })
 </script>
 
@@ -64,8 +52,8 @@ onMounted(async () => {
         </div>
         <button class="justify-self-end flex" @click="reloadAll"><ArrowPathIcon class="h-6 w-6 me-2" />Reload all</button>
     </div>
-    <template v-if="result.length > 0">
+    <template v-if="items.length > 0">
         <hr />
-        <MarketReultTable :result="result" @relaod="id => addOrRelaod(id)" />
+        <MarketReultTable :items="items" @relaod="type => addOrRelaod(type)" />
     </template>
 </template>

src/market/MarketResultTable.vue

@@ -3,38 +3,55 @@ 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 { useStorage } from '@vueuse/core';
-import { MarketResult } from ".";
+import { computed, ref } from 'vue';
-import { MarketTypeLabel } from "./type";
+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 => ({
+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: r.q1,
+            q1: quartils.q1,
-    mmedian: r.median,
+            mmedian: quartils.median,
-    q3: r.q3,
+            q3: quartils.q3,
-    percent: r.q3 / r.q1
+            percent: quartils.q3 / quartils.q1
-}))), {
+        };
+    })), {
         defaultSortKey: 'name',
         defaultSortDirection: 'asc'
     })
 </script>
 
 <template>
-    <div class="grid mt-2">
+    <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>
@@ -56,10 +73,9 @@ const { sortedArray, headerProps } = useSort(computed(() => props.result.map(r =
                 <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>
+                    <button class="btn-icon" @click="$emit('relaod', r.type)"><ArrowPathIcon class="hover:stroke-slate-400"/></button>
                 </td>
             </tr>
         </tbody>
     </table>
-    </div>
 </template>

src/market/market.ts

@@ -13,10 +13,8 @@ export type MarketOrderHistory = {
 }
 
 export type MarketResult = {
-    type: MarketType,
+    type: MarketType;
-    q1: number,
+    history: MarketOrderHistory[];
-    median: number,
-    q3: number,
 }
 
 export type HistoryQuartils = {
@@ -28,12 +26,14 @@ export type HistoryQuartils = {
 
 export const getHistory = async (regionId: number, tyeId: number): Promise<MarketOrderHistory[]> => (await esiAxiosInstance.get(`/markets/${regionId}/history/`, { params: { type_id: tyeId } })).data;
 
-export const getHistoryQuartils = (history: MarketOrderHistory[]): HistoryQuartils => {
+export const getHistoryQuartils = (history: MarketOrderHistory[], days?: number): HistoryQuartils => {
+    const now = Date.now();
+
     const volumes = history
         .flatMap(h => {
             const volume = h.volume;
 
-            if (volume === 0) {
+            if (volume === 0 || (days && new Date(h.date).getTime() < now - days * 24 * 60 * 60 * 1000)) {
                 return [];
             }
 

src/market/type/MarketType.ts

@@ -13,5 +13,12 @@ export type MarketType = {
     portionSize: number;
 }
 
-export const getMarketType = async (id: number): Promise<MarketType> => (await apiAxiosInstance.get<MarketType>(`/sde/types/${id}/`)).data;
+export const getMarketType = async (type: string | number): Promise<MarketType> => (await getMarketTypes(type))[0];
-export const searchMarketType = async (name: string): Promise<MarketType> => (await apiAxiosInstance.post<MarketType[]>("/sde/types/search", [["name", name]])).data[0];
+export const getMarketTypes = async (types: (string | number)[]): Promise<MarketType[]> => {
+    if (types.length === 0) {
+        return [];
+    } else if (types.length === 1 && typeof types[0] === "number") {
+        return [(await apiAxiosInstance.get<MarketType>(`/sde/types/${types[0]}/`)).data];
+    }
+    return (await apiAxiosInstance.post<MarketType[]>("/sde/types/search", types.map(t => [typeof t === "number" ? 'id' : "name", t]))).data;
+}