@stats-organization/github-readme-stats-core 2.1.4 → 2.2.0

package/build/cards/stats.js

@@ -1,11 +1,10 @@
 import { Card } from "../common/Card.js";
 import { I18n } from "../common/I18n.js";
-import { getCardColors } from "../common/color.js";
+import { getLightDarkColors } from "../common/color.js";
 import { CustomError } from "../common/error.js";
-import { kFormatter } from "../common/fmt.js";
 import { icons, rankIcon } from "../common/icons.js";
 import { buildSearchFilter, clampValue } from "../common/ops.js";
-import { flexLayout, measureText } from "../common/render.js";
+import { createTextNode, flexLayout, measureText } from "../common/render.js";
 import { statCardLocales, wakatimeCardLocales } from "../translations.js";
 const CARD_MIN_WIDTH = 287;
 const CARD_DEFAULT_WIDTH = 287;
@@ -13,11 +12,7 @@ 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;
-/**
- * Long locales that need more space for text. Keep sorted alphabetically.
- *
- * @type {(keyof typeof wakatimeCardLocales["wakatimecard.title"])[]}
- */
+/** Long locales that need more space for text. Keep sorted alphabetically. */
 const LONG_LOCALES = [
     "az",
     "bg",
@@ -46,63 +41,11 @@ const LONG_LOCALES = [
     "uz",
     "zh-tw",
 ];
-/**
- * Create a stats card text item.
- *
- * @param {object} params Object that contains the createTextNode parameters.
- * @param {string} params.icon The icon to display.
- * @param {string} params.label The label to display.
- * @param {number} params.value The value to display.
- * @param {string} params.id The id of the stat.
- * @param {string=} params.unitSymbol The unit symbol of the stat.
- * @param {number} params.index The index of the stat.
- * @param {boolean} params.showIcons Whether to show icons.
- * @param {number} params.shiftValuePos Number of pixels the value has to be shifted to the right.
- * @param {boolean} params.bold Whether to bold the label.
- * @param {string} params.numberFormat The format of numbers on card.
- * @param {number=} params.numberPrecision The precision of numbers on card.
- * @param {string} params.link Url to link to.
- * @param {number} params.labelXOffset horizontal offset for label.
- * @returns {string} The stats card text item SVG object.
- */
-const createTextNode = ({ icon, label, value, id, unitSymbol, index, showIcons, shiftValuePos, bold, numberFormat, numberPrecision, link, labelXOffset = 25, }) => {
-    const precision = typeof numberPrecision === "number" && !isNaN(numberPrecision)
-        ? clampValue(numberPrecision, 0, 2)
-        : undefined;
-    const kValue = numberFormat.toLowerCase() === "long" || id === "prs_merged_percentage"
-        ? value
-        : kFormatter(value, precision);
-    const staggerDelay = (index + 3) * 150;
-    const labelOffset = showIcons ? `x="${labelXOffset}"` : "";
-    const iconSvg = showIcons
-        ? `
-    <svg data-testid="icon" class="icon" viewBox="0 0 16 16" version="1.1" width="16" height="16">
-      ${icon}
-    </svg>
-  `
-        : "";
-    return (`
-    <g class="stagger" style="animation-delay: ${staggerDelay}ms" transform="translate(25, 0)">` +
-        (link ? `<a href="${link}">` : "") +
-        `
-      ${iconSvg}
-      <text class="stat ${bold ? " bold" : "not_bold"}" ${labelOffset} y="12.5">${label}:</text>
-      <text
-        class="stat ${bold ? " bold" : "not_bold"}"
-        x="${(showIcons ? 140 : 120) + (bold ? 5 : 0) + shiftValuePos}"
-        y="12.5"
-        data-testid="${id}"
-      >${kValue}${unitSymbol ? ` ${unitSymbol}` : ""}</text>` +
-        (link ? "</a>" : "") +
-        `
-    </g>
-  `);
-};
 /**
  * Calculates progress along the boundary of the circle, i.e. its circumference.
  *
- * @param {number} value The rank value to calculate progress for.
- * @returns {number} Progress value.
+ * @param value The rank value to calculate progress for.
+ * @returns Progress value.
  */
 const calculateCircleProgress = (value) => {
     const radius = 40;
@@ -119,8 +62,9 @@ const calculateCircleProgress = (value) => {
  * Retrieves the animation to display progress along the circumference of circle
  * from the beginning to the given value in a clockwise direction.
  *
- * @param {{progress: number}} progress The progress value to animate to.
- * @returns {string} Progress animation css.
+ * @param props The props object.
+ * @param props.progress The progress value to animate to.
+ * @returns Progress animation css.
  */
 const getProgressAnimation = ({ progress }) => {
     return `
@@ -137,18 +81,15 @@ const getProgressAnimation = ({ progress }) => {
 /**
  * Retrieves CSS styles for a card.
  *
- * @param {Object} colors The colors to use for the card.
- * @param {string} colors.titleColor The title color.
- * @param {string} colors.textColor The text color.
- * @param {string} colors.iconColor The icon color.
- * @param {string} colors.ringColor The ring color.
- * @param {boolean} colors.show_icons Whether to show icons.
- * @param {number} colors.progress The progress value to animate to.
- * @returns {string} Card CSS styles.
+ * @param colors The colors to use for the card.
+ * @param colors.textColor The text color.
+ * @param colors.iconColor The icon color.
+ * @param colors.ringColor The ring color.
+ * @param colors.show_icons Whether to show icons.
+ * @param colors.progress The progress value to animate to.
+ * @returns Card CSS styles.
  */
-const getStyles = ({ 
-// eslint-disable-next-line no-unused-vars
-titleColor, textColor, iconColor, ringColor, show_icons, progress, }) => {
+const getStyles = ({ textColor, iconColor, ringColor, show_icons, progress, }) => {
     return `
     .stat {
       font: 600 14px 'Segoe UI', Ubuntu, "Helvetica Neue", Sans-Serif; fill: ${textColor};
@@ -202,41 +143,32 @@ titleColor, textColor, iconColor, ringColor, show_icons, progress, }) => {
 /**
  * Return the label for commits according to the selected options
  *
- * @param {boolean} include_all_commits Option to include all years
- * @param {number|undefined} commits_year Option to include only selected year
- * @param {I18n} i18n The I18n instance.
- * @returns {string} The label corresponding to the options.
+ * @param include_all_commits Option to include all years
+ * @param commits_year Option to include only selected year
+ * @param i18n The I18n instance.
+ * @returns The label corresponding to the options.
  */
 const getTotalCommitsYearLabel = (include_all_commits, commits_year, i18n) => include_all_commits
     ? ""
     : commits_year
         ? ` (${commits_year})`
         : ` (${i18n.t("wakatimecard.lastyear")})`;
-/**
- * @typedef {import('../fetchers/types').StatsData} StatsData
- * @typedef {import('./types').StatCardOptions} StatCardOptions
- */
 /**
  * Renders the stats card.
  *
- * @param {StatsData} stats The stats data.
- * @param {Partial<StatCardOptions>} options The card options.
- * @returns {string} The stats card SVG object.
+ * @param stats The stats data.
+ * @param options The card options.
+ * @param username GitHub username, used to build stat search links.
+ * @param repo Repositories to scope the search links to.
+ * @param owner Owners to scope the search links to.
+ * @returns The stats card SVG object.
  */
 const renderStatsCard = (stats, options = {}, username, repo = [], owner = []) => {
-    const { name, totalStars, totalCommits, totalIssues, totalPRs, totalPRsMerged, mergedPRsPercentage, totalReviews, totalDiscussionsStarted, totalDiscussionsAnswered, contributedTo, totalPRsAuthored, totalPRsCommented, totalPRsReviewed, totalIssuesAuthored, totalIssuesCommented, rank, } = stats;
-    const { hide = [], show_icons = false, hide_title = false, hide_border = false, card_width, hide_rank = false, include_all_commits = false, commits_year, line_height = 25, title_color, ring_color, icon_color, text_color, text_bold = true, bg_color, theme = "default", custom_title, border_radius, border_color, number_format = "short", number_precision, locale, disable_animations = false, rank_icon = "default", show = [], } = options;
+    const { name, totalStars, totalCommits, totalIssues, totalPRs, totalPRsMerged, mergedPRsPercentage, totalReviews, totalDiscussionsStarted, totalDiscussionsAnswered, contributedTo, allTimeContributedTo, totalPRsAuthored, totalPRsCommented, totalPRsReviewed, totalIssuesAuthored, totalIssuesCommented, totalContributions, rank, } = stats;
+    const { hide = [], show_icons = false, hide_title = false, hide_border = false, card_width, hide_rank = false, include_all_commits = false, commits_year, line_height = 25, text_bold = true, custom_title, border_radius, number_format = "short", number_precision, locale, disable_animations = false, rank_icon = "default", show = [], } = options;
     const lheight = parseInt(String(line_height), 10);
-    // returns theme based colors with proper overrides and defaults
-    const { titleColor, iconColor, textColor, bgColor, borderColor, ringColor } = getCardColors({
-        title_color,
-        text_color,
-        icon_color,
-        bg_color,
-        border_color,
-        ring_color,
-        theme,
-    });
+    const { lightColors, darkColors } = getLightDarkColors(options);
+    const { iconColor, textColor, ringColor } = lightColors;
     const apostrophe = /s$/i.test(name.trim()) ? "" : "s";
     const i18n = new I18n({
         locale,
@@ -247,26 +179,34 @@ const renderStatsCard = (stats, options = {}, username, repo = [], owner = []) =
     });
     // Meta data for creating text nodes with createTextNode function
     const STATS = {};
-    STATS.stars = {
+    STATS["stars"] = {
         icon: icons.star,
         label: i18n.t("statcard.totalstars"),
         value: totalStars,
         id: "stars",
     };
-    STATS.commits = {
+    if (show.includes("contributions")) {
+        STATS["contributions"] = {
+            icon: icons.contributions,
+            label: i18n.t("statcard.contributions"),
+            value: totalContributions,
+            id: "contributions",
+        };
+    }
+    STATS["commits"] = {
         icon: icons.commits,
         label: `${i18n.t("statcard.commits")}${getTotalCommitsYearLabel(include_all_commits, commits_year, i18n)}`,
         value: totalCommits,
         id: "commits",
     };
-    STATS.prs = {
+    STATS["prs"] = {
         icon: icons.prs,
         label: i18n.t("statcard.prs"),
         value: totalPRs,
         id: "prs",
     };
     if (show.includes("prs_merged")) {
-        STATS.prs_merged = {
+        STATS["prs_merged"] = {
             icon: icons.prs_merged,
             label: i18n.t("statcard.prs-merged"),
             value: totalPRsMerged,
@@ -274,10 +214,10 @@ const renderStatsCard = (stats, options = {}, username, repo = [], owner = []) =
         };
     }
     if (show.includes("prs_merged_percentage")) {
-        STATS.prs_merged_percentage = {
+        STATS["prs_merged_percentage"] = {
             icon: icons.prs_merged_percentage,
             label: i18n.t("statcard.prs-merged-percentage"),
-            value: mergedPRsPercentage.toFixed(typeof number_precision === "number" && !isNaN(number_precision)
+            value: mergedPRsPercentage.toFixed(number_precision !== undefined && Number.isFinite(number_precision)
                 ? clampValue(number_precision, 0, 2)
                 : 2),
             id: "prs_merged_percentage",
@@ -285,21 +225,21 @@ const renderStatsCard = (stats, options = {}, username, repo = [], owner = []) =
         };
     }
     if (show.includes("reviews")) {
-        STATS.reviews = {
+        STATS["reviews"] = {
             icon: icons.reviews,
             label: i18n.t("statcard.reviews"),
             value: totalReviews,
             id: "reviews",
         };
     }
-    STATS.issues = {
+    STATS["issues"] = {
         icon: icons.issues,
         label: i18n.t("statcard.issues"),
         value: totalIssues,
         id: "issues",
     };
     if (show.includes("discussions_started")) {
-        STATS.discussions_started = {
+        STATS["discussions_started"] = {
             icon: icons.discussions_started,
             label: i18n.t("statcard.discussions-started"),
             value: totalDiscussionsStarted,
@@ -307,109 +247,105 @@ const renderStatsCard = (stats, options = {}, username, repo = [], owner = []) =
         };
     }
     if (show.includes("discussions_answered")) {
-        STATS.discussions_answered = {
+        STATS["discussions_answered"] = {
             icon: icons.discussions_answered,
             label: i18n.t("statcard.discussions-answered"),
             value: totalDiscussionsAnswered,
             id: "discussions_answered",
         };
     }
-    let repoFilter = encodeURIComponent(buildSearchFilter(repo, owner));
+    const repoFilter = encodeURIComponent(buildSearchFilter(repo, owner));
+    const encodedUsername = encodeURIComponent(username ?? "");
     if (show.includes("prs_authored")) {
-        STATS.prs_authored = {
+        STATS["prs_authored"] = {
             icon: icons.prs,
             label: i18n.t("statcard.prs-authored"),
             value: totalPRsAuthored,
             id: "prs_authored",
-            link: `https://github.com/search?q=${repoFilter}author%3A${username}&amp;type=pullrequests`,
+            link: `https://github.com/search?q=${repoFilter}author%3A${encodedUsername}&amp;type=pullrequests`,
         };
     }
     if (show.includes("prs_commented")) {
-        STATS.prs_commented = {
+        STATS["prs_commented"] = {
             icon: icons.comments,
             label: i18n.t("statcard.prs-commented"),
             value: totalPRsCommented,
             id: "prs_commented",
-            link: `https://github.com/search?q=${repoFilter}commenter%3A${username}+-author%3A${username}&amp;type=pullrequests`,
+            link: `https://github.com/search?q=${repoFilter}commenter%3A${encodedUsername}+-author%3A${encodedUsername}&amp;type=pullrequests`,
         };
     }
     if (show.includes("prs_reviewed")) {
-        STATS.prs_reviewed = {
+        STATS["prs_reviewed"] = {
             icon: icons.reviews,
             label: i18n.t("statcard.prs-reviewed"),
             value: totalPRsReviewed,
             id: "prs_reviewed",
-            link: `https://github.com/search?q=${repoFilter}reviewed-by%3A${username}+-author%3A${username}&amp;type=pullrequests`,
+            link: `https://github.com/search?q=${repoFilter}reviewed-by%3A${encodedUsername}+-author%3A${encodedUsername}&amp;type=pullrequests`,
         };
     }
     if (show.includes("issues_authored")) {
-        STATS.issues_authored = {
+        STATS["issues_authored"] = {
             icon: icons.issues,
             label: i18n.t("statcard.issues-authored"),
             value: totalIssuesAuthored,
             id: "issues_authored",
-            link: `https://github.com/search?q=${repoFilter}author%3A${username}&amp;type=issues`,
+            link: `https://github.com/search?q=${repoFilter}author%3A${encodedUsername}&amp;type=issues`,
         };
     }
     if (show.includes("issues_commented")) {
-        STATS.issues_commented = {
+        STATS["issues_commented"] = {
             icon: icons.discussions_started,
             label: i18n.t("statcard.issues-commented"),
             value: totalIssuesCommented,
             id: "issues_commented",
-            link: `https://github.com/search?q=${repoFilter}commenter%3A${username}+-author%3A${username}&amp;type=issues`,
+            link: `https://github.com/search?q=${repoFilter}commenter%3A${encodedUsername}+-author%3A${encodedUsername}&amp;type=issues`,
         };
     }
-    STATS.contribs = {
+    STATS["contribs"] = {
         icon: icons.contribs,
         label: i18n.t("statcard.contribs"),
         value: contributedTo,
         id: "contribs",
     };
-    // @ts-ignore
+    if (show.includes("all_time_contribs")) {
+        STATS["all_time_contribs"] = {
+            icon: icons.contribs,
+            label: i18n.t("statcard.all-time-contribs"),
+            value: allTimeContributedTo,
+            id: "all_time_contribs",
+        };
+    }
     const isLongLocale = locale ? LONG_LOCALES.includes(locale) : false;
     // check if all used labels are short
-    const longLabels = Object.keys(STATS)
-        .filter((key) => !hide.includes(key))
-        .filter((key) => STATS[key].label.length > 18).length > 0;
+    const longLabels = Object.entries(STATS)
+        .filter(([key]) => !hide.includes(key))
+        .some(([, stat]) => stat.label.length > 18);
     // filter out hidden stats defined by user & create the text nodes
-    const statItems = Object.keys(STATS)
-        .filter((key) => !hide.includes(key))
-        .map((key, index) => {
-        // @ts-ignore
-        const stats = STATS[key];
-        // create the text nodes, and pass index so that we can calculate the line spacing
-        return createTextNode({
-            icon: stats.icon,
-            label: stats.label,
-            value: stats.value,
-            id: stats.id,
-            unitSymbol: stats.unitSymbol,
-            index,
-            showIcons: show_icons,
-            shiftValuePos: 29.01 + (longLabels ? 50 : 0) + (isLongLocale ? 50 : 0),
-            bold: text_bold,
-            numberFormat: number_format,
-            numberPrecision: number_precision,
-            link: STATS[key].link,
-        });
-    });
+    const statItems = Object.entries(STATS)
+        .filter(([key]) => !hide.includes(key))
+        // pass index so that we can calculate the line spacing
+        .map(([, stat], index) => createTextNode({
+        icon: stat.icon,
+        label: stat.label,
+        value: stat.value,
+        id: stat.id,
+        unitSymbol: stat.unitSymbol,
+        index,
+        showIcons: show_icons,
+        shiftValuePos: 29.01 + (longLabels ? 50 : 0) + (isLongLocale ? 50 : 0),
+        bold: text_bold,
+        numberFormat: number_format,
+        numberPrecision: number_precision,
+        link: stat.link,
+    }));
     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 : statItems.length ? 150 : 180);
+    const height = Math.max(45 + (statItems.length + 1) * lheight, hide_rank ? 0 : statItems.length ? 150 : 180);
     // the lower the user's percentile the better
     const progress = 100 - rank.percentile;
-    const cssStyles = getStyles({
-        titleColor,
-        ringColor,
-        textColor,
-        iconColor,
-        show_icons,
-        progress,
-    });
     const calculateTextWidth = () => {
         return measureText(custom_title
             ? custom_title
@@ -433,7 +369,7 @@ const renderStatsCard = (stats, options = {}, username, repo = [], owner = []) =
         : statItems.length
             ? RANK_CARD_DEFAULT_WIDTH
             : RANK_ONLY_CARD_DEFAULT_WIDTH) + iconWidth;
-    let width = card_width
+    const width = card_width
         ? isNaN(card_width)
             ? Math.max(defaultCardWidth, minCardWidth)
             : card_width
@@ -446,17 +382,28 @@ const renderStatsCard = (stats, options = {}, username, repo = [], owner = []) =
         width,
         height,
         border_radius,
-        colors: {
-            titleColor,
-            textColor,
-            iconColor,
-            bgColor,
-            borderColor,
-        },
+        colors: { light: lightColors, dark: darkColors },
     });
     card.setHideBorder(hide_border);
     card.setHideTitle(hide_title);
-    card.setCSS(cssStyles);
+    card.setCSS({
+        light: getStyles({
+            ringColor,
+            textColor,
+            iconColor,
+            show_icons,
+            progress,
+        }),
+        dark: darkColors
+            ? getStyles({
+                ringColor: darkColors.ringColor,
+                textColor: darkColors.textColor,
+                iconColor: darkColors.iconColor,
+                show_icons,
+                progress,
+            })
+            : null,
+    });
     if (disable_animations) {
         card.disableAnimations();
     }
@@ -468,7 +415,7 @@ const renderStatsCard = (stats, options = {}, username, repo = [], owner = []) =
      * width < RANK_CARD_DEFAULT_WIDTH: The left and right padding will be enlarged
      *   equally from a certain minimum at RANK_CARD_MIN_WIDTH.
      *
-     * @returns {number} - Rank circle translation value.
+     * @returns Rank circle translation value.
      */
     const calculateRankXTranslation = () => {
         if (statItems.length) {
@@ -493,19 +440,17 @@ const renderStatsCard = (stats, options = {}, username, repo = [], owner = []) =
         <circle class="rank-circle-rim" cx="-10" cy="8" r="40" />
         <circle class="rank-circle" cx="-10" cy="8" r="40" />
         <g class="rank-text">
-          ${rankIcon(rank_icon, rank?.level, rank?.percentile)}
+          ${rankIcon(rank_icon, rank.level, rank.percentile)}
         </g>
       </g>`;
     // Accessibility Labels
-    const labels = Object.keys(STATS)
-        .filter((key) => !hide.includes(key))
-        .map((key) => {
-        // @ts-ignore
-        const stats = STATS[key];
+    const labels = Object.entries(STATS)
+        .filter(([key]) => !hide.includes(key))
+        .map(([key, stat]) => {
         if (key === "commits") {
-            return `${i18n.t("statcard.commits")} ${getTotalCommitsYearLabel(include_all_commits, commits_year, i18n)} : ${stats.value}`;
+            return `${i18n.t("statcard.commits")} ${getTotalCommitsYearLabel(include_all_commits, commits_year, i18n)} : ${stat.value}`;
         }
-        return `${stats.label}: ${stats.value}`;
+        return `${stat.label}: ${stat.value}`;
     })
         .join(", ");
     card.setAccessibilityLabel({
@@ -523,4 +468,4 @@ const renderStatsCard = (stats, options = {}, username, repo = [], owner = []) =
     </svg>
   `);
 };
-export { renderStatsCard, createTextNode };
+export { renderStatsCard };