frontend/src/lib/components/ExecutiveCard.svelte

<script lang="ts">
  import { executiveClicked, stockTicker, clientSideCache } from "$lib/store";
  import { afterUpdate } from "svelte";

  //export let executiveList;
  let executiveList = [];

  let isLoaded = false;
  const currentYear = new Date().getFullYear();

  let numberOfFemales = 0;
  let numberOfMales = 0;

  async function fetchData() {
    if ($clientSideCache[$stockTicker]?.getExecutives) {
      executiveList = $clientSideCache[$stockTicker]?.getExecutives;
    } else {
      const postData = { ticker: $stockTicker, path: "get-executives" };
      const response = await fetch("/api/ticker-data", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(postData),
      });

      executiveList = await response.json();
      $clientSideCache[$stockTicker].getExecutives = executiveList;
    }
  }

  afterUpdate(async () => {
    if (
      $stockTicker &&
      typeof window !== "undefined" &&
      $executiveClicked === true
    ) {
      $executiveClicked = false;
      await fetchData();
      for (const executive of executiveList) {
        switch (executive?.gender) {
          case "female":
            numberOfFemales++;
            break;
          case "male":
            numberOfMales++;
            break;
          // Handle other gender cases if needed
        }
      }

      isLoaded = true;
    }
  });
</script>

<div class="space-y-3 sm:pt-5">
  <div class="bg-[#000] h-auto w-screen">
    <!--Start Header-->
    <div class="w-full p-1 flex flex-col items-center pb-5 h-auto">
      <h2 class="text-center m-auto text-[1.1rem] font-medium text-white mt-5">
        Executives
      </h2>

      <div
        class="{!isLoaded
          ? 'hidden'
          : ''} flex flex-col items-center mt-10 w-full"
      >
        <span class="text-white text-[1rem]"> Female/Total Ratio </span>

        <div class="flex flex-row justify-center items-center w-full mt-5">
          <div class="flex flex-row items-center ml-5">
            <div
              class="h-full bg-gray-800 transform -translate-x-1/2"
              aria-hidden="true"
            ></div>
            <div
              class="w-3 h-3 bg-[#0FC008] border-4 box-content border-gray-900 rounded-full transform -translate-x-1/2"
              aria-hidden="true"
            ></div>
            <span class="text-white text-sm font-medium inline-block">
              Female <span class="font-medium text-[0.95rem]"
                >({numberOfFemales})</span
              >
            </span>
          </div>

          <span class="text-white font-medium text-3xl m-auto">
            {numberOfFemales === 0
              ? 0
              : (
                  (numberOfFemales / (numberOfFemales + numberOfMales)) *
                  100
                )?.toFixed(2)}%
          </span>

          <div class="flex flex-row items-center mr-5">
            <div
              class="h-full bg-gray-800 transform -translate-x-1/2"
              aria-hidden="true"
            ></div>
            <div
              class="w-3 h-3 bg-[#FF2F1F] border-4 box-content border-gray-900 rounded-full transform -translate-x-1/2"
              aria-hidden="true"
            ></div>
            <span class="text-white text-sm font-medium inline-block">
              Male <span class="font-medium text-[0.95rem]"
                >({numberOfMales})</span
              >
            </span>
          </div>
        </div>
      </div>
    </div>
    <!--End Header-->
    {#if isLoaded}
      {#if executiveList?.length !== 0}
        <div class="mt-5 w-full">
          {#each executiveList as item}
            <!--Start Item-->
            <div class="flex flex-row items-center pl-4 pr-4 w-full mb-3">
              <div class="w-full rounded-md bg-primary h-auto pb-3 pl-3 pt-3">
                <div class="flex flex-row items-center relative">
                  <div class="flex flex-col">
                    <div
                      class="flex flex-row items-center mr-auto mb-2 text-white font-medium text-sm w-56"
                    >
                      <span>
                        {item?.name}
                        {#if item?.yearBorn !== null}
                          , {currentYear - item.yearBorn}
                        {/if}
                      </span>
                    </div>
                    <span class="text-gray-300 text-sm w-48">
                      {item?.title}
                    </span>
                  </div>

                  {#if item?.gender === "male"}
                    <div
                      class="flex flex-row items-center ml-auto absolute right-3 top-0"
                    >
                      <div
                        class="h-full bg-primary transform -translate-x-1/2"
                        aria-hidden="true"
                      ></div>
                      <div
                        class="w-2 h-2 bg-[#FF2F1F] box-content rounded-full transform -translate-x-1/2"
                        aria-hidden="true"
                      ></div>
                      <span class="text-white text-[0.85rem] inline-block">
                        Male
                      </span>
                    </div>
                  {:else if item?.gender === "female"}
                    <div
                      class="flex flex-row items-center ml-auto absolute right-3 top-0"
                    >
                      <div
                        class="h-full bg-primary transform -translate-x-1/2"
                        aria-hidden="true"
                      ></div>
                      <div
                        class="w-2 h-2 bg-[#0FC008] box-content rounded-full transform -translate-x-1/2"
                        aria-hidden="true"
                      ></div>
                      <span class="text-white text-[0.85rem] inline-block">
                        Female
                      </span>
                    </div>
                  {/if}
                </div>
              </div>
            </div>
            <!--End Item-->
          {/each}
        </div>
      {:else}
        <div
          class=" mt-20 flex justify-center items-center text-2xl font-bold text-slate-700 mb-20 m-auto"
        >
          No data available
        </div>
      {/if}
    {:else}
      <div class="flex justify-center items-center h-80">
        <div class="relative">
          <label
            class="bg-secondary rounded-md h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
          >
            <span class="loading loading-spinner loading-md text-gray-400"
            ></span>
          </label>
        </div>
      </div>
    {/if}
  </div>
</div>
<!--End Similar Stocks Card -->