frontend/src/routes/industry/sectors/+page.svelte

<script lang="ts">
  import { screenWidth } from "$lib/store";
  import { abbreviateNumber, sectorNavigation } from "$lib/utils";
  import TableHeader from "$lib/components/Table/TableHeader.svelte";

  export let data;
  let rawData = data?.getSectorOverview;
  let displayList = rawData;

  $: charNumber = $screenWidth < 640 ? 20 : 30;

  let columns = [
    { key: "industry", label: "Industry Name", align: "left" },
    { key: "numStocks", label: "# Stocks", align: "right" },
    { key: "totalMarketCap", label: "Market Cap", align: "right" },
    { key: "avgDividendYield", label: "Div. Yield", align: "right" },
    { key: "pe", label: "PE Ratio", align: "right" },
    { key: "profitMargin", label: "Profit Margin", align: "right" },
    { key: "avgChange1M", label: "1M Change", align: "right" },
    { key: "avgChange1Y", label: "1Y Change", align: "right" },
  ];

  let sortOrders = {
    industry: { order: "none", type: "string" },
    numStocks: { order: "none", type: "number" },
    totalMarketCap: { order: "none", type: "number" },
    avgDividendYield: { order: "none", type: "number" },
    pe: { order: "none", type: "number" },
    profitMargin: { order: "none", type: "number" },
    avgChange1M: { order: "none", type: "number" },
    avgChange1Y: { order: "none", type: "number" },
  };

  const sortData = (key) => {
    // Reset all other keys to 'none' except the current key
    for (const k in sortOrders) {
      if (k !== key) {
        sortOrders[k].order = "none";
      }
    }

    // Cycle through 'none', 'asc', 'desc' for the clicked key
    const orderCycle = ["none", "asc", "desc"];

    let originalData = rawData;

    const currentOrderIndex = orderCycle.indexOf(sortOrders[key].order);
    sortOrders[key].order =
      orderCycle[(currentOrderIndex + 1) % orderCycle.length];
    const sortOrder = sortOrders[key].order;

    // Reset to original data when 'none' and stop further sorting
    if (sortOrder === "none") {
      displayList = [...originalData]; // Reset to original data (spread to avoid mutation)
      return;
    }

    // Define a generic comparison function
    const compareValues = (a, b) => {
      const { type } = sortOrders[key];
      let valueA, valueB;

      switch (type) {
        case "date":
          valueA = new Date(a[key]);
          valueB = new Date(b[key]);
          break;
        case "string":
          valueA = a[key].toUpperCase();
          valueB = b[key].toUpperCase();
          return sortOrder === "asc"
            ? valueA.localeCompare(valueB)
            : valueB.localeCompare(valueA);
        case "number":
        default:
          valueA = parseFloat(a[key]);
          valueB = parseFloat(b[key]);
          break;
      }

      if (sortOrder === "asc") {
        return valueA < valueB ? -1 : valueA > valueB ? 1 : 0;
      } else {
        return valueA > valueB ? -1 : valueA < valueB ? 1 : 0;
      }
    };

    // Sort using the generic comparison function
    displayList = [...originalData].sort(compareValues);
  };
</script>

<section class="w-full overflow-hidden m-auto">
  <!-- Page wrapper -->
  <div class="flex justify-center w-full m-auto h-full overflow-hidden">
    <!-- Content area -->
    <div class="w-full overflow-x-scroll">
      <table class="table rounded-none sm:rounded-md w-full m-auto mt-4">
        <thead>
          <TableHeader {columns} {sortOrders} {sortData} />
        </thead>
        <tbody>
          {#each displayList as item}
            <!-- row -->
            <tr
              class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B]"
            >
              <td
                class="font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
              >
                <a
                  href={sectorNavigation?.find(
                    (listItem) => listItem?.title === item?.sector,
                  )?.link}
                  class="sm:hover:underline sm:hover:underline-offset-4 text-white"
                >
                  {item?.sector?.length > charNumber
                    ? item?.sector?.slice(0, charNumber) + "..."
                    : item?.sector}
                </a>
              </td>

              <td
                class="text-white text-end text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
              >
                {item?.numStocks}
              </td>

              <td
                class="text-white text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
              >
                {abbreviateNumber(item?.totalMarketCap) ?? "-"}
              </td>

              <td
                class="text-white text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
              >
                {item?.avgDividendYield?.toFixed(2) ?? "-"}%
              </td>

              <td
                class="text-white text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
              >
                {item?.pe?.toFixed(2) ?? "-"}
              </td>

              <td
                class=" {item?.profitMargin >= 0
                  ? "before:content-['+'] text-[#00FC50]"
                  : 'text-[#FF2F1F]'}  font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]"
              >
                {abbreviateNumber(item?.profitMargin)}%
              </td>

              <td
                class="{item?.avgChange1M >= 0
                  ? "before:content-['+']  text-[#00FC50]"
                  : 'text-[#FF2F1F]'} text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
              >
                {item?.avgChange1M?.toFixed(2) ?? "-"}%
              </td>

              <td
                class="{item?.avgChange1Y >= 0
                  ? "before:content-['+']  text-[#00FC50]"
                  : 'text-[#FF2F1F]'} text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
              >
                {item?.avgChange1Y?.toFixed(2) ?? "-"}%
              </td>
            </tr>
          {/each}
        </tbody>
      </table>
    </div>
  </div>
</section>