Added stub configurable metrics to home

stockingly-frontend/package.json

@@ -9,7 +9,7 @@
     "lint": "eslint . --fix --ignore-path .gitignore"
   },
   "dependencies": {
-    "@mdi/font": "7.0.96",
+    "@mdi/font": "^7.2.96",
     "core-js": "^3.29.0",
     "roboto-fontface": "*",
     "vue": "^3.2.0",

stockingly-frontend/src/views/Home.vue

@@ -15,7 +15,16 @@
             </v-card-item>
 
             <v-card-text>
-              {{ company.description }}
+              <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 }}{{ m.symbol ?? '' }}</span>
+                </div>
+                <v-progress-linear :color="m.color" v-model="m.percentage"></v-progress-linear>
+              </div>
             </v-card-text>
 
             <div class="px-4">
@@ -28,7 +37,7 @@
                 {{ formatCurrency(company['market cap']) }}
               </v-chip>
               <template v-for="tag in company.tags" :key="tag">
-                <v-chip label class="ma-1">{{ tag }}</v-chip>  
+                <v-chip label class="ma-1">{{ tag }}</v-chip>
               </template>
             </div>
           </v-card>
@@ -40,11 +49,44 @@
 
 <script lang="ts" setup>
 import { getCompanies, Company } from '@/api';
-import { ref, reactive } from 'vue';
+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: number // in [0, 100],
+  symbol?: string
+}
+
+const metricsData = reactive<Metric[]>([
+  {
+    title: 'Metric 1',
+    color: 'green',
+    minValue: 0,
+    maxValue: 100,
+    value: 20
+  },
+  {
+    title: 'Metric 2',
+    color: 'orange',
+    minValue: 0,
+    maxValue: 100,
+    value: 60,
+    symbol: '%'
+  },
+]);
+
+const metrics = computed<(Metric & { percentage: number })[]>(() => metricsData.map(e => ({
+  ...e,
+  percentage: (e.value - e.minValue) * 100 / (e.maxValue - e.minValue) 
+})));
+
+
 getCompanies().then(cs => {
   loading.value = false;
   companies.push(...cs);

stockingly-frontend/yarn.lock

@@ -192,10 +192,10 @@
   resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz#d7c6e6755c78567a951e04ab52ef0fd26de59f32"
   integrity sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==
 
-"@mdi/font@7.0.96":
-  version "7.0.96"
-  resolved "https://registry.yarnpkg.com/@mdi/font/-/font-7.0.96.tgz#9853c222623072f5575b4039c8c195ea929b61fc"
-  integrity sha512-rzlxTfR64hqY8yiBzDjmANfcd8rv+T5C0Yedv/TWk2QyAQYdc66e0kaN1ipmnYU3RukHRTRcBARHzzm+tIhL7w==
+"@mdi/font@^7.2.96":
+  version "7.2.96"
+  resolved "https://registry.yarnpkg.com/@mdi/font/-/font-7.2.96.tgz#af800d9fe3b424f85ad45e9baa755bd003ab4986"
+  integrity sha512-e//lmkmpFUMZKhmCY9zdjRe4zNXfbOIJnn6xveHbaV2kSw5aJ5dLXUxcRt1Gxfi7ZYpFLUWlkG2MGSFAiqAu7w==
 
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"