va-project/stockingly-frontend/src/views/Home.vue

<template>
  <v-container class="fill-height">
    <v-row>
      <template v-if="loading" v-for="i in Array.from({ length: 10 }, (_, i) => i)" :key="i">
        <v-col cols="12" md="6" lg="4">
          <v-skeleton-loader class="mx-auto" type="card"></v-skeleton-loader>
        </v-col>
      </template>
      <template v-else v-for="company in companies" :key="company.ticker">
        <v-col cols="12" md="6" lg="4">
          <v-card class="ma-1 fill-height">

            <div class="d-flex stretch align-center">
              <div class="flex-0 pa-3">
                <img style="max-height: 36px; min-height: 24px;" :src="company.logoSrc"/>
              </div>
              <v-card-item style="flex: 1 !important">
                <v-card-title>{{ company['short name'] }}</v-card-title>
                <v-card-subtitle>{{ company['company name'] }}</v-card-subtitle>
              </v-card-item>
            </div>

            <v-card-text>
              <p class="text--primary">
                {{ company.description }}
              </p>
              <div class="pt-2 pb-2" v-for="m in metrics" :key="m.title">
                <div class="d-inline-flex justify-space-between" style="width: 100%">
                  <strong>{{ m.title }}</strong>
                  <span class="text-right">{{ m.value(company) }}{{ m.symbol ?? '' }}</span>
                </div>
                <v-progress-linear :color="m.color" :model-value="m.percentage(company)"></v-progress-linear>
              </div>
            </v-card-text>

            <div class="px-4">
              <v-chip label color="pink" class="ma-1">
                <v-icon start icon="mdi-chart-timeline-variant"></v-icon>
                {{ company.ticker }}
              </v-chip>
              <v-chip label color="green" class="ma-1">
                <v-icon start icon="mdi-currency-usd"></v-icon>
                {{ formatCurrency(company['market cap']) }}
              </v-chip>
              <template v-for="tag in company.tags" :key="tag">
                <v-chip label class="ma-1">{{ tag }}</v-chip>
              </template>
            </div>
          </v-card>
        </v-col>
      </template>
    </v-row>
  </v-container>
</template>

<script lang="ts" setup>
import { getCompanies, Company } from '@/api';
import { ref, reactive, computed, watch } from 'vue';

const loading = ref(true);
const companies = reactive<Company[]>([]);

interface Metric {
  title: string,
  color: string,
  minValue: number,
  maxValue: number,
  value: (c: Company) => number // in [0, 100],
  symbol?: string
}

const metricsData = reactive<Metric[]>([
  {
    title: 'Metric 1',
    color: 'green',
    minValue: 0,
    maxValue: 100,
    value: _ => 20
  },
  {
    title: 'Length of ticker',
    color: 'orange',
    minValue: 0,
    maxValue: 5,
    value: c => c.ticker.length,
    symbol: ' chars'
  },
]);

const metrics = computed<(Metric & { percentage: (c: Company) => number })[]>(() => metricsData.map(e => ({
  ...e,
  percentage: (c: Company) => (e.value(c) - e.minValue) * 100 / (e.maxValue - e.minValue)
})));


getCompanies().then(cs => {
  loading.value = false;
  companies.push(...cs);
});

const formatCurrency = (d: number) => {
  if (d < 1000) return `${d}`;
  if (d < 1_000_000) return `${Math.round(d / 1000)} K`;
  if (d < 1_000_000_000) return `${Math.round(d / 1_000_000)} M`
  return `${Math.round(d / 1_000_000_000)} B`
}
</script>