366 lines
13 KiB
TypeScript
366 lines
13 KiB
TypeScript
import { html, css } from '@design.estate/dees-element';
|
|
import type { DeesChartArea } from './dees-chart-area.js';
|
|
import '@design.estate/dees-wcctools/demotools';
|
|
|
|
export const demoFunc = () => {
|
|
// 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';
|
|
|
|
// Y-axis formatters for different datasets
|
|
const formatters = {
|
|
system: (val: number) => `${val}%`,
|
|
network: (val: number) => `${val} Mbps`,
|
|
sales: (val: number) => `$${val.toLocaleString()}`,
|
|
};
|
|
|
|
// Different datasets to showcase
|
|
const datasets = {
|
|
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 },
|
|
],
|
|
},
|
|
],
|
|
},
|
|
network: {
|
|
label: 'Network Traffic (Mbps)',
|
|
series: [
|
|
{
|
|
name: 'Download',
|
|
data: [
|
|
{ x: new Date(Date.now() - 300000).toISOString(), y: 120 },
|
|
{ x: new Date(Date.now() - 240000).toISOString(), y: 150 },
|
|
{ x: new Date(Date.now() - 180000).toISOString(), y: 180 },
|
|
{ x: new Date(Date.now() - 120000).toISOString(), y: 165 },
|
|
{ x: new Date(Date.now() - 60000).toISOString(), y: 190 },
|
|
{ x: new Date().toISOString(), y: 175 },
|
|
],
|
|
},
|
|
{
|
|
name: 'Upload',
|
|
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: 35 },
|
|
{ x: new Date(Date.now() - 120000).toISOString(), y: 28 },
|
|
{ x: new Date(Date.now() - 60000).toISOString(), y: 32 },
|
|
{ x: new Date().toISOString(), y: 40 },
|
|
],
|
|
},
|
|
],
|
|
},
|
|
sales: {
|
|
label: 'Sales Analytics',
|
|
series: [
|
|
{
|
|
name: 'Revenue',
|
|
data: [
|
|
{ x: '2025-01-01', y: 45000 },
|
|
{ x: '2025-01-02', y: 52000 },
|
|
{ x: '2025-01-03', y: 48000 },
|
|
{ x: '2025-01-04', y: 61000 },
|
|
{ x: '2025-01-05', y: 58000 },
|
|
{ x: '2025-01-06', y: 65000 },
|
|
],
|
|
},
|
|
{
|
|
name: 'Profit',
|
|
data: [
|
|
{ x: '2025-01-01', y: 12000 },
|
|
{ x: '2025-01-02', y: 14000 },
|
|
{ x: '2025-01-03', y: 11000 },
|
|
{ x: '2025-01-04', y: 18000 },
|
|
{ x: '2025-01-05', y: 16000 },
|
|
{ x: '2025-01-06', y: 20000 },
|
|
],
|
|
},
|
|
],
|
|
},
|
|
};
|
|
|
|
// Generate random value within range
|
|
const getRandomValue = (min: number, max: number) => {
|
|
return Math.floor(Math.random() * (max - min + 1)) + min;
|
|
};
|
|
|
|
// Add real-time data
|
|
const addRealtimeData = () => {
|
|
if (!chartElement) return;
|
|
|
|
const newTimestamp = new Date().toISOString();
|
|
|
|
// Generate new data points based on dataset type
|
|
let newData: any[][] = [];
|
|
|
|
if (currentDataset === 'system') {
|
|
newData = [
|
|
[{ x: newTimestamp, y: getRandomValue(25, 45) }], // CPU
|
|
[{ x: newTimestamp, y: getRandomValue(45, 65) }], // Memory
|
|
];
|
|
} else if (currentDataset === 'network') {
|
|
newData = [
|
|
[{ x: newTimestamp, y: getRandomValue(100, 250) }], // Download
|
|
[{ x: newTimestamp, y: getRandomValue(20, 50) }], // Upload
|
|
];
|
|
}
|
|
|
|
// Keep only last 20 data points and update without animation
|
|
const currentSeries = chartElement.series.map((series, index) => ({
|
|
...series,
|
|
data: [...series.data.slice(-19), ...(newData[index] || [])],
|
|
}));
|
|
|
|
// Update without animation for smoother real-time updates
|
|
chartElement.updateSeries(currentSeries, false);
|
|
};
|
|
|
|
// Switch dataset
|
|
const switchDataset = (name: string) => {
|
|
currentDataset = name;
|
|
const dataset = datasets[name];
|
|
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')) {
|
|
// Disable animations for real-time mode
|
|
chartElement.updateOptions({
|
|
chart: {
|
|
animations: {
|
|
enabled: false
|
|
}
|
|
}
|
|
}, false, false);
|
|
|
|
intervalId = window.setInterval(() => addRealtimeData(), 2000);
|
|
}
|
|
};
|
|
|
|
const stopRealtime = () => {
|
|
if (intervalId) {
|
|
window.clearInterval(intervalId);
|
|
intervalId = null;
|
|
|
|
// Re-enable animations when stopping real-time
|
|
chartElement.updateOptions({
|
|
chart: {
|
|
animations: {
|
|
enabled: true,
|
|
speed: 400,
|
|
animateGradually: {
|
|
enabled: true,
|
|
delay: 150
|
|
}
|
|
}
|
|
}
|
|
}, false, true);
|
|
}
|
|
};
|
|
|
|
// Randomize current data
|
|
const randomizeData = () => {
|
|
const currentSeries = chartElement.series.map(series => ({
|
|
...series,
|
|
data: series.data.map((point: any) => ({
|
|
...point,
|
|
y: typeof point.y === 'number'
|
|
? Math.round(point.y * (0.8 + Math.random() * 0.4)) // +/- 20% variation
|
|
: point.y,
|
|
})),
|
|
}));
|
|
|
|
// Update with animation for single updates
|
|
chartElement.updateSeries(currentSeries, true);
|
|
};
|
|
|
|
// 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`
|
|
.demoBox {
|
|
position: relative;
|
|
background: #000000;
|
|
height: 100%;
|
|
width: 100%;
|
|
padding: 40px;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 24px;
|
|
}
|
|
|
|
.controls {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 12px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.chart-container {
|
|
flex: 1;
|
|
min-height: 400px;
|
|
}
|
|
|
|
.info {
|
|
color: #666;
|
|
font-size: 11px;
|
|
font-family: 'Geist Sans', sans-serif;
|
|
text-align: center;
|
|
margin-top: 8px;
|
|
}
|
|
`}
|
|
</style>
|
|
<div class="demoBox">
|
|
<div class="controls">
|
|
<dees-button-group label="Dataset:">
|
|
<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>Start Live</dees-button>
|
|
<dees-button>Stop Live</dees-button>
|
|
</dees-button-group>
|
|
|
|
<dees-button-group label="Actions:">
|
|
<dees-button>Randomize Values</dees-button>
|
|
<dees-button>Add Point</dees-button>
|
|
</dees-button-group>
|
|
</div>
|
|
|
|
<div class="chart-container">
|
|
<dees-chart-area
|
|
.label=${initialDatasets.system.label}
|
|
.series=${initialDatasets.system.series}
|
|
.yAxisFormatter=${initialFormatters.system}
|
|
></dees-chart-area>
|
|
</div>
|
|
|
|
<div class="info">
|
|
Real-time updates work with System Usage and Network Traffic datasets •
|
|
Chart updates every 2 seconds when live mode is active •
|
|
Try switching datasets and randomizing values
|
|
</div>
|
|
</div>
|
|
</dees-demowrapper>
|
|
`;
|
|
}; |