mdas-jsview-sdk 1.0.10-uat.0 → 1.0.12-uat.0

package/dist/mdas-sdk.esm.js

@@ -1199,13 +1199,12 @@ const NightSessionTemplate = `
                     <div class="company-market-info">
                         <span class="night-company-name"></span>
                         <span class="market-name"></span>
-                        <span class="market-mic"></span>
                     </div>
                     <h1 class="symbol editable-symbol"
                         title="Double-click to edit symbol"
                         data-original-symbol="">
                     </h1>
-                    
+
                 </div>
                 <div class="price-section">
                     <div class="current-price"></div>
@@ -4415,13 +4414,6 @@ class NightSessionWidget extends BaseWidget {
         marketNameElement.textContent = this.exchangeName || data.exchangeName || '';
       }
 
-      // Update MIC (Market Identifier Code)
-      const marketMicElement = this.container.querySelector('.market-mic');
-      if (marketMicElement) {
-        const micValue = this.mic || data.mic || '';
-        marketMicElement.textContent = micValue;
-      }
-
       // Update price
       const currentPriceElement = this.container.querySelector('.current-price');
       if (currentPriceElement) {
@@ -37500,6 +37492,10 @@ class IntradayChartWidget extends BaseWidget {
 
     // Symbol editor
     this.symbolEditor = null;
+
+    // Lazy loading cache for 5D data
+    this.cached5DData = null;
+    this.is5DDataLoading = false;
     this.createWidgetStructure();
     this.setupSymbolEditor();
     this.initialize();
@@ -37601,6 +37597,10 @@ class IntradayChartWidget extends BaseWidget {
       this.chartData = null;
       this.livePrice = null;
 
+      // Clear cached 5D data for old symbol
+      this.cached5DData = null;
+      this.is5DDataLoading = false;
+
       // Update internal symbol
       this.symbol = upperSymbol;
 
@@ -37751,7 +37751,13 @@ class IntradayChartWidget extends BaseWidget {
         throw new Error('API service not available');
       }
 
-      // FALLBACK LOGIC: Try to find most recent available data
+      // For 5D chart: Load data from multiple days (rangeback 0-5)
+      if (this.rangeBack === 5) {
+        await this.load5DayChartData(apiService);
+        return;
+      }
+
+      // FALLBACK LOGIC: Try to find most recent available data (for 1D)
       const MAX_LOOKBACK_DAYS = 7;
       let attemptRangeBack = this.rangeBack;
       let dataFound = false;
@@ -37840,6 +37846,9 @@ class IntradayChartWidget extends BaseWidget {
         await this.startAutoRefresh();
         // Subscribe to live price updates
         this.subscribeToLivePrice();
+
+        // LAZY LOADING: Preload 5D data in the background after 1D loads
+        this.preload5DDataInBackground();
       } else {
         // Historical data or fallback - don't refresh
         this.stopAutoRefresh();
@@ -37867,6 +37876,159 @@ class IntradayChartWidget extends BaseWidget {
       this.showError(errorMessage);
     }
   }
+  async load5DayChartData(apiService) {
+    try {
+      // Check if we have cached 5D data
+      if (this.cached5DData) {
+        if (this.debug) {
+          console.log('[IntradayChartWidget] Using cached 5D data');
+        }
+
+        // Use cached data
+        this.chartData = this.cached5DData;
+        this.renderChart();
+        this.updateStats();
+        this.hideLoading();
+
+        // Don't auto-refresh for 5D chart
+        this.stopAutoRefresh();
+        return;
+      }
+
+      // No cached data, load it now
+      const combinedData = await this.fetch5DayData(apiService);
+
+      // Process the combined data
+      this.chartData = new IntradayChartModel(combinedData);
+      if (this.chartData.dataPoints.length === 0) {
+        throw new Error(`No valid data points for ${this.symbol}`);
+      }
+
+      // Cache the processed data
+      this.cached5DData = this.chartData;
+      this.renderChart();
+      this.updateStats();
+      this.hideLoading();
+      if (this.debug) {
+        console.log(`[IntradayChartWidget] 5D chart loaded with ${this.chartData.dataPoints.length} data points`);
+      }
+
+      // Don't auto-refresh for 5D chart
+      this.stopAutoRefresh();
+    } catch (error) {
+      console.error('[IntradayChartWidget] Error loading 5D chart data:', error);
+      throw error; // Re-throw to be caught by parent loadChartData
+    }
+  }
+  async fetch5DayData(apiService) {
+    const DAYS_TO_COLLECT = 5;
+    const MAX_RANGEBACK_ATTEMPTS = 7; // API limit: maximum 7 rangeback
+
+    if (this.debug) {
+      console.log('[IntradayChartWidget] Fetching 5D chart data with parallel requests (API limit: rangeback 0-6)');
+    }
+
+    // OPTIMIZATION: Query all rangeback values in parallel (0-6)
+    const rangebackPromises = [];
+    for (let rb = 0; rb < MAX_RANGEBACK_ATTEMPTS; rb++) {
+      rangebackPromises.push(apiService.getIntradayChart(this.source, this.symbol, rb).then(response => {
+        // Extract data array from response
+        let dataArray = response;
+        if (response && response.data && Array.isArray(response.data)) {
+          dataArray = response.data;
+        }
+        return {
+          rangeBack: rb,
+          data: dataArray
+        };
+      }).catch(error => {
+        // If a request fails, return null so we can filter it out
+        if (this.debug) {
+          console.warn(`[IntradayChartWidget] Request failed for rangeback ${rb}:`, error);
+        }
+        return {
+          rangeBack: rb,
+          data: null
+        };
+      }));
+    }
+
+    // Wait for all parallel requests to complete
+    const results = await Promise.all(rangebackPromises);
+    if (this.debug) {
+      console.log('[IntradayChartWidget] All parallel requests completed');
+    }
+
+    // Filter out empty/null responses and collect valid days
+    const collectedDays = results.filter(result => {
+      const isValid = result.data && Array.isArray(result.data) && result.data.length > 0;
+      if (this.debug) {
+        if (isValid) {
+          console.log(`[IntradayChartWidget] Rangeback ${result.rangeBack}: ${result.data.length} data points`);
+        } else {
+          console.log(`[IntradayChartWidget] Rangeback ${result.rangeBack}: No data (skipped)`);
+        }
+      }
+      return isValid;
+    }).slice(0, DAYS_TO_COLLECT); // Take only the first 5 days with data
+
+    if (collectedDays.length === 0) {
+      throw new Error(`No intraday data available for ${this.symbol} in the past ${MAX_RANGEBACK_ATTEMPTS} days`);
+    }
+    if (this.debug) {
+      console.log(`[IntradayChartWidget] Collected ${collectedDays.length}/${DAYS_TO_COLLECT} days of data`);
+      if (collectedDays.length < DAYS_TO_COLLECT) {
+        console.log(`[IntradayChartWidget] Note: Only ${collectedDays.length} days available within API limit (rangeback 0-6)`);
+      }
+    }
+
+    // Combine all collected days into a single array (oldest to newest)
+    const combinedData = [];
+    for (let i = collectedDays.length - 1; i >= 0; i--) {
+      combinedData.push(...collectedDays[i].data);
+    }
+    if (this.debug) {
+      console.log(`[IntradayChartWidget] Combined ${combinedData.length} total data points from ${collectedDays.length} days`);
+    }
+    return combinedData;
+  }
+  preload5DDataInBackground() {
+    // Prevent multiple simultaneous preloads
+    if (this.is5DDataLoading || this.cached5DData) {
+      return;
+    }
+    this.is5DDataLoading = true;
+    if (this.debug) {
+      console.log('[IntradayChartWidget] Starting background preload of 5D data...');
+    }
+
+    // Run in background without blocking
+    setTimeout(async () => {
+      try {
+        const apiService = this.wsManager.getApiService();
+        if (!apiService) {
+          if (this.debug) {
+            console.log('[IntradayChartWidget] API service not available for preload');
+          }
+          return;
+        }
+        const combinedData = await this.fetch5DayData(apiService);
+
+        // Create and cache the model
+        const chartData = new IntradayChartModel(combinedData);
+        this.cached5DData = chartData;
+        if (this.debug) {
+          console.log(`[IntradayChartWidget] ✓ Background preload complete: ${chartData.dataPoints.length} data points cached`);
+        }
+      } catch (error) {
+        if (this.debug) {
+          console.warn('[IntradayChartWidget] Background preload failed:', error);
+        }
+      } finally {
+        this.is5DDataLoading = false;
+      }
+    }, 1000); // Wait 1 second after 1D loads before starting preload
+  }
   subscribeToLivePrice() {
     // Unsubscribe from previous subscription if any
     if (this.unsubscribe) {
@@ -38189,16 +38351,28 @@ class IntradayChartWidget extends BaseWidget {
 
     if (this.chartType === 'candlestick') {
       // Prepare OHLC data for candlestick chart
-      chartDataPoints = validDataPoints.map(point => ({
-        x: this.parseTimestamp(point.time).getTime(),
-        o: point.open,
-        h: point.high,
-        l: point.low,
-        c: point.close
-      })).filter(point => {
-        // Filter out invalid timestamps
-        return !isNaN(point.x) && point.x > 0;
-      });
+      if (this.rangeBack > 0) {
+        // For multi-day charts, use index as x-value (linear scale)
+        chartDataPoints = validDataPoints.map((point, index) => ({
+          x: index,
+          o: point.open,
+          h: point.high,
+          l: point.low,
+          c: point.close
+        }));
+      } else {
+        // For single-day charts, use timestamps (time scale)
+        chartDataPoints = validDataPoints.map(point => ({
+          x: this.parseTimestamp(point.time).getTime(),
+          o: point.open,
+          h: point.high,
+          l: point.low,
+          c: point.close
+        })).filter(point => {
+          // Filter out invalid timestamps
+          return !isNaN(point.x) && point.x > 0;
+        });
+      }
       if (chartDataPoints.length === 0) {
         console.error('[IntradayChartWidget] No valid candlestick data points after date parsing');
         this.showError('Unable to parse chart data timestamps');
@@ -38220,14 +38394,23 @@ class IntradayChartWidget extends BaseWidget {
       };
     } else {
       // Prepare data with timestamps for line/area chart
-      chartDataPoints = validDataPoints.map(point => ({
-        x: this.parseTimestamp(point.time),
-        y: point.close
-      })).filter(point => {
-        // Filter out invalid dates
-        const timestamp = point.x.getTime();
-        return !isNaN(timestamp) && timestamp > 0;
-      });
+      if (this.rangeBack > 0) {
+        // For multi-day charts, use index as x-value (linear scale)
+        chartDataPoints = validDataPoints.map((point, index) => ({
+          x: index,
+          y: point.close
+        }));
+      } else {
+        // For single-day charts, use timestamps (time scale)
+        chartDataPoints = validDataPoints.map(point => ({
+          x: this.parseTimestamp(point.time),
+          y: point.close
+        })).filter(point => {
+          // Filter out invalid dates
+          const timestamp = point.x.getTime();
+          return !isNaN(timestamp) && timestamp > 0;
+        });
+      }
       if (chartDataPoints.length === 0) {
         console.error('[IntradayChartWidget] No valid chart data points after date parsing');
         this.showError('Unable to parse chart data timestamps');
@@ -38262,16 +38445,23 @@ class IntradayChartWidget extends BaseWidget {
     console.log('[IntradayChartWidget] Last data point - Source time:', validDataPoints[validDataPoints.length - 1].time);
     console.log('[IntradayChartWidget] Last chart point:', chartDataPoints[chartDataPoints.length - 1]);
 
-    // Calculate explicit min/max for x-axis to prevent Chart.js from auto-calculating incorrectly
-    const timestamps = chartDataPoints.map(p => this.chartType === 'candlestick' ? p.x : p.x.getTime());
-    const minTimestamp = Math.min(...timestamps);
-    const maxTimestamp = Math.max(...timestamps);
-    console.log('[IntradayChartWidget] X-axis bounds:', {
-      min: minTimestamp,
-      max: maxTimestamp,
-      minDate: new Date(minTimestamp),
-      maxDate: new Date(maxTimestamp)
-    });
+    // Calculate explicit min/max for x-axis (only for time scale, not linear)
+    let minTimestamp, maxTimestamp;
+    if (this.rangeBack === 0) {
+      // For time scale, calculate timestamp bounds
+      const timestamps = chartDataPoints.map(p => this.chartType === 'candlestick' ? p.x : p.x.getTime());
+      minTimestamp = Math.min(...timestamps);
+      maxTimestamp = Math.max(...timestamps);
+      console.log('[IntradayChartWidget] X-axis bounds:', {
+        min: minTimestamp,
+        max: maxTimestamp,
+        minDate: new Date(minTimestamp),
+        maxDate: new Date(maxTimestamp)
+      });
+    } else {
+      // For linear scale, bounds are just indices
+      console.log('[IntradayChartWidget] Using linear scale with', chartDataPoints.length, 'data points');
+    }
     const config = {
       type: this.chartType === 'candlestick' ? 'candlestick' : 'line',
       data: {
@@ -38309,10 +38499,9 @@ class IntradayChartWidget extends BaseWidget {
                 const index = context[0].dataIndex;
                 const point = validDataPoints[index];
                 if (point) {
-                  // Format timestamp for tooltip
+                  // Display timestamp as-is from the data, without timezone conversion
                   const date = new Date(point.time);
                   return date.toLocaleString('en-US', {
-                    timeZone: 'America/New_York',
                     month: '2-digit',
                     day: '2-digit',
                     year: 'numeric',
@@ -38363,62 +38552,62 @@ class IntradayChartWidget extends BaseWidget {
             }
           },
           annotation: {
-            annotations: {
-              livePriceLine: {
-                type: 'line',
-                scaleID: 'y',
-                value: this.livePrice || stats.close,
-                borderColor: '#667eea',
-                borderWidth: 2,
-                borderDash: [5, 5],
-                label: {
-                  display: true,
-                  content: this.livePrice ? `$${this.livePrice.toFixed(2)}` : `$${stats.close.toFixed(2)}`,
-                  enabled: true,
-                  position: 'end',
-                  backgroundColor: 'rgb(102, 126, 234)',
-                  color: '#ffffff',
-                  font: {
-                    size: 12,
-                    weight: 'bold',
-                    family: 'system-ui, -apple-system, sans-serif'
-                  },
-                  padding: {
-                    top: 4,
-                    bottom: 4,
-                    left: 8,
-                    right: 8
-                  },
-                  borderRadius: 4,
-                  xAdjust: -10,
-                  yAdjust: 0
-                }
-              }
-            }
+            annotations: this.createAnnotations(validDataPoints, stats)
           }
         },
         scales: {
           x: {
-            type: 'time',
-            min: minTimestamp,
-            max: maxTimestamp,
-            time: {
-              unit: this.rangeBack === 0 ? 'minute' : 'hour',
+            type: this.rangeBack === 0 ? 'time' : 'linear',
+            min: this.rangeBack === 0 ? minTimestamp : undefined,
+            max: this.rangeBack === 0 ? maxTimestamp : undefined,
+            time: this.rangeBack === 0 ? {
+              unit: 'hour',
+              stepSize: 1,
               displayFormats: {
-                minute: 'h:mm a',
-                hour: 'MMM d, ha'
+                hour: 'h:mm a'
               },
               tooltipFormat: 'MMM d, h:mm a'
-            },
+            } : undefined,
             grid: {
               display: false
             },
             ticks: {
-              maxTicksLimit: 10,
+              maxTicksLimit: this.rangeBack === 0 ? 10 : 8,
               color: '#6b7280',
               autoSkip: true,
               maxRotation: 0,
-              minRotation: 0
+              minRotation: 0,
+              callback: (value, index, ticks) => {
+                if (this.rangeBack > 0) {
+                  // For multi-day charts with linear scale
+                  // value is the x-value (index in data array), not the tick index
+                  const dataIndex = Math.round(value);
+                  const point = validDataPoints[dataIndex];
+                  if (point) {
+                    const date = new Date(point.time);
+                    return date.toLocaleString('en-US', {
+                      month: 'short',
+                      day: 'numeric',
+                      hour: 'numeric',
+                      minute: '2-digit',
+                      hour12: true
+                    });
+                  }
+                  return '';
+                }
+                // For single-day time scale, provide fallback formatting
+                // If value is a number (timestamp), format it
+                if (typeof value === 'number') {
+                  const date = new Date(value);
+                  return date.toLocaleString('en-US', {
+                    hour: 'numeric',
+                    minute: '2-digit',
+                    hour12: true
+                  });
+                }
+                // Otherwise let Chart.js handle it (if date adapter is working)
+                return value;
+              }
             }
           },
           y: {
@@ -38464,6 +38653,63 @@ class IntradayChartWidget extends BaseWidget {
     // Add reset zoom button listener
     this.setupZoomReset();
   }
+  createAnnotations(dataPoints, stats) {
+    const annotations = {
+      livePriceLine: {
+        type: 'line',
+        scaleID: 'y',
+        value: this.livePrice || stats.close,
+        borderColor: '#667eea',
+        borderWidth: 2,
+        borderDash: [5, 5],
+        label: {
+          display: true,
+          content: this.livePrice ? `$${this.livePrice.toFixed(2)}` : `$${stats.close.toFixed(2)}`,
+          enabled: true,
+          position: 'end',
+          backgroundColor: 'rgb(102, 126, 234)',
+          color: '#ffffff',
+          font: {
+            size: 12,
+            weight: 'bold',
+            family: 'system-ui, -apple-system, sans-serif'
+          },
+          padding: {
+            top: 4,
+            bottom: 4,
+            left: 8,
+            right: 8
+          },
+          borderRadius: 4,
+          xAdjust: -10,
+          yAdjust: 0
+        }
+      }
+    };
+
+    // Add day separators for multi-day charts (5D, etc.)
+    if (this.rangeBack > 0 && dataPoints.length > 0) {
+      let currentDay = null;
+      dataPoints.forEach((point, index) => {
+        const pointDate = new Date(point.time);
+        const day = pointDate.toDateString();
+
+        // Add vertical line at the start of each new day
+        if (currentDay !== day && currentDay !== null) {
+          annotations[`daySeparator${index}`] = {
+            type: 'line',
+            scaleID: 'x',
+            value: index,
+            borderColor: 'rgba(0, 0, 0, 0.1)',
+            borderWidth: 1,
+            borderDash: [3, 3]
+          };
+        }
+        currentDay = day;
+      });
+    }
+    return annotations;
+  }
   setupZoomReset() {
     const resetBtn = this.container.querySelector('.zoom-reset-btn');
     if (resetBtn) {