[Feature Request] Stacked Graph mode for meters #1881

Activity

1. Explorer09 commented on Jan 28, 2026

   

   Explorer09

   on Jan 28, 2026

   Contributor

   More actions

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

   ❤️React with ❤️1Reacted by Trung Lê
2. Explorer09 commented on Jan 28, 2026

   

   Explorer09

   on Jan 28, 2026

   Contributor

   More actions

   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?
3. runlevel5 commented on Jan 28, 2026

   

   runlevel5

   on Jan 28, 2026

   ContributorAuthor

   More actions

   @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
   
4. Explorer09 commented on Jan 28, 2026

   

   Explorer09

   on Jan 28, 2026

   Contributor

   More actions

   @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.
5. runlevel5 commented on Jan 29, 2026

   

   runlevel5

   on Jan 29, 2026

   ContributorAuthor

   More actions

   @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
6. Explorer09 commented on Jan 30, 2026

   

   Explorer09

   on Jan 30, 2026

   Contributor

   More actions

   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).
7. BenBE

   added

   feature requestCompletely new feature requestedCompletely new feature requested

   on Jan 31, 2026