bugfixing chart
This commit is contained in:
MuslemRahimi
parent
e8b80ad436
commit
d431683e8b
@ -1,107 +1,48 @@
|
||||
let companyName;
|
||||
|
||||
|
||||
function cleanString(input) {
|
||||
// Define a list of substrings to remove (case insensitive)
|
||||
const substringsToRemove = [
|
||||
'Depositary',
|
||||
'Inc.',
|
||||
'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 cleanString = (input) => {
|
||||
const substringsToRemove = [
|
||||
'Depositary', 'Inc.', 'Incorporated', 'Holdings', 'Corporation', 'Corporations',
|
||||
'LLC', 'Holdings plc American Depositary Shares', 'Holding Corporation', 'Oyj',
|
||||
'Company', 'The', 'plc',
|
||||
];
|
||||
const pattern = new RegExp(`\\b(${substringsToRemove.join('|')})\\b|,`, 'gi');
|
||||
return input?.replace(pattern, '').trim();
|
||||
};
|
||||
|
||||
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 response = await fetch(fastifyURL+'/all-watchlists', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
"Content-Type": "application/json"
|
||||
},
|
||||
body: JSON.stringify(postData)
|
||||
});
|
||||
const fetchFromFastify = async (fastifyURL, endpoint, userId) => {
|
||||
const response = await fetch(`${fastifyURL}${endpoint}`, {
|
||||
method: 'POST',
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ userId })
|
||||
});
|
||||
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;
|
||||
return output;
|
||||
}
|
||||
const endpoints = [
|
||||
'/etf-profile', '/similar-etfs', '/etf-country-weighting', '/etf-holdings',
|
||||
'/stock-dividend', '/stock-quote', '/wiim', '/one-day-price'
|
||||
];
|
||||
|
||||
async function fetchPortfolio(fastifyURL, userId)
|
||||
{
|
||||
const postData = {'userId': userId};
|
||||
|
||||
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 promises = [
|
||||
...endpoints.map(endpoint => fetchData(apiURL, apiKey, endpoint, tickerID)),
|
||||
fetchFromFastify(fastifyURL, '/all-watchlists', user?.id),
|
||||
fetchFromFastify(fastifyURL, '/get-portfolio-data', user?.id)
|
||||
];
|
||||
|
||||
const [
|
||||
@ -117,11 +58,7 @@ const promises = [
|
||||
getUserPortfolio,
|
||||
] = await Promise.all(promises);
|
||||
|
||||
|
||||
setHeaders({
|
||||
'cache-control': 'public, max-age=300'
|
||||
});
|
||||
|
||||
setHeaders({ 'cache-control': 'public, max-age=300' });
|
||||
|
||||
return {
|
||||
getETFProfile,
|
||||
@ -134,9 +71,7 @@ const promises = [
|
||||
getOneDayPrice,
|
||||
getUserWatchlist,
|
||||
getUserPortfolio,
|
||||
companyName,
|
||||
companyName: cleanString(getETFProfile?.[0]?.name),
|
||||
wsURL,
|
||||
};
|
||||
|
||||
|
||||
};
|
||||
};
|
||||
@ -45,6 +45,10 @@
|
||||
|
||||
|
||||
onMount(async() => {
|
||||
|
||||
if (chart) {
|
||||
chart.timeScale().fitContent();
|
||||
}
|
||||
WIIM = (await import('$lib/components/WIIM.svelte')).default;
|
||||
StockSplits = (await import('$lib/components/StockSplits.svelte')).default;
|
||||
|
||||
@ -898,226 +902,228 @@ function changeChartType() {
|
||||
No data available
|
||||
</h2>
|
||||
{:else}
|
||||
|
||||
<Chart {...options} autoSize={true} ref={(ref) => chart = ref} on:crosshairMove={handleCrosshairMove} >
|
||||
|
||||
{#if displayData === '1D'}
|
||||
{#if displayChartType === 'line'}
|
||||
<AreaSeries
|
||||
data={oneDayPrice?.map(({ time, close }) => ({ time, value: close }))}
|
||||
lineWidth={1.5}
|
||||
priceScaleId="left"
|
||||
lineColor={colorChange}
|
||||
topColor={topColorChange}
|
||||
bottomColor={bottomColorChange}
|
||||
crosshairMarkerVisible={false}
|
||||
ref={handleSeriesReference}
|
||||
priceLineVisible= {false}
|
||||
lastPriceAnimation={1}
|
||||
>
|
||||
<PriceLine
|
||||
price={oneDayPrice?.at(0)?.close}
|
||||
lineWidth = {1}
|
||||
color="#fff"
|
||||
/>
|
||||
</AreaSeries>
|
||||
{:else}
|
||||
<CandlestickSeries
|
||||
data={oneDayPrice}
|
||||
<div class="chart-container">
|
||||
<Chart {...options} autoSize={true} ref={(ref) => chart = ref} on:crosshairMove={handleCrosshairMove} >
|
||||
|
||||
{#if displayData === '1D'}
|
||||
{#if displayChartType === 'line'}
|
||||
<AreaSeries
|
||||
data={oneDayPrice?.map(({ time, close }) => ({ time, value: close }))}
|
||||
lineWidth={1.5}
|
||||
priceScaleId="left"
|
||||
lineColor={colorChange}
|
||||
topColor={topColorChange}
|
||||
bottomColor={bottomColorChange}
|
||||
crosshairMarkerVisible={false}
|
||||
ref={handleSeriesReference}
|
||||
priceLineVisible= {false}
|
||||
lastPriceAnimation={1}
|
||||
>
|
||||
<PriceLine
|
||||
price={oneDayPrice?.at(0)?.close}
|
||||
lineWidth = {1}
|
||||
color="#fff"
|
||||
/>
|
||||
</CandlestickSeries>
|
||||
{/if}
|
||||
{:else if displayData === '1W'}
|
||||
{#if displayChartType === 'line'}
|
||||
<AreaSeries
|
||||
data={oneWeekPrice?.map(({ time, close }) => ({ time, value: close }))}
|
||||
lineWidth={1.5}
|
||||
priceScaleId="left"
|
||||
lineColor={colorChange}
|
||||
topColor={topColorChange}
|
||||
bottomColor={bottomColorChange}
|
||||
crosshairMarkerVisible={false}
|
||||
ref={handleSeriesReference}
|
||||
priceLineVisible= {false}
|
||||
lastPriceAnimation={1}
|
||||
>
|
||||
<PriceLine
|
||||
price={oneWeekPrice?.at(0)?.close}
|
||||
lineWidth = {1}
|
||||
color="#fff"
|
||||
/>
|
||||
</AreaSeries>
|
||||
{:else}
|
||||
<CandlestickSeries
|
||||
data={oneWeekPrice}
|
||||
<PriceLine
|
||||
price={oneDayPrice?.at(0)?.close}
|
||||
lineWidth = {1}
|
||||
color="#fff"
|
||||
/>
|
||||
</AreaSeries>
|
||||
{:else}
|
||||
<CandlestickSeries
|
||||
data={oneDayPrice}
|
||||
crosshairMarkerVisible={false}
|
||||
ref={handleSeriesReference}
|
||||
priceLineVisible= {false}
|
||||
>
|
||||
<PriceLine
|
||||
price={oneDayPrice?.at(0)?.close}
|
||||
lineWidth = {1}
|
||||
color="#fff"
|
||||
/>
|
||||
</CandlestickSeries>
|
||||
{/if}
|
||||
{:else if displayData === '1W'}
|
||||
{#if displayChartType === 'line'}
|
||||
<AreaSeries
|
||||
data={oneWeekPrice?.map(({ time, close }) => ({ time, value: close }))}
|
||||
lineWidth={1.5}
|
||||
priceScaleId="left"
|
||||
lineColor={colorChange}
|
||||
topColor={topColorChange}
|
||||
bottomColor={bottomColorChange}
|
||||
crosshairMarkerVisible={false}
|
||||
ref={handleSeriesReference}
|
||||
priceLineVisible= {false}
|
||||
lastPriceAnimation={1}
|
||||
>
|
||||
<PriceLine
|
||||
price={oneWeekPrice?.at(0)?.close}
|
||||
lineWidth = {1}
|
||||
color="#fff"
|
||||
/>
|
||||
</CandlestickSeries>
|
||||
{/if}
|
||||
|
||||
{:else if displayData === '1M'}
|
||||
{#if displayChartType === 'line'}
|
||||
<AreaSeries
|
||||
data={oneMonthPrice?.map(({ time, close }) => ({ time, value: close }))}
|
||||
lineWidth={1.5}
|
||||
priceScaleId="left"
|
||||
lineColor={colorChange}
|
||||
topColor={topColorChange}
|
||||
bottomColor={bottomColorChange}
|
||||
crosshairMarkerVisible={false}
|
||||
ref={handleSeriesReference}
|
||||
priceLineVisible= {false}
|
||||
lastPriceAnimation={1}
|
||||
>
|
||||
<PriceLine
|
||||
price={oneMonthPrice?.at(0)?.close}
|
||||
lineWidth = {1}
|
||||
color="#fff"
|
||||
/>
|
||||
</AreaSeries>
|
||||
{:else}
|
||||
<CandlestickSeries
|
||||
data={oneMonthPrice}
|
||||
<PriceLine
|
||||
price={oneWeekPrice?.at(0)?.close}
|
||||
lineWidth = {1}
|
||||
color="#fff"
|
||||
/>
|
||||
</AreaSeries>
|
||||
{:else}
|
||||
<CandlestickSeries
|
||||
data={oneWeekPrice}
|
||||
crosshairMarkerVisible={false}
|
||||
ref={handleSeriesReference}
|
||||
priceLineVisible= {false}
|
||||
>
|
||||
<PriceLine
|
||||
price={oneWeekPrice?.at(0)?.close}
|
||||
lineWidth = {1}
|
||||
color="#fff"
|
||||
/>
|
||||
</CandlestickSeries>
|
||||
{/if}
|
||||
|
||||
{:else if displayData === '1M'}
|
||||
{#if displayChartType === 'line'}
|
||||
<AreaSeries
|
||||
data={oneMonthPrice?.map(({ time, close }) => ({ time, value: close }))}
|
||||
lineWidth={1.5}
|
||||
priceScaleId="left"
|
||||
lineColor={colorChange}
|
||||
topColor={topColorChange}
|
||||
bottomColor={bottomColorChange}
|
||||
crosshairMarkerVisible={false}
|
||||
ref={handleSeriesReference}
|
||||
priceLineVisible= {false}
|
||||
lastPriceAnimation={1}
|
||||
>
|
||||
<PriceLine
|
||||
price={oneMonthPrice?.at(0)?.close}
|
||||
lineWidth = {1}
|
||||
color="#fff"
|
||||
/>
|
||||
</CandlestickSeries>
|
||||
{/if}
|
||||
|
||||
|
||||
{:else if displayData === '6M'}
|
||||
{#if displayChartType === 'line'}
|
||||
<AreaSeries
|
||||
data={sixMonthPrice?.map(({ time, close }) => ({ time, value: close }))}
|
||||
lineWidth={1.5}
|
||||
priceScaleId="left"
|
||||
lineColor={colorChange}
|
||||
topColor={topColorChange}
|
||||
bottomColor={bottomColorChange}
|
||||
crosshairMarkerVisible={false}
|
||||
ref={handleSeriesReference}
|
||||
priceLineVisible= {false}
|
||||
lastPriceAnimation={1}
|
||||
>
|
||||
<PriceLine
|
||||
price={sixMonthPrice?.at(0)?.close}
|
||||
lineWidth = {1}
|
||||
color="#fff"
|
||||
/>
|
||||
</AreaSeries>
|
||||
{:else}
|
||||
<CandlestickSeries
|
||||
data={sixMonthPrice}
|
||||
<PriceLine
|
||||
price={oneMonthPrice?.at(0)?.close}
|
||||
lineWidth = {1}
|
||||
color="#fff"
|
||||
/>
|
||||
</AreaSeries>
|
||||
{:else}
|
||||
<CandlestickSeries
|
||||
data={oneMonthPrice}
|
||||
crosshairMarkerVisible={false}
|
||||
ref={handleSeriesReference}
|
||||
priceLineVisible= {false}
|
||||
>
|
||||
<PriceLine
|
||||
price={oneMonthPrice?.at(0)?.close}
|
||||
lineWidth = {1}
|
||||
color="#fff"
|
||||
/>
|
||||
</CandlestickSeries>
|
||||
{/if}
|
||||
|
||||
|
||||
{:else if displayData === '6M'}
|
||||
{#if displayChartType === 'line'}
|
||||
<AreaSeries
|
||||
data={sixMonthPrice?.map(({ time, close }) => ({ time, value: close }))}
|
||||
lineWidth={1.5}
|
||||
priceScaleId="left"
|
||||
lineColor={colorChange}
|
||||
topColor={topColorChange}
|
||||
bottomColor={bottomColorChange}
|
||||
crosshairMarkerVisible={false}
|
||||
ref={handleSeriesReference}
|
||||
priceLineVisible= {false}
|
||||
lastPriceAnimation={1}
|
||||
>
|
||||
<PriceLine
|
||||
price={sixMonthPrice?.at(0)?.close}
|
||||
lineWidth = {1}
|
||||
color="#fff"
|
||||
/>
|
||||
</CandlestickSeries>
|
||||
{/if}
|
||||
|
||||
|
||||
|
||||
{:else if displayData === '1Y'}
|
||||
{#if displayChartType === 'line'}
|
||||
<AreaSeries
|
||||
data={oneYearPrice?.map(({ time, close }) => ({ time, value: close }))}
|
||||
lineWidth={1.5}
|
||||
priceScaleId="left"
|
||||
lineColor={colorChange}
|
||||
topColor={topColorChange}
|
||||
bottomColor={bottomColorChange}
|
||||
crosshairMarkerVisible={false}
|
||||
ref={handleSeriesReference}
|
||||
priceLineVisible= {false}
|
||||
lastPriceAnimation={1}
|
||||
>
|
||||
<PriceLine
|
||||
price={oneYearPrice?.at(0)?.close}
|
||||
lineWidth = {1}
|
||||
color="#fff"
|
||||
/>
|
||||
</AreaSeries>
|
||||
{:else}
|
||||
<CandlestickSeries
|
||||
data={oneYearPrice}
|
||||
<PriceLine
|
||||
price={sixMonthPrice?.at(0)?.close}
|
||||
lineWidth = {1}
|
||||
color="#fff"
|
||||
/>
|
||||
</AreaSeries>
|
||||
{:else}
|
||||
<CandlestickSeries
|
||||
data={sixMonthPrice}
|
||||
crosshairMarkerVisible={false}
|
||||
ref={handleSeriesReference}
|
||||
priceLineVisible= {false}
|
||||
>
|
||||
<PriceLine
|
||||
price={sixMonthPrice?.at(0)?.close}
|
||||
lineWidth = {1}
|
||||
color="#fff"
|
||||
/>
|
||||
</CandlestickSeries>
|
||||
{/if}
|
||||
|
||||
|
||||
|
||||
{:else if displayData === '1Y'}
|
||||
{#if displayChartType === 'line'}
|
||||
<AreaSeries
|
||||
data={oneYearPrice?.map(({ time, close }) => ({ time, value: close }))}
|
||||
lineWidth={1.5}
|
||||
priceScaleId="left"
|
||||
lineColor={colorChange}
|
||||
topColor={topColorChange}
|
||||
bottomColor={bottomColorChange}
|
||||
crosshairMarkerVisible={false}
|
||||
ref={handleSeriesReference}
|
||||
priceLineVisible= {false}
|
||||
lastPriceAnimation={1}
|
||||
>
|
||||
<PriceLine
|
||||
price={oneYearPrice?.at(0)?.close}
|
||||
lineWidth = {1}
|
||||
color="#fff"
|
||||
/>
|
||||
</CandlestickSeries>
|
||||
{/if}
|
||||
|
||||
|
||||
|
||||
{:else if displayData === 'MAX'}
|
||||
{#if displayChartType === 'line'}
|
||||
<AreaSeries
|
||||
data={threeYearPrice?.map(({ time, close }) => ({ time, value: close }))}
|
||||
lineWidth={1.5}
|
||||
priceScaleId="left"
|
||||
lineColor={colorChange}
|
||||
topColor={topColorChange}
|
||||
bottomColor={bottomColorChange}
|
||||
crosshairMarkerVisible={false}
|
||||
ref={handleSeriesReference}
|
||||
priceLineVisible= {false}
|
||||
lastPriceAnimation={1}
|
||||
>
|
||||
<PriceLine
|
||||
price={threeYearPrice?.at(0)?.close}
|
||||
lineWidth = {1}
|
||||
color="#fff"
|
||||
/>
|
||||
</AreaSeries>
|
||||
{:else}
|
||||
<CandlestickSeries
|
||||
data={threeYearPrice}
|
||||
<PriceLine
|
||||
price={oneYearPrice?.at(0)?.close}
|
||||
lineWidth = {1}
|
||||
color="#fff"
|
||||
/>
|
||||
</AreaSeries>
|
||||
{:else}
|
||||
<CandlestickSeries
|
||||
data={oneYearPrice}
|
||||
crosshairMarkerVisible={false}
|
||||
ref={handleSeriesReference}
|
||||
priceLineVisible= {false}
|
||||
>
|
||||
<PriceLine
|
||||
price={oneYearPrice?.at(0)?.close}
|
||||
lineWidth = {1}
|
||||
color="#fff"
|
||||
/>
|
||||
</CandlestickSeries>
|
||||
{/if}
|
||||
|
||||
|
||||
|
||||
{:else if displayData === 'MAX'}
|
||||
{#if displayChartType === 'line'}
|
||||
<AreaSeries
|
||||
data={threeYearPrice?.map(({ time, close }) => ({ time, value: close }))}
|
||||
lineWidth={1.5}
|
||||
priceScaleId="left"
|
||||
lineColor={colorChange}
|
||||
topColor={topColorChange}
|
||||
bottomColor={bottomColorChange}
|
||||
crosshairMarkerVisible={false}
|
||||
ref={handleSeriesReference}
|
||||
priceLineVisible= {false}
|
||||
lastPriceAnimation={1}
|
||||
>
|
||||
<PriceLine
|
||||
price={threeYearPrice?.at(0)?.close}
|
||||
lineWidth = {1}
|
||||
color="#fff"
|
||||
/>
|
||||
</CandlestickSeries>
|
||||
<PriceLine
|
||||
price={threeYearPrice?.at(0)?.close}
|
||||
lineWidth = {1}
|
||||
color="#fff"
|
||||
/>
|
||||
</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>
|
||||
</Chart>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
</div>
|
||||
@ -1474,7 +1480,13 @@ function changeChartType() {
|
||||
|
||||
<style lang='scss'>
|
||||
|
||||
|
||||
.chart-container {
|
||||
width: 100%;
|
||||
height: 350px;
|
||||
min-height: 300px;
|
||||
display: block; /* Ensures the container is visible */
|
||||
}
|
||||
|
||||
canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user