update ipo statistics
This commit is contained in:
MuslemRahimi
parent
11200b2112
commit
71447048df
211
src/lib/components/IPOChart.svelte
Normal file
211
src/lib/components/IPOChart.svelte
Normal file
@ -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>
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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",
|
||||
|
||||
246
src/routes/ipos/statistics/+page.svelte
Normal file
246
src/routes/ipos/statistics/+page.svelte
Normal file
@ -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>
|
||||
@ -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
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user