update ipo statistics

src/lib/components/IPOChart.svelte

@@ -0,0 +1,211 @@
+<script lang="ts">
+  import highcharts from "$lib/highcharts.ts";
+  import { mode } from "mode-watcher";
+
+  export let data;
+  export let year;
+
+  const currentYear = new Date()?.getFullYear();
+  const filteredData = data?.getIPOCalendar?.filter((item) => {
+    const ipoYear = new Date(item?.ipoDate)?.getFullYear();
+    return ipoYear === year;
+  });
+
+  let config = null;
+
+  const monthDict = {
+    1: "January",
+    2: "February",
+    3: "March",
+    4: "April",
+    5: "May",
+    6: "June",
+    7: "July",
+    8: "August",
+    9: "September",
+    10: "October",
+    11: "November",
+    12: "December",
+  };
+
+  function findMinMaxMonths(year) {
+    const rawData = data?.getIPOCalendar || [];
+
+    // Count IPOs per month for the given year
+    const ipoCounts = rawData.reduce((acc, { ipoDate }) => {
+      const date = new Date(ipoDate);
+      const ipoYear = date.getFullYear();
+      const month = date.getMonth() + 1; // Get month (1-12)
+
+      if (ipoYear === year) {
+        acc[month] = (acc[month] || 0) + 1;
+      }
+      return acc;
+    }, {});
+
+    const months = Object.keys(ipoCounts);
+    if (months.length === 0) {
+      console.log(`No valid IPOs found for ${year}.`);
+      return { maxMonth: null, minMonth: null, maxCount: 0, minCount: 0 };
+    }
+
+    // Find the month with the most and least IPOs
+    const maxMonth = months.reduce((a, b) =>
+      ipoCounts[a] > ipoCounts[b] ? a : b,
+    );
+    const minMonth = months.reduce((a, b) =>
+      ipoCounts[a] < ipoCounts[b] ? a : b,
+    );
+
+    return {
+      maxMonth: Number(maxMonth), // Convert string to number
+      minMonth: Number(minMonth),
+      maxCount: ipoCounts[maxMonth],
+      minCount: ipoCounts[minMonth],
+    };
+  }
+
+  // Example Usage
+  const { maxMonth, minMonth, maxCount, minCount } = findMinMaxMonths(year);
+
+  function plotData(year) {
+    const rawData = filteredData || [];
+
+    // Initialize an array with 12 months, all set to 0
+    const ipoCounts = Array(12).fill(0);
+
+    // Count IPOs per month for the given year
+    rawData.forEach(({ ipoDate }) => {
+      const date = new Date(ipoDate);
+      const month = date.getMonth(); // Month index (0-11)
+      ipoCounts[month]++;
+    });
+
+    // Define month names for the x-axis
+    const months = [
+      "Jan",
+      "Feb",
+      "Mar",
+      "Apr",
+      "May",
+      "Jun",
+      "Jul",
+      "Aug",
+      "Sep",
+      "Oct",
+      "Nov",
+      "Dec",
+    ];
+
+    // Build Highcharts options
+    const options = {
+      credits: {
+        enabled: false,
+      },
+      chart: {
+        type: "column",
+        backgroundColor: $mode === "light" ? "#fff" : "#09090B",
+        plotBackgroundColor: $mode === "light" ? "#fff" : "#09090B",
+        height: 360,
+        animation: false,
+      },
+      title: {
+        text: `<h3 class="mt-3 mb-1">${year} IPOs</h3>`,
+        style: {
+          color: $mode === "light" ? "black" : "white",
+        },
+        useHTML: true,
+      },
+      xAxis: {
+        categories: months,
+        gridLineWidth: 0,
+        labels: {
+          style: { color: $mode === "light" ? "black" : "white" },
+        },
+      },
+      yAxis: {
+        gridLineWidth: 1,
+        gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
+        labels: {
+          style: { color: $mode === "light" ? "black" : "white" },
+        },
+        title: { text: "null" },
+        opposite: true,
+      },
+      tooltip: {
+        shared: true,
+        useHTML: true,
+        backgroundColor: "rgba(0, 0, 0, 0.8)",
+        borderColor: "rgba(255, 255, 255, 0.2)",
+        borderWidth: 1,
+        style: {
+          color: "#fff",
+          fontSize: "16px",
+          padding: "10px",
+        },
+        borderRadius: 4,
+        formatter: function () {
+          return `<span class="m-auto text-[1rem] font-[501]">${this.x}</span><br>
+                        <span class="font-semibold text-sm">IPOs:</span> 
+                        <span class="font-normal text-sm">${this.y?.toLocaleString("en-US")}</span>`;
+        },
+      },
+      plotOptions: {
+        series: {
+          color: $mode === "light" ? "black" : "white",
+          animation: false,
+          dataLabels: {
+            enabled: true,
+            color: $mode === "light" ? "black" : "white",
+            style: {
+              fontSize: "13px",
+              fontWeight: "bold",
+            },
+            formatter: function () {
+              return this.y;
+            },
+          },
+        },
+      },
+      legend: {
+        enabled: false,
+      },
+      series: [
+        {
+          name: "IPOs",
+          data: ipoCounts,
+          color: $mode === "light" ? "#2C6288" : "white",
+        },
+      ],
+    };
+
+    return options;
+  }
+
+  $: {
+    if ($mode) {
+      config = plotData(year) || null;
+    }
+  }
+</script>
+
+<h2 class="text-xl sm:text-2xl font-bold mb-2 sm:mb-0 mt-2">
+  {year} Initial Public Offerings
+</h2>
+
+<div class="mb-2">
+  {#if year === currentYear}
+    There have been 64 IPOs so far in {year}.
+  {:else}
+    There have been {filteredData?.length?.toLocaleString("en-US")} IPOs in {year}.
+    The most was in {monthDict[maxMonth]} with {maxCount?.toLocaleString(
+      "en-US",
+    )}, the least was in {monthDict[minMonth]} with
+    {minCount}.
+  {/if}
+</div>
+
+<div
+  class="shadow-sm border border-gray-300 dark:border-gray-800 rounded"
+  use:highcharts={config}
+></div>

src/routes/ipos/+layout.svelte

@@ -35,6 +35,10 @@
       title: "Recent",
       path: "/ipos",
     },
+    {
+      title: "Statistics",
+      path: "/ipos/statistics",
+    },
     {
       title: "IPO News",
       path: "/ipos/news",
@@ -46,8 +50,10 @@
   // Subscribe to the $page store to reactively update the activeIdx based on the URL
   $: if ($page.url.pathname === "/ipos") {
     activeIdx = 0;
-  } else if ($page.url.pathname.startsWith("/ipos/news")) {
+  } else if ($page.url.pathname.startsWith("/ipos/statistics")) {
     activeIdx = 1;
+  } else if ($page.url.pathname.startsWith("/ipos/news")) {
+    activeIdx = 2;
   }
 </script>
 

src/routes/ipos/+page.svelte

@@ -5,7 +5,6 @@
   export let data;
 
   let ipoNews = data?.getNews;
-  console.log(ipoNews);
   let rawData = data?.getIPOCalendar?.slice(0, 200) ?? [];
   const excludedRules = new Set([
     "volume",

src/routes/ipos/statistics/+page.svelte

@@ -0,0 +1,246 @@
+<script lang="ts">
+  import SEO from "$lib/components/SEO.svelte";
+  import highcharts from "$lib/highcharts.ts";
+  import { mode } from "mode-watcher";
+  import IPOChart from "$lib/components/IPOChart.svelte";
+  import Lazy from "svelte-lazy";
+
+  export let data;
+
+  let ipoNews = data?.getNews;
+
+  let config = null;
+
+  const startYear = 2015;
+  const currentYear = new Date().getFullYear();
+  const yearList = Array.from(
+    { length: currentYear - startYear + 1 },
+    (_, i) => currentYear - i,
+  );
+
+  function findMinMax() {
+    const rawData = data?.getIPOCalendar || [];
+    const currentYear = new Date().getFullYear();
+
+    // Count IPOs per year, excluding the current year
+    const ipoCounts = rawData?.reduce((acc, { ipoDate }) => {
+      const year = new Date(ipoDate).getFullYear();
+      if (year !== currentYear) {
+        acc[year] = (acc[year] || 0) + 1;
+      }
+      return acc;
+    }, {});
+
+    // Find the years with the most and least IPOs
+    const years = Object.keys(ipoCounts);
+    if (years.length === 0) {
+      console.log("No valid IPOs found (excluding current year).");
+      return { maxYear: null, minYear: null, maxCount: 0, minCount: 0 };
+    }
+
+    const maxYear = years.reduce((a, b) =>
+      ipoCounts[a] > ipoCounts[b] ? a : b,
+    );
+    const minYear = years.reduce((a, b) =>
+      ipoCounts[a] < ipoCounts[b] ? a : b,
+    );
+
+    return {
+      maxYear: Number(maxYear),
+      minYear: Number(minYear),
+      maxCount: ipoCounts[maxYear],
+      minCount: ipoCounts[minYear],
+    };
+  }
+
+  // Proper destructuring assignment
+  const { maxYear, minYear, maxCount, minCount } = findMinMax();
+
+  function plotData() {
+    const rawData = data?.getIPOCalendar ?? [];
+    // Group the IPOs by year
+    const yearCounts = rawData.reduce((acc, ipo) => {
+      const year = new Date(ipo?.ipoDate).getFullYear();
+      acc[year] = (acc[year] || 0) + 1;
+      return acc;
+    }, {});
+
+    // Sort the years and extract count values
+    const years = Object.keys(yearCounts).sort((a, b) => a - b);
+    const counts = years.map((year) => yearCounts[year]);
+
+    // Build Highcharts options
+    const options = {
+      credits: {
+        enabled: false,
+      },
+      chart: {
+        type: "column",
+        backgroundColor: $mode === "light" ? "#fff" : "#09090B",
+        plotBackgroundColor: $mode === "light" ? "#fff" : "#09090B",
+        height: 360,
+        animation: false,
+      },
+      title: {
+        text: `<h3 class="mt-3 mb-1">Annual IPOs, 2015-2025</h3>`,
+        style: {
+          color: $mode === "light" ? "black" : "white",
+        },
+        useHTML: true,
+      },
+      xAxis: {
+        categories: years,
+        gridLineWidth: 0,
+        labels: {
+          style: { color: $mode === "light" ? "black" : "white" },
+        },
+      },
+      yAxis: {
+        gridLineWidth: 1,
+        gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
+        labels: {
+          style: { color: $mode === "light" ? "black" : "white" },
+        },
+        title: { text: null },
+        opposite: true,
+      },
+      tooltip: {
+        shared: true,
+        useHTML: true,
+        backgroundColor: "rgba(0, 0, 0, 0.8)",
+        borderColor: "rgba(255, 255, 255, 0.2)",
+        borderWidth: 1,
+        style: {
+          color: "#fff",
+          fontSize: "16px",
+          padding: "10px",
+        },
+        borderRadius: 4,
+        formatter: function () {
+          let tooltipContent = `<span class="m-auto text-[1rem] font-[501]">${this.x}</span><br>`;
+          this.points.forEach((point) => {
+            tooltipContent += `
+            <span style="display:inline-block; width:10px; height:10px; background-color:${point.color}; border-radius:50%; margin-right:5px;"></span>
+            <span class="font-semibold text-sm">${point.series.name}:</span> 
+            <span class="font-normal text-sm">${point.y?.toLocaleString("en-US")}</span><br>`;
+          });
+          return tooltipContent;
+        },
+      },
+      plotOptions: {
+        series: {
+          color: $mode === "light" ? "black" : "white",
+          animation: false,
+          dataLabels: {
+            enabled: true,
+            color: $mode === "light" ? "black" : "white",
+            style: {
+              fontSize: "13px",
+              fontWeight: "bold",
+            },
+            formatter: function () {
+              return this.y;
+            },
+          },
+        },
+      },
+      legend: {
+        enabled: false,
+      },
+      series: [
+        {
+          name: "IPOs",
+          data: counts,
+          color: $mode === "light" ? "#2C6288" : "white",
+        },
+      ],
+    };
+
+    return options;
+  }
+
+  $: {
+    if ($mode) {
+      config = plotData() || null;
+    }
+  }
+</script>
+
+<SEO
+  title="IPO Statistics and Charts"
+  description="Statistics and charts for initial public offerings (IPOs) on the US stock market. Annual data is available from 2015-2025 and monthly data for 2019-2025."
+/>
+
+<div class="w-full overflow-hidden m-auto mt-5">
+  <div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden">
+    <div
+      class="relative flex justify-center items-start overflow-hidden w-full"
+    >
+      <main class="w-full lg:w-3/4 lg:pr-10">
+        <div class="w-full m-auto">
+          <div class="grid grid-cols-1 gap-y-3">
+            <div class="">
+              This page provides statistics and charts on initial public
+              offerings (IPOs) in the U.S. stock market. Annual data is
+              available from 2015 to 2025, with monthly data starting from 2019.
+            </div>
+
+            <h1 class="text-xl sm:text-2xl font-bold mb-2 sm:mb-0 mt-2">
+              Number of IPOs by Year
+            </h1>
+
+            <div class="mb-2">
+              There have been {data?.getIPOCalendar?.length?.toLocaleString(
+                "en-US",
+              )} IPOs between 2015 and 2025. The least was in {minYear} with only
+              {minCount}. The full year {maxYear} was an all-time record with {maxCount?.toLocaleString(
+                "en-US",
+              )} IPOs.
+            </div>
+
+            <div
+              class="shadow-sm border border-gray-300 dark:border-gray-800 rounded"
+              use:highcharts={config}
+            ></div>
+
+            {#each yearList as year}
+              <Lazy fadeOption={{ delay: 50, duration: 50 }} keep={true}>
+                <IPOChart {data} {year} />
+              </Lazy>
+            {/each}
+          </div>
+        </div>
+      </main>
+      <aside class="hidden lg:block relative fixed w-1/4">
+        {#if ipoNews?.length !== 0}
+          <div
+            class="w-full border border-gray-300 dark:border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit"
+          >
+            <div class="p-4 text-sm">
+              <h3 class="text-xl font-bold mb-3">IPO News</h3>
+              <ul class="">
+                {#each ipoNews?.slice(0, 10) as item}
+                  <li class="mb-3 last:mb-1">
+                    {item?.timestamp}
+                    <a
+                      class="text-blue-500 sm:hover:text-muted dark:sm:hover:text-white dark:text-blue-400"
+                      href={item?.link}
+                      target="_blank"
+                      rel="noopener noreferrer nofollow">{item?.title}</a
+                    >
+                  </li>
+                {/each}
+              </ul>
+              <a
+                href={`/ipos/news`}
+                class="flex justify-center items-center rounded cursor-pointer w-full py-2 mt-3 text-[1rem] text-center font-semibold text-white dark:text-black m-auto sm:hover:bg-blue-600 dark:sm:hover:bg-gray-300 bg-[#3B82F6] dark:bg-[#fff] transition duration-100"
+              >
+                More IPO News
+              </a>
+            </div>
+          </div>
+        {/if}
+      </aside>
+    </div>
+  </div>
+</div>

src/routes/stocks/[tickerID]/statistics/revenue/+page.svelte

@@ -350,12 +350,12 @@
               </div>
 
               <div
-                class="chart mt-5 sm:mt-0 border border-gray-800 rounded"
+                class="shadow-sm mt-5 sm:mt-0 border border-gray-300 dark:border-gray-800 rounded"
                 use:highcharts={config}
               ></div>
 
               <div
-                class="mt-5 flex flex-col sm:flex-row items-start sm:items-center w-full justify-between sm:border-y border-gray-800 sm:pt-2 sm:pb-2"
+                class="mt-5 flex flex-col sm:flex-row items-start sm:items-center w-full justify-between sm:border-y border-gray-300 dark:border-gray-800 sm:pt-2 sm:pb-2"
               >
                 <h3 class="text-xl sm:text-2xl font-bold mb-2 sm:mb-0">
                   Revenue History