AmineTMIRI/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

bugfixing

Browse Source
This commit is contained in:
MuslemRahimi 2024-12-02 13:45:20 +01:00
parent 4bef92984f
commit cbe718ab6b
6 changed files with 674 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

544
src/lib/components/RatingsChart.svelte Normal file
View File

@ -0,0 +1,544 @@
<script lang="ts">
import { numberOfUnreadNotification } from "$lib/store";
import ArrowLogo from "lucide-svelte/icons/move-up-right";
import { Chart } from "svelte-echarts";
import Lazy from "$lib/components/Lazy.svelte";
import { init, use } from "echarts/core";
import { LineChart, BarChart } from "echarts/charts";
import { GridComponent, TooltipComponent } from "echarts/components";
import { CanvasRenderer } from "echarts/renderers";
import { onMount } from "svelte";
import { goto } from "$app/navigation";
use([LineChart, BarChart, GridComponent, TooltipComponent, CanvasRenderer]);
export let data;
let isLoaded = false;
let rawData;
let tableList = [];
let optionsData;
let timePeriod = "threeYears";
const monthNames = [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec",
];
async function changeStatement(event) {
timePeriod = event.target.value;
optionsData = await plotData();
}
// Function to plot data based on a specified time period
async function plotData() {
// Get the filtered data based on the selected time period
const { dates, seriesData } = filterDataByTimePeriod(rawData, timePeriod);
// Convert seriesData to the format required by the series property
let series = Object?.keys(seriesData).map((key) => {
return {
name: treasuryLabel[key],
data: seriesData[key],
type: "line",
smooth: true,
showSymbol: false,
};
});
const options = {
animation: false,
grid: {
left: "2%",
right: "2%",
bottom: "2%",
top: "10%",
containLabel: true,
},
xAxis: {
axisLabel: {
color: "#fff",
formatter: function (value) {
// Assuming dates are in the format 'yyyy-mm-dd'
// Extract the month and day from the date string and convert the month to its abbreviated name
const dateParts = value.split("-");
const year = dateParts[0].substring(2); // Extracting the last two digits of the year
const monthIndex = parseInt(dateParts[1]) - 1; // Months are zero-indexed in JavaScript Date objects
return `${monthNames[monthIndex]} '${year}`;
},
},
data: dates,
type: "category",
},
yAxis: [
{
type: "value",
splitLine: {
show: false, // Disable x-axis grid lines
},
axisLabel: {
show: false,
},
},
{
type: "value",
splitLine: {
show: false, // Disable x-axis grid lines
},
},
],
series: series, // Use the dynamically created series array
tooltip: {
trigger: "axis",
hideDelay: 100,
},
};
return options;
}
onMount(async () => {
rawData = data?.getEconomicIndicator?.treasury ?? {};
optionsData = await plotData();
isLoaded = true;
});
</script>
<section
class="w-full max-w-screen-2xl overflow-hidden min-h-screen pb-20 pt-5 px-4 lg:px-3"
>
<div class="text-sm sm:text-[1rem] breadcrumbs">
<ul>
<li><a href="/" class="text-gray-300">Home</a></li>
<li class="text-gray-300">US Economic Indicator</li>
</ul>
</div>
<div class="w-full overflow-hidden m-auto mt-5">
<div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden">
<div
class="relative flex justify-center items-start overflow-hidden w-full"
>
<main class="w-full lg:w-3/4 lg:pr-5">
<div class="mb-6 border-b-[2px]">
<h1 class="mb-1 text-white text-2xl sm:text-3xl font-bold">
Economic Indicators
</h1>
</div>
{#if isLoaded}
<div
class="mb-8 w-full text-start sm:flex sm:flex-row sm:items-center m-auto text-gray-100 border border-gray-800 sm:rounded-md h-auto p-5"
>
<svg
class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256"
><path
fill="#fff"
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
>
Real-time and historical data on key economic indicators like GDP,
unemployment, and inflation, essential for tracking economic performance
and growth trends.
</div>
<div class="w-full m-auto mt-10">
<h2 class="text-xl sm:text-2xl text-gray-200 font-bold">
Federal Fund Rate
</h2>
<div class="text-[1rem] text-white mt-2 mb-2">
The federal funds rate is the interest rate at which banks lend
to each other overnight to maintain reserve balances. It's a
critical tool for U.S. monetary policy, influencing borrowing
costs for consumers and businesses, economic growth, and
inflation. Changes in the federal funds rate affect everything
from loan interest rates to stock market performance, making it
a key indicator of economic health.
</div>
<Lazy>
<div class="app w-full">
<Chart {init} options={optionsFedFundRate} class="chart" />
</div>
</Lazy>
<h2
class="text-xl sm:text-2xl text-gray-200 font-bold mt-20 sm:mt-10"
>
Consumer Price Index (CPI)
</h2>
<div class="text-[1rem] text-white mt-2 mb-2">
The CPI measures the average change in prices for a typical
basket of goods. It's key for tracking inflation, affecting
interest rates, wages, and business decisions. Rising CPI
indicates inflation, impacting purchasing power and the overall
economy.
</div>
<Lazy>
<div class="app w-full">
<Chart {init} options={optionsCPI} class="chart" />
</div>
</Lazy>
<h2
class="text-xl sm:text-2xl text-gray-200 font-bold mt-20 sm:mt-10"
>
Gross Domestic Product (GDP)
</h2>
<div class="text-[1rem] text-white mt-2 mb-2">
The GDP measures a country's economic performance, representing
the total value of all goods and services produced within a
specific period. It's a key indicator of economic health, used
to compare the economic output of different nations and track
growth or decline over time.
</div>
<Lazy>
<div class="app w-full">
<Chart {init} options={optionsGDP} class="chart" />
</div>
</Lazy>
<h2
class="text-xl sm:text-2xl text-gray-200 font-bold mt-20 sm:mt-10"
>
Unemployment Rate vs Inflation Rate
</h2>
<div class="text-[1rem] text-white mt-2 mb-2">
The unemployment rate measures the jobless percentage in the
labor force, impacting spending and growth. Low unemployment
boosts wages and activity, while high unemployment slows them.
The inflation rate tracks price increases, with moderate
inflation (~2%) being healthy. These rates are often inversely
related and crucial for economic stability, influencing
spending, savings, and investment.
</div>
<Lazy>
<div class="app w-full">
<Chart {init} options={optionsInflation} class="chart" />
</div>
</Lazy>
<h2
class="text-xl sm:text-2xl text-gray-200 font-bold mt-20 sm:mt-10"
>
Treasury Rates
</h2>
<div class="text-[1rem] text-white mt-2 mb-2">
Treasury rates are the interest rates that the US government
pays on its debt obligations, and they are a key benchmark for
interest rates across the economy.
</div>
<div class="w-full text-white">
<div class="relative flex justify-end">
<select
class="w-24 select select-bordered select-sm p-0 pl-5 bg-[#313131]"
on:change={changeStatement}
>
<option disabled>Choose a Time Period</option>
<option value="oneMonth">1M</option>
<option value="sixMonths">6M</option>
<option value="oneYear">1Y</option>
<option value="threeYears" selected>3Y</option>
<option value="fiveYears">5Y</option>
<option value="max">Max</option>
</select>
</div>
</div>
<Lazy>
<div class="app w-full">
<Chart {init} options={optionsData} class="chart" />
</div>
</Lazy>
<div
class="mt-10 mb-4 bg-[#313131] w-fit relative flex flex-wrap items-center justify-center rounded-md p-1 flex justify-center sm:justify-end items-center ml-auto"
>
{#each tabs as item, i}
<button
on:click={() => changeTablePeriod(i)}
class="group relative z-[1] rounded-full px-6 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 {activeIdx ===
i
? 'text-black'
: 'text-white'}"
>
{item.title}
<svg
class="{data?.user?.tier !== 'Pro' && i === 1
? ''
: 'hidden'} 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="#fff"
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>
{/each}
</div>
<div class="w-full overflow-x-scroll">
<table
class="table table-sm table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4"
>
<thead>
<tr class="border border-gray-600">
<th
class="text-white font-semibold text-start text-sm sm:text-[1rem]"
>Date</th
>
<th
class="text-white font-semibold text-end text-sm sm:text-[1rem]"
>1-Month</th
>
<th
class="text-white font-semibold text-end text-sm sm:text-[1rem]"
>2-Month</th
>
<th
class="text-white font-semibold text-end text-sm sm:text-[1rem]"
>3-Month</th
>
<th
class="text-white font-semibold text-end text-sm sm:text-[1rem]"
>6-Month</th
>
<th
class="text-white font-semibold text-end text-sm sm:text-[1rem]"
>1-Year</th
>
<th
class="text-white font-semibold text-end text-sm sm:text-[1rem]"
>2-Year</th
>
<th
class="text-white font-semibold text-end text-sm sm:text-[1rem]"
>3-Year</th
>
<th
class="text-white font-semibold text-end text-sm sm:text-[1rem]"
>5-Year</th
>
<th
class="text-white font-semibold text-end text-sm sm:text-[1rem]"
>7-Year</th
>
<th
class="text-white font-semibold text-end text-sm sm:text-[1rem]"
>10-Year</th
>
<th
class="text-white font-semibold text-end text-sm sm:text-[1rem]"
>20-Year</th
>
<th
class="text-white font-semibold text-end text-sm sm:text-[1rem]"
>30-Year</th
>
</tr>
</thead>
<tbody>
{#each tableList as item}
<!-- row -->
<tr
class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer"
>
<td
class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
>
{item?.date}
</td>
<td
class="text-white font-medium text-sm sm:text-[1rem] text-end whitespace-nowrap border-b-[#09090B]"
>
{item?.month1}
</td>
<td
class="text-white font-medium text-sm sm:text-[1rem] text-end whitespace-nowrap border-b-[#09090B]"
>
{item?.month2 !== null ? item?.month2 : "-"}
</td>
<td
class="text-white font-medium text-sm sm:text-[1rem] text-end whitespace-nowrap border-b-[#09090B]"
>
{item?.month3}
</td>
<td
class="text-white font-medium text-sm sm:text-[1rem] text-end whitespace-nowrap border-b-[#09090B]"
>
{item?.month6}
</td>
<td
class="text-white font-medium text-sm sm:text-[1rem] text-end whitespace-nowrap border-b-[#09090B]"
>
{item?.year1}
</td>
<td
class="text-white font-medium text-sm sm:text-[1rem] text-end whitespace-nowrap border-b-[#09090B]"
>
{item?.year2}
</td>
<td
class="text-white font-medium text-sm sm:text-[1rem] text-end whitespace-nowrap border-b-[#09090B]"
>
{item?.year3}
</td>
<td
class="text-white font-medium text-sm sm:text-[1rem] text-end whitespace-nowrap border-b-[#09090B]"
>
{item?.year5}
</td>
<td
class="text-white font-medium text-sm sm:text-[1rem] text-end whitespace-nowrap border-b-[#09090B]"
>
{item?.year7}
</td>
<td
class="text-white font-medium text-sm sm:text-[1rem] text-end whitespace-nowrap border-b-[#09090B]"
>
{item?.year10}
</td>
<td
class="text-white font-medium text-sm sm:text-[1rem] text-end whitespace-nowrap border-b-[#09090B]"
>
{item?.year20}
</td>
<td
class="text-white font-medium text-sm sm:text-[1rem] text-end whitespace-nowrap border-b-[#09090B]"
>
{item?.year30}
</td>
</tr>
{/each}
</tbody>
</table>
</div>
</div>
{: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 text-gray-400"
></span>
</label>
</div>
</div>
{/if}
</main>
<aside class="hidden lg:block relative fixed w-1/4 ml-4">
{#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
<div
class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
>
<a
href="/pricing"
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
>
<div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3">
Pro Subscription
</h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
</div>
<span class="text-white p-3 ml-3 mr-3">
Upgrade now for unlimited access to all data and tools.
</span>
</a>
</div>
{/if}
<div
class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
>
<a
href="/economic-calendar"
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
>
<div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3">
Economic Events
</h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
</div>
<span class="text-white p-3 ml-3 mr-3">
Stay updated on upcoming Economic Events worldwide.
</span>
</a>
</div>
<div
class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
>
<a
href="/earnings-calendar"
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
>
<div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3">
Earnings Calendar
</h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
</div>
<span class="text-white p-3 ml-3 mr-3">
Get the latest Earnings of companies.
</span>
</a>
</div>
</aside>
</div>
</div>
</div>
</section>
<style>
.app {
height: 400px;
width: 100%;
}
@media (max-width: 560px) {
.app {
width: 100%;
height: 300px;
}
}
.chart {
width: 100%;
}
</style>

58
src/routes/analysts/[slug]/+page.svelte
View File

@ -8,11 +8,11 @@
let analystStats = data?.getAnalystStats;
let rawData = data?.getAnalystStats?.ratingsList;
let rawData = processTickerData(data?.getAnalystStats?.ratingsList);
let originalData = [...rawData]; // Unaltered copy of raw data
let stockList = rawData?.slice(0, 50) ?? [];
console.log(rawData);
let analystScore = analystStats?.analystScore;
let rank = analystStats?.rank;
let analystName = analystStats?.analystName;
@ -26,6 +26,34 @@
}).format(analystStats?.numOfAnalysts);
let numOfStocks = analystStats?.numOfStocks;
function processTickerData(data) {
const tickerMap = new Map();
data.forEach((item) => {
const { ticker, date } = item;
if (!ticker) return; // Skip if ticker is not defined
if (!tickerMap.has(ticker)) {
// Add the item and initialize count
tickerMap.set(ticker, { ...item, ratings: 1 });
} else {
const existing = tickerMap.get(ticker);
// Increment the ratings count
existing.ratings += 1;
// Keep the item with the latest date
if (new Date(item.date) > new Date(existing.date)) {
tickerMap.set(ticker, { ...item, ratings: existing.ratings });
}
}
});
// Convert the Map back to an array
return Array.from(tickerMap.values());
}
async function handleScroll() {
const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height
const isBottom = window.innerHeight + window.scrollY >= scrollThreshold;
@ -47,21 +75,25 @@
$: charNumber = $screenWidth < 640 ? 20 : 40;
let columns = [
{ key: "chart", label: "", align: "right" },
{ key: "ticker", label: "Name", align: "left" },
{ key: "rating_current", label: "Action", align: "left" },
{ key: "adjusted_pt_current", label: "Price Target", align: "right" },
{ key: "price", label: "Current", align: "right" },
{ key: "upside", label: "% Upside", align: "right" },
{ key: "ratings", label: "Ratings", align: "right" },
{ key: "date", label: "Updated", align: "right" },
];
let sortOrders = {
chart: { order: "none", type: "string" },
ticker: { order: "none", type: "string" },
rating_current: { order: "none", type: "string" },
adjusted_pt_current: { order: "none", type: "number" },
marketCap: { order: "none", type: "number" },
price: { order: "none", type: "number" },
upside: { order: "none", type: "number" },
ratings: { order: "none", type: "number" },
date: { order: "none", type: "date" },
};
@ -346,6 +378,22 @@
<tr
class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A]"
>
<td
><button class="h-full pl-2 pr-2 align-middle lg:pl-3"
><svg
class="w-5 h-5 text-icon"
viewBox="0 0 20 20"
fill="currentColor"
style="max-width:40px"
><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
></td
>
<td
class="text-sm sm:text-[1rem] text-start whitespace-nowrap"
>
@ -477,6 +525,12 @@
{item?.upside !== null ? item?.upside + "%" : "n/a"}
</td>
<td
class="text-white text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap"
>
{item?.ratings !== null ? item?.ratings : "n/a"}
</td>
<td
class="text-white text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap"
>

19
src/routes/market-mover/afterhours/gainers/+page.svelte
View File

@ -20,4 +20,21 @@
];
</script>
<Table {data} {rawData} {excludedRules} {defaultList} />
{#if rawData?.length > 0}
<Table {data} {rawData} {excludedRules} {defaultList} />
{:else}
<div
class="w-full text-white text-start p-3 sm:p-5 mb-10 mt-3 rounded-md sm:flex sm:flex-row sm:items-center border border-gray-600 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="#fff"
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
>
Currently no afterhours data is available yet!
</div>
{/if}

19
src/routes/market-mover/afterhours/losers/+page.svelte
View File

@ -20,4 +20,21 @@
];
</script>
<Table {data} {rawData} {excludedRules} {defaultList} />
{#if rawData?.length > 0}
<Table {data} {rawData} {excludedRules} {defaultList} />
{:else}
<div
class="w-full text-white text-start p-3 sm:p-5 mb-10 mt-3 rounded-md sm:flex sm:flex-row sm:items-center border border-gray-600 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="#fff"
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
>
Currently no afterhours data is available yet!
</div>
{/if}

21
src/routes/market-mover/premarket/gainers/+page.svelte
View File

@ -2,7 +2,7 @@
import Table from "$lib/components/Table/Table.svelte";
export let data;
let rawData = data?.getMarketMover || [];
let rawData = data?.getMarketMover;
const excludedRules = new Set([
"volume",
@ -20,4 +20,21 @@
];
</script>
<Table {data} {rawData} {excludedRules} {defaultList} />
{#if rawData?.length > 0}
<Table {data} {rawData} {excludedRules} {defaultList} />
{:else}
<div
class="w-full text-white text-start p-3 sm:p-5 mb-10 mt-3 rounded-md sm:flex sm:flex-row sm:items-center border border-gray-600 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="#fff"
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
>
Currently no premarket data is available yet!
</div>
{/if}

21
src/routes/market-mover/premarket/losers/+page.svelte
View File

@ -2,7 +2,7 @@
import Table from "$lib/components/Table/Table.svelte";
export let data;
let rawData = data?.getMarketMover || [];
let rawData = data?.getMarketMover;
const excludedRules = new Set([
"volume",
@ -20,4 +20,21 @@
];
</script>
<Table {data} {rawData} {excludedRules} {defaultList} />
{#if rawData?.length > 0}
<Table {data} {rawData} {excludedRules} {defaultList} />
{:else}
<div
class="w-full text-white text-start p-3 sm:p-5 mb-10 mt-3 rounded-md sm:flex sm:flex-row sm:items-center border border-gray-600 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="#fff"
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
>
Currently no premarket data is available yet!
</div>
{/if}