mdas-jsview-sdk 1.0.11-uat.0 → 1.0.13-uat.0

package/dist/mdas-sdk.esm.js

@@ -1189,6 +1189,76 @@ const CombinedMarketTemplate = `
     </div>
 `;
 
+const IntradayChartTemplate = `
+    <div class="intraday-chart-widget">
+        <div class="chart-header">
+            <div class="chart-title-section">
+                <div class="company-market-info">
+                    <span class="intraday-company-name"></span>
+                </div>
+                <h3 class="intraday-chart-symbol editable-symbol"
+                    title="Double-click to edit symbol"
+                    data-original-symbol="">AAPL</h3>
+            </div>
+            <div class="chart-change positive">+0.00 (+0.00%)</div>
+        </div>
+
+        <div class="chart-controls">
+            <div class="chart-range-selector">
+                <button class="range-btn active" data-range="0">1D</button>
+                <button class="range-btn" data-range="5">5D</button>
+            </div>
+            <div class="chart-type-selector">
+                <button class="type-btn active" data-type="line" title="Line Chart">Line</button>
+                <button class="type-btn" data-type="area" title="Area Chart">Mountain</button>
+                <button class="type-btn" data-type="candlestick" title="Candlestick Chart">Candles</button>
+            </div>
+            <button class="zoom-reset-btn" title="Reset Zoom">
+                <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                    <path d="M2 8a6 6 0 1 1 12 0A6 6 0 0 1 2 8zm6-7a7 7 0 1 0 0 14A7 7 0 0 0 8 1z" fill="currentColor"/>
+                    <path d="M5 8h6M8 5v6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+                </svg>
+                Reset Zoom
+            </button>
+        </div>
+
+        <div class="chart-container">
+            <canvas id="intradayChart"></canvas>
+        </div>
+
+        <div class="chart-stats">
+            <div class="stats-header">Daily Stats</div>
+            <div class="stats-grid">
+                <div class="stat-item stat-open">
+                    <span class="stat-label">Open</span>
+                    <span class="stat-value">$0.00</span>
+                </div>
+                <div class="stat-item stat-high">
+                    <span class="stat-label">High</span>
+                    <span class="stat-value">$0.00</span>
+                </div>
+                <div class="stat-item stat-low">
+                    <span class="stat-label">Low</span>
+                    <span class="stat-value">$0.00</span>
+                </div>
+                <div class="stat-item stat-close">
+                    <span class="stat-label">Close</span>
+                    <span class="stat-value">$0.00</span>
+                </div>
+                <div class="stat-item stat-volume">
+                    <span class="stat-label">Volume</span>
+                    <span class="stat-value">0</span>
+                </div>
+            </div>
+        </div>
+
+        <div class="widget-loading-overlay hidden">
+            <div class="loading-spinner"></div>
+            <div class="loading-text">Loading chart data...</div>
+        </div>
+    </div>
+`;
+
 // Widget HTML Templates
 const NightSessionTemplate = `
     <div class="night-session-widget widget">
@@ -1199,13 +1269,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 +4484,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) {
@@ -7919,73 +7981,6 @@ class IntradayChartModel {
   }
 }
 
-const IntradayChartTemplate = `
-    <div class="intraday-chart-widget">
-        <div class="chart-header">
-            <div class="chart-title-section">
-                <div class="company-market-info">
-                    <span class="intraday-company-name"></span>
-                </div>
-                <h3 class="intraday-chart-symbol editable-symbol"
-                    title="Double-click to edit symbol"
-                    data-original-symbol="">AAPL</h3>
-            </div>
-            <div class="chart-change positive">+0.00 (+0.00%)</div>
-        </div>
-
-        <div class="chart-controls">
-            <div class="chart-range-selector">
-                <button class="range-btn active" data-range="0">1D</button>
-                <button class="range-btn" data-range="5">5D</button>
-            </div>
-            <div class="chart-type-selector">
-                <button class="type-btn active" data-type="line" title="Line Chart">Line</button>
-                <button class="type-btn" data-type="area" title="Area Chart">Mountain</button>
-                <button class="type-btn" data-type="candlestick" title="Candlestick Chart">Candles</button>
-            </div>
-            <button class="zoom-reset-btn" title="Reset Zoom">
-                <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
-                    <path d="M2 8a6 6 0 1 1 12 0A6 6 0 0 1 2 8zm6-7a7 7 0 1 0 0 14A7 7 0 0 0 8 1z" fill="currentColor"/>
-                    <path d="M5 8h6M8 5v6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
-                </svg>
-                Reset Zoom
-            </button>
-        </div>
-
-        <div class="chart-container">
-            <canvas id="intradayChart"></canvas>
-        </div>
-
-        <div class="chart-stats">
-            <div class="stat-item stat-open">
-                <span class="stat-label">Open</span>
-                <span class="stat-value">$0.00</span>
-            </div>
-            <div class="stat-item stat-high">
-                <span class="stat-label">High</span>
-                <span class="stat-value">$0.00</span>
-            </div>
-            <div class="stat-item stat-low">
-                <span class="stat-label">Low</span>
-                <span class="stat-value">$0.00</span>
-            </div>
-            <div class="stat-item stat-close">
-                <span class="stat-label">Close</span>
-                <span class="stat-value">$0.00</span>
-            </div>
-            <div class="stat-item stat-volume">
-                <span class="stat-label">Volume</span>
-                <span class="stat-value">0</span>
-            </div>
-        </div>
-
-        <div class="widget-loading-overlay hidden">
-            <div class="loading-spinner"></div>
-            <div class="loading-text">Loading chart data...</div>
-        </div>
-    </div>
-`;
-
 const IntradayChartStyles = `
     .intraday-chart-widget {
         font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
@@ -8170,14 +8165,28 @@ const IntradayChartStyles = `
     }
 
     .chart-stats {
-        display: grid;
-        grid-template-columns: repeat(5, 1fr);
-        gap: 15px;
         padding: 15px;
         background: #f9fafb;
         border-radius: 8px;
     }
 
+    .stats-header {
+        font-size: 0.875em;
+        font-weight: 700;
+        color: #374151;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        margin-bottom: 12px;
+        padding-bottom: 8px;
+        border-bottom: 2px solid #e5e7eb;
+    }
+
+    .stats-grid {
+        display: grid;
+        grid-template-columns: repeat(5, 1fr);
+        gap: 15px;
+    }
+
     .stat-item {
         display: flex;
         flex-direction: column;
@@ -8246,11 +8255,16 @@ const IntradayChartStyles = `
             padding: 15px;
         }
 
-        .chart-stats {
+        .stats-grid {
             grid-template-columns: repeat(3, 1fr);
             gap: 10px;
         }
 
+        .stats-header {
+            font-size: 0.8em;
+            margin-bottom: 10px;
+        }
+
         .chart-container {
             height: 350px;
         }
@@ -37500,6 +37514,11 @@ class IntradayChartWidget extends BaseWidget {
 
     // Symbol editor
     this.symbolEditor = null;
+
+    // Lazy loading cache for chart data
+    this.cached1DData = null;
+    this.cached5DData = null;
+    this.is5DDataLoading = false;
     this.createWidgetStructure();
     this.setupSymbolEditor();
     this.initialize();
@@ -37601,6 +37620,11 @@ class IntradayChartWidget extends BaseWidget {
       this.chartData = null;
       this.livePrice = null;
 
+      // Clear all cached data for old symbol
+      this.cached1DData = null;
+      this.cached5DData = null;
+      this.is5DDataLoading = false;
+
       // Update internal symbol
       this.symbol = upperSymbol;
 
@@ -37715,7 +37739,7 @@ class IntradayChartWidget extends BaseWidget {
         // Update chart type and re-render
         this.chartType = type;
         this.renderChart();
-        this.updateStats();
+        // Stats are managed by WebSocket updates only
       });
     });
   }
@@ -37751,7 +37775,31 @@ 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-6)
+      if (this.rangeBack === 5) {
+        await this.load5DayChartData(apiService);
+        return;
+      }
+
+      // For 1D chart: Check if we have cached data first
+      if (this.rangeBack === 0 && this.cached1DData) {
+        if (this.debug) {
+          console.log('[IntradayChartWidget] Using cached 1D data');
+        }
+
+        // Use cached data
+        this.chartData = this.cached1DData;
+        this.renderChart();
+        // Skip updateStats() - stats will be updated from WebSocket data only
+        this.hideLoading();
+
+        // Restart auto-refresh and live price subscription
+        await this.startAutoRefresh();
+        this.subscribeToLivePrice();
+        return;
+      }
+
+      // FALLBACK LOGIC: Try to find most recent available data (for 1D)
       const MAX_LOOKBACK_DAYS = 7;
       let attemptRangeBack = this.rangeBack;
       let dataFound = false;
@@ -37826,8 +37874,16 @@ class IntradayChartWidget extends BaseWidget {
         console.error('[IntradayChartWidget] Model has no data points after processing');
         throw new Error(`No valid data points for ${this.symbol}`);
       }
+
+      // Cache 1D data for instant switching
+      if (this.rangeBack === 0) {
+        this.cached1DData = this.chartData;
+        if (this.debug) {
+          console.log('[IntradayChartWidget] Cached 1D data for instant switching');
+        }
+      }
       this.renderChart();
-      this.updateStats();
+      // Skip updateStats() - stats will be updated from WebSocket data only
       this.hideLoading();
       if (this.debug) {
         console.log(`[IntradayChartWidget] Loaded ${dataArray.length} data points`);
@@ -37840,6 +37896,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 +37926,165 @@ 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();
+        // Skip updateStats() - stats will be updated from WebSocket data only
+        this.hideLoading();
+
+        // Subscribe to live price for stats updates (WebSocket only)
+        this.subscribeToLivePrice();
+
+        // 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();
+      // Skip updateStats() - stats will be updated from WebSocket data only
+      this.hideLoading();
+      if (this.debug) {
+        console.log(`[IntradayChartWidget] 5D chart loaded with ${this.chartData.dataPoints.length} data points`);
+      }
+
+      // Subscribe to live price for stats updates (WebSocket only)
+      this.subscribeToLivePrice();
+
+      // 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) {
@@ -37951,6 +38169,64 @@ class IntradayChartWidget extends BaseWidget {
     } else {
       console.log('[IntradayChartWidget] Invalid price, not updating:', price);
     }
+
+    // Update chart stats with live WebSocket data for both 1D and 5D charts
+    // This shows the current day's stats from live data
+    this.updateStatsFromLiveData(priceData);
+  }
+  updateStatsFromLiveData(data) {
+    if (!data) return;
+
+    // Extract stats from WebSocket data
+    const stats = {
+      high: data.HighPx !== undefined && data.HighPx !== null ? parseFloat(data.HighPx) : null,
+      low: data.LowPx !== undefined && data.LowPx !== null ? parseFloat(data.LowPx) : null,
+      open: data.OpenPx !== undefined && data.OpenPx !== null ? parseFloat(data.OpenPx) : null,
+      close: data.LastPx !== undefined && data.LastPx !== null ? parseFloat(data.LastPx) : data.TradePx !== undefined && data.TradePx !== null ? parseFloat(data.TradePx) : null,
+      volume: data.Volume !== undefined && data.Volume !== null ? parseInt(data.Volume) : null,
+      change: data.Change !== undefined && data.Change !== null ? parseFloat(data.Change) : null,
+      changePercent: data.ChangePercent !== undefined && data.ChangePercent !== null ? parseFloat(data.ChangePercent) * 100 : null
+    };
+    if (this.debug) {
+      console.log('[IntradayChartWidget] Updating stats from live data:', stats);
+    }
+
+    // Update stats display
+    const highElement = this.container.querySelector('.stat-high .stat-value');
+    const lowElement = this.container.querySelector('.stat-low .stat-value');
+    const openElement = this.container.querySelector('.stat-open .stat-value');
+    const closeElement = this.container.querySelector('.stat-close .stat-value');
+    const volumeElement = this.container.querySelector('.stat-volume .stat-value');
+    const changeElement = this.container.querySelector('.chart-change');
+    if (highElement && stats.high !== null) {
+      highElement.textContent = `$${stats.high.toFixed(2)}`;
+    }
+    if (lowElement && stats.low !== null) {
+      lowElement.textContent = `$${stats.low.toFixed(2)}`;
+    }
+    if (openElement && stats.open !== null) {
+      openElement.textContent = `$${stats.open.toFixed(2)}`;
+    }
+    if (closeElement && stats.close !== null) {
+      closeElement.textContent = `$${stats.close.toFixed(2)}`;
+    }
+    if (volumeElement && stats.volume !== null) {
+      volumeElement.textContent = this.formatVolume(stats.volume);
+    }
+    if (changeElement && stats.change !== null && stats.changePercent !== null) {
+      const changeClass = stats.change >= 0 ? 'positive' : 'negative';
+      changeElement.className = `chart-change ${changeClass}`;
+      const sign = stats.change >= 0 ? '+' : '';
+      changeElement.textContent = `${sign}${stats.change.toFixed(2)} (${sign}${stats.changePercent.toFixed(2)}%)`;
+    }
+  }
+  formatVolume(volume) {
+    if (volume >= 1000000) {
+      return (volume / 1000000).toFixed(2) + 'M';
+    } else if (volume >= 1000) {
+      return (volume / 1000).toFixed(2) + 'K';
+    }
+    return volume.toString();
   }
   updateLivePriceLine() {
     if (!this.chartInstance || !this.livePrice) {
@@ -38109,7 +38385,8 @@ class IntradayChartWidget extends BaseWidget {
         if (response && Array.isArray(response)) {
           this.chartData = new IntradayChartModel(response);
           this.renderChart();
-          this.updateStats();
+          // Stats are managed by WebSocket updates only
+
           if (this.debug) {
             console.log(`[IntradayChartWidget] Auto-refresh complete - ${response.length} data points`);
           }
@@ -38415,10 +38692,12 @@ class IntradayChartWidget extends BaseWidget {
               autoSkip: true,
               maxRotation: 0,
               minRotation: 0,
-              callback: (value, index) => {
+              callback: (value, index, ticks) => {
                 if (this.rangeBack > 0) {
-                  // For multi-day charts with linear scale, show actual time from data point
-                  const point = validDataPoints[index];
+                  // 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', {
@@ -38559,6 +38838,13 @@ class IntradayChartWidget extends BaseWidget {
       });
     }
   }
+
+  /**
+   * DEPRECATED: This method is no longer used. Stats are now exclusively
+   * updated from WebSocket data via updateStatsFromLiveData() to ensure
+   * consistency between 1D and 5D charts (both showing today's stats only).
+   * Kept for reference only.
+   */
   updateStats() {
     if (!this.chartData) return;
     const stats = this.chartData.getStats();