frontend/src/lib/components/IndustryTable.svelte

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

  export let charNumber;
  export let industryList;

  let displayList = industryList;

  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 = industryList;

    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>

<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={`/list/industry/${item?.industry?.replace(/ /g, "-")?.replace(/&/g, "and")?.replace(/-{2,}/g, "-")?.toLowerCase()}`}
              class="sm:hover:underline sm:hover:underline-offset-4 text-white"
            >
              {item?.industry?.length > charNumber
                ? item?.industry?.slice(0, charNumber) + "..."
                : item?.industry}
            </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>