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

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