feat: auto resize card if rank is hidden (#721)

readme.md

@@ -156,7 +156,7 @@ You can provide multiple comma-separated values in bg_color option to render a g
 
 - `hide` - Hides the specified items from stats _(Comma-separated values)_
 - `hide_title` - _(boolean)_
-- `hide_rank` - _(boolean)_
+- `hide_rank` - _(boolean)_ hides the rank and automatically resizes the card width
 - `hide_border` - _(boolean)_
 - `show_icons` - _(boolean)_
 - `include_all_commits` - Count total commits instead of just the current year commits _(boolean)_

src/cards/stats-card.js

@@ -3,7 +3,13 @@ const Card = require("../common/Card");
 const icons = require("../common/icons");
 const { getStyles } = require("../getStyles");
 const { statCardLocales } = require("../translations");
-const { kFormatter, getCardColors, FlexLayout } = require("../common/utils");
+const {
+  kFormatter,
+  FlexLayout,
+  clampValue,
+  measureText,
+  getCardColors,
+} = require("../common/utils");
 
 const createTextNode = ({
   icon,
@@ -176,10 +182,22 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
     progress,
   });
 
+  const calculateTextWidth = () => {
+    return measureText(custom_title ? custom_title : i18n.t("statcard.title"));
+  };
+
+  const width = hide_rank
+    ? clampValue(
+        50 /* padding */ + calculateTextWidth() * 2,
+        270 /* min */,
+        Infinity,
+      )
+    : 495;
+
   const card = new Card({
     customTitle: custom_title,
     defaultTitle: i18n.t("statcard.title"),
-    width: 495,
+    width,
     height,
     colors: {
       titleColor,

src/common/utils.js

@@ -188,6 +188,41 @@ class CustomError extends Error {
   static USER_NOT_FOUND = "USER_NOT_FOUND";
 }
 
+// https://stackoverflow.com/a/48172630/10629172
+function measureText(str, fontSize = 10) {
+  // prettier-ignore
+  const widths = [
+    0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+    0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+    0, 0, 0, 0, 0.2796875, 0.2765625,
+    0.3546875, 0.5546875, 0.5546875, 0.8890625, 0.665625, 0.190625,
+    0.3328125, 0.3328125, 0.3890625, 0.5828125, 0.2765625, 0.3328125,
+    0.2765625, 0.3015625, 0.5546875, 0.5546875, 0.5546875, 0.5546875,
+    0.5546875, 0.5546875, 0.5546875, 0.5546875, 0.5546875, 0.5546875,
+    0.2765625, 0.2765625, 0.584375, 0.5828125, 0.584375, 0.5546875,
+    1.0140625, 0.665625, 0.665625, 0.721875, 0.721875, 0.665625,
+    0.609375, 0.7765625, 0.721875, 0.2765625, 0.5, 0.665625,
+    0.5546875, 0.8328125, 0.721875, 0.7765625, 0.665625, 0.7765625,
+    0.721875, 0.665625, 0.609375, 0.721875, 0.665625, 0.94375,
+    0.665625, 0.665625, 0.609375, 0.2765625, 0.3546875, 0.2765625,
+    0.4765625, 0.5546875, 0.3328125, 0.5546875, 0.5546875, 0.5,
+    0.5546875, 0.5546875, 0.2765625, 0.5546875, 0.5546875, 0.221875,
+    0.240625, 0.5, 0.221875, 0.8328125, 0.5546875, 0.5546875,
+    0.5546875, 0.5546875, 0.3328125, 0.5, 0.2765625, 0.5546875,
+    0.5, 0.721875, 0.5, 0.5, 0.5, 0.3546875, 0.259375, 0.353125, 0.5890625,
+  ];
+
+  const avg = 0.5279276315789471;
+  return (
+    str
+      .split("")
+      .map((c) =>
+        c.charCodeAt(0) < widths.length ? widths[c.charCodeAt(0)] : avg,
+      )
+      .reduce((cur, acc) => acc + cur) * fontSize
+  );
+}
+
 module.exports = {
   renderError,
   kFormatter,
@@ -201,6 +236,7 @@ module.exports = {
   getCardColors,
   clampValue,
   wrapTextMultiline,
+  measureText,
   logger,
   CONSTANTS,
   CustomError,

tests/renderStatsCard.test.js

@@ -210,6 +210,27 @@ describe("Test renderStatsCard", () => {
     ).not.toHaveAttribute("x");
   });
 
+  it("should auto resize if hide_rank is true", () => {
+    document.body.innerHTML = renderStatsCard(stats, {
+      hide_rank: true,
+    });
+
+    expect(
+      document.body.getElementsByTagName("svg")[0].getAttribute("width"),
+    ).toBe("305.81250000000006");
+  });
+
+  it("should auto resize if hide_rank is true & custom_title is set", () => {
+    document.body.innerHTML = renderStatsCard(stats, {
+      hide_rank: true,
+      custom_title: "Hello world",
+    });
+
+    expect(
+      document.body.getElementsByTagName("svg")[0].getAttribute("width"),
+    ).toBe("270");
+  });
+
   it("should render translations", () => {
     document.body.innerHTML = renderStatsCard(stats, { locale: "cn" });
     expect(document.getElementsByClassName("header")[0].textContent).toBe(