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

package/dist/mdas-sdk.js

@@ -1772,7 +1772,7 @@
     .widget {
         font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
         width: 100%;
-        max-width: 800px;
+        max-width: 1400px;
     }
 
     /* HEADER STYLES */
@@ -2626,7 +2626,7 @@
     .options-widget {
         font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
         color: #333;
-        max-width: 800px;
+        max-width: 1400px;
         width: 100%;
         margin: 0 auto;
         position: relative;
@@ -37726,11 +37726,26 @@ ${SharedStyles}
         });
       }
       addStyles() {
+        // Skip style injection if external styles are detected or explicitly disabled
+        if (this.options.skipStyleInjection || document.querySelector('link[href*="mdas-styles.css"]')) {
+          if (this.debug) {
+            console.log('[IntradayChartWidget] Skipping style injection - external styles detected');
+          }
+          return;
+        }
         if (!document.querySelector('#intraday-chart-styles')) {
-          const styleSheet = document.createElement('style');
-          styleSheet.id = 'intraday-chart-styles';
-          styleSheet.textContent = IntradayChartStyles;
-          document.head.appendChild(styleSheet);
+          try {
+            const styleSheet = document.createElement('style');
+            styleSheet.id = 'intraday-chart-styles';
+            styleSheet.textContent = IntradayChartStyles;
+            document.head.appendChild(styleSheet);
+            if (this.debug) {
+              console.log('[IntradayChartWidget] Styles injected successfully');
+            }
+          } catch (error) {
+            console.warn('[IntradayChartWidget] Failed to inject styles:', error);
+            console.warn('[IntradayChartWidget] Please add <link rel="stylesheet" href="mdas-styles.css"> to your HTML');
+          }
         }
       }
       async loadChartData() {
@@ -38180,16 +38195,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');
@@ -38211,14 +38238,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');
@@ -38253,16 +38289,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: {
@@ -38300,10 +38343,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',
@@ -38354,62 +38396,60 @@ ${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) => {
+                    if (this.rangeBack > 0) {
+                      // For multi-day charts with linear scale, show actual time from data point
+                      const point = validDataPoints[index];
+                      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: {
@@ -38455,6 +38495,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) {