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

ui fix

Browse Source
This commit is contained in:
MuslemRahimi 2024-11-09 11:38:39 +01:00
parent 2b249d0406
commit b5417f20e4
17 changed files with 222 additions and 416 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/lib/assets/style_quill.css
View File

@ -886,7 +886,7 @@
background-color: #fff; background-color: #fff;
} }
.ql-toolbar.ql-snow { .ql-toolbar.ql-snow {
border: 1px solid #2a303c; border: 1px solid #313131;
box-sizing: border-box; box-sizing: border-box;
font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif; font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
padding: 8px; padding: 8px;

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

@ -1,249 +1,12 @@
<script lang ='ts'> <script lang 'ts'></script>
import { impliedVolatilityComponent, displayCompanyName, stockTicker, assetType, etfTicker, screenWidth, getCache, setCache} from '$lib/store';
import InfoModal from '$lib/components/InfoModal.svelte';
import { Chart } from 'svelte-echarts'
import { formatDateRange } from "$lib/utils";
import { init, use } from 'echarts/core'
import { LineChart } from 'echarts/charts'
import { GridComponent } from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'
use([LineChart, GridComponent, CanvasRenderer])
export let data;
let isLoaded = false;
let displayIV = 'iv60';
let rawData = [];
let optionsData;
let lowestIV;
let highestIV;
let lowestRV;
let highestRV;
let ivRank;
function findLowestAndhighestIV(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
let impliedVol = filteredData?.map(item => parseFloat(item?.iv60));
let realizedVol = filteredData?.map(item => parseFloat(item['60dorhv']));
// Find the lowest and highest prices
lowestIV = Math.min(...impliedVol)?.toFixed(0);
highestIV = Math.max(...impliedVol)?.toFixed(0);
lowestRV = Math.min(...realizedVol)?.toFixed(0);
highestRV = Math.max(...realizedVol)?.toFixed(0);
}
function changeStatement(event)
{
displayIV = event.target.value;
optionsData = getPlotOptions()
}
function getPlotOptions() {
let dates = [];
let priceList = [];
let ivList = [];
let realizedVolatility = [];
// Iterate over the data and extract required information
rawData?.forEach(item => {
dates?.push(item?.date);
priceList?.push(item?.stockpx);
ivList?.push(item[displayIV])
realizedVolatility?.push(item['60dorhv'])
});
// Find the lowest and highest prices
findLowestAndhighestIV(rawData, rawData?.slice(-1)?.at(0)?.date)
// Calculate IV Rank
const lowestIV = Math.min(...ivList); // Find the lowest IV in the past
const highestIV = Math.max(...ivList); // Find the highest IV in the past
ivRank = ((ivList?.slice(-1) - lowestIV) / (highestIV - lowestIV) * 100).toFixed(2); // Compute IV Rank
const option = {
silent: true,
tooltip: {
trigger: 'axis',
hideDelay: 100, // Set the delay in milliseconds
},
animation: false,
grid: {
left: '0%',
right: '0%',
bottom: '0%',
top: '10%',
containLabel: true
},
xAxis:
{
type: 'category',
boundaryGap: false,
data: dates,
},
yAxis: [
{
type: 'value',
splitLine: {
show: false, // Disable x-axis grid lines
},
axisLabel: {
color: '#6E7079', // Change label color to white
formatter: function (value, index) {
// Display every second tick
if (index % 2 === 0) {
value = Math.max(value, 0);
return '$'+value;
} else {
return ''; // Hide this tick
}
}
},
},
{
type: 'value',
splitLine: {
show: false, // Disable x-axis grid lines
},
position: 'right',
axisLabel: {
formatter: function (value, index) {
if (index % 2 === 0) {
return value?.toFixed(0)+'%'
} else {
return ''; // Hide this tick
}
}
}
},
],
series: [
{
name: 'Price',
data: priceList,
type: 'line',
itemStyle: {
color: '#fff'
},
showSymbol: false
},
{
name: 'IV',
data: ivList,
type: 'line',
areaStyle: {opacity: 0.3},
stack: 'ImpliedVolatility',
yAxisIndex: 1,
itemStyle: {
color: '#F03500'
},
showSymbol: false,
},
{
name: 'RV',
data: realizedVolatility,
type: 'line',
areaStyle: {opacity: 0.3},
stack: 'ImpliedVolatility',
yAxisIndex: 1,
itemStyle: {
color: '#3B82F6'
},
showSymbol: false,
},
]
};
return option;
}
const getImpliedVolatility = async (ticker) => {
// Get cached data for the specific tickerID
const cachedData = getCache(ticker, 'getImpliedVolatility');
if (cachedData) {
rawData = cachedData;
} else {
const postData = {'ticker': ticker, path: 'implied-volatility'};
// make the POST request to the endpoint
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 'getImpliedVolatility'
setCache(ticker, rawData, 'getImpliedVolatility');
}
if(rawData?.length !== 0) {
$impliedVolatilityComponent = true;
} else {
$impliedVolatilityComponent = false;
}
};
$: {
if($assetType === 'stock' ? $stockTicker : $etfTicker && typeof window !== 'undefined') {
isLoaded=false;
displayIV = 'iv60';
const ticker = $assetType === 'stock' ? $stockTicker : $etfTicker
const asyncFunctions = [
getImpliedVolatility(ticker)
];
Promise.all(asyncFunctions)
.then((results) => {
optionsData = getPlotOptions()
})
.catch((error) => {
console.error('An error occurred:', error);
});
isLoaded = true;
}
}
$: charNumber = $screenWidth < 640 ? 20 : 40;
</script>
<section class="overflow-hidden text-white h-full pb-8">
<main class="overflow-hidden ">
<section class="overflow-hidden text-white h-full pb-8">
<main class="overflow-hidden">
<div class="flex flex-row items-center"> <div class="flex flex-row items-center">
<label for="impliedVolatilityInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-3xl font-bold"> <label
for="impliedVolatilityInfo"
class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-3xl font-bold"
>
Implied Volatility Implied Volatility
</label> </label>
<InfoModal <InfoModal
@ -253,81 +16,109 @@ function changeStatement(event)
/> />
</div> </div>
{#if data?.user?.tier === 'Pro'} {#if data?.user?.tier === "Pro"}
{#if isLoaded} {#if isLoaded}
{#if rawData?.length !== 0} {#if rawData?.length !== 0}
<div class="w-full flex flex-col items-start mb-2"> <div class="w-full flex flex-col items-start mb-2">
<div class="text-white text-[1rem] mt-2 mb-2 w-full"> <div class="text-white text-[1rem] mt-2 mb-2 w-full">
Based on the past 12 months of historical data, {$displayCompanyName} has an IV Rank of <span class="font-semibold">{ivRank}%</span>, with the current implied volatility standing at <span class="font-semibold">{rawData?.slice(-1)?.at(0)?.iv60}%</span>. Based on the past 12 months of historical data, {$displayCompanyName}
has an IV Rank of <span class="font-semibold">{ivRank}%</span>,
with the current implied volatility standing at
<span class="font-semibold"
>{rawData?.slice(-1)?.at(0)?.iv60}%</span
>.
</div> </div>
</div> </div>
<select class="mt-5 mb-5 sm:mb-0 sm:mt-3 ml-1 w-44 select select-bordered select-sm p-0 pl-5 overflow-y-auto bg-[#2A303C]" on:change={changeStatement}> <select
class="mt-5 mb-5 sm:mb-0 sm:mt-3 ml-1 w-44 select select-bordered select-sm p-0 pl-5 overflow-y-auto bg-[#313131]"
on:change={changeStatement}
>
<option disabled>Choose IV Period</option> <option disabled>Choose IV Period</option>
<option selected value="iv60"> <option selected value="iv60"> 60 Day IV </option>
60 Day IV <option value="iv90"> 90 Day IV </option>
</option> <option value="252dclshv"> 1 Year historical volatility </option>
<option value="iv90">
90 Day IV
</option>
<option value="252dclshv">
1 Year historical volatility
</option>
</select> </select>
<div class="pb-2 rounded-lg bg-[#09090B]"> <div class="pb-2 rounded-lg bg-[#09090B]">
<div class="app w-full h-[300px] mt-5"> <div class="app w-full h-[300px] mt-5">
<Chart {init} options={optionsData} class="chart" /> <Chart {init} options={optionsData} class="chart" />
</div> </div>
</div> </div>
<div class="flex flex-row items-center justify-between mx-auto mt-5 w-full sm:w-11/12"> <div
<div class="mt-3.5 sm:mt-0 flex flex-col sm:flex-row items-center ml-3 sm:ml-0 w-1/2 justify-center"> class="flex flex-row items-center justify-between mx-auto mt-5 w-full sm:w-11/12"
<div class="h-full transform -translate-x-1/2 " aria-hidden="true"></div> >
<div class="w-3 h-3 bg-[#fff] border-4 box-content border-[#27272A] rounded-full transform sm:-translate-x-1/2" aria-hidden="true"></div> <div
<span class="mt-2 sm:mt-0 text-white text-center sm:text-start text-xs sm:text-md inline-block"> class="mt-3.5 sm:mt-0 flex flex-col sm:flex-row items-center ml-3 sm:ml-0 w-1/2 justify-center"
>
<div
class="h-full transform -translate-x-1/2"
aria-hidden="true"
></div>
<div
class="w-3 h-3 bg-[#fff] border-4 box-content border-[#27272A] rounded-full transform sm:-translate-x-1/2"
aria-hidden="true"
></div>
<span
class="mt-2 sm:mt-0 text-white text-center sm:text-start text-xs sm:text-md inline-block"
>
Price Price
</span> </span>
</div> </div>
<div class="flex flex-col sm:flex-row items-center ml-3 sm:ml-0 w-1/2 justify-center"> <div
<div class="h-full transform -translate-x-1/2 " aria-hidden="true"></div> class="flex flex-col sm:flex-row items-center ml-3 sm:ml-0 w-1/2 justify-center"
<div class="w-3 h-3 bg-[#F03500] border-4 box-content border-[#27272A] rounded-full transform sm:-translate-x-1/2" aria-hidden="true"></div> >
<span class="mt-2 sm:mt-0 text-white text-xs sm:text-md sm:font-medium inline-block"> <div
class="h-full transform -translate-x-1/2"
aria-hidden="true"
></div>
<div
class="w-3 h-3 bg-[#F03500] border-4 box-content border-[#27272A] rounded-full transform sm:-translate-x-1/2"
aria-hidden="true"
></div>
<span
class="mt-2 sm:mt-0 text-white text-xs sm:text-md sm:font-medium inline-block"
>
Implied Volatility Implied Volatility
</span> </span>
</div> </div>
<div class="flex flex-col sm:flex-row items-center ml-3 sm:ml-0 w-1/2 justify-center"> <div
<div class="h-full transform -translate-x-1/2 " aria-hidden="true"></div> class="flex flex-col sm:flex-row items-center ml-3 sm:ml-0 w-1/2 justify-center"
<div class="w-3 h-3 bg-[#3B82F6] border-4 box-content border-[#27272A] rounded-full transform sm:-translate-x-1/2" aria-hidden="true"></div> >
<span class="mt-2 sm:mt-0 text-white text-xs sm:text-md sm:font-medium inline-block"> <div
class="h-full transform -translate-x-1/2"
aria-hidden="true"
></div>
<div
class="w-3 h-3 bg-[#3B82F6] border-4 box-content border-[#27272A] rounded-full transform sm:-translate-x-1/2"
aria-hidden="true"
></div>
<span
class="mt-2 sm:mt-0 text-white text-xs sm:text-md sm:font-medium inline-block"
>
Realized Volatility Realized Volatility
</span> </span>
</div> </div>
</div> </div>
<h2
<h2 class="mt-10 mr-1 flex flex-row items-center text-white text-xl sm:text-2xl font-bold mb-3"> class="mt-10 mr-1 flex flex-row items-center text-white text-xl sm:text-2xl font-bold mb-3"
>
Latest Information Latest Information
</h2> </h2>
<div class="flex justify-start items-center w-full m-auto">
<div class="flex justify-start items-center w-full m-auto ">
<table class="w-full" data-test="statistics-table"> <table class="w-full" data-test="statistics-table">
<tbody> <tbody>
<tr class="border-y border-gray-800 odd:bg-[#27272A]"> <tr class="border-y border-gray-800 odd:bg-[#27272A]">
<td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"> <td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
<span>Date</span> <span>Date</span>
</td> </td>
<td class="px-[5px] py-1.5 text-right text-sm sm:text-[1rem] font-medium xs:px-2.5 xs:py-2"> <td
class="px-[5px] py-1.5 text-right text-sm sm:text-[1rem] font-medium xs:px-2.5 xs:py-2"
>
{formatDateRange(rawData?.slice(-1)?.at(0)?.date)} {formatDateRange(rawData?.slice(-1)?.at(0)?.date)}
</td> </td>
</tr> </tr>
@ -335,55 +126,65 @@ function changeStatement(event)
<td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"> <td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
<span>IV Range</span> <span>IV Range</span>
</td> </td>
<td class="px-[5px] py-1.5 text-right font-medium xs:px-2.5 xs:py-2"> <td
{lowestIV+'%'+'-'+highestIV+'%'} class="px-[5px] py-1.5 text-right font-medium xs:px-2.5 xs:py-2"
>
{lowestIV + "%" + "-" + highestIV + "%"}
</td> </td>
</tr> </tr>
<tr class="border-y border-gray-800 odd:bg-[#27272A]"> <tr class="border-y border-gray-800 odd:bg-[#27272A]">
<td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"> <td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
<span>RV Range</span> <span>RV Range</span>
</td> </td>
<td class="px-[5px] py-1.5 text-right font-medium xs:px-2.5 xs:py-2"> <td
{lowestRV+'%'+'-'+highestRV+'%'} class="px-[5px] py-1.5 text-right font-medium xs:px-2.5 xs:py-2"
>
{lowestRV + "%" + "-" + highestRV + "%"}
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
{/if} {/if}
{:else} {:else}
<div class="flex justify-center items-center h-80"> <div class="flex justify-center items-center h-80">
<div class="relative"> <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"> <label
<span class="loading loading-spinner loading-md text-gray-400"></span> 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> </label>
</div> </div>
</div> </div>
{/if} {/if}
{:else} {:else}
<div class="shadow-lg shadow-bg-[#000] bg-[#111112] sm:bg-opacity-[0.5] text-sm sm:text-[1rem] rounded-md w-full p-4 min-h-24 mt-4 text-white m-auto flex justify-center items-center text-center font-semibold"> <div
<svg class="mr-1.5 w-5 h-5 inline-block"xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#A3A3A3" 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> class="shadow-lg shadow-bg-[#000] bg-[#111112] sm:bg-opacity-[0.5] text-sm sm:text-[1rem] rounded-md w-full p-4 min-h-24 mt-4 text-white m-auto flex justify-center items-center text-center font-semibold"
Unlock content with <a class="inline-block ml-2 text-blue-400 hover:sm:text-white" href="/pricing">Pro Subscription</a> >
<svg
class="mr-1.5 w-5 h-5 inline-block"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
><path
fill="#A3A3A3"
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
>
Unlock content with
<a
class="inline-block ml-2 text-blue-400 hover:sm:text-white"
href="/pricing">Pro Subscription</a
>
</div> </div>
{/if} {/if}
</main> </main>
</section> </section>
<style>
<style>
.app { .app {
height: 300px; height: 300px;
max-width: 100%; /* Ensure chart width doesn't exceed the container */ max-width: 100%; /* Ensure chart width doesn't exceed the container */
} }
@media (max-width: 640px) { @media (max-width: 640px) {
@ -395,5 +196,4 @@ function changeStatement(event)
.chart { .chart {
width: 100%; width: 100%;
} }
</style>
</style>

4
src/lib/components/MobileCommentEditor.svelte
View File

@ -254,7 +254,7 @@
<!--Start Quill Editor--> <!--Start Quill Editor-->
<div class="{!loadingEditor ? 'hidden' : ''} mt-3 pl-7 pr-7"> <div class="{!loadingEditor ? 'hidden' : ''} mt-3 pl-7 pr-7">
<div <div
class="quill-editor min-h-[96px] h-[120px] resize-none focus-none ring-none rounded-none bg-[#2A303C] text-white" class="quill-editor min-h-[96px] h-[120px] resize-none focus-none ring-none rounded-none bg-[#313131] text-white"
> >
<select class="ql-header" aria-label="Header" title="Header"> <select class="ql-header" aria-label="Header" title="Header">
<option selected></option> <option selected></option>
@ -266,7 +266,7 @@
placeholder="Loading editor..." placeholder="Loading editor..."
class="{loadingEditor class="{loadingEditor
? 'hidden' ? 'hidden'
: ''} min-h-[96px] h-[120px] text-sm italic w-full resize-none focus-none ring-none rounded-none bg-[#2A303C] text-white" : ''} min-h-[96px] h-[120px] text-sm italic w-full resize-none focus-none ring-none rounded-none bg-[#313131] text-white"
></textarea> ></textarea>
<!--End Quill Editor--> <!--End Quill Editor-->

2
src/lib/components/OptionsData.svelte
View File

@ -154,7 +154,7 @@
{#if isLoaded} {#if isLoaded}
<div class="flex flex-row items-end justify-between"> <div class="flex flex-row items-end justify-between">
<select <select
class="mt-5 sm:mb-0 ml-1 w-36 select select-bordered select-sm p-0 pl-5 bg-[#2A303C]" class="mt-5 sm:mb-0 ml-1 w-36 select select-bordered select-sm p-0 pl-5 bg-[#313131]"
on:change={changeStatement} on:change={changeStatement}
> >
<option disabled>Choose a time period</option> <option disabled>Choose a time period</option>

2
src/lib/components/TrendAnalysis.svelte
View File

@ -176,7 +176,7 @@
</div> </div>
<select <select
class="mt-1 sm:mt-3 ml-1 w-36 select select-bordered select-sm p-0 pl-5 overflow-y-auto bg-[#2A303C]" class="mt-1 sm:mt-3 ml-1 w-36 select select-bordered select-sm p-0 pl-5 overflow-y-auto bg-[#313131]"
on:change={changeStatement} on:change={changeStatement}
> >
<option disabled>Choose Time Period</option> <option disabled>Choose Time Period</option>

4
src/routes/crypto/[tickerID]/+layout.svelte
View File

@ -750,14 +750,14 @@
<div class="hidden sm:flex ml-auto"> <div class="hidden sm:flex ml-auto">
{#if holdingShares !== 0 && data?.user} {#if holdingShares !== 0 && data?.user}
<label for="{!data?.user ? 'userLogin' : userPortfolio?.length !== 0 ? 'typeOfTrade' : ''}" class="py-2 px-3 text-sm sm:text-[1rem] cursor-pointer mr-1 flex flex-row ease-in-out duration-100 rounded-full shadow-lg bg-[#09090B] hover:bg-[#2A303C] border border-slate-800 normal-case cursor-pointer items-center"> <label for="{!data?.user ? 'userLogin' : userPortfolio?.length !== 0 ? 'typeOfTrade' : ''}" class="py-2 px-3 text-sm sm:text-[1rem] cursor-pointer mr-1 flex flex-row ease-in-out duration-100 rounded-full shadow-lg bg-[#09090B] hover:bg-[#313131] border border-slate-800 normal-case cursor-pointer items-center">
<svg class="w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="white" d="M8 2.5a.5.5 0 0 0-1 0V7H2.5a.5.5 0 0 0 0 1H7v4.5a.5.5 0 0 0 1 0V8h4.5a.5.5 0 0 0 0-1H8z"/></svg> <svg class="w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="white" d="M8 2.5a.5.5 0 0 0-1 0V7H2.5a.5.5 0 0 0 0 1H7v4.5a.5.5 0 0 0 1 0V8h4.5a.5.5 0 0 0 0-1H8z"/></svg>
<span class="text-white font-medium"> <span class="text-white font-medium">
Portfolio Portfolio
</span> </span>
</label> </label>
{:else} {:else}
<label for="{!data?.user ? 'userLogin' : userPortfolio?.length === 0 ? 'addPortfolio' : 'buyTradeModal'}" class="py-2 px-3 text-sm sm:text-[1rem] cursor-pointer mr-1 flex flex-row ease-in-out duration-100 rounded-full shadow-lg bg-[#09090B] hover:bg-[#2A303C] border border-slate-800 normal-case cursor-pointer items-center"> <label for="{!data?.user ? 'userLogin' : userPortfolio?.length === 0 ? 'addPortfolio' : 'buyTradeModal'}" class="py-2 px-3 text-sm sm:text-[1rem] cursor-pointer mr-1 flex flex-row ease-in-out duration-100 rounded-full shadow-lg bg-[#09090B] hover:bg-[#313131] border border-slate-800 normal-case cursor-pointer items-center">
<svg class="w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="white" d="M8 2.5a.5.5 0 0 0-1 0V7H2.5a.5.5 0 0 0 0 1H7v4.5a.5.5 0 0 0 1 0V8h4.5a.5.5 0 0 0 0-1H8z"/></svg> <svg class="w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="white" d="M8 2.5a.5.5 0 0 0-1 0V7H2.5a.5.5 0 0 0 0 1H7v4.5a.5.5 0 0 0 1 0V8h4.5a.5.5 0 0 0 0-1H8z"/></svg>
<span class="text-white font-medium"> <span class="text-white font-medium">
Portfolio Portfolio

18
src/routes/economic-indicator/+page.svelte
View File

@ -310,7 +310,10 @@
type: "line", type: "line",
areaStyle: { opacity: 0.2 }, areaStyle: { opacity: 0.2 },
smooth: true, smooth: true,
showSymbol: false, symbol: "none",
itemStyle: {
color: "#fff",
},
}, },
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
@ -561,7 +564,10 @@
type: "line", type: "line",
areaStyle: { opacity: 0.2 }, areaStyle: { opacity: 0.2 },
smooth: true, smooth: true,
showSymbol: false, symbol: "none",
itemStyle: {
color: "#fff",
},
}, },
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
@ -766,7 +772,7 @@
<div class="w-full text-white"> <div class="w-full text-white">
<div class="relative flex justify-end"> <div class="relative flex justify-end">
<select <select
class="w-24 select select-bordered select-sm p-0 pl-5 bg-[#2A303C]" class="w-24 select select-bordered select-sm p-0 pl-5 bg-[#313131]"
on:change={changeStatement} on:change={changeStatement}
> >
<option disabled>Choose a Time Period</option> <option disabled>Choose a Time Period</option>
@ -794,7 +800,7 @@
class="cursor-pointer rounded-l-md inline-block w-full py-1.5 {filterRule === class="cursor-pointer rounded-l-md inline-block w-full py-1.5 {filterRule ===
'annual' 'annual'
? 'bg-[#fff] text-black' ? 'bg-[#fff] text-black'
: 'bg-[#2A303C] text-white'} font-semibold border-r border-gray-600" : 'bg-[#313131] text-white'} font-semibold border-r border-gray-600"
aria-current="page" aria-current="page"
> >
Annual Annual
@ -807,14 +813,14 @@
class="cursor-pointer inline-block w-full py-1.5 {filterRule === class="cursor-pointer inline-block w-full py-1.5 {filterRule ===
'quarterly' 'quarterly'
? 'bg-[#fff] text-black' ? 'bg-[#fff] text-black'
: 'bg-[#2A303C] text-white'} font-semibold rounded-r-md" : 'bg-[#313131] text-white'} font-semibold rounded-r-md"
> >
Quartely Quartely
</label> </label>
{:else} {:else}
<a <a
href="/pricing" href="/pricing"
class="flex flex-row items-center m-auto justify-center cursor-pointer inline-block w-full py-2.5 bg-[#2A303C] font-semibold text-white rounded-r-lg" class="flex flex-row items-center m-auto justify-center cursor-pointer inline-block w-full py-2.5 bg-[#313131] font-semibold text-white rounded-r-lg"
> >
<span class="">Quarterly</span> <span class="">Quarterly</span>
<svg <svg

4
src/routes/etf/[tickerID]/+layout.svelte
View File

@ -783,14 +783,14 @@
<div class="hidden sm:flex ml-auto"> <div class="hidden sm:flex ml-auto">
{#if holdingShares !== 0 && data?.user} {#if holdingShares !== 0 && data?.user}
<label for="{!data?.user ? 'userLogin' : userPortfolio?.length !== 0 ? 'typeOfTrade' : ''}" class="py-2 px-3 text-sm sm:text-[1rem] cursor-pointer mr-1 flex flex-row ease-in-out duration-100 rounded-full shadow-lg bg-[#09090B] hover:bg-[#2A303C] border border-slate-800 normal-case cursor-pointer items-center"> <label for="{!data?.user ? 'userLogin' : userPortfolio?.length !== 0 ? 'typeOfTrade' : ''}" class="py-2 px-3 text-sm sm:text-[1rem] cursor-pointer mr-1 flex flex-row ease-in-out duration-100 rounded-full shadow-lg bg-[#09090B] hover:bg-[#313131] border border-slate-800 normal-case cursor-pointer items-center">
<svg class="w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="white" d="M8 2.5a.5.5 0 0 0-1 0V7H2.5a.5.5 0 0 0 0 1H7v4.5a.5.5 0 0 0 1 0V8h4.5a.5.5 0 0 0 0-1H8z"/></svg> <svg class="w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="white" d="M8 2.5a.5.5 0 0 0-1 0V7H2.5a.5.5 0 0 0 0 1H7v4.5a.5.5 0 0 0 1 0V8h4.5a.5.5 0 0 0 0-1H8z"/></svg>
<span class="text-white font-medium"> <span class="text-white font-medium">
Portfolio Portfolio
</span> </span>
</label> </label>
{:else} {:else}
<label for="{!data?.user ? 'userLogin' : userPortfolio?.length === 0 ? 'addPortfolio' : 'buyTradeModal'}" class="py-2 px-3 text-sm sm:text-[1rem] cursor-pointer mr-1 flex flex-row ease-in-out duration-100 rounded-full shadow-lg bg-[#09090B] hover:bg-[#2A303C] border border-slate-800 normal-case cursor-pointer items-center"> <label for="{!data?.user ? 'userLogin' : userPortfolio?.length === 0 ? 'addPortfolio' : 'buyTradeModal'}" class="py-2 px-3 text-sm sm:text-[1rem] cursor-pointer mr-1 flex flex-row ease-in-out duration-100 rounded-full shadow-lg bg-[#09090B] hover:bg-[#313131] border border-slate-800 normal-case cursor-pointer items-center">
<svg class="w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="white" d="M8 2.5a.5.5 0 0 0-1 0V7H2.5a.5.5 0 0 0 0 1H7v4.5a.5.5 0 0 0 1 0V8h4.5a.5.5 0 0 0 0-1H8z"/></svg> <svg class="w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="white" d="M8 2.5a.5.5 0 0 0-1 0V7H2.5a.5.5 0 0 0 0 1H7v4.5a.5.5 0 0 0 1 0V8h4.5a.5.5 0 0 0 0-1H8z"/></svg>
<span class="text-white font-medium"> <span class="text-white font-medium">
Portfolio Portfolio

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

@ -696,7 +696,7 @@
<div class="flex flex-row items-center w-full mt-10"> <div class="flex flex-row items-center w-full mt-10">
<select <select
class="ml-1 w-40 select select-bordered select-sm p-0 pl-5 bg-[#2A303C]" class="ml-1 w-40 select select-bordered select-sm p-0 pl-5 bg-[#313131]"
on:change={changeTimePeriod} on:change={changeTimePeriod}
> >
<option disabled>Choose a time period</option> <option disabled>Choose a time period</option>
@ -708,7 +708,7 @@
</select> </select>
<select <select
class="ml-auto sm:ml-3 w-40 select select-bordered select-sm p-0 pl-5 bg-[#2A303C]" class="ml-auto sm:ml-3 w-40 select select-bordered select-sm p-0 pl-5 bg-[#313131]"
on:change={changeVolumeOI} on:change={changeVolumeOI}
> >
<option disabled>Choose a category</option> <option disabled>Choose a category</option>
@ -808,7 +808,7 @@
{#if activeIdx === 1} {#if activeIdx === 1}
<div class="relative mb-6"> <div class="relative mb-6">
<select <select
class="w-48 select select-bordered select-sm p-0 pl-5 overflow-y-auto bg-[#2A303C]" class="w-48 select select-bordered select-sm p-0 pl-5 overflow-y-auto bg-[#313131]"
on:change={changeStatement} on:change={changeStatement}
> >
<option disabled>Choose an Expiration Date</option> <option disabled>Choose an Expiration Date</option>

2
src/routes/ipos/[slug]/+page.svelte
View File

@ -102,7 +102,7 @@
</div> </div>
<div class="relative mt-4"> <div class="relative mt-4">
<select <select
class="select text-white select-bordered select-sm w-36 p-0 pl-5 overflow-y-auto bg-[#2A303C]" class="select text-white select-bordered select-sm w-36 p-0 pl-5 overflow-y-auto bg-[#313131]"
on:change={changeTimePeriod} on:change={changeTimePeriod}
> >
<option disabled>Select time period</option> <option disabled>Select time period</option>

2
src/routes/register/+page.svelte
View File

@ -80,7 +80,7 @@
<!-- <!--
<label class="w-full max-w-lg"> <label class="w-full max-w-lg">
<input <input
class="input input-bordered w-full max-w-lg bg-[#2A303C] whitespace-normal ring-2" class="input input-bordered w-full max-w-lg bg-[#313131] whitespace-normal ring-2"
type="password" type="password"
bind:value={password} bind:value={password}
on:input={checkPassword} on:input={checkPassword}

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

@ -424,7 +424,7 @@
class="cursor-pointer rounded-l-md inline-block w-full text-sm py-1.5 {filterRule === class="cursor-pointer rounded-l-md inline-block w-full text-sm py-1.5 {filterRule ===
'annual' 'annual'
? 'bg-[#fff] text-black' ? 'bg-[#fff] text-black'
: 'bg-[#2A303C] text-white'} font-semibold" : 'bg-[#313131] text-white'} font-semibold"
aria-current="page" aria-current="page"
> >
Annual Annual
@ -437,14 +437,14 @@
class="cursor-pointer inline-block w-full py-1.5 text-sm {filterRule === class="cursor-pointer inline-block w-full py-1.5 text-sm {filterRule ===
'quartely' 'quartely'
? 'bg-[#fff] text-black' ? 'bg-[#fff] text-black'
: 'bg-[#2A303C] text-white'} font-semibold rounded-r-md" : 'bg-[#313131] text-white'} font-semibold rounded-r-md"
> >
Quartely Quartely
</label> </label>
{:else} {:else}
<a <a
href="/pricing" href="/pricing"
class="flex flex-row items-center m-auto justify-center cursor-pointer inline-block w-full py-1.5 bg-[#2A303C] font-semibold text-white rounded-r-md" class="flex flex-row items-center m-auto justify-center cursor-pointer inline-block w-full py-1.5 bg-[#313131] font-semibold text-white rounded-r-md"
> >
<span class="">Quarterly</span> <span class="">Quarterly</span>
<svg <svg
@ -568,7 +568,7 @@
<div class="sm:w-full"> <div class="sm:w-full">
<div class="relative"> <div class="relative">
<select <select
class="w-36 select select-bordered select-sm p-0 pl-5 overflow-y-auto bg-[#2A303C]" class="w-36 select select-bordered select-sm p-0 pl-5 overflow-y-auto bg-[#313131]"
on:change={changeStatement} on:change={changeStatement}
> >
<option disabled>Choose an Cash Flow Variable</option> <option disabled>Choose an Cash Flow Variable</option>

8
src/routes/stocks/[tickerID]/financials/balance-sheet/+page.svelte
View File

@ -509,7 +509,7 @@
class="cursor-pointer rounded-l-md inline-block w-full text-sm py-1.5 {filterRule === class="cursor-pointer rounded-l-md inline-block w-full text-sm py-1.5 {filterRule ===
'annual' 'annual'
? 'bg-[#fff] text-black' ? 'bg-[#fff] text-black'
: 'bg-[#2A303C] text-white'} font-semibold" : 'bg-[#313131] text-white'} font-semibold"
aria-current="page" aria-current="page"
> >
Annual Annual
@ -522,14 +522,14 @@
class="cursor-pointer inline-block w-full py-1.5 text-sm {filterRule === class="cursor-pointer inline-block w-full py-1.5 text-sm {filterRule ===
'quartely' 'quartely'
? 'bg-[#fff] text-black' ? 'bg-[#fff] text-black'
: 'bg-[#2A303C] text-white'} font-semibold rounded-r-md" : 'bg-[#313131] text-white'} font-semibold rounded-r-md"
> >
Quartely Quartely
</label> </label>
{:else} {:else}
<a <a
href="/pricing" href="/pricing"
class="flex flex-row items-center m-auto justify-center cursor-pointer inline-block w-full py-1.5 bg-[#2A303C] font-semibold text-white rounded-r-md" class="flex flex-row items-center m-auto justify-center cursor-pointer inline-block w-full py-1.5 bg-[#313131] font-semibold text-white rounded-r-md"
> >
<span class="">Quarterly</span> <span class="">Quarterly</span>
<svg <svg
@ -653,7 +653,7 @@
<div class="sm:w-full"> <div class="sm:w-full">
<div class="relative"> <div class="relative">
<select <select
class="w-40 select select-bordered select-sm p-0 pl-5 overflow-y-auto bg-[#2A303C]" class="w-40 select select-bordered select-sm p-0 pl-5 overflow-y-auto bg-[#313131]"
on:change={changeStatement} on:change={changeStatement}
> >
<option disabled>Choose an Income Variable</option> <option disabled>Choose an Income Variable</option>

8
src/routes/stocks/[tickerID]/financials/cash-flow/+page.svelte
View File

@ -452,7 +452,7 @@
class="cursor-pointer rounded-l-md inline-block w-full text-sm py-1.5 {filterRule === class="cursor-pointer rounded-l-md inline-block w-full text-sm py-1.5 {filterRule ===
'annual' 'annual'
? 'bg-[#fff] text-black' ? 'bg-[#fff] text-black'
: 'bg-[#2A303C] text-white'} font-semibold" : 'bg-[#313131] text-white'} font-semibold"
aria-current="page" aria-current="page"
> >
Annual Annual
@ -465,14 +465,14 @@
class="cursor-pointer inline-block w-full py-1.5 text-sm {filterRule === class="cursor-pointer inline-block w-full py-1.5 text-sm {filterRule ===
'quartely' 'quartely'
? 'bg-[#fff] text-black' ? 'bg-[#fff] text-black'
: 'bg-[#2A303C] text-white'} font-semibold rounded-r-md" : 'bg-[#313131] text-white'} font-semibold rounded-r-md"
> >
Quartely Quartely
</label> </label>
{:else} {:else}
<a <a
href="/pricing" href="/pricing"
class="flex flex-row items-center m-auto justify-center cursor-pointer inline-block w-full py-1.5 bg-[#2A303C] font-semibold text-white rounded-r-md" class="flex flex-row items-center m-auto justify-center cursor-pointer inline-block w-full py-1.5 bg-[#313131] font-semibold text-white rounded-r-md"
> >
<span class="">Quarterly</span> <span class="">Quarterly</span>
<svg <svg
@ -596,7 +596,7 @@
<div class="sm:w-full"> <div class="sm:w-full">
<div class="relative"> <div class="relative">
<select <select
class="w-36 select select-bordered select-sm p-0 pl-5 overflow-y-auto bg-[#2A303C]" class="w-36 select select-bordered select-sm p-0 pl-5 overflow-y-auto bg-[#313131]"
on:change={changeStatement} on:change={changeStatement}
> >
<option disabled>Choose an Cash Flow Variable</option> <option disabled>Choose an Cash Flow Variable</option>

8
src/routes/stocks/[tickerID]/financials/ratios/+page.svelte
View File

@ -416,7 +416,7 @@
class="cursor-pointer rounded-l-md inline-block w-full text-sm py-1.5 {filterRule === class="cursor-pointer rounded-l-md inline-block w-full text-sm py-1.5 {filterRule ===
'annual' 'annual'
? 'bg-[#fff] text-black' ? 'bg-[#fff] text-black'
: 'bg-[#2A303C] text-white'} font-semibold" : 'bg-[#313131] text-white'} font-semibold"
aria-current="page" aria-current="page"
> >
Annual Annual
@ -429,14 +429,14 @@
class="cursor-pointer inline-block w-full py-1.5 text-sm {filterRule === class="cursor-pointer inline-block w-full py-1.5 text-sm {filterRule ===
'quartely' 'quartely'
? 'bg-[#fff] text-black' ? 'bg-[#fff] text-black'
: 'bg-[#2A303C] text-white'} font-semibold rounded-r-md" : 'bg-[#313131] text-white'} font-semibold rounded-r-md"
> >
Quartely Quartely
</label> </label>
{:else} {:else}
<a <a
href="/pricing" href="/pricing"
class="flex flex-row items-center m-auto justify-center cursor-pointer inline-block w-full py-1.5 bg-[#2A303C] font-semibold text-white rounded-r-md" class="flex flex-row items-center m-auto justify-center cursor-pointer inline-block w-full py-1.5 bg-[#313131] font-semibold text-white rounded-r-md"
> >
<span class="">Quarterly</span> <span class="">Quarterly</span>
<svg <svg
@ -560,7 +560,7 @@
<div class="sm:w-full"> <div class="sm:w-full">
<div class="relative"> <div class="relative">
<select <select
class="w-36 select select-bordered select-sm p-0 pl-5 overflow-y-auto bg-[#2A303C]" class="w-36 select select-bordered select-sm p-0 pl-5 overflow-y-auto bg-[#313131]"
on:change={changeStatement} on:change={changeStatement}
> >
<option disabled>Choose an Income Variable</option> <option disabled>Choose an Income Variable</option>

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

@ -696,7 +696,7 @@
<div class="flex flex-row items-center w-full mt-10"> <div class="flex flex-row items-center w-full mt-10">
<select <select
class="ml-1 w-40 select select-bordered select-sm p-0 pl-5 bg-[#2A303C]" class="ml-1 w-40 select select-bordered select-sm p-0 pl-5 bg-[#313131]"
on:change={changeTimePeriod} on:change={changeTimePeriod}
> >
<option disabled>Choose a time period</option> <option disabled>Choose a time period</option>
@ -708,7 +708,7 @@
</select> </select>
<select <select
class="ml-auto sm:ml-3 w-40 select select-bordered select-sm p-0 pl-5 bg-[#2A303C]" class="ml-auto sm:ml-3 w-40 select select-bordered select-sm p-0 pl-5 bg-[#313131]"
on:change={changeVolumeOI} on:change={changeVolumeOI}
> >
<option disabled>Choose a category</option> <option disabled>Choose a category</option>
@ -812,7 +812,7 @@
{#if activeIdx === 1} {#if activeIdx === 1}
<div class="relative mb-6"> <div class="relative mb-6">
<select <select
class="w-48 select select-bordered select-sm p-0 pl-5 overflow-y-auto bg-[#2A303C]" class="w-48 select select-bordered select-sm p-0 pl-5 overflow-y-auto bg-[#313131]"
on:change={changeStatement} on:change={changeStatement}
> >
<option disabled>Choose an Expiration Date</option> <option disabled>Choose an Expiration Date</option>

6
src/routes/stocks/[tickerID]/statistics/market-cap/+page.svelte
View File

@ -595,7 +595,7 @@
class="cursor-pointer rounded-l-lg inline-block w-full py-2.5 text-white {filterRule === class="cursor-pointer rounded-l-lg inline-block w-full py-2.5 text-white {filterRule ===
'annual' 'annual'
? 'bg-[#fff]' ? 'bg-[#fff]'
: 'bg-[#2A303C]'} font-semibold border-r border-gray-600" : 'bg-[#313131]'} font-semibold border-r border-gray-600"
aria-current="page" aria-current="page"
> >
Annual Annual
@ -608,14 +608,14 @@
class="cursor-pointer inline-block w-full py-2.5 {filterRule === class="cursor-pointer inline-block w-full py-2.5 {filterRule ===
'quarterly' 'quarterly'
? 'bg-[#fff]' ? 'bg-[#fff]'
: 'bg-[#2A303C]'} font-semibold text-white rounded-r-lg" : 'bg-[#313131]'} font-semibold text-white rounded-r-lg"
> >
Quartely Quartely
</label> </label>
{:else} {:else}
<a <a
href="/pricing" href="/pricing"
class="flex flex-row items-center m-auto justify-center cursor-pointer inline-block w-full py-2.5 bg-[#2A303C] font-semibold text-white rounded-r-lg" class="flex flex-row items-center m-auto justify-center cursor-pointer inline-block w-full py-2.5 bg-[#313131] font-semibold text-white rounded-r-lg"
> >
<span class="">Quarterly</span> <span class="">Quarterly</span>
<svg <svg