work on integrating new system

apps/stock/web-app/src/components/charts/Chart.tsx

@@ -55,10 +55,44 @@ export function Chart({
   
   // Reset zoom handler
   const resetZoom = useCallback(() => {
-    if (chartRef.current) {
+    if (chartRef.current && data.length > 0) {
+      // Get the validated data to ensure we're using the correct time values
+      const validateData = (rawData: any[]) => {
+        const seen = new Set<number>();
+        return rawData
+          .map(item => {
+            const timeInSeconds = item.time > 10000000000 
+              ? Math.floor(item.time / 1000) 
+              : item.time;
+            return { ...item, time: timeInSeconds };
+          })
+          .filter(item => {
+            if (seen.has(item.time)) return false;
+            seen.add(item.time);
+            return true;
+          })
+          .sort((a, b) => a.time - b.time);
+      };
+      
+      const validatedData = validateData(data);
+      
+      if (validatedData.length > 0) {
+        const firstTime = validatedData[0].time;
+        const lastTime = validatedData[validatedData.length - 1].time;
+        
+        // Add some padding (5% on each side)
+        const timeRange = lastTime - firstTime;
+        const padding = timeRange * 0.05;
+        
+        chartRef.current.timeScale().setVisibleRange({
+          from: (firstTime - padding) as any,
+          to: (lastTime + padding) as any,
+        });
+      }
+      
       chartRef.current.timeScale().fitContent();
     }
-  }, []);
+  }, [data]);
 
   useEffect(() => {
     if (!chartContainerRef.current || !data || !data.length) {
@@ -110,6 +144,17 @@ export function Chart({
     const validateAndFilterData = (rawData: any[]) => {
       const seen = new Set<number>();
       return rawData
+        .map(item => {
+          // Convert timestamp to seconds if it's in milliseconds
+          const timeInSeconds = item.time > 10000000000 
+            ? Math.floor(item.time / 1000) 
+            : item.time;
+          
+          return {
+            ...item,
+            time: timeInSeconds as LightweightCharts.Time
+          };
+        })
         .filter((item, index) => {
           if (seen.has(item.time)) {
             return false;
@@ -117,7 +162,7 @@ export function Chart({
           seen.add(item.time);
           return true;
         })
-        .sort((a, b) => a.time - b.time); // Ensure ascending time order
+        .sort((a, b) => (a.time as number) - (b.time as number)); // Ensure ascending time order
     };
 
     // Create main series
@@ -175,15 +220,17 @@ export function Chart({
         },
       });
 
-      const volumeData = data
-        .filter(d => d.volume !== undefined)
-        .map(d => ({
-          time: d.time,
-          value: d.volume!,
-          color: d.close && d.open ? 
-            (d.close >= d.open ? '#10b98140' : '#ef444440') : 
-            '#3b82f640',
-        }));
+      const volumeData = validateAndFilterData(
+        data
+          .filter(d => d.volume !== undefined)
+          .map(d => ({
+            time: d.time,
+            value: d.volume!,
+            color: d.close && d.open ? 
+              (d.close >= d.open ? '#10b98140' : '#ef444440') : 
+              '#3b82f640',
+          }))
+      );
       volumeSeriesRef.current.setData(volumeData);
     }
 
@@ -206,15 +253,13 @@ export function Chart({
         });
       }
       
-      // Filter out duplicate timestamps and ensure ascending order
-      const sortedData = [...overlay.data].sort((a, b) => a.time - b.time);
-      const uniqueData = sortedData.reduce((acc: any[], curr) => {
-        if (!acc.length || curr.time > acc[acc.length - 1].time) {
-          acc.push(curr);
-        }
-        return acc;
-      }, []);
-      series.setData(uniqueData);
+      // Use validateAndFilterData to ensure consistent time handling
+      const overlayDataWithTime = overlay.data.map(d => ({
+        ...d,
+        time: d.time // Ensure time field exists
+      }));
+      const validatedData = validateAndFilterData(overlayDataWithTime);
+      series.setData(validatedData);
       overlaySeriesRef.current.set(overlay.name, series);
     });
 
@@ -236,17 +281,29 @@ export function Chart({
 
     // Fit content with a slight delay to ensure all series are loaded
     setTimeout(() => {
+      // First fit content to calculate proper range
       chart.timeScale().fitContent();
       
-      // Also set the visible range to ensure all data is shown
-      if (data.length > 0) {
-        const firstTime = data[0].time;
-        const lastTime = data[data.length - 1].time;
+      // Get the validated data to ensure we're using the correct time values
+      const validatedData = validateAndFilterData(data);
+      
+      // Set visible range with some padding
+      if (validatedData.length > 0) {
+        const firstTime = validatedData[0].time;
+        const lastTime = validatedData[validatedData.length - 1].time;
+        
+        // Add some padding (5% on each side)
+        const timeRange = (lastTime as number) - (firstTime as number);
+        const padding = timeRange * 0.05;
+        
         chart.timeScale().setVisibleRange({
-          from: firstTime as any,
-          to: lastTime as any,
+          from: ((firstTime as number) - padding) as any,
+          to: ((lastTime as number) + padding) as any,
         });
       }
+      
+      // Ensure the chart fits the content properly
+      chart.timeScale().fitContent();
     }, 100);
     
     // Enable mouse wheel zoom and touch gestures