market scan trends

src/market/acquisition/AcquisitionQuartilesTooltip.vue

@@ -17,7 +17,7 @@ const open = ref(false);
 const loading = ref(false);
 
 const quartiles = computedAsync<HistoryQuartiles | null>(
-    () => open.value && props.id ? getQuartiles(props.id) : null,
+    () => props.id ? getQuartiles(props.id) : null,
     null,
     loading,
 );

src/market/history/MarketTrendIcon.vue

@@ -13,4 +13,13 @@ defineProps<Props>();
     <ArrowTrendingUpIcon v-if="trend === MarketTrends.Up" />
     <ArrowTrendingDownIcon v-else-if="trend === MarketTrends.Down" />
     <ArrowLongRightIcon v-else />
-</template>
+</template>
+
+<style scoped>
+@reference "@/style.css";
+
+svg {
+  @apply w-6 h-6;
+}
+
+</style>

src/market/scan/ScanResultTable.vue

@@ -2,7 +2,7 @@
 import {SliderCheckbox} from '@/components';
 import {SortableHeader, useSort, VirtualScrollTable} from '@/components/table';
 import {formatIsk, percentFormater} from "@/formaters";
-import {MarketType, MarketTypeLabel} from "@/market";
+import {MarketTrend, MarketTrendIcon, MarketType, MarketTypeLabel} from "@/market";
 import {ShoppingCartIcon} from '@heroicons/vue/24/outline';
 import {useStorage} from '@vueuse/core';
 import {computed, ref} from 'vue';
@@ -22,6 +22,7 @@ type Result = {
     acquisitions: number;
     profit: number;
     score: number;
+    trend: MarketTrend;
 }
 
 interface Props {
@@ -80,7 +81,8 @@ const { sortedArray, headerProps, showColumn } = useSort<Result>(computed(() =>
             totalVolume: r.totalVolume,
             acquisitions,
             profit: r.profit,
-            score: r.score
+            score: r.score,
+            trend: r.trend,
         };
     }).filter(r => !onlyCheap.value || (r.buy <= r.q1 && r.profit >= (threshold.value / 100)))), {
         defaultSortKey: 'score',
@@ -137,7 +139,10 @@ const getLineColor = (result: Result) => {
             <tbody>
                 <tr v-for="r in list" :key="r.data.typeID" :class="getLineColor(r.data)">
                     <td v-if="showColumn('name')">
+                      <div class="flex">
                         <MarketTypeLabel :id="r.data.typeID" :name="r.data.name" />
+                        <MarketTrendIcon class="ms-auto" :trend="r.data.trend" />
+                      </div>
                     </td>
                     <td v-if="showColumn('buy')" class="text-right">{{ formatIsk(r.data.buy) }}</td>
                     <td v-if="showColumn('sell')" class="text-right">{{ formatIsk(r.data.sell) }}</td>

src/market/scan/scan.ts

@@ -1,5 +1,5 @@
-import { MarketType } from "@/market";
+import {MarketTrend, MarketType} from "@/market";
-import { MarketScanResponse } from "@/generated/mammon";
+import {MarketScanResponse} from "@/generated/mammon";
 
 export type ScanResult = {
     type: MarketType;
@@ -11,6 +11,7 @@ export type ScanResult = {
     totalVolume: number;
     profit: number;
     score: number;
+    trend: MarketTrend;
 }
 
 export const toScanResult = (res: MarketScanResponse, type: MarketType): ScanResult => ({
@@ -23,4 +24,5 @@ export const toScanResult = (res: MarketScanResponse, type: MarketType): ScanRes
     totalVolume: res.totalVolume,
     profit: res.profit,
     score: res.score,
+    trend: res.trend,
 });