arrow trending

This commit is contained in:
2023-10-26 14:48:16 +02:00
parent 5082cfaac9
commit c432450455
7 changed files with 27 additions and 18 deletions

View File

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

View File

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

View File

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

View File

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