v3.50.2

changelog.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 2026-04-02 - 3.50.2 - fix(chart,dashboardgrid demos)
+use dees-button text property consistently in demo interactions and update dataset button highlighting reliably
+
+- Replaces textContent reads with the component text property when wiring demo button handlers.
+- Updates the chart area demo to refresh dataset button highlight states directly on click without redundant listener replacement logic.
+- Uses the button text property when toggling dashboard edit mode labels.
+
 ## 2026-04-02 - 3.50.1 - fix(appdash)
 use banner height CSS variable for terminal layout and expose terminal resize handling
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "3.50.1",
+  "version": "3.50.2",
   "private": false,
   "description": "A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.",
   "main": "dist_ts_web/index.js",

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '3.50.1',
+  version: '3.50.2',
   description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
 }

ts_web/elements/00group-chart/dees-chart-area/component.ts

@@ -468,16 +468,16 @@ export class DeesChartArea extends DeesElement {
     if (!this.chart) {
       return;
     }
-    
+
     try {
       // 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,
@@ -488,25 +488,41 @@ export class DeesChartArea extends DeesElement {
             return false;
           })
         }));
-        
+
         // Only update if we have data
         if (filteredSeries.some(s => s.data.length > 0)) {
-          // Handle y-axis scaling first
+          // Build a single options update with series, x-axis window, and y-axis
+          const isDark = !this.goBright;
+          const options: ApexCharts.ApexOptions = {
+            series: filteredSeries,
+            xaxis: {
+              min: cutoffTime,
+              max: now,
+              labels: {
+                format: 'HH:mm:ss',
+                datetimeUTC: false,
+                style: {
+                  colors: [isDark ? 'hsl(0 0% 63.9%)' : 'hsl(0 0% 20%)'],
+                  fontSize: '12px',
+                  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+                  fontWeight: '400',
+                },
+              },
+              tickAmount: 6,
+            },
+          };
+
+          // Handle y-axis scaling
           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);
+              options.yaxis = { min: 0, max: dynamicMax };
             }
           }
-          
-          await this.chart.updateSeries(filteredSeries, false);
+
+          await this.chart.updateOptions(options, false, false);
         }
       } else {
         await this.chart.updateSeries(newSeries, animate);

ts_web/elements/00group-chart/dees-chart-area/demo.ts

@@ -310,30 +310,11 @@ export const demoFunc = () => {
         connectionsLastUpdate = 0;
       };
 
-      // Wire up button click handlers
-      const buttons = elementArg.querySelectorAll('dees-button');
-      buttons.forEach(button => {
-        const text = button.textContent?.trim();
-        if (text === 'System Usage') {
-          button.addEventListener('click', () => switchDataset('system'));
-        } else if (text === 'Network Traffic') {
-          button.addEventListener('click', () => switchDataset('network'));
-        } else if (text === 'Sales Data') {
-          button.addEventListener('click', () => switchDataset('sales'));
-        } else if (text === 'Start Live') {
-          button.addEventListener('click', () => startRealtime());
-        } else if (text === 'Stop Live') {
-          button.addEventListener('click', () => stopRealtime());
-        } else if (text === 'Spike Values') {
-          button.addEventListener('click', () => randomizeData());
-        }
-      });
-      
       // Update button states based on current dataset
       const updateButtonStates = () => {
-        const buttons = elementArg.querySelectorAll('dees-button');
-        buttons.forEach(button => {
-          const text = button.textContent?.trim();
+        const allButtons = elementArg.querySelectorAll('dees-button');
+        allButtons.forEach((button: any) => {
+          const text = button.text?.trim();
           if (text === 'System Usage') {
             button.type = currentDataset === 'system' ? 'highlighted' : 'normal';
           } else if (text === 'Network Traffic') {
@@ -343,41 +324,38 @@ export const demoFunc = () => {
           }
         });
       };
-      
+
+      // Wire up button click handlers
+      const buttons = elementArg.querySelectorAll('dees-button');
+      buttons.forEach((button: any) => {
+        const text = button.text?.trim();
+        if (text === 'System Usage') {
+          button.addEventListener('click', () => { switchDataset('system'); updateButtonStates(); });
+        } else if (text === 'Network Traffic') {
+          button.addEventListener('click', () => { switchDataset('network'); updateButtonStates(); });
+        } else if (text === 'Sales Data') {
+          button.addEventListener('click', () => { switchDataset('sales'); updateButtonStates(); });
+        } else if (text === 'Start Live') {
+          button.addEventListener('click', () => startRealtime());
+        } else if (text === 'Stop Live') {
+          button.addEventListener('click', () => stopRealtime());
+        } else if (text === 'Spike Values') {
+          button.addEventListener('click', () => randomizeData());
+        }
+      });
+
       // Configure main chart with rolling window
       chartElement.rollingWindow = TIME_WINDOW;
       chartElement.realtimeMode = false; // Will be enabled when starting live updates
       chartElement.yAxisScaling = 'percentage'; // Initial system dataset uses percentage
       chartElement.yAxisMax = 100;
       chartElement.autoScrollInterval = 1000; // Auto-scroll every second
-      
+
       // Set initial time window
       setTimeout(() => {
         chartElement.updateTimeWindow();
       }, 100);
       
-      // Update button states when dataset changes
-      const originalSwitchDataset = switchDataset;
-      const switchDatasetWithButtonUpdate = (name: string) => {
-        originalSwitchDataset(name);
-        updateButtonStates();
-      };
-      
-      // Replace switchDataset with the one that updates buttons
-      buttons.forEach(button => {
-        const text = button.textContent?.trim();
-        if (text === 'System Usage') {
-          button.removeEventListener('click', () => switchDataset('system'));
-          button.addEventListener('click', () => switchDatasetWithButtonUpdate('system'));
-        } else if (text === 'Network Traffic') {
-          button.removeEventListener('click', () => switchDataset('network'));
-          button.addEventListener('click', () => switchDatasetWithButtonUpdate('network'));
-        } else if (text === 'Sales Data') {
-          button.removeEventListener('click', () => switchDataset('sales'));
-          button.addEventListener('click', () => switchDatasetWithButtonUpdate('sales'));
-        }
-      });
-      
       // Initialize connections chart with data
       if (connectionsChartElement) {
         const initialConnectionsData = generateInitialData(previousValues.connections, 30, UPDATE_INTERVAL);

ts_web/elements/00group-chart/dees-chart-log/dees-chart-log.demo.ts

@@ -174,7 +174,7 @@ export const demoFunc = () => {
       // Wire up button click handlers
       const buttons = elementArg.querySelectorAll('dees-button');
       buttons.forEach(button => {
-        const text = button.textContent?.trim();
+        const text = (button as any).text?.trim();
         switch (text) {
           case 'Add Structured Log':
             button.addEventListener('click', () => generateRandomLog());

ts_web/elements/00group-layout/dees-dashboardgrid/dees-dashboardgrid.demo.ts

@@ -103,7 +103,7 @@ export const demoFunc = () => {
 
       const buttons = elementArg.querySelectorAll('dees-button');
       buttons.forEach(button => {
-        const text = button.textContent?.trim();
+        const text = (button as any).text?.trim();
 
         switch (text) {
           case 'Toggle Animation':
@@ -147,7 +147,7 @@ export const demoFunc = () => {
           case 'Toggle Edit Mode':
             button.addEventListener('click', () => {
               grid.editable = !grid.editable;
-              button.textContent = grid.editable ? 'Lock Grid' : 'Unlock Grid';
+              (button as any).text = grid.editable ? 'Lock Grid' : 'Unlock Grid';
             });
             break;
           case 'Reset Layout':