trends filter

src/market/history/TrendFilter.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import {type MarketTrend, MarketTrends} from '@/market';
+import {ArrowLongRightIcon, ArrowTrendingDownIcon, ArrowTrendingUpIcon} from '@heroicons/vue/24/outline';
+
+const model = defineModel<MarketTrend[]>({ required: true });
+
+const trends = [
+    { trend: MarketTrends.Up, icon: ArrowTrendingUpIcon, title: 'Show items trending up' },
+    { trend: MarketTrends.Flat, icon: ArrowLongRightIcon, title: 'Show items with a flat trend' },
+    { trend: MarketTrends.Down, icon: ArrowTrendingDownIcon, title: 'Show items trending down' },
+] as const;
+
+const toggle = (trend: MarketTrend) => {
+    model.value = model.value.includes(trend)
+        ? model.value.filter(t => t !== trend)
+        : [...model.value, trend];
+};
+</script>
+
+<template>
+    <div class="trend-filter">
+        <button
+            v-for="{ trend, icon, title } in trends"
+            :key="trend"
+            type="button"
+            :title="title"
+            :class="{ active: model.includes(trend) }"
+            @click="toggle(trend)"
+        >
+            <component :is="icon" />
+        </button>
+    </div>
+</template>
+
+<style scoped>
+@reference "@/style.css";
+
+div.trend-filter {
+    @apply inline-flex rounded overflow-hidden border border-slate-600;
+}
+
+div.trend-filter button {
+    @apply p-0.5 border-none rounded-none bg-slate-600 text-slate-100 hover:bg-slate-700 cursor-pointer;
+}
+
+div.trend-filter button.active {
+    @apply bg-emerald-500 hover:bg-emerald-600;
+}
+
+div.trend-filter button :deep(svg) {
+    @apply w-6 h-6;
+}
+</style>

src/market/history/index.ts

@@ -1,3 +1,4 @@
 export * from './history.ts';
 
 export { default as MarketTrendIcon } from './MarketTrendIcon.vue';
+export { default as TrendFilter } from './TrendFilter.vue';

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 {MarketTrend, MarketTrendIcon, MarketType, MarketTypeLabel} from "@/market";
+import {MarketTrend, MarketTrendIcon, MarketTrends, MarketType, MarketTypeLabel, TrendFilter} from "@/market";
 import {ShoppingCartIcon} from '@heroicons/vue/24/outline';
 import {useStorage} from '@vueuse/core';
 import {computed, ref} from 'vue';
@@ -54,6 +54,11 @@ const acquiredTypesStore = useAcquiredTypesStore();
 const threshold = useStorage('market-scan-threshold', 10);
 const filter = ref("");
 const onlyCheap = ref(false);
+const trackedTrends = useStorage<MarketTrend[]>('market-scan-trends', [
+    MarketTrends.Up,
+    MarketTrends.Flat,
+    MarketTrends.Down,
+]);
 const columnsToIgnore = computed(() => {
     const ic = typeof props.ignoredColums === 'string' ? [props.ignoredColums] : props.ignoredColums;
 
@@ -64,6 +69,7 @@ const columnsToIgnore = computed(() => {
 });
 const { sortedArray, headerProps, showColumn } = useSort<Result>(computed(() => props.items
     .filter(r => r.type.name.toLowerCase().includes(filter.value.toLowerCase()))
+    .filter(r => trackedTrends.value.includes(r.trend))
     .map(r => {
         const acquisitions = columnsToIgnore.value.includes('acquisitions') ? 0 : acquiredTypesStore.acquiredTypes
             .filter(t => t.type === r.type.id)
@@ -113,6 +119,9 @@ const getLineColor = (result: Result) => {
             <div class="end flex">
                 <SliderCheckbox class="me-1" v-model="onlyCheap" /> Show only cheap items
             </div>
+            <div class="end flex items-center">
+                <TrendFilter v-model="trackedTrends" />
+            </div>
             <div class="end">
                 <span>Filter: </span>
                 <input type="search" class="w-96" v-model="filter" />