{capCategory?.name} Rankings
diff --git a/src/routes/stocks/[tickerID]/statistics/market-cap/+page.svelte b/src/routes/stocks/[tickerID]/statistics/market-cap/+page.svelte
index a9a6e664..442791fa 100644
--- a/src/routes/stocks/[tickerID]/statistics/market-cap/+page.svelte
+++ b/src/routes/stocks/[tickerID]/statistics/market-cap/+page.svelte
@@ -8,6 +8,7 @@
//import * as XLSX from 'xlsx';
import { goto } from "$app/navigation";
import highcharts from "$lib/highcharts.ts";
+ import { mode } from "mode-watcher";
export let data;
@@ -188,7 +189,6 @@
tableList?.sort((a, b) => new Date(b?.date) - new Date(a?.date));
}
- let config = plotData();
tableList = filterEndOfYearDates(rawData);
tableList?.sort((a, b) => new Date(b?.date) - new Date(a?.date));
changePercentageYearAgo = computeYearOverYearChange(rawData);
@@ -196,7 +196,7 @@
async function changeStatement(state) {
timePeriod = state;
- config = await plotData();
+ config = plotData();
}
function filterDataByTimePeriod(rawData, timePeriod) {
@@ -257,14 +257,14 @@
enabled: false,
},
chart: {
- backgroundColor: "#09090B",
- plotBackgroundColor: "#09090B",
+ backgroundColor: $mode === "light" ? "#fff" : "#09090B",
+ plotBackgroundColor: $mode === "light" ? "#fff" : "#09090B",
height: 360, // Set the maximum height for the chart
},
title: {
text: `
${$stockTicker} Market Cap
`,
style: {
- color: "white",
+ color: $mode === "light" ? "black" : "white",
// Using inline CSS for margin-top and margin-bottom
},
useHTML: true, // Enable HTML to apply custom class styling
@@ -274,13 +274,13 @@
endOnTick: false,
categories: filteredData?.dates,
crosshair: {
- color: "#fff", // Set the color of the crosshair line
+ color: $mode === "light" ? "black" : "white", // Set the color of the crosshair line
width: 1, // Adjust the line width as needed
dashStyle: "Solid",
},
labels: {
style: {
- color: "#fff",
+ color: $mode === "light" ? "black" : "white",
},
distance: 20, // Increases space between label and axis
formatter: function () {
@@ -306,9 +306,9 @@
},
yAxis: {
gridLineWidth: 1,
- gridLineColor: "#111827",
+ gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
labels: {
- style: { color: "white" },
+ style: { color: $mode === "light" ? "black" : "white" },
},
title: { text: null },
opposite: true,
@@ -327,7 +327,7 @@
borderRadius: 4,
formatter: function () {
// Format the x value to display time in hh:mm format
- let tooltipContent = `
${new Date(
+ let tooltipContent = `${new Date(
this?.x,
).toLocaleDateString("en-US", {
year: "numeric",
@@ -337,8 +337,8 @@
// Loop through each point in the shared tooltip
this.points.forEach((point) => {
- tooltipContent += `${point.series.name}:
- ${abbreviateNumber(
+ tooltipContent += `${point.series.name}:
+ ${abbreviateNumber(
point.y,
)}
`;
});
@@ -365,7 +365,7 @@
name: "Mkt Cap",
type: "area",
data: filteredData?.marketCapList,
- color: "#fff",
+ color: $mode === "light" ? "blue" : "white",
lineWidth: 1,
marker: {
enabled: false,
@@ -417,6 +417,13 @@
}
};
+ let config = null;
+
+ $: {
+ if ($mode) {
+ config = plotData();
+ }
+ }
$: capCategory = getMarketCapCategory(data?.getStockQuote?.marketCap);
@@ -425,7 +432,7 @@
description={`Historical Market Cap of ${$displayCompanyName}.`}
/>
-
+
-
+
{removeCompanyStrings($displayCompanyName)} Market Cap
@@ -463,31 +470,29 @@
class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-6 mt-3"
>
-
+
Market Cap
- ●
-
+
{abbreviateNumber(data?.getStockQuote?.marketCap)}
-
+
Category
- ●
-
+
1-Year Change
- ●
-
{changePercentageYearAgo > 100
? "> 100"
: changePercentageYearAgo?.toFixed(1)}%
{changePercentageYearAgo >= 0 ? "Positive" : "Negative"}
Trend
@@ -533,9 +537,7 @@
-
+
Market Cap Chart
@@ -547,9 +549,9 @@
-
+
Market Cap History
@@ -659,7 +661,7 @@
class="inline-flex justify-center w-full rounded-md sm:w-auto sm:ml-auto"
>
{#each tabs as item, i}
{#if !["Pro", "Plus"]?.includes(data?.user?.tier) && i > 0}
@@ -697,7 +699,7 @@
class="relative text-sm block font-semibold whitespace-nowrap {activeIdx ===
i
? 'text-black'
- : 'text-white'}"
+ : ''}"
>
{item.title}
@@ -710,30 +712,23 @@
-
+
- | Date |
- Market Cap |
- % Change | Date
+ Market Cap |
+ % Change |
{#each tableList as item, index}
- |
+ |
{new Date(item?.date)?.toLocaleDateString("en-US", {
day: "2-digit", // Include day number
month: "short", // Display short month name
@@ -742,18 +737,18 @@
|
{@html abbreviateNumber(item?.marketCap, false, true)}
|
{#if index === tableList?.length - 1}
n/a
{:else if item?.marketCap > tableList[index + 1]?.marketCap}
-
+
+{(
((item?.marketCap -
tableList[index + 1]?.marketCap) /
@@ -762,7 +757,7 @@
)?.toFixed(2)}%
{:else if item?.marketCap < tableList[index + 1]?.marketCap}
-
+
-{(
Math.abs(
(item?.marketCap -
|