ui fix
This commit is contained in:
MuslemRahimi
parent
dc74fb0d38
commit
8176707777
@ -2,6 +2,7 @@
|
|||||||
import highcharts from "$lib/highcharts.ts";
|
import highcharts from "$lib/highcharts.ts";
|
||||||
import { abbreviateNumber } from "$lib/utils";
|
import { abbreviateNumber } from "$lib/utils";
|
||||||
import Lazy from "svelte-lazy";
|
import Lazy from "svelte-lazy";
|
||||||
|
import { mode } from "mode-watcher";
|
||||||
import { onMount } from "svelte";
|
import { onMount } from "svelte";
|
||||||
|
|
||||||
export let data;
|
export let data;
|
||||||
@ -20,8 +21,8 @@
|
|||||||
return {
|
return {
|
||||||
chart: {
|
chart: {
|
||||||
type: "column",
|
type: "column",
|
||||||
backgroundColor: "#09090B",
|
backgroundColor: $mode === "light" ? "#fff" : "#09090B",
|
||||||
plotBackgroundColor: "#09090B",
|
plotBackgroundColor: $mode === "light" ? "#fff" : "#09090B",
|
||||||
height: 360,
|
height: 360,
|
||||||
animation: false,
|
animation: false,
|
||||||
},
|
},
|
||||||
@ -47,19 +48,19 @@
|
|||||||
title: {
|
title: {
|
||||||
text: `<h3 class="mt-3 mb-1 sm:text-lg">${labelName}</h3>`,
|
text: `<h3 class="mt-3 mb-1 sm:text-lg">${labelName}</h3>`,
|
||||||
useHTML: true,
|
useHTML: true,
|
||||||
style: { color: "white" },
|
style: { color: $mode === "light" ? "black" : "white" },
|
||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
endOnTick: false,
|
endOnTick: false,
|
||||||
categories: xList,
|
categories: xList,
|
||||||
crosshair: {
|
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
|
width: 1, // Adjust the line width as needed
|
||||||
dashStyle: "Solid",
|
dashStyle: "Solid",
|
||||||
},
|
},
|
||||||
labels: {
|
labels: {
|
||||||
style: {
|
style: {
|
||||||
color: "#fff",
|
color: $mode === "light" ? "black" : "white",
|
||||||
},
|
},
|
||||||
rotation: -45,
|
rotation: -45,
|
||||||
distance: 10, // Increases space between label and axis
|
distance: 10, // Increases space between label and axis
|
||||||
@ -67,9 +68,9 @@
|
|||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
gridLineWidth: 1,
|
gridLineWidth: 1,
|
||||||
gridLineColor: "#111827",
|
gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
|
||||||
labels: {
|
labels: {
|
||||||
style: { color: "white" },
|
style: { color: $mode === "light" ? "black" : "white" },
|
||||||
formatter: function () {
|
formatter: function () {
|
||||||
return abbreviateNumber(this.value);
|
return abbreviateNumber(this.value);
|
||||||
},
|
},
|
||||||
@ -151,21 +152,21 @@
|
|||||||
});
|
});
|
||||||
|
|
||||||
// Watch for changes in props and update chart accordingly
|
// Watch for changes in props and update chart accordingly
|
||||||
$: if (filterRule || displayStatement || data || processedData) {
|
$: if (filterRule || displayStatement || data || processedData || $mode) {
|
||||||
updateChart();
|
updateChart();
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#if !isLoaded}
|
{#if !isLoaded}
|
||||||
<div
|
<div
|
||||||
class="w-full h-[360px] flex justify-center items-center m-auto border border-gray-800 rounded"
|
class="w-full h-[360px] flex justify-center items-center m-auto shadow-sm border border-gray-300 dark:border-gray-800 rounded"
|
||||||
>
|
>
|
||||||
<span class="loading loading-bars loading-sm"></span>
|
<span class="loading loading-bars loading-sm"></span>
|
||||||
</div>
|
</div>
|
||||||
{:else}
|
{:else}
|
||||||
<Lazy fadeOption={{ delay: 50, duration: 50 }} keep={true}>
|
<Lazy fadeOption={{ delay: 50, duration: 50 }} keep={true}>
|
||||||
<div
|
<div
|
||||||
class="border border-gray-800 rounded w-full"
|
class="shadow-sm border border-gray-300 dark:border-gray-800 rounded w-full"
|
||||||
use:highcharts={config}
|
use:highcharts={config}
|
||||||
bind:this={chartElement}
|
bind:this={chartElement}
|
||||||
></div>
|
></div>
|
||||||
|
|||||||
@ -33,9 +33,9 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#each computedFields as { label, key, isMargin } (key)}
|
{#each computedFields as { label, key, isMargin } (key)}
|
||||||
<tr class="text-white odd:bg-odd whitespace-nowrap border-b border-gray-800">
|
<tr class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd">
|
||||||
<td
|
<td
|
||||||
class="text-start border-r border-gray-700 text-white text-sm sm:text-[1rem]"
|
class="text-start border-r border-gray-300 dark:border-gray-700 text-sm sm:text-[1rem]"
|
||||||
>
|
>
|
||||||
{label}
|
{label}
|
||||||
</td>
|
</td>
|
||||||
|
|||||||
@ -61,8 +61,8 @@
|
|||||||
href={`/stocks/${$stockTicker}/financials`}
|
href={`/stocks/${$stockTicker}/financials`}
|
||||||
on:click={() => changeSubSection("income")}
|
on:click={() => changeSubSection("income")}
|
||||||
class="p-2 px-5 cursor-pointer {displaySubSection === 'income'
|
class="p-2 px-5 cursor-pointer {displaySubSection === 'income'
|
||||||
? 'text-white bg-primary/90'
|
? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
|
||||||
: 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
|
: '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
|
Income
|
||||||
</a>
|
</a>
|
||||||
@ -72,8 +72,8 @@
|
|||||||
on:click={() => changeSubSection("balance-sheet")}
|
on:click={() => changeSubSection("balance-sheet")}
|
||||||
class="p-2 px-5 cursor-pointer {displaySubSection ===
|
class="p-2 px-5 cursor-pointer {displaySubSection ===
|
||||||
'balance-sheet'
|
'balance-sheet'
|
||||||
? 'text-white bg-primary/90'
|
? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
|
||||||
: 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
|
: '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
|
Balance Sheet
|
||||||
</a>
|
</a>
|
||||||
@ -82,8 +82,8 @@
|
|||||||
on:click={() => changeSubSection("cash-flow")}
|
on:click={() => changeSubSection("cash-flow")}
|
||||||
class="p-2 px-5 cursor-pointer {displaySubSection ===
|
class="p-2 px-5 cursor-pointer {displaySubSection ===
|
||||||
'cash-flow'
|
'cash-flow'
|
||||||
? 'text-white bg-primary/90'
|
? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
|
||||||
: 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
|
: '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
|
Cashflow
|
||||||
</a>
|
</a>
|
||||||
@ -91,8 +91,8 @@
|
|||||||
href={`/stocks/${$stockTicker}/financials/ratios`}
|
href={`/stocks/${$stockTicker}/financials/ratios`}
|
||||||
on:click={() => changeSubSection("ratios")}
|
on:click={() => changeSubSection("ratios")}
|
||||||
class="p-2 px-5 cursor-pointer {displaySubSection === 'ratios'
|
class="p-2 px-5 cursor-pointer {displaySubSection === 'ratios'
|
||||||
? 'text-white bg-primary/90'
|
? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
|
||||||
: 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
|
: '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
|
Ratios
|
||||||
</a>
|
</a>
|
||||||
|
|||||||
@ -16,7 +16,6 @@
|
|||||||
|
|
||||||
export let data;
|
export let data;
|
||||||
|
|
||||||
let isLoaded = true;
|
|
||||||
let tableList = [];
|
let tableList = [];
|
||||||
let processedData = {};
|
let processedData = {};
|
||||||
|
|
||||||
@ -324,24 +323,23 @@
|
|||||||
description={`Detailed annual and timeFramely income statement for ${$displayCompanyName} (${$stockTicker}). See many years of revenue, expenses and profits or losses.`}
|
description={`Detailed annual and timeFramely income statement for ${$displayCompanyName} (${$stockTicker}). See many years of revenue, expenses and profits or losses.`}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<section class="bg-default w-full overflow-hidden text-white h-full">
|
<section class=" w-full overflow-hidden h-full">
|
||||||
<div
|
<div
|
||||||
class="w-full flex justify-center w-full sm-auto h-full overflow-hidden mt-4 sm:mt-0"
|
class="w-full flex justify-center w-full sm-auto h-full overflow-hidden mt-4 sm:mt-0"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="w-full relative flex justify-center items-center overflow-hidden"
|
class="w-full relative flex justify-center items-center overflow-hidden"
|
||||||
>
|
>
|
||||||
{#if isLoaded}
|
|
||||||
<main class="w-full">
|
<main class="w-full">
|
||||||
<div class="sm:pl-7 sm:pb-7 sm:pt-7 m-auto mt-2 sm:mt-0">
|
<div class="sm:pl-7 sm:pb-7 sm:pt-7 m-auto mt-2 sm:mt-0">
|
||||||
<div
|
<div
|
||||||
class="mb-3 flex flex-col sm:flex-row items-center justify-between"
|
class="mb-3 flex flex-col sm:flex-row items-center justify-between"
|
||||||
>
|
>
|
||||||
<h1 class="text-xl sm:text-2xl text-white font-bold">
|
<h1 class="text-xl sm:text-2xl font-bold">
|
||||||
{removeCompanyStrings($displayCompanyName)} Income Statement
|
{removeCompanyStrings($displayCompanyName)} Income Statement
|
||||||
</h1>
|
</h1>
|
||||||
<div
|
<div
|
||||||
class="mt-3 sm:mt-0 mb-2 sm:mb-0 bg-secondary w-full min-w-24 sm:w-fit relative flex flex-wrap items-center justify-center rounded-md p-1"
|
class="mt-3 sm:mt-0 mb-2 sm:mb-0 bg-gray-300 dark:bg-secondary w-full min-w-24 sm:w-fit relative flex flex-wrap items-center justify-center rounded-md p-1"
|
||||||
>
|
>
|
||||||
{#each tabs as item, i}
|
{#each tabs as item, i}
|
||||||
{#if !["Pro", "Plus"]?.includes(data?.user?.tier) && i > 0}
|
{#if !["Pro", "Plus"]?.includes(data?.user?.tier) && i > 0}
|
||||||
@ -356,7 +354,7 @@
|
|||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
><path
|
><path
|
||||||
fill="#A3A3A3"
|
fill="currentColor"
|
||||||
d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
|
d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
|
||||||
/></svg
|
/></svg
|
||||||
>
|
>
|
||||||
@ -371,15 +369,13 @@
|
|||||||
: ''} "
|
: ''} "
|
||||||
>
|
>
|
||||||
{#if activeIdx === i}
|
{#if activeIdx === i}
|
||||||
<div
|
<div class="absolute inset-0 rounded-md bg-[#fff]"></div>
|
||||||
class="absolute inset-0 rounded-md bg-[#fff]"
|
|
||||||
></div>
|
|
||||||
{/if}
|
{/if}
|
||||||
<span
|
<span
|
||||||
class="relative text-sm block font-semibold whitespace-nowrap {activeIdx ===
|
class="relative text-sm block font-semibold whitespace-nowrap {activeIdx ===
|
||||||
i
|
i
|
||||||
? 'text-black'
|
? 'text-black'
|
||||||
: 'text-white'}"
|
: ''}"
|
||||||
>
|
>
|
||||||
{item.title}
|
{item.title}
|
||||||
</span>
|
</span>
|
||||||
@ -408,9 +404,9 @@
|
|||||||
class="w-11 h-6 bg-gray-400 rounded-full peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[#1563F9]"
|
class="w-11 h-6 bg-gray-400 rounded-full peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[#1563F9]"
|
||||||
></div>
|
></div>
|
||||||
{#if $coolMode}
|
{#if $coolMode}
|
||||||
<span class="ml-2 text-sm text-white"> Chart Mode </span>
|
<span class="ml-2 text-sm"> Chart Mode </span>
|
||||||
{:else}
|
{:else}
|
||||||
<span class="ml-2 text-sm text-white"> Table Mode </span>
|
<span class="ml-2 text-sm"> Table Mode </span>
|
||||||
{/if}
|
{/if}
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
@ -420,10 +416,9 @@
|
|||||||
<DropdownMenu.Trigger asChild let:builder>
|
<DropdownMenu.Trigger asChild let:builder>
|
||||||
<Button
|
<Button
|
||||||
builders={[builder]}
|
builders={[builder]}
|
||||||
class="w-full border-gray-600 border bg-default sm:hover:bg-primary ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-md truncate"
|
class="shadow-sm w-full border-gray-300 dark:border-gray-600 border sm:hover:bg-gray-100 dark:sm:hover:bg-primary ease-out flex flex-row justify-between items-center px-3 py-2 rounded-md truncate"
|
||||||
>
|
|
||||||
<span class="truncate text-white">{$timeFrame}</span
|
|
||||||
>
|
>
|
||||||
|
<span class="truncate">{$timeFrame}</span>
|
||||||
<svg
|
<svg
|
||||||
class="-mr-1 ml-1 h-5 w-5 xs:ml-2 inline-block"
|
class="-mr-1 ml-1 h-5 w-5 xs:ml-2 inline-block"
|
||||||
viewBox="0 0 20 20"
|
viewBox="0 0 20 20"
|
||||||
@ -442,26 +437,28 @@
|
|||||||
<DropdownMenu.Content
|
<DropdownMenu.Content
|
||||||
class="w-56 h-fit max-h-72 overflow-y-auto scroller"
|
class="w-56 h-fit max-h-72 overflow-y-auto scroller"
|
||||||
>
|
>
|
||||||
<DropdownMenu.Label class="text-gray-400">
|
<DropdownMenu.Label
|
||||||
|
class="text-muted dark:text-gray-400"
|
||||||
|
>
|
||||||
Select time frame
|
Select time frame
|
||||||
</DropdownMenu.Label>
|
</DropdownMenu.Label>
|
||||||
<DropdownMenu.Separator />
|
<DropdownMenu.Separator />
|
||||||
<DropdownMenu.Group>
|
<DropdownMenu.Group>
|
||||||
<DropdownMenu.Item
|
<DropdownMenu.Item
|
||||||
on:click={() => ($timeFrame = "5Y")}
|
on:click={() => ($timeFrame = "5Y")}
|
||||||
class="cursor-pointer hover:bg-primary"
|
class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
|
||||||
>
|
>
|
||||||
5 years
|
5 years
|
||||||
</DropdownMenu.Item>
|
</DropdownMenu.Item>
|
||||||
<DropdownMenu.Item
|
<DropdownMenu.Item
|
||||||
on:click={() => ($timeFrame = "10Y")}
|
on:click={() => ($timeFrame = "10Y")}
|
||||||
class="cursor-pointer hover:bg-primary"
|
class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
|
||||||
>
|
>
|
||||||
10 years
|
10 years
|
||||||
</DropdownMenu.Item>
|
</DropdownMenu.Item>
|
||||||
<DropdownMenu.Item
|
<DropdownMenu.Item
|
||||||
on:click={() => ($timeFrame = "MAX")}
|
on:click={() => ($timeFrame = "MAX")}
|
||||||
class="cursor-pointer hover:bg-primary"
|
class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
|
||||||
>
|
>
|
||||||
Max
|
Max
|
||||||
</DropdownMenu.Item>
|
</DropdownMenu.Item>
|
||||||
@ -471,9 +468,9 @@
|
|||||||
</div>
|
</div>
|
||||||
<Button
|
<Button
|
||||||
on:click={() => exportFundamentalData("csv")}
|
on:click={() => exportFundamentalData("csv")}
|
||||||
class="ml-2 w-fit border-gray-600 border bg-default sm:hover:bg-primary ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-md truncate"
|
class="shadow-sm ml-2 w-fit border-gray-300 dark:border-gray-600 border sm:hover:bg-gray-100 dark:sm:hover:bg-primary ease-out flex flex-row justify-between items-center px-3 py-2 rounded-md truncate"
|
||||||
>
|
>
|
||||||
<span class="truncate text-white">Download</span>
|
<span class="truncate">Download</span>
|
||||||
<svg
|
<svg
|
||||||
class="{['Pro', 'Plus']?.includes(data?.user?.tier)
|
class="{['Pro', 'Plus']?.includes(data?.user?.tier)
|
||||||
? 'hidden'
|
? 'hidden'
|
||||||
@ -481,7 +478,7 @@
|
|||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
><path
|
><path
|
||||||
fill="#A3A3A3"
|
fill="currentColor"
|
||||||
d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
|
d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
|
||||||
/></svg
|
/></svg
|
||||||
>
|
>
|
||||||
@ -509,25 +506,20 @@
|
|||||||
class="w-full rounded-none sm:rounded-md m-auto overflow-x-auto no-scrollbar"
|
class="w-full rounded-none sm:rounded-md m-auto overflow-x-auto no-scrollbar"
|
||||||
>
|
>
|
||||||
<table
|
<table
|
||||||
class="table table-sm bg-table border border-gray-800 table-compact w-full"
|
class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md w-full bg-white dark:bg-table border border-gray-300 dark:border-gray-800 m-auto"
|
||||||
>
|
>
|
||||||
<thead class="bg-default">
|
<thead class="text-muted dark:text-white">
|
||||||
<tr class="text-white">
|
<tr class="">
|
||||||
<td
|
<td class="text-start text-sm font-semibold pr-10"
|
||||||
class="text-start bg-default text-white text-sm font-semibold pr-10"
|
|
||||||
>Year</td
|
>Year</td
|
||||||
>
|
>
|
||||||
{#each financialData as cash}
|
{#each financialData as cash}
|
||||||
{#if filterRule === "annual"}
|
{#if filterRule === "annual"}
|
||||||
<td
|
<td class=" font-semibold text-sm text-end">
|
||||||
class="bg-default font-semibold text-sm text-end"
|
|
||||||
>
|
|
||||||
{"FY" + cash?.calendarYear?.slice(-2)}
|
{"FY" + cash?.calendarYear?.slice(-2)}
|
||||||
</td>
|
</td>
|
||||||
{:else}
|
{:else}
|
||||||
<td
|
<td class=" font-semibold text-sm text-end">
|
||||||
class="bg-default font-semibold text-sm text-end"
|
|
||||||
>
|
|
||||||
{"FY" +
|
{"FY" +
|
||||||
cash?.calendarYear?.slice(-2) +
|
cash?.calendarYear?.slice(-2) +
|
||||||
" " +
|
" " +
|
||||||
@ -548,18 +540,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
{:else}
|
|
||||||
<div class="w-full flex justify-center items-center h-80">
|
|
||||||
<div class="relative">
|
|
||||||
<label
|
|
||||||
class="bg-secondary rounded-md h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
|
|
||||||
>
|
|
||||||
<span class="loading loading-spinner loading-md text-gray-400"
|
|
||||||
></span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@ -359,24 +359,23 @@
|
|||||||
description={`Detailed balance sheet for ${$displayCompanyName} (${$stockTicker}), including cash, debt, assets, liabilities, and book value.`}
|
description={`Detailed balance sheet for ${$displayCompanyName} (${$stockTicker}), including cash, debt, assets, liabilities, and book value.`}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<section class="bg-default w-full overflow-hidden text-white h-full">
|
<section class=" w-full overflow-hidden h-full">
|
||||||
<div
|
<div
|
||||||
class="w-full flex justify-center w-full sm-auto h-full overflow-hidden mt-4 sm:mt-0"
|
class="w-full flex justify-center w-full sm-auto h-full overflow-hidden mt-4 sm:mt-0"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="w-full relative flex justify-center items-center overflow-hidden"
|
class="w-full relative flex justify-center items-center overflow-hidden"
|
||||||
>
|
>
|
||||||
{#if isLoaded}
|
|
||||||
<main class="w-full">
|
<main class="w-full">
|
||||||
<div class="sm:pl-7 sm:pb-7 sm:pt-7 m-auto mt-2 sm:mt-0">
|
<div class="sm:pl-7 sm:pb-7 sm:pt-7 m-auto mt-2 sm:mt-0">
|
||||||
<div
|
<div
|
||||||
class="mb-3 flex flex-col sm:flex-row items-center justify-between"
|
class="mb-3 flex flex-col sm:flex-row items-center justify-between"
|
||||||
>
|
>
|
||||||
<h1 class="text-xl sm:text-2xl text-white font-bold">
|
<h1 class="text-xl sm:text-2xl font-bold">
|
||||||
{removeCompanyStrings($displayCompanyName)} Balance Sheet Statement
|
{removeCompanyStrings($displayCompanyName)} Balance Sheet Statement
|
||||||
</h1>
|
</h1>
|
||||||
<div
|
<div
|
||||||
class="mt-3 sm:mt-0 mb-2 sm:mb-0 bg-secondary w-full min-w-24 sm:w-fit relative flex flex-wrap items-center justify-center rounded-md p-1"
|
class="mt-3 sm:mt-0 mb-2 sm:mb-0 bg-gray-300 dark:bg-secondary w-full min-w-24 sm:w-fit relative flex flex-wrap items-center justify-center rounded-md p-1"
|
||||||
>
|
>
|
||||||
{#each tabs as item, i}
|
{#each tabs as item, i}
|
||||||
{#if !["Pro", "Plus"]?.includes(data?.user?.tier) && i > 0}
|
{#if !["Pro", "Plus"]?.includes(data?.user?.tier) && i > 0}
|
||||||
@ -391,7 +390,7 @@
|
|||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
><path
|
><path
|
||||||
fill="#A3A3A3"
|
fill="currentColor"
|
||||||
d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
|
d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
|
||||||
/></svg
|
/></svg
|
||||||
>
|
>
|
||||||
@ -406,15 +405,13 @@
|
|||||||
: ''} "
|
: ''} "
|
||||||
>
|
>
|
||||||
{#if activeIdx === i}
|
{#if activeIdx === i}
|
||||||
<div
|
<div class="absolute inset-0 rounded-md bg-[#fff]"></div>
|
||||||
class="absolute inset-0 rounded-md bg-[#fff]"
|
|
||||||
></div>
|
|
||||||
{/if}
|
{/if}
|
||||||
<span
|
<span
|
||||||
class="relative text-sm block font-semibold whitespace-nowrap {activeIdx ===
|
class="relative text-sm block font-semibold whitespace-nowrap {activeIdx ===
|
||||||
i
|
i
|
||||||
? 'text-black'
|
? 'text-black'
|
||||||
: 'text-white'}"
|
: ''}"
|
||||||
>
|
>
|
||||||
{item.title}
|
{item.title}
|
||||||
</span>
|
</span>
|
||||||
@ -443,9 +440,9 @@
|
|||||||
class="w-11 h-6 bg-gray-400 rounded-full peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[#1563F9]"
|
class="w-11 h-6 bg-gray-400 rounded-full peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[#1563F9]"
|
||||||
></div>
|
></div>
|
||||||
{#if $coolMode}
|
{#if $coolMode}
|
||||||
<span class="ml-2 text-sm text-white"> Chart Mode </span>
|
<span class="ml-2 text-sm"> Chart Mode </span>
|
||||||
{:else}
|
{:else}
|
||||||
<span class="ml-2 text-sm text-white"> Table Mode </span>
|
<span class="ml-2 text-sm"> Table Mode </span>
|
||||||
{/if}
|
{/if}
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
@ -455,10 +452,9 @@
|
|||||||
<DropdownMenu.Trigger asChild let:builder>
|
<DropdownMenu.Trigger asChild let:builder>
|
||||||
<Button
|
<Button
|
||||||
builders={[builder]}
|
builders={[builder]}
|
||||||
class="w-full border-gray-600 border bg-default sm:hover:bg-primary ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-md truncate"
|
class="shadow-sm w-full border-gray-300 dark:border-gray-600 border sm:hover:bg-gray-100 dark:sm:hover:bg-primary ease-out flex flex-row justify-between items-center px-3 py-2 rounded-md truncate"
|
||||||
>
|
|
||||||
<span class="truncate text-white">{$timeFrame}</span
|
|
||||||
>
|
>
|
||||||
|
<span class="truncate">{$timeFrame}</span>
|
||||||
<svg
|
<svg
|
||||||
class="-mr-1 ml-1 h-5 w-5 xs:ml-2 inline-block"
|
class="-mr-1 ml-1 h-5 w-5 xs:ml-2 inline-block"
|
||||||
viewBox="0 0 20 20"
|
viewBox="0 0 20 20"
|
||||||
@ -477,26 +473,28 @@
|
|||||||
<DropdownMenu.Content
|
<DropdownMenu.Content
|
||||||
class="w-56 h-fit max-h-72 overflow-y-auto scroller"
|
class="w-56 h-fit max-h-72 overflow-y-auto scroller"
|
||||||
>
|
>
|
||||||
<DropdownMenu.Label class="text-gray-400">
|
<DropdownMenu.Label
|
||||||
|
class="text-muted dark:text-gray-400"
|
||||||
|
>
|
||||||
Select time frame
|
Select time frame
|
||||||
</DropdownMenu.Label>
|
</DropdownMenu.Label>
|
||||||
<DropdownMenu.Separator />
|
<DropdownMenu.Separator />
|
||||||
<DropdownMenu.Group>
|
<DropdownMenu.Group>
|
||||||
<DropdownMenu.Item
|
<DropdownMenu.Item
|
||||||
on:click={() => ($timeFrame = "5Y")}
|
on:click={() => ($timeFrame = "5Y")}
|
||||||
class="cursor-pointer hover:bg-primary"
|
class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
|
||||||
>
|
>
|
||||||
5 years
|
5 years
|
||||||
</DropdownMenu.Item>
|
</DropdownMenu.Item>
|
||||||
<DropdownMenu.Item
|
<DropdownMenu.Item
|
||||||
on:click={() => ($timeFrame = "10Y")}
|
on:click={() => ($timeFrame = "10Y")}
|
||||||
class="cursor-pointer hover:bg-primary"
|
class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
|
||||||
>
|
>
|
||||||
10 years
|
10 years
|
||||||
</DropdownMenu.Item>
|
</DropdownMenu.Item>
|
||||||
<DropdownMenu.Item
|
<DropdownMenu.Item
|
||||||
on:click={() => ($timeFrame = "MAX")}
|
on:click={() => ($timeFrame = "MAX")}
|
||||||
class="cursor-pointer hover:bg-primary"
|
class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
|
||||||
>
|
>
|
||||||
Max
|
Max
|
||||||
</DropdownMenu.Item>
|
</DropdownMenu.Item>
|
||||||
@ -506,9 +504,9 @@
|
|||||||
</div>
|
</div>
|
||||||
<Button
|
<Button
|
||||||
on:click={() => exportFundamentalData("csv")}
|
on:click={() => exportFundamentalData("csv")}
|
||||||
class="ml-2 w-fit border-gray-600 border bg-default sm:hover:bg-primary ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-md truncate"
|
class="shadow-sm ml-2 w-fit border-gray-300 dark:border-gray-600 border sm:hover:bg-gray-100 dark:sm:hover:bg-primary ease-out flex flex-row justify-between items-center px-3 py-2 rounded-md truncate"
|
||||||
>
|
>
|
||||||
<span class="truncate text-white">Download</span>
|
<span class="truncate">Download</span>
|
||||||
<svg
|
<svg
|
||||||
class="{['Pro', 'Plus']?.includes(data?.user?.tier)
|
class="{['Pro', 'Plus']?.includes(data?.user?.tier)
|
||||||
? 'hidden'
|
? 'hidden'
|
||||||
@ -516,7 +514,7 @@
|
|||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
><path
|
><path
|
||||||
fill="#A3A3A3"
|
fill="currentColor"
|
||||||
d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
|
d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
|
||||||
/></svg
|
/></svg
|
||||||
>
|
>
|
||||||
@ -544,25 +542,20 @@
|
|||||||
class="w-full rounded-none sm:rounded-md m-auto overflow-x-auto no-scrollbar"
|
class="w-full rounded-none sm:rounded-md m-auto overflow-x-auto no-scrollbar"
|
||||||
>
|
>
|
||||||
<table
|
<table
|
||||||
class="table table-sm bg-table border border-gray-800 table-compact w-full"
|
class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md w-full bg-white dark:bg-table border border-gray-300 dark:border-gray-800 m-auto"
|
||||||
>
|
>
|
||||||
<thead class="bg-default">
|
<thead class="text-muted dark:text-white">
|
||||||
<tr class="text-white">
|
<tr class="">
|
||||||
<td
|
<td class="text-start text-sm font-semibold pr-10"
|
||||||
class="text-start bg-default text-white text-sm font-semibold pr-10"
|
|
||||||
>Year</td
|
>Year</td
|
||||||
>
|
>
|
||||||
{#each financialData as cash}
|
{#each financialData as cash}
|
||||||
{#if filterRule === "annual"}
|
{#if filterRule === "annual"}
|
||||||
<td
|
<td class=" font-semibold text-sm text-end">
|
||||||
class="bg-default font-semibold text-sm text-end"
|
|
||||||
>
|
|
||||||
{"FY" + cash?.calendarYear?.slice(-2)}
|
{"FY" + cash?.calendarYear?.slice(-2)}
|
||||||
</td>
|
</td>
|
||||||
{:else}
|
{:else}
|
||||||
<td
|
<td class=" font-semibold text-sm text-end">
|
||||||
class="bg-default font-semibold text-sm text-end"
|
|
||||||
>
|
|
||||||
{"FY" +
|
{"FY" +
|
||||||
cash?.calendarYear?.slice(-2) +
|
cash?.calendarYear?.slice(-2) +
|
||||||
" " +
|
" " +
|
||||||
@ -583,18 +576,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
{:else}
|
|
||||||
<div class="w-full flex justify-center items-center h-80">
|
|
||||||
<div class="relative">
|
|
||||||
<label
|
|
||||||
class="bg-secondary rounded-md h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
|
|
||||||
>
|
|
||||||
<span class="loading loading-spinner loading-md text-gray-400"
|
|
||||||
></span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@ -321,24 +321,23 @@
|
|||||||
description={`Detailed cash flow statements for ${$displayCompanyName} (${$stockTicker}), including operating cash flow, capex and free cash flow.`}
|
description={`Detailed cash flow statements for ${$displayCompanyName} (${$stockTicker}), including operating cash flow, capex and free cash flow.`}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<section class="bg-default w-full overflow-hidden text-white h-full">
|
<section class=" w-full overflow-hidden h-full">
|
||||||
<div
|
<div
|
||||||
class="w-full flex justify-center w-full sm-auto h-full overflow-hidden mt-4 sm:mt-0"
|
class="w-full flex justify-center w-full sm-auto h-full overflow-hidden mt-4 sm:mt-0"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="w-full relative flex justify-center items-center overflow-hidden"
|
class="w-full relative flex justify-center items-center overflow-hidden"
|
||||||
>
|
>
|
||||||
{#if isLoaded}
|
|
||||||
<main class="w-full">
|
<main class="w-full">
|
||||||
<div class="sm:pl-7 sm:pb-7 sm:pt-7 m-auto mt-2 sm:mt-0">
|
<div class="sm:pl-7 sm:pb-7 sm:pt-7 m-auto mt-2 sm:mt-0">
|
||||||
<div
|
<div
|
||||||
class="mb-3 flex flex-col sm:flex-row items-center justify-between"
|
class="mb-3 flex flex-col sm:flex-row items-center justify-between"
|
||||||
>
|
>
|
||||||
<h1 class="text-xl sm:text-2xl text-white font-bold">
|
<h1 class="text-xl sm:text-2xl font-bold">
|
||||||
{removeCompanyStrings($displayCompanyName)} Cash Flow Statement
|
{removeCompanyStrings($displayCompanyName)} Cash Flow Statement
|
||||||
</h1>
|
</h1>
|
||||||
<div
|
<div
|
||||||
class="mt-3 sm:mt-0 mb-2 sm:mb-0 bg-secondary w-full min-w-24 sm:w-fit relative flex flex-wrap items-center justify-center rounded-md p-1"
|
class="mt-3 sm:mt-0 mb-2 sm:mb-0 bg-gray-300 dark:bg-secondary w-full min-w-24 sm:w-fit relative flex flex-wrap items-center justify-center rounded-md p-1"
|
||||||
>
|
>
|
||||||
{#each tabs as item, i}
|
{#each tabs as item, i}
|
||||||
{#if !["Pro", "Plus"]?.includes(data?.user?.tier) && i > 0}
|
{#if !["Pro", "Plus"]?.includes(data?.user?.tier) && i > 0}
|
||||||
@ -353,7 +352,7 @@
|
|||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
><path
|
><path
|
||||||
fill="#A3A3A3"
|
fill="currentColor"
|
||||||
d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
|
d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
|
||||||
/></svg
|
/></svg
|
||||||
>
|
>
|
||||||
@ -368,15 +367,13 @@
|
|||||||
: ''} "
|
: ''} "
|
||||||
>
|
>
|
||||||
{#if activeIdx === i}
|
{#if activeIdx === i}
|
||||||
<div
|
<div class="absolute inset-0 rounded-md bg-[#fff]"></div>
|
||||||
class="absolute inset-0 rounded-md bg-[#fff]"
|
|
||||||
></div>
|
|
||||||
{/if}
|
{/if}
|
||||||
<span
|
<span
|
||||||
class="relative text-sm block font-semibold whitespace-nowrap {activeIdx ===
|
class="relative text-sm block font-semibold whitespace-nowrap {activeIdx ===
|
||||||
i
|
i
|
||||||
? 'text-black'
|
? 'text-black'
|
||||||
: 'text-white'}"
|
: ''}"
|
||||||
>
|
>
|
||||||
{item.title}
|
{item.title}
|
||||||
</span>
|
</span>
|
||||||
@ -405,9 +402,9 @@
|
|||||||
class="w-11 h-6 bg-gray-400 rounded-full peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[#1563F9]"
|
class="w-11 h-6 bg-gray-400 rounded-full peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[#1563F9]"
|
||||||
></div>
|
></div>
|
||||||
{#if $coolMode}
|
{#if $coolMode}
|
||||||
<span class="ml-2 text-sm text-white"> Chart Mode </span>
|
<span class="ml-2 text-sm"> Chart Mode </span>
|
||||||
{:else}
|
{:else}
|
||||||
<span class="ml-2 text-sm text-white"> Table Mode </span>
|
<span class="ml-2 text-sm"> Table Mode </span>
|
||||||
{/if}
|
{/if}
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
@ -417,10 +414,9 @@
|
|||||||
<DropdownMenu.Trigger asChild let:builder>
|
<DropdownMenu.Trigger asChild let:builder>
|
||||||
<Button
|
<Button
|
||||||
builders={[builder]}
|
builders={[builder]}
|
||||||
class="w-full border-gray-600 border bg-default sm:hover:bg-primary ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-md truncate"
|
class="shadow-sm w-full border-gray-300 dark:border-gray-600 border sm:hover:bg-gray-100 dark:sm:hover:bg-primary ease-out flex flex-row justify-between items-center px-3 py-2 rounded-md truncate"
|
||||||
>
|
|
||||||
<span class="truncate text-white">{$timeFrame}</span
|
|
||||||
>
|
>
|
||||||
|
<span class="truncate">{$timeFrame}</span>
|
||||||
<svg
|
<svg
|
||||||
class="-mr-1 ml-1 h-5 w-5 xs:ml-2 inline-block"
|
class="-mr-1 ml-1 h-5 w-5 xs:ml-2 inline-block"
|
||||||
viewBox="0 0 20 20"
|
viewBox="0 0 20 20"
|
||||||
@ -439,26 +435,28 @@
|
|||||||
<DropdownMenu.Content
|
<DropdownMenu.Content
|
||||||
class="w-56 h-fit max-h-72 overflow-y-auto scroller"
|
class="w-56 h-fit max-h-72 overflow-y-auto scroller"
|
||||||
>
|
>
|
||||||
<DropdownMenu.Label class="text-gray-400">
|
<DropdownMenu.Label
|
||||||
|
class="text-muted dark:text-gray-400"
|
||||||
|
>
|
||||||
Select time frame
|
Select time frame
|
||||||
</DropdownMenu.Label>
|
</DropdownMenu.Label>
|
||||||
<DropdownMenu.Separator />
|
<DropdownMenu.Separator />
|
||||||
<DropdownMenu.Group>
|
<DropdownMenu.Group>
|
||||||
<DropdownMenu.Item
|
<DropdownMenu.Item
|
||||||
on:click={() => ($timeFrame = "5Y")}
|
on:click={() => ($timeFrame = "5Y")}
|
||||||
class="cursor-pointer hover:bg-primary"
|
class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
|
||||||
>
|
>
|
||||||
5 years
|
5 years
|
||||||
</DropdownMenu.Item>
|
</DropdownMenu.Item>
|
||||||
<DropdownMenu.Item
|
<DropdownMenu.Item
|
||||||
on:click={() => ($timeFrame = "10Y")}
|
on:click={() => ($timeFrame = "10Y")}
|
||||||
class="cursor-pointer hover:bg-primary"
|
class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
|
||||||
>
|
>
|
||||||
10 years
|
10 years
|
||||||
</DropdownMenu.Item>
|
</DropdownMenu.Item>
|
||||||
<DropdownMenu.Item
|
<DropdownMenu.Item
|
||||||
on:click={() => ($timeFrame = "MAX")}
|
on:click={() => ($timeFrame = "MAX")}
|
||||||
class="cursor-pointer hover:bg-primary"
|
class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
|
||||||
>
|
>
|
||||||
Max
|
Max
|
||||||
</DropdownMenu.Item>
|
</DropdownMenu.Item>
|
||||||
@ -468,9 +466,9 @@
|
|||||||
</div>
|
</div>
|
||||||
<Button
|
<Button
|
||||||
on:click={() => exportFundamentalData("csv")}
|
on:click={() => exportFundamentalData("csv")}
|
||||||
class="ml-2 w-fit border-gray-600 border bg-default sm:hover:bg-primary ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-md truncate"
|
class="shadow-sm ml-2 w-fit border-gray-300 dark:border-gray-600 border sm:hover:bg-gray-100 dark:sm:hover:bg-primary ease-out flex flex-row justify-between items-center px-3 py-2 rounded-md truncate"
|
||||||
>
|
>
|
||||||
<span class="truncate text-white">Download</span>
|
<span class="truncate">Download</span>
|
||||||
<svg
|
<svg
|
||||||
class="{['Pro', 'Plus']?.includes(data?.user?.tier)
|
class="{['Pro', 'Plus']?.includes(data?.user?.tier)
|
||||||
? 'hidden'
|
? 'hidden'
|
||||||
@ -478,7 +476,7 @@
|
|||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
><path
|
><path
|
||||||
fill="#A3A3A3"
|
fill="currentColor"
|
||||||
d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
|
d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
|
||||||
/></svg
|
/></svg
|
||||||
>
|
>
|
||||||
@ -506,25 +504,20 @@
|
|||||||
class="w-full rounded-none sm:rounded-md m-auto overflow-x-auto no-scrollbar"
|
class="w-full rounded-none sm:rounded-md m-auto overflow-x-auto no-scrollbar"
|
||||||
>
|
>
|
||||||
<table
|
<table
|
||||||
class="table table-sm bg-table border border-gray-800 table-compact w-full"
|
class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md w-full bg-white dark:bg-table border border-gray-300 dark:border-gray-800 m-auto"
|
||||||
>
|
>
|
||||||
<thead class="bg-default">
|
<thead class="text-muted dark:text-white">
|
||||||
<tr class="text-white">
|
<tr class="">
|
||||||
<td
|
<td class="text-start text-sm font-semibold pr-10"
|
||||||
class="text-start bg-default text-white text-sm font-semibold pr-10"
|
|
||||||
>Year</td
|
>Year</td
|
||||||
>
|
>
|
||||||
{#each financialData as cash}
|
{#each financialData as cash}
|
||||||
{#if filterRule === "annual"}
|
{#if filterRule === "annual"}
|
||||||
<td
|
<td class=" font-semibold text-sm text-end">
|
||||||
class="bg-default font-semibold text-sm text-end"
|
|
||||||
>
|
|
||||||
{"FY" + cash?.calendarYear?.slice(-2)}
|
{"FY" + cash?.calendarYear?.slice(-2)}
|
||||||
</td>
|
</td>
|
||||||
{:else}
|
{:else}
|
||||||
<td
|
<td class=" font-semibold text-sm text-end">
|
||||||
class="bg-default font-semibold text-sm text-end"
|
|
||||||
>
|
|
||||||
{"FY" +
|
{"FY" +
|
||||||
cash?.calendarYear?.slice(-2) +
|
cash?.calendarYear?.slice(-2) +
|
||||||
" " +
|
" " +
|
||||||
@ -545,18 +538,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
{:else}
|
|
||||||
<div class="w-full flex justify-center items-center h-80">
|
|
||||||
<div class="relative">
|
|
||||||
<label
|
|
||||||
class="bg-secondary rounded-md h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
|
|
||||||
>
|
|
||||||
<span class="loading loading-spinner loading-md text-gray-400"
|
|
||||||
></span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@ -310,24 +310,23 @@
|
|||||||
description={`Detailed cash flow statements for ${$displayCompanyName} (${$stockTicker}), including operating cash flow, capex and free cash flow.`}
|
description={`Detailed cash flow statements for ${$displayCompanyName} (${$stockTicker}), including operating cash flow, capex and free cash flow.`}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<section class="bg-default w-full overflow-hidden text-white h-full">
|
<section class=" w-full overflow-hidden h-full">
|
||||||
<div
|
<div
|
||||||
class="w-full flex justify-center w-full sm-auto h-full overflow-hidden mt-4 sm:mt-0"
|
class="w-full flex justify-center w-full sm-auto h-full overflow-hidden mt-4 sm:mt-0"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="w-full relative flex justify-center items-center overflow-hidden"
|
class="w-full relative flex justify-center items-center overflow-hidden"
|
||||||
>
|
>
|
||||||
{#if isLoaded}
|
|
||||||
<main class="w-full">
|
<main class="w-full">
|
||||||
<div class="sm:pl-7 sm:pb-7 sm:pt-7 m-auto mt-2 sm:mt-0">
|
<div class="sm:pl-7 sm:pb-7 sm:pt-7 m-auto mt-2 sm:mt-0">
|
||||||
<div
|
<div
|
||||||
class="mb-3 flex flex-col sm:flex-row items-center justify-between"
|
class="mb-3 flex flex-col sm:flex-row items-center justify-between"
|
||||||
>
|
>
|
||||||
<h1 class="text-xl sm:text-2xl text-white font-bold">
|
<h1 class="text-xl sm:text-2xl font-bold">
|
||||||
{removeCompanyStrings($displayCompanyName)} Ratios Statement
|
{removeCompanyStrings($displayCompanyName)} Ratios Statement
|
||||||
</h1>
|
</h1>
|
||||||
<div
|
<div
|
||||||
class="mt-3 sm:mt-0 mb-2 sm:mb-0 bg-secondary w-full min-w-24 sm:w-fit relative flex flex-wrap items-center justify-center rounded-md p-1"
|
class="mt-3 sm:mt-0 mb-2 sm:mb-0 bg-gray-300 dark:bg-secondary w-full min-w-24 sm:w-fit relative flex flex-wrap items-center justify-center rounded-md p-1"
|
||||||
>
|
>
|
||||||
{#each tabs as item, i}
|
{#each tabs as item, i}
|
||||||
{#if !["Pro", "Plus"]?.includes(data?.user?.tier) && i > 0}
|
{#if !["Pro", "Plus"]?.includes(data?.user?.tier) && i > 0}
|
||||||
@ -342,7 +341,7 @@
|
|||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
><path
|
><path
|
||||||
fill="#A3A3A3"
|
fill="currentColor"
|
||||||
d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
|
d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
|
||||||
/></svg
|
/></svg
|
||||||
>
|
>
|
||||||
@ -357,15 +356,13 @@
|
|||||||
: ''} "
|
: ''} "
|
||||||
>
|
>
|
||||||
{#if activeIdx === i}
|
{#if activeIdx === i}
|
||||||
<div
|
<div class="absolute inset-0 rounded-md bg-[#fff]"></div>
|
||||||
class="absolute inset-0 rounded-md bg-[#fff]"
|
|
||||||
></div>
|
|
||||||
{/if}
|
{/if}
|
||||||
<span
|
<span
|
||||||
class="relative text-sm block font-semibold whitespace-nowrap {activeIdx ===
|
class="relative text-sm block font-semibold whitespace-nowrap {activeIdx ===
|
||||||
i
|
i
|
||||||
? 'text-black'
|
? 'text-black'
|
||||||
: 'text-white'}"
|
: ''}"
|
||||||
>
|
>
|
||||||
{item.title}
|
{item.title}
|
||||||
</span>
|
</span>
|
||||||
@ -394,9 +391,9 @@
|
|||||||
class="w-11 h-6 bg-gray-400 rounded-full peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[#1563F9]"
|
class="w-11 h-6 bg-gray-400 rounded-full peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[#1563F9]"
|
||||||
></div>
|
></div>
|
||||||
{#if $coolMode}
|
{#if $coolMode}
|
||||||
<span class="ml-2 text-sm text-white"> Chart Mode </span>
|
<span class="ml-2 text-sm"> Chart Mode </span>
|
||||||
{:else}
|
{:else}
|
||||||
<span class="ml-2 text-sm text-white"> Table Mode </span>
|
<span class="ml-2 text-sm"> Table Mode </span>
|
||||||
{/if}
|
{/if}
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
@ -406,10 +403,9 @@
|
|||||||
<DropdownMenu.Trigger asChild let:builder>
|
<DropdownMenu.Trigger asChild let:builder>
|
||||||
<Button
|
<Button
|
||||||
builders={[builder]}
|
builders={[builder]}
|
||||||
class="w-full border-gray-600 border bg-default sm:hover:bg-primary ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-md truncate"
|
class="shadow-sm w-full border-gray-300 dark:border-gray-600 border sm:hover:bg-gray-100 dark:sm:hover:bg-primary ease-out flex flex-row justify-between items-center px-3 py-2 rounded-md truncate"
|
||||||
>
|
|
||||||
<span class="truncate text-white">{$timeFrame}</span
|
|
||||||
>
|
>
|
||||||
|
<span class="truncate">{$timeFrame}</span>
|
||||||
<svg
|
<svg
|
||||||
class="-mr-1 ml-1 h-5 w-5 xs:ml-2 inline-block"
|
class="-mr-1 ml-1 h-5 w-5 xs:ml-2 inline-block"
|
||||||
viewBox="0 0 20 20"
|
viewBox="0 0 20 20"
|
||||||
@ -428,26 +424,28 @@
|
|||||||
<DropdownMenu.Content
|
<DropdownMenu.Content
|
||||||
class="w-56 h-fit max-h-72 overflow-y-auto scroller"
|
class="w-56 h-fit max-h-72 overflow-y-auto scroller"
|
||||||
>
|
>
|
||||||
<DropdownMenu.Label class="text-gray-400">
|
<DropdownMenu.Label
|
||||||
|
class="text-muted dark:text-gray-400"
|
||||||
|
>
|
||||||
Select time frame
|
Select time frame
|
||||||
</DropdownMenu.Label>
|
</DropdownMenu.Label>
|
||||||
<DropdownMenu.Separator />
|
<DropdownMenu.Separator />
|
||||||
<DropdownMenu.Group>
|
<DropdownMenu.Group>
|
||||||
<DropdownMenu.Item
|
<DropdownMenu.Item
|
||||||
on:click={() => ($timeFrame = "5Y")}
|
on:click={() => ($timeFrame = "5Y")}
|
||||||
class="cursor-pointer hover:bg-primary"
|
class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
|
||||||
>
|
>
|
||||||
5 years
|
5 years
|
||||||
</DropdownMenu.Item>
|
</DropdownMenu.Item>
|
||||||
<DropdownMenu.Item
|
<DropdownMenu.Item
|
||||||
on:click={() => ($timeFrame = "10Y")}
|
on:click={() => ($timeFrame = "10Y")}
|
||||||
class="cursor-pointer hover:bg-primary"
|
class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
|
||||||
>
|
>
|
||||||
10 years
|
10 years
|
||||||
</DropdownMenu.Item>
|
</DropdownMenu.Item>
|
||||||
<DropdownMenu.Item
|
<DropdownMenu.Item
|
||||||
on:click={() => ($timeFrame = "MAX")}
|
on:click={() => ($timeFrame = "MAX")}
|
||||||
class="cursor-pointer hover:bg-primary"
|
class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
|
||||||
>
|
>
|
||||||
Max
|
Max
|
||||||
</DropdownMenu.Item>
|
</DropdownMenu.Item>
|
||||||
@ -457,9 +455,9 @@
|
|||||||
</div>
|
</div>
|
||||||
<Button
|
<Button
|
||||||
on:click={() => exportFundamentalData("csv")}
|
on:click={() => exportFundamentalData("csv")}
|
||||||
class="ml-2 w-fit border-gray-600 border bg-default sm:hover:bg-primary ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-md truncate"
|
class="shadow-sm ml-2 w-fit border-gray-300 dark:border-gray-600 border sm:hover:bg-gray-100 dark:sm:hover:bg-primary ease-out flex flex-row justify-between items-center px-3 py-2 rounded-md truncate"
|
||||||
>
|
>
|
||||||
<span class="truncate text-white">Download</span>
|
<span class="truncate">Download</span>
|
||||||
<svg
|
<svg
|
||||||
class="{['Pro', 'Plus']?.includes(data?.user?.tier)
|
class="{['Pro', 'Plus']?.includes(data?.user?.tier)
|
||||||
? 'hidden'
|
? 'hidden'
|
||||||
@ -467,7 +465,7 @@
|
|||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
><path
|
><path
|
||||||
fill="#A3A3A3"
|
fill="currentColor"
|
||||||
d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
|
d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
|
||||||
/></svg
|
/></svg
|
||||||
>
|
>
|
||||||
@ -495,25 +493,20 @@
|
|||||||
class="w-full rounded-none sm:rounded-md m-auto overflow-x-auto no-scrollbar"
|
class="w-full rounded-none sm:rounded-md m-auto overflow-x-auto no-scrollbar"
|
||||||
>
|
>
|
||||||
<table
|
<table
|
||||||
class="table table-sm bg-table border border-gray-800 table-compact w-full"
|
class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md w-full bg-white dark:bg-table border border-gray-300 dark:border-gray-800 m-auto"
|
||||||
>
|
>
|
||||||
<thead class="bg-default">
|
<thead class="text-muted dark:text-white">
|
||||||
<tr class="text-white">
|
<tr class="">
|
||||||
<td
|
<td class="text-start text-sm font-semibold pr-10"
|
||||||
class="text-start bg-default text-white text-sm font-semibold pr-10"
|
|
||||||
>Year</td
|
>Year</td
|
||||||
>
|
>
|
||||||
{#each financialData as cash}
|
{#each financialData as cash}
|
||||||
{#if filterRule === "annual"}
|
{#if filterRule === "annual"}
|
||||||
<td
|
<td class=" font-semibold text-sm text-end">
|
||||||
class="bg-default font-semibold text-sm text-end"
|
|
||||||
>
|
|
||||||
{"FY" + cash?.calendarYear?.slice(-2)}
|
{"FY" + cash?.calendarYear?.slice(-2)}
|
||||||
</td>
|
</td>
|
||||||
{:else}
|
{:else}
|
||||||
<td
|
<td class=" font-semibold text-sm text-end">
|
||||||
class="bg-default font-semibold text-sm text-end"
|
|
||||||
>
|
|
||||||
{"FY" +
|
{"FY" +
|
||||||
cash?.calendarYear?.slice(-2) +
|
cash?.calendarYear?.slice(-2) +
|
||||||
" " +
|
" " +
|
||||||
@ -534,18 +527,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
{:else}
|
|
||||||
<div class="w-full flex justify-center items-center h-80">
|
|
||||||
<div class="relative">
|
|
||||||
<label
|
|
||||||
class="bg-secondary rounded-md h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
|
|
||||||
>
|
|
||||||
<span class="loading loading-spinner loading-md text-gray-400"
|
|
||||||
></span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user