chore: update

* Different default languages count for different layouts

* docs: update default  documentation

Updates the README so that the new `langs_count` default behavoir is
explained to users.

---------

Co-authored-by: rickstaa <rick.staa@outlook.com>

.github/workflows/top-issues-dashboard.yml

@@ -15,10 +15,15 @@ jobs:
           github_token: ${{ secrets.GITHUB_TOKEN }}
         with:
           filter: "1772"
-          label: false
+          label: true
           dashboard: true
           dashboard_show_total_reactions: true
           top_issues: true
           top_bugs: true
           top_features: true
           top_pull_requests: true
+          custom_pull_requests_label: themes
+          top_custom_pull_requests_label: ":star: top themes"
+          top_custom_pull_requests_label_description:
+            The description used for the top custom pull requests.
+          top_custom_pull_requests_label_colour: #A23599

api/top-langs.js

@@ -44,6 +44,16 @@ export default async (req, res) => {
     return res.send(renderError("Something went wrong", "Locale not found"));
   }
 
+  if (
+    layout !== undefined &&
+    (typeof layout !== "string" ||
+      !["compact", "normal", "donut", "donut-vertical", "pie"].includes(layout))
+  ) {
+    return res.send(
+      renderError("Something went wrong", "Incorrect layout input"),
+    );
+  }
+
   try {
     const topLangs = await fetchTopLanguages(
       username,

api/wakatime.js

@@ -28,7 +28,6 @@ export default async (req, res) => {
     langs_count,
     hide,
     api_domain,
-    range,
     border_radius,
     border_color,
   } = req.query;
@@ -40,7 +39,7 @@ export default async (req, res) => {
   }
 
   try {
-    const stats = await fetchWakatimeStats({ username, api_domain, range });
+    const stats = await fetchWakatimeStats({ username, api_domain });
 
     let cacheSeconds = clampValue(
       parseInt(cache_seconds || CONSTANTS.FOUR_HOURS, 10),

docs/readme_cn.md

@@ -171,7 +171,7 @@ dark, radical, merko, gruvbox, tokyonight, onedark, cobalt, synthwave, highcontr
 
 - `hide` - 从卡片中隐藏指定语言 _(Comma seperated values)_
 - `hide_title` - _(boolean)_
-- `layout` - 提供四種佈局 `normal` & `compact` & `donut` & `pie` 间切换
+- `layout` - 提供五種佈局 `normal` & `compact` & `donut` & `donut-vertical` & `pie` 间切换
 - `card_width` - 手动设置卡片的宽度 _(number)_
 
 > :warning: **重要:**

docs/readme_de.md

@@ -161,7 +161,7 @@ Du kannst mehrere, mit Kommas separierte, Werte in der bg_color Option angeben,
 
 - `hide` - Verbirgt die angegebenen Sprachen von der Karte _(Komma separierte Werte)_
 - `hide_title` - _(Boolean)_
-- `layout` - Wechseln Sie zwischen den vier verfügbaren Layouts `normal` & `compact` & `donut` & `pie`
+- `layout` - Wechseln Sie zwischen den fünf verfügbaren Layouts `normal` & `compact` & `donut` & `donut-vertical` & `pie`
 - `card_width` - Lege die Breite der Karte manuell fest _(Zahl)_
 
 > :warning: **Wichtig:**

docs/readme_es.md

@@ -175,7 +175,7 @@ Puedes pasar mútliples valores separados por coma en la opción `bg_color` para
 
 - `hide` - Oculta de la tarjeta los lenguajes especificados  _(valores separados por comas)_
 - `hide_title` - _(booleano)_
-- `layout` - Cambiar entre los cuatro diseños disponibles `normal` & `compact` & `donut` & `pie`
+- `layout` - Cambiar entre los cinco diseños disponibles `normal` & `compact` & `donut` & `donut-vertical` & `pie`
 - `card_width` - Establece el ancho de la tarjeta manualmente _(número)_
 - `langs_count` - Muestra más lenguajes en la tarjeta, entre 1-10, por defecto 5 _(número)_
 - `exclude_repo` - Excluye los repositorios especificados  _(valores separados por comas)_

docs/readme_fr.md

@@ -159,7 +159,7 @@ Vous pouvez fournir plusieurs valeurs (suivie d'une virgule) dans l'option bg_co
 
 -   `hide` - Masquer les langages spécifiés sur la carte _(Comma seperated values)_
 -   `hide_title` - Masquer le titre _(boolean)_
--   `layout` - Alterner entre 4 mise en page `normal` & `compact` & `donut` & `pie`
+-   `layout` - Alterner entre 5 mise en page `normal` & `compact` & `donut` & `donut-vertical` & `pie`
 -   `card_width` - Fixer la largeur de la carte manuellement _(number)_
 
 > :warning: **Important:**

docs/readme_it.md

@@ -171,7 +171,7 @@ Puoi fornire valori separati da virgola nel parametro bg_color per creare un gra
 
 - `hide` - Nasconde un linguaggio specifico _(valori separati da virgola)_
 - `hide_title` - Nasconde il titolo _(booleano)_
-- `layout` - Specificare il tipo di layout, `normal` (esteso), `compact` (compatto), `donut` (ciambella) e `pie` (torta)
+- `layout` - Specificare il tipo di layout, `normal` (esteso), `compact` (compatto), `donut` (ciambella), `donut-vertical` (ciambella verticale) e `pie` (torta)
 - `card_width` - Specifica il valore della larghezza _(numero)_
 
 > :warning: **Importante:**

docs/readme_ja.md

@@ -174,7 +174,7 @@ bg_color オプションで複数のカンマ区切りの値を指定してグ
 
 - `hide` - 特定の言語を隠す _(カンマ区切りで指定)_
 - `hide_title` - _(boolean)_
-- `layout` - `normal` & `compact` & `donut` & `pie` のいずれかのレイアウトに切り替える
+- `layout` - `normal` & `compact` & `donut` & `donut-vertical` & `pie` のいずれかのレイアウトに切り替える
 - `card_width` - カードの横幅 _(number)_
 - `langs_count` - 表示される言語の数　_(1 ~ 10, 初期値 5)_
 - `exclude_repo` - 指定されたリポジトリを除外する _(カンマ区切りで指定)_

docs/readme_kr.md

@@ -189,7 +189,7 @@ dark, radical, merko, gruvbox, tokyonight, onedark, cobalt, synthwave, highcontr
 
 - `hide` - 카드에서 특정 언어 제외 _(Comma-separated values)_
 - `hide_title` - 타이틀 제외 _(boolean)_
-- `layout` - 4가지 값 사용 가능, `normal` & `compact` & `donut` & `pie` 중 표시 형태 선택
+- `layout` - 5가지 값 사용 가능, `normal` & `compact` & `donut` & `donut-vertical` & `pie` 중 표시 형태 선택
 - `card_width` - 카드 너비 직접 설정 _(number)_
 - `langs_count` - 카드에 표시할 언어의 수 (1-10 사이, 기본 값 : 5) _(number)_
 - `exclude_repo` - 통계에 제외할 저장소 지정 _(Comma-separated values)_

docs/readme_nl.md

@@ -176,7 +176,7 @@ Je kan meerdere komma verdeelde waarden in de bg_color optie geven om een kleure
 
 - `hide` - Verbergt specifieke talen van de kaart _(komma gescheiden waardes)_
 - `hide_title` - _(boolean)_
-- `layout` - Keuze uit de vier beschikbare indelingen `normal` & `compact` & `donut` & `pie`
+- `layout` - Kies uit de vijf beschikbare lay-outs `normal` & `compact` & `donut` & `donut-vertical` & `pie`
 - `card_width` - Stelt de breedte van de kaart handmatig in. _(nummer)_
 - `langs_count` - Laat meer talen op de kaart zien, waarde tussen 1-10, staat standaard op to 5 _(nummer)_
 - `exclude_repo` - Verbergt specifieke repositories _(komma gescheiden waardes)_

docs/readme_np.md

@@ -174,7 +174,7 @@ You can provide multiple comma-separated values in bg_color option to render a g
 
 - `hide` - Hide the languages specified from the card _(Comma-separated values)_
 - `hide_title` - _(boolean)_
-- `layout` - Switch between four available layouts `normal` & `compact` & `donut` & `pie`. Default: `normal`.
+- `layout` - Switch between five available layouts `normal` & `compact` & `donut` & `donut-vertical` & `pie`. Default: `normal`.
 - `card_width` - Set the card's width manually _(number)_
 - `langs_count` - Show more languages on the card, between 1-10, defaults to 5 _(number)_
 - `exclude_repo` - Exclude specified repositories _(Comma-separated values)_

docs/readme_pt-BR.md

@@ -164,7 +164,7 @@ Personalize a aparência do seu `Stats Card` ou `Repo Card` da maneira que desej
 
 - `hide` - Oculta linguagens específicas _(Valores separados por vírgulas)_
 - `hide_title` - Oculta o título _(boolean)_
-- `layout` - Alterna entre os quatro layouts disponíveis `normal` & `compact` & `donut` & `pie`
+- `layout` - Alternar entre os cinco layouts disponíveis `normal` & `compact` & `donut` & `donut-vertical` & `pie`
 - `card_width` - Define a largura do cartão manualmente _(number)_
 
 > :warning: **Importante:**

docs/readme_tr.md

@@ -176,7 +176,7 @@ bg_color içerisinde birden fazla rengi gradient olarak göstermek için virgül
 
 - `hide` - Belirli bir dili listede gizler _(Virgül ile ayırılmış değerlerle)_
 - `hide_title` - _(boolean)_
-- `layout` - Dört uygun tasarım / düzen arasında geçiş `normal` & `compact` & `donut` & `pie`
+- `layout` - Beş uygun tasarım / düzen arasında geçiş yapın `normal` & `compact` & `donut` & `donut-vertical` & `pie`
 - `card_width` - Kartın genişliğini manuel olarak belirler _(number)_
 - `langs_count` - 1-10 arasında istediğiniz kadar dil gösterebilirsiniz. Varsayılan: 5 _(number)_
 - `exclude_repo` - Belirli repoları listeden çıkartır _(Virgül ile ayırılmış değerlerle)_

readme.md

@@ -69,12 +69,15 @@
   <img src="https://cfstatic.give.do/logo.png" alt="Give india logo" width="200" />
 </a>
 
-Are you considering supporting the project by donating? Please DO NOT!!
+Are you considering supporting the project by donating to me? Please DO NOT!!
 
-Instead, Help India fight the second deadly wave of COVID-19.
-Thousands of people are dying in India because of a lack of Oxygen & also COVID-related infrastructure.
 
-Visit <https://indiafightscorona.giveindia.org> and make a small donation to help us fight COVID and overcome this crisis. A small donation goes a long way. :heart:
+<img src="https://cfstatic.give.do/910ede2a-7892-43fe-8c8a-dea45e96d950.webp" alt="Picture of Coromandel Express train tragedy" width="35%">
+
+India just suffered one of the most devastating train accident and your help will be immensely valuable for the people who were effected by this tragedy. 
+
+Please visit [this link](https://give.do/fundraisers/stand-beside-the-victims-of-the-coromandel-express-train-tragedy-in-odisha-donate-now) and make a small donation to help the people in need. A small donation goes a long way. :heart:
+
 
 </p>
 
@@ -290,9 +293,9 @@ You can provide multiple comma-separated values in the bg_color option to render
 
 -   `hide` - Hide the languages specified from the card _(Comma-separated values)_. Default: `[] (blank array)`.
 -   `hide_title` - _(boolean)_. Default: `false`.
--   `layout` - Switch between four available layouts `normal` & `compact` & `donut` & `pie`. Default: `normal`.
+-   `layout` - Switch between five available layouts `normal` & `compact` & `donut` & `donut-vertical` & `pie`. Default: `normal`.
 -   `card_width` - Set the card's width manually _(number)_. Default `300`.
--   `langs_count` - Show more languages on the card, between 1-10 _(number)_. Default `5`.
+-   `langs_count` - Show more languages on the card, between 1-10 _(number)_. Default: `5` for `normal` and `donut`, `6` for other layouts.
 -   `exclude_repo` - Exclude specified repositories _(Comma-separated values)_. Default: `[] (blank array)`.
 -   `custom_title` - Sets a custom title for the card _(string)_. Default `Most Used Languages`.
 -   `disable_animations` - Disables all animations in the card _(boolean)_. Default: `false`.
@@ -315,7 +318,6 @@ You can provide multiple comma-separated values in the bg_color option to render
 -   `layout` - Switch between two available layouts `default` & `compact`.  Default `default`.
 -   `langs_count` - Limit the number of languages on the card, defaults to all reported languages _(number)_.
 -   `api_domain` - Set 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)_. Default `Waka API`.
--   `range` – Request a range different from your WakaTime default, e.g. `last_7_days`. See [WakaTime API docs](https://wakatime.com/developers#stats) for a list of available options. _(YYYY-MM, last_7_days, last_30_days, last_6_months, last_year, or all_time)_. Default `all_time`.
 
 * * *
 
@@ -418,6 +420,14 @@ You can use the `&layout=donut` option to change the card design.
 [![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=anuraghazra&layout=donut)](https://github.com/anuraghazra/github-readme-stats)
 ```
 
+### Donut Vertical Chart Language Card Layout
+
+You can use the `&layout=donut-vertical` option to change the card design.
+
+```md
+[![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=anuraghazra&layout=donut-vertical)](https://github.com/anuraghazra/github-readme-stats)
+```
+
 ### Pie Chart Language Card Layout
 
 You can use the `&layout=pie` option to change the card design.
@@ -446,6 +456,10 @@ You can use the `&hide_progress=true` option to hide the percentages and the pro
 
 [![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=anuraghazra&layout=donut)](https://github.com/anuraghazra/github-readme-stats)
 
+-   Donut Vertical Chart layout
+
+[![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=anuraghazra&layout=donut-vertical)](https://github.com/anuraghazra/github-readme-stats)
+
 -   Pie Chart layout
 
 [![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=anuraghazra&layout=pie)](https://github.com/anuraghazra/github-readme-stats)
@@ -456,15 +470,15 @@ You can use the `&hide_progress=true` option to hide the percentages and the pro
 
 # Wakatime Week Stats
 
+> **Warning**
+> Please be aware that we currently only show data from Wakatime profiles that are public. You therefore have to make sure that **BOTH** `Display code time publicly` and `Display languages, editors, os, categories publicly` are enabled.
+
 Change the `?username=` value to your [Wakatime](https://wakatime.com) username.
 
 ```md
 [![Harlok's wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=Harlok)](https://github.com/anuraghazra/github-readme-stats)
 ```
 
-> **Note**:
-> Please be aware that we currently only show data from Wakatime profiles that are public.
-
 ### Demo
 
 [![Harlok's wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=Harlok)](https://github.com/anuraghazra/github-readme-stats)

src/cards/top-languages-card.js

@@ -14,9 +14,15 @@ import { langCardLocales } from "../translations.js";
 
 const DEFAULT_CARD_WIDTH = 300;
 const MIN_CARD_WIDTH = 280;
-const DEFAULT_LANGS_COUNT = 5;
 const DEFAULT_LANG_COLOR = "#858585";
 const CARD_PADDING = 25;
+const COMPACT_LAYOUT_BASE_HEIGHT = 90;
+
+const NORMAL_LAYOUT_DEFAULT_LANGS_COUNT = 5;
+const COMPACT_LAYOUT_DEFAULT_LANGS_COUNT = 6;
+const DONUT_LAYOUT_DEFAULT_LANGS_COUNT = 5;
+const PIE_LAYOUT_DEFAULT_LANGS_COUNT = 6;
+const DONUT_VERTICAL_LAYOUT_DEFAULT_LANGS_COUNT = 6;
 
 /**
  * @typedef {import("../fetchers/types").Lang} Lang
@@ -84,6 +90,16 @@ const cartesianToPolar = (centerX, centerY, x, y) => {
   return { radius, angleInDegrees };
 };
 
+/**
+ * Calculates length of circle.
+ *
+ * @param {number} radius Radius of the circle.
+ * @returns {number} The length of the circle.
+ */
+const getCircleLength = (radius) => {
+  return 2 * Math.PI * radius;
+};
+
 /**
  * Calculates height for the compact layout.
  *
@@ -91,7 +107,7 @@ const cartesianToPolar = (centerX, centerY, x, y) => {
  * @returns {number} Card height.
  */
 const calculateCompactLayoutHeight = (totalLangs) => {
-  return 90 + Math.round(totalLangs / 2) * 25;
+  return COMPACT_LAYOUT_BASE_HEIGHT + Math.round(totalLangs / 2) * 25;
 };
 
 /**
@@ -114,6 +130,16 @@ const calculateDonutLayoutHeight = (totalLangs) => {
   return 215 + Math.max(totalLangs - 5, 0) * 32;
 };
 
+/**
+ * Calculates height for the donut vertical layout.
+ *
+ * @param {number} totalLangs Total number of languages.
+ * @returns {number} Card height.
+ */
+const calculateDonutVerticalLayoutHeight = (totalLangs) => {
+  return 300 + Math.round(totalLangs / 2) * 25;
+};
+
 /**
  * Calculates height for the pie layout.
  *
@@ -371,6 +397,76 @@ const renderCompactLayout = (langs, width, totalLanguageSize, hideProgress) => {
   `;
 };
 
+/**
+ * Renders donut vertical layout to display user's most frequently used programming languages.
+ *
+ * @param {Lang[]} langs Array of programming languages.
+ * @param {number} totalLanguageSize Total size of all languages.
+ * @returns {string} Compact layout card SVG object.
+ */
+const renderDonutVerticalLayout = (langs, totalLanguageSize) => {
+  // Donut vertical chart radius and total length
+  const radius = 80;
+  const totalCircleLength = getCircleLength(radius);
+
+  // SVG circles
+  let circles = [];
+
+  // Start indent for donut vertical chart parts
+  let indent = 0;
+
+  // Start delay coefficient for donut vertical chart parts
+  let startDelayCoefficient = 1;
+
+  // Generate each donut vertical chart part
+  for (const lang of langs) {
+    const percentage = (lang.size / totalLanguageSize) * 100;
+    const circleLength = totalCircleLength * (percentage / 100);
+    const delay = startDelayCoefficient * 100;
+
+    circles.push(`
+      <g class="stagger" style="animation-delay: ${delay}ms">
+        <circle 
+          cx="150"
+          cy="100"
+          r="${radius}"
+          fill="transparent"
+          stroke="${lang.color}"
+          stroke-width="25"
+          stroke-dasharray="${totalCircleLength}"
+          stroke-dashoffset="${indent}"
+          size="${percentage}"
+          data-testid="lang-donut"
+        />
+      </g>
+    `);
+
+    // Update the indent for the next part
+    indent += circleLength;
+    // Update the start delay coefficient for the next part
+    startDelayCoefficient += 1;
+  }
+
+  return `
+    <svg data-testid="lang-items">
+      <g transform="translate(0, 0)">
+        <svg data-testid="donut">
+          ${circles.join("")}
+        </svg>
+      </g>
+      <g transform="translate(0, 220)">
+        <svg data-testid="lang-names" x="${CARD_PADDING}">
+          ${createLanguageTextNode({
+            langs,
+            totalSize: totalLanguageSize,
+            hideProgress: false,
+          })}
+        </svg>
+      </g>
+    </svg>
+  `;
+};
+
 /**
  * Renders pie layout to display user's most frequently used programming languages.
  *
@@ -564,6 +660,39 @@ const renderDonutLayout = (langs, width, totalLanguageSize) => {
   `;
 };
 
+/**
+ * Creates the no coding activity SVG node.
+ *
+ * @param {{color: string, text: string, layout: import("./types").TopLangOptions["layout"]}} The function prop
+ */
+const noLanguagesDataNode = ({ color, text, layout }) => {
+  return `
+    <text x="${
+      layout === "pie" || layout === "donut-vertical" ? CARD_PADDING : 0
+    }" y="11" class="stat bold" fill="${color}">${text}</text>
+  `;
+};
+
+/**
+ * Get default languages count for provided card layout.
+ *
+ * @param {import("./types").TopLangOptions["layout"] | undefined} layout Input layout string
+ * @return {number} Default languages count for input layout
+ */
+const getDefaultLanguagesCountByLayout = (layout) => {
+  if (layout === "compact") {
+    return COMPACT_LAYOUT_DEFAULT_LANGS_COUNT;
+  } else if (layout === "donut") {
+    return DONUT_LAYOUT_DEFAULT_LANGS_COUNT;
+  } else if (layout === "donut-vertical") {
+    return DONUT_VERTICAL_LAYOUT_DEFAULT_LANGS_COUNT;
+  } else if (layout === "pie") {
+    return PIE_LAYOUT_DEFAULT_LANGS_COUNT;
+  } else {
+    return NORMAL_LAYOUT_DEFAULT_LANGS_COUNT;
+  }
+};
+
 /**
  * Renders card that display user's most frequently used programming languages.
  *
@@ -585,7 +714,7 @@ const renderTopLanguages = (topLangs, options = {}) => {
     layout,
     custom_title,
     locale,
-    langs_count = DEFAULT_LANGS_COUNT,
+    langs_count = getDefaultLanguagesCountByLayout(layout),
     border_radius,
     border_color,
     disable_animations,
@@ -609,10 +738,29 @@ const renderTopLanguages = (topLangs, options = {}) => {
     : card_width;
   let height = calculateNormalLayoutHeight(langs.length);
 
+  // returns theme based colors with proper overrides and defaults
+  const colors = getCardColors({
+    title_color,
+    text_color,
+    bg_color,
+    border_color,
+    theme,
+  });
+
   let finalLayout = "";
-  if (layout === "pie") {
+  if (langs.length === 0) {
+    height = COMPACT_LAYOUT_BASE_HEIGHT;
+    finalLayout = noLanguagesDataNode({
+      color: colors.textColor,
+      text: i18n.t("langcard.nodata"),
+      layout,
+    });
+  } else if (layout === "pie") {
     height = calculatePieLayoutHeight(langs.length);
     finalLayout = renderPieLayout(langs, totalLanguageSize);
+  } else if (layout === "donut-vertical") {
+    height = calculateDonutVerticalLayoutHeight(langs.length);
+    finalLayout = renderDonutVerticalLayout(langs, totalLanguageSize);
   } else if (layout === "compact" || hide_progress == true) {
     height =
       calculateCompactLayoutHeight(langs.length) + (hide_progress ? -25 : 0);
@@ -623,7 +771,7 @@ const renderTopLanguages = (topLangs, options = {}) => {
       totalLanguageSize,
       hide_progress,
     );
-  } else if (layout?.toLowerCase() === "donut") {
+  } else if (layout === "donut") {
     height = calculateDonutLayoutHeight(langs.length);
     width = width + 50; // padding
     finalLayout = renderDonutLayout(langs, width, totalLanguageSize);
@@ -631,15 +779,6 @@ const renderTopLanguages = (topLangs, options = {}) => {
     finalLayout = renderNormalLayout(langs, width, totalLanguageSize);
   }
 
-  // returns theme based colors with proper overrides and defaults
-  const colors = getCardColors({
-    title_color,
-    text_color,
-    bg_color,
-    border_color,
-    theme,
-  });
-
   const card = new Card({
     customTitle: custom_title,
     defaultTitle: i18n.t("langcard.title"),
@@ -671,6 +810,14 @@ const renderTopLanguages = (topLangs, options = {}) => {
         width: 100%;
       }
     }
+    .stat {
+      font: 600 14px 'Segoe UI', Ubuntu, "Helvetica Neue", Sans-Serif; fill: ${colors.textColor};
+    }
+    @supports(-moz-appearance: auto) {
+      /* Selector detects Firefox */
+      .stat { font-size:12px; }
+    }
+    .bold { font-weight: 700 }
     .lang-name {
       font: 400 11px "Segoe UI", Ubuntu, Sans-Serif;
       fill: ${colors.textColor};
@@ -688,7 +835,7 @@ const renderTopLanguages = (topLangs, options = {}) => {
     `,
   );
 
-  if (layout === "pie") {
+  if (layout === "pie" || layout === "donut-vertical") {
     return card.render(finalLayout);
   }
 
@@ -705,12 +852,15 @@ export {
   radiansToDegrees,
   polarToCartesian,
   cartesianToPolar,
+  getCircleLength,
   calculateCompactLayoutHeight,
   calculateNormalLayoutHeight,
   calculateDonutLayoutHeight,
+  calculateDonutVerticalLayoutHeight,
   calculatePieLayoutHeight,
   donutCenterTranslation,
   trimTopLanguages,
   renderTopLanguages,
   MIN_CARD_WIDTH,
+  getDefaultLanguagesCountByLayout,
 };

src/cards/types.d.ts

@@ -39,7 +39,7 @@ export type TopLangOptions = CommonOptions & {
   hide_border: boolean;
   card_width: number;
   hide: string[];
-  layout: "compact" | "normal" | "donut" | "pie";
+  layout: "compact" | "normal" | "donut" | "donut-vertical" | "pie";
   custom_title: string;
   langs_count: number;
   disable_animations: boolean;

src/cards/wakatime-card.js

@@ -279,7 +279,11 @@ const renderWakatimeCard = (stats = {}, options = { hide: [] }) => {
           : noCodingActivityNode({
               // @ts-ignore
               color: textColor,
-              text: i18n.t("wakatimecard.nocodingactivity"),
+              text: !stats.is_coding_activity_visible
+                ? i18n.t("wakatimecard.notpublic")
+                : stats.is_other_usage_visible
+                ? i18n.t("wakatimecard.nocodingactivity")
+                : i18n.t("wakatimecard.nocodedetails"),
             })
       }
     `;
@@ -304,7 +308,11 @@ const renderWakatimeCard = (stats = {}, options = { hide: [] }) => {
             noCodingActivityNode({
               // @ts-ignore
               color: textColor,
-              text: i18n.t("wakatimecard.nocodingactivity"),
+              text: !stats.is_coding_activity_visible
+                ? i18n.t("wakatimecard.notpublic")
+                : stats.is_other_usage_visible
+                ? i18n.t("wakatimecard.nocodingactivity")
+                : i18n.t("wakatimecard.nocodedetails"),
             }),
           ],
       gap: lheight,
@@ -312,9 +320,20 @@ const renderWakatimeCard = (stats = {}, options = { hide: [] }) => {
     }).join("");
   }
 
+  // Get title range text
+  let titleText = i18n.t("wakatimecard.title");
+  switch (stats.range) {
+    case "last_7_days":
+      titleText += ` (${i18n.t("wakatimecard.last7days")})`;
+      break;
+    case "last_year":
+      titleText += ` (${i18n.t("wakatimecard.lastyear")})`;
+      break;
+  }
+
   const card = new Card({
     customTitle: custom_title,
-    defaultTitle: i18n.t("wakatimecard.title"),
+    defaultTitle: titleText,
     width: 495,
     height,
     border_radius,

src/common/languageColors.json

@@ -106,6 +106,7 @@
     "Cypher": "#34c0eb",
     "Cython": "#fedf5b",
     "D": "#ba595e",
+    "D2": "#526ee8",
     "DM": "#447265",
     "Dafny": "#FFEC25",
     "Darcs Patch": "#8eff23",
@@ -185,6 +186,7 @@
     "Go": "#00ADD8",
     "Go Checksums": "#00ADD8",
     "Go Module": "#00ADD8",
+    "Go Workspace": "#00ADD8",
     "Godot Resource": "#355570",
     "Golo": "#88562A",
     "Gosu": "#82937f",
@@ -284,6 +286,7 @@
     "Lua": "#000080",
     "MATLAB": "#e16737",
     "MAXScript": "#00a6a6",
+    "MDX": "#fcb32c",
     "MLIR": "#5EC8DB",
     "MQL4": "#62A8D6",
     "MQL5": "#4A76B8",
@@ -330,11 +333,12 @@
     "Nu": "#c9df40",
     "NumPy": "#9C8AF9",
     "Nunjucks": "#3d8137",
+    "Nushell": "#4E9906",
     "OASv2-json": "#85ea2d",
     "OASv2-yaml": "#85ea2d",
     "OASv3-json": "#85ea2d",
     "OASv3-yaml": "#85ea2d",
-    "OCaml": "#3be133",
+    "OCaml": "#ef7a08",
     "ObjectScript": "#424893",
     "Objective-C": "#438eff",
     "Objective-C++": "#6866fb",
@@ -360,6 +364,7 @@
     "PLSQL": "#dad8d8",
     "PLpgSQL": "#336790",
     "POV-Ray SDL": "#6bac65",
+    "Pact": "#F7A8B8",
     "Pan": "#cc0000",
     "Papyrus": "#6600cc",
     "Parrot": "#f3ca0a",
@@ -398,6 +403,7 @@
     "Quake": "#882233",
     "R": "#198CE7",
     "RAML": "#77d9fb",
+    "RBS": "#701516",
     "RDoc": "#701516",
     "REXX": "#d90e09",
     "RMarkdown": "#198ce7",
@@ -472,6 +478,7 @@
     "Swift": "#F05138",
     "SystemVerilog": "#DAE1C2",
     "TI Program": "#A0AA87",
+    "TL-Verilog": "#C40023",
     "TLA": "#4b0079",
     "TOML": "#9c4221",
     "TSQL": "#e38c00",
@@ -512,6 +519,7 @@
     "Vyper": "#2980b9",
     "Web Ontology Language": "#5b70bd",
     "WebAssembly": "#04133b",
+    "WebAssembly Interface Type": "#6250e7",
     "Whiley": "#d5c397",
     "Wikitext": "#fc5757",
     "Windows Registry Entries": "#52d5ff",

src/common/utils.js

@@ -305,6 +305,7 @@ const SECONDARY_ERROR_MESSAGES = {
     "Please add an env variable called PAT_1 with your github token in vercel",
   USER_NOT_FOUND: "Make sure the provided username is not an organization",
   GRAPHQL_ERROR: "Please try again later",
+  WAKATIME_USER_NOT_FOUND: "Make sure you have a public WakaTime profile",
 };
 
 /**
@@ -324,6 +325,7 @@ class CustomError extends Error {
   static MAX_RETRY = "MAX_RETRY";
   static USER_NOT_FOUND = "USER_NOT_FOUND";
   static GRAPHQL_ERROR = "GRAPHQL_ERROR";
+  static WAKATIME_ERROR = "WAKATIME_ERROR";
 }
 
 /**

src/fetchers/wakatime-fetcher.js

@@ -1,29 +1,29 @@
 import axios from "axios";
-import { MissingParamError } from "../common/utils.js";
+import { CustomError, MissingParamError } from "../common/utils.js";
+import { I18n } from "../common/I18n.js";
 
 /**
  * WakaTime data fetcher.
  *
- * @param {{username: string, api_domain: string, range: string}} props Fetcher props.
+ * @param {{username: string, api_domain: string }} props Fetcher props.
  * @returns {Promise<WakaTimeData>} WakaTime data response.
  */
-const fetchWakatimeStats = async ({ username, api_domain, range }) => {
+const fetchWakatimeStats = async ({ username, api_domain }) => {
   if (!username) throw new MissingParamError(["username"]);
 
   try {
     const { data } = await axios.get(
       `https://${
         api_domain ? api_domain.replace(/\/$/gi, "") : "wakatime.com"
-      }/api/v1/users/${username}/stats/${
-        range || "all_time"
-      }?is_including_today=true`,
+      }/api/v1/users/${username}/stats?is_including_today=true`,
     );
 
     return data.data;
   } catch (err) {
     if (err.response.status < 200 || err.response.status > 299) {
-      throw new Error(
-        "Wakatime user not found, make sure you have a wakatime profile",
+      throw new CustomError(
+        `Could not resolve to a User with the login of '${username}'`,
+        "WAKATIME_USER_NOT_FOUND",
       );
     }
     throw err;

src/translations.js

@@ -283,7 +283,7 @@ const langCardLocales = {
     np: "अधिक प्रयोग गरिएको भाषाहरू",
     el: "Οι περισσότερο χρησιμοποιούμενες γλώσσες",
     ru: "Наиболее часто используемые языки",
-    "uk-ua": "Найбільш часто використовувані мови",
+    "uk-ua": "Найчастіше використовувані мови",
     id: "Bahasa Yang Paling Banyak Digunakan",
     ml: "കൂടുതൽ ഉപയോഗിച്ച ഭാഷകൾ",
     my: "Bahasa Paling Digunakan",
@@ -293,6 +293,36 @@ const langCardLocales = {
     vi: "Ngôn Ngữ Thường Sử Dụng",
     se: "Mest använda språken",
   },
+  "langcard.nodata": {
+    ar: "لا توجد بيانات لغات.",
+    cn: "沒有語言數據。",
+    "zh-tw": "沒有語言數據。",
+    cs: "Žádné jazykové údaje.",
+    de: "Keine Sprachdaten.",
+    bn: "কোন ভাষার ডেটা নেই।",
+    en: "No languages data.",
+    es: "Sin datos de idiomas.",
+    fr: "Aucune donnée sur les langues.",
+    hu: "Nincsenek nyelvi adatok.",
+    it: "Nessun dato sulle lingue.",
+    ja: "言語データがありません。",
+    kr: "언어 데이터가 없습니다.",
+    nl: "Ingen sprogdata.",
+    "pt-pt": "Sem dados de idiomas.",
+    "pt-br": "Sem dados de idiomas.",
+    np: "कुनै भाषा डाटा छैन।",
+    el: "Δεν υπάρχουν δεδομένα γλωσσών.",
+    ru: "Нет данных о языках.",
+    "uk-ua": "Немає даних про мови.",
+    id: "Tidak ada data bahasa.",
+    ml: "ഭാഷാ ഡാറ്റയില്ല.",
+    my: "Tiada data bahasa.",
+    sk: "Žiadne údaje o jazykoch.",
+    tr: "Dil verisi yok.",
+    pl: "Brak danych dotyczących języków.",
+    vi: "Không có dữ liệu ngôn ngữ.",
+    se: "Inga språkdata.",
+  },
 };
 
 const wakatimeCardLocales = {
@@ -326,6 +356,22 @@ const wakatimeCardLocales = {
     vi: "Thống Kê Wakatime",
     se: "Wakatime statistik",
   },
+  "wakatimecard.lastyear": {
+    en: "last year",
+    cn: "去年",
+  },
+  "wakatimecard.last7days": {
+    en: "last 7 days",
+    cn: "最近 7 天",
+  },
+  "wakatimecard.notpublic": {
+    en: "Wakatime user profile not public",
+    cn: "Wakatime 用户个人资料未公开",
+  },
+  "wakatimecard.nocodedetails": {
+    en: "User doesn't publicly share detailed code statistics",
+    cn: "用户不公开分享详细的代码统计信息",
+  },
   "wakatimecard.nocodingactivity": {
     ar: "لا يوجد نشاط برمجي لهذا الأسبوع",
     cn: "本周没有编程活动",

tests/__snapshots__/renderWakatimeCard.test.js.snap

@@ -123,7 +123,7 @@ exports[`Test Render Wakatime Card should render correctly with compact layout 1
         y="0"
         class="header"
         data-testid="header"
-      >Wakatime Stats</text>
+      >Wakatime Stats (last 7 days)</text>
     </g>
       </g>
     
@@ -303,7 +303,7 @@ exports[`Test Render Wakatime Card should render correctly with compact layout w
         y="0"
         class="header"
         data-testid="header"
-      >Wakatime Stats</text>
+      >Wakatime Stats (last 7 days)</text>
     </g>
       </g>
     

tests/e2e/e2e.test.js

@@ -20,10 +20,7 @@ const STATS_DATA = {
   totalIssues: 1,
   totalStars: 1,
   contributedTo: 1,
-  rank: {
-    level: "A+",
-    score: 50.88831151384285,
-  },
+  rank: { level: "B", score: 98.50610674501908 },
 };
 
 const LANGS_DATA = {
@@ -54,7 +51,7 @@ const WAKATIME_DATA = {
   is_up_to_date: false,
   is_up_to_date_pending_future: false,
   percent_calculated: 0,
-  range: "last_7_days",
+  range: "all_time",
   status: "pending_update",
   timeout: 15,
   username: USER,

tests/fetchWakatime.test.js

@@ -105,7 +105,7 @@ describe("Wakatime fetcher", () => {
     const username = "anuraghazra";
     mock
       .onGet(
-        `https://wakatime.com/api/v1/users/${username}/stats/all_time?is_including_today=true`,
+        `https://wakatime.com/api/v1/users/${username}/stats?is_including_today=true`,
       )
       .reply(200, wakaTimeData);
 

tests/renderTopLanguages.test.js

@@ -6,14 +6,17 @@ import {
   radiansToDegrees,
   polarToCartesian,
   cartesianToPolar,
+  getCircleLength,
   calculateCompactLayoutHeight,
   calculateNormalLayoutHeight,
   calculateDonutLayoutHeight,
+  calculateDonutVerticalLayoutHeight,
   calculatePieLayoutHeight,
   donutCenterTranslation,
   trimTopLanguages,
   renderTopLanguages,
   MIN_CARD_WIDTH,
+  getDefaultLanguagesCountByLayout,
 } from "../src/cards/top-languages-card.js";
 
 // adds special assertions like toHaveTextContent
@@ -70,6 +73,20 @@ const langPercentFromDonutLayoutSvg = (d, centerX, centerY) => {
   return (endAngle - startAngle) / 3.6;
 };
 
+/**
+ * Calculate language percentage for donut vertical chart SVG.
+ *
+ * @param {number} partLength Length of current chart part..
+ * @param {number} totalCircleLength Total length of circle.
+ * @return {number} Chart part percentage.
+ */
+const langPercentFromDonutVerticalLayoutSvg = (
+  partLength,
+  totalCircleLength,
+) => {
+  return (partLength / totalCircleLength) * 100;
+};
+
 /**
  * Retrieve the language percentage from the pie chart SVG.
  *
@@ -230,6 +247,20 @@ describe("Test renderTopLanguages helper functions", () => {
     expect(calculateDonutLayoutHeight(10)).toBe(375);
   });
 
+  it("calculateDonutVerticalLayoutHeight", () => {
+    expect(calculateDonutVerticalLayoutHeight(0)).toBe(300);
+    expect(calculateDonutVerticalLayoutHeight(1)).toBe(325);
+    expect(calculateDonutVerticalLayoutHeight(2)).toBe(325);
+    expect(calculateDonutVerticalLayoutHeight(3)).toBe(350);
+    expect(calculateDonutVerticalLayoutHeight(4)).toBe(350);
+    expect(calculateDonutVerticalLayoutHeight(5)).toBe(375);
+    expect(calculateDonutVerticalLayoutHeight(6)).toBe(375);
+    expect(calculateDonutVerticalLayoutHeight(7)).toBe(400);
+    expect(calculateDonutVerticalLayoutHeight(8)).toBe(400);
+    expect(calculateDonutVerticalLayoutHeight(9)).toBe(425);
+    expect(calculateDonutVerticalLayoutHeight(10)).toBe(425);
+  });
+
   it("calculatePieLayoutHeight", () => {
     expect(calculatePieLayoutHeight(0)).toBe(300);
     expect(calculatePieLayoutHeight(1)).toBe(325);
@@ -258,6 +289,18 @@ describe("Test renderTopLanguages helper functions", () => {
     expect(donutCenterTranslation(10)).toBe(35);
   });
 
+  it("getCircleLength", () => {
+    expect(getCircleLength(20)).toBeCloseTo(125.663);
+    expect(getCircleLength(30)).toBeCloseTo(188.495);
+    expect(getCircleLength(40)).toBeCloseTo(251.327);
+    expect(getCircleLength(50)).toBeCloseTo(314.159);
+    expect(getCircleLength(60)).toBeCloseTo(376.991);
+    expect(getCircleLength(70)).toBeCloseTo(439.822);
+    expect(getCircleLength(80)).toBeCloseTo(502.654);
+    expect(getCircleLength(90)).toBeCloseTo(565.486);
+    expect(getCircleLength(100)).toBeCloseTo(628.318);
+  });
+
   it("trimTopLanguages", () => {
     expect(trimTopLanguages([])).toStrictEqual({
       langs: [],
@@ -286,6 +329,15 @@ describe("Test renderTopLanguages helper functions", () => {
       totalLanguageSize: 300,
     });
   });
+
+  it("getDefaultLanguagesCountByLayout", () => {
+    expect(getDefaultLanguagesCountByLayout("normal")).toStrictEqual(5);
+    expect(getDefaultLanguagesCountByLayout(undefined)).toStrictEqual(5);
+    expect(getDefaultLanguagesCountByLayout("compact")).toStrictEqual(6);
+    expect(getDefaultLanguagesCountByLayout("donut")).toStrictEqual(5);
+    expect(getDefaultLanguagesCountByLayout("donut-vertical")).toStrictEqual(6);
+    expect(getDefaultLanguagesCountByLayout("pie")).toStrictEqual(6);
+  });
 });
 
 describe("Test renderTopLanguages", () => {
@@ -569,6 +621,104 @@ describe("Test renderTopLanguages", () => {
       "circle",
     );
   });
+
+  it("should render with layout donut vertical", () => {
+    document.body.innerHTML = renderTopLanguages(langs, {
+      layout: "donut-vertical",
+    });
+
+    expect(queryByTestId(document.body, "header")).toHaveTextContent(
+      "Most Used Languages",
+    );
+
+    expect(queryAllByTestId(document.body, "lang-name")[0]).toHaveTextContent(
+      "HTML 40.00%",
+    );
+    expect(queryAllByTestId(document.body, "lang-donut")[0]).toHaveAttribute(
+      "size",
+      "40",
+    );
+
+    const totalCircleLength = queryAllByTestId(
+      document.body,
+      "lang-donut",
+    )[0].getAttribute("stroke-dasharray");
+
+    const HTMLLangPercent = langPercentFromDonutVerticalLayoutSvg(
+      queryAllByTestId(document.body, "lang-donut")[1].getAttribute(
+        "stroke-dashoffset",
+      ) -
+        queryAllByTestId(document.body, "lang-donut")[0].getAttribute(
+          "stroke-dashoffset",
+        ),
+      totalCircleLength,
+    );
+    expect(HTMLLangPercent).toBeCloseTo(40);
+
+    expect(queryAllByTestId(document.body, "lang-name")[1]).toHaveTextContent(
+      "javascript 40.00%",
+    );
+    expect(queryAllByTestId(document.body, "lang-donut")[1]).toHaveAttribute(
+      "size",
+      "40",
+    );
+    const javascriptLangPercent = langPercentFromDonutVerticalLayoutSvg(
+      queryAllByTestId(document.body, "lang-donut")[2].getAttribute(
+        "stroke-dashoffset",
+      ) -
+        queryAllByTestId(document.body, "lang-donut")[1].getAttribute(
+          "stroke-dashoffset",
+        ),
+      totalCircleLength,
+    );
+    expect(javascriptLangPercent).toBeCloseTo(40);
+
+    expect(queryAllByTestId(document.body, "lang-name")[2]).toHaveTextContent(
+      "css 20.00%",
+    );
+    expect(queryAllByTestId(document.body, "lang-donut")[2]).toHaveAttribute(
+      "size",
+      "20",
+    );
+    const cssLangPercent = langPercentFromDonutVerticalLayoutSvg(
+      totalCircleLength -
+        queryAllByTestId(document.body, "lang-donut")[2].getAttribute(
+          "stroke-dashoffset",
+        ),
+      totalCircleLength,
+    );
+    expect(cssLangPercent).toBeCloseTo(20);
+
+    expect(HTMLLangPercent + javascriptLangPercent + cssLangPercent).toBe(100);
+  });
+
+  it("should render with layout donut vertical full donut circle of one language is 100%", () => {
+    document.body.innerHTML = renderTopLanguages(
+      { HTML: langs.HTML },
+      { layout: "donut-vertical" },
+    );
+    expect(queryAllByTestId(document.body, "lang-name")[0]).toHaveTextContent(
+      "HTML 100.00%",
+    );
+    expect(queryAllByTestId(document.body, "lang-donut")[0]).toHaveAttribute(
+      "size",
+      "100",
+    );
+    const totalCircleLength = queryAllByTestId(
+      document.body,
+      "lang-donut",
+    )[0].getAttribute("stroke-dasharray");
+
+    const HTMLLangPercent = langPercentFromDonutVerticalLayoutSvg(
+      totalCircleLength -
+        queryAllByTestId(document.body, "lang-donut")[0].getAttribute(
+          "stroke-dashoffset",
+        ),
+      totalCircleLength,
+    );
+    expect(HTMLLangPercent).toBeCloseTo(100);
+  });
+
   it("should render with layout pie", () => {
     document.body.innerHTML = renderTopLanguages(langs, { layout: "pie" });
 
@@ -657,7 +807,7 @@ describe("Test renderTopLanguages", () => {
     expect(document.querySelector("rect")).toHaveAttribute("rx", "4.5");
   });
 
-  it("should render langs with specified langs_count", async () => {
+  it("should render langs with specified langs_count", () => {
     const options = {
       langs_count: 1,
     };
@@ -667,7 +817,7 @@ describe("Test renderTopLanguages", () => {
     );
   });
 
-  it("should render langs with specified langs_count even when hide is set", async () => {
+  it("should render langs with specified langs_count even when hide is set", () => {
     const options = {
       hide: ["HTML"],
       langs_count: 2,
@@ -677,4 +827,11 @@ describe("Test renderTopLanguages", () => {
       options.langs_count,
     );
   });
+
+  it('should show "No languages data." message instead of empty card when nothing to show', () => {
+    document.body.innerHTML = renderTopLanguages({});
+    expect(document.querySelector(".stat").textContent).toBe(
+      "No languages data.",
+    );
+  });
 });

tests/renderWakatimeCard.test.js

@@ -43,7 +43,7 @@ describe("Test Render Wakatime Card", () => {
     expect(
       document.querySelector('g[transform="translate(0, 0)"]>text.stat.bold')
         .textContent,
-    ).toBe("本周没有编程活动");
+    ).toBe("Wakatime 用户个人资料未公开");
   });
 
   it("should render without rounding", () => {

tests/top-langs.test.js

@@ -123,7 +123,7 @@ describe("Test /api/top-langs", () => {
     );
   });
 
-  it("should render error card on error", async () => {
+  it("should render error card on user data fetch error", async () => {
     const req = {
       query: {
         username: "anuraghazra",
@@ -140,4 +140,25 @@ describe("Test /api/top-langs", () => {
     expect(res.setHeader).toBeCalledWith("Content-Type", "image/svg+xml");
     expect(res.send).toBeCalledWith(renderError(error.errors[0].message));
   });
+
+  it("should render error card on incorrect layout input", async () => {
+    const req = {
+      query: {
+        username: "anuraghazra",
+        layout: ["pie"],
+      },
+    };
+    const res = {
+      setHeader: jest.fn(),
+      send: jest.fn(),
+    };
+    mock.onPost("https://api.github.com/graphql").reply(200, data_langs);
+
+    await topLangs(req, res);
+
+    expect(res.setHeader).toBeCalledWith("Content-Type", "image/svg+xml");
+    expect(res.send).toBeCalledWith(
+      renderError("Something went wrong", "Incorrect layout input"),
+    );
+  });
 });