bugfixing chart

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

@@ -1,107 +1,48 @@
-let companyName;
+const cleanString = (input) => {
-
-
-function cleanString(input) {
-    // Define a list of substrings to remove (case insensitive)
   const substringsToRemove = [
-      'Depositary',
+    'Depositary', 'Inc.', 'Incorporated', 'Holdings', 'Corporation', 'Corporations',
-      'Inc.',
+    'LLC', 'Holdings plc American Depositary Shares', 'Holding Corporation', 'Oyj',
-      'Incorporated',
+    'Company', 'The', 'plc',
-      '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');
-  
+  return input?.replace(pattern, '').trim();
-    // 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 response = await fetch(`${apiURL}${endpoint}`, {
-  const postData = {
+    method: 'POST',
-    ticker: ticker
+    headers: {
+      "Content-Type": "application/json",
+      "X-API-KEY": apiKey
+    },
+    body: JSON.stringify({ ticker })
+  });
+  return response.json();
 };
 
-  const response = await fetch(apiURL + endpoint, {
+const fetchFromFastify = async (fastifyURL, endpoint, userId) => {
+  const response = await fetch(`${fastifyURL}${endpoint}`, {
     method: 'POST',
-    headers: {
+    headers: { "Content-Type": "application/json" },
-      "Content-Type": "application/json", "X-API-KEY": apiKey
+    body: JSON.stringify({ userId })
-    },
-    body: JSON.stringify(postData)
   });
-
+  const { items } = await response.json();
-  const output = await response.json();
+  return items;
-
-
-  if(endpoint === '/etf-profile')
-    {
-      companyName = cleanString(output?.at(0)?.name);
-    }
-  return output;
 };
 
-const fetchWatchlist = async (fastifyURL, userId) => {
-
-    const postData = {'userId': userId}
-    const response = await fetch(fastifyURL+'/all-watchlists', {
-        method: 'POST',
-        headers: {
-         "Content-Type": "application/json"
-        },
-        body: JSON.stringify(postData)
-    });
-
-
-    const output = (await response.json())?.items;
-    return output;
-}
-
-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 }) => {
+  const { apiURL, fastifyURL, apiKey, wsURL, user } = locals;
+  const { tickerID } = params;
 
-  let apiURL = locals?.apiURL;
+  const endpoints = [
-  let fastifyURL = locals?.fastifyURL;
+    '/etf-profile', '/similar-etfs', '/etf-country-weighting', '/etf-holdings',
-  let apiKey = locals?.apiKey;
+    '/stock-dividend', '/stock-quote', '/wiim', '/one-day-price'
-  let wsURL = locals?.wsURL;
+  ];
-
 
   const promises = [
-    fetchData(apiURL,apiKey, '/etf-profile', params.tickerID),
+    ...endpoints.map(endpoint => fetchData(apiURL, apiKey, endpoint, tickerID)),
-    fetchData(apiURL,apiKey, '/similar-etfs',  params.tickerID),
+    fetchFromFastify(fastifyURL, '/all-watchlists', user?.id),
-    fetchData(apiURL,apiKey, '/etf-country-weighting', params.tickerID),
+    fetchFromFastify(fastifyURL, '/get-portfolio-data', user?.id)
-    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 [
@@ -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,
   };
-
-  
 };

src/routes/stocks/[tickerID]/+page.svelte

@@ -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;
 
@@ -899,6 +903,7 @@ function changeChartType() {
                                     </h2>
                                     {:else}
                                     
+                                    <div class="chart-container">
                                       <Chart {...options} autoSize={true} ref={(ref) => chart = ref} on:crosshairMove={handleCrosshairMove} >
                                       
                                       {#if displayData === '1D'}
@@ -1118,6 +1123,7 @@ function changeChartType() {
     
                                       {/if}
                                       </Chart>
+                                    </div>
                                     {/if}
   
                                   </div>
@@ -1474,6 +1480,12 @@ function changeChartType() {
   
   <style lang='scss'>
      
+  .chart-container {
+    width: 100%;
+    height: 350px;
+    min-height: 300px;
+    display: block; /* Ensures the container is visible */
+  }
 
   canvas {
     width: 100%;