Fixed resizing of stats card when all metrics except rank are hidden (anuraghazra#2868)

* fixed card resizing in case of rank only

* fixed to display error when both stats and rank are hidden

* fix: fix visual alignment

---------

Co-authored-by: rickstaa <[email protected]>

Author: iwbc-mzk

Diff for: src/cards/stats-card.js

@@ -3,6 +3,7 @@ import { Card } from "../common/Card.js";
 import { I18n } from "../common/I18n.js";
 import { icons, rankIcon } from "../common/icons.js";
 import {
+  CustomError,
   clampValue,
   flexLayout,
   getCardColors,
@@ -16,6 +17,8 @@ const CARD_MIN_WIDTH = 287;
 const CARD_DEFAULT_WIDTH = 287;
 const RANK_CARD_MIN_WIDTH = 420;
 const RANK_CARD_DEFAULT_WIDTH = 450;
+const RANK_ONLY_CARD_MIN_WIDTH = 290;
+const RANK_ONLY_CARD_DEFAULT_WIDTH = 290;
 
 /**
  * Create a stats card text item.
@@ -234,11 +237,18 @@ const renderStatsCard = (stats = {}, options = {}) => {
       }),
     );
 
+  if (statItems.length === 0 && hide_rank) {
+    throw new CustomError(
+      "Could not render stats card.",
+      "Either stats or rank are required.",
+    );
+  }
+
   // Calculate the card height depending on how many items there are
   // but if rank circle is visible clamp the minimum height to `150`
   let height = Math.max(
     45 + (statItems.length + 1) * lheight,
-    hide_rank ? 0 : 150,
+    hide_rank ? 0 : statItems.length ? 150 : 180,
   );
 
   // the lower the user's percentile the better
@@ -253,33 +263,47 @@ const renderStatsCard = (stats = {}, options = {}) => {
   });
 
   const calculateTextWidth = () => {
-    return measureText(custom_title ? custom_title : i18n.t("statcard.title"));
+    return measureText(
+      custom_title
+        ? custom_title
+        : statItems.length
+        ? i18n.t("statcard.title")
+        : i18n.t("statcard.ranktitle"),
+    );
   };
 
   /*
     When hide_rank=true, the minimum card width is 270 px + the title length and padding.
     When hide_rank=false, the minimum card_width is 340 px + the icon width (if show_icons=true).
     Numbers are picked by looking at existing dimensions on production.
   */
-  const iconWidth = show_icons ? 16 + /* padding */ 1 : 0;
+  const iconWidth = show_icons && statItems.length ? 16 + /* padding */ 1 : 0;
   const minCardWidth =
     (hide_rank
       ? clampValue(
           50 /* padding */ + calculateTextWidth() * 2,
           CARD_MIN_WIDTH,
           Infinity,
         )
-      : RANK_CARD_MIN_WIDTH) + iconWidth;
+      : statItems.length
+      ? RANK_CARD_MIN_WIDTH
+      : RANK_ONLY_CARD_MIN_WIDTH) + iconWidth;
   const defaultCardWidth =
-    (hide_rank ? CARD_DEFAULT_WIDTH : RANK_CARD_DEFAULT_WIDTH) + iconWidth;
+    (hide_rank
+      ? CARD_DEFAULT_WIDTH
+      : statItems.length
+      ? RANK_CARD_DEFAULT_WIDTH
+      : RANK_ONLY_CARD_DEFAULT_WIDTH) + iconWidth;
   let width = isNaN(card_width) ? defaultCardWidth : card_width;
   if (width < minCardWidth) {
     width = minCardWidth;
   }
 
   const card = new Card({
     customTitle: custom_title,
-    defaultTitle: i18n.t("statcard.title"),
+    defaultTitle: statItems.length
+      ? i18n.t("statcard.title")
+      : i18n.t("statcard.ranktitle"),
     width,
     height,
     border_radius,
@@ -309,12 +333,16 @@ const renderStatsCard = (stats = {}, options = {}) => {
    * @returns {number} - Rank circle translation value.
    */
   const calculateRankXTranslation = () => {
-    const minXTranslation = RANK_CARD_MIN_WIDTH + iconWidth - 70;
-    if (width > RANK_CARD_DEFAULT_WIDTH) {
-      const xMaxExpansion = minXTranslation + (450 - minCardWidth) / 2;
-      return xMaxExpansion + width - RANK_CARD_DEFAULT_WIDTH;
+    if (statItems.length) {
+      const minXTranslation = RANK_CARD_MIN_WIDTH + iconWidth - 70;
+      if (width > RANK_CARD_DEFAULT_WIDTH) {
+        const xMaxExpansion = minXTranslation + (450 - minCardWidth) / 2;
+        return xMaxExpansion + width - RANK_CARD_DEFAULT_WIDTH;
+      } else {
+        return minXTranslation + (width - minCardWidth) / 2;
+      }
     } else {
-      return minXTranslation + (width - minCardWidth) / 2;
+      return width / 2 + 20 - 10;
     }
   };
 

Diff for: src/translations.js

@@ -43,6 +43,37 @@ const statCardLocales = ({ name, apostrophe }) => {
       vi: `Thống Kê GitHub ${encodedName}`,
       se: `GitHubstatistik för ${encodedName}`,
     },
+    "statcard.ranktitle": {
+      ar: `${encodedName} إحصائيات غيت هاب`,
+      cn: `${encodedName} 的 GitHub 统计数据`,
+      "zh-tw": `${encodedName} 的 GitHub 統計數據`,
+      cs: `GitHub statistiky uživatele ${encodedName}`,
+      de: `${encodedName + apostrophe} GitHub-Statistiken`,
+      en: `${encodedName}'${apostrophe} GitHub Rank`,
+      bn: `${encodedName} এর GitHub পরিসংখ্যান`,
+      es: `Estadísticas de GitHub de ${encodedName}`,
+      fr: `Statistiques GitHub de ${encodedName}`,
+      hu: `${encodedName} GitHub statisztika`,
+      it: `Statistiche GitHub di ${encodedName}`,
+      ja: `${encodedName} の GitHub ランク`,
+      kr: `${encodedName}의 GitHub 통계`,
+      nl: `${encodedName}'${apostrophe} GitHub-statistieken`,
+      "pt-pt": `Estatísticas do GitHub de ${encodedName}`,
+      "pt-br": `Estatísticas do GitHub de ${encodedName}`,
+      np: `${encodedName}'${apostrophe} गिटहब तथ्याङ्क`,
+      el: `Στατιστικά GitHub του ${encodedName}`,
+      ru: `Статистика GitHub пользователя ${encodedName}`,
+      "uk-ua": `Статистика GitHub користувача ${encodedName}`,
+      id: `Statistik GitHub ${encodedName}`,
+      ml: `${encodedName}'${apostrophe} ഗിറ്റ്ഹബ് സ്ഥിതിവിവരക്കണക്കുകൾ`,
+      my: `Statistik GitHub ${encodedName}`,
+      sk: `GitHub štatistiky používateľa ${encodedName}`,
+      tr: `${encodedName} Hesabının GitHub Yıldızları`,
+      pl: `Statystyki GitHub użytkownika ${encodedName}`,
+      uz: `${encodedName}ning GitHub'dagi statistikasi`,
+      vi: `Thống Kê GitHub ${encodedName}`,
+      se: `GitHubstatistik för ${encodedName}`,
+    },
     "statcard.totalstars": {
       ar: "مجموع النجوم",
       cn: "获标星数（star）",