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,242 +323,223 @@
|
|||||||
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
|
||||||
|
class="mb-3 flex flex-col sm:flex-row items-center justify-between"
|
||||||
|
>
|
||||||
|
<h1 class="text-xl sm:text-2xl font-bold">
|
||||||
|
{removeCompanyStrings($displayCompanyName)} Income Statement
|
||||||
|
</h1>
|
||||||
<div
|
<div
|
||||||
class="mb-3 flex flex-col sm:flex-row items-center justify-between"
|
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"
|
||||||
>
|
>
|
||||||
<h1 class="text-xl sm:text-2xl text-white font-bold">
|
{#each tabs as item, i}
|
||||||
{removeCompanyStrings($displayCompanyName)} Income Statement
|
{#if !["Pro", "Plus"]?.includes(data?.user?.tier) && i > 0}
|
||||||
</h1>
|
<button
|
||||||
<div
|
on:click={() => goto("/pricing")}
|
||||||
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="cursor-pointer group relative z-1 rounded-full w-1/2 min-w-24 md:w-auto px-5 py-1"
|
||||||
>
|
|
||||||
{#each tabs as item, i}
|
|
||||||
{#if !["Pro", "Plus"]?.includes(data?.user?.tier) && i > 0}
|
|
||||||
<button
|
|
||||||
on:click={() => goto("/pricing")}
|
|
||||||
class="cursor-pointer group relative z-1 rounded-full w-1/2 min-w-24 md:w-auto px-5 py-1"
|
|
||||||
>
|
|
||||||
<span class="relative text-sm block font-semibold">
|
|
||||||
{item.title}
|
|
||||||
<svg
|
|
||||||
class="inline-block ml-0.5 -mt-1 w-3.5 h-3.5"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
><path
|
|
||||||
fill="#A3A3A3"
|
|
||||||
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
|
|
||||||
>
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
{:else}
|
|
||||||
<button
|
|
||||||
on:click={() => (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 activeIdx === i}
|
|
||||||
<div
|
|
||||||
class="absolute inset-0 rounded-md bg-[#fff]"
|
|
||||||
></div>
|
|
||||||
{/if}
|
|
||||||
<span
|
|
||||||
class="relative text-sm block font-semibold whitespace-nowrap {activeIdx ===
|
|
||||||
i
|
|
||||||
? 'text-black'
|
|
||||||
: 'text-white'}"
|
|
||||||
>
|
|
||||||
{item.title}
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
{/if}
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid grid-cols-1 gap-2">
|
|
||||||
{#if financialData?.length > 0}
|
|
||||||
<div
|
|
||||||
class="mb-2 flex flex-row items-center w-full justify-end sm:justify-center"
|
|
||||||
>
|
|
||||||
<label
|
|
||||||
class="inline-flex mt-2 sm:mt-0 cursor-pointer relative mr-auto"
|
|
||||||
>
|
>
|
||||||
<input
|
<span class="relative text-sm block font-semibold">
|
||||||
on:click={toggleMode}
|
{item.title}
|
||||||
type="checkbox"
|
|
||||||
checked={$coolMode}
|
|
||||||
value={$coolMode}
|
|
||||||
class="sr-only peer"
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
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>
|
|
||||||
{#if $coolMode}
|
|
||||||
<span class="ml-2 text-sm text-white"> Chart Mode </span>
|
|
||||||
{:else}
|
|
||||||
<span class="ml-2 text-sm text-white"> Table Mode </span>
|
|
||||||
{/if}
|
|
||||||
</label>
|
|
||||||
|
|
||||||
<div class="flex flex-row items-center w-fit sm:ml-auto">
|
|
||||||
<div class="relative inline-block text-left grow">
|
|
||||||
<DropdownMenu.Root>
|
|
||||||
<DropdownMenu.Trigger asChild let:builder>
|
|
||||||
<Button
|
|
||||||
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"
|
|
||||||
>
|
|
||||||
<span class="truncate text-white">{$timeFrame}</span
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
class="-mr-1 ml-1 h-5 w-5 xs:ml-2 inline-block"
|
|
||||||
viewBox="0 0 20 20"
|
|
||||||
fill="currentColor"
|
|
||||||
style="max-width:40px"
|
|
||||||
aria-hidden="true"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
fill-rule="evenodd"
|
|
||||||
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
|
|
||||||
clip-rule="evenodd"
|
|
||||||
></path>
|
|
||||||
</svg>
|
|
||||||
</Button>
|
|
||||||
</DropdownMenu.Trigger>
|
|
||||||
<DropdownMenu.Content
|
|
||||||
class="w-56 h-fit max-h-72 overflow-y-auto scroller"
|
|
||||||
>
|
|
||||||
<DropdownMenu.Label class="text-gray-400">
|
|
||||||
Select time frame
|
|
||||||
</DropdownMenu.Label>
|
|
||||||
<DropdownMenu.Separator />
|
|
||||||
<DropdownMenu.Group>
|
|
||||||
<DropdownMenu.Item
|
|
||||||
on:click={() => ($timeFrame = "5Y")}
|
|
||||||
class="cursor-pointer hover:bg-primary"
|
|
||||||
>
|
|
||||||
5 years
|
|
||||||
</DropdownMenu.Item>
|
|
||||||
<DropdownMenu.Item
|
|
||||||
on:click={() => ($timeFrame = "10Y")}
|
|
||||||
class="cursor-pointer hover:bg-primary"
|
|
||||||
>
|
|
||||||
10 years
|
|
||||||
</DropdownMenu.Item>
|
|
||||||
<DropdownMenu.Item
|
|
||||||
on:click={() => ($timeFrame = "MAX")}
|
|
||||||
class="cursor-pointer hover:bg-primary"
|
|
||||||
>
|
|
||||||
Max
|
|
||||||
</DropdownMenu.Item>
|
|
||||||
</DropdownMenu.Group>
|
|
||||||
</DropdownMenu.Content>
|
|
||||||
</DropdownMenu.Root>
|
|
||||||
</div>
|
|
||||||
<Button
|
|
||||||
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"
|
|
||||||
>
|
|
||||||
<span class="truncate text-white">Download</span>
|
|
||||||
<svg
|
<svg
|
||||||
class="{['Pro', 'Plus']?.includes(data?.user?.tier)
|
class="inline-block ml-0.5 -mt-1 w-3.5 h-3.5"
|
||||||
? 'hidden'
|
|
||||||
: ''} ml-1 -mt-0.5 w-3.5 h-3.5"
|
|
||||||
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
|
||||||
>
|
>
|
||||||
</Button>
|
</span>
|
||||||
</div>
|
</button>
|
||||||
</div>
|
|
||||||
|
|
||||||
{#if $coolMode}
|
|
||||||
<div class="grid gap-5 xs:gap-6 lg:grid-cols-3 lg:gap-3">
|
|
||||||
{#each fields as item, i}
|
|
||||||
<FinancialChart
|
|
||||||
data={financialData}
|
|
||||||
{statementConfig}
|
|
||||||
displayStatement={item?.key}
|
|
||||||
{filterRule}
|
|
||||||
{processedData}
|
|
||||||
color={["#ff00cc", "#37ff00", "#0c63e7", "#07c8f9"][
|
|
||||||
i % 4
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
{:else}
|
{:else}
|
||||||
<div
|
<button
|
||||||
class="w-full rounded-none sm:rounded-md m-auto overflow-x-auto no-scrollbar"
|
on:click={() => (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'
|
||||||
|
: ''} "
|
||||||
>
|
>
|
||||||
<table
|
{#if activeIdx === i}
|
||||||
class="table table-sm bg-table border border-gray-800 table-compact w-full"
|
<div class="absolute inset-0 rounded-md bg-[#fff]"></div>
|
||||||
|
{/if}
|
||||||
|
<span
|
||||||
|
class="relative text-sm block font-semibold whitespace-nowrap {activeIdx ===
|
||||||
|
i
|
||||||
|
? 'text-black'
|
||||||
|
: ''}"
|
||||||
>
|
>
|
||||||
<thead class="bg-default">
|
{item.title}
|
||||||
<tr class="text-white">
|
</span>
|
||||||
<td
|
</button>
|
||||||
class="text-start bg-default text-white text-sm font-semibold pr-10"
|
|
||||||
>Year</td
|
|
||||||
>
|
|
||||||
{#each financialData as cash}
|
|
||||||
{#if filterRule === "annual"}
|
|
||||||
<td
|
|
||||||
class="bg-default font-semibold text-sm text-end"
|
|
||||||
>
|
|
||||||
{"FY" + cash?.calendarYear?.slice(-2)}
|
|
||||||
</td>
|
|
||||||
{:else}
|
|
||||||
<td
|
|
||||||
class="bg-default font-semibold text-sm text-end"
|
|
||||||
>
|
|
||||||
{"FY" +
|
|
||||||
cash?.calendarYear?.slice(-2) +
|
|
||||||
" " +
|
|
||||||
cash?.period}
|
|
||||||
</td>
|
|
||||||
{/if}
|
|
||||||
{/each}
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<!-- row -->
|
|
||||||
<FinancialTable data={financialData} {fields} />
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
{/if}
|
{/if}
|
||||||
{/if}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
|
||||||
{:else}
|
<div class="grid grid-cols-1 gap-2">
|
||||||
<div class="w-full flex justify-center items-center h-80">
|
{#if financialData?.length > 0}
|
||||||
<div class="relative">
|
<div
|
||||||
<label
|
class="mb-2 flex flex-row items-center w-full justify-end sm:justify-center"
|
||||||
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"
|
>
|
||||||
>
|
<label
|
||||||
<span class="loading loading-spinner loading-md text-gray-400"
|
class="inline-flex mt-2 sm:mt-0 cursor-pointer relative mr-auto"
|
||||||
></span>
|
>
|
||||||
</label>
|
<input
|
||||||
|
on:click={toggleMode}
|
||||||
|
type="checkbox"
|
||||||
|
checked={$coolMode}
|
||||||
|
value={$coolMode}
|
||||||
|
class="sr-only peer"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
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>
|
||||||
|
{#if $coolMode}
|
||||||
|
<span class="ml-2 text-sm"> Chart Mode </span>
|
||||||
|
{:else}
|
||||||
|
<span class="ml-2 text-sm"> Table Mode </span>
|
||||||
|
{/if}
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<div class="flex flex-row items-center w-fit sm:ml-auto">
|
||||||
|
<div class="relative inline-block text-left grow">
|
||||||
|
<DropdownMenu.Root>
|
||||||
|
<DropdownMenu.Trigger asChild let:builder>
|
||||||
|
<Button
|
||||||
|
builders={[builder]}
|
||||||
|
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">{$timeFrame}</span>
|
||||||
|
<svg
|
||||||
|
class="-mr-1 ml-1 h-5 w-5 xs:ml-2 inline-block"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
fill="currentColor"
|
||||||
|
style="max-width:40px"
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
></path>
|
||||||
|
</svg>
|
||||||
|
</Button>
|
||||||
|
</DropdownMenu.Trigger>
|
||||||
|
<DropdownMenu.Content
|
||||||
|
class="w-56 h-fit max-h-72 overflow-y-auto scroller"
|
||||||
|
>
|
||||||
|
<DropdownMenu.Label
|
||||||
|
class="text-muted dark:text-gray-400"
|
||||||
|
>
|
||||||
|
Select time frame
|
||||||
|
</DropdownMenu.Label>
|
||||||
|
<DropdownMenu.Separator />
|
||||||
|
<DropdownMenu.Group>
|
||||||
|
<DropdownMenu.Item
|
||||||
|
on:click={() => ($timeFrame = "5Y")}
|
||||||
|
class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
|
||||||
|
>
|
||||||
|
5 years
|
||||||
|
</DropdownMenu.Item>
|
||||||
|
<DropdownMenu.Item
|
||||||
|
on:click={() => ($timeFrame = "10Y")}
|
||||||
|
class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
|
||||||
|
>
|
||||||
|
10 years
|
||||||
|
</DropdownMenu.Item>
|
||||||
|
<DropdownMenu.Item
|
||||||
|
on:click={() => ($timeFrame = "MAX")}
|
||||||
|
class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
|
||||||
|
>
|
||||||
|
Max
|
||||||
|
</DropdownMenu.Item>
|
||||||
|
</DropdownMenu.Group>
|
||||||
|
</DropdownMenu.Content>
|
||||||
|
</DropdownMenu.Root>
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
on:click={() => exportFundamentalData("csv")}
|
||||||
|
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">Download</span>
|
||||||
|
<svg
|
||||||
|
class="{['Pro', 'Plus']?.includes(data?.user?.tier)
|
||||||
|
? 'hidden'
|
||||||
|
: ''} ml-1 -mt-0.5 w-3.5 h-3.5"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
><path
|
||||||
|
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"
|
||||||
|
/></svg
|
||||||
|
>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{#if $coolMode}
|
||||||
|
<div class="grid gap-5 xs:gap-6 lg:grid-cols-3 lg:gap-3">
|
||||||
|
{#each fields as item, i}
|
||||||
|
<FinancialChart
|
||||||
|
data={financialData}
|
||||||
|
{statementConfig}
|
||||||
|
displayStatement={item?.key}
|
||||||
|
{filterRule}
|
||||||
|
{processedData}
|
||||||
|
color={["#ff00cc", "#37ff00", "#0c63e7", "#07c8f9"][
|
||||||
|
i % 4
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
{:else}
|
||||||
|
<div
|
||||||
|
class="w-full rounded-none sm:rounded-md m-auto overflow-x-auto no-scrollbar"
|
||||||
|
>
|
||||||
|
<table
|
||||||
|
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="text-muted dark:text-white">
|
||||||
|
<tr class="">
|
||||||
|
<td class="text-start text-sm font-semibold pr-10"
|
||||||
|
>Year</td
|
||||||
|
>
|
||||||
|
{#each financialData as cash}
|
||||||
|
{#if filterRule === "annual"}
|
||||||
|
<td class=" font-semibold text-sm text-end">
|
||||||
|
{"FY" + cash?.calendarYear?.slice(-2)}
|
||||||
|
</td>
|
||||||
|
{:else}
|
||||||
|
<td class=" font-semibold text-sm text-end">
|
||||||
|
{"FY" +
|
||||||
|
cash?.calendarYear?.slice(-2) +
|
||||||
|
" " +
|
||||||
|
cash?.period}
|
||||||
|
</td>
|
||||||
|
{/if}
|
||||||
|
{/each}
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<!-- row -->
|
||||||
|
<FinancialTable data={financialData} {fields} />
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
</main>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@ -359,242 +359,223 @@
|
|||||||
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
|
||||||
|
class="mb-3 flex flex-col sm:flex-row items-center justify-between"
|
||||||
|
>
|
||||||
|
<h1 class="text-xl sm:text-2xl font-bold">
|
||||||
|
{removeCompanyStrings($displayCompanyName)} Balance Sheet Statement
|
||||||
|
</h1>
|
||||||
<div
|
<div
|
||||||
class="mb-3 flex flex-col sm:flex-row items-center justify-between"
|
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"
|
||||||
>
|
>
|
||||||
<h1 class="text-xl sm:text-2xl text-white font-bold">
|
{#each tabs as item, i}
|
||||||
{removeCompanyStrings($displayCompanyName)} Balance Sheet Statement
|
{#if !["Pro", "Plus"]?.includes(data?.user?.tier) && i > 0}
|
||||||
</h1>
|
<button
|
||||||
<div
|
on:click={() => goto("/pricing")}
|
||||||
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="cursor-pointer group relative z-1 rounded-full w-1/2 min-w-24 md:w-auto px-5 py-1"
|
||||||
>
|
|
||||||
{#each tabs as item, i}
|
|
||||||
{#if !["Pro", "Plus"]?.includes(data?.user?.tier) && i > 0}
|
|
||||||
<button
|
|
||||||
on:click={() => goto("/pricing")}
|
|
||||||
class="cursor-pointer group relative z-1 rounded-full w-1/2 min-w-24 md:w-auto px-5 py-1"
|
|
||||||
>
|
|
||||||
<span class="relative text-sm block font-semibold">
|
|
||||||
{item.title}
|
|
||||||
<svg
|
|
||||||
class="inline-block ml-0.5 -mt-1 w-3.5 h-3.5"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
><path
|
|
||||||
fill="#A3A3A3"
|
|
||||||
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
|
|
||||||
>
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
{:else}
|
|
||||||
<button
|
|
||||||
on:click={() => (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 activeIdx === i}
|
|
||||||
<div
|
|
||||||
class="absolute inset-0 rounded-md bg-[#fff]"
|
|
||||||
></div>
|
|
||||||
{/if}
|
|
||||||
<span
|
|
||||||
class="relative text-sm block font-semibold whitespace-nowrap {activeIdx ===
|
|
||||||
i
|
|
||||||
? 'text-black'
|
|
||||||
: 'text-white'}"
|
|
||||||
>
|
|
||||||
{item.title}
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
{/if}
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid grid-cols-1 gap-2">
|
|
||||||
{#if financialData?.length > 0}
|
|
||||||
<div
|
|
||||||
class="mb-2 flex flex-row items-center w-full justify-end sm:justify-center"
|
|
||||||
>
|
|
||||||
<label
|
|
||||||
class="inline-flex mt-2 sm:mt-0 cursor-pointer relative mr-auto"
|
|
||||||
>
|
>
|
||||||
<input
|
<span class="relative text-sm block font-semibold">
|
||||||
on:click={toggleMode}
|
{item.title}
|
||||||
type="checkbox"
|
|
||||||
checked={$coolMode}
|
|
||||||
value={$coolMode}
|
|
||||||
class="sr-only peer"
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
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>
|
|
||||||
{#if $coolMode}
|
|
||||||
<span class="ml-2 text-sm text-white"> Chart Mode </span>
|
|
||||||
{:else}
|
|
||||||
<span class="ml-2 text-sm text-white"> Table Mode </span>
|
|
||||||
{/if}
|
|
||||||
</label>
|
|
||||||
|
|
||||||
<div class="flex flex-row items-center w-fit sm:ml-auto">
|
|
||||||
<div class="relative inline-block text-left grow">
|
|
||||||
<DropdownMenu.Root>
|
|
||||||
<DropdownMenu.Trigger asChild let:builder>
|
|
||||||
<Button
|
|
||||||
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"
|
|
||||||
>
|
|
||||||
<span class="truncate text-white">{$timeFrame}</span
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
class="-mr-1 ml-1 h-5 w-5 xs:ml-2 inline-block"
|
|
||||||
viewBox="0 0 20 20"
|
|
||||||
fill="currentColor"
|
|
||||||
style="max-width:40px"
|
|
||||||
aria-hidden="true"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
fill-rule="evenodd"
|
|
||||||
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
|
|
||||||
clip-rule="evenodd"
|
|
||||||
></path>
|
|
||||||
</svg>
|
|
||||||
</Button>
|
|
||||||
</DropdownMenu.Trigger>
|
|
||||||
<DropdownMenu.Content
|
|
||||||
class="w-56 h-fit max-h-72 overflow-y-auto scroller"
|
|
||||||
>
|
|
||||||
<DropdownMenu.Label class="text-gray-400">
|
|
||||||
Select time frame
|
|
||||||
</DropdownMenu.Label>
|
|
||||||
<DropdownMenu.Separator />
|
|
||||||
<DropdownMenu.Group>
|
|
||||||
<DropdownMenu.Item
|
|
||||||
on:click={() => ($timeFrame = "5Y")}
|
|
||||||
class="cursor-pointer hover:bg-primary"
|
|
||||||
>
|
|
||||||
5 years
|
|
||||||
</DropdownMenu.Item>
|
|
||||||
<DropdownMenu.Item
|
|
||||||
on:click={() => ($timeFrame = "10Y")}
|
|
||||||
class="cursor-pointer hover:bg-primary"
|
|
||||||
>
|
|
||||||
10 years
|
|
||||||
</DropdownMenu.Item>
|
|
||||||
<DropdownMenu.Item
|
|
||||||
on:click={() => ($timeFrame = "MAX")}
|
|
||||||
class="cursor-pointer hover:bg-primary"
|
|
||||||
>
|
|
||||||
Max
|
|
||||||
</DropdownMenu.Item>
|
|
||||||
</DropdownMenu.Group>
|
|
||||||
</DropdownMenu.Content>
|
|
||||||
</DropdownMenu.Root>
|
|
||||||
</div>
|
|
||||||
<Button
|
|
||||||
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"
|
|
||||||
>
|
|
||||||
<span class="truncate text-white">Download</span>
|
|
||||||
<svg
|
<svg
|
||||||
class="{['Pro', 'Plus']?.includes(data?.user?.tier)
|
class="inline-block ml-0.5 -mt-1 w-3.5 h-3.5"
|
||||||
? 'hidden'
|
|
||||||
: ''} ml-1 -mt-0.5 w-3.5 h-3.5"
|
|
||||||
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
|
||||||
>
|
>
|
||||||
</Button>
|
</span>
|
||||||
</div>
|
</button>
|
||||||
</div>
|
|
||||||
|
|
||||||
{#if $coolMode}
|
|
||||||
<div class="grid gap-5 xs:gap-6 lg:grid-cols-3 lg:gap-3">
|
|
||||||
{#each fields as item, i}
|
|
||||||
<FinancialChart
|
|
||||||
data={financialData}
|
|
||||||
{statementConfig}
|
|
||||||
displayStatement={item?.key}
|
|
||||||
{filterRule}
|
|
||||||
{processedData}
|
|
||||||
color={["#ff00cc", "#37ff00", "#0c63e7", "#07c8f9"][
|
|
||||||
i % 4
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
{:else}
|
{:else}
|
||||||
<div
|
<button
|
||||||
class="w-full rounded-none sm:rounded-md m-auto overflow-x-auto no-scrollbar"
|
on:click={() => (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'
|
||||||
|
: ''} "
|
||||||
>
|
>
|
||||||
<table
|
{#if activeIdx === i}
|
||||||
class="table table-sm bg-table border border-gray-800 table-compact w-full"
|
<div class="absolute inset-0 rounded-md bg-[#fff]"></div>
|
||||||
|
{/if}
|
||||||
|
<span
|
||||||
|
class="relative text-sm block font-semibold whitespace-nowrap {activeIdx ===
|
||||||
|
i
|
||||||
|
? 'text-black'
|
||||||
|
: ''}"
|
||||||
>
|
>
|
||||||
<thead class="bg-default">
|
{item.title}
|
||||||
<tr class="text-white">
|
</span>
|
||||||
<td
|
</button>
|
||||||
class="text-start bg-default text-white text-sm font-semibold pr-10"
|
|
||||||
>Year</td
|
|
||||||
>
|
|
||||||
{#each financialData as cash}
|
|
||||||
{#if filterRule === "annual"}
|
|
||||||
<td
|
|
||||||
class="bg-default font-semibold text-sm text-end"
|
|
||||||
>
|
|
||||||
{"FY" + cash?.calendarYear?.slice(-2)}
|
|
||||||
</td>
|
|
||||||
{:else}
|
|
||||||
<td
|
|
||||||
class="bg-default font-semibold text-sm text-end"
|
|
||||||
>
|
|
||||||
{"FY" +
|
|
||||||
cash?.calendarYear?.slice(-2) +
|
|
||||||
" " +
|
|
||||||
cash?.period}
|
|
||||||
</td>
|
|
||||||
{/if}
|
|
||||||
{/each}
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<!-- row -->
|
|
||||||
<FinancialTable data={financialData} {fields} />
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
{/if}
|
{/if}
|
||||||
{/if}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
|
||||||
{:else}
|
<div class="grid grid-cols-1 gap-2">
|
||||||
<div class="w-full flex justify-center items-center h-80">
|
{#if financialData?.length > 0}
|
||||||
<div class="relative">
|
<div
|
||||||
<label
|
class="mb-2 flex flex-row items-center w-full justify-end sm:justify-center"
|
||||||
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"
|
>
|
||||||
>
|
<label
|
||||||
<span class="loading loading-spinner loading-md text-gray-400"
|
class="inline-flex mt-2 sm:mt-0 cursor-pointer relative mr-auto"
|
||||||
></span>
|
>
|
||||||
</label>
|
<input
|
||||||
|
on:click={toggleMode}
|
||||||
|
type="checkbox"
|
||||||
|
checked={$coolMode}
|
||||||
|
value={$coolMode}
|
||||||
|
class="sr-only peer"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
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>
|
||||||
|
{#if $coolMode}
|
||||||
|
<span class="ml-2 text-sm"> Chart Mode </span>
|
||||||
|
{:else}
|
||||||
|
<span class="ml-2 text-sm"> Table Mode </span>
|
||||||
|
{/if}
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<div class="flex flex-row items-center w-fit sm:ml-auto">
|
||||||
|
<div class="relative inline-block text-left grow">
|
||||||
|
<DropdownMenu.Root>
|
||||||
|
<DropdownMenu.Trigger asChild let:builder>
|
||||||
|
<Button
|
||||||
|
builders={[builder]}
|
||||||
|
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">{$timeFrame}</span>
|
||||||
|
<svg
|
||||||
|
class="-mr-1 ml-1 h-5 w-5 xs:ml-2 inline-block"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
fill="currentColor"
|
||||||
|
style="max-width:40px"
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
></path>
|
||||||
|
</svg>
|
||||||
|
</Button>
|
||||||
|
</DropdownMenu.Trigger>
|
||||||
|
<DropdownMenu.Content
|
||||||
|
class="w-56 h-fit max-h-72 overflow-y-auto scroller"
|
||||||
|
>
|
||||||
|
<DropdownMenu.Label
|
||||||
|
class="text-muted dark:text-gray-400"
|
||||||
|
>
|
||||||
|
Select time frame
|
||||||
|
</DropdownMenu.Label>
|
||||||
|
<DropdownMenu.Separator />
|
||||||
|
<DropdownMenu.Group>
|
||||||
|
<DropdownMenu.Item
|
||||||
|
on:click={() => ($timeFrame = "5Y")}
|
||||||
|
class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
|
||||||
|
>
|
||||||
|
5 years
|
||||||
|
</DropdownMenu.Item>
|
||||||
|
<DropdownMenu.Item
|
||||||
|
on:click={() => ($timeFrame = "10Y")}
|
||||||
|
class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
|
||||||
|
>
|
||||||
|
10 years
|
||||||
|
</DropdownMenu.Item>
|
||||||
|
<DropdownMenu.Item
|
||||||
|
on:click={() => ($timeFrame = "MAX")}
|
||||||
|
class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
|
||||||
|
>
|
||||||
|
Max
|
||||||
|
</DropdownMenu.Item>
|
||||||
|
</DropdownMenu.Group>
|
||||||
|
</DropdownMenu.Content>
|
||||||
|
</DropdownMenu.Root>
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
on:click={() => exportFundamentalData("csv")}
|
||||||
|
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">Download</span>
|
||||||
|
<svg
|
||||||
|
class="{['Pro', 'Plus']?.includes(data?.user?.tier)
|
||||||
|
? 'hidden'
|
||||||
|
: ''} ml-1 -mt-0.5 w-3.5 h-3.5"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
><path
|
||||||
|
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"
|
||||||
|
/></svg
|
||||||
|
>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{#if $coolMode}
|
||||||
|
<div class="grid gap-5 xs:gap-6 lg:grid-cols-3 lg:gap-3">
|
||||||
|
{#each fields as item, i}
|
||||||
|
<FinancialChart
|
||||||
|
data={financialData}
|
||||||
|
{statementConfig}
|
||||||
|
displayStatement={item?.key}
|
||||||
|
{filterRule}
|
||||||
|
{processedData}
|
||||||
|
color={["#ff00cc", "#37ff00", "#0c63e7", "#07c8f9"][
|
||||||
|
i % 4
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
{:else}
|
||||||
|
<div
|
||||||
|
class="w-full rounded-none sm:rounded-md m-auto overflow-x-auto no-scrollbar"
|
||||||
|
>
|
||||||
|
<table
|
||||||
|
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="text-muted dark:text-white">
|
||||||
|
<tr class="">
|
||||||
|
<td class="text-start text-sm font-semibold pr-10"
|
||||||
|
>Year</td
|
||||||
|
>
|
||||||
|
{#each financialData as cash}
|
||||||
|
{#if filterRule === "annual"}
|
||||||
|
<td class=" font-semibold text-sm text-end">
|
||||||
|
{"FY" + cash?.calendarYear?.slice(-2)}
|
||||||
|
</td>
|
||||||
|
{:else}
|
||||||
|
<td class=" font-semibold text-sm text-end">
|
||||||
|
{"FY" +
|
||||||
|
cash?.calendarYear?.slice(-2) +
|
||||||
|
" " +
|
||||||
|
cash?.period}
|
||||||
|
</td>
|
||||||
|
{/if}
|
||||||
|
{/each}
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<!-- row -->
|
||||||
|
<FinancialTable data={financialData} {fields} />
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
</main>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@ -321,242 +321,223 @@
|
|||||||
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
|
||||||
|
class="mb-3 flex flex-col sm:flex-row items-center justify-between"
|
||||||
|
>
|
||||||
|
<h1 class="text-xl sm:text-2xl font-bold">
|
||||||
|
{removeCompanyStrings($displayCompanyName)} Cash Flow Statement
|
||||||
|
</h1>
|
||||||
<div
|
<div
|
||||||
class="mb-3 flex flex-col sm:flex-row items-center justify-between"
|
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"
|
||||||
>
|
>
|
||||||
<h1 class="text-xl sm:text-2xl text-white font-bold">
|
{#each tabs as item, i}
|
||||||
{removeCompanyStrings($displayCompanyName)} Cash Flow Statement
|
{#if !["Pro", "Plus"]?.includes(data?.user?.tier) && i > 0}
|
||||||
</h1>
|
<button
|
||||||
<div
|
on:click={() => goto("/pricing")}
|
||||||
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="cursor-pointer group relative z-1 rounded-full w-1/2 min-w-24 md:w-auto px-5 py-1"
|
||||||
>
|
|
||||||
{#each tabs as item, i}
|
|
||||||
{#if !["Pro", "Plus"]?.includes(data?.user?.tier) && i > 0}
|
|
||||||
<button
|
|
||||||
on:click={() => goto("/pricing")}
|
|
||||||
class="cursor-pointer group relative z-1 rounded-full w-1/2 min-w-24 md:w-auto px-5 py-1"
|
|
||||||
>
|
|
||||||
<span class="relative text-sm block font-semibold">
|
|
||||||
{item.title}
|
|
||||||
<svg
|
|
||||||
class="inline-block ml-0.5 -mt-1 w-3.5 h-3.5"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
><path
|
|
||||||
fill="#A3A3A3"
|
|
||||||
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
|
|
||||||
>
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
{:else}
|
|
||||||
<button
|
|
||||||
on:click={() => (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 activeIdx === i}
|
|
||||||
<div
|
|
||||||
class="absolute inset-0 rounded-md bg-[#fff]"
|
|
||||||
></div>
|
|
||||||
{/if}
|
|
||||||
<span
|
|
||||||
class="relative text-sm block font-semibold whitespace-nowrap {activeIdx ===
|
|
||||||
i
|
|
||||||
? 'text-black'
|
|
||||||
: 'text-white'}"
|
|
||||||
>
|
|
||||||
{item.title}
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
{/if}
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid grid-cols-1 gap-2">
|
|
||||||
{#if financialData?.length > 0}
|
|
||||||
<div
|
|
||||||
class="mb-2 flex flex-row items-center w-full justify-end sm:justify-center"
|
|
||||||
>
|
|
||||||
<label
|
|
||||||
class="inline-flex mt-2 sm:mt-0 cursor-pointer relative mr-auto"
|
|
||||||
>
|
>
|
||||||
<input
|
<span class="relative text-sm block font-semibold">
|
||||||
on:click={toggleMode}
|
{item.title}
|
||||||
type="checkbox"
|
|
||||||
checked={$coolMode}
|
|
||||||
value={$coolMode}
|
|
||||||
class="sr-only peer"
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
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>
|
|
||||||
{#if $coolMode}
|
|
||||||
<span class="ml-2 text-sm text-white"> Chart Mode </span>
|
|
||||||
{:else}
|
|
||||||
<span class="ml-2 text-sm text-white"> Table Mode </span>
|
|
||||||
{/if}
|
|
||||||
</label>
|
|
||||||
|
|
||||||
<div class="flex flex-row items-center w-fit sm:ml-auto">
|
|
||||||
<div class="relative inline-block text-left grow">
|
|
||||||
<DropdownMenu.Root>
|
|
||||||
<DropdownMenu.Trigger asChild let:builder>
|
|
||||||
<Button
|
|
||||||
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"
|
|
||||||
>
|
|
||||||
<span class="truncate text-white">{$timeFrame}</span
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
class="-mr-1 ml-1 h-5 w-5 xs:ml-2 inline-block"
|
|
||||||
viewBox="0 0 20 20"
|
|
||||||
fill="currentColor"
|
|
||||||
style="max-width:40px"
|
|
||||||
aria-hidden="true"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
fill-rule="evenodd"
|
|
||||||
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
|
|
||||||
clip-rule="evenodd"
|
|
||||||
></path>
|
|
||||||
</svg>
|
|
||||||
</Button>
|
|
||||||
</DropdownMenu.Trigger>
|
|
||||||
<DropdownMenu.Content
|
|
||||||
class="w-56 h-fit max-h-72 overflow-y-auto scroller"
|
|
||||||
>
|
|
||||||
<DropdownMenu.Label class="text-gray-400">
|
|
||||||
Select time frame
|
|
||||||
</DropdownMenu.Label>
|
|
||||||
<DropdownMenu.Separator />
|
|
||||||
<DropdownMenu.Group>
|
|
||||||
<DropdownMenu.Item
|
|
||||||
on:click={() => ($timeFrame = "5Y")}
|
|
||||||
class="cursor-pointer hover:bg-primary"
|
|
||||||
>
|
|
||||||
5 years
|
|
||||||
</DropdownMenu.Item>
|
|
||||||
<DropdownMenu.Item
|
|
||||||
on:click={() => ($timeFrame = "10Y")}
|
|
||||||
class="cursor-pointer hover:bg-primary"
|
|
||||||
>
|
|
||||||
10 years
|
|
||||||
</DropdownMenu.Item>
|
|
||||||
<DropdownMenu.Item
|
|
||||||
on:click={() => ($timeFrame = "MAX")}
|
|
||||||
class="cursor-pointer hover:bg-primary"
|
|
||||||
>
|
|
||||||
Max
|
|
||||||
</DropdownMenu.Item>
|
|
||||||
</DropdownMenu.Group>
|
|
||||||
</DropdownMenu.Content>
|
|
||||||
</DropdownMenu.Root>
|
|
||||||
</div>
|
|
||||||
<Button
|
|
||||||
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"
|
|
||||||
>
|
|
||||||
<span class="truncate text-white">Download</span>
|
|
||||||
<svg
|
<svg
|
||||||
class="{['Pro', 'Plus']?.includes(data?.user?.tier)
|
class="inline-block ml-0.5 -mt-1 w-3.5 h-3.5"
|
||||||
? 'hidden'
|
|
||||||
: ''} ml-1 -mt-0.5 w-3.5 h-3.5"
|
|
||||||
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
|
||||||
>
|
>
|
||||||
</Button>
|
</span>
|
||||||
</div>
|
</button>
|
||||||
</div>
|
|
||||||
|
|
||||||
{#if $coolMode}
|
|
||||||
<div class="grid gap-5 xs:gap-6 lg:grid-cols-3 lg:gap-3">
|
|
||||||
{#each fields as item, i}
|
|
||||||
<FinancialChart
|
|
||||||
data={financialData}
|
|
||||||
{statementConfig}
|
|
||||||
displayStatement={item?.key}
|
|
||||||
{filterRule}
|
|
||||||
{processedData}
|
|
||||||
color={["#ff00cc", "#37ff00", "#0c63e7", "#07c8f9"][
|
|
||||||
i % 4
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
{:else}
|
{:else}
|
||||||
<div
|
<button
|
||||||
class="w-full rounded-none sm:rounded-md m-auto overflow-x-auto no-scrollbar"
|
on:click={() => (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'
|
||||||
|
: ''} "
|
||||||
>
|
>
|
||||||
<table
|
{#if activeIdx === i}
|
||||||
class="table table-sm bg-table border border-gray-800 table-compact w-full"
|
<div class="absolute inset-0 rounded-md bg-[#fff]"></div>
|
||||||
|
{/if}
|
||||||
|
<span
|
||||||
|
class="relative text-sm block font-semibold whitespace-nowrap {activeIdx ===
|
||||||
|
i
|
||||||
|
? 'text-black'
|
||||||
|
: ''}"
|
||||||
>
|
>
|
||||||
<thead class="bg-default">
|
{item.title}
|
||||||
<tr class="text-white">
|
</span>
|
||||||
<td
|
</button>
|
||||||
class="text-start bg-default text-white text-sm font-semibold pr-10"
|
|
||||||
>Year</td
|
|
||||||
>
|
|
||||||
{#each financialData as cash}
|
|
||||||
{#if filterRule === "annual"}
|
|
||||||
<td
|
|
||||||
class="bg-default font-semibold text-sm text-end"
|
|
||||||
>
|
|
||||||
{"FY" + cash?.calendarYear?.slice(-2)}
|
|
||||||
</td>
|
|
||||||
{:else}
|
|
||||||
<td
|
|
||||||
class="bg-default font-semibold text-sm text-end"
|
|
||||||
>
|
|
||||||
{"FY" +
|
|
||||||
cash?.calendarYear?.slice(-2) +
|
|
||||||
" " +
|
|
||||||
cash?.period}
|
|
||||||
</td>
|
|
||||||
{/if}
|
|
||||||
{/each}
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<!-- row -->
|
|
||||||
<FinancialTable data={financialData} {fields} />
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
{/if}
|
{/if}
|
||||||
{/if}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
|
||||||
{:else}
|
<div class="grid grid-cols-1 gap-2">
|
||||||
<div class="w-full flex justify-center items-center h-80">
|
{#if financialData?.length > 0}
|
||||||
<div class="relative">
|
<div
|
||||||
<label
|
class="mb-2 flex flex-row items-center w-full justify-end sm:justify-center"
|
||||||
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"
|
>
|
||||||
>
|
<label
|
||||||
<span class="loading loading-spinner loading-md text-gray-400"
|
class="inline-flex mt-2 sm:mt-0 cursor-pointer relative mr-auto"
|
||||||
></span>
|
>
|
||||||
</label>
|
<input
|
||||||
|
on:click={toggleMode}
|
||||||
|
type="checkbox"
|
||||||
|
checked={$coolMode}
|
||||||
|
value={$coolMode}
|
||||||
|
class="sr-only peer"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
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>
|
||||||
|
{#if $coolMode}
|
||||||
|
<span class="ml-2 text-sm"> Chart Mode </span>
|
||||||
|
{:else}
|
||||||
|
<span class="ml-2 text-sm"> Table Mode </span>
|
||||||
|
{/if}
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<div class="flex flex-row items-center w-fit sm:ml-auto">
|
||||||
|
<div class="relative inline-block text-left grow">
|
||||||
|
<DropdownMenu.Root>
|
||||||
|
<DropdownMenu.Trigger asChild let:builder>
|
||||||
|
<Button
|
||||||
|
builders={[builder]}
|
||||||
|
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">{$timeFrame}</span>
|
||||||
|
<svg
|
||||||
|
class="-mr-1 ml-1 h-5 w-5 xs:ml-2 inline-block"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
fill="currentColor"
|
||||||
|
style="max-width:40px"
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
></path>
|
||||||
|
</svg>
|
||||||
|
</Button>
|
||||||
|
</DropdownMenu.Trigger>
|
||||||
|
<DropdownMenu.Content
|
||||||
|
class="w-56 h-fit max-h-72 overflow-y-auto scroller"
|
||||||
|
>
|
||||||
|
<DropdownMenu.Label
|
||||||
|
class="text-muted dark:text-gray-400"
|
||||||
|
>
|
||||||
|
Select time frame
|
||||||
|
</DropdownMenu.Label>
|
||||||
|
<DropdownMenu.Separator />
|
||||||
|
<DropdownMenu.Group>
|
||||||
|
<DropdownMenu.Item
|
||||||
|
on:click={() => ($timeFrame = "5Y")}
|
||||||
|
class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
|
||||||
|
>
|
||||||
|
5 years
|
||||||
|
</DropdownMenu.Item>
|
||||||
|
<DropdownMenu.Item
|
||||||
|
on:click={() => ($timeFrame = "10Y")}
|
||||||
|
class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
|
||||||
|
>
|
||||||
|
10 years
|
||||||
|
</DropdownMenu.Item>
|
||||||
|
<DropdownMenu.Item
|
||||||
|
on:click={() => ($timeFrame = "MAX")}
|
||||||
|
class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
|
||||||
|
>
|
||||||
|
Max
|
||||||
|
</DropdownMenu.Item>
|
||||||
|
</DropdownMenu.Group>
|
||||||
|
</DropdownMenu.Content>
|
||||||
|
</DropdownMenu.Root>
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
on:click={() => exportFundamentalData("csv")}
|
||||||
|
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">Download</span>
|
||||||
|
<svg
|
||||||
|
class="{['Pro', 'Plus']?.includes(data?.user?.tier)
|
||||||
|
? 'hidden'
|
||||||
|
: ''} ml-1 -mt-0.5 w-3.5 h-3.5"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
><path
|
||||||
|
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"
|
||||||
|
/></svg
|
||||||
|
>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{#if $coolMode}
|
||||||
|
<div class="grid gap-5 xs:gap-6 lg:grid-cols-3 lg:gap-3">
|
||||||
|
{#each fields as item, i}
|
||||||
|
<FinancialChart
|
||||||
|
data={financialData}
|
||||||
|
{statementConfig}
|
||||||
|
displayStatement={item?.key}
|
||||||
|
{filterRule}
|
||||||
|
{processedData}
|
||||||
|
color={["#ff00cc", "#37ff00", "#0c63e7", "#07c8f9"][
|
||||||
|
i % 4
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
{:else}
|
||||||
|
<div
|
||||||
|
class="w-full rounded-none sm:rounded-md m-auto overflow-x-auto no-scrollbar"
|
||||||
|
>
|
||||||
|
<table
|
||||||
|
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="text-muted dark:text-white">
|
||||||
|
<tr class="">
|
||||||
|
<td class="text-start text-sm font-semibold pr-10"
|
||||||
|
>Year</td
|
||||||
|
>
|
||||||
|
{#each financialData as cash}
|
||||||
|
{#if filterRule === "annual"}
|
||||||
|
<td class=" font-semibold text-sm text-end">
|
||||||
|
{"FY" + cash?.calendarYear?.slice(-2)}
|
||||||
|
</td>
|
||||||
|
{:else}
|
||||||
|
<td class=" font-semibold text-sm text-end">
|
||||||
|
{"FY" +
|
||||||
|
cash?.calendarYear?.slice(-2) +
|
||||||
|
" " +
|
||||||
|
cash?.period}
|
||||||
|
</td>
|
||||||
|
{/if}
|
||||||
|
{/each}
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<!-- row -->
|
||||||
|
<FinancialTable data={financialData} {fields} />
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
</main>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@ -310,242 +310,223 @@
|
|||||||
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
|
||||||
|
class="mb-3 flex flex-col sm:flex-row items-center justify-between"
|
||||||
|
>
|
||||||
|
<h1 class="text-xl sm:text-2xl font-bold">
|
||||||
|
{removeCompanyStrings($displayCompanyName)} Ratios Statement
|
||||||
|
</h1>
|
||||||
<div
|
<div
|
||||||
class="mb-3 flex flex-col sm:flex-row items-center justify-between"
|
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"
|
||||||
>
|
>
|
||||||
<h1 class="text-xl sm:text-2xl text-white font-bold">
|
{#each tabs as item, i}
|
||||||
{removeCompanyStrings($displayCompanyName)} Ratios Statement
|
{#if !["Pro", "Plus"]?.includes(data?.user?.tier) && i > 0}
|
||||||
</h1>
|
<button
|
||||||
<div
|
on:click={() => goto("/pricing")}
|
||||||
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="cursor-pointer group relative z-1 rounded-full w-1/2 min-w-24 md:w-auto px-5 py-1"
|
||||||
>
|
|
||||||
{#each tabs as item, i}
|
|
||||||
{#if !["Pro", "Plus"]?.includes(data?.user?.tier) && i > 0}
|
|
||||||
<button
|
|
||||||
on:click={() => goto("/pricing")}
|
|
||||||
class="cursor-pointer group relative z-1 rounded-full w-1/2 min-w-24 md:w-auto px-5 py-1"
|
|
||||||
>
|
|
||||||
<span class="relative text-sm block font-semibold">
|
|
||||||
{item.title}
|
|
||||||
<svg
|
|
||||||
class="inline-block ml-0.5 -mt-1 w-3.5 h-3.5"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
><path
|
|
||||||
fill="#A3A3A3"
|
|
||||||
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
|
|
||||||
>
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
{:else}
|
|
||||||
<button
|
|
||||||
on:click={() => (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 activeIdx === i}
|
|
||||||
<div
|
|
||||||
class="absolute inset-0 rounded-md bg-[#fff]"
|
|
||||||
></div>
|
|
||||||
{/if}
|
|
||||||
<span
|
|
||||||
class="relative text-sm block font-semibold whitespace-nowrap {activeIdx ===
|
|
||||||
i
|
|
||||||
? 'text-black'
|
|
||||||
: 'text-white'}"
|
|
||||||
>
|
|
||||||
{item.title}
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
{/if}
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid grid-cols-1 gap-2">
|
|
||||||
{#if financialData?.length > 0}
|
|
||||||
<div
|
|
||||||
class="mb-2 flex flex-row items-center w-full justify-end sm:justify-center"
|
|
||||||
>
|
|
||||||
<label
|
|
||||||
class="inline-flex mt-2 sm:mt-0 cursor-pointer relative mr-auto"
|
|
||||||
>
|
>
|
||||||
<input
|
<span class="relative text-sm block font-semibold">
|
||||||
on:click={toggleMode}
|
{item.title}
|
||||||
type="checkbox"
|
|
||||||
checked={$coolMode}
|
|
||||||
value={$coolMode}
|
|
||||||
class="sr-only peer"
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
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>
|
|
||||||
{#if $coolMode}
|
|
||||||
<span class="ml-2 text-sm text-white"> Chart Mode </span>
|
|
||||||
{:else}
|
|
||||||
<span class="ml-2 text-sm text-white"> Table Mode </span>
|
|
||||||
{/if}
|
|
||||||
</label>
|
|
||||||
|
|
||||||
<div class="flex flex-row items-center w-fit sm:ml-auto">
|
|
||||||
<div class="relative inline-block text-left grow">
|
|
||||||
<DropdownMenu.Root>
|
|
||||||
<DropdownMenu.Trigger asChild let:builder>
|
|
||||||
<Button
|
|
||||||
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"
|
|
||||||
>
|
|
||||||
<span class="truncate text-white">{$timeFrame}</span
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
class="-mr-1 ml-1 h-5 w-5 xs:ml-2 inline-block"
|
|
||||||
viewBox="0 0 20 20"
|
|
||||||
fill="currentColor"
|
|
||||||
style="max-width:40px"
|
|
||||||
aria-hidden="true"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
fill-rule="evenodd"
|
|
||||||
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
|
|
||||||
clip-rule="evenodd"
|
|
||||||
></path>
|
|
||||||
</svg>
|
|
||||||
</Button>
|
|
||||||
</DropdownMenu.Trigger>
|
|
||||||
<DropdownMenu.Content
|
|
||||||
class="w-56 h-fit max-h-72 overflow-y-auto scroller"
|
|
||||||
>
|
|
||||||
<DropdownMenu.Label class="text-gray-400">
|
|
||||||
Select time frame
|
|
||||||
</DropdownMenu.Label>
|
|
||||||
<DropdownMenu.Separator />
|
|
||||||
<DropdownMenu.Group>
|
|
||||||
<DropdownMenu.Item
|
|
||||||
on:click={() => ($timeFrame = "5Y")}
|
|
||||||
class="cursor-pointer hover:bg-primary"
|
|
||||||
>
|
|
||||||
5 years
|
|
||||||
</DropdownMenu.Item>
|
|
||||||
<DropdownMenu.Item
|
|
||||||
on:click={() => ($timeFrame = "10Y")}
|
|
||||||
class="cursor-pointer hover:bg-primary"
|
|
||||||
>
|
|
||||||
10 years
|
|
||||||
</DropdownMenu.Item>
|
|
||||||
<DropdownMenu.Item
|
|
||||||
on:click={() => ($timeFrame = "MAX")}
|
|
||||||
class="cursor-pointer hover:bg-primary"
|
|
||||||
>
|
|
||||||
Max
|
|
||||||
</DropdownMenu.Item>
|
|
||||||
</DropdownMenu.Group>
|
|
||||||
</DropdownMenu.Content>
|
|
||||||
</DropdownMenu.Root>
|
|
||||||
</div>
|
|
||||||
<Button
|
|
||||||
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"
|
|
||||||
>
|
|
||||||
<span class="truncate text-white">Download</span>
|
|
||||||
<svg
|
<svg
|
||||||
class="{['Pro', 'Plus']?.includes(data?.user?.tier)
|
class="inline-block ml-0.5 -mt-1 w-3.5 h-3.5"
|
||||||
? 'hidden'
|
|
||||||
: ''} ml-1 -mt-0.5 w-3.5 h-3.5"
|
|
||||||
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
|
||||||
>
|
>
|
||||||
</Button>
|
</span>
|
||||||
</div>
|
</button>
|
||||||
</div>
|
|
||||||
|
|
||||||
{#if $coolMode}
|
|
||||||
<div class="grid gap-5 xs:gap-6 lg:grid-cols-3 lg:gap-3">
|
|
||||||
{#each fields as item, i}
|
|
||||||
<FinancialChart
|
|
||||||
data={financialData}
|
|
||||||
{statementConfig}
|
|
||||||
displayStatement={item?.key}
|
|
||||||
{filterRule}
|
|
||||||
{processedData}
|
|
||||||
color={["#ff00cc", "#37ff00", "#0c63e7", "#07c8f9"][
|
|
||||||
i % 4
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
{:else}
|
{:else}
|
||||||
<div
|
<button
|
||||||
class="w-full rounded-none sm:rounded-md m-auto overflow-x-auto no-scrollbar"
|
on:click={() => (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'
|
||||||
|
: ''} "
|
||||||
>
|
>
|
||||||
<table
|
{#if activeIdx === i}
|
||||||
class="table table-sm bg-table border border-gray-800 table-compact w-full"
|
<div class="absolute inset-0 rounded-md bg-[#fff]"></div>
|
||||||
|
{/if}
|
||||||
|
<span
|
||||||
|
class="relative text-sm block font-semibold whitespace-nowrap {activeIdx ===
|
||||||
|
i
|
||||||
|
? 'text-black'
|
||||||
|
: ''}"
|
||||||
>
|
>
|
||||||
<thead class="bg-default">
|
{item.title}
|
||||||
<tr class="text-white">
|
</span>
|
||||||
<td
|
</button>
|
||||||
class="text-start bg-default text-white text-sm font-semibold pr-10"
|
|
||||||
>Year</td
|
|
||||||
>
|
|
||||||
{#each financialData as cash}
|
|
||||||
{#if filterRule === "annual"}
|
|
||||||
<td
|
|
||||||
class="bg-default font-semibold text-sm text-end"
|
|
||||||
>
|
|
||||||
{"FY" + cash?.calendarYear?.slice(-2)}
|
|
||||||
</td>
|
|
||||||
{:else}
|
|
||||||
<td
|
|
||||||
class="bg-default font-semibold text-sm text-end"
|
|
||||||
>
|
|
||||||
{"FY" +
|
|
||||||
cash?.calendarYear?.slice(-2) +
|
|
||||||
" " +
|
|
||||||
cash?.period}
|
|
||||||
</td>
|
|
||||||
{/if}
|
|
||||||
{/each}
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<!-- row -->
|
|
||||||
<FinancialTable data={financialData} {fields} />
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
{/if}
|
{/if}
|
||||||
{/if}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
|
||||||
{:else}
|
<div class="grid grid-cols-1 gap-2">
|
||||||
<div class="w-full flex justify-center items-center h-80">
|
{#if financialData?.length > 0}
|
||||||
<div class="relative">
|
<div
|
||||||
<label
|
class="mb-2 flex flex-row items-center w-full justify-end sm:justify-center"
|
||||||
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"
|
>
|
||||||
>
|
<label
|
||||||
<span class="loading loading-spinner loading-md text-gray-400"
|
class="inline-flex mt-2 sm:mt-0 cursor-pointer relative mr-auto"
|
||||||
></span>
|
>
|
||||||
</label>
|
<input
|
||||||
|
on:click={toggleMode}
|
||||||
|
type="checkbox"
|
||||||
|
checked={$coolMode}
|
||||||
|
value={$coolMode}
|
||||||
|
class="sr-only peer"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
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>
|
||||||
|
{#if $coolMode}
|
||||||
|
<span class="ml-2 text-sm"> Chart Mode </span>
|
||||||
|
{:else}
|
||||||
|
<span class="ml-2 text-sm"> Table Mode </span>
|
||||||
|
{/if}
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<div class="flex flex-row items-center w-fit sm:ml-auto">
|
||||||
|
<div class="relative inline-block text-left grow">
|
||||||
|
<DropdownMenu.Root>
|
||||||
|
<DropdownMenu.Trigger asChild let:builder>
|
||||||
|
<Button
|
||||||
|
builders={[builder]}
|
||||||
|
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">{$timeFrame}</span>
|
||||||
|
<svg
|
||||||
|
class="-mr-1 ml-1 h-5 w-5 xs:ml-2 inline-block"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
fill="currentColor"
|
||||||
|
style="max-width:40px"
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
></path>
|
||||||
|
</svg>
|
||||||
|
</Button>
|
||||||
|
</DropdownMenu.Trigger>
|
||||||
|
<DropdownMenu.Content
|
||||||
|
class="w-56 h-fit max-h-72 overflow-y-auto scroller"
|
||||||
|
>
|
||||||
|
<DropdownMenu.Label
|
||||||
|
class="text-muted dark:text-gray-400"
|
||||||
|
>
|
||||||
|
Select time frame
|
||||||
|
</DropdownMenu.Label>
|
||||||
|
<DropdownMenu.Separator />
|
||||||
|
<DropdownMenu.Group>
|
||||||
|
<DropdownMenu.Item
|
||||||
|
on:click={() => ($timeFrame = "5Y")}
|
||||||
|
class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
|
||||||
|
>
|
||||||
|
5 years
|
||||||
|
</DropdownMenu.Item>
|
||||||
|
<DropdownMenu.Item
|
||||||
|
on:click={() => ($timeFrame = "10Y")}
|
||||||
|
class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
|
||||||
|
>
|
||||||
|
10 years
|
||||||
|
</DropdownMenu.Item>
|
||||||
|
<DropdownMenu.Item
|
||||||
|
on:click={() => ($timeFrame = "MAX")}
|
||||||
|
class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
|
||||||
|
>
|
||||||
|
Max
|
||||||
|
</DropdownMenu.Item>
|
||||||
|
</DropdownMenu.Group>
|
||||||
|
</DropdownMenu.Content>
|
||||||
|
</DropdownMenu.Root>
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
on:click={() => exportFundamentalData("csv")}
|
||||||
|
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">Download</span>
|
||||||
|
<svg
|
||||||
|
class="{['Pro', 'Plus']?.includes(data?.user?.tier)
|
||||||
|
? 'hidden'
|
||||||
|
: ''} ml-1 -mt-0.5 w-3.5 h-3.5"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
><path
|
||||||
|
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"
|
||||||
|
/></svg
|
||||||
|
>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{#if $coolMode}
|
||||||
|
<div class="grid gap-5 xs:gap-6 lg:grid-cols-3 lg:gap-3">
|
||||||
|
{#each fields as item, i}
|
||||||
|
<FinancialChart
|
||||||
|
data={financialData}
|
||||||
|
{statementConfig}
|
||||||
|
displayStatement={item?.key}
|
||||||
|
{filterRule}
|
||||||
|
{processedData}
|
||||||
|
color={["#ff00cc", "#37ff00", "#0c63e7", "#07c8f9"][
|
||||||
|
i % 4
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
{:else}
|
||||||
|
<div
|
||||||
|
class="w-full rounded-none sm:rounded-md m-auto overflow-x-auto no-scrollbar"
|
||||||
|
>
|
||||||
|
<table
|
||||||
|
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="text-muted dark:text-white">
|
||||||
|
<tr class="">
|
||||||
|
<td class="text-start text-sm font-semibold pr-10"
|
||||||
|
>Year</td
|
||||||
|
>
|
||||||
|
{#each financialData as cash}
|
||||||
|
{#if filterRule === "annual"}
|
||||||
|
<td class=" font-semibold text-sm text-end">
|
||||||
|
{"FY" + cash?.calendarYear?.slice(-2)}
|
||||||
|
</td>
|
||||||
|
{:else}
|
||||||
|
<td class=" font-semibold text-sm text-end">
|
||||||
|
{"FY" +
|
||||||
|
cash?.calendarYear?.slice(-2) +
|
||||||
|
" " +
|
||||||
|
cash?.period}
|
||||||
|
</td>
|
||||||
|
{/if}
|
||||||
|
{/each}
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<!-- row -->
|
||||||
|
<FinancialTable data={financialData} {fields} />
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
</main>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user