From 1a3a5e5454b7345bdede3909bfb1ad341e26a00c Mon Sep 17 00:00:00 2001 From: Juergen Kunz Date: Thu, 2 Apr 2026 19:43:16 +0000 Subject: [PATCH] fix(chart,dashboardgrid demos): use dees-button text property consistently in demo interactions and update dataset button highlighting reliably --- changelog.md | 7 ++ ts_web/00_commitinfo_data.ts | 2 +- .../00group-chart/dees-chart-area/demo.ts | 70 +++++++------------ .../dees-chart-log/dees-chart-log.demo.ts | 2 +- .../dees-dashboardgrid.demo.ts | 4 +- 5 files changed, 35 insertions(+), 50 deletions(-) diff --git a/changelog.md b/changelog.md index 7f69be4..d6d60e7 100644 --- a/changelog.md +++ b/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 diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts index 2877319..563930c 100644 --- a/ts_web/00_commitinfo_data.ts +++ b/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.' } diff --git a/ts_web/elements/00group-chart/dees-chart-area/demo.ts b/ts_web/elements/00group-chart/dees-chart-area/demo.ts index 2f301f2..14d7fd9 100644 --- a/ts_web/elements/00group-chart/dees-chart-area/demo.ts +++ b/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); diff --git a/ts_web/elements/00group-chart/dees-chart-log/dees-chart-log.demo.ts b/ts_web/elements/00group-chart/dees-chart-log/dees-chart-log.demo.ts index 7dc1012..8e834e1 100644 --- a/ts_web/elements/00group-chart/dees-chart-log/dees-chart-log.demo.ts +++ b/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()); diff --git a/ts_web/elements/00group-layout/dees-dashboardgrid/dees-dashboardgrid.demo.ts b/ts_web/elements/00group-layout/dees-dashboardgrid/dees-dashboardgrid.demo.ts index b667b39..8ddc785 100644 --- a/ts_web/elements/00group-layout/dees-dashboardgrid/dees-dashboardgrid.demo.ts +++ b/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':