From b5417f20e411842f49e076dd4257a41398d10ee2 Mon Sep 17 00:00:00 2001 From: MuslemRahimi Date: Sat, 9 Nov 2024 11:38:39 +0100 Subject: [PATCH] ui fix --- src/lib/assets/style_quill.css | 2 +- src/lib/components/ImpliedVolatility.svelte | 548 ++++++------------ src/lib/components/MobileCommentEditor.svelte | 4 +- src/lib/components/OptionsData.svelte | 2 +- src/lib/components/TrendAnalysis.svelte | 2 +- src/routes/crypto/[tickerID]/+layout.svelte | 4 +- src/routes/economic-indicator/+page.svelte | 18 +- src/routes/etf/[tickerID]/+layout.svelte | 4 +- .../etf/[tickerID]/options/+page.svelte | 6 +- src/routes/ipos/[slug]/+page.svelte | 2 +- src/routes/register/+page.svelte | 2 +- .../stocks/[tickerID]/financials/+page.svelte | 8 +- .../financials/balance-sheet/+page.svelte | 8 +- .../financials/cash-flow/+page.svelte | 8 +- .../[tickerID]/financials/ratios/+page.svelte | 8 +- .../stocks/[tickerID]/options/+page.svelte | 6 +- .../statistics/market-cap/+page.svelte | 6 +- 17 files changed, 222 insertions(+), 416 deletions(-) diff --git a/src/lib/assets/style_quill.css b/src/lib/assets/style_quill.css index 41fa79be..0adde0e8 100644 --- a/src/lib/assets/style_quill.css +++ b/src/lib/assets/style_quill.css @@ -886,7 +886,7 @@ background-color: #fff; } .ql-toolbar.ql-snow { - border: 1px solid #2a303c; + border: 1px solid #313131; box-sizing: border-box; font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif; padding: 8px; diff --git a/src/lib/components/ImpliedVolatility.svelte b/src/lib/components/ImpliedVolatility.svelte index f145d56c..da5da78f 100644 --- a/src/lib/components/ImpliedVolatility.svelte +++ b/src/lib/components/ImpliedVolatility.svelte @@ -1,399 +1,199 @@ - -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; - - - - - -
-
- -
- - -
- - {#if data?.user?.tier === 'Pro'} - {#if isLoaded} - + {#if data?.user?.tier === "Pro"} + {#if isLoaded} {#if rawData?.length !== 0} - -
+
- Based on the past 12 months of historical data, {$displayCompanyName} has an IV Rank of {ivRank}%, with the current implied volatility standing at {rawData?.slice(-1)?.at(0)?.iv60}%. + Based on the past 12 months of historical data, {$displayCompanyName} + has an IV Rank of {ivRank}%, + with the current implied volatility standing at + {rawData?.slice(-1)?.at(0)?.iv60}%.
-
- - - - - -
- - -
-
- -
- -
-
- - - + + + +
+
+ +
+
+ +
+
+ + + Price - -
-
- - - - Implied Volatility - + +
+
+ + + + Implied Volatility +
-
- - - - Realized Volatility - +
+ + + + Realized Volatility +
- -
- - -

+

+ +

Latest Information -

- - -
+ + +
- - - - - - - - - - - - + + + + + + + + + + + + -
- Date - - {formatDateRange(rawData?.slice(-1)?.at(0)?.date)} -
- IV Range - - {lowestIV+'%'+'-'+highestIV+'%'} -
- RV Range - - {lowestRV+'%'+'-'+highestRV+'%'} -
+ Date + + {formatDateRange(rawData?.slice(-1)?.at(0)?.date)} +
+ IV Range + + {lowestIV + "%" + "-" + highestIV + "%"} +
+ RV Range + + {lowestRV + "%" + "-" + highestRV + "%"} +
+
- - - {/if} - - {:else} + {:else}
-
-
- {/if} - - {:else} -
- - Unlock content with Pro Subscription
- {/if} - -
-
- - - - - \ No newline at end of file + diff --git a/src/lib/components/MobileCommentEditor.svelte b/src/lib/components/MobileCommentEditor.svelte index e58c5c35..5cb3ec8f 100644 --- a/src/lib/components/MobileCommentEditor.svelte +++ b/src/lib/components/MobileCommentEditor.svelte @@ -254,7 +254,7 @@
diff --git a/src/lib/components/TrendAnalysis.svelte b/src/lib/components/TrendAnalysis.svelte index fdaee621..d8d3be07 100644 --- a/src/lib/components/TrendAnalysis.svelte +++ b/src/lib/components/TrendAnalysis.svelte @@ -176,7 +176,7 @@
@@ -794,7 +800,7 @@ class="cursor-pointer rounded-l-md inline-block w-full py-1.5 {filterRule === 'annual' ? '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" > Annual @@ -807,14 +813,14 @@ class="cursor-pointer inline-block w-full py-1.5 {filterRule === 'quarterly' ? 'bg-[#fff] text-black' - : 'bg-[#2A303C] text-white'} font-semibold rounded-r-md" + : 'bg-[#313131] text-white'} font-semibold rounded-r-md" > Quartely {:else} Quarterly Portfolio {:else} -