feat(dees-statsgrid): add cpuCores tile type with column spanning, rendering, demo and docs
This commit is contained in:
@@ -1,7 +1,16 @@
|
||||
import { html, css, cssManager } from '@design.estate/dees-element';
|
||||
import '@design.estate/dees-wcctools/demotools';
|
||||
import '../dees-panel/dees-panel.js';
|
||||
import type { IStatsTile } from '../dees-statsgrid/dees-statsgrid.js';
|
||||
import type { IStatsTile, ICpuCore } from '../dees-statsgrid/dees-statsgrid.js';
|
||||
|
||||
// Helper function to generate random CPU core data
|
||||
const generateCpuCores = (count: number): ICpuCore[] => {
|
||||
return Array.from({ length: count }, (_, i) => ({
|
||||
id: i,
|
||||
usage: Math.round(Math.random() * 100),
|
||||
label: `${i}`,
|
||||
}));
|
||||
};
|
||||
|
||||
export const demoFunc = () => {
|
||||
return html`
|
||||
@@ -334,7 +343,96 @@ export const demoFunc = () => {
|
||||
></dees-statsgrid>
|
||||
</dees-panel>
|
||||
|
||||
<dees-panel .title=${'4. Interactive Features'} .subtitle=${'Tiles with actions and real-time updates'}>
|
||||
<dees-panel .title=${'4. CPU Cores Visualization'} .subtitle=${'Vertical bar visualization for multi-core CPU usage with column spanning'}>
|
||||
<dees-statsgrid
|
||||
id="cpu-cores-grid"
|
||||
.tiles=${[
|
||||
{
|
||||
id: 'cpu-cores-8',
|
||||
title: 'CPU Cores (8-core)',
|
||||
value: 0,
|
||||
type: 'cpuCores',
|
||||
icon: 'lucide:cpu',
|
||||
columnSpan: 2,
|
||||
coresData: generateCpuCores(8),
|
||||
description: 'Intel i7 - 8 cores'
|
||||
},
|
||||
{
|
||||
id: 'memory',
|
||||
title: 'Memory Usage',
|
||||
value: 68,
|
||||
type: 'percentage',
|
||||
icon: 'lucide:database',
|
||||
description: '13.6 GB of 20 GB'
|
||||
},
|
||||
{
|
||||
id: 'cpu-cores-16',
|
||||
title: 'CPU Cores (16-core)',
|
||||
value: 0,
|
||||
type: 'cpuCores',
|
||||
icon: 'lucide:cpu',
|
||||
columnSpan: 2,
|
||||
coresData: generateCpuCores(16),
|
||||
description: 'AMD Ryzen 9 - 16 cores'
|
||||
},
|
||||
{
|
||||
id: 'network',
|
||||
title: 'Network I/O',
|
||||
value: 245,
|
||||
unit: 'MB/s',
|
||||
type: 'trend',
|
||||
icon: 'lucide:network',
|
||||
trendData: [200, 220, 235, 240, 238, 245],
|
||||
description: 'throughput'
|
||||
},
|
||||
{
|
||||
id: 'cpu-cores-32',
|
||||
title: 'Server CPU (32-core)',
|
||||
value: 0,
|
||||
type: 'cpuCores',
|
||||
icon: 'lucide:server',
|
||||
columnSpan: 3,
|
||||
coresData: generateCpuCores(32),
|
||||
description: 'AMD EPYC - 32 cores'
|
||||
},
|
||||
{
|
||||
id: 'disk',
|
||||
title: 'Disk Usage',
|
||||
value: 42,
|
||||
type: 'percentage',
|
||||
icon: 'lucide:hard-drive',
|
||||
description: '420 GB of 1 TB'
|
||||
}
|
||||
]}
|
||||
.gridActions=${[
|
||||
{
|
||||
name: 'Randomize',
|
||||
iconName: 'lucide:shuffle',
|
||||
action: async () => {
|
||||
const grid = document.querySelector('#cpu-cores-grid') as any;
|
||||
if (!grid) return;
|
||||
const tiles = grid.tiles.map((tile: any) => {
|
||||
if (tile.type === 'cpuCores' && tile.coresData) {
|
||||
return {
|
||||
...tile,
|
||||
coresData: tile.coresData.map((core: any) => ({
|
||||
...core,
|
||||
usage: Math.round(Math.random() * 100)
|
||||
}))
|
||||
};
|
||||
}
|
||||
return tile;
|
||||
});
|
||||
grid.tiles = tiles;
|
||||
}
|
||||
}
|
||||
]}
|
||||
.minTileWidth=${250}
|
||||
.gap=${16}
|
||||
></dees-statsgrid>
|
||||
</dees-panel>
|
||||
|
||||
<dees-panel .title=${'5. Interactive Features'} .subtitle=${'Tiles with actions and real-time updates'}>
|
||||
<dees-statsgrid
|
||||
id="interactive-grid"
|
||||
.tiles=${[
|
||||
@@ -448,7 +546,7 @@ export const demoFunc = () => {
|
||||
></dees-statsgrid>
|
||||
</dees-panel>
|
||||
|
||||
<dees-panel .title=${'5. Code Example'} .subtitle=${'How to implement a stats grid with TypeScript'}>
|
||||
<dees-panel .title=${'6. Code Example'} .subtitle=${'How to implement a stats grid with TypeScript'}>
|
||||
<div class="code-block">${`const tiles: IStatsTile[] = [
|
||||
{
|
||||
id: 'revenue',
|
||||
|
||||
@@ -24,12 +24,21 @@ declare global {
|
||||
}
|
||||
}
|
||||
|
||||
export interface ICpuCore {
|
||||
id: string | number;
|
||||
usage: number; // 0-100
|
||||
label?: string;
|
||||
}
|
||||
|
||||
export interface IStatsTile {
|
||||
id: string;
|
||||
title: string;
|
||||
value: number | string;
|
||||
unit?: string;
|
||||
type: 'number' | 'gauge' | 'percentage' | 'trend' | 'text' | 'multiPercentage';
|
||||
type: 'number' | 'gauge' | 'percentage' | 'trend' | 'text' | 'multiPercentage' | 'cpuCores';
|
||||
|
||||
// Layout options
|
||||
columnSpan?: number; // Number of columns to span (default: 1)
|
||||
|
||||
// For gauge type
|
||||
gaugeOptions?: {
|
||||
@@ -48,6 +57,9 @@ export interface IStatsTile {
|
||||
color?: string;
|
||||
}>;
|
||||
|
||||
// For cpuCores type
|
||||
coresData?: ICpuCore[];
|
||||
|
||||
// Visual customization
|
||||
color?: string;
|
||||
icon?: string;
|
||||
@@ -366,6 +378,107 @@ export class DeesStatsGrid extends DeesElement {
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
/* CPU Cores Styles */
|
||||
.cpu-cores-wrapper {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
min-height: 80px;
|
||||
}
|
||||
|
||||
.cpu-cores-header {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.cpu-cores-value {
|
||||
font-size: var(--value-font-size);
|
||||
font-weight: 600;
|
||||
color: ${cssManager.bdTheme('hsl(215.3 25% 8.8%)', 'hsl(210 40% 98%)')};
|
||||
line-height: 1.1;
|
||||
letter-spacing: -0.025em;
|
||||
}
|
||||
|
||||
.cpu-cores-unit {
|
||||
font-size: var(--unit-font-size);
|
||||
font-weight: 400;
|
||||
color: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')};
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.cpu-cores-label {
|
||||
font-size: var(--label-font-size);
|
||||
font-weight: 500;
|
||||
color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
|
||||
letter-spacing: -0.01em;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.cpu-cores-bars {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: 3px;
|
||||
flex: 1;
|
||||
min-height: 60px;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.cpu-core-bar-container {
|
||||
flex: 1;
|
||||
min-width: 6px;
|
||||
max-width: 24px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.cpu-core-bar-wrapper {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
background: ${cssManager.bdTheme('#e8e8e8', '#1a1a1a')};
|
||||
border-radius: 2px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
overflow: hidden;
|
||||
min-height: 40px;
|
||||
}
|
||||
|
||||
.cpu-core-bar-fill {
|
||||
width: 100%;
|
||||
background: ${cssManager.bdTheme('#666666', '#888888')};
|
||||
transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease;
|
||||
border-radius: 2px 2px 0 0;
|
||||
}
|
||||
|
||||
.cpu-core-bar-fill.low {
|
||||
background: ${cssManager.bdTheme('hsl(142.1 76.2% 36.3%)', 'hsl(142.1 70.6% 45.3%)')};
|
||||
}
|
||||
|
||||
.cpu-core-bar-fill.medium {
|
||||
background: ${cssManager.bdTheme('hsl(45.4 93.4% 47.5%)', 'hsl(45.4 93.4% 47.5%)')};
|
||||
}
|
||||
|
||||
.cpu-core-bar-fill.high {
|
||||
background: ${cssManager.bdTheme('hsl(0 84.2% 60.2%)', 'hsl(0 84.2% 60.2%)')};
|
||||
}
|
||||
|
||||
.cpu-core-label {
|
||||
font-size: 9px;
|
||||
font-weight: 500;
|
||||
color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* Trend Styles */
|
||||
.trend-container {
|
||||
width: 100%;
|
||||
@@ -488,10 +601,12 @@ export class DeesStatsGrid extends DeesElement {
|
||||
private renderTile(tile: IStatsTile): TemplateResult {
|
||||
const hasActions = tile.actions && tile.actions.length > 0;
|
||||
const clickable = hasActions && tile.actions.length === 1;
|
||||
const columnSpan = tile.columnSpan && tile.columnSpan > 1 ? tile.columnSpan : undefined;
|
||||
|
||||
return html`
|
||||
<div
|
||||
<div
|
||||
class="stats-tile ${clickable ? 'clickable' : ''}"
|
||||
style="${columnSpan ? `grid-column: span ${columnSpan}` : ''}"
|
||||
@click=${clickable ? () => this.handleTileAction(tile.actions![0], tile) : undefined}
|
||||
@contextmenu=${hasActions ? (e: MouseEvent) => this.showContextMenu(e, tile) : undefined}
|
||||
>
|
||||
@@ -535,6 +650,9 @@ export class DeesStatsGrid extends DeesElement {
|
||||
case 'multiPercentage':
|
||||
return this.renderMultiPercentage(tile);
|
||||
|
||||
case 'cpuCores':
|
||||
return this.renderCpuCores(tile);
|
||||
|
||||
case 'text':
|
||||
return html`
|
||||
<div class="text-value" style="${tile.color ? `color: ${tile.color}` : ''}">
|
||||
@@ -699,6 +817,51 @@ export class DeesStatsGrid extends DeesElement {
|
||||
`;
|
||||
}
|
||||
|
||||
private renderCpuCores(tile: IStatsTile): TemplateResult {
|
||||
if (!tile.coresData || tile.coresData.length === 0) {
|
||||
return html`<div class="tile-value">${tile.value}</div>`;
|
||||
}
|
||||
|
||||
const cores = tile.coresData;
|
||||
const avgUsage = Math.round(cores.reduce((sum, core) => sum + core.usage, 0) / cores.length);
|
||||
|
||||
// Determine color class based on usage
|
||||
const getColorClass = (usage: number): string => {
|
||||
if (usage < 50) return 'low';
|
||||
if (usage < 80) return 'medium';
|
||||
return 'high';
|
||||
};
|
||||
|
||||
return html`
|
||||
<div class="cpu-cores-wrapper">
|
||||
<div class="cpu-cores-header">
|
||||
<span class="cpu-cores-value">${avgUsage}</span>
|
||||
<span class="cpu-cores-unit">%</span>
|
||||
<span class="cpu-cores-label">${cores.length} cores</span>
|
||||
</div>
|
||||
<div class="cpu-cores-bars">
|
||||
${cores.map(core => {
|
||||
const usage = Math.min(100, Math.max(0, core.usage));
|
||||
const colorClass = getColorClass(usage);
|
||||
return html`
|
||||
<div class="cpu-core-bar-container" title="Core ${core.label || core.id}: ${usage}%">
|
||||
<div class="cpu-core-bar-wrapper">
|
||||
<div
|
||||
class="cpu-core-bar-fill ${colorClass}"
|
||||
style="height: ${usage}%"
|
||||
></div>
|
||||
</div>
|
||||
${cores.length <= 16 ? html`
|
||||
<span class="cpu-core-label">${core.label || core.id}</span>
|
||||
` : ''}
|
||||
</div>
|
||||
`;
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
private async handleGridAction(action: plugins.tsclass.website.IMenuItem) {
|
||||
if (action.action) {
|
||||
await action.action();
|
||||
|
||||
Reference in New Issue
Block a user