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

package/dist/mdas-sdk.js

@@ -1205,13 +1205,12 @@
                     <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>
@@ -4421,13 +4420,6 @@
             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) {
@@ -37506,6 +37498,10 @@ ${SharedStyles}
 
         // Symbol editor
         this.symbolEditor = null;
+
+        // Lazy loading cache for 5D data
+        this.cached5DData = null;
+        this.is5DDataLoading = false;
         this.createWidgetStructure();
         this.setupSymbolEditor();
         this.initialize();
@@ -37607,6 +37603,10 @@ ${SharedStyles}
           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;
 
@@ -37757,7 +37757,13 @@ ${SharedStyles}
             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;
@@ -37846,6 +37852,9 @@ ${SharedStyles}
             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();
@@ -37873,6 +37882,159 @@ ${SharedStyles}
           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) {
@@ -38195,16 +38357,28 @@ ${SharedStyles}
 
         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');
@@ -38226,14 +38400,23 @@ ${SharedStyles}
           };
         } 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');
@@ -38268,16 +38451,23 @@ ${SharedStyles}
         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: {
@@ -38315,10 +38505,9 @@ ${SharedStyles}
                     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',
@@ -38369,62 +38558,62 @@ ${SharedStyles}
                 }
               },
               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: {
@@ -38470,6 +38659,63 @@ ${SharedStyles}
         // 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) {