126 lines
4.0 KiB
TypeScript
126 lines
4.0 KiB
TypeScript
import { html, css, cssManager } from '@design.estate/dees-element';
|
|
import type { DeesChartGauge } from './component.js';
|
|
import '@design.estate/dees-wcctools/demotools';
|
|
import './component.js';
|
|
|
|
export const demoFunc = () => {
|
|
const defaultThresholds = [
|
|
{ value: 60, color: 'hsl(142 76% 36%)' },
|
|
{ value: 80, color: 'hsl(38 92% 50%)' },
|
|
{ value: 100, color: 'hsl(0 72% 50%)' },
|
|
];
|
|
|
|
return html`
|
|
<dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
|
|
const cpuGauge = elementArg.querySelector('#cpu-gauge') as DeesChartGauge;
|
|
const memGauge = elementArg.querySelector('#mem-gauge') as DeesChartGauge;
|
|
const slaGauge = elementArg.querySelector('#sla-gauge') as DeesChartGauge;
|
|
|
|
let animInterval: number | null = null;
|
|
|
|
const buttons = elementArg.querySelectorAll('dees-button');
|
|
buttons.forEach((button: any) => {
|
|
const text = button.text?.trim();
|
|
if (text === 'Animate') {
|
|
button.addEventListener('click', () => {
|
|
if (animInterval) return;
|
|
animInterval = window.setInterval(() => {
|
|
cpuGauge.value = Math.round(30 + Math.random() * 60);
|
|
memGauge.value = Math.round(40 + Math.random() * 50);
|
|
slaGauge.value = Math.round((95 + Math.random() * 5) * 100) / 100;
|
|
}, 2000);
|
|
});
|
|
} else if (text === 'Stop') {
|
|
button.addEventListener('click', () => {
|
|
if (animInterval) {
|
|
window.clearInterval(animInterval);
|
|
animInterval = null;
|
|
}
|
|
});
|
|
} else if (text === 'Spike') {
|
|
button.addEventListener('click', () => {
|
|
cpuGauge.value = 95;
|
|
memGauge.value = 88;
|
|
slaGauge.value = 96.5;
|
|
});
|
|
}
|
|
});
|
|
}}>
|
|
<style>
|
|
${css`
|
|
.demoBox {
|
|
position: relative;
|
|
background: ${cssManager.bdTheme('hsl(0 0% 95%)', 'hsl(0 0% 9%)')};
|
|
height: 100%;
|
|
width: 100%;
|
|
padding: 40px;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 24px;
|
|
}
|
|
.gaugeRow {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
gap: 24px;
|
|
}
|
|
.controls {
|
|
display: flex;
|
|
gap: 12px;
|
|
margin-bottom: 8px;
|
|
}
|
|
.info {
|
|
color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
|
|
font-size: 12px;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Geist Sans', sans-serif;
|
|
text-align: center;
|
|
margin-top: 8px;
|
|
}
|
|
`}
|
|
</style>
|
|
<div class="demoBox">
|
|
<div class="controls">
|
|
<dees-button-group label="Actions:">
|
|
<dees-button>Animate</dees-button>
|
|
<dees-button>Stop</dees-button>
|
|
<dees-button>Spike</dees-button>
|
|
</dees-button-group>
|
|
</div>
|
|
|
|
<div class="gaugeRow">
|
|
<dees-chart-gauge
|
|
id="cpu-gauge"
|
|
.label=${'CPU Usage'}
|
|
.value=${42}
|
|
.unit=${'%'}
|
|
.thresholds=${defaultThresholds}
|
|
></dees-chart-gauge>
|
|
|
|
<dees-chart-gauge
|
|
id="mem-gauge"
|
|
.label=${'Memory Usage'}
|
|
.value=${67}
|
|
.unit=${'%'}
|
|
.thresholds=${defaultThresholds}
|
|
></dees-chart-gauge>
|
|
|
|
<dees-chart-gauge
|
|
id="sla-gauge"
|
|
.label=${'SLA Uptime'}
|
|
.value=${99.8}
|
|
.min=${95}
|
|
.max=${100}
|
|
.unit=${'%'}
|
|
.showTicks=${true}
|
|
></dees-chart-gauge>
|
|
</div>
|
|
|
|
<div class="info">
|
|
Gauge chart with animated value transitions and threshold coloring •
|
|
Click 'Animate' for live updates, 'Spike' to simulate high load
|
|
</div>
|
|
</div>
|
|
</dees-demowrapper>
|
|
`;
|
|
};
|