358 lines
12 KiB
Svelte
358 lines
12 KiB
Svelte
<script lang="ts">
|
|
import {
|
|
fomcImpactComponent,
|
|
displayCompanyName,
|
|
stockTicker,
|
|
assetType,
|
|
etfTicker,
|
|
getCache,
|
|
setCache,
|
|
} from "$lib/store";
|
|
import InfoModal from "$lib/components/InfoModal.svelte";
|
|
import { Chart } from "svelte-echarts";
|
|
import { init, use } from "echarts/core";
|
|
import { LineChart } from "echarts/charts";
|
|
import {
|
|
GridComponent,
|
|
MarkLineComponent,
|
|
TooltipComponent,
|
|
} from "echarts/components";
|
|
import { CanvasRenderer } from "echarts/renderers";
|
|
|
|
use([
|
|
LineChart,
|
|
GridComponent,
|
|
MarkLineComponent,
|
|
TooltipComponent,
|
|
CanvasRenderer,
|
|
]);
|
|
|
|
let isLoaded = false;
|
|
let rawData = [];
|
|
let tableList = [];
|
|
let optionsData;
|
|
let showFullStats = false;
|
|
|
|
function getPlotOptions() {
|
|
const xAxisData = rawData?.history.map((item) => item.date);
|
|
|
|
// Extract yAxis data from history (close prices)
|
|
const seriesData = rawData?.history?.map((item) => [item.date, item.close]);
|
|
|
|
// Create markLine data for FOMC dates based on xAxis index
|
|
|
|
const markLineData = rawData.fomcData
|
|
?.map((item) => {
|
|
const index = xAxisData?.indexOf(item?.date);
|
|
if (index !== -1) {
|
|
return { xAxis: index }; // Mark the index in xAxis where FOMC date exists
|
|
}
|
|
return null;
|
|
})
|
|
?.filter((item) => item !== null); // Filter out null values in case FOMC date is not in history
|
|
|
|
tableList = rawData.fomcData?.sort(
|
|
(a, b) => new Date(b?.date) - new Date(a?.date),
|
|
);
|
|
|
|
const option = {
|
|
silent: true,
|
|
animation: false,
|
|
tooltip: {
|
|
trigger: "axis",
|
|
hideDelay: 100,
|
|
},
|
|
grid: {
|
|
left: "3%",
|
|
right: "3%",
|
|
bottom: "2%",
|
|
top: "5%",
|
|
containLabel: true,
|
|
},
|
|
xAxis: {
|
|
type: "category",
|
|
boundaryGap: false,
|
|
axisLabel: {
|
|
color: "#fff",
|
|
},
|
|
data: xAxisData,
|
|
},
|
|
yAxis: [
|
|
{
|
|
type: "value",
|
|
splitLine: {
|
|
show: false,
|
|
},
|
|
axisLabel: {
|
|
show: false,
|
|
},
|
|
},
|
|
],
|
|
series: [
|
|
{
|
|
name: "Stock Price",
|
|
type: "line",
|
|
symbol: "none",
|
|
lineStyle: {
|
|
color: "#fff",
|
|
},
|
|
markLine: {
|
|
symbol: ["none", "none"],
|
|
label: { show: false },
|
|
lineStyle: {
|
|
color: "orange", // Set the color to orange
|
|
},
|
|
data: markLineData, // Use dynamically created markLine data for FOMC dates
|
|
},
|
|
data: seriesData, // Populate series with [date, close] data
|
|
},
|
|
],
|
|
};
|
|
return option;
|
|
}
|
|
|
|
const getFOMCImpact = async (ticker: string) => {
|
|
// Get cached data for the specific tickerID
|
|
const cachedData = getCache(ticker, "getFOMCImpact");
|
|
if (cachedData) {
|
|
rawData = cachedData;
|
|
} else {
|
|
const postData = { ticker: ticker, path: "fomc-impact" };
|
|
const response = await fetch("/api/ticker-data", {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify(postData),
|
|
});
|
|
|
|
rawData = await response?.json();
|
|
// Cache the data for this specific tickerID with a specific name 'getFOMCImpact'
|
|
setCache(ticker, rawData, "getFOMCImpact");
|
|
}
|
|
|
|
if (Object?.keys(rawData)?.length !== 0) {
|
|
$fomcImpactComponent = true;
|
|
} else {
|
|
$fomcImpactComponent = false;
|
|
}
|
|
};
|
|
|
|
$: {
|
|
if (
|
|
$assetType === "stock"
|
|
? $stockTicker
|
|
: $etfTicker && typeof window !== "undefined"
|
|
) {
|
|
isLoaded = false;
|
|
showFullStats = false;
|
|
tableList = [];
|
|
const asyncFunctions = [
|
|
getFOMCImpact($assetType === "stock" ? $stockTicker : $etfTicker),
|
|
];
|
|
Promise.all(asyncFunctions)
|
|
.then(() => {
|
|
if (Object?.keys(rawData)?.length !== 0) {
|
|
optionsData = getPlotOptions();
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
console.error("An error occurred:", error);
|
|
});
|
|
isLoaded = true;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<section class="overflow-hidden text-white h-full">
|
|
<main class="overflow-hidden">
|
|
<div class="flex flex-row items-center">
|
|
<label
|
|
for="fomcInfo"
|
|
class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-3xl font-bold"
|
|
>
|
|
FOMC Impact
|
|
</label>
|
|
<InfoModal
|
|
title={"Federal Open Market Committee Meeting"}
|
|
content={"FOMC meetings influence stock prices by setting interest rates and signaling monetary policy, affecting investor sentiment and market liquidity."}
|
|
id={"fomcInfo"}
|
|
/>
|
|
</div>
|
|
|
|
{#if isLoaded}
|
|
{#if Object?.keys(rawData)?.length !== 0}
|
|
<div class="mt-2 pb-8 sm:pb-2 rounded-lg bg-[#09090B] sm:bg-[#09090B]">
|
|
<div class="w-full flex flex-col items-start">
|
|
<div class="text-white text-[1rem] mt-1 sm:mt-3 mb-1 w-full">
|
|
Examine how sensitive {$displayCompanyName}'s stock price is to
|
|
the decisions made during FOMC meetings. The vertical line marks
|
|
the interest rate decision.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="app w-full h-[300px]">
|
|
<Chart {init} options={optionsData} class="chart" />
|
|
</div>
|
|
|
|
<h2
|
|
class="mt-10 mr-1 flex flex-row items-center text-white text-2xl font-bold mb-3"
|
|
>
|
|
Latest FED Interest Rate
|
|
</h2>
|
|
|
|
<div class="w-full text-white text-[1rem] mt-6">
|
|
The latest list of previous, forecasted, and actual interest rate
|
|
decisions made by the FED.
|
|
<br />
|
|
The "% Price Change" column reflects the performance for each interval
|
|
leading up to the next FOMC meeting.
|
|
</div>
|
|
|
|
<div
|
|
class="flex justify-start items-center w-full m-auto mt-6 overflow-x-scroll"
|
|
>
|
|
<table class="table table-sm table-compact w-full">
|
|
<thead>
|
|
<tr class="border-b border-[#27272A]">
|
|
<th
|
|
class="text-white font-semibold text-sm sm:text-[1rem] text-start bg-[#09090B]"
|
|
>Date</th
|
|
>
|
|
<th
|
|
class="text-white font-semibold text-sm sm:text-[1rem] text-end bg-[#09090B]"
|
|
>Previous</th
|
|
>
|
|
<th
|
|
class="text-white font-semibold text-sm sm:text-[1rem] text-end bg-[#09090B]"
|
|
>Forecast</th
|
|
>
|
|
<th
|
|
class="text-white font-semibold text-sm sm:text-[1rem] text-end bg-[#09090B]"
|
|
>Actual</th
|
|
>
|
|
<th
|
|
class="text-white font-semibold text-sm sm:text-[1rem] text-end bg-[#09090B]"
|
|
>% Price Change</th
|
|
>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{#each showFullStats ? tableList?.slice(0, 10) : tableList?.slice(0, 3) as item, index}
|
|
<tr
|
|
class="border-y border-gray-800 odd:bg-[#27272A] {index ===
|
|
2 &&
|
|
!showFullStats &&
|
|
tableList?.length > 3
|
|
? 'opacity-[0.5]'
|
|
: ''} sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-[#09090B] border-b-[#09090B]"
|
|
>
|
|
<td
|
|
class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap"
|
|
>
|
|
{new Date(item?.date ?? null)?.toLocaleString("en-US", {
|
|
month: "short",
|
|
day: "numeric",
|
|
year: "numeric",
|
|
})}
|
|
</td>
|
|
|
|
<td
|
|
class="text-white text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap"
|
|
>
|
|
{item?.previous}%
|
|
</td>
|
|
|
|
<td
|
|
class="text-white text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap"
|
|
>
|
|
{item?.estimate}%
|
|
</td>
|
|
|
|
<td
|
|
class="text-white text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap"
|
|
>
|
|
{item?.actual}%
|
|
</td>
|
|
|
|
<td
|
|
class="text-white font-normal text-end text-sm sm:text-[1rem] whitespace-nowrap"
|
|
>
|
|
{#if item?.changePercentage >= 0}
|
|
<span class="text-[#00FC50]"
|
|
>+{item?.changePercentage?.toFixed(2)}%</span
|
|
>
|
|
{:else}
|
|
<span class="text-[#FF2F1F]"
|
|
>{item?.changePercentage?.toFixed(2)}%
|
|
</span>
|
|
{/if}
|
|
</td>
|
|
</tr>
|
|
{/each}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<label
|
|
on:click={() => (showFullStats = !showFullStats)}
|
|
class="cursor-pointer flex justify-center items-center mt-5"
|
|
>
|
|
<svg
|
|
class="w-10 h-10 transform {showFullStats ? 'rotate-180' : ''} "
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24"
|
|
><path
|
|
fill="#2A323C"
|
|
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2zm0 13.5L7.5 11l1.42-1.41L12 12.67l3.08-3.08L16.5 11L12 15.5z"
|
|
/></svg
|
|
>
|
|
</label>
|
|
</div>
|
|
{:else}
|
|
<h2
|
|
class="mt-10 mb-5 flex justify-center items-center text-3xl font-bold text-slate-700 m-auto"
|
|
>
|
|
No data available
|
|
<svg
|
|
class="w-10 sm:w-12 inline-block"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24"
|
|
><path
|
|
fill="#334155"
|
|
d="M18.68 12.32a4.49 4.49 0 0 0-6.36.01a4.49 4.49 0 0 0 0 6.36a4.508 4.508 0 0 0 5.57.63L21 22.39L22.39 21l-3.09-3.11c1.13-1.77.87-4.09-.62-5.57m-1.41 4.95c-.98.98-2.56.97-3.54 0c-.97-.98-.97-2.56.01-3.54c.97-.97 2.55-.97 3.53 0c.97.98.97 2.56 0 3.54M10.9 20.1a6.527 6.527 0 0 1-1.48-2.32C6.27 17.25 4 15.76 4 14v3c0 2.21 3.58 4 8 4c-.4-.26-.77-.56-1.1-.9M4 9v3c0 1.68 2.07 3.12 5 3.7v-.2c0-.93.2-1.85.58-2.69C6.34 12.3 4 10.79 4 9m8-6C7.58 3 4 4.79 4 7c0 2 3 3.68 6.85 4h.05c1.2-1.26 2.86-2 4.6-2c.91 0 1.81.19 2.64.56A3.215 3.215 0 0 0 20 7c0-2.21-3.58-4-8-4Z"
|
|
/></svg
|
|
>
|
|
</h2>
|
|
{/if}
|
|
{:else}
|
|
<div class="flex justify-center items-center h-80">
|
|
<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"
|
|
>
|
|
<span class="loading loading-spinner loading-md"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</main>
|
|
</section>
|
|
|
|
<style>
|
|
.app {
|
|
height: 300px;
|
|
max-width: 100%; /* Ensure chart width doesn't exceed the container */
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.app {
|
|
height: 230px;
|
|
}
|
|
}
|
|
|
|
.chart {
|
|
width: 100%;
|
|
}
|
|
</style>
|