feat: Add support for configurable language ordering in Wakatime cards (horizontal/vertical)

Author: bbbugg

api/wakatime.js

@@ -33,6 +33,7 @@ export default async (req, res) => {
     border_color,
     display_format,
     disable_animations,
+    ordering,
   } = req.query;
 
   res.setHeader("Content-Type", "image/svg+xml");
@@ -105,6 +106,7 @@ export default async (req, res) => {
         langs_count,
         display_format,
         disable_animations: parseBoolean(disable_animations),
+        ordering,
       }),
     );
   } catch (err) {
@@ -124,4 +126,4 @@ export default async (req, res) => {
       }),
     );
   }
-};
+};

readme.md

@@ -639,6 +639,7 @@ You can customize the appearance and behavior of the WakaTime stats card using t
 | `api_domain` | Sets a custom API domain for the card, e.g. to use services like [Hakatime](https://github.com/mujx/hakatime) or [Wakapi](https://github.com/muety/wakapi) | string | `wakatime.com` |
 | `display_format` | Sets the WakaTime stats display format. Choose `time` to display time-based stats or `percent` to show percentages. | enum | `time` |
 | `disable_animations` | Disables all animations in the card. | boolean | `false` |
+| `ordering` | Only effective when `layout=compact`. Sets the ordering algorithm for the languages in a two-column layout. `horizontal` alternates items left and right (zig-zag pattern), while `vertical` fills the left column first, then the right column. | enum | `horizontal` |
 
 ### Demo
 
@@ -896,4 +897,4 @@ Thanks! :heart:
 
 Contributions are welcome! <3
 
-Made with :heart: and JavaScript.
+Made with :heart: and JavaScript.

src/cards/wakatime.js

@@ -85,28 +85,40 @@ const createCompactLangNode = ({ lang, x, y, display_format }) => {
  * @param {number} args.y The y position of the language node.
  * @param {"time" | "percent"} args.display_format The display format of the language node.
  * @param {number} args.lineHeight The line height for spacing.
+ * @param {"horizontal" | "vertical"} args.ordering The ordering of the languages.
  * @returns {string[]} The language text node items.
  */
-const createLanguageTextNode = ({ langs, y, display_format, lineHeight = 25 }) => {
-  const halfLength = Math.ceil(langs.length / 2);
-
-  return langs.map((lang, index) => {
-    if (index < halfLength) {
+const createLanguageTextNode = ({ langs = [], y, display_format, lineHeight = 25, ordering = "horizontal" }) => {
+  if (ordering === "horizontal") {
+    return langs.map((lang, index) => {
+      const row = Math.floor(index / 2);
+      const col = index % 2;
       return createCompactLangNode({
         lang,
-        x: 25,
-        y: lineHeight * index + y,
+        x: col === 0 ? 25 : 230,
+        y: y + lineHeight * row,
         display_format,
       });
-    } else {
+    });
+  }
+
+  else if (ordering === "vertical") {
+    const halfLength = Math.ceil(langs.length / 2);
+
+    return langs.map((lang, index) => {
+      const inLeft = index < halfLength;
+      const col = inLeft ? 0 : 1;
+      const row = inLeft ? index : index - halfLength;
       return createCompactLangNode({
         lang,
-        x: 230,
-        y: lineHeight * (index - halfLength) + y,
+        x: col === 0 ? 25 : 230,
+        y: y + lineHeight * row,
         display_format,
       });
-    }
-  });
+    });
+  }
+
+  return [];
 };
 
 /**
@@ -243,6 +255,7 @@ const renderWakatimeCard = (stats = {}, options = { hide: [] }) => {
     border_color,
     display_format = "time",
     disable_animations,
+    ordering = "horizontal",
   } = options;
 
   const shouldHideLangs = Array.isArray(hide) && hide.length > 0;
@@ -338,6 +351,7 @@ const renderWakatimeCard = (stats = {}, options = { hide: [] }) => {
               langs: filteredLanguages,
               display_format,
               lineHeight: lheight,
+              ordering,
             }).join("")
           : noCodingActivityNode({
               // @ts-ignore