tracking progress bar

src/components/ProgressBar.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+
+interface Props {
+    value: number;
+    total: number;
+}
+
+const props = defineProps<Props>();
+
+const percentage = computed(() => (props.value / props.total) * 100);
+</script>
+
+<template>
+    <div class="w-full bg-gray-600 rounded-full h-2.5">
+        <div class="bg-emerald-600 h-2.5 rounded-full" :style="{ width: percentage + '%'}" />
+    </div>
+</template>

src/components/index.ts

@@ -2,6 +2,7 @@ export { default as ClipboardButton } from './ClipboardButton.vue';
 export { default as Dropdown } from './Dropdown.vue';
 export { default as LoadingSpinner } from './LoadingSpinner.vue';
 export { default as Modal } from './Modal.vue';
+export { default as ProgressBar } from './ProgressBar.vue';
 export { default as SliderCheckbox } from './SliderCheckbox.vue';
 export { default as Tooltip } from './tooltip/Tooltip.vue';
 

src/market/acquisition/acquisition.ts

@@ -13,14 +13,13 @@ export type MarbasAcquiredType = MarbasObject & {
     price: number;
     date: Date;
     source: AcquiredTypeSource;
-    user: number;
 }
 
 type RawMarbasAcquiredType =  Omit<MarbasAcquiredType, 'date'> & {
     date: string;
 }
 
-type InsertableRawMarbasAcquiredType =  Omit<MarbasAcquiredType, 'id' | 'user' | 'date'>;
+type InsertableRawMarbasAcquiredType =  Omit<MarbasAcquiredType, 'id' | 'date'>;
 
 const mapRawMarbasAcquiredType = (raw: RawMarbasAcquiredType): MarbasAcquiredType => ({
     ...raw,
@@ -67,7 +66,7 @@ export const useAcquiredTypesStore = defineStore('market-acquisition', () => {
         await marbasAxiosInstance.put(`${endpoint}${item.id}/`, item);
         log.info(`Acquired type ${item.id} remaining: ${item.remaining}`, item);
     };
-    
+
     marbasAxiosInstance.get<RawMarbasAcquiredType[]>(endpoint).then(res => acquiredTypes.value = res.data.map(mapRawMarbasAcquiredType));
 
     return { acquiredTypes: types, addAcquiredType, removeAcquiredType };

src/market/tracking/TrackingResultTable.vue

@@ -6,6 +6,7 @@ import { getHistoryQuartils, MarketType, MarketTypeLabel, TaxInput, useMarketTax
 import { BookmarkSlashIcon, ShoppingCartIcon } from '@heroicons/vue/24/outline';
 import { useStorage } from '@vueuse/core';
 import { computed, ref } from 'vue';
+import { useAcquiredTypesStore } from '../acquisition';
 import { TrackingResult } from './tracking';
 
 type Result = {
@@ -17,6 +18,7 @@ type Result = {
     q1: number;
     median: number;
     q3: number;
+    acquisitions: number;
     profit: number;
     score: number;
 }
@@ -44,6 +46,7 @@ const props = withDefaults(defineProps<Props>(), {
 defineEmits<Emits>();
 
 const marketTaxStore = useMarketTaxStore();
+const acquiredTypesStore = useAcquiredTypesStore();
 
 const days = useStorage('market-tracking-days', 365);
 const threshold = useStorage('market-tracking-threshold', 10);
@@ -63,6 +66,9 @@ const { sortedArray, headerProps, showColumn } = useSort<Result>(computed(() =>
         const quartils = getHistoryQuartils(r.history, days.value);
         const profit = quartils.q1 === 0 ||  quartils.q3 === 0 ? 0 : marketTaxStore.calculateProfit(quartils.q1, quartils.q3);
         const score = profit <= 0 ? 0 : Math.sqrt((Math.pow(quartils.totalVolume, 1.1) * Math.pow(quartils.q1, 1.2) *  Math.pow(profit, 0.5) * Math.pow(Math.max(1, r.orderCount), -0.7)) / days.value);
+        const acquisitions = columnsToIgnore.value.includes('acquisitions') ? 0 : acquiredTypesStore.acquiredTypes
+            .filter(t => t.type === r.type.id)
+            .reduce((a, b) => a + b.remaining, 0);
 
         return {
             type: r.type,
@@ -73,6 +79,7 @@ const { sortedArray, headerProps, showColumn } = useSort<Result>(computed(() =>
             q1: quartils.q1,
             median: quartils.median,
             q3: quartils.q3,
+            acquisitions,
             profit,
             score
         };
@@ -128,6 +135,7 @@ const getLineColor = (result: Result) => {
                     <SortableHeader v-bind="headerProps" sortKey="q3">Q3</SortableHeader>
                     <SortableHeader v-bind="headerProps" sortKey="profit">Profit</SortableHeader>
                     <SortableHeader v-bind="headerProps" sortKey="score">Score</SortableHeader>
+                    <SortableHeader v-bind="headerProps" sortKey="acquisitions">Acquisitions</SortableHeader>
                     <SortableHeader v-bind="headerProps" sortKey="buttons" unsortable />
                 </tr>
             </thead>
@@ -143,6 +151,7 @@ const getLineColor = (result: Result) => {
                     <td v-if="showColumn('q3')" class="text-right">{{ formatIsk(r.data.q3) }}</td>
                     <td v-if="showColumn('profit')" class="text-right">{{ percentFormater.format(r.data.profit) }}</td>
                     <td v-if="showColumn('score')" class="text-right">{{ scoreFormater.format(r.data.score) }}</td>
+                    <td v-if="showColumn('acquisitions')" class="text-right">{{ r.data.acquisitions }}</td>
                     <td v-if="showColumn('buttons')" class="text-right">
                         <button class="btn-icon me-1" title="Add acquisitions" @click="$emit('buy', r.data.type, r.data.buy, r.data.sell)"><ShoppingCartIcon /></button>
                         <button class="btn-icon me-1" title="Untrack" @click="$emit('remove', r.data.type)"><BookmarkSlashIcon /></button>

src/pages/market/Tracking.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { Modal, ProgressBar } from "@/components";
 import { MarketType, MarketTypeInput, MarketTypePrice, getHistory, getMarketTypes, useApraisalStore } from "@/market";
 import { BuyModal } from '@/market/acquisition';
 import { TrackingResult, TrackingResultTable, createResult, useMarketTrackingStore } from '@/market/tracking';
@@ -56,10 +57,6 @@ watch(() => marketTrackingStore.types, async t => {
 
     const prices = await apraisalStore.getPrices(await getMarketTypes(typesToLoad));
 
-    items.value = [
-        ...items.value
-    ];
-
     typesToLoad.forEach(async i => items.value.push(await createResult(i, prices.find(p => p.type.id === i) as MarketTypePrice)));
 }, { immediate: true });
 </script>
@@ -76,5 +73,10 @@ watch(() => marketTrackingStore.types, async t => {
         <hr />
         <TrackingResultTable :items="items" @buy="(type, buy, sell) => buyModal?.open(type, { 'Buy': buy, 'Sell': sell })" @remove="removeItem" />
         <BuyModal ref="buyModal" />
+        <Modal :open="items.length > 0 && items.length < marketTrackingStore.types.length">
+            <div class="ms-auto me-auto mb-2 w-96">
+                <ProgressBar :value="items.length" :total="marketTrackingStore.types.length" />
+            </div>
+        </Modal>
     </template>
 </template>

src/pages/market/TypeInfo.vue

@@ -103,7 +103,7 @@ watch(useRoute(), async route => {
         </div>
         <div v-if="result" class="mb-4">
             <span>Market Info:</span>
-            <TrackingResultTable :items="[result]" infoOnly ignoredColums="name" />
+            <TrackingResultTable :items="[result]" infoOnly :ignoredColums="['name', 'acquisitions']" />
         </div>
         <div v-if="acquisitions && acquisitions.length > 0">
             <span>Acquisitions:</span>