-
-
+
-
+ - Fail-to-Deliver (FTD) -
-
+
+
- {#if rawData?.length !== 0}
- + Fail-to-Deliver (FTD) +
+
-
-
-
diff --git a/src/routes/stocks/[tickerID]/statistics/market-cap/+page.svelte b/src/routes/stocks/[tickerID]/statistics/market-cap/+page.svelte
index 491fedab..73c86aaa 100644
--- a/src/routes/stocks/[tickerID]/statistics/market-cap/+page.svelte
+++ b/src/routes/stocks/[tickerID]/statistics/market-cap/+page.svelte
@@ -15,13 +15,11 @@
import { LineChart, BarChart } from "echarts/charts";
import { GridComponent, TooltipComponent } from "echarts/components";
import { CanvasRenderer } from "echarts/renderers";
- import { onMount } from "svelte";
import Infobox from "$lib/components/Infobox.svelte";
use([LineChart, BarChart, GridComponent, TooltipComponent, CanvasRenderer]);
export let data;
- let isLoaded = false;
let optionsData;
let rawData = data?.getHistoricalMarketCap || [];
@@ -201,13 +199,10 @@
tableList?.sort((a, b) => new Date(b?.date) - new Date(a?.date));
}
- onMount(async () => {
- optionsData = await plotData();
- tableList = filterEndOfYearDates(rawData);
- tableList?.sort((a, b) => new Date(b?.date) - new Date(a?.date));
- changePercentageYearAgo = computeYearOverYearChange(rawData);
- isLoaded = true;
- });
+ optionsData = plotData();
+ tableList = filterEndOfYearDates(rawData);
+ tableList?.sort((a, b) => new Date(b?.date) - new Date(a?.date));
+ changePercentageYearAgo = computeYearOverYearChange(rawData);
async function changeStatement(state) {
timePeriod = state;
@@ -265,7 +260,7 @@
return { dates, marketCapList };
}
- async function plotData() {
+ function plotData() {
const filteredData = filterDataByTimePeriod(rawData, timePeriod);
const options = {
@@ -277,13 +272,24 @@
top: "10%",
containLabel: true,
},
- xAxis: {
- axisLabel: {
- color: "#fff",
+ xAxis: [
+ {
+ type: "category",
+ data: filteredData?.dates,
+ axisLabel: {
+ color: "#fff",
+
+ formatter: function (value) {
+ // Assuming dates are in the format 'yyyy-mm-dd'
+ const dateParts = value.split("-");
+ const monthIndex = parseInt(dateParts[1]) - 1; // Months are zero-indexed in JavaScript Date objects
+ const year = parseInt(dateParts[0]);
+ const day = parseInt(dateParts[2]);
+ return `${day} ${monthNames[monthIndex]} ${year}`;
+ },
+ },
},
- data: filteredData?.dates,
- type: "category",
- },
+ ],
yAxis: [
{
type: "value",
@@ -422,359 +428,331 @@
-
- FTD Shares
-
-
- {abbreviateNumber(
- rawData?.slice(-1)?.at(0)?.failToDeliver,
- false,
- )}
-
+ {#if rawData?.length !== 0}
+
+
- {/if}
+
+
-
- {:else}
-
+
- {:else}
-
+
-
+ FTD Shares
-
-
-
-
-
- FTD / Avg Volume
-
-
- {relativeFTD > 0.01
- ? relativeFTD + "%"
- : relativeFTD !== "n/a"
- ? "< 0.01%"
- : "n/a"}
-
-
-
+
-
+
- 1-Year Change
-
-
- {changePercentageYearAgo !== null
- ? abbreviateNumber(
- changePercentageYearAgo?.toFixed(2),
- ) + "%"
- : "n/a"}
-
+
+ {abbreviateNumber(
+ rawData?.slice(-1)?.at(0)?.failToDeliver,
+ false,
+ )}
+
+
+
+
+
+
+ FTD / Avg Volume
+
+
+ {relativeFTD > 0.01
+ ? relativeFTD + "%"
+ : relativeFTD !== "n/a"
+ ? "< 0.01%"
+ : "n/a"}
+
+
+
-
-
+
+ 1-Year Change
+
+
+ {changePercentageYearAgo !== null
+ ? abbreviateNumber(
+ changePercentageYearAgo?.toFixed(2),
+ ) + "%"
+ : "n/a"}
- No data available -
- {/if} -
-
+ {:else}
+
-
-
+
+
- {#if isLoaded}
-
-
-
+
-
+ - Market Cap -
-
+
+
- {#if rawData?.length !== 0}
- Market Cap
+
- 0
- ? "increased"
- : changePercentageYearAgo < 0
- ? "decreased"
- : "unchanged"
- } by ${abbreviateNumber(
- changePercentageYearAgo?.toFixed(2),
- )}% in one year.`}
- />
+ {#if rawData?.length !== 0}
+
+ 0
+ ? "increased"
+ : changePercentageYearAgo < 0
+ ? "decreased"
+ : "unchanged"
+ } by ${abbreviateNumber(
+ changePercentageYearAgo?.toFixed(2),
+ )}% in one year.`}
+ />
-
-
-
-
- Market Cap
-
-
- {@html abbreviateNumber(
- data?.getStockQuote?.marketCap,
- false,
- true,
- )}
-
+
+
+
-
-
+
-
+ Market Cap
-
-
-
-
-
- Category
-
-
- {#if capCategory}
-
- {capCategory.name}
-
- {:else}
- n/a
- {/if}
-
-
-
-
-
-
- 1-Year Change
-
-
- {changePercentageYearAgo !== null
- ? abbreviateNumber(
- changePercentageYearAgo?.toFixed(2),
- ) + "%"
- : "n/a"}
-
-
-
-
- - Market Cap Chart -
-
-
-
-
-
-
-
-
- Select time frame
-
-
- changeStatement("1M")}
- class="cursor-pointer hover:bg-primary"
- >
- 1 Month
-
- changeStatement("6M")}
- class="cursor-pointer hover:bg-primary"
- >
- 6 Months
-
- changeStatement("1Y")}
- class="cursor-pointer hover:bg-primary"
- >
- 1 Year
-
- changeStatement("3Y")}
- class="cursor-pointer hover:bg-primary"
- >
- 3 Years
-
- changeStatement("5Y")}
- class="cursor-pointer hover:bg-primary"
- >
- 5 Years
-
- changeStatement("10Y")}
- class="cursor-pointer hover:bg-primary"
- >
- 10 Years
-
- changeStatement("Max")}
- class="cursor-pointer hover:bg-primary"
- >
- Max
-
-
-
-
-
-
-
-
- - Market Cap History -
- -
-
- {/if}
+
- {#each tabs as item, i}
- {#if data?.user?.tier !== "Pro" && i > 0}
-
-
- {:else}
-
-
+ {:else}
+
-
-
+
+
+
+
+
+ {#each tabs as item, i}
+ {#if data?.user?.tier !== "Pro" && i > 0}
+
+ {:else}
+
+ {/if}
+ {/each}
+
+
+
+
+
+
+ | Date | +Market Cap | +% Change | +
|---|---|---|
| + {item?.date} + | + ++ {@html abbreviateNumber(item?.marketCap, false, true)} + | + ++ {#if index + 1 - tableList?.length === 0} + - + {:else if item?.marketCap - tableList[index + 1]?.marketCap > 0} + + +{( + ((item?.marketCap - + tableList[index + 1]?.marketCap) / + item?.marketCap) * + 100 + )?.toFixed(2)}% + + {:else if item?.marketCap - tableList[index + 1]?.marketCap < 0} + + -{( + Math?.abs( + (tableList[index + 1]?.marketCap - + item?.marketCap) / + item?.marketCap, + ) * 100 + )?.toFixed(2)}% + + {:else} + - + {/if} + | +