128 lines
4.0 KiB
TypeScript
128 lines
4.0 KiB
TypeScript
import { html, css, cssManager } from '@design.estate/dees-element';
|
|
import type { DeesChartDonut } from './component.js';
|
|
import '@design.estate/dees-wcctools/demotools';
|
|
import './component.js';
|
|
|
|
export const demoFunc = () => {
|
|
const diskData = [
|
|
{ name: 'Documents', value: 42 },
|
|
{ name: 'Media', value: 28 },
|
|
{ name: 'Applications', value: 15 },
|
|
{ name: 'System', value: 10 },
|
|
{ name: 'Other', value: 5 },
|
|
];
|
|
|
|
const statusData = [
|
|
{ name: 'Healthy', value: 156 },
|
|
{ name: 'Warning', value: 23 },
|
|
{ name: 'Critical', value: 8 },
|
|
{ name: 'Unknown', value: 3 },
|
|
];
|
|
|
|
const trafficData = [
|
|
{ name: 'API', value: 45200 },
|
|
{ name: 'Static Assets', value: 23100 },
|
|
{ name: 'WebSocket', value: 12800 },
|
|
{ name: 'GraphQL', value: 8900 },
|
|
];
|
|
|
|
return html`
|
|
<dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
|
|
const diskChart = elementArg.querySelector('#disk-chart') as DeesChartDonut;
|
|
const statusChart = elementArg.querySelector('#status-chart') as DeesChartDonut;
|
|
const trafficChart = elementArg.querySelector('#traffic-chart') as DeesChartDonut;
|
|
|
|
// Wire up buttons
|
|
const buttons = elementArg.querySelectorAll('dees-button');
|
|
buttons.forEach((button: any) => {
|
|
const text = button.text?.trim();
|
|
if (text === 'Randomize') {
|
|
button.addEventListener('click', () => {
|
|
diskChart.data = diskData.map((d) => ({
|
|
...d,
|
|
value: Math.round(d.value * (0.5 + Math.random())),
|
|
}));
|
|
statusChart.data = statusData.map((d) => ({
|
|
...d,
|
|
value: Math.round(d.value * (0.3 + Math.random() * 1.4)),
|
|
}));
|
|
trafficChart.data = trafficData.map((d) => ({
|
|
...d,
|
|
value: Math.round(d.value * (0.5 + Math.random())),
|
|
}));
|
|
});
|
|
}
|
|
});
|
|
}}>
|
|
<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;
|
|
}
|
|
.chartRow {
|
|
display: grid;
|
|
grid-template-columns: 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>Randomize</dees-button>
|
|
</dees-button-group>
|
|
</div>
|
|
|
|
<div class="chartRow">
|
|
<dees-chart-donut
|
|
id="disk-chart"
|
|
.label=${'Disk Usage (GB)'}
|
|
.data=${diskData}
|
|
.valueFormatter=${(val: number) => `${val} GB`}
|
|
></dees-chart-donut>
|
|
|
|
<dees-chart-donut
|
|
id="status-chart"
|
|
.label=${'Service Status'}
|
|
.data=${statusData}
|
|
.valueFormatter=${(val: number) => `${val} services`}
|
|
.innerRadiusPercent=${'0%'}
|
|
></dees-chart-donut>
|
|
</div>
|
|
|
|
<dees-chart-donut
|
|
id="traffic-chart"
|
|
.label=${'Traffic Distribution'}
|
|
.data=${trafficData}
|
|
.valueFormatter=${(val: number) => `${(val / 1000).toFixed(1)}k req`}
|
|
></dees-chart-donut>
|
|
|
|
<div class="info">
|
|
Donut chart with configurable inner radius (set to 0% for full pie) •
|
|
Click 'Randomize' to update data with animation
|
|
</div>
|
|
</div>
|
|
</dees-demowrapper>
|
|
`;
|
|
};
|