arrow trending
This commit is contained in:
@@ -128,8 +128,8 @@ const getLineColor = (result: Result) => {
|
||||
<td class="text-right">{{ percentFormater.format(r.profit) }}</td>
|
||||
<td class="text-right">{{ scoreFormater.format(r.score) }}</td>
|
||||
<td class="text-right">
|
||||
<button class="btn-icon-stroke me-1" @click="$emit('buy', r.type, r.buy, r.sell)"><ShoppingCartIcon /></button>
|
||||
<button class="btn-icon-stroke me-1" @click="$emit('remove', r.type)"><TrashIcon /></button>
|
||||
<button class="btn-icon me-1" @click="$emit('buy', r.type, r.buy, r.sell)"><ShoppingCartIcon /></button>
|
||||
<button class="btn-icon me-1" @click="$emit('remove', r.type)"><TrashIcon /></button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
@@ -1,11 +1,14 @@
|
||||
<script setup lang="ts">
|
||||
import { Tooltip } from '@/components';
|
||||
import { LoadingSpinner, Tooltip } from '@/components';
|
||||
import { formatIsk } from '@/formaters';
|
||||
import { getHistory, jitaId } from '@/market';
|
||||
import { getHistoryQuartils } from '@/market/scan';
|
||||
import { ArrowTrendingUpIcon } from '@heroicons/vue/24/outline';
|
||||
import { ArrowTrendingDownIcon, ArrowTrendingUpIcon } from '@heroicons/vue/24/outline';
|
||||
import { computedAsync } from '@vueuse/core';
|
||||
import { ref, watchEffect } from 'vue';
|
||||
|
||||
const trendingScale = 3;
|
||||
|
||||
interface Props {
|
||||
id: number;
|
||||
buy: number;
|
||||
@@ -20,13 +23,13 @@ const q1 = ref(0);
|
||||
const median = ref(0);
|
||||
const q3 = ref(0);
|
||||
const lineColor = ref('');
|
||||
const history = computedAsync(() => getHistory(jitaId, props.id), []);
|
||||
|
||||
watchEffect(async () => {
|
||||
if (!open.value || !props.id) {
|
||||
return;
|
||||
}
|
||||
const history = await getHistory(jitaId, props.id);
|
||||
const quartils = getHistoryQuartils(history);
|
||||
const quartils = getHistoryQuartils(history.value);
|
||||
|
||||
q1.value = quartils.q1;
|
||||
median.value = quartils.median;
|
||||
@@ -45,7 +48,9 @@ watchEffect(async () => {
|
||||
<template>
|
||||
<Tooltip v-model:open="open" class="tooltip">
|
||||
<template #header>
|
||||
<ArrowTrendingUpIcon />
|
||||
<LoadingSpinner v-if="history.length < trendingScale" />
|
||||
<ArrowTrendingUpIcon v-else-if="history[0].average > history[trendingScale - 1].average" />
|
||||
<ArrowTrendingDownIcon v-else />
|
||||
</template>
|
||||
<template #default>
|
||||
<div class="bg-slate-500 -left-1/2 relative">
|
||||
@@ -74,7 +79,7 @@ watchEffect(async () => {
|
||||
.tooltip {
|
||||
@apply ms-auto;
|
||||
>:deep(div.header) {
|
||||
@apply btn-icon-stroke px-2;
|
||||
@apply btn-icon px-2;
|
||||
}
|
||||
&.open>:deep(div.header) {
|
||||
@apply bg-slate-600 rounded-t;
|
||||
|
||||
@@ -110,8 +110,8 @@ const getLineColor = (result: Result) => {
|
||||
<td class="text-right">{{ percentFormater.format(r.precentProfit) }}</td>
|
||||
<td class="text-right">{{ formatIsk(r.iskProfit) }}</td>
|
||||
<td class="text-right">
|
||||
<button class="btn-icon-stroke me-1" @click="$emit('buy', r.type, r.price, r.buy, r.sell)"><PlusIcon /></button>
|
||||
<button class="btn-icon-stroke me-1" @click="$emit('sell', r.type)"><MinusIcon /></button>
|
||||
<button class="btn-icon me-1" @click="$emit('buy', r.type, r.price, r.buy, r.sell)"><PlusIcon /></button>
|
||||
<button class="btn-icon me-1" @click="$emit('sell', r.type)"><MinusIcon /></button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
@@ -21,7 +21,7 @@ withDefaults(defineProps<Props>(), {
|
||||
<img v-if="id" :src="`https://images.evetech.net/types/${id}/icon`" class="inline-block w-5 h-5 me-1" />
|
||||
<template v-if="name">
|
||||
{{ name }}
|
||||
<button v-if="!hideCopy" class="btn-icon-stroke" @click="copyToClipboard(name)"><ClipboardIcon class="relative top-0.5 !w-4 !h-4" /></button>
|
||||
<button v-if="!hideCopy" class="btn-icon" @click="copyToClipboard(name)"><ClipboardIcon class="relative top-0.5 !w-4 !h-4" /></button>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user