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

package/dist/mdas-sdk.js

@@ -1195,6 +1195,76 @@
     </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">
@@ -7917,73 +7987,6 @@ ${SharedStyles}
       }
     }
 
-    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;
@@ -8168,14 +8171,28 @@ ${SharedStyles}
     }
 
     .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;
@@ -8244,11 +8261,16 @@ ${SharedStyles}
             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;
         }
@@ -37499,7 +37521,8 @@ ${SharedStyles}
         // Symbol editor
         this.symbolEditor = null;
 
-        // Lazy loading cache for 5D data
+        // Lazy loading cache for chart data
+        this.cached1DData = null;
         this.cached5DData = null;
         this.is5DDataLoading = false;
         this.createWidgetStructure();
@@ -37603,7 +37626,8 @@ ${SharedStyles}
           this.chartData = null;
           this.livePrice = null;
 
-          // Clear cached 5D data for old symbol
+          // Clear all cached data for old symbol
+          this.cached1DData = null;
           this.cached5DData = null;
           this.is5DDataLoading = false;
 
@@ -37721,7 +37745,7 @@ ${SharedStyles}
             // Update chart type and re-render
             this.chartType = type;
             this.renderChart();
-            this.updateStats();
+            // Stats are managed by WebSocket updates only
           });
         });
       }
@@ -37757,12 +37781,30 @@ ${SharedStyles}
             throw new Error('API service not available');
           }
 
-          // For 5D chart: Load data from multiple days (rangeback 0-5)
+          // 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;
@@ -37838,8 +37880,16 @@ ${SharedStyles}
             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`);
@@ -37893,9 +37943,12 @@ ${SharedStyles}
             // Use cached data
             this.chartData = this.cached5DData;
             this.renderChart();
-            this.updateStats();
+            // 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;
@@ -37913,12 +37966,15 @@ ${SharedStyles}
           // Cache the processed data
           this.cached5DData = this.chartData;
           this.renderChart();
-          this.updateStats();
+          // 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) {
@@ -38119,6 +38175,64 @@ ${SharedStyles}
         } 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) {
@@ -38277,7 +38391,8 @@ ${SharedStyles}
             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`);
               }
@@ -38729,6 +38844,13 @@ ${SharedStyles}
           });
         }
       }
+
+      /**
+       * 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();