[Feature Request] Stacked Graph mode for meters

[runlevel5]

Instead of showing the total metrics, I reckon it would be better if the graph mode could display all segments of the meters in the same vertical line.

The demo video could be found at https://www.youtube.com/watch?v=XP_eU8TfreY

[Explorer09]

Hello. This is already in pull request list. #714 (It was my work, actually.)

[Explorer09]

Just curious. When you can make a video demo for this new colored graph, how did you make the code? What's the algorithm for determining the colors?

[runlevel5]

@Explorer09 it is similar to Bar mode

Let's say we have 3 CPU segments with these colors:
- User = Blue
- System = Red
- Nice = Green

Example Data Point: 80% Total CPU
Breakdown:
User:   40%
System: 25%
Nice:   15%
────────────
Total:  80%
---
Step 1: Stack the Segments (Bottom to Top)
100% ┌────────────────────┐
     │                    │  ← empty (20%)
 80% ├────────────────────┤
     │   Nice = 15%       │  ← GREEN
 65% ├────────────────────┤
     │   System = 25%     │  ← RED
 40% ├────────────────────┤
     │   User = 40%       │  ← BLUE
  0% └────────────────────┘
---
Step 2: Map to 4 Pixel Rows
Total height = 80% → 3.2 pixels (out of 4)
Each segment's pixel height:
User:   40% → 1.6 pixels
System: 25% → 1.0 pixels
Nice:   15% → 0.6 pixels
Stacked from bottom:
Pixel 4: │        │  empty
Pixel 3: │████████│  Nice (GREEN)     ← 2.6 to 3.2
Pixel 2: │████████│  System (RED)     ← 1.6 to 2.6
Pixel 1: │████████│  User (BLUE)      ← 0 to 1.6
---
Step 3: Determine Color for Each Braille Row
A braille character has 4 rows. For each row, we ask:
> "What segment is at the middle of this row?"
         Braille Rows (top to bottom)
         
Row 0:   pixels 3.0 - 4.0   middle = 3.5   → EMPTY (no dot)
Row 1:   pixels 2.0 - 3.0   middle = 2.5   → System (RED)
Row 2:   pixels 1.0 - 2.0   middle = 1.5   → User (BLUE)
Row 3:   pixels 0.0 - 1.0   middle = 0.5   → User (BLUE)
---
Step 4: Draw the Braille Character with Colors
┌───────┐
│       │  Row 0: no dot (empty)
├───────┤
│   ●   │  Row 1: RED dot (System)
├───────┤
│   ●   │  Row 2: BLUE dot (User)
├───────┤
│   ●   │  Row 3: BLUE dot (User)
└───────┘
But wait! Terminals can only show one color per character.
---
Step 5: The Problem - One Color Per Character
We have 3 dots needing 2 different colors, but we can only pick ONE.
Solution: The code picks the color of the topmost visible segment.
Why? Because:
- The top is most visually prominent
- It shows "what's contributing to the peak"
So this character would be colored RED (System is the top segment with dots).
---
Full Visual Example: Two Time Points
Time 1: User=40%, System=25%, Nice=15%  (80% total)
Time 2: User=20%, System=50%, Nice=10%  (80% total)
Both are 80% total, but different composition:
        Time 1              Time 2
        
100%  ┌─────────┐        ┌─────────┐
      │         │        │         │
 80%  │  Nice   │        │  Nice   │
      │ (GREEN) │        │ (GREEN) │
      ├─────────┤   70%  ├─────────┤
      │ System  │        │         │
 65%  │  (RED)  │        │ System  │
      ├─────────┤        │  (RED)  │
      │         │        │         │
 40%  │  User   │   20%  ├─────────┤
      │ (BLUE)  │        │  User   │
      │         │        │ (BLUE)  │
  0%  └─────────┘        └─────────┘
As one braille character (2 columns):
┌───────┬───────┐
│       │       │  Row 0: empty | empty
├───────┼───────┤
│GREEN ●│GREEN ●│  Row 1: Nice | Nice  
├───────┼───────┤
│ RED  ●│ RED  ●│  Row 2: System | System
├───────┼───────┤
│BLUE  ●│ RED  ●│  Row 3: User | System
└───────┴───────┘
Final color choice: GREEN (topmost visible segment)
Final character: ⣶ in GREEN

[Explorer09]

@runlevel5 My algorithm is more complicated and I believe it more accurately reflects the item percentages. Not sure if you like to study the algorithm I used in #714.

[runlevel5]

@runlevel5 My algorithm is more complicated and I believe it more accurately reflects the item percentages. Not sure if you like to study the algorithm I used in #714.

I can try, however I would like to challenge the usefulness of Graph mode, IMHO the Graph mode should be Colored Stacked Graph

[Explorer09]

I can try, however I would like to challenge the usefulness of Graph mode, IMHO the Graph mode should be Colored Stacked Graph

What do you mean? The Graph mode actually displays stacked graph (already).