feat(dees-statsgrid): add cpuCores tile type with column spanning, rendering, demo and docs

This commit is contained in:
2026-01-12 18:00:16 +00:00
parent b478ae3071
commit e981ddf2d6
8 changed files with 2083 additions and 156 deletions

View File

@@ -910,4 +910,67 @@ appui.getBottomBarVisible();
### Files:
- `ts_web/elements/00group-appui/dees-appui-bottombar/dees-appui-bottombar.ts` - Main component
- `ts_web/elements/00group-appui/dees-appui-bottombar/dees-appui-bottombar.demo.ts` - Demo
- `ts_web/elements/interfaces/appconfig.ts` - New interfaces added
- `ts_web/elements/interfaces/appconfig.ts` - New interfaces added
## StatsGrid Enhancements (2026-01-12)
### Column Spanning
Tiles can now span multiple columns using the `columnSpan` property. This is useful for wider visualizations like the CPU cores tile.
```typescript
const tile: IStatsTile = {
id: 'wide-tile',
title: 'Wide Tile',
value: 100,
type: 'cpuCores',
columnSpan: 2, // Spans 2 columns
coresData: [...]
};
```
Note: On smaller screens where only 1 column fits, tiles will automatically fall back to single column width.
### CPU Cores Tile Type
New tile type `cpuCores` for visualizing multi-core CPU usage with vertical bars:
```typescript
interface ICpuCore {
id: string | number;
usage: number; // 0-100
label?: string;
}
const cpuTile: IStatsTile = {
id: 'cpu-cores',
title: 'CPU Cores',
value: 0, // Not used, avg is calculated from coresData
type: 'cpuCores',
icon: 'lucide:cpu',
columnSpan: 2, // Recommended for 8+ cores
coresData: [
{ id: 0, usage: 45, label: '0' },
{ id: 1, usage: 72, label: '1' },
// ... more cores
],
description: 'Intel i7 - 8 cores'
};
```
Features:
- Vertical bars showing individual core usage
- Color-coded: green (<50%), yellow (50-80%), red (>80%)
- Shows average usage in header
- Core labels shown for 16 or fewer cores
- Tooltips show exact usage per core
- Responsive: bars flex to fill available width
### Available Tile Types:
- `number` - Simple numeric display
- `gauge` - Semi-circular gauge with thresholds
- `percentage` - Progress bar (0-100%)
- `trend` - Sparkline with recent data
- `text` - Text value display
- `multiPercentage` - Multiple progress bars
- `cpuCores` - Vertical bar visualization for CPU cores