add popular list

src/lib/components/Table/Table.svelte

@@ -77,6 +77,7 @@
     { name: "Upside", rule: "upside", type: "percentSign" },
     { name: "Country", rule: "country", type: "str" },
     { name: "Gross Profit", rule: "grossProfit", type: "int" },
+    { name: "Income Tax", rule: "incomeTaxExpense", type: "int" },
     { name: "Revenue Growth", rule: "growthRevenue", type: "percentSign" },
     {
       name: "Gross Profit Growth",
@@ -108,7 +109,7 @@
       type: "percent",
     },
     { name: "FCF Yield", rule: "freeCashFlowYield", type: "percent" },
-    { name: "Employees", rule: "employees", type: "int" },
+    { name: "Employees", rule: "employees", type: "decimal" },
     { name: "Debt Ratio", rule: "debtRatio", type: "float" },
     { name: "Debt / Equity", rule: "debtEquityRatio", type: "int" },
     { name: "Profit Margin", rule: "netProfitMargin", type: "percent" },
@@ -698,6 +699,8 @@
                 {/if}
               {:else if column?.type === "int"}
                 {abbreviateNumber(item[column.key])}
+              {:else if column?.type === "decimal"}
+                {item[column.key]?.toLocaleString("en-US")}
               {:else if column.key === "price"}
                 {item[column.key]?.toFixed(2)}
               {:else if column.type === "percent"}

src/routes/list/+layout.svelte

@@ -182,6 +182,22 @@
       title: "Overbought Stocks",
       link: "/list/overbought-stocks",
     },
+    {
+      title: "Top-Rated Dividend Stocks",
+      link: "/list/top-rated-dividend-stocks",
+    },
+    {
+      title: "Biggest U.S. Companies by Revenue",
+      link: "/list/highest-revenue",
+    },
+    {
+      title: "Biggest U.S. Companies by Income Taxes",
+      link: "/list/highest-income-tax",
+    },
+    {
+      title: "Biggest U.S. Employers",
+      link: "/list/most-employees",
+    },
   ];
 
   navigation = [...navigationIndustry, ...navigation];

src/routes/list/+page.svelte

@@ -1,7 +1,38 @@
 <!--Start Market Cap Group-->
 
 <div class="text-white">
-  <h2 class="mb-2 text-xl font-bold">Market Cap Groups</h2>
+  <h2 class="mb-2 text-xl font-bold">Popular Lists</h2>
+  <ul
+    class="list-outside list-disc space-y-1 p-1 pl-6 md:columns-2 md:gap-x-8 md:text-lg"
+  >
+    <li>
+      <a
+        class="text-blue-400 sm:hover:text-white"
+        href="/list/top-rated-dividend-stocks">Top-Rated Dividend Stocks</a
+      >
+    </li>
+    <li>
+      <a class="text-blue-400 sm:hover:text-white" href="/list/highest-revenue"
+        >U.S. Companies With The Most Revenue</a
+      >
+    </li>
+    <li>
+      <a
+        class="text-blue-400 sm:hover:text-white"
+        href="/list/highest-income-tax"
+        >U.S. Companies That Pay The Highest Taxes</a
+      >
+    </li>
+    <li>
+      <a class="text-blue-400 sm:hover:text-white" href="/list/most-employees"
+        >U.S. Companies With The Most Employees</a
+      >
+    </li>
+  </ul>
+</div>
+
+<div class="text-white">
+  <h2 class="mb-2 text-xl font-bold pt-10">Market Cap Groups</h2>
   <ul
     class="list-outside list-disc space-y-1 p-1 pl-6 md:columns-2 md:gap-x-8 md:text-lg"
   >

src/routes/list/highest-income-tax/+page.server.ts

@@ -0,0 +1,26 @@
+export const load = async ({ locals, setHeaders }) => {
+
+  const getData = async () => {
+    const { apiKey, apiURL } = locals;
+    const postData = { filterList: 'highest-income-tax' };
+
+    const response = await fetch(apiURL + "/list-category", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "X-API-KEY": apiKey,
+      },
+      body: JSON.stringify(postData),
+    });
+
+    const output = await response.json();
+    setHeaders({ "cache-control": "public, max-age=60*5" });
+
+    return output;
+  };
+
+  // Make sure to return a promise
+  return {
+    getData: await getData(),
+  };
+};

src/routes/list/highest-income-tax/+page.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import Table from "$lib/components/Table/Table.svelte";
+
+  export let data;
+
+  const defaultList = [
+    { name: "Income Tax", rule: "incomeTaxExpense" },
+    { name: "Price", rule: "price" },
+    { name: "% Change", rule: "changesPercentage" },
+    { name: "Market Cap", rule: "marketCap" },
+  ];
+</script>
+
+<section class="w-full overflow-hidden m-auto">
+  <div
+    class="w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 border border-gray-800 sm:rounded-md h-auto p-5 mb-4"
+  >
+    <svg
+      class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 256 256"
+      ><path
+        fill="#fff"
+        d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
+      /></svg
+    >
+
+    These are the biggest public companies in the US, sorted by how much they
+    paid in corporate income taxes in the past 12 months.
+  </div>
+
+  <!-- Page wrapper -->
+  <Table {data} rawData={data?.getData} {defaultList} />
+</section>

src/routes/list/highest-revenue/+page.server.ts

@@ -0,0 +1,26 @@
+export const load = async ({ locals, setHeaders }) => {
+
+  const getData = async () => {
+    const { apiKey, apiURL } = locals;
+    const postData = { filterList: 'highest-revenue' };
+
+    const response = await fetch(apiURL + "/list-category", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "X-API-KEY": apiKey,
+      },
+      body: JSON.stringify(postData),
+    });
+
+    const output = await response.json();
+    setHeaders({ "cache-control": "public, max-age=60*5" });
+
+    return output;
+  };
+
+  // Make sure to return a promise
+  return {
+    getData: await getData(),
+  };
+};

src/routes/list/highest-revenue/+page.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import Table from "$lib/components/Table/Table.svelte";
+
+  export let data;
+
+  const defaultList = [
+    { name: "Revenue", rule: "revenue" },
+    { name: "Price", rule: "price" },
+    { name: "% Change", rule: "changesPercentage" },
+    { name: "Market Cap", rule: "marketCap" },
+  ];
+</script>
+
+<section class="w-full overflow-hidden m-auto">
+  <div
+    class="w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 border border-gray-800 sm:rounded-md h-auto p-5 mb-4"
+  >
+    <svg
+      class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 256 256"
+      ><path
+        fill="#fff"
+        d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
+      /></svg
+    >
+
+    These are the biggest U.S. companies ranked by total revenue or sales over
+    the past 12 months. It includes companies based in the United States that
+    can be publicly traded on the stock exchange.
+  </div>
+
+  <!-- Page wrapper -->
+  <Table {data} rawData={data?.getData} {defaultList} />
+</section>

src/routes/list/most-employees/+page.server.ts

@@ -0,0 +1,26 @@
+export const load = async ({ locals, setHeaders }) => {
+
+  const getData = async () => {
+    const { apiKey, apiURL } = locals;
+    const postData = { filterList: 'most-employees' };
+
+    const response = await fetch(apiURL + "/list-category", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "X-API-KEY": apiKey,
+      },
+      body: JSON.stringify(postData),
+    });
+
+    const output = await response.json();
+    setHeaders({ "cache-control": "public, max-age=60*5" });
+
+    return output;
+  };
+
+  // Make sure to return a promise
+  return {
+    getData: await getData(),
+  };
+};

src/routes/list/most-employees/+page.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import Table from "$lib/components/Table/Table.svelte";
+
+  export let data;
+
+  const defaultList = [
+    { name: "Employees", rule: "employees" },
+    { name: "Price", rule: "price" },
+    { name: "% Change", rule: "changesPercentage" },
+    { name: "Market Cap", rule: "marketCap" },
+  ];
+</script>
+
+<section class="w-full overflow-hidden m-auto">
+  <div
+    class="w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 border border-gray-800 sm:rounded-md h-auto p-5 mb-4"
+  >
+    <svg
+      class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 256 256"
+      ><path
+        fill="#fff"
+        d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
+      /></svg
+    >
+
+    These are the biggest U.S. companies ranked by the total number of
+    employees, updated daily. These are companies based in the United States of
+    America and listed on the stock market.
+  </div>
+
+  <!-- Page wrapper -->
+  <Table {data} rawData={data?.getData} {defaultList} />
+</section>

src/routes/list/top-rated-dividend-stocks/+page.server.ts

@@ -0,0 +1,26 @@
+export const load = async ({ locals, setHeaders }) => {
+
+  const getDividendStocks = async () => {
+    const { apiKey, apiURL } = locals;
+    const postData = { filterList: 'top-rated-dividend-stocks' };
+
+    const response = await fetch(apiURL + "/list-category", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "X-API-KEY": apiKey,
+      },
+      body: JSON.stringify(postData),
+    });
+
+    const output = await response.json();
+    setHeaders({ "cache-control": "public, max-age=60*5" });
+
+    return output;
+  };
+
+  // Make sure to return a promise
+  return {
+    getDividendStocks: await getDividendStocks(),
+  };
+};

src/routes/list/top-rated-dividend-stocks/+page.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import Table from "$lib/components/Table/Table.svelte";
+
+  export let data;
+
+  const defaultList = [
+    { name: "Dividend Yield", rule: "dividendYield" },
+    { name: "Price", rule: "price" },
+    { name: "% Change", rule: "changesPercentage" },
+    { name: "Market Cap", rule: "marketCap" },
+  ];
+</script>
+
+<section class="w-full overflow-hidden m-auto">
+  <div
+    class="w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 border border-gray-800 sm:rounded-md h-auto p-5 mb-4"
+  >
+    <svg
+      class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 256 256"
+      ><path
+        fill="#fff"
+        d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
+      /></svg
+    >
+
+    This list highlights top-rated dividend stocks, each with an average "buy"
+    or "strong buy" rating from at least 10 analysts. Every stock offers a
+    dividend yield of at least 2% and a payout ratio below 60%, indicating
+    sustainable dividends.
+  </div>
+
+  <!-- Page wrapper -->
+  <Table {data} rawData={data?.getDividendStocks} {defaultList} />
+</section>