Add wakatime compact layout

api/wakatime.js

@@ -24,6 +24,7 @@ module.exports = async (req, res) => {
     hide_progress,
     custom_title,
     locale,
+    layout,
   } = req.query;
 
   res.setHeader("Content-Type", "image/svg+xml");
@@ -60,6 +61,7 @@ module.exports = async (req, res) => {
         theme,
         hide_progress,
         locale: locale ? locale.toLowerCase() : null,
+        layout,
       }),
     );
   } catch (err) {

readme.md

@@ -190,6 +190,7 @@ You can provide multiple comma-separated values in bg_color option to render a g
 - `line_height` - Sets the line-height between text _(number)_
 - `hide_progress` - Hides the progress bar and percentage _(boolean)_
 - `custom_title` - Sets a custom title for the card
+- `layout` - Switch between two available layouts `default` & `compact`
 
 ---
 
@@ -287,6 +288,10 @@ Change the `?username=` value to your [Wakatime](https://wakatime.com) username.
 
 [![willianrod's wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=willianrod&hide_progress=true)](https://github.com/anuraghazra/github-readme-stats)
 
+- Compact layout
+
+[![willianrod's wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=willianrod&layout=compact)](https://github.com/anuraghazra/github-readme-stats)
+
 ---
 
 ### All Demos

src/cards/wakatime-card.js

@@ -4,13 +4,48 @@ const { getStyles } = require("../getStyles");
 const { wakatimeCardLocales } = require("../translations");
 const { getCardColors, FlexLayout } = require("../common/utils");
 const { createProgressNode } = require("../common/createProgressNode");
+const languageColors = require("../common/languageColors.json");
 
 const noCodingActivityNode = ({ color, text }) => {
   return `
     <text x="25" y="11" class="stat bold" fill="${color}">${text}</text>
   `;
 };
 
+const createCompactLangNode = ({ lang, totalSize, x, y }) => {
+  const color = languageColors[lang.name] || "#858585";
+
+  return `
+    <g transform="translate(${x}, ${y})">
+      <circle cx="5" cy="6" r="5" fill="${color}" />
+      <text data-testid="lang-name" x="15" y="10" class='lang-name'>
+        ${lang.name} - ${lang.text}
+      </text>
+    </g>
+  `;
+};
+
+const createLanguageTextNode = ({ langs, totalSize, x, y }) => {
+  return langs.map((lang, index) => {
+    if (index % 2 === 0) {
+      return createCompactLangNode({
+        lang,
+        x: 25,
+        y: 12.5 * index + y,
+        totalSize,
+        index,
+      });
+    }
+    return createCompactLangNode({
+      lang,
+      x: 230,
+      y: 12.5 + 12.5 * index,
+      totalSize,
+      index,
+    });
+  });
+};
+
 const createTextNode = ({
   id,
   label,
@@ -63,6 +98,7 @@ const renderWakatimeCard = (stats = {}, options = { hide: [] }) => {
     hide_progress,
     custom_title,
     locale,
+    layout,
   } = options;
 
   const i18n = new I18n({
@@ -107,6 +143,68 @@ const renderWakatimeCard = (stats = {}, options = { hide: [] }) => {
     iconColor,
   });
 
+  let finalLayout = "";
+
+  let width = 440;
+
+  // RENDER COMPACT LAYOUT
+  if (layout === "compact") {
+    width = width + 50;
+    height = 90 + Math.round(languages.length / 2) * 25;
+
+    // progressOffset holds the previous language's width and used to offset the next language
+    // so that we can stack them one after another, like this: [--][----][---]
+    let progressOffset = 0;
+    const compactProgressBar = languages
+      .map((lang) => {
+        // const progress = (width * lang.percent) / 100;
+        const progress = ((width - 50) * lang.percent) / 100;
+
+        const languageColor = languageColors[lang.name] || "#858585";
+
+        const output = `
+          <rect
+            mask="url(#rect-mask)" 
+            data-testid="lang-progress"
+            x="${progressOffset}" 
+            y="0"
+            width="${progress}" 
+            height="8"
+            fill="${languageColor}"
+          />
+        `;
+        progressOffset += progress;
+        return output;
+      })
+      .join("");
+
+    finalLayout = `
+      <mask id="rect-mask">
+      <rect x="25" y="0" width="${width - 50}" height="8" fill="white" rx="5" />
+      </mask>
+      ${compactProgressBar}
+      ${createLanguageTextNode({
+        x: 0,
+        y: 25,
+        langs: languages,
+        totalSize: 100,
+      }).join("")}
+    `;
+  } else {
+    finalLayout = FlexLayout({
+      items: statItems.length
+        ? statItems
+        : [
+            noCodingActivityNode({
+              color: textColor,
+              text: i18n.t("wakatimecard.nocodingactivity"),
+            }),
+          ],
+      gap: lheight,
+      direction: "column",
+    }).join("");
+  }
+
   const card = new Card({
     customTitle: custom_title,
     defaultTitle: i18n.t("wakatimecard.title"),
@@ -131,18 +229,7 @@ const renderWakatimeCard = (stats = {}, options = { hide: [] }) => {
 
   return card.render(`
     <svg x="0" y="0" width="100%">
-      ${FlexLayout({
-        items: statItems.length
-          ? statItems
-          : [
-              noCodingActivityNode({
-                color: textColor,
-                text: i18n.t("wakatimecard.nocodingactivity"),
-              }),
-            ],
-        gap: lheight,
-        direction: "column",
-      }).join("")}
+      ${finalLayout}
     </svg> 
   `);
 };