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

bugfixing chart

Browse Source
This commit is contained in:
MuslemRahimi 2024-07-27 01:39:27 +02:00
parent e8b80ad436
commit d431683e8b
2 changed files with 249 additions and 302 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

149
src/routes/etf/[tickerID]/+layout.server.ts
View File

@ -1,107 +1,48 @@
let companyName; const cleanString = (input) => {
const substringsToRemove = [
'Depositary', 'Inc.', 'Incorporated', 'Holdings', 'Corporation', 'Corporations',
function cleanString(input) { 'LLC', 'Holdings plc American Depositary Shares', 'Holding Corporation', 'Oyj',
// Define a list of substrings to remove (case insensitive) 'Company', 'The', 'plc',
const substringsToRemove = [ ];
'Depositary', const pattern = new RegExp(`\\b(${substringsToRemove.join('|')})\\b|,`, 'gi');
'Inc.', return input?.replace(pattern, '').trim();
'Incorporated',
'Holdings',
'Corporation',
'Corporations',
'LLC',
'Holdings plc American Depositary Shares',
'Holding Corporation',
'Oyj',
'Company',
'The',
'plc',
];
// Create a regular expression pattern that matches any of the substrings surrounded by word boundaries
const pattern = new RegExp(`\\b(${substringsToRemove.join('|')})\\b|,`, 'gi');
// Use the replace method to remove the specified substrings and commas, then trim the result
return input?.replace(pattern, '')?.trim();
}
const fetchData = async (apiURL, apiKey, endpoint, ticker) => {
const postData = {
ticker: ticker
};
const response = await fetch(apiURL + endpoint, {
method: 'POST',
headers: {
"Content-Type": "application/json", "X-API-KEY": apiKey
},
body: JSON.stringify(postData)
});
const output = await response.json();
if(endpoint === '/etf-profile')
{
companyName = cleanString(output?.at(0)?.name);
}
return output;
}; };
const fetchWatchlist = async (fastifyURL, userId) => { const fetchData = async (apiURL, apiKey, endpoint, ticker) => {
const response = await fetch(`${apiURL}${endpoint}`, {
method: 'POST',
headers: {
"Content-Type": "application/json",
"X-API-KEY": apiKey
},
body: JSON.stringify({ ticker })
});
return response.json();
};
const postData = {'userId': userId} const fetchFromFastify = async (fastifyURL, endpoint, userId) => {
const response = await fetch(fastifyURL+'/all-watchlists', { const response = await fetch(`${fastifyURL}${endpoint}`, {
method: 'POST', method: 'POST',
headers: { headers: { "Content-Type": "application/json" },
"Content-Type": "application/json" body: JSON.stringify({ userId })
}, });
body: JSON.stringify(postData) const { items } = await response.json();
}); return items;
};
export const load = async ({ params, locals, setHeaders }) => {
const { apiURL, fastifyURL, apiKey, wsURL, user } = locals;
const { tickerID } = params;
const output = (await response.json())?.items; const endpoints = [
return output; '/etf-profile', '/similar-etfs', '/etf-country-weighting', '/etf-holdings',
} '/stock-dividend', '/stock-quote', '/wiim', '/one-day-price'
];
async function fetchPortfolio(fastifyURL, userId) const promises = [
{ ...endpoints.map(endpoint => fetchData(apiURL, apiKey, endpoint, tickerID)),
const postData = {'userId': userId}; fetchFromFastify(fastifyURL, '/all-watchlists', user?.id),
fetchFromFastify(fastifyURL, '/get-portfolio-data', user?.id)
const response = await fetch(fastifyURL+'/get-portfolio-data', {
method: 'POST',
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(postData)
});
const output = (await response.json())?.items;
return output
}
export const load = async ({ params, locals, setHeaders}) => {
let apiURL = locals?.apiURL;
let fastifyURL = locals?.fastifyURL;
let apiKey = locals?.apiKey;
let wsURL = locals?.wsURL;
const promises = [
fetchData(apiURL,apiKey, '/etf-profile', params.tickerID),
fetchData(apiURL,apiKey, '/similar-etfs', params.tickerID),
fetchData(apiURL,apiKey, '/etf-country-weighting', params.tickerID),
fetchData(apiURL,apiKey, '/etf-holdings', params.tickerID),
fetchData(apiURL,apiKey, '/stock-dividend',params.tickerID),
fetchData(apiURL,apiKey, '/stock-quote', params.tickerID),
fetchData(apiURL,apiKey, '/wiim',params.tickerID),
fetchData(apiURL,apiKey, '/one-day-price',params.tickerID),
fetchWatchlist(fastifyURL, locals?.user?.id),
fetchPortfolio(fastifyURL, locals?.user?.id)
]; ];
const [ const [
@ -117,11 +58,7 @@ const promises = [
getUserPortfolio, getUserPortfolio,
] = await Promise.all(promises); ] = await Promise.all(promises);
setHeaders({ 'cache-control': 'public, max-age=300' });
setHeaders({
'cache-control': 'public, max-age=300'
});
return { return {
getETFProfile, getETFProfile,
@ -134,9 +71,7 @@ const promises = [
getOneDayPrice, getOneDayPrice,
getUserWatchlist, getUserWatchlist,
getUserPortfolio, getUserPortfolio,
companyName, companyName: cleanString(getETFProfile?.[0]?.name),
wsURL, wsURL,
}; };
};
};

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

@ -45,6 +45,10 @@
onMount(async() => { onMount(async() => {
if (chart) {
chart.timeScale().fitContent();
}
WIIM = (await import('$lib/components/WIIM.svelte')).default; WIIM = (await import('$lib/components/WIIM.svelte')).default;
StockSplits = (await import('$lib/components/StockSplits.svelte')).default; StockSplits = (await import('$lib/components/StockSplits.svelte')).default;
@ -898,226 +902,228 @@ function changeChartType() {
No data available No data available
</h2> </h2>
{:else} {:else}
<Chart {...options} autoSize={true} ref={(ref) => chart = ref} on:crosshairMove={handleCrosshairMove} >
{#if displayData === '1D'} <div class="chart-container">
{#if displayChartType === 'line'} <Chart {...options} autoSize={true} ref={(ref) => chart = ref} on:crosshairMove={handleCrosshairMove} >
<AreaSeries
data={oneDayPrice?.map(({ time, close }) => ({ time, value: close }))} {#if displayData === '1D'}
lineWidth={1.5} {#if displayChartType === 'line'}
priceScaleId="left" <AreaSeries
lineColor={colorChange} data={oneDayPrice?.map(({ time, close }) => ({ time, value: close }))}
topColor={topColorChange} lineWidth={1.5}
bottomColor={bottomColorChange} priceScaleId="left"
crosshairMarkerVisible={false} lineColor={colorChange}
ref={handleSeriesReference} topColor={topColorChange}
priceLineVisible= {false} bottomColor={bottomColorChange}
lastPriceAnimation={1}
>
<PriceLine
price={oneDayPrice?.at(0)?.close}
lineWidth = {1}
color="#fff"
/>
</AreaSeries>
{:else}
<CandlestickSeries
data={oneDayPrice}
crosshairMarkerVisible={false} crosshairMarkerVisible={false}
ref={handleSeriesReference} ref={handleSeriesReference}
priceLineVisible= {false} priceLineVisible= {false}
lastPriceAnimation={1}
> >
<PriceLine <PriceLine
price={oneDayPrice?.at(0)?.close} price={oneDayPrice?.at(0)?.close}
lineWidth = {1} lineWidth = {1}
color="#fff" color="#fff"
/> />
</CandlestickSeries> </AreaSeries>
{/if} {:else}
{:else if displayData === '1W'} <CandlestickSeries
{#if displayChartType === 'line'} data={oneDayPrice}
<AreaSeries crosshairMarkerVisible={false}
data={oneWeekPrice?.map(({ time, close }) => ({ time, value: close }))} ref={handleSeriesReference}
lineWidth={1.5} priceLineVisible= {false}
priceScaleId="left" >
lineColor={colorChange} <PriceLine
topColor={topColorChange} price={oneDayPrice?.at(0)?.close}
bottomColor={bottomColorChange} lineWidth = {1}
crosshairMarkerVisible={false} color="#fff"
ref={handleSeriesReference} />
priceLineVisible= {false} </CandlestickSeries>
lastPriceAnimation={1} {/if}
> {:else if displayData === '1W'}
<PriceLine {#if displayChartType === 'line'}
price={oneWeekPrice?.at(0)?.close} <AreaSeries
lineWidth = {1} data={oneWeekPrice?.map(({ time, close }) => ({ time, value: close }))}
color="#fff" lineWidth={1.5}
/> priceScaleId="left"
</AreaSeries> lineColor={colorChange}
{:else} topColor={topColorChange}
<CandlestickSeries bottomColor={bottomColorChange}
data={oneWeekPrice}
crosshairMarkerVisible={false} crosshairMarkerVisible={false}
ref={handleSeriesReference} ref={handleSeriesReference}
priceLineVisible= {false} priceLineVisible= {false}
lastPriceAnimation={1}
> >
<PriceLine <PriceLine
price={oneWeekPrice?.at(0)?.close} price={oneWeekPrice?.at(0)?.close}
lineWidth = {1} lineWidth = {1}
color="#fff" color="#fff"
/> />
</CandlestickSeries> </AreaSeries>
{/if} {:else}
<CandlestickSeries
{:else if displayData === '1M'} data={oneWeekPrice}
{#if displayChartType === 'line'} crosshairMarkerVisible={false}
<AreaSeries ref={handleSeriesReference}
data={oneMonthPrice?.map(({ time, close }) => ({ time, value: close }))} priceLineVisible= {false}
lineWidth={1.5} >
priceScaleId="left" <PriceLine
lineColor={colorChange} price={oneWeekPrice?.at(0)?.close}
topColor={topColorChange} lineWidth = {1}
bottomColor={bottomColorChange} color="#fff"
crosshairMarkerVisible={false} />
ref={handleSeriesReference} </CandlestickSeries>
priceLineVisible= {false} {/if}
lastPriceAnimation={1}
> {:else if displayData === '1M'}
<PriceLine {#if displayChartType === 'line'}
price={oneMonthPrice?.at(0)?.close} <AreaSeries
lineWidth = {1} data={oneMonthPrice?.map(({ time, close }) => ({ time, value: close }))}
color="#fff" lineWidth={1.5}
/> priceScaleId="left"
</AreaSeries> lineColor={colorChange}
{:else} topColor={topColorChange}
<CandlestickSeries bottomColor={bottomColorChange}
data={oneMonthPrice}
crosshairMarkerVisible={false} crosshairMarkerVisible={false}
ref={handleSeriesReference} ref={handleSeriesReference}
priceLineVisible= {false} priceLineVisible= {false}
lastPriceAnimation={1}
> >
<PriceLine <PriceLine
price={oneMonthPrice?.at(0)?.close} price={oneMonthPrice?.at(0)?.close}
lineWidth = {1} lineWidth = {1}
color="#fff" color="#fff"
/> />
</CandlestickSeries> </AreaSeries>
{/if} {:else}
<CandlestickSeries
data={oneMonthPrice}
{:else if displayData === '6M'} crosshairMarkerVisible={false}
{#if displayChartType === 'line'} ref={handleSeriesReference}
<AreaSeries priceLineVisible= {false}
data={sixMonthPrice?.map(({ time, close }) => ({ time, value: close }))} >
lineWidth={1.5} <PriceLine
priceScaleId="left" price={oneMonthPrice?.at(0)?.close}
lineColor={colorChange} lineWidth = {1}
topColor={topColorChange} color="#fff"
bottomColor={bottomColorChange} />
crosshairMarkerVisible={false} </CandlestickSeries>
ref={handleSeriesReference} {/if}
priceLineVisible= {false}
lastPriceAnimation={1}
> {:else if displayData === '6M'}
<PriceLine {#if displayChartType === 'line'}
price={sixMonthPrice?.at(0)?.close} <AreaSeries
lineWidth = {1} data={sixMonthPrice?.map(({ time, close }) => ({ time, value: close }))}
color="#fff" lineWidth={1.5}
/> priceScaleId="left"
</AreaSeries> lineColor={colorChange}
{:else} topColor={topColorChange}
<CandlestickSeries bottomColor={bottomColorChange}
data={sixMonthPrice}
crosshairMarkerVisible={false} crosshairMarkerVisible={false}
ref={handleSeriesReference} ref={handleSeriesReference}
priceLineVisible= {false} priceLineVisible= {false}
lastPriceAnimation={1}
> >
<PriceLine <PriceLine
price={sixMonthPrice?.at(0)?.close} price={sixMonthPrice?.at(0)?.close}
lineWidth = {1} lineWidth = {1}
color="#fff" color="#fff"
/> />
</CandlestickSeries> </AreaSeries>
{/if} {:else}
<CandlestickSeries
data={sixMonthPrice}
crosshairMarkerVisible={false}
{:else if displayData === '1Y'} ref={handleSeriesReference}
{#if displayChartType === 'line'} priceLineVisible= {false}
<AreaSeries >
data={oneYearPrice?.map(({ time, close }) => ({ time, value: close }))} <PriceLine
lineWidth={1.5} price={sixMonthPrice?.at(0)?.close}
priceScaleId="left" lineWidth = {1}
lineColor={colorChange} color="#fff"
topColor={topColorChange} />
bottomColor={bottomColorChange} </CandlestickSeries>
crosshairMarkerVisible={false} {/if}
ref={handleSeriesReference}
priceLineVisible= {false}
lastPriceAnimation={1}
> {:else if displayData === '1Y'}
<PriceLine {#if displayChartType === 'line'}
price={oneYearPrice?.at(0)?.close} <AreaSeries
lineWidth = {1} data={oneYearPrice?.map(({ time, close }) => ({ time, value: close }))}
color="#fff" lineWidth={1.5}
/> priceScaleId="left"
</AreaSeries> lineColor={colorChange}
{:else} topColor={topColorChange}
<CandlestickSeries bottomColor={bottomColorChange}
data={oneYearPrice}
crosshairMarkerVisible={false} crosshairMarkerVisible={false}
ref={handleSeriesReference} ref={handleSeriesReference}
priceLineVisible= {false} priceLineVisible= {false}
lastPriceAnimation={1}
> >
<PriceLine <PriceLine
price={oneYearPrice?.at(0)?.close} price={oneYearPrice?.at(0)?.close}
lineWidth = {1} lineWidth = {1}
color="#fff" color="#fff"
/> />
</CandlestickSeries> </AreaSeries>
{/if} {:else}
<CandlestickSeries
data={oneYearPrice}
crosshairMarkerVisible={false}
{:else if displayData === 'MAX'} ref={handleSeriesReference}
{#if displayChartType === 'line'} priceLineVisible= {false}
<AreaSeries >
data={threeYearPrice?.map(({ time, close }) => ({ time, value: close }))} <PriceLine
lineWidth={1.5} price={oneYearPrice?.at(0)?.close}
priceScaleId="left" lineWidth = {1}
lineColor={colorChange} color="#fff"
topColor={topColorChange} />
bottomColor={bottomColorChange} </CandlestickSeries>
crosshairMarkerVisible={false} {/if}
ref={handleSeriesReference}
priceLineVisible= {false}
lastPriceAnimation={1}
> {:else if displayData === 'MAX'}
<PriceLine {#if displayChartType === 'line'}
price={threeYearPrice?.at(0)?.close} <AreaSeries
lineWidth = {1} data={threeYearPrice?.map(({ time, close }) => ({ time, value: close }))}
color="#fff" lineWidth={1.5}
/> priceScaleId="left"
</AreaSeries> lineColor={colorChange}
{:else} topColor={topColorChange}
<CandlestickSeries bottomColor={bottomColorChange}
data={threeYearPrice}
crosshairMarkerVisible={false} crosshairMarkerVisible={false}
ref={handleSeriesReference} ref={handleSeriesReference}
priceLineVisible= {false} priceLineVisible= {false}
lastPriceAnimation={1}
> >
<PriceLine <PriceLine
price={threeYearPrice?.at(0)?.close} price={threeYearPrice?.at(0)?.close}
lineWidth = {1} lineWidth = {1}
color="#fff" color="#fff"
/> />
</CandlestickSeries> </AreaSeries>
{:else}
<CandlestickSeries
data={threeYearPrice}
crosshairMarkerVisible={false}
ref={handleSeriesReference}
priceLineVisible= {false}
>
<PriceLine
price={threeYearPrice?.at(0)?.close}
lineWidth = {1}
color="#fff"
/>
</CandlestickSeries>
{/if}
{/if} {/if}
</Chart>
</div>
{/if}
</Chart>
{/if} {/if}
</div> </div>
@ -1474,7 +1480,13 @@ function changeChartType() {
<style lang='scss'> <style lang='scss'>
.chart-container {
width: 100%;
height: 350px;
min-height: 300px;
display: block; /* Ensures the container is visible */
}
canvas { canvas {
width: 100%; width: 100%;
height: 100%; height: 100%;