line colors

src/market/MarketResultTable.vue

@@ -8,6 +8,18 @@ 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 +36,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 +56,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 +98,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="cursor-pointer" :class="getLineColor(r)" @click="copyToClipboard(r.name)">
                 <td>
                     <MarketTypeLabel :id="r.typeID" :name="r.name" />
                 </td>

src/reprocess/ReprocessResultTable.vue

@@ -49,7 +49,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="cursor-pointer" :class="{'line-green': (useSellOrder ? r.sell_ratio : r.buy_ratio) >= threshold / 100 }" @click="copyToClipboard(r.name)">
                 <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 {
+        th {
-        @apply border bg-slate-600 px-1;
+            @apply border bg-slate-600 px-1;
-    }
+        }
-    td {
+        td {
-        @apply border px-1;
+            @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 {