design.estate/dees-catalog
3
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

fix(chart,dashboardgrid demos): use dees-button text property consistently in demo interactions and update dataset button highlighting reliably

Browse Source
This commit is contained in:
Jürgen Kunz
2026-04-02 19:43:16 +00:00
parent 5cf8161735
commit 1a3a5e5454
5 changed files with 35 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
changelog.md
View File

@@ -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

2
ts_web/00_commitinfo_data.ts
View File

@@ -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.'
}

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

@@ -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);

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

@@ -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());

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

@@ -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':