position

src/market/MarketResultTable.vue

@@ -1,13 +1,24 @@
 <script setup lang="ts">
 import { formatIsk, percentFormater } from '@/formaters';
 import { SortableHeader, useSort } from '@/table';
-import { copyToClipboard } from '@/utils';
 import { ArrowPathIcon } from '@heroicons/vue/24/outline';
 import { useStorage } from '@vueuse/core';
 import { computed, ref } from 'vue';
 import { MarketResult, getHistoryQuartils } from ".";
 import { MarketType, MarketTypeLabel } from "./type";
 
+type Result = {
+    type: MarketType;
+    typeID: number;
+    name: string;
+    buy: number;
+    sell: number;
+    q1: number;
+    mmedian: number;
+    q3: number;
+    percent: number;
+}
+
 interface Props {
     items?: MarketResult[];
 }
@@ -24,7 +35,7 @@ defineEmits<Emits>();
 
 const days = useStorage('market-days', 365);
 const filter = ref("");
-const { sortedArray, headerProps } = useSort(computed(() => props.items
+const { sortedArray, headerProps } = useSort<Result>(computed(() => props.items
     .filter(r => r.type.name.toLowerCase().includes(filter.value.toLowerCase()))
     .map(r => {
         const quartils = getHistoryQuartils(r.history, days.value);
@@ -44,6 +55,16 @@ const { sortedArray, headerProps } = useSort(computed(() => props.items
         defaultSortKey: 'name',
         defaultSortDirection: 'asc'
     })
+const getLineColor = (result: Result) => {
+    if (result.percent < 1.1) {
+        return 'line-red';
+    } else if (result.sell <= result.q1) {
+        return 'line-blue';
+    } else if (result.buy <= result.q1) {
+        return 'line-green';
+    }
+    return '';
+}
 </script>
 
 <template>
@@ -76,7 +97,7 @@ const { sortedArray, headerProps } = useSort(computed(() => props.items
             </tr>
         </thead>
         <tbody>
-            <tr v-for="r in sortedArray" :key="r.typeID" class="cursor-pointer" :class="{'bg-emerald-500': r.percent >= 1.1 && r.buy <= r.q1, 'bg-amber-900': r.percent < 1.1 }" @click="copyToClipboard(r.name)">
+            <tr v-for="r in sortedArray" :key="r.typeID" :class="getLineColor(r)">
                 <td>
                     <MarketTypeLabel :id="r.typeID" :name="r.name" />
                 </td>
@@ -87,7 +108,7 @@ const { sortedArray, headerProps } = useSort(computed(() => props.items
                 <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="stroke-slate-100 hover:stroke-slate-400"/></button>
+                    <button class="btn-icon-stroke" @click="$emit('relaod', r.type)"><ArrowPathIcon /></button>
                 </td>
             </tr>
         </tbody>

src/market/type/MarketTypeLabel.vue

@@ -1,4 +1,7 @@
 <script setup lang="ts">
+import { copyToClipboard } from '@/utils';
+import { ClipboardIcon } from '@heroicons/vue/24/outline';
+
 
 interface Props {
     name?: string;
@@ -15,5 +18,6 @@ withDefaults(defineProps<Props>(), {
     <img v-if="id" :src="`https://images.evetech.net/types/${id}/icon`" class="inline-block w-5 h-5" />
     <template v-if="name">
         {{ name }}
-    </template> 
+        <button class="btn-icon-stroke" @click="copyToClipboard(name)"><ClipboardIcon class="relative top-0.5 !w-4 !h-4" /></button>
+    </template>
 </template>

src/reprocess/ReprocessResultTable.vue

@@ -2,7 +2,6 @@
 import { formatIsk, percentFormater } from '@/formaters';
 import { MarketTypeLabel } from '@/market/type';
 import { SortableHeader, useSort } from '@/table';
-import { copyToClipboard } from '@/utils';
 import { useStorage } from '@vueuse/core';
 import { computed } from 'vue';
 import BuySellSlider from './BuySellSlider.vue';
@@ -49,7 +48,7 @@ const { sortedArray, headerProps } = useSort(computed(() => props.result.map(r =
             </tr>
         </thead>
         <tbody>
-            <tr v-for="r in sortedArray" :key="r.typeID" class="cursor-pointer" :class="{'bg-emerald-500': (useSellOrder ? r.sell_ratio : r.buy_ratio) >= threshold / 100 }" @click="copyToClipboard(r.name)">
+            <tr v-for="r in sortedArray" :key="r.typeID" :class="{'line-green': (useSellOrder ? r.sell_ratio : r.buy_ratio) >= threshold / 100 }">
                 <td>
                     <MarketTypeLabel :id="r.typeID" :name="r.name" />
                 </td>

src/style.css

@@ -23,12 +23,26 @@
 
     table {
         @apply table-auto border-collapse border-slate-500 w-full;
-    }
-    th {
-        @apply border bg-slate-600 px-1;
-    }
-    td {
-        @apply border px-1;
+
+        th {
+            @apply border bg-slate-600 px-1;
+        }
+        td {
+            @apply border px-1;
+        }
+        tr {
+            @apply hover:bg-slate-700;
+
+            &.line-red {
+                @apply bg-amber-900 hover:bg-amber-800;
+            }
+            &.line-blue {
+                @apply bg-sky-600 hover:bg-sky-500;
+            }
+            &.line-green {
+                @apply bg-emerald-500 hover:bg-emerald-400;
+            }
+        }
     }
 
     ::-webkit-scrollbar {
@@ -50,4 +64,10 @@
             @apply w-6 h-6 hover:text-slate-400;
         }
     }
+    .btn-icon-stroke {
+        @apply btn-icon;
+        > svg {
+            @apply stroke-slate-100 hover:stroke-slate-400;
+        }
+    }
 }