fix(dees-catalog): update @design.estate/dees-wcctools dependency to version 1.0.98 for compatibility and enhance demo functionality with real-time data updates

ts_web/elements/dees-chart-area.ts

@@ -33,12 +33,34 @@ export class DeesChartArea extends DeesElement {
 
   @property({ type: Array })
   public series: ApexAxisChartSeries = [];
+  
+  // Override getter to return internal chart data
+  get chartSeries(): ApexAxisChartSeries {
+    return this.internalChartData.length > 0 ? this.internalChartData : this.series;
+  }
 
   @property({ attribute: false })
   public yAxisFormatter: (value: number) => string = (val) => `${val} Mbps`;
+  
+  @property({ type: Number })
+  public rollingWindow: number = 0; // 0 means no rolling window
+  
+  @property({ type: Boolean })
+  public realtimeMode: boolean = false;
+  
+  @property({ type: String })
+  public yAxisScaling: 'fixed' | 'dynamic' | 'percentage' = 'dynamic';
+  
+  @property({ type: Number })
+  public yAxisMax: number = 100; // Used when yAxisScaling is 'fixed' or 'percentage'
+  
+  @property({ type: Number })
+  public autoScrollInterval: number = 1000; // Auto-scroll interval in milliseconds (0 to disable)
 
   private resizeObserver: ResizeObserver;
   private resizeTimeout: number;
+  private internalChartData: ApexAxisChartSeries = [];
+  private autoScrollTimer: number | null = null;
 
   constructor() {
     super();
@@ -73,6 +95,7 @@ export class DeesChartArea extends DeesElement {
         clearTimeout(this.resizeTimeout);
       }
       this.resizeObserver.disconnect();
+      this.stopAutoScroll();
     });
   }
 
@@ -173,6 +196,9 @@ export class DeesChartArea extends DeesElement {
       },
     ];
     
+    // Store internal data
+    this.internalChartData = chartSeries;
+    
     var options: ApexCharts.ApexOptions = {
       series: chartSeries,
       chart: {
@@ -183,14 +209,14 @@ export class DeesChartArea extends DeesElement {
           show: false, // This line disables the toolbar
         },
         animations: {
-          enabled: true,
+          enabled: !this.realtimeMode, // Disable animations in realtime mode
           speed: 400,
           animateGradually: {
             enabled: false, // Disable gradual animation for cleaner updates
             delay: 0
           },
           dynamicAnimation: {
-            enabled: true,
+            enabled: !this.realtimeMode,
             speed: 350
           }
         },
@@ -205,10 +231,11 @@ export class DeesChartArea extends DeesElement {
       xaxis: {
         type: 'datetime', // Time-series data
         labels: {
-          format: 'hh:mm A', // Time formatting
+          format: 'HH:mm:ss', // Time formatting with seconds
+          datetimeUTC: false,
           style: {
             colors: '#9e9e9e', // Label color
-            fontSize: '12px',
+            fontSize: '11px',
           },
         },
         axisBorder: {
@@ -220,6 +247,7 @@ export class DeesChartArea extends DeesElement {
       },
       yaxis: {
         min: 0,
+        max: this.yAxisScaling === 'dynamic' ? undefined : this.yAxisMax,
         labels: {
           formatter: this.yAxisFormatter,
           style: {
@@ -313,6 +341,51 @@ export class DeesChartArea extends DeesElement {
         },
       });
     }
+    
+    // Handle realtime mode changes
+    if (changedProperties.has('realtimeMode') && this.chart) {
+      await this.chart.updateOptions({
+        chart: {
+          animations: {
+            enabled: !this.realtimeMode,
+            speed: 400,
+            animateGradually: {
+              enabled: false,
+              delay: 0
+            },
+            dynamicAnimation: {
+              enabled: !this.realtimeMode,
+              speed: 350
+            }
+          }
+        }
+      });
+      
+      // Start/stop auto-scroll based on realtime mode
+      if (this.realtimeMode && this.rollingWindow > 0 && this.autoScrollInterval > 0) {
+        this.startAutoScroll();
+      } else {
+        this.stopAutoScroll();
+      }
+    }
+    
+    // Handle auto-scroll interval changes
+    if (changedProperties.has('autoScrollInterval') && this.chart) {
+      this.stopAutoScroll();
+      if (this.realtimeMode && this.rollingWindow > 0 && this.autoScrollInterval > 0) {
+        this.startAutoScroll();
+      }
+    }
+    
+    // Handle y-axis scaling changes
+    if ((changedProperties.has('yAxisScaling') || changedProperties.has('yAxisMax')) && this.chart) {
+      await this.chart.updateOptions({
+        yaxis: {
+          min: 0,
+          max: this.yAxisScaling === 'dynamic' ? undefined : this.yAxisMax
+        }
+      });
+    }
   }
 
   public async updateSeries(newSeries: ApexAxisChartSeries, animate: boolean = true) {
@@ -320,7 +393,73 @@ export class DeesChartArea extends DeesElement {
       return;
     }
     
-    this.chart.updateSeries(newSeries, animate);
+    // Store the new data first
+    this.internalChartData = newSeries;
+    
+    // Handle rolling window if enabled
+    if (this.rollingWindow > 0 && this.realtimeMode) {
+      const now = Date.now();
+      const cutoffTime = now - this.rollingWindow;
+      
+      // Filter data to only include points within the rolling window
+      const filteredSeries = newSeries.map(series => ({
+        name: series.name,
+        data: (series.data as any[]).filter(point => {
+          if (typeof point === 'object' && point !== null && 'x' in point) {
+            return new Date(point.x).getTime() > cutoffTime;
+          }
+          return false;
+        })
+      }));
+      
+      // Only update if we have data
+      if (filteredSeries.some(s => s.data.length > 0)) {
+        // Handle y-axis scaling first
+        if (this.yAxisScaling === 'dynamic') {
+          const allValues = filteredSeries.flatMap(s => (s.data as any[]).map(d => d.y));
+          if (allValues.length > 0) {
+            const maxValue = Math.max(...allValues);
+            const dynamicMax = Math.ceil(maxValue * 1.1);
+            await this.chart.updateOptions({
+              yaxis: {
+                min: 0,
+                max: dynamicMax
+              }
+            }, false, false);
+          }
+        }
+        
+        this.chart.updateSeries(filteredSeries, false);
+      }
+    } else {
+      this.chart.updateSeries(newSeries, animate);
+    }
+  }
+  
+  // New method to update just the x-axis for smooth scrolling
+  public async updateTimeWindow() {
+    if (!this.chart || this.rollingWindow <= 0) {
+      return;
+    }
+    
+    const now = Date.now();
+    const cutoffTime = now - this.rollingWindow;
+    
+    await this.chart.updateOptions({
+      xaxis: {
+        min: cutoffTime,
+        max: now,
+        labels: {
+          format: 'HH:mm:ss',
+          datetimeUTC: false,
+          style: {
+            colors: '#9e9e9e',
+            fontSize: '11px',
+          },
+        },
+        tickAmount: 6,
+      }
+    }, false, false);
   }
 
   public async appendData(newData: { data: any[] }[]) {
@@ -329,7 +468,7 @@ export class DeesChartArea extends DeesElement {
     }
     
     // Use ApexCharts' appendData method for smoother real-time updates
-    await this.chart.appendData(newData);
+    this.chart.appendData(newData);
   }
   
   public async updateOptions(options: ApexCharts.ApexOptions, redrawPaths?: boolean, animate?: boolean) {
@@ -372,4 +511,21 @@ export class DeesChartArea extends DeesElement {
       },
     });
   }
+  
+  private startAutoScroll() {
+    if (this.autoScrollTimer) {
+      return; // Already running
+    }
+    
+    this.autoScrollTimer = window.setInterval(() => {
+      this.updateTimeWindow();
+    }, this.autoScrollInterval);
+  }
+  
+  private stopAutoScroll() {
+    if (this.autoScrollTimer) {
+      window.clearInterval(this.autoScrollTimer);
+      this.autoScrollTimer = null;
+    }
+  }
 }