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

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

@ -1,160 +1,139 @@
<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])
let isLoaded = false; use([LineChart, GridComponent, TooltipComponent, CanvasRenderer]);
let isLoaded = false;
let rawData = []; let rawData = [];
let optionsData; let optionsData;
let avgFailToDeliver; let avgFailToDeliver;
let lowestPrice; let lowestPrice;
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 => {
dates?.push(item?.date);
priceList?.push(item?.price);
failToDeliverList?.push(item?.failToDeliver)
});
// Find the lowest and highest prices
findLowestAndHighestPrice(rawData, rawData?.slice(-1)?.at(0)?.date)
// Compute the average of item?.traded rawData?.forEach(item => {
dates?.push(item?.date);
priceList?.push(item?.price);
failToDeliverList?.push(item?.failToDeliver);
});
findLowestAndHighestPrice(rawData, rawData?.slice(-1)?.at(0)?.date);
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: {
left: '3%', left: '3%',
right: '3%', right: '3%',
bottom: '2%', bottom: '2%',
top: '5%', top: '5%',
containLabel: true containLabel: true
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
boundaryGap: false, boundaryGap: false,
data: dates, data: dates,
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]}`;
}
} }
}
},
yAxis: [
{
type: 'value',
splitLine: {
show: false, // Disable x-axis grid lines
}, },
yAxis: [
axisLabel: { {
show: false // Hide y-axis labels type: 'value',
} splitLine: {
}, show: false,
{ },
type: 'value', axisLabel: {
splitLine: { show: false,
show: false, // Disable x-axis grid lines }
}, },
position: 'right', {
axisLabel: { type: 'value',
show: false // Hide y-axis labels splitLine: {
}, show: false,
}, },
], position: 'right',
series: [ axisLabel: {
{ name: 'Price', show: false,
data: priceList, },
type: 'line',
itemStyle: {
color: '#fff' // Change bar color to white
},
showSymbol: false
}, },
{ ],
series: [
{
name: 'Price',
data: priceList,
type: 'line',
itemStyle: {
color: '#fff',
},
showSymbol: false,
},
{
name: 'FTD Shares', name: 'FTD Shares',
data: failToDeliverList, data: failToDeliverList,
type: 'line', type: 'line',
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: {
@ -162,46 +141,33 @@ function findLowestAndHighestPrice(data, lastDateStr) {
}, },
body: JSON.stringify(postData) body: JSON.stringify(postData)
}); });
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;
isLoaded=false; if (ticker && typeof window !== 'undefined') {
const ticker = $assetType === 'stock' ? $stockTicker :$etfTicker isLoaded = false;
const asyncFunctions = [ Promise.all([getFailToDeliver(ticker)])
getFailToDeliver(ticker) .then(() => {
]; if (rawData?.length !== 0) {
Promise.all(asyncFunctions) weightedFTD = ((rawData?.slice(-1)?.at(0)?.failToDeliver / data?.getStockQuote?.avgVolume) * 100)?.toFixed(2);
.then((results) => { optionsData = getPlotOptions();
if(rawData?.length !== 0) { }
weightedFTD = ((rawData?.slice(-1)?.at(0)?.failToDeliver/data?.getStockQuote?.avgVolume) * 100)?.toFixed(2); })
optionsData = getPlotOptions() .catch((error) => {
} console.error('An error occurred:', error);
}) });
.catch((error) => { isLoaded = true;
console.error('An error occurred:', error); }
});
isLoaded = true;
} }
} </script>
</script>
<section class="overflow-hidden text-white h-full pb-8"> <section class="overflow-hidden text-white h-full pb-8">
@ -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,14 +1353,8 @@ 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>
<div class="w-full pt-10 m-auto sm:pl-6 sm:pb-6 sm:pt-6 rounded-2xl {!$taRatingComponent ? 'hidden' : ''}"> <div class="w-full pt-10 m-auto sm:pl-6 sm:pb-6 sm:pt-6 rounded-2xl {!$taRatingComponent ? 'hidden' : ''}">

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 }}