fix(dees-catalog): update @design.estate/dees-wcctools dependency to version 1.0.95 for compatibility
feat(dees-chart-area): refactor demo function for improved dataset handling and real-time updates feat(dees-chart-log): enhance demo function with simulation controls for server log generation
This commit is contained in:
Juergen Kunz
@ -17,7 +17,7 @@
|
||||
"dependencies": {
|
||||
"@design.estate/dees-domtools": "^2.1.1",
|
||||
"@design.estate/dees-element": "^2.0.42",
|
||||
"@design.estate/dees-wcctools": "^1.0.92",
|
||||
"@design.estate/dees-wcctools": "^1.0.95",
|
||||
"@fortawesome/fontawesome-svg-core": "^6.7.2",
|
||||
"@fortawesome/free-brands-svg-icons": "^6.7.2",
|
||||
"@fortawesome/free-regular-svg-icons": "^6.7.2",
|
||||
|
||||
10
pnpm-lock.yaml
generated
10
pnpm-lock.yaml
generated
@ -15,8 +15,8 @@ importers:
|
||||
specifier: ^2.0.42
|
||||
version: 2.0.42
|
||||
'@design.estate/dees-wcctools':
|
||||
specifier: ^1.0.92
|
||||
version: 1.0.92
|
||||
specifier: ^1.0.95
|
||||
version: 1.0.95
|
||||
'@fortawesome/fontawesome-svg-core':
|
||||
specifier: ^6.7.2
|
||||
version: 6.7.2
|
||||
@ -305,8 +305,8 @@ packages:
|
||||
'@design.estate/dees-element@2.0.42':
|
||||
resolution: {integrity: sha512-1PzHP6q/PtSiu4P0nCxjSeHtRHn62zoSouMy8JFW2h29FT/CSDVaTUAUqYqnvwE/U98aLNivWTmerZitDF7kBQ==}
|
||||
|
||||
'@design.estate/dees-wcctools@1.0.92':
|
||||
resolution: {integrity: sha512-E4Hnxvvzy2ivJzPHzWL2dmJtBtAD+stnEG7uQ0usQM6NVnarIGPI9PflGSspM75nnA/HKi+lpsqRgp1DtbPqTQ==}
|
||||
'@design.estate/dees-wcctools@1.0.95':
|
||||
resolution: {integrity: sha512-mXClal8YdvA74ILdAWe64ocydvwhVfQAOGaykrKGkR1qb8TA1Qn4H7QG9HUsg3jEVZApY0wYbhILuTvpvbkgGA==}
|
||||
|
||||
'@esbuild/aix-ppc64@0.24.2':
|
||||
resolution: {integrity: sha512-thpVCb/rhxE/BnMLQ7GReQLLN8q9qbHmI55F4489/ByVg2aQaQ6kbcLb6FHkocZzQhxc4gx0sCk0tJkKBFzDhA==}
|
||||
@ -5176,7 +5176,7 @@ snapshots:
|
||||
- supports-color
|
||||
- vue
|
||||
|
||||
'@design.estate/dees-wcctools@1.0.92':
|
||||
'@design.estate/dees-wcctools@1.0.95':
|
||||
dependencies:
|
||||
'@design.estate/dees-domtools': 2.3.2
|
||||
'@design.estate/dees-element': 2.0.42
|
||||
|
||||
@ -1,9 +1,46 @@
|
||||
import { html, css } from '@design.estate/dees-element';
|
||||
import type { DeesChartArea } from './dees-chart-area.js';
|
||||
import '@design.estate/dees-wcctools';
|
||||
|
||||
export const demoFunc = () => {
|
||||
let chartElement: DeesChartArea;
|
||||
// Initial dataset values
|
||||
const initialDatasets = {
|
||||
system: {
|
||||
label: 'System Usage (%)',
|
||||
series: [
|
||||
{
|
||||
name: 'CPU',
|
||||
data: [
|
||||
{ x: new Date(Date.now() - 300000).toISOString(), y: 25 },
|
||||
{ x: new Date(Date.now() - 240000).toISOString(), y: 30 },
|
||||
{ x: new Date(Date.now() - 180000).toISOString(), y: 28 },
|
||||
{ x: new Date(Date.now() - 120000).toISOString(), y: 35 },
|
||||
{ x: new Date(Date.now() - 60000).toISOString(), y: 32 },
|
||||
{ x: new Date().toISOString(), y: 38 },
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'Memory',
|
||||
data: [
|
||||
{ x: new Date(Date.now() - 300000).toISOString(), y: 45 },
|
||||
{ x: new Date(Date.now() - 240000).toISOString(), y: 48 },
|
||||
{ x: new Date(Date.now() - 180000).toISOString(), y: 46 },
|
||||
{ x: new Date(Date.now() - 120000).toISOString(), y: 52 },
|
||||
{ x: new Date(Date.now() - 60000).toISOString(), y: 50 },
|
||||
{ x: new Date().toISOString(), y: 55 },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
const initialFormatters = {
|
||||
system: (val: number) => `${val}%`,
|
||||
};
|
||||
|
||||
return html`
|
||||
<dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
|
||||
// Get the chart element
|
||||
const chartElement = elementArg.querySelector('dees-chart-area') as DeesChartArea;
|
||||
let intervalId: number;
|
||||
let currentDataset = 'system';
|
||||
|
||||
@ -104,15 +141,10 @@ export const demoFunc = () => {
|
||||
return Math.floor(Math.random() * (max - min + 1)) + min;
|
||||
};
|
||||
|
||||
// Get chart element
|
||||
const getChartElement = () => {
|
||||
return chartElement;
|
||||
};
|
||||
|
||||
// Add real-time data
|
||||
const addRealtimeData = () => {
|
||||
const chart = getChartElement();
|
||||
if (!chart) return;
|
||||
if (!chartElement) return;
|
||||
|
||||
const newTimestamp = new Date().toISOString();
|
||||
|
||||
// Generate new data points based on dataset type
|
||||
@ -131,46 +163,35 @@ export const demoFunc = () => {
|
||||
}
|
||||
|
||||
// Keep only last 20 data points and update without animation
|
||||
const currentSeries = chart.series.map((series, index) => ({
|
||||
const currentSeries = chartElement.series.map((series, index) => ({
|
||||
...series,
|
||||
data: [...series.data.slice(-19), ...(newData[index] || [])],
|
||||
}));
|
||||
|
||||
// Update without animation for smoother real-time updates
|
||||
chart.updateSeries(currentSeries, false);
|
||||
chartElement.updateSeries(currentSeries, false);
|
||||
};
|
||||
|
||||
// Switch dataset
|
||||
const switchDataset = (name: string) => {
|
||||
currentDataset = name;
|
||||
|
||||
const updateChart = () => {
|
||||
const chart = getChartElement();
|
||||
if (chart) {
|
||||
const dataset = datasets[name];
|
||||
chart.label = dataset.label;
|
||||
chart.series = dataset.series;
|
||||
chart.yAxisFormatter = formatters[name];
|
||||
}
|
||||
};
|
||||
|
||||
updateChart();
|
||||
chartElement.label = dataset.label;
|
||||
chartElement.series = dataset.series;
|
||||
chartElement.yAxisFormatter = formatters[name];
|
||||
};
|
||||
|
||||
// Start/stop real-time updates
|
||||
const startRealtime = () => {
|
||||
if (!intervalId && (currentDataset === 'system' || currentDataset === 'network')) {
|
||||
const chart = getChartElement();
|
||||
if (chart) {
|
||||
// Disable animations for real-time mode
|
||||
chart.updateOptions({
|
||||
chartElement.updateOptions({
|
||||
chart: {
|
||||
animations: {
|
||||
enabled: false
|
||||
}
|
||||
}
|
||||
}, false, false);
|
||||
}
|
||||
|
||||
intervalId = window.setInterval(() => addRealtimeData(), 2000);
|
||||
}
|
||||
@ -181,10 +202,8 @@ export const demoFunc = () => {
|
||||
window.clearInterval(intervalId);
|
||||
intervalId = null;
|
||||
|
||||
const chart = getChartElement();
|
||||
if (chart) {
|
||||
// Re-enable animations when stopping real-time
|
||||
chart.updateOptions({
|
||||
chartElement.updateOptions({
|
||||
chart: {
|
||||
animations: {
|
||||
enabled: true,
|
||||
@ -197,15 +216,11 @@ export const demoFunc = () => {
|
||||
}
|
||||
}, false, true);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Randomize current data
|
||||
const randomizeData = () => {
|
||||
const chart = getChartElement();
|
||||
if (!chart) return;
|
||||
|
||||
const currentSeries = chart.series.map(series => ({
|
||||
const currentSeries = chartElement.series.map(series => ({
|
||||
...series,
|
||||
data: series.data.map((point: any) => ({
|
||||
...point,
|
||||
@ -216,13 +231,66 @@ export const demoFunc = () => {
|
||||
}));
|
||||
|
||||
// Update with animation for single updates
|
||||
chart.updateSeries(currentSeries, true);
|
||||
chartElement.updateSeries(currentSeries, true);
|
||||
};
|
||||
|
||||
return html`
|
||||
<dees-demowrapper .runAfterRender=${async (element: HTMLElement) => {
|
||||
// Store the chart element reference
|
||||
chartElement = element.querySelector('dees-chart-area') as DeesChartArea;
|
||||
// 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 === 'Randomize Values') {
|
||||
button.addEventListener('click', () => randomizeData());
|
||||
} else if (text === 'Add Point') {
|
||||
button.addEventListener('click', () => addRealtimeData());
|
||||
}
|
||||
});
|
||||
|
||||
// Update button states based on current dataset
|
||||
const updateButtonStates = () => {
|
||||
const buttons = elementArg.querySelectorAll('dees-button');
|
||||
buttons.forEach(button => {
|
||||
const text = button.textContent?.trim();
|
||||
if (text === 'System Usage') {
|
||||
button.type = currentDataset === 'system' ? 'highlighted' : 'normal';
|
||||
} else if (text === 'Network Traffic') {
|
||||
button.type = currentDataset === 'network' ? 'highlighted' : 'normal';
|
||||
} else if (text === 'Sales Data') {
|
||||
button.type = currentDataset === 'sales' ? 'highlighted' : 'normal';
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 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'));
|
||||
}
|
||||
});
|
||||
}}>
|
||||
<style>
|
||||
${css`
|
||||
@ -262,36 +330,27 @@ export const demoFunc = () => {
|
||||
<div class="demoBox">
|
||||
<div class="controls">
|
||||
<dees-button-group label="Dataset:">
|
||||
<dees-button
|
||||
@clicked=${() => switchDataset('system')}
|
||||
type=${currentDataset === 'system' ? 'highlighted' : 'normal'}
|
||||
>System Usage</dees-button>
|
||||
<dees-button
|
||||
@clicked=${() => switchDataset('network')}
|
||||
type=${currentDataset === 'network' ? 'highlighted' : 'normal'}
|
||||
>Network Traffic</dees-button>
|
||||
<dees-button
|
||||
@clicked=${() => switchDataset('sales')}
|
||||
type=${currentDataset === 'sales' ? 'highlighted' : 'normal'}
|
||||
>Sales Data</dees-button>
|
||||
<dees-button type="highlighted">System Usage</dees-button>
|
||||
<dees-button>Network Traffic</dees-button>
|
||||
<dees-button>Sales Data</dees-button>
|
||||
</dees-button-group>
|
||||
|
||||
<dees-button-group label="Real-time:">
|
||||
<dees-button @clicked=${() => startRealtime()}>Start Live</dees-button>
|
||||
<dees-button @clicked=${() => stopRealtime()}>Stop Live</dees-button>
|
||||
<dees-button>Start Live</dees-button>
|
||||
<dees-button>Stop Live</dees-button>
|
||||
</dees-button-group>
|
||||
|
||||
<dees-button-group label="Actions:">
|
||||
<dees-button @clicked=${() => randomizeData()}>Randomize Values</dees-button>
|
||||
<dees-button @clicked=${() => addRealtimeData()}>Add Point</dees-button>
|
||||
<dees-button>Randomize Values</dees-button>
|
||||
<dees-button>Add Point</dees-button>
|
||||
</dees-button-group>
|
||||
</div>
|
||||
|
||||
<div class="chart-container">
|
||||
<dees-chart-area
|
||||
.label=${datasets[currentDataset].label}
|
||||
.series=${datasets[currentDataset].series}
|
||||
.yAxisFormatter=${formatters[currentDataset]}
|
||||
.label=${initialDatasets.system.label}
|
||||
.series=${initialDatasets.system.series}
|
||||
.yAxisFormatter=${initialFormatters.system}
|
||||
></dees-chart-area>
|
||||
</div>
|
||||
|
||||
|
||||
@ -1,10 +1,12 @@
|
||||
import { html } from '@design.estate/dees-element';
|
||||
import type { DeesChartLog } from './dees-chart-log.js';
|
||||
import '@design.estate/dees-wcctools';
|
||||
|
||||
export const demoFunc = () => {
|
||||
return html`
|
||||
<dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
|
||||
// Get the log element
|
||||
const logElement = elementArg.querySelector('dees-chart-log') as DeesChartLog;
|
||||
let intervalId: number;
|
||||
let logElement: DeesChartLog;
|
||||
|
||||
const serverSources = ['Server', 'Database', 'API', 'Auth', 'Cache', 'Queue', 'WebSocket', 'Scheduler'];
|
||||
|
||||
@ -47,10 +49,6 @@ export const demoFunc = () => {
|
||||
};
|
||||
|
||||
const generateRandomLog = () => {
|
||||
if (!logElement) {
|
||||
console.warn('Log element not ready yet');
|
||||
return;
|
||||
}
|
||||
const levels: Array<'debug' | 'info' | 'warn' | 'error' | 'success'> = ['debug', 'info', 'warn', 'error', 'success'];
|
||||
const weights = [0.2, 0.5, 0.15, 0.1, 0.05]; // Weighted probability
|
||||
|
||||
@ -119,11 +117,18 @@ export const demoFunc = () => {
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
return html`
|
||||
<dees-demowrapper .runAfterRender=${async (element: HTMLElement) => {
|
||||
// Store the log element reference
|
||||
logElement = element.querySelector('dees-chart-log') as DeesChartLog;
|
||||
// Wire up button click handlers
|
||||
const buttons = elementArg.querySelectorAll('dees-button');
|
||||
buttons.forEach(button => {
|
||||
const text = button.textContent?.trim();
|
||||
if (text === 'Add Single Log') {
|
||||
button.addEventListener('click', () => generateRandomLog());
|
||||
} else if (text === 'Start Simulation') {
|
||||
button.addEventListener('click', () => startSimulation());
|
||||
} else if (text === 'Stop Simulation') {
|
||||
button.addEventListener('click', () => stopSimulation());
|
||||
}
|
||||
});
|
||||
}}>
|
||||
<style>
|
||||
.demoBox {
|
||||
@ -150,9 +155,9 @@ export const demoFunc = () => {
|
||||
</style>
|
||||
<div class="demoBox">
|
||||
<div class="controls">
|
||||
<dees-button @clicked=${() => generateRandomLog()}>Add Single Log</dees-button>
|
||||
<dees-button @clicked=${() => startSimulation()}>Start Simulation</dees-button>
|
||||
<dees-button @clicked=${() => stopSimulation()}>Stop Simulation</dees-button>
|
||||
<dees-button>Add Single Log</dees-button>
|
||||
<dees-button>Start Simulation</dees-button>
|
||||
<dees-button>Stop Simulation</dees-button>
|
||||
</div>
|
||||
<div class="info">Simulating realistic server logs with various levels and sources</div>
|
||||
<dees-chart-log
|
||||
|
||||
Reference in New Issue
Block a user