Feat: Started implementation of the comparison feature of the app. Passing all...

Feat: Started implementation of the comparison feature of the app. Passing all the needed data through props and data transformations.

components/suggestions.svelte

+<script lang="ts">
+  import dataset from "~assets/dataset_small.json"
+  import { brandSuggestions } from "~functions/suggestions"
+
+  interface data_small {
+    brand: string
+    COUNTRY: string
+    environmental_total: number
+    supplychain_total: number
+    social_total: number
+  }
+  export let currentBrand: string
+  export let fieldName: string
+  let suggestedBrands: data_small[] = []
+  // Recompute the value whenever fieldName changes
+  $: text = getField(fieldName)
+
+  function getField(fieldName: string): string {
+    let answer: string
+    brandSuggestions.forEach((field) => {
+      if (field.category === fieldName.toLowerCase()) {
+        answer = fieldName
+        getMetrics(field.items, currentBrand)
+      }
+    })
+    return answer
+  }
+
+  function getMetrics(brands: string[], currentBrand: string) {
+    suggestedBrands = []
+    brands.forEach((brand) => {
+      if (brand != currentBrand.toLowerCase()) {
+        suggestedBrands.push(
+          dataset.find((brandName) =>
+            brand.toLowerCase().includes(brandName.brand.toLowerCase())
+          )
+        )
+      }
+    })
+  }
+</script>
+
+<section>
+  {#each suggestedBrands as brand}
+    {brand.brand}
+  {/each}
+</section>

content.svelte

@@ -36,6 +36,7 @@
   import Icon from "~components/icon.svelte"
   import NotSupported from "~components/notSupported.svelte"
   import Ping from "~components/ping.svelte"
+  import Suggestions from "~components/suggestions.svelte"
 
   let visible: boolean = false
   let brand: string = ""
@@ -145,6 +146,7 @@
       advancedDataSecond = await getAdvancedData(secondBrand)
       advancedDataDisplay = advancedData
     } else {
+      // Fix this, doesnt work
       brand = "Not found"
       environmental = "N/A"
       supply = "N/A"
@@ -204,6 +206,11 @@
             ></AdvancedData>
           </div>
         {/if}
+        {#if advancedDataDisplay != undefined}
+          <Suggestions
+            currentBrand={advancedDataDisplay.brand}
+            fieldName={advancedDataDisplay.field} />
+        {/if}
         <Footer />
       {:else}
         <NotSupported />

functions/suggestions.ts

+export const brandSuggestions = [
+  { category: "lifestyle", items: ["h&m", "zara", "uniqlo"] },
+  { category: "footwear", items: ["asics", "converse", "deichmann"] },
+  { category: "denim", items: ["levi's", "diesel"] },
+  { category: "accessories", items: ["fossil", "tory burch"] },
+  { category: "kids", items: ["disney", "carter's"] },
+  { category: "lingerie", items: ["victoria's secret", "calzedonia"] },
+  { category: "menswear", items: ["ven heusen", "dressmann"] },
+  { category: "outdoor", items: ["the north face", "patagonia"] },
+  { category: "retailer", items: ["zalando", "amazon", "asos"] },
+  { category: "sportswear", items: ["nike", "adidas"] },
+  { category: "supermarket", items: ["costco", "lidl"] },
+  { category: "wholesale", items: ["gildan", "fruit of the loom"] },
+  { category: "womenswear", items: ["prettylittlething", "pimkie"] }
+]

interfaces/data_advanced.ts

 export default interface BrandData {
     brand: string;
     country: string;
+    field: string;
     animal_welfare: number;
     biodiversity_conservation: number;
     energy_greenhouse_gas_emissions: number;