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>