ui fixes

src/lib/components/BorrowedShare.svelte

@@ -2,7 +2,7 @@
     import { borrowedShareComponent, displayCompanyName, stockTicker, assetType, etfTicker, screenWidth, userRegion, getCache, setCache} from '$lib/store';
     import InfoModal from '$lib/components/InfoModal.svelte';
     import { Chart } from 'svelte-echarts'
-    import { abbreviateNumber, formatString } from "$lib/utils";
+    import { abbreviateNumber, formatDateRange } from "$lib/utils";
   
     import Lazy from 'svelte-lazy';
     export let data;
@@ -30,20 +30,6 @@
     let monthlyAvailableShares;
     let totalAvailableShares;
   
-    function formatDateRange(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);
-  
-    // Format first and last dates
-    const firstDateFormatted = firstDate.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', day: '2-digit' });
-    const lastDateFormatted = lastDate.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', day: '2-digit' });
-  
-    // Construct and return the formatted date range string
-    return `${firstDateFormatted} - ${lastDateFormatted}`;
-}
 
 function findLowestAndHighestFee(data, lastDateStr) {
     // Convert lastDateStr to Date object

src/lib/components/DarkPool.svelte

@@ -2,7 +2,7 @@
     import { darkPoolComponent, displayCompanyName, stockTicker, assetType, etfTicker, screenWidth, userRegion, getCache, setCache} from '$lib/store';
     import InfoModal from '$lib/components/InfoModal.svelte';
     import { Chart } from 'svelte-echarts'
-    import { abbreviateNumber } from "$lib/utils";
+    import { abbreviateNumber, formatDateRange } from "$lib/utils";
 
     import Lazy from 'svelte-lazy';
     export let data;
@@ -21,7 +21,6 @@
         }
     });
 
-    const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
 
     let rawData = [];
     let optionsData;
@@ -46,23 +45,6 @@ function normalizer(value) {
   }
 }
 
-function formatDateRange(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);
-  
-    // Format first and last dates
-    const firstDateFormatted = firstDate.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', day: '2-digit' });
-    const lastDateFormatted = lastDate.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', day: '2-digit' });
-
-
-    
-    // Construct and return the formatted date range string
-    return `${firstDateFormatted} - ${lastDateFormatted}`;
-}
-
 
 function findMonthlyValue(data, lastDateStr) {
     // Convert lastDateStr to Date object

src/lib/components/FailToDeliver.svelte

@@ -2,7 +2,7 @@
     import { failToDeliverComponent, displayCompanyName, stockTicker, assetType, etfTicker, screenWidth, userRegion, getCache, setCache} from '$lib/store';
     import InfoModal from '$lib/components/InfoModal.svelte';
     import { Chart } from 'svelte-echarts'
-    import { abbreviateNumber, formatString } from "$lib/utils";
+    import { abbreviateNumber, formatDateRange } from "$lib/utils";
   
     import Lazy from 'svelte-lazy';
     export let data;
@@ -29,20 +29,7 @@
     let highestPrice;
     let totalFailToDeliver;
   
-    function formatDateRange(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);
-  
-    // Format first and last dates
-    const firstDateFormatted = firstDate.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', day: '2-digit' });
-    const lastDateFormatted = lastDate.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', day: '2-digit' });
-  
-    // Construct and return the formatted date range string
-    return `${firstDateFormatted} - ${lastDateFormatted}`;
-}
 
 function findLowestAndHighestPrice(data, lastDateStr) {
     // Convert lastDateStr to Date object

src/lib/components/ImpliedVolatility.svelte

@@ -2,7 +2,7 @@
     import { impliedVolatilityComponent, displayCompanyName, stockTicker, assetType, etfTicker, screenWidth, userRegion, getCache, setCache} from '$lib/store';
     import InfoModal from '$lib/components/InfoModal.svelte';
     import { Chart } from 'svelte-echarts'
-    import { abbreviateNumber, formatString } from "$lib/utils";
+    import { formatDateRange } from "$lib/utils";
   
     import Lazy from 'svelte-lazy';
     export let data;
@@ -33,20 +33,6 @@
 
     let totalAvailableShares;
   
-    function formatDateRange(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);
-  
-    // Format first and last dates
-    const firstDateFormatted = firstDate.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', day: '2-digit' });
-    const lastDateFormatted = lastDate.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', day: '2-digit' });
-  
-    // Construct and return the formatted date range string
-    return `${firstDateFormatted} - ${lastDateFormatted}`;
-}
 
 function findLowestAndhighestIV(data, lastDateStr) {
     // Convert lastDateStr to Date object

src/lib/components/MarketMaker.svelte

@@ -2,7 +2,7 @@
   import { marketMakerComponent, displayCompanyName, stockTicker, assetType, etfTicker, screenWidth, userRegion, getCache, setCache} from '$lib/store';
   import InfoModal from '$lib/components/InfoModal.svelte';
   import { Chart } from 'svelte-echarts'
-  import { abbreviateNumber, formatString } from "$lib/utils";
+  import { abbreviateNumber, formatString, formatDateRange } from "$lib/utils";
 
   import Lazy from 'svelte-lazy';
   export let data;
@@ -32,20 +32,6 @@
   let avgNotionalSum;
   let showFullStats = false;
 
-function formatDateRange(lastDateStr) {
-  // Convert lastDateStr to Date object
-  const lastDate = new Date(lastDateStr);
-
-  // Get today's date for the first date (assuming today is the last date in your original logic)
-  const firstDate = new Date(lastDate.getTime() - 7 * 24 * 60 * 60 * 1000);
-
-  // Format first and last dates
-  const firstDateFormatted = firstDate.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', day: '2-digit' });
-  const lastDateFormatted = lastDate.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', day: '2-digit' });
-
-  // Construct and return the formatted date range string
-  return `${firstDateFormatted} - ${lastDateFormatted}`;
-}
 
 function normalizer(value) {
 if (Math?.abs(value) >= 1e18) {

src/lib/components/RetailVolume.svelte

@@ -3,7 +3,7 @@
     import { retailVolumeComponent,displayCompanyName, stockTicker, assetType, etfTicker, screenWidth, userRegion, getCache, setCache} from '$lib/store';
     import InfoModal from '$lib/components/InfoModal.svelte';
     import { Chart } from 'svelte-echarts'
-    import { abbreviateNumber } from "$lib/utils";
+    import { abbreviateNumber, formatDateRange } from "$lib/utils";
 
     import Lazy from 'svelte-lazy';
     export let data;
@@ -29,6 +29,37 @@
     let optionsData;
     let avgVolume;
     let avgSentiment;
+    let monthlyVolume;
+    let lowestSentiment;
+    let highestSentiment;
+
+
+  function findMonthlyValue(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
+    monthlyVolume = filteredData?.reduce((accumulator, currentItem) => {
+        return accumulator + currentItem?.traded;
+    }, 0);
+
+    monthlyVolume = monthlyVolume > 100e3 ? abbreviateNumber(monthlyVolume,true) : '< $100K'
+
+     // Extract prices from filtered data
+     let sentiment = filteredData?.map(item => parseFloat(item?.sentiment));
+    // Find the lowest and highest prices
+    lowestSentiment = Math.min(...sentiment)?.toFixed(0);
+    highestSentiment = Math.max(...sentiment)?.toFixed(0);
+}
+
 
 function normalizer(value) {
   if (Math?.abs(value) >= 1e18) {
@@ -58,6 +89,9 @@ function getPlotOptions() {
 
     });
 
+    findMonthlyValue(historyData, rawData?.lastDate)
+
+
     // Compute the average of item?.traded
     const totalTraded = tradingList?.reduce((acc, traded) => acc + traded, 0);
     avgVolume = totalTraded / tradingList?.length;
@@ -285,23 +319,23 @@ $: {
                               <span>Date</span>
                           </td>
                           <td class="px-[5px] py-1.5 text-right font-medium xs:px-2.5 xs:py-2">
-                            {new Date(rawData?.lastDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
+                            {formatDateRange(rawData?.lastDate)}
                           </td>
                       </tr>
                       <tr class="border-y border-gray-800 odd:bg-[#202020]">
                           <td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
-                              <span>Volume</span>
+                              <span>Volume in $</span>
                           </td>
                           <td class="px-[5px] py-1.5 text-right font-medium xs:px-2.5 xs:py-2">
-                            {rawData?.lastTrade > 100e3 ? abbreviateNumber(rawData?.lastTrade,true) : '< $100K'}
+                            {monthlyVolume}
                           </td>
                       </tr>
                       <tr class="border-y border-gray-800 odd:bg-[#202020]">
                           <td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
-                              <span>Retail Sentiment</span>
+                              <span>Retail Sentiment Range</span>
                           </td>
-                          <td class="px-[5px] py-1.5 text-right font-medium xs:px-2.5 xs:py-2 {rawData?.lastSentiment > 0 ? 'text-[#10DB06]' : rawData?.lastSentiment < 0 ? 'text-[#E57C34]' : 'text-[#C6A755]'} ">
+                          <td class="px-[5px] py-1.5 text-right font-medium xs:px-2.5 xs:py-2">
-                              {rawData?.lastSentiment >0 ? rawData?.lastSentiment+' '+'(Bullish)' : rawData?.lastSentiment < 0 ? rawData?.lastSentiment +' '+'(Bearish)' : rawData?.lastSentiment +' '+'(Mixed)'}
+                            {lowestSentiment+'-'+highestSentiment}
                           </td>
                           
 

src/lib/utils.ts

@@ -13,6 +13,22 @@ export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }
 
+
+export const formatDateRange = (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);
+
+  // Format first and last dates
+  const firstDateFormatted = firstDate.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', day: '2-digit' });
+  const lastDateFormatted = lastDate.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', day: '2-digit' });
+  // Construct and return the formatted date range string
+  return `${firstDateFormatted} - ${lastDateFormatted}`;
+}
+
+
 export const serializeNonPOJOs = (obj) => {
 	return structuredClone(obj);
 };