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

remove retail trader tracker

Browse Source
This commit is contained in:
MuslemRahimi 2024-10-15 22:31:45 +02:00
parent 8b7890bb8f
commit fde6ba8f64
4 changed files with 112 additions and 159 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
src/lib/components/FailToDeliver.svelte
View File

@ -1,21 +1,19 @@
<script lang='ts'> <script lang='ts'>
import { failToDeliverComponent, displayCompanyName, stockTicker, assetType, etfTicker, screenWidth, getCache, setCache } from '$lib/store'; import { failToDeliverComponent, displayCompanyName, stockTicker, assetType, etfTicker, screenWidth, getCache, setCache } from '$lib/store';
import InfoModal from '$lib/components/InfoModal.svelte'; import InfoModal from '$lib/components/InfoModal.svelte';
import { Chart } from 'svelte-echarts' import { Chart } from 'svelte-echarts';
import { abbreviateNumber, formatDateRange, monthNames } from "$lib/utils"; import { abbreviateNumber, formatDateRange, monthNames } from "$lib/utils";
import { init, use } from 'echarts/core' import { init, use } from 'echarts/core';
import { LineChart } from 'echarts/charts' import { LineChart } from 'echarts/charts';
import { GridComponent, TooltipComponent } from 'echarts/components' import { GridComponent, TooltipComponent } from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers' import { CanvasRenderer } from 'echarts/renderers';
export let data; export let data;
use([LineChart, GridComponent, TooltipComponent, CanvasRenderer]) use([LineChart, GridComponent, TooltipComponent, CanvasRenderer]);
let isLoaded = false; let isLoaded = false;
let rawData = []; let rawData = [];
let optionsData; let optionsData;
let avgFailToDeliver; let avgFailToDeliver;
@ -23,55 +21,42 @@
let highestPrice; let highestPrice;
let weightedFTD; let weightedFTD;
function findLowestAndHighestPrice(data, lastDateStr) { function findLowestAndHighestPrice(data, lastDateStr) {
// Convert lastDateStr to Date object
const lastDate = new Date(lastDateStr); const lastDate = new Date(lastDateStr);
// Set the first date to the beginning of the month of lastDate
const firstDate = new Date(lastDate.getFullYear(), lastDate.getMonth(), 1); const firstDate = new Date(lastDate.getFullYear(), lastDate.getMonth(), 1);
// Filter data to include only prices within the specified month period
const filteredData = data?.filter(item => { const filteredData = data?.filter(item => {
const currentDate = new Date(item?.date); const currentDate = new Date(item?.date);
return currentDate >= firstDate && currentDate <= lastDate; return currentDate >= firstDate && currentDate <= lastDate;
}); });
// Extract prices from filtered data
let prices = filteredData?.map(item => parseFloat(item.price)); let prices = filteredData?.map(item => parseFloat(item.price));
// Find the lowest and highest prices
lowestPrice = Math.min(...prices); lowestPrice = Math.min(...prices);
highestPrice = Math.max(...prices); highestPrice = Math.max(...prices);
} }
function getPlotOptions() { function getPlotOptions() {
let dates = []; let dates = [];
let priceList = []; let priceList = [];
let failToDeliverList = []; let failToDeliverList = [];
// Iterate over the data and extract required information
rawData?.forEach(item => {
rawData?.forEach(item => {
dates?.push(item?.date); dates?.push(item?.date);
priceList?.push(item?.price); priceList?.push(item?.price);
failToDeliverList?.push(item?.failToDeliver) failToDeliverList?.push(item?.failToDeliver);
}); });
// Find the lowest and highest prices findLowestAndHighestPrice(rawData, rawData?.slice(-1)?.at(0)?.date);
findLowestAndHighestPrice(rawData, rawData?.slice(-1)?.at(0)?.date)
// Compute the average of item?.traded
const totalNumber = failToDeliverList?.reduce((acc, item) => acc + item, 0); const totalNumber = failToDeliverList?.reduce((acc, item) => acc + item, 0);
avgFailToDeliver = (totalNumber / failToDeliverList?.length)?.toFixed(0); avgFailToDeliver = (totalNumber / failToDeliverList?.length)?.toFixed(0);
const option = { const option = {
silent: true, silent: true,
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
hideDelay: 100, // Set the delay in milliseconds hideDelay: 100,
}, },
animation: false, animation: false,
grid: { grid: {
@ -88,11 +73,9 @@ function findLowestAndHighestPrice(data, lastDateStr) {
axisLabel: { axisLabel: {
color: '#fff', color: '#fff',
formatter: function (value) { 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 dateParts = value.split('-');
const day = dateParts[2].substring(0); // Extracting the last two digits of the year const day = dateParts[2].substring(0);
const monthIndex = parseInt(dateParts[1]) - 1; // Months are zero-indexed in JavaScript Date objects const monthIndex = parseInt(dateParts[1]) - 1;
return `${day} ${monthNames[monthIndex]}`; return `${day} ${monthNames[monthIndex]}`;
} }
} }
@ -101,32 +84,32 @@ function findLowestAndHighestPrice(data, lastDateStr) {
{ {
type: 'value', type: 'value',
splitLine: { splitLine: {
show: false, // Disable x-axis grid lines show: false,
}, },
axisLabel: { axisLabel: {
show: false // Hide y-axis labels show: false,
} }
}, },
{ {
type: 'value', type: 'value',
splitLine: { splitLine: {
show: false, // Disable x-axis grid lines show: false,
}, },
position: 'right', position: 'right',
axisLabel: { axisLabel: {
show: false // Hide y-axis labels show: false,
}, },
}, },
], ],
series: [ series: [
{ name: 'Price', {
name: 'Price',
data: priceList, data: priceList,
type: 'line', type: 'line',
itemStyle: { itemStyle: {
color: '#fff' // Change bar color to white color: '#fff',
}, },
showSymbol: false showSymbol: false,
}, },
{ {
name: 'FTD Shares', name: 'FTD Shares',
@ -135,26 +118,22 @@ function findLowestAndHighestPrice(data, lastDateStr) {
areaStyle: { opacity: 1 }, areaStyle: { opacity: 1 },
yAxisIndex: 1, yAxisIndex: 1,
itemStyle: { itemStyle: {
color: '#E11D48' // Change bar color to white color: '#E11D48',
}, },
showSymbol: false showSymbol: false,
}, },
] ]
}; };
return option; return option;
} }
const getFailToDeliver = async (ticker) => { const getFailToDeliver = async (ticker) => {
// Get cached data for the specific tickerID
const cachedData = getCache(ticker, 'getFailToDeliver'); const cachedData = getCache(ticker, 'getFailToDeliver');
if (cachedData) { if (cachedData) {
rawData = cachedData; rawData = cachedData;
} else { } else {
const postData = { 'ticker': ticker, path: 'fail-to-deliver' }; const postData = { 'ticker': ticker, path: 'fail-to-deliver' };
// make the POST request to the endpoint
const response = await fetch('/api/ticker-data', { const response = await fetch('/api/ticker-data', {
method: 'POST', method: 'POST',
headers: { headers: {
@ -164,46 +143,33 @@ function findLowestAndHighestPrice(data, lastDateStr) {
}); });
rawData = await response.json(); rawData = await response.json();
// Cache the data for this specific tickerID with a specific name 'getFailToDeliver'
setCache(ticker, rawData, 'getFailToDeliver'); setCache(ticker, rawData, 'getFailToDeliver');
} }
if(rawData?.length !== 0) { failToDeliverComponent.set(rawData?.length !== 0);
$failToDeliverComponent = true;
} else {
$failToDeliverComponent = false;
}
}; };
$: { $: {
if($assetType === 'stock' ? $stockTicker : $etfTicker && typeof window !== 'undefined') { const ticker = $assetType === 'stock' ? $stockTicker : $etfTicker;
if (ticker && typeof window !== 'undefined') {
isLoaded = false; isLoaded = false;
const ticker = $assetType === 'stock' ? $stockTicker :$etfTicker Promise.all([getFailToDeliver(ticker)])
const asyncFunctions = [ .then(() => {
getFailToDeliver(ticker)
];
Promise.all(asyncFunctions)
.then((results) => {
if (rawData?.length !== 0) { if (rawData?.length !== 0) {
weightedFTD = ((rawData?.slice(-1)?.at(0)?.failToDeliver / data?.getStockQuote?.avgVolume) * 100)?.toFixed(2); weightedFTD = ((rawData?.slice(-1)?.at(0)?.failToDeliver / data?.getStockQuote?.avgVolume) * 100)?.toFixed(2);
optionsData = getPlotOptions() optionsData = getPlotOptions();
} }
}) })
.catch((error) => { .catch((error) => {
console.error('An error occurred:', error); console.error('An error occurred:', error);
}); });
isLoaded = true; isLoaded = true;
} }
} }
</script> </script>
<section class="overflow-hidden text-white h-full pb-8"> <section class="overflow-hidden text-white h-full pb-8">
<main class="overflow-hidden "> <main class="overflow-hidden ">
@ -278,7 +244,7 @@ function findLowestAndHighestPrice(data, lastDateStr) {
<span>Price Range</span> <span>Price Range</span>
</td> </td>
<td class="px-[5px] py-1.5 text-right font-medium xs:px-2.5 xs:py-2"> <td class="px-[5px] py-1.5 text-right font-medium xs:px-2.5 xs:py-2">
{'$'+lowestPrice+'-'+'$'+highestPrice} {lowestPrice+'-'+highestPrice}
</td> </td>
</tr> </tr>
<tr class="border-y border-gray-800 odd:bg-[#27272A]"> <tr class="border-y border-gray-800 odd:bg-[#27272A]">

4
src/routes/+layout.svelte
View File

@ -482,9 +482,11 @@ $: {
<Button builders={[builder]} type="submit" class="w-full bg-[#141417] hover:bg-[#141417]"> <Button builders={[builder]} type="submit" class="w-full bg-[#141417] hover:bg-[#141417]">
<a href="/cramer-tracker" class="text-start w-full text-[1rem] text-white ml-4 mt-2">Jim Cramer Tracker</a> <a href="/cramer-tracker" class="text-start w-full text-[1rem] text-white ml-4 mt-2">Jim Cramer Tracker</a>
</Button> </Button>
<!--
<Button builders={[builder]} type="submit" class="w-full bg-[#141417] hover:bg-[#141417]"> <Button builders={[builder]} type="submit" class="w-full bg-[#141417] hover:bg-[#141417]">
<a href="/most-retail-volume" class="text-start w-full text-[1rem] text-white ml-4 mt-4">Retail Trader Tracker</a> <a href="/most-retail-volume" class="text-start w-full text-[1rem] text-white ml-4 mt-4">Retail Trader Tracker</a>
</Button> </Button>
-->
<Button builders={[builder]} type="submit" class="w-full bg-[#141417] hover:bg-[#141417]"> <Button builders={[builder]} type="submit" class="w-full bg-[#141417] hover:bg-[#141417]">
<a href="/reddit-tracker" class="text-start w-full text-[1rem] text-white ml-4 mt-4">Reddit Tracker</a> <a href="/reddit-tracker" class="text-start w-full text-[1rem] text-white ml-4 mt-4">Reddit Tracker</a>
</Button> </Button>
@ -824,7 +826,7 @@ $: {
<Accordion.Content class="border-l border-gray-500 ml-2 mt-5"> <Accordion.Content class="border-l border-gray-500 ml-2 mt-5">
<div class="flex flex-col items-start"> <div class="flex flex-col items-start">
<a href="/cramer-tracker" class="text-[1rem] text-white ml-4 mt-4">Jim Cramer Tracker</a> <a href="/cramer-tracker" class="text-[1rem] text-white ml-4 mt-4">Jim Cramer Tracker</a>
<a href="/most-retail-volume" class="text-[1rem] text-white ml-4 mt-4">Retail Trader Tracker</a> <!--<a href="/most-retail-volume" class="text-[1rem] text-white ml-4 mt-4">Retail Trader Tracker</a>-->
<a href="/reddit-tracker" class="text-[1rem] text-white ml-4 mt-4">Reddit Tracker</a> <a href="/reddit-tracker" class="text-[1rem] text-white ml-4 mt-4">Reddit Tracker</a>
<a href="/corporate-lobbying-tracker" class="text-[1rem] text-white ml-4 mt-4">Lobbying Tracker</a> <a href="/corporate-lobbying-tracker" class="text-[1rem] text-white ml-4 mt-4">Lobbying Tracker</a>
<a href="/sentiment-tracker" class="text-[1rem] text-white ml-4 mt-4">Sentiment Tracker</a> <a href="/sentiment-tracker" class="text-[1rem] text-white ml-4 mt-4">Sentiment Tracker</a>

10
src/routes/etf/[tickerID]/+page.svelte
View File

@ -3,7 +3,7 @@
import {AreaSeries, Chart, PriceLine, CandlestickSeries} from 'svelte-lightweight-charts'; import {AreaSeries, Chart, PriceLine, CandlestickSeries} from 'svelte-lightweight-charts';
import { TrackingModeExitMode } from 'lightweight-charts'; import { TrackingModeExitMode } from 'lightweight-charts';
import {getCache, setCache, taRatingComponent,fomcImpactComponent, failToDeliverComponent, optionsNetFlowComponent, optionComponent, sentimentComponent, varComponent, retailVolumeComponent, trendAnalysisComponent, priceAnalysisComponent, assetType, screenWidth, globalForm, numberOfUnreadNotification, displayCompanyName, isCrosshairMoveActive, realtimePrice, priceIncrease, currentPortfolioPrice, currentPrice, clientSideCache, etfTicker, isOpen, isBeforeMarketOpen, isWeekend} from '$lib/store'; import {getCache, setCache, taRatingComponent,fomcImpactComponent, failToDeliverComponent, optionsNetFlowComponent, optionComponent, sentimentComponent, varComponent, trendAnalysisComponent, priceAnalysisComponent, assetType, screenWidth, globalForm, numberOfUnreadNotification, displayCompanyName, isCrosshairMoveActive, realtimePrice, priceIncrease, currentPortfolioPrice, currentPrice, clientSideCache, etfTicker, isOpen, isBeforeMarketOpen, isWeekend} from '$lib/store';
import { onDestroy, onMount } from 'svelte'; import { onDestroy, onMount } from 'svelte';
import ETFKeyInformation from '$lib/components/ETFKeyInformation.svelte'; import ETFKeyInformation from '$lib/components/ETFKeyInformation.svelte';
import Lazy from '$lib/components/Lazy.svelte'; import Lazy from '$lib/components/Lazy.svelte';
@ -1353,13 +1353,7 @@ async function exportData() {
</div> </div>
<!--End SectorSegmentation --> <!--End SectorSegmentation -->
<Lazy>
<div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$retailVolumeComponent ? 'hidden' : ''}">
{#await import('$lib/components/RetailVolume.svelte') then {default: Comp}}
<svelte:component this={Comp} data={data}/>
{/await}
</div>
</Lazy>
<Lazy> <Lazy>

9
src/routes/stocks/[tickerID]/+page.svelte
View File

@ -24,7 +24,6 @@
shareStatisticsComponent, shareStatisticsComponent,
enterpriseComponent, enterpriseComponent,
darkPoolComponent, darkPoolComponent,
retailVolumeComponent,
shareholderComponent, shareholderComponent,
isCrosshairMoveActive, isCrosshairMoveActive,
realtimePrice, realtimePrice,
@ -1147,14 +1146,6 @@ async function exportData() {
</div> </div>
</Lazy> </Lazy>
<Lazy>
<div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$retailVolumeComponent ? 'hidden' : ''}">
{#await import("$lib/components/RetailVolume.svelte") then { default: Comp }}
<svelte:component this={Comp} {data} />
{/await}
</div>
</Lazy>
<Lazy> <Lazy>
<div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$shareStatisticsComponent ? 'hidden' : ''}"> <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$shareStatisticsComponent ? 'hidden' : ''}">
{#await import("$lib/components/ShareStatistics.svelte") then { default: Comp }} {#await import("$lib/components/ShareStatistics.svelte") then { default: Comp }}