update transcripts page

This commit is contained in:
MuslemRahimi 2024-10-25 21:39:19 +02:00
parent 67551ae6b2
commit bf8cce77a5
4 changed files with 349 additions and 492 deletions

View File

@ -9,6 +9,7 @@ export const POST: RequestHandler = async ({ request, locals }) => {
quarter: data?.quarter, quarter: data?.quarter,
year: data?.year, year: data?.year,
}; };
const response = await fetch(apiURL + "/earnings-call-transcripts", { const response = await fetch(apiURL + "/earnings-call-transcripts", {
method: "POST", method: "POST",
headers: { headers: {

View File

@ -1,38 +0,0 @@
const now = new Date();
const year = now?.getFullYear()?.toString();
const quarter = (Math.floor(now?.getMonth() / 3) + 1)?.toString();
export const load = async ({ locals, params }) => {
const getTranscripts = async () => {
let output;
const { apiKey, apiURL } = locals;
const postData = {
ticker: params.tickerID,
quarter: quarter,
year: year,
};
// make the POST request to the endpoint
const response = await fetch(apiURL + "/earnings-call-transcripts", {
method: "POST",
headers: {
"Content-Type": "application/json",
"X-API-KEY": apiKey,
},
body: JSON.stringify(postData),
});
output = await response.json();
return output;
};
// Make sure to return a promise
return {
getTranscripts: await getTranscripts(),
quarter,
year,
};
};

View File

@ -1,95 +1,121 @@
<script lang='ts'> <script lang="ts">
import { stockTicker, getCache, setCache, displayCompanyName, numberOfUnreadNotification } from '$lib/store'; import {
stockTicker,
getCache,
setCache,
displayCompanyName,
numberOfUnreadNotification,
} from "$lib/store";
import * as DropdownMenu from "$lib/components/shadcn/dropdown-menu/index.js";
import { Button } from "$lib/components/shadcn/button/index.js";
import { onMount } from "svelte";
export let data; let chats = [];
let date;
let chats = data?.getTranscripts?.chat ?? []; const now = new Date();
let date = data?.getTranscripts?.date; let year = now.getFullYear();
let quarter = Math.floor(now.getMonth() / 3) + 1;
let displayQuarter = data?.quarter; let yearRange = ["2024", "2023", "2022", "2021"];
let displayYear = data?.year; let displayQuarter = quarter;
let quarter = displayQuarter; let displayYear = year;
let year = displayYear; let isLoaded = false;
let isLoaded = true;
function backToTop() { function backToTop() {
window.scrollTo({ window.scrollTo({
top: 0, top: 0,
behavior: 'smooth' behavior: "smooth",
}); });
} }
const getTranscripts = async () => { const getTranscripts = async () => {
isLoaded = false; isLoaded = false;
chats = []; chats = [];
let output; let output;
// Get cached data for the specific tickerID // Get cached data for the specific tickerID
const cachedData = getCache(`${$stockTicker}-Q-${quarter}-${year}`, 'getTranscripts'); const cachedData = getCache(
`${$stockTicker}-Q-${quarter}-${year}`,
"getTranscripts",
);
if (cachedData) { if (cachedData) {
output = cachedData; output = cachedData;
} else { } else {
const postData = { const postData = {
ticker: $stockTicker, ticker: $stockTicker,
quarter: quarter, quarter: quarter,
year: year year: year,
}; };
// make the POST request to the endpoint // make the POST request to the endpoint
const response = await fetch('/api/earnings-call-transcripts', { const response = await fetch("/api/earnings-call-transcripts", {
method: 'POST', method: "POST",
headers: { headers: {
"Content-Type": "application/json" "Content-Type": "application/json",
}, },
body: JSON.stringify(postData) body: JSON.stringify(postData),
}); });
output = await response.json(); output = await response.json();
// Cache the data for this specific tickerID with a specific name 'getTranscripts' // Cache the data for this specific tickerID with a specific name 'getTranscripts'
setCache(`${$stockTicker}-Q-${quarter}-${year}`, output, 'getTranscripts'); setCache(
`${$stockTicker}-Q-${quarter}-${year}`,
output,
"getTranscripts",
);
} }
chats = output?.chat ?? []; chats = output?.chat ?? [];
date = output?.date ?? '-'; date = output?.date ?? "-";
displayQuarter = quarter; displayQuarter = quarter;
displayYear = year; displayYear = year;
isLoaded = true; isLoaded = true;
}; };
onMount(async () => {
await getTranscripts();
});
</script> </script>
<svelte:head> <svelte:head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
<title> <title>
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} {$displayCompanyName} ({$stockTicker}) · Q{quarter} {year} · Earnings Call Transcript · stocknear {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""}
{$displayCompanyName} ({$stockTicker}) · Q{quarter}
{year} · Earnings Call Transcript · stocknear
</title> </title>
<meta name="description" content={`Get the latest Earnings Call Transcript of ${$displayCompanyName} (${$stockTicker}) for different years and quarters.`} /> <meta
name="description"
content={`Get the latest Earnings Call Transcript of ${$displayCompanyName} (${$stockTicker}) for different years and quarters.`}
/>
<!-- Other meta tags --> <!-- Other meta tags -->
<meta property="og:title" content={`${$displayCompanyName} (${$stockTicker}) · Q${quarter} ${year} · Earnings Call Transcript · stocknear`}/> <meta
<meta property="og:description" content={`Get the latest Earnings Call Transcript of ${$displayCompanyName} (${$stockTicker}) for different years and quarters.`} /> property="og:title"
content={`${$displayCompanyName} (${$stockTicker}) · Q${quarter} ${year} · Earnings Call Transcript · stocknear`}
/>
<meta
property="og:description"
content={`Get the latest Earnings Call Transcript of ${$displayCompanyName} (${$stockTicker}) for different years and quarters.`}
/>
<meta property="og:type" content="website" /> <meta property="og:type" content="website" />
<!-- Add more Open Graph meta tags as needed --> <!-- Add more Open Graph meta tags as needed -->
<!-- Twitter specific meta tags --> <!-- Twitter specific meta tags -->
<meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content={`${$displayCompanyName} (${$stockTicker}) · Q${quarter} ${year} · Earnings Call Transcript · stocknear`}/> <meta
<meta name="twitter:description" content={`Get the latest Earnings Call Transcript of ${$displayCompanyName} (${$stockTicker}) for different years and quarters.`} /> name="twitter:title"
content={`${$displayCompanyName} (${$stockTicker}) · Q${quarter} ${year} · Earnings Call Transcript · stocknear`}
/>
<meta
name="twitter:description"
content={`Get the latest Earnings Call Transcript of ${$displayCompanyName} (${$stockTicker}) for different years and quarters.`}
/>
<!-- Add more Twitter meta tags as needed --> <!-- Add more Twitter meta tags as needed -->
</svelte:head> </svelte:head>
<section
class="w-full bg-[#09090B] overflow-hidden text-white h-full mb-40 sm:mb-0"
>
<section class="w-full bg-[#09090B] overflow-hidden text-white h-full mb-40 sm:mb-0">
<div class="h-full overflow-hidden"> <div class="h-full overflow-hidden">
<div class="relative flex justify-center items-center overflow-hidden"> <div class="relative flex justify-center items-center overflow-hidden">
<div class="sm:p-7 w-full mt-2 sm:mt-0"> <div class="sm:p-7 w-full mt-2 sm:mt-0">
@ -98,358 +124,226 @@
Transcripts Transcripts
</h1> </h1>
<div
<div class="text-white p-3 sm:p-5 mb-10 rounded-lg sm:flex sm:flex-row sm:items-center border border-slate-800 text-sm sm:text-[1rem]"> class="text-white p-3 sm:p-5 mb-10 rounded-lg sm:flex sm:flex-row sm:items-center border border-slate-800 text-sm sm:text-[1rem]"
<svg class="w-6 h-6 flex-shrink-0 inline-block sm:mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg> >
<svg
class="w-6 h-6 flex-shrink-0 inline-block sm:mr-2"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256"
><path
fill="#a474f6"
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
/></svg
>
Discover the earnings call highlights and investor Q&A with {$displayCompanyName}! Discover the earnings call highlights and investor Q&A with {$displayCompanyName}!
</div> </div>
<div class="flex w-fit sm:w-[50%] md:block md:w-auto ml-auto">
<div class="flex flex-row items-center mb-5 pt-3 justify-center sm:justify-end"> <div class="relative inline-block text-left grow">
<label for="quarterModal" class="ml-1 sm:ml-3 text-sm cursor-pointer bg-purple-600 sm:hover:bg-purple-700 duration-100 transition ease-in-out px-4 py-1.5 rounded-lg shadow-md"> <DropdownMenu.Root>
Quarter: Q{quarter} <DropdownMenu.Trigger asChild let:builder>
</label> <Button
<label for="yearModal" class="ml-3 text-sm cursor-pointer bg-purple-600 sm:hover:bg-purple-700 duration-100 transition ease-in-out px-4 py-1.5 rounded-lg shadow-md"> builders={[builder]}
Year: {year} class="w-full border-gray-600 border bg-[#09090B] sm:hover:bg-[#27272A] ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-lg truncate"
</label> >
<label on:click={() => getTranscripts()} class="ml-3 text-sm cursor-pointer bg-purple-600 sm:hover:bg-purple-700 duration-100 transition ease-in-out px-4 py-1.5 rounded-lg shadow-md"> <span class="truncate text-white">Year: {year}</span>
Run <svg
</label> 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 Year
</DropdownMenu.Label>
<DropdownMenu.Separator />
<DropdownMenu.Group>
{#each yearRange as index}
<DropdownMenu.Item
on:click={() => {
year = index;
getTranscripts();
}}
class="cursor-pointer hover:bg-[#27272A]"
>
{index}
</DropdownMenu.Item>
{/each}
</DropdownMenu.Group>
</DropdownMenu.Content>
</DropdownMenu.Root>
</div>
<div class="relative inline-block text-left grow ml-3">
<DropdownMenu.Root>
<DropdownMenu.Trigger asChild let:builder>
<Button
builders={[builder]}
class="w-full border-gray-600 border bg-[#09090B] sm:hover:bg-[#27272A] ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-lg truncate"
>
<span class="truncate text-white">Quarter: Q{quarter}</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 Quarter
</DropdownMenu.Label>
<DropdownMenu.Separator />
<DropdownMenu.Group>
{#each [1, 2, 3, 4] as index}
<DropdownMenu.Item
on:click={() => {
quarter = index;
getTranscripts();
}}
class="cursor-pointer hover:bg-[#27272A]"
>
Q{index}
</DropdownMenu.Item>
{/each}
</DropdownMenu.Group>
</DropdownMenu.Content>
</DropdownMenu.Root>
</div>
</div> </div>
</div> </div>
{#if isLoaded} {#if isLoaded}
{#if chats?.length !== 0} {#if chats?.length !== 0}
<div class="flex flex-col sm:flex-row items-center pt-5 pb-5"> <div class="flex flex-col sm:flex-row items-center pt-5 pb-5">
<span class="text-white text-md"> <span class="text-white text-md">
Q{displayQuarter} {displayYear} · Earnings Call Transcript Q{displayQuarter}
{displayYear} · Earnings Call Transcript
</span> </span>
<span class="text-white text-opacity-80 text-md mt-2 sm:mt-0 sm:ml-auto"> <span
{new Date(date).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })} class="text-white text-opacity-80 text-md mt-2 sm:mt-0 sm:ml-auto"
>
{new Date(date).toLocaleDateString("en-US", {
month: "short",
day: "numeric",
year: "numeric",
})}
</span> </span>
</div> </div>
{#each chats as item} {#each chats as item}
{#if item?.name === 'Operator'} {#if item?.name === "Operator"}
<div class="flex flex-col items-start gap-2.5 mt-5"> <div class="flex flex-col items-start gap-2.5 mt-5">
<div class="flex flex-row items-center ml-auto mr-2"> <div class="flex flex-row items-center ml-auto mr-2">
<div class="flex items-center space-x-2 rtl:space-x-reverse"> <div
class="flex items-center space-x-2 rtl:space-x-reverse"
>
<span class="text-sm text-base"> <span class="text-sm text-base">
{item?.name} {item?.name}
</span> </span>
</div> </div>
<div class="ml-2 avatar rounded-full w-8 h-8 sm:w-10 sm:h-10 relative bg-[#0DDE00] bg-opacity-[0.6] flex items-center justify-center"> <div
<svg class="w-6 h-6 sm:w-7 sm:h-7" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#27272A" d="M12 14q-1.25 0-2.125-.875T9 11V5q0-1.25.875-2.125T12 2q1.25 0 2.125.875T15 5v6q0 1.25-.875 2.125T12 14m-1 7v-3.075q-2.6-.35-4.3-2.325T5 11h2q0 2.075 1.463 3.538T12 16q2.075 0 3.538-1.463T17 11h2q0 2.625-1.7 4.6T13 17.925V21z"/></svg> class="ml-2 avatar rounded-full w-8 h-8 sm:w-10 sm:h-10 relative bg-[#0DDE00] bg-opacity-[0.6] flex items-center justify-center"
>
<svg
class="w-6 h-6 sm:w-7 sm:h-7"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
><path
fill="#27272A"
d="M12 14q-1.25 0-2.125-.875T9 11V5q0-1.25.875-2.125T12 2q1.25 0 2.125.875T15 5v6q0 1.25-.875 2.125T12 14m-1 7v-3.075q-2.6-.35-4.3-2.325T5 11h2q0 2.075 1.463 3.538T12 16q2.075 0 3.538-1.463T17 11h2q0 2.625-1.7 4.6T13 17.925V21z"
/></svg
>
</div> </div>
</div> </div>
<div class="flex flex-col w-full leading-1.5 p-4 bg-[#27272A] rounded-l-xl rounded-tr-xl"> <div
class="flex flex-col w-full leading-1.5 p-4 bg-[#27272A] rounded-l-xl rounded-tr-xl"
>
<p class="text-sm font-normal py-2.5 text-gray-200"> <p class="text-sm font-normal py-2.5 text-gray-200">
{@html item?.description} {@html item?.description}
</p> </p>
</div> </div>
</div> </div>
{:else} {:else}
<div class="flex flex-col items-start gap-2.5 mt-8"> <div class="flex flex-col items-start gap-2.5 mt-8">
<div class="flex flex-row items-center"> <div class="flex flex-row items-center">
<div class="avatar rounded-full w-8 h-8 sm:w-10 sm:h-10 relative bg-red-600 bg-opacity-[0.6] flex items-center justify-center text-white text-sm sm:text-base"> <div
<span class="absolute inset-0 flex items-center justify-center"> class="avatar rounded-full w-8 h-8 sm:w-10 sm:h-10 relative bg-red-600 bg-opacity-[0.6] flex items-center justify-center text-white text-sm sm:text-base"
>
<span
class="absolute inset-0 flex items-center justify-center"
>
{item?.name?.slice(0, 1)} {item?.name?.slice(0, 1)}
</span> </span>
</div> </div>
<div class="ml-2 flex items-center space-x-2 rtl:space-x-reverse"> <div
class="ml-2 flex items-center space-x-2 rtl:space-x-reverse"
>
<span class="text-sm text-base"> <span class="text-sm text-base">
{item?.name} {item?.name}
</span> </span>
</div> </div>
</div> </div>
<div class="flex flex-col w-full leading-1.5 p-4 bg-[#27272A] rounded-r-xl rounded-tl-xl"> <div
class="flex flex-col w-full leading-1.5 p-4 bg-[#27272A] rounded-r-xl rounded-tl-xl"
>
<p class="text-sm font-normal py-2.5 text-gray-200"> <p class="text-sm font-normal py-2.5 text-gray-200">
{@html item?.description} {@html item?.description}
</p> </p>
</div> </div>
</div> </div>
{/if} {/if}
{/each} {/each}
<label
<label on:click={backToTop} class="w-32 py-1.5 mt-10 hover:bg-white hover:bg-opacity-[0.05] cursor-pointer m-auto flex justify-center items-center border border-slate-800 rounded-full"> on:click={backToTop}
class="w-32 py-1.5 mt-10 hover:bg-white hover:bg-opacity-[0.05] cursor-pointer m-auto flex justify-center items-center border border-slate-800 rounded-full"
>
Back to top Back to top
</label> </label>
{:else} {:else}
<h3 class="pl-4 pr-4 pt-5 flex justify-center items-center text-md sm:text-lg text-center text-slate-200"> <h3
No transcript available for {$displayCompanyName} for the Q{displayQuarter} of {displayYear} 🧐. class="pl-4 pr-4 pt-5 flex justify-center items-center text-md sm:text-lg text-center text-slate-200"
>
No transcript available for {$displayCompanyName} for the Q{displayQuarter}
of {displayYear} 🧐.
</h3> </h3>
{/if} {/if}
{:else} {:else}
<div class="flex justify-center items-center h-80"> <div class="flex justify-center items-center h-80">
<div class="relative"> <div class="relative">
<label class="bg-[#09090B] rounded-xl 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"></span> class="bg-[#09090B] rounded-xl 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> </label>
</div> </div>
</div> </div>
{/if} {/if}
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<!--Start Quarter-->
<input type="checkbox" id="quarterModal" class="modal-toggle" />
<dialog id="quarterModal" class="modal modal-bottom sm:modal-middle ">
<label id="quarterModal" for="quarterModal" class="cursor-pointer modal-backdrop bg-[#09090B] bg-opacity-[0.5]"></label>
<div class="modal-box w-full bg-[#09090B] sm:border sm:border-slate-800">
<label for="quarterModal" class="cursor-pointer absolute right-5 top-2 bg-[#09090B] text-[1.8rem] text-white">
</label>
<div class="text-white">
<h3 class="font-medium text-lg sm:text-xl mb-10">
Quarter
</h3>
<div class="flex flex-col items-center w-full max-w-3xl bg-[#09090B]">
<label for="quarterModal" on:click={() => quarter='1'} class="cursor-pointer w-full flex flex-row justify-start items-center mb-5">
<div class="flex flex-row items-center w-full bg-[#303030] p-3 rounded-lg {quarter === '1' ? 'ring-2 ring-[#04E000]' : ''}">
<span class="ml-1 text-white font-medium mr-auto">
Q1
</span>
<div class="rounded-full w-8 h-8 relative border border-[#737373]">
{#if quarter === '1'}
<svg class="w-full h-full rounded-full" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#09090B000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --> <title>ic_fluent_checkmark_circle_48_filled</title> <desc>Created with Sketch.</desc> <g id="🔍-Product-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="ic_fluent_checkmark_circle_48_filled" fill="#04E000" fill-rule="nonzero"> <path d="M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M32.6338835,17.6161165 C32.1782718,17.1605048 31.4584514,17.1301307 30.9676119,17.5249942 L30.8661165,17.6161165 L20.75,27.732233 L17.1338835,24.1161165 C16.6457281,23.6279612 15.8542719,23.6279612 15.3661165,24.1161165 C14.9105048,24.5717282 14.8801307,25.2915486 15.2749942,25.7823881 L15.3661165,25.8838835 L19.8661165,30.3838835 C20.3217282,30.8394952 21.0415486,30.8698693 21.5323881,30.4750058 L21.6338835,30.3838835 L32.6338835,19.3838835 C33.1220388,18.8957281 33.1220388,18.1042719 32.6338835,17.6161165 Z" id="🎨-Color"> </path> </g> </g> </g></svg>
{/if}
</div>
</div>
</label>
<label for="quarterModal" on:click={() => quarter='2'} class="cursor-pointer w-full flex flex-row justify-start items-center mb-5">
<div class="flex flex-row items-center w-full bg-[#303030] p-3 rounded-lg {quarter === '2' ? 'ring-2 ring-[#04E000]' : ''}">
<span class="ml-1 text-white font-medium mr-auto">
Q2
</span>
<div class="rounded-full w-8 h-8 relative border border-[#737373]">
{#if quarter === '2'}
<svg class="w-full h-full rounded-full" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#09090B000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --> <title>ic_fluent_checkmark_circle_48_filled</title> <desc>Created with Sketch.</desc> <g id="🔍-Product-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="ic_fluent_checkmark_circle_48_filled" fill="#04E000" fill-rule="nonzero"> <path d="M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M32.6338835,17.6161165 C32.1782718,17.1605048 31.4584514,17.1301307 30.9676119,17.5249942 L30.8661165,17.6161165 L20.75,27.732233 L17.1338835,24.1161165 C16.6457281,23.6279612 15.8542719,23.6279612 15.3661165,24.1161165 C14.9105048,24.5717282 14.8801307,25.2915486 15.2749942,25.7823881 L15.3661165,25.8838835 L19.8661165,30.3838835 C20.3217282,30.8394952 21.0415486,30.8698693 21.5323881,30.4750058 L21.6338835,30.3838835 L32.6338835,19.3838835 C33.1220388,18.8957281 33.1220388,18.1042719 32.6338835,17.6161165 Z" id="🎨-Color"> </path> </g> </g> </g></svg>
{/if}
</div>
</div>
</label>
<label for="quarterModal" on:click={() => quarter='3'} class="cursor-pointer w-full flex flex-row justify-start items-center mb-5">
<div class="flex flex-row items-center w-full bg-[#303030] p-3 rounded-lg {quarter === '3' ? 'ring-2 ring-[#04E000]' : ''}">
<span class="ml-1 text-white font-medium mr-auto">
Q3
</span>
<div class="rounded-full w-8 h-8 relative border border-[#737373]">
{#if quarter === '3'}
<svg class="w-full h-full rounded-full" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#09090B000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --> <title>ic_fluent_checkmark_circle_48_filled</title> <desc>Created with Sketch.</desc> <g id="🔍-Product-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="ic_fluent_checkmark_circle_48_filled" fill="#04E000" fill-rule="nonzero"> <path d="M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M32.6338835,17.6161165 C32.1782718,17.1605048 31.4584514,17.1301307 30.9676119,17.5249942 L30.8661165,17.6161165 L20.75,27.732233 L17.1338835,24.1161165 C16.6457281,23.6279612 15.8542719,23.6279612 15.3661165,24.1161165 C14.9105048,24.5717282 14.8801307,25.2915486 15.2749942,25.7823881 L15.3661165,25.8838835 L19.8661165,30.3838835 C20.3217282,30.8394952 21.0415486,30.8698693 21.5323881,30.4750058 L21.6338835,30.3838835 L32.6338835,19.3838835 C33.1220388,18.8957281 33.1220388,18.1042719 32.6338835,17.6161165 Z" id="🎨-Color"> </path> </g> </g> </g></svg>
{/if}
</div>
</div>
</label>
<label for="quarterModal" on:click={() => quarter='4'} class="cursor-pointer w-full flex flex-row justify-start items-center mb-5">
<div class="flex flex-row items-center w-full bg-[#303030] p-3 rounded-lg {quarter === '4' ? 'ring-2 ring-[#04E000]' : ''}">
<span class="ml-1 text-white font-medium mr-auto">
Q4
</span>
<div class="rounded-full w-8 h-8 relative border border-[#737373]">
{#if quarter === '4'}
<svg class="w-full h-full rounded-full" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#09090B000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --> <title>ic_fluent_checkmark_circle_48_filled</title> <desc>Created with Sketch.</desc> <g id="🔍-Product-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="ic_fluent_checkmark_circle_48_filled" fill="#04E000" fill-rule="nonzero"> <path d="M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M32.6338835,17.6161165 C32.1782718,17.1605048 31.4584514,17.1301307 30.9676119,17.5249942 L30.8661165,17.6161165 L20.75,27.732233 L17.1338835,24.1161165 C16.6457281,23.6279612 15.8542719,23.6279612 15.3661165,24.1161165 C14.9105048,24.5717282 14.8801307,25.2915486 15.2749942,25.7823881 L15.3661165,25.8838835 L19.8661165,30.3838835 C20.3217282,30.8394952 21.0415486,30.8698693 21.5323881,30.4750058 L21.6338835,30.3838835 L32.6338835,19.3838835 C33.1220388,18.8957281 33.1220388,18.1042719 32.6338835,17.6161165 Z" id="🎨-Color"> </path> </g> </g> </g></svg>
{/if}
</div>
</div>
</label>
</div>
</div>
</div>
</dialog>
<!--End Quarter-->
<!--Start Quarter-->
<input type="checkbox" id="yearModal" class="modal-toggle" />
<dialog id="yearModal" class="modal modal-bottom sm:modal-middle ">
<label id="yearModal" for="yearModal" class="cursor-pointer modal-backdrop bg-[#09090B] bg-opacity-[0.5]"></label>
<div class="modal-box w-full bg-[#09090B] sm:border sm:border-slate-800">
<label for="yearModal" class="cursor-pointer absolute right-5 top-2 bg-[#09090B] text-[1.8rem] text-white">
</label>
<div class="text-white">
<h3 class="font-medium text-lg sm:text-xl mb-10">
Year
</h3>
<div class="flex flex-col items-center w-full max-w-3xl bg-[#09090B]">
<label for="yearModal" on:click={() => year='2024'} class="cursor-pointer w-full flex flex-row justify-start items-center mb-5">
<div class="flex flex-row items-center w-full bg-[#303030] p-3 rounded-lg {year === '1' ? 'ring-2 ring-[#04E000]' : ''}">
<span class="ml-1 text-white font-medium mr-auto">
2024
</span>
<div class="rounded-full w-8 h-8 relative border border-[#737373]">
{#if year === '2024'}
<svg class="w-full h-full rounded-full" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#09090B000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --> <title>ic_fluent_checkmark_circle_48_filled</title> <desc>Created with Sketch.</desc> <g id="🔍-Product-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="ic_fluent_checkmark_circle_48_filled" fill="#04E000" fill-rule="nonzero"> <path d="M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M32.6338835,17.6161165 C32.1782718,17.1605048 31.4584514,17.1301307 30.9676119,17.5249942 L30.8661165,17.6161165 L20.75,27.732233 L17.1338835,24.1161165 C16.6457281,23.6279612 15.8542719,23.6279612 15.3661165,24.1161165 C14.9105048,24.5717282 14.8801307,25.2915486 15.2749942,25.7823881 L15.3661165,25.8838835 L19.8661165,30.3838835 C20.3217282,30.8394952 21.0415486,30.8698693 21.5323881,30.4750058 L21.6338835,30.3838835 L32.6338835,19.3838835 C33.1220388,18.8957281 33.1220388,18.1042719 32.6338835,17.6161165 Z" id="🎨-Color"> </path> </g> </g> </g></svg>
{/if}
</div>
</div>
</label>
<label for="yearModal" on:click={() => year='2023'} class="cursor-pointer w-full flex flex-row justify-start items-center mb-5">
<div class="flex flex-row items-center w-full bg-[#303030] p-3 rounded-lg {year === '2' ? 'ring-2 ring-[#04E000]' : ''}">
<span class="ml-1 text-white font-medium mr-auto">
2023
</span>
<div class="rounded-full w-8 h-8 relative border border-[#737373]">
{#if year === '2023'}
<svg class="w-full h-full rounded-full" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#09090B000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --> <title>ic_fluent_checkmark_circle_48_filled</title> <desc>Created with Sketch.</desc> <g id="🔍-Product-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="ic_fluent_checkmark_circle_48_filled" fill="#04E000" fill-rule="nonzero"> <path d="M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M32.6338835,17.6161165 C32.1782718,17.1605048 31.4584514,17.1301307 30.9676119,17.5249942 L30.8661165,17.6161165 L20.75,27.732233 L17.1338835,24.1161165 C16.6457281,23.6279612 15.8542719,23.6279612 15.3661165,24.1161165 C14.9105048,24.5717282 14.8801307,25.2915486 15.2749942,25.7823881 L15.3661165,25.8838835 L19.8661165,30.3838835 C20.3217282,30.8394952 21.0415486,30.8698693 21.5323881,30.4750058 L21.6338835,30.3838835 L32.6338835,19.3838835 C33.1220388,18.8957281 33.1220388,18.1042719 32.6338835,17.6161165 Z" id="🎨-Color"> </path> </g> </g> </g></svg>
{/if}
</div>
</div>
</label>
<label for="yearModal" on:click={() => year='2022'} class="cursor-pointer w-full flex flex-row justify-start items-center mb-5">
<div class="flex flex-row items-center w-full bg-[#303030] p-3 rounded-lg {year === '3' ? 'ring-2 ring-[#04E000]' : ''}">
<span class="ml-1 text-white font-medium mr-auto">
2022
</span>
<div class="rounded-full w-8 h-8 relative border border-[#737373]">
{#if year === '2022'}
<svg class="w-full h-full rounded-full" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#09090B000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --> <title>ic_fluent_checkmark_circle_48_filled</title> <desc>Created with Sketch.</desc> <g id="🔍-Product-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="ic_fluent_checkmark_circle_48_filled" fill="#04E000" fill-rule="nonzero"> <path d="M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M32.6338835,17.6161165 C32.1782718,17.1605048 31.4584514,17.1301307 30.9676119,17.5249942 L30.8661165,17.6161165 L20.75,27.732233 L17.1338835,24.1161165 C16.6457281,23.6279612 15.8542719,23.6279612 15.3661165,24.1161165 C14.9105048,24.5717282 14.8801307,25.2915486 15.2749942,25.7823881 L15.3661165,25.8838835 L19.8661165,30.3838835 C20.3217282,30.8394952 21.0415486,30.8698693 21.5323881,30.4750058 L21.6338835,30.3838835 L32.6338835,19.3838835 C33.1220388,18.8957281 33.1220388,18.1042719 32.6338835,17.6161165 Z" id="🎨-Color"> </path> </g> </g> </g></svg>
{/if}
</div>
</div>
</label>
<label for="yearModal" on:click={() => year='2021'} class="cursor-pointer w-full flex flex-row justify-start items-center mb-5">
<div class="flex flex-row items-center w-full bg-[#303030] p-3 rounded-lg {year === '4' ? 'ring-2 ring-[#04E000]' : ''}">
<span class="ml-1 text-white font-medium mr-auto">
2021
</span>
<div class="rounded-full w-8 h-8 relative border border-[#737373]">
{#if year === '2021'}
<svg class="w-full h-full rounded-full" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#09090B000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --> <title>ic_fluent_checkmark_circle_48_filled</title> <desc>Created with Sketch.</desc> <g id="🔍-Product-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="ic_fluent_checkmark_circle_48_filled" fill="#04E000" fill-rule="nonzero"> <path d="M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M32.6338835,17.6161165 C32.1782718,17.1605048 31.4584514,17.1301307 30.9676119,17.5249942 L30.8661165,17.6161165 L20.75,27.732233 L17.1338835,24.1161165 C16.6457281,23.6279612 15.8542719,23.6279612 15.3661165,24.1161165 C14.9105048,24.5717282 14.8801307,25.2915486 15.2749942,25.7823881 L15.3661165,25.8838835 L19.8661165,30.3838835 C20.3217282,30.8394952 21.0415486,30.8698693 21.5323881,30.4750058 L21.6338835,30.3838835 L32.6338835,19.3838835 C33.1220388,18.8957281 33.1220388,18.1042719 32.6338835,17.6161165 Z" id="🎨-Color"> </path> </g> </g> </g></svg>
{/if}
</div>
</div>
</label>
</div>
</div>
</div>
</dialog>
<!--End Quarter-->

View File

@ -134,7 +134,7 @@ updateYearRange()
Total Valuation Total Valuation
</h2> </h2>
<p <p
class="mb-4 px-0.5 text-base leading-relaxed text-white xs:text-[1.05rem] lg:leading-normal" class="mb-4 px-0.5 text-white xs:text-[1.05rem] lg:leading-normal"
> >
Tesla has a market cap or net worth of $832.14 billion. The Tesla has a market cap or net worth of $832.14 billion. The
enterprise value is $812.05 billion. enterprise value is $812.05 billion.
@ -169,7 +169,7 @@ updateYearRange()
Important Dates Important Dates
</h2> </h2>
<p <p
class="mb-4 px-0.5 text-base leading-relaxed text-white dark:text-dark-200 xs:text-[1.05rem] lg:leading-normal" class="mb-4 px-0.5 text-white xs:text-[1.05rem] lg:leading-normal"
> >
The last earnings date was Wednesday, October 23, 2024, after The last earnings date was Wednesday, October 23, 2024, after
market close. market close.
@ -201,7 +201,7 @@ updateYearRange()
Share Statistics Share Statistics
</h2> </h2>
<p <p
class="mb-4 px-0.5 text-base leading-relaxed text-white dark:text-dark-200 xs:text-[1.05rem] lg:leading-normal" class="mb-4 px-0.5 text-white xs:text-[1.05rem] lg:leading-normal"
> >
Tesla has 3.19 billion shares outstanding. The number of shares Tesla has 3.19 billion shares outstanding. The number of shares
has increased by 0.31% in one year. has increased by 0.31% in one year.
@ -265,7 +265,7 @@ updateYearRange()
Valuation Ratios Valuation Ratios
</h2> </h2>
<p <p
class="mb-4 px-0.5 text-base leading-relaxed text-white dark:text-dark-200 xs:text-[1.05rem] lg:leading-normal" class="mb-4 px-0.5 text-white xs:text-[1.05rem] lg:leading-normal"
> >
The trailing PE ratio is 71.41 and the forward PE ratio is The trailing PE ratio is 71.41 and the forward PE ratio is
86.99. Tesla's PEG ratio is 5.94. 86.99. Tesla's PEG ratio is 5.94.
@ -344,7 +344,7 @@ updateYearRange()
Enterprise Valuation Enterprise Valuation
</h2> </h2>
<p <p
class="mb-4 px-0.5 text-base leading-relaxed text-white dark:text-dark-200 xs:text-[1.05rem] lg:leading-normal" class="mb-4 px-0.5 text-white xs:text-[1.05rem] lg:leading-normal"
> >
The stock's EV/EBITDA ratio is 61.31, with an EV/FCF ratio of The stock's EV/EBITDA ratio is 61.31, with an EV/FCF ratio of
224.95. 224.95.
@ -400,7 +400,7 @@ updateYearRange()
Financial Position Financial Position
</h2> </h2>
<p <p
class="mb-4 px-0.5 text-base leading-relaxed text-white dark:text-dark-200 xs:text-[1.05rem] lg:leading-normal" class="mb-4 px-0.5 text-white xs:text-[1.05rem] lg:leading-normal"
> >
The company has a current ratio of 1.84, with a Debt / Equity The company has a current ratio of 1.84, with a Debt / Equity
ratio of 0.18. ratio of 0.18.
@ -464,7 +464,7 @@ updateYearRange()
Financial Efficiency Financial Efficiency
</h2> </h2>
<p <p
class="mb-4 px-0.5 text-base leading-relaxed text-white dark:text-dark-200 xs:text-[1.05rem] lg:leading-normal" class="mb-4 px-0.5 text-white xs:text-[1.05rem] lg:leading-normal"
> >
Return on equity (ROE) is 20.39% and return on invested capital Return on equity (ROE) is 20.39% and return on invested capital
(ROIC) is 6.96%. (ROIC) is 6.96%.
@ -573,7 +573,7 @@ updateYearRange()
Stock Price Statistics Stock Price Statistics
</h2> </h2>
<p <p
class="mb-4 px-0.5 text-base leading-relaxed text-white dark:text-dark-200 xs:text-[1.05rem] lg:leading-normal" class="mb-4 px-0.5 text-white xs:text-[1.05rem] lg:leading-normal"
> >
The stock price has increased by +22.82% in the last 52 weeks. The stock price has increased by +22.82% in the last 52 weeks.
The beta is 2.30, so Tesla's price volatility has been higher The beta is 2.30, so Tesla's price volatility has been higher
@ -638,7 +638,7 @@ updateYearRange()
Short Selling Information Short Selling Information
</h2> </h2>
<p <p
class="mb-4 px-0.5 text-base leading-relaxed text-white dark:text-dark-200 xs:text-[1.05rem] lg:leading-normal" class="mb-4 px-0.5 text-white xs:text-[1.05rem] lg:leading-normal"
> >
The latest short interest is 74.33 million, so 2.33% of the The latest short interest is 74.33 million, so 2.33% of the
outstanding shares have been sold short. outstanding shares have been sold short.
@ -694,7 +694,7 @@ updateYearRange()
Income Statement Income Statement
</h2> </h2>
<p <p
class="mb-4 px-0.5 text-base leading-relaxed text-white dark:text-dark-200 xs:text-[1.05rem] lg:leading-normal" class="mb-4 px-0.5 text-white xs:text-[1.05rem] lg:leading-normal"
> >
In the last 12 months, Tesla had revenue of $97.15 billion and In the last 12 months, Tesla had revenue of $97.15 billion and
earned $12.74 billion in profits. Earnings per share was $3.65. earned $12.74 billion in profits. Earnings per share was $3.65.
@ -783,7 +783,7 @@ updateYearRange()
Balance Sheet Balance Sheet
</h2> </h2>
<p <p
class="mb-4 px-0.5 text-base leading-relaxed text-white dark:text-dark-200 xs:text-[1.05rem] lg:leading-normal" class="mb-4 px-0.5 text-white xs:text-[1.05rem] lg:leading-normal"
> >
The company has $33.65 billion in cash and $12.78 billion in The company has $33.65 billion in cash and $12.78 billion in
debt, giving a net cash position of $20.87 billion or $6.53 per debt, giving a net cash position of $20.87 billion or $6.53 per
@ -862,7 +862,7 @@ updateYearRange()
Cash Flow Cash Flow
</h2> </h2>
<p <p
class="mb-4 px-0.5 text-base leading-relaxed text-white dark:text-dark-200 xs:text-[1.05rem] lg:leading-normal" class="mb-4 px-0.5 text-white xs:text-[1.05rem] lg:leading-normal"
> >
In the last 12 months, operating cash flow was $14.48 billion In the last 12 months, operating cash flow was $14.48 billion
and capital expenditures -$10.87 billion, giving a free cash and capital expenditures -$10.87 billion, giving a free cash
@ -915,7 +915,7 @@ updateYearRange()
<div> <div>
<h2 class="mb-2 px-0.5 text-xl font-bold text-white">Margins</h2> <h2 class="mb-2 px-0.5 text-xl font-bold text-white">Margins</h2>
<p <p
class="mb-4 px-0.5 text-base leading-relaxed text-white dark:text-dark-200 xs:text-[1.05rem] lg:leading-normal" class="mb-4 px-0.5 text-white xs:text-[1.05rem] lg:leading-normal"
> >
Gross margin is 18.23%, with operating and profit margins of Gross margin is 18.23%, with operating and profit margins of
8.38% and 13.07%. 8.38% and 13.07%.