eveal/gemory
2
0
Fork 0
Code Issues 3 Pull Requests Packages Projects Releases Wiki Activity

days and filter

Browse Source
This commit is contained in:
Sirttas
2023-09-16 12:10:45 +02:00
parent c889a813f3
commit 145af06874
7 changed files with 132 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
package-lock.json generated
View File

@@ -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",

1
package.json
View File

@@ -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",

2
postcss.config.js
View File

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

54
src/market/Market.vue
View File

@@ -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 { MarketOrderHistory, MarketResult, getHistory, getHistoryQuartils, jitaId } from ".";
import { onMounted, ref, watch } from 'vue';
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 result = ref<MarketResult[]>([]);
const processResult = async (i: MarketItem) => {
const type = getMarketType(i.typeID);
const quartils = getHistoryQuartils(i.history)
return {
type: await type,
q1: quartils.q1,
median: quartils.median,
q3: quartils.q3
};
}
const addOrRelaod = async (typeID: number) => {
const itemsStorage = useStorage<MarketItemStorage[]>('market-items', []);
const items = ref<MarketResult[]>([]);
const addOrRelaod = async (type: MarketType) => {
const typeID = type.id;
const history = await getHistory(jitaId, typeID);
const item = { typeID, history };
const item = { type, history };
if (items.value.some(i => i.typeID === typeID)) {
items.value = items.value.map(i => i.typeID === typeID ? item : i);
if (items.value.some(i => i.type.id === typeID)) {
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) })));
result.value = await Promise.all(items.value.map(processResult));
items.value = await Promise.all(items.value.map( async i => ({ ...i, history: await getHistory(jitaId, i.type.id) })));
}
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>

104
src/market/MarketResultTable.vue
View File

@@ -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>

14
src/market/market.ts
View File

@@ -13,10 +13,8 @@ export type MarketOrderHistory = {
}
export type MarketResult = {
type: MarketType,
q1: number,
median: number,
q3: number,
type: MarketType;
history: MarketOrderHistory[];
}
export type HistoryQuartils = {
@@ -26,14 +24,16 @@ export type HistoryQuartils = {
q3: number,
}
export const getHistory = async (regionId: number, tyeId: number): Promise<MarketOrderHistory[]> => (await esiAxiosInstance.get(`/markets/${regionId}/history/`, { params: { type_id: tyeId } })).data;
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[], days?: number): HistoryQuartils => {
const now = Date.now();
export const getHistoryQuartils = (history: MarketOrderHistory[]): HistoryQuartils => {
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 [];
}

11
src/market/type/MarketType.ts
View File

@@ -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 searchMarketType = async (name: string): Promise<MarketType> => (await apiAxiosInstance.post<MarketType[]>("/sde/types/search", [["name", name]])).data[0];
export const getMarketType = async (type: string | number): Promise<MarketType> => (await getMarketTypes(type))[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;
}