feat(dees-statsgrid): add cpuCores tile type with column spanning, rendering, demo and docs
This commit is contained in:
@@ -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
|
||||
Reference in New Issue
Block a user