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

ui fixes

Browse Source
This commit is contained in:
MuslemRahimi 2024-07-09 22:59:32 +02:00
parent 74a540adae
commit df8a7b3aaf
7 changed files with 63 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/lib/components/BorrowedShare.svelte
View File

@ -2,7 +2,7 @@
import { borrowedShareComponent, displayCompanyName, stockTicker, assetType, etfTicker, screenWidth, userRegion, getCache, setCache} from '$lib/store';
import InfoModal from '$lib/components/InfoModal.svelte';
import { Chart } from 'svelte-echarts'
import { abbreviateNumber, formatString } from "$lib/utils";
import { abbreviateNumber, formatDateRange } from "$lib/utils";
import Lazy from 'svelte-lazy';
export let data;
@ -30,20 +30,6 @@
let monthlyAvailableShares;
let totalAvailableShares;
function formatDateRange(lastDateStr) {
// Convert lastDateStr to Date object
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);
// Format first and last dates
const firstDateFormatted = firstDate.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', day: '2-digit' });
const lastDateFormatted = lastDate.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', day: '2-digit' });
// Construct and return the formatted date range string
return `${firstDateFormatted} - ${lastDateFormatted}`;
}
function findLowestAndHighestFee(data, lastDateStr) {
// Convert lastDateStr to Date object

20
src/lib/components/DarkPool.svelte
View File

@ -2,7 +2,7 @@
import { darkPoolComponent, displayCompanyName, stockTicker, assetType, etfTicker, screenWidth, userRegion, getCache, setCache} from '$lib/store';
import InfoModal from '$lib/components/InfoModal.svelte';
import { Chart } from 'svelte-echarts'
import { abbreviateNumber } from "$lib/utils";
import { abbreviateNumber, formatDateRange } from "$lib/utils";
import Lazy from 'svelte-lazy';
export let data;
@ -21,7 +21,6 @@
}
});
const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
let rawData = [];
let optionsData;
@ -46,23 +45,6 @@ function normalizer(value) {
}
}
function formatDateRange(lastDateStr) {
// Convert lastDateStr to Date object
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);
// Format first and last dates
const firstDateFormatted = firstDate.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', day: '2-digit' });
const lastDateFormatted = lastDate.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', day: '2-digit' });
// Construct and return the formatted date range string
return `${firstDateFormatted} - ${lastDateFormatted}`;
}
function findMonthlyValue(data, lastDateStr) {
// Convert lastDateStr to Date object

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

@ -2,7 +2,7 @@
import { failToDeliverComponent, displayCompanyName, stockTicker, assetType, etfTicker, screenWidth, userRegion, getCache, setCache} from '$lib/store';
import InfoModal from '$lib/components/InfoModal.svelte';
import { Chart } from 'svelte-echarts'
import { abbreviateNumber, formatString } from "$lib/utils";
import { abbreviateNumber, formatDateRange } from "$lib/utils";
import Lazy from 'svelte-lazy';
export let data;
@ -29,20 +29,7 @@
let highestPrice;
let totalFailToDeliver;
function formatDateRange(lastDateStr) {
// Convert lastDateStr to Date object
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);
// Format first and last dates
const firstDateFormatted = firstDate.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', day: '2-digit' });
const lastDateFormatted = lastDate.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', day: '2-digit' });
// Construct and return the formatted date range string
return `${firstDateFormatted} - ${lastDateFormatted}`;
}
function findLowestAndHighestPrice(data, lastDateStr) {
// Convert lastDateStr to Date object

16
src/lib/components/ImpliedVolatility.svelte
View File

@ -2,7 +2,7 @@
import { impliedVolatilityComponent, displayCompanyName, stockTicker, assetType, etfTicker, screenWidth, userRegion, getCache, setCache} from '$lib/store';
import InfoModal from '$lib/components/InfoModal.svelte';
import { Chart } from 'svelte-echarts'
import { abbreviateNumber, formatString } from "$lib/utils";
import { formatDateRange } from "$lib/utils";
import Lazy from 'svelte-lazy';
export let data;
@ -33,20 +33,6 @@
let totalAvailableShares;
function formatDateRange(lastDateStr) {
// Convert lastDateStr to Date object
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);
// Format first and last dates
const firstDateFormatted = firstDate.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', day: '2-digit' });
const lastDateFormatted = lastDate.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', day: '2-digit' });
// Construct and return the formatted date range string
return `${firstDateFormatted} - ${lastDateFormatted}`;
}
function findLowestAndhighestIV(data, lastDateStr) {
// Convert lastDateStr to Date object

16
src/lib/components/MarketMaker.svelte
View File

@ -2,7 +2,7 @@
import { marketMakerComponent, displayCompanyName, stockTicker, assetType, etfTicker, screenWidth, userRegion, getCache, setCache} from '$lib/store';
import InfoModal from '$lib/components/InfoModal.svelte';
import { Chart } from 'svelte-echarts'
import { abbreviateNumber, formatString } from "$lib/utils";
import { abbreviateNumber, formatString, formatDateRange } from "$lib/utils";
import Lazy from 'svelte-lazy';
export let data;
@ -32,20 +32,6 @@
let avgNotionalSum;
let showFullStats = false;
function formatDateRange(lastDateStr) {
// Convert lastDateStr to Date object
const lastDate = new Date(lastDateStr);
// Get today's date for the first date (assuming today is the last date in your original logic)
const firstDate = new Date(lastDate.getTime() - 7 * 24 * 60 * 60 * 1000);
// Format first and last dates
const firstDateFormatted = firstDate.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', day: '2-digit' });
const lastDateFormatted = lastDate.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', day: '2-digit' });
// Construct and return the formatted date range string
return `${firstDateFormatted} - ${lastDateFormatted}`;
}
function normalizer(value) {
if (Math?.abs(value) >= 1e18) {

48
src/lib/components/RetailVolume.svelte
View File

@ -3,7 +3,7 @@
import { retailVolumeComponent,displayCompanyName, stockTicker, assetType, etfTicker, screenWidth, userRegion, getCache, setCache} from '$lib/store';
import InfoModal from '$lib/components/InfoModal.svelte';
import { Chart } from 'svelte-echarts'
import { abbreviateNumber } from "$lib/utils";
import { abbreviateNumber, formatDateRange } from "$lib/utils";
import Lazy from 'svelte-lazy';
export let data;
@ -29,6 +29,37 @@
let optionsData;
let avgVolume;
let avgSentiment;
let monthlyVolume;
let lowestSentiment;
let highestSentiment;
function findMonthlyValue(data, lastDateStr) {
// Convert lastDateStr to Date object
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);
// Filter data to include only prices within the specified month period
const filteredData = data?.filter(item => {
const currentDate = new Date(item?.date);
return currentDate >= firstDate && currentDate <= lastDate;
});
// Extract prices from filtered data
monthlyVolume = filteredData?.reduce((accumulator, currentItem) => {
return accumulator + currentItem?.traded;
}, 0);
monthlyVolume = monthlyVolume > 100e3 ? abbreviateNumber(monthlyVolume,true) : '< $100K'
// Extract prices from filtered data
let sentiment = filteredData?.map(item => parseFloat(item?.sentiment));
// Find the lowest and highest prices
lowestSentiment = Math.min(...sentiment)?.toFixed(0);
highestSentiment = Math.max(...sentiment)?.toFixed(0);
}
function normalizer(value) {
if (Math?.abs(value) >= 1e18) {
@ -58,6 +89,9 @@ function getPlotOptions() {
});
findMonthlyValue(historyData, rawData?.lastDate)
// Compute the average of item?.traded
const totalTraded = tradingList?.reduce((acc, traded) => acc + traded, 0);
avgVolume = totalTraded / tradingList?.length;
@ -285,23 +319,23 @@ $: {
<span>Date</span>
</td>
<td class="px-[5px] py-1.5 text-right font-medium xs:px-2.5 xs:py-2">
{new Date(rawData?.lastDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
{formatDateRange(rawData?.lastDate)}
</td>
</tr>
<tr class="border-y border-gray-800 odd:bg-[#202020]">
<td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
<span>Volume</span>
<span>Volume in $</span>
</td>
<td class="px-[5px] py-1.5 text-right font-medium xs:px-2.5 xs:py-2">
{rawData?.lastTrade > 100e3 ? abbreviateNumber(rawData?.lastTrade,true) : '< $100K'}
{monthlyVolume}
</td>
</tr>
<tr class="border-y border-gray-800 odd:bg-[#202020]">
<td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
<span>Retail Sentiment</span>
<span>Retail Sentiment Range</span>
</td>
<td class="px-[5px] py-1.5 text-right font-medium xs:px-2.5 xs:py-2 {rawData?.lastSentiment > 0 ? 'text-[#10DB06]' : rawData?.lastSentiment < 0 ? 'text-[#E57C34]' : 'text-[#C6A755]'} ">
{rawData?.lastSentiment >0 ? rawData?.lastSentiment+' '+'(Bullish)' : rawData?.lastSentiment < 0 ? rawData?.lastSentiment +' '+'(Bearish)' : rawData?.lastSentiment +' '+'(Mixed)'}
<td class="px-[5px] py-1.5 text-right font-medium xs:px-2.5 xs:py-2">
{lowestSentiment+'-'+highestSentiment}
</td>

16
src/lib/utils.ts
View File

@ -13,6 +13,22 @@ export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
export const formatDateRange = (lastDateStr) => {
// Convert lastDateStr to Date object
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);
// Format first and last dates
const firstDateFormatted = firstDate.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', day: '2-digit' });
const lastDateFormatted = lastDate.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', day: '2-digit' });
// Construct and return the formatted date range string
return `${firstDateFormatted} - ${lastDateFormatted}`;
}
export const serializeNonPOJOs = (obj) => {
return structuredClone(obj);
};