Compact layout grid order between WakaTime and Top Languages cards is inconsistent

[bbbugg]

Describe the bug

When using the compact layout for both WakaTime stats card and Top Languages card, the grid display is inconsistent:

• Both cards display as N rows and 2 columns in compact layout.
• WakaTime card fills the grid horizontally (row-first): 1-1 → 1-2 → 2-1 → 2-2 → ...
• Top Languages card fills the grid vertically (column-first): 1-1 → 2-1 → 3-1 → 1-2 → 2-2 → ...

This difference results in the two cards displaying the same data in visually different orders, which can be confusing for users expecting consistent sorting and layout behavior.

Expected behavior

No response

Screenshots / Live demo link

Additional context

No response

[emcc2302]

The issue is that the "Most Used Languages" (Top Languages) card and the "WakaTime Stats" card, both configured to display in a compact layout (described as N rows and 2 columns), are filling the grid in fundamentally different orders.

WakaTime Stats Card: Fills the grid row-first (horizontally). The order is:

Row 1, Column 1 → Row 1, Column 2

Row 2, Column 1 → Row 2, Column 2

... This results in the languages being ordered across the rows.

Most Used Languages (Top Languages) Card: Fills the grid column-first (vertically). The order is:

Row 1, Column 1 → Row 2, Column 1 → Row 3, Column 1 → ...

Then: Row 1, Column 2 → Row 2, Column 2 → ... This results in the languages being ordered down the columns.

This difference in data flow and visual ordering is confusing for users who expect a consistent layout and sorting behavior across all compact-style cards. The arrows in the image visually highlight this difference, showing the "Top Languages" card's items flowing down the left column and then starting at the top of the right column, while the "WakaTime Stats" card's items flow across the rows.

[bbbugg]

I have a solution in #4435 that can fix this issue.

[emcc2302]

Oh thanks for this,what we can do now ->Updating createLanguageTextNode to accept and use lineHeight.,,,Updating renderWakatimeCard to calculate or define lineHeight and pass it to the rendering function.,,,(Implicitly) Ensuring consistent grid logic (likely by using CSS Grid or correcting the column-splitting logic, as covered in the previous answer).

// --- 1. Language Node Rendering Function --- // Now accepts and ignores lineHeight (as y is calculated by the caller) function createLanguageTextNode(language, x, y, lineHeight) { return <g transform="translate(${x}, ${y})"> <text class="language-name" x="0" y="0"> ${language.name} </text> <text class="language-percent" x="150" y="0" text-anchor="end"> ${language.percent} </text> </g>; }

// --- 2. Main Card Rendering Function --- function renderWakatimeCard(languagesData, isCompact = false) { const numLanguages = languagesData.length;

// Define configurable line height const COMPACT_LINE_HEIGHT = 20; const DEFAULT_LINE_HEIGHT = 25; const lineHeight = isCompact ? COMPACT_LINE_HEIGHT : DEFAULT_LINE_HEIGHT;

let cardHeight = 150;

if (isCompact) { // Correct card height calculation using the new lineHeight const rows = Math.ceil(numLanguages / 2); cardHeight = 45 + (rows * lineHeight); } else { // Full layout height calculation cardHeight = 150 + (numLanguages * lineHeight); }

// Rendering Loop: Implements the ROW-FIRST (horizontal) order let languageNodes = languagesData.map((lang, index) => { let x, y;

if (isCompact) {
  // Logic for ROW-FIRST: consistent with the expected behavior
  const col = index % 2; 
  const row = Math.floor(index / 2);
  
  x = col === 0 ? 25 : 230; 
  // Y position is calculated using row index and the configurable lineHeight
  y = 40 + (row * lineHeight); 
} else {
  // Full layout vertical stacking
  x = 25;
  y = 40 + (index * lineHeight);
}

// Pass the calculated lineHeight (as required by the PR description)
return createLanguageTextNode(lang, x, y, lineHeight);

}).join('');

// Final SVG Markup return <svg height="${cardHeight}" width="495"> <rect width="100%" height="100%" fill="#fff" rx="6" /> <text x="25" y="25" class="header">WakaTime Stats</text> <g>${languageNodes}</g> </svg>; }

[adityasingh-0803]

I can work on this

[qwerty541]

Hello @bbbugg

Thank you for opening an issue.

I left my review about the problem and your pull request there https://github.com/anuraghazra/github-readme-stats/pull/4435#pullrequestreview-3301995125

[bbbugg]

Hello @qwerty541

Thank you for your review!

I have updated my pull request, and I hope my comment can make you clearer.

[tysoncung]

Thanks for opening this issue! I'm interested in contributing to this. 👋

🤔 Understanding the Requirements

To provide the best solution, I'd like to understand:

Context:

• What's the current behavior?
• What's the expected/desired behavior?
• What's the impact or use case?

Scope:

• Are there any specific requirements or constraints?
• Any preferences for implementation approach?
• Related issues or PRs?

Success Criteria:

• What would "done" look like for this issue?
• Any specific metrics or tests needed?

💪 How I Can Help

I have experience with anuraghazra projects and can contribute:

• 🔍 Investigation: Research and propose solutions
• 💻 Implementation: Write clean, tested code
• ✅ Testing: Comprehensive test coverage
• 📚 Documentation: Clear docs and examples
• 👀 Review: Iterate based on feedback

🚀 My Approach

1. Understand requirements thoroughly
2. Research best practices and similar solutions
3. Design before implementing
4. Write tests first (TDD)
5. Implement incrementally
6. Document clearly
7. Iterate based on review

Let me know if this is still open and how I can help! I'm excited to contribute. 🎯

My relevant experience:

• Similar projects and features
• Modern development practices
• Open source contribution
• Production system experience

Feel free to assign this to me if you'd like me to work on it! 🙌