diff --git a/src/lib/components/FinancialChart.svelte b/src/lib/components/FinancialChart.svelte index 55716059..181ee454 100644 --- a/src/lib/components/FinancialChart.svelte +++ b/src/lib/components/FinancialChart.svelte @@ -2,6 +2,7 @@ import highcharts from "$lib/highcharts.ts"; import { abbreviateNumber } from "$lib/utils"; import Lazy from "svelte-lazy"; + import { mode } from "mode-watcher"; import { onMount } from "svelte"; export let data; @@ -20,8 +21,8 @@ return { chart: { type: "column", - backgroundColor: "#09090B", - plotBackgroundColor: "#09090B", + backgroundColor: $mode === "light" ? "#fff" : "#09090B", + plotBackgroundColor: $mode === "light" ? "#fff" : "#09090B", height: 360, animation: false, }, @@ -47,19 +48,19 @@ title: { text: `

${labelName}

`, useHTML: true, - style: { color: "white" }, + style: { color: $mode === "light" ? "black" : "white" }, }, xAxis: { endOnTick: false, categories: xList, 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", }, rotation: -45, distance: 10, // Increases space between label and axis @@ -67,9 +68,9 @@ }, yAxis: { gridLineWidth: 1, - gridLineColor: "#111827", + gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827", labels: { - style: { color: "white" }, + style: { color: $mode === "light" ? "black" : "white" }, formatter: function () { return abbreviateNumber(this.value); }, @@ -151,21 +152,21 @@ }); // Watch for changes in props and update chart accordingly - $: if (filterRule || displayStatement || data || processedData) { + $: if (filterRule || displayStatement || data || processedData || $mode) { updateChart(); } {#if !isLoaded}
{:else}
diff --git a/src/lib/components/FinancialTable.svelte b/src/lib/components/FinancialTable.svelte index d3c1dbe8..4ba7d754 100644 --- a/src/lib/components/FinancialTable.svelte +++ b/src/lib/components/FinancialTable.svelte @@ -33,9 +33,9 @@ {#each computedFields as { label, key, isMargin } (key)} - + {label} diff --git a/src/routes/stocks/[tickerID]/financials/+layout.svelte b/src/routes/stocks/[tickerID]/financials/+layout.svelte index f7b62165..280ec1f7 100644 --- a/src/routes/stocks/[tickerID]/financials/+layout.svelte +++ b/src/routes/stocks/[tickerID]/financials/+layout.svelte @@ -61,8 +61,8 @@ href={`/stocks/${$stockTicker}/financials`} on:click={() => changeSubSection("income")} class="p-2 px-5 cursor-pointer {displaySubSection === 'income' - ? 'text-white bg-primary/90' - : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}" + ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold' + : 'text-blue-500 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-primary/90'}" > Income @@ -72,8 +72,8 @@ on:click={() => changeSubSection("balance-sheet")} class="p-2 px-5 cursor-pointer {displaySubSection === 'balance-sheet' - ? 'text-white bg-primary/90' - : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}" + ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold' + : 'text-blue-500 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-primary/90'}" > Balance Sheet @@ -82,8 +82,8 @@ on:click={() => changeSubSection("cash-flow")} class="p-2 px-5 cursor-pointer {displaySubSection === 'cash-flow' - ? 'text-white bg-primary/90' - : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}" + ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold' + : 'text-blue-500 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-primary/90'}" > Cashflow @@ -91,8 +91,8 @@ href={`/stocks/${$stockTicker}/financials/ratios`} on:click={() => changeSubSection("ratios")} class="p-2 px-5 cursor-pointer {displaySubSection === 'ratios' - ? 'text-white bg-primary/90' - : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}" + ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold' + : 'text-blue-500 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-primary/90'}" > Ratios diff --git a/src/routes/stocks/[tickerID]/financials/+page.svelte b/src/routes/stocks/[tickerID]/financials/+page.svelte index 54a43761..bfa792c2 100644 --- a/src/routes/stocks/[tickerID]/financials/+page.svelte +++ b/src/routes/stocks/[tickerID]/financials/+page.svelte @@ -16,7 +16,6 @@ export let data; - let isLoaded = true; let tableList = []; let processedData = {}; @@ -324,242 +323,223 @@ description={`Detailed annual and timeFramely income statement for ${$displayCompanyName} (${$stockTicker}). See many years of revenue, expenses and profits or losses.`} /> -
+
- {#if isLoaded} -
-
+
+
+
+

+ {removeCompanyStrings($displayCompanyName)} Income Statement +

-

- {removeCompanyStrings($displayCompanyName)} Income Statement -

-
- {#each tabs as item, i} - {#if !["Pro", "Plus"]?.includes(data?.user?.tier) && i > 0} - - {:else} - - {/if} - {/each} -
-
- -
- {#if financialData?.length > 0} -
-
- -
-
- - {#if $coolMode} -
- {#each fields as item, i} - - {/each} -
+ + {:else} -
(activeIdx = i)} + class="cursor-pointer group relative z-1 rounded-full w-1/2 min-w-24 md:w-auto px-5 py-1 {activeIdx === + i + ? 'z-0' + : ''} " > - + {/if} + - - - - {#each financialData as cash} - {#if filterRule === "annual"} - - {:else} - - {/if} - {/each} - - - - - - -
Year - {"FY" + cash?.calendarYear?.slice(-2)} - - {"FY" + - cash?.calendarYear?.slice(-2) + - " " + - cash?.period} -
-
+ {item.title} + + {/if} - {/if} + {/each}
-
- {:else} -
-
- + +
+ {#if financialData?.length > 0} +
+ + +
+
+ + + + + + + Select time frame + + + + ($timeFrame = "5Y")} + class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary" + > + 5 years + + ($timeFrame = "10Y")} + class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary" + > + 10 years + + ($timeFrame = "MAX")} + class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary" + > + Max + + + + +
+ +
+
+ + {#if $coolMode} +
+ {#each fields as item, i} + + {/each} +
+ {:else} +
+ + + + + {#each financialData as cash} + {#if filterRule === "annual"} + + {:else} + + {/if} + {/each} + + + + + + +
Year + {"FY" + cash?.calendarYear?.slice(-2)} + + {"FY" + + cash?.calendarYear?.slice(-2) + + " " + + cash?.period} +
+
+ {/if} + {/if}
- {/if} +
diff --git a/src/routes/stocks/[tickerID]/financials/balance-sheet/+page.svelte b/src/routes/stocks/[tickerID]/financials/balance-sheet/+page.svelte index 68b40096..f63180e8 100644 --- a/src/routes/stocks/[tickerID]/financials/balance-sheet/+page.svelte +++ b/src/routes/stocks/[tickerID]/financials/balance-sheet/+page.svelte @@ -359,242 +359,223 @@ description={`Detailed balance sheet for ${$displayCompanyName} (${$stockTicker}), including cash, debt, assets, liabilities, and book value.`} /> -
+
- {#if isLoaded} -
-
+
+
+
+

+ {removeCompanyStrings($displayCompanyName)} Balance Sheet Statement +

-

- {removeCompanyStrings($displayCompanyName)} Balance Sheet Statement -

-
- {#each tabs as item, i} - {#if !["Pro", "Plus"]?.includes(data?.user?.tier) && i > 0} - - {:else} - - {/if} - {/each} -
-
- -
- {#if financialData?.length > 0} -
-
- -
-
- - {#if $coolMode} -
- {#each fields as item, i} - - {/each} -
+ + {:else} -
(activeIdx = i)} + class="cursor-pointer group relative z-1 rounded-full w-1/2 min-w-24 md:w-auto px-5 py-1 {activeIdx === + i + ? 'z-0' + : ''} " > - + {/if} + - - - - {#each financialData as cash} - {#if filterRule === "annual"} - - {:else} - - {/if} - {/each} - - - - - - -
Year - {"FY" + cash?.calendarYear?.slice(-2)} - - {"FY" + - cash?.calendarYear?.slice(-2) + - " " + - cash?.period} -
-
+ {item.title} + + {/if} - {/if} + {/each}
-
- {:else} -
-
- + +
+ {#if financialData?.length > 0} +
+ + +
+
+ + + + + + + Select time frame + + + + ($timeFrame = "5Y")} + class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary" + > + 5 years + + ($timeFrame = "10Y")} + class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary" + > + 10 years + + ($timeFrame = "MAX")} + class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary" + > + Max + + + + +
+ +
+
+ + {#if $coolMode} +
+ {#each fields as item, i} + + {/each} +
+ {:else} +
+ + + + + {#each financialData as cash} + {#if filterRule === "annual"} + + {:else} + + {/if} + {/each} + + + + + + +
Year + {"FY" + cash?.calendarYear?.slice(-2)} + + {"FY" + + cash?.calendarYear?.slice(-2) + + " " + + cash?.period} +
+
+ {/if} + {/if}
- {/if} +
diff --git a/src/routes/stocks/[tickerID]/financials/cash-flow/+page.svelte b/src/routes/stocks/[tickerID]/financials/cash-flow/+page.svelte index 0aaea2c1..a34918c8 100644 --- a/src/routes/stocks/[tickerID]/financials/cash-flow/+page.svelte +++ b/src/routes/stocks/[tickerID]/financials/cash-flow/+page.svelte @@ -321,242 +321,223 @@ description={`Detailed cash flow statements for ${$displayCompanyName} (${$stockTicker}), including operating cash flow, capex and free cash flow.`} /> -
+
- {#if isLoaded} -
-
+
+
+
+

+ {removeCompanyStrings($displayCompanyName)} Cash Flow Statement +

-

- {removeCompanyStrings($displayCompanyName)} Cash Flow Statement -

-
- {#each tabs as item, i} - {#if !["Pro", "Plus"]?.includes(data?.user?.tier) && i > 0} - - {:else} - - {/if} - {/each} -
-
- -
- {#if financialData?.length > 0} -
-
- -
-
- - {#if $coolMode} -
- {#each fields as item, i} - - {/each} -
+ + {:else} -
(activeIdx = i)} + class="cursor-pointer group relative z-1 rounded-full w-1/2 min-w-24 md:w-auto px-5 py-1 {activeIdx === + i + ? 'z-0' + : ''} " > - + {/if} + - - - - {#each financialData as cash} - {#if filterRule === "annual"} - - {:else} - - {/if} - {/each} - - - - - - -
Year - {"FY" + cash?.calendarYear?.slice(-2)} - - {"FY" + - cash?.calendarYear?.slice(-2) + - " " + - cash?.period} -
-
+ {item.title} + + {/if} - {/if} + {/each}
-
- {:else} -
-
- + +
+ {#if financialData?.length > 0} +
+ + +
+
+ + + + + + + Select time frame + + + + ($timeFrame = "5Y")} + class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary" + > + 5 years + + ($timeFrame = "10Y")} + class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary" + > + 10 years + + ($timeFrame = "MAX")} + class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary" + > + Max + + + + +
+ +
+
+ + {#if $coolMode} +
+ {#each fields as item, i} + + {/each} +
+ {:else} +
+ + + + + {#each financialData as cash} + {#if filterRule === "annual"} + + {:else} + + {/if} + {/each} + + + + + + +
Year + {"FY" + cash?.calendarYear?.slice(-2)} + + {"FY" + + cash?.calendarYear?.slice(-2) + + " " + + cash?.period} +
+
+ {/if} + {/if}
- {/if} +
diff --git a/src/routes/stocks/[tickerID]/financials/ratios/+page.svelte b/src/routes/stocks/[tickerID]/financials/ratios/+page.svelte index 15d8edf9..db8ab987 100644 --- a/src/routes/stocks/[tickerID]/financials/ratios/+page.svelte +++ b/src/routes/stocks/[tickerID]/financials/ratios/+page.svelte @@ -310,242 +310,223 @@ description={`Detailed cash flow statements for ${$displayCompanyName} (${$stockTicker}), including operating cash flow, capex and free cash flow.`} /> -
+
- {#if isLoaded} -
-
+
+
+
+

+ {removeCompanyStrings($displayCompanyName)} Ratios Statement +

-

- {removeCompanyStrings($displayCompanyName)} Ratios Statement -

-
- {#each tabs as item, i} - {#if !["Pro", "Plus"]?.includes(data?.user?.tier) && i > 0} - - {:else} - - {/if} - {/each} -
-
- -
- {#if financialData?.length > 0} -
-
- -
-
- - {#if $coolMode} -
- {#each fields as item, i} - - {/each} -
+ + {:else} -
(activeIdx = i)} + class="cursor-pointer group relative z-1 rounded-full w-1/2 min-w-24 md:w-auto px-5 py-1 {activeIdx === + i + ? 'z-0' + : ''} " > - + {/if} + - - - - {#each financialData as cash} - {#if filterRule === "annual"} - - {:else} - - {/if} - {/each} - - - - - - -
Year - {"FY" + cash?.calendarYear?.slice(-2)} - - {"FY" + - cash?.calendarYear?.slice(-2) + - " " + - cash?.period} -
-
+ {item.title} + + {/if} - {/if} + {/each}
-
- {:else} -
-
- + +
+ {#if financialData?.length > 0} +
+ + +
+
+ + + + + + + Select time frame + + + + ($timeFrame = "5Y")} + class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary" + > + 5 years + + ($timeFrame = "10Y")} + class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary" + > + 10 years + + ($timeFrame = "MAX")} + class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary" + > + Max + + + + +
+ +
+
+ + {#if $coolMode} +
+ {#each fields as item, i} + + {/each} +
+ {:else} +
+ + + + + {#each financialData as cash} + {#if filterRule === "annual"} + + {:else} + + {/if} + {/each} + + + + + + +
Year + {"FY" + cash?.calendarYear?.slice(-2)} + + {"FY" + + cash?.calendarYear?.slice(-2) + + " " + + cash?.period} +
+
+ {/if} + {/if}
- {/if} +