@stats-forge/github-stats-forge-core 0.0.2 → 0.2.0

package/build/cards/stats.js

@@ -1,21 +1,52 @@
+import { CARD_ICON, CARD_WIDTH, FONT_SIZE, FONT_WEIGHT, firefoxFontSize, font, } from '../common/brand.js';
 import { Card } from '../common/Card.js';
 import { getLightDarkColors } from '../common/color.js';
+import { formatRange } from '../common/date.js';
 import { CardError } from '../common/error.js';
 import { I18n } from '../common/I18n.js';
 import { icons, rankIcon } from '../common/icons.js';
 import { buildSearchFilter, clampValue } from '../common/ops.js';
-import { createTextNode, flexLayout, measureText } from '../common/render.js';
+import { NUMBER_FORMATS, createTextNode, flexLayout, measureText } from '../common/render.js';
+import { atRule, cssComment, el, rule } from '../markup/index.js';
 import { statCardLocales, wakatimeCardLocales } from '../translations.js';
 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;
+const CARD_DEFAULT_WIDTH = CARD_WIDTH.compact;
+const RANK_CARD_DEFAULT_WIDTH = CARD_WIDTH.wide;
+const RANK_ONLY_CARD_DEFAULT_WIDTH = CARD_WIDTH.compact;
+const STAT_FONT_SIZE = FONT_SIZE.body;
+/** Padding the card keeps at its edges; matches `Card`'s own `paddingX`. */
+const CARD_PADDING_X = 25;
+/** How far a stat row is translated into the card; see `createTextNode`. */
+const STAT_ROW_X = 25;
+/** Room the rank ring needs at the right edge, so a value never runs into it. */
+const RANK_GUTTER = 120;
+/** The ring's own `cx`, which its group's translation has to make up for. */
+const RANK_CIRCLE_CX_OFFSET = 10;
+/** `createTextNode`'s own label offset, which it applies only when icons are shown. */
+const LABEL_X_OFFSET = 25;
+/** Smallest gap kept between the longest label and its value. */
+const LABEL_VALUE_GAP = 16;
 /** Rank indicators the card can draw; the api validates `rank_icon` against this. */
 const RANK_ICONS = ['default', 'github', 'percentile'];
+/** Stats the card draws only when `show` names them. */
+const SHOW_STATS = [
+    'contributions',
+    'prs_merged',
+    'prs_merged_percentage',
+    'reviews',
+    'discussions_started',
+    'discussions_answered',
+    'prs_authored',
+    'prs_commented',
+    'prs_reviewed',
+    'issues_authored',
+    'issues_commented',
+    'all_time_contribs',
+];
+/** Stats the card always draws, and so the ones `hide` has anything to remove. */
+const HIDE_STATS = ['stars', 'commits', 'prs', 'issues', 'contribs'];
 /** Long locales that need more space for text. Keep sorted alphabetically. */
-const LONG_LOCALES = [
+const LONG_LOCALES = new Set([
     'az',
     'bg',
     'cs',
@@ -42,134 +73,92 @@ const LONG_LOCALES = [
     'uk-ua',
     'uz',
     'zh-tw',
-];
+]);
 /**
  * Calculates progress along the boundary of the circle, i.e. its circumference.
  *
- * @param value The rank value to calculate progress for.
  * @returns Progress value.
  */
 const calculateCircleProgress = (value) => {
     const radius = 40;
-    const c = Math.PI * (radius * 2);
-    if (value < 0) {
-        value = 0;
-    }
-    if (value > 100) {
-        value = 100;
-    }
-    return ((100 - value) / 100) * c;
+    const circumference = Math.PI * (radius * 2);
+    const clamped = Math.min(Math.max(value, 0), 100);
+    return ((100 - clamped) / 100) * circumference;
 };
 /**
  * Retrieves the animation to display progress along the circumference of circle
  * from the beginning to the given value in a clockwise direction.
  *
- * @param props The props object.
- * @param props.progress The progress value to animate to.
  * @returns Progress animation css.
  */
-const getProgressAnimation = ({ progress }) => {
-    return `
-    @keyframes rankAnimation {
-      from {
-        stroke-dashoffset: ${calculateCircleProgress(0)};
-      }
-      to {
-        stroke-dashoffset: ${calculateCircleProgress(progress)};
-      }
-    }
-  `;
-};
+const getProgressAnimation = ({ progress }) => atRule('@keyframes rankAnimation', rule('from', { 'stroke-dashoffset': calculateCircleProgress(0) }), rule('to', { 'stroke-dashoffset': calculateCircleProgress(progress) }));
 /**
  * Retrieves CSS styles for a card.
  *
- * @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 = ({ textColor, iconColor, ringColor, show_icons, progress, }) => {
-    return `
-    .stat {
-      font: 600 14px 'Segoe UI', Ubuntu, "Helvetica Neue", Sans-Serif; fill: ${textColor};
-    }
-    @supports(-moz-appearance: auto) {
-      /* Selector detects Firefox */
-      .stat { font-size:12px; }
-    }
-    .stagger {
-      opacity: 0;
-      animation: fadeInAnimation 0.3s ease-in-out forwards;
-    }
-    .rank-text {
-      font: 800 24px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${textColor};
-      animation: scaleInAnimation 0.3s ease-in-out forwards;
-    }
-    .rank-percentile-header {
-      font-size: 14px;
-    }
-    .rank-percentile-text {
-      font-size: 16px;
-    }
-    
-    .not_bold { font-weight: 400 }
-    .bold { font-weight: 700 }
-    .icon {
-      fill: ${iconColor};
-      display: ${show_icons ? 'block' : 'none'};
-    }
-
-    .rank-circle-rim {
-      stroke: ${ringColor};
-      fill: none;
-      stroke-width: 6;
-      opacity: 0.2;
-    }
-    .rank-circle {
-      stroke: ${ringColor};
-      stroke-dasharray: 250;
-      fill: none;
-      stroke-width: 6;
-      stroke-linecap: round;
-      opacity: 0.8;
-      transform-origin: -10px 8px;
-      transform: rotate(-90deg);
-      animation: rankAnimation 1s forwards ease-in-out;
-    }
-    ${getProgressAnimation({ progress })}
-  `;
-};
+const getStyles = ({ textColor, iconColor, ringColor, show_icons, progress, }) => [
+    rule('.stat', {
+        font: font('regular', 'body'),
+        fill: textColor,
+        'font-variant-numeric': 'tabular-nums',
+    }),
+    firefoxFontSize(['.stat'], 'small'),
+    rule('.stagger', { opacity: 0, animation: 'fadeInAnimation 0.3s ease-in-out forwards' }),
+    rule('.rank-text', {
+        font: font('bold', 'display'),
+        fill: textColor,
+        animation: 'scaleInAnimation 0.3s ease-in-out forwards',
+    }),
+    rule('.rank-percentile-header', { 'font-size': `${String(FONT_SIZE.body)}px` }),
+    rule('.rank-percentile-text', { 'font-size': `${String(FONT_SIZE.lead)}px` }),
+    cssComment('Labels recede so that the values read first.'),
+    rule('.not_bold', { 'font-weight': FONT_WEIGHT.regular, opacity: 0.75 }),
+    rule('.bold', { 'font-weight': FONT_WEIGHT.semibold }),
+    rule('.icon', {
+        fill: iconColor,
+        opacity: 0.75,
+        display: show_icons ? 'block' : 'none',
+    }),
+    rule('.rank-circle-rim', {
+        stroke: ringColor,
+        fill: 'none',
+        'stroke-width': 4,
+        opacity: 0.15,
+    }),
+    rule('.rank-circle', {
+        stroke: ringColor,
+        'stroke-dasharray': 250,
+        fill: 'none',
+        'stroke-width': 4,
+        'stroke-linecap': 'round',
+        opacity: 1,
+        'transform-origin': '-10px 8px',
+        transform: 'rotate(-90deg)',
+        animation: 'rankAnimation 0.8s forwards ease-in-out',
+    }),
+    getProgressAnimation({ progress }),
+];
 /**
- * Return the label for commits according to the selected 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.
+ * @returns What the commit count covers, for the stat's label.
  */
-const getTotalCommitsYearLabel = (include_all_commits, commits_year, i18n) => include_all_commits
+const getTotalCommitsRangeLabel = (include_all_commits, commitsRange, i18n) => include_all_commits
     ? ''
-    : commits_year
-        ? ` (${commits_year})`
+    : commitsRange
+        ? ` (${formatRange(commitsRange)})`
         : ` (${i18n.t('wakatimecard.lastyear')})`;
 /**
  * Renders the stats card.
  *
- * @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, 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);
+const renderCard = (stats, options = {}, username, repo = [], owner = []) => {
+    const { name, totalStars, totalCommits, commitsRange, 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, 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 = Number.parseInt(String(line_height), 10);
     const { lightColors, darkColors } = getLightDarkColors(options);
+    // Typed against the exported list, so a stat drawn here cannot be missing from it.
+    const shows = (stat) => show.includes(stat);
     const apostrophe = /s$/i.test(name.trim()) ? '' : 's';
     const i18n = new I18n({
         locale,
@@ -179,14 +168,15 @@ const renderStatsCard = (stats, options = {}, username, repo = [], owner = []) =
         },
     });
     // Meta data for creating text nodes with createTextNode function
-    const STATS = {};
-    STATS['stars'] = {
-        icon: icons.star,
-        label: i18n.t('statcard.totalstars'),
-        value: totalStars,
-        id: 'stars',
+    const STATS = {
+        stars: {
+            icon: icons.star,
+            label: i18n.t('statcard.totalstars'),
+            value: totalStars,
+            id: 'stars',
+        },
     };
-    if (show.includes('contributions')) {
+    if (shows('contributions')) {
         STATS['contributions'] = {
             icon: icons.contributions,
             label: i18n.t('statcard.contributions'),
@@ -196,7 +186,7 @@ const renderStatsCard = (stats, options = {}, username, repo = [], owner = []) =
     }
     STATS['commits'] = {
         icon: icons.commits,
-        label: `${i18n.t('statcard.commits')}${getTotalCommitsYearLabel(include_all_commits, commits_year, i18n)}`,
+        label: `${i18n.t('statcard.commits')}${getTotalCommitsRangeLabel(include_all_commits, commitsRange, i18n)}`,
         value: totalCommits,
         id: 'commits',
     };
@@ -206,7 +196,7 @@ const renderStatsCard = (stats, options = {}, username, repo = [], owner = []) =
         value: totalPRs,
         id: 'prs',
     };
-    if (show.includes('prs_merged')) {
+    if (shows('prs_merged')) {
         STATS['prs_merged'] = {
             icon: icons.prs_merged,
             label: i18n.t('statcard.prs-merged'),
@@ -214,7 +204,7 @@ const renderStatsCard = (stats, options = {}, username, repo = [], owner = []) =
             id: 'prs_merged',
         };
     }
-    if (show.includes('prs_merged_percentage')) {
+    if (shows('prs_merged_percentage')) {
         STATS['prs_merged_percentage'] = {
             icon: icons.prs_merged_percentage,
             label: i18n.t('statcard.prs-merged-percentage'),
@@ -225,7 +215,7 @@ const renderStatsCard = (stats, options = {}, username, repo = [], owner = []) =
             unitSymbol: '%',
         };
     }
-    if (show.includes('reviews')) {
+    if (shows('reviews')) {
         STATS['reviews'] = {
             icon: icons.reviews,
             label: i18n.t('statcard.reviews'),
@@ -239,7 +229,7 @@ const renderStatsCard = (stats, options = {}, username, repo = [], owner = []) =
         value: totalIssues,
         id: 'issues',
     };
-    if (show.includes('discussions_started')) {
+    if (shows('discussions_started')) {
         STATS['discussions_started'] = {
             icon: icons.discussions_started,
             label: i18n.t('statcard.discussions-started'),
@@ -247,7 +237,7 @@ const renderStatsCard = (stats, options = {}, username, repo = [], owner = []) =
             id: 'discussions_started',
         };
     }
-    if (show.includes('discussions_answered')) {
+    if (shows('discussions_answered')) {
         STATS['discussions_answered'] = {
             icon: icons.discussions_answered,
             label: i18n.t('statcard.discussions-answered'),
@@ -257,7 +247,7 @@ const renderStatsCard = (stats, options = {}, username, repo = [], owner = []) =
     }
     const repoFilter = encodeURIComponent(buildSearchFilter(repo, owner));
     const encodedUsername = encodeURIComponent(username ?? '');
-    if (show.includes('prs_authored')) {
+    if (shows('prs_authored')) {
         STATS['prs_authored'] = {
             icon: icons.prs,
             label: i18n.t('statcard.prs-authored'),
@@ -266,7 +256,7 @@ const renderStatsCard = (stats, options = {}, username, repo = [], owner = []) =
             link: `https://github.com/search?q=${repoFilter}author%3A${encodedUsername}&amp;type=pullrequests`,
         };
     }
-    if (show.includes('prs_commented')) {
+    if (shows('prs_commented')) {
         STATS['prs_commented'] = {
             icon: icons.comments,
             label: i18n.t('statcard.prs-commented'),
@@ -275,7 +265,7 @@ const renderStatsCard = (stats, options = {}, username, repo = [], owner = []) =
             link: `https://github.com/search?q=${repoFilter}commenter%3A${encodedUsername}+-author%3A${encodedUsername}&amp;type=pullrequests`,
         };
     }
-    if (show.includes('prs_reviewed')) {
+    if (shows('prs_reviewed')) {
         STATS['prs_reviewed'] = {
             icon: icons.reviews,
             label: i18n.t('statcard.prs-reviewed'),
@@ -284,7 +274,7 @@ const renderStatsCard = (stats, options = {}, username, repo = [], owner = []) =
             link: `https://github.com/search?q=${repoFilter}reviewed-by%3A${encodedUsername}+-author%3A${encodedUsername}&amp;type=pullrequests`,
         };
     }
-    if (show.includes('issues_authored')) {
+    if (shows('issues_authored')) {
         STATS['issues_authored'] = {
             icon: icons.issues,
             label: i18n.t('statcard.issues-authored'),
@@ -293,7 +283,7 @@ const renderStatsCard = (stats, options = {}, username, repo = [], owner = []) =
             link: `https://github.com/search?q=${repoFilter}author%3A${encodedUsername}&amp;type=issues`,
         };
     }
-    if (show.includes('issues_commented')) {
+    if (shows('issues_commented')) {
         STATS['issues_commented'] = {
             icon: icons.discussions_started,
             label: i18n.t('statcard.issues-commented'),
@@ -303,29 +293,59 @@ const renderStatsCard = (stats, options = {}, username, repo = [], owner = []) =
         };
     }
     STATS['contribs'] = {
-        icon: icons.contribs,
+        icon: icons.repo,
         label: i18n.t('statcard.contribs'),
         value: contributedTo,
         id: 'contribs',
     };
-    if (show.includes('all_time_contribs')) {
+    if (shows('all_time_contribs')) {
         STATS['all_time_contribs'] = {
-            icon: icons.contribs,
+            icon: icons.repo,
             label: i18n.t('statcard.all-time-contribs'),
             value: allTimeContributedTo,
             id: 'all_time_contribs',
         };
     }
-    const isLongLocale = locale ? LONG_LOCALES.includes(locale) : false;
+    const isLongLocale = locale ? LONG_LOCALES.has(locale) : false;
+    // filter out hidden stats defined by user
+    const visibleStats = Object.entries(STATS).filter(([key]) => !hide.includes(key));
+    if (visibleStats.length === 0 && hide_rank) {
+        throw new CardError('Could not render stats card.', {
+            code: 'invalid_param',
+            secondaryMessage: 'Either stats or rank are required.',
+        });
+    }
     // check if all used labels are short
-    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.entries(STATS)
-        .filter(([key]) => !hide.includes(key))
-        // pass index so that we can calculate the line spacing
-        .map(([, stat], index) => createTextNode({
+    const longLabels = visibleStats.some(([, stat]) => stat.label.length > 18);
+    // The rank ring sets the floor: 150 beside the stats, 180 when it is the whole card.
+    const height = Math.max(45 + (visibleStats.length + 1) * lheight, hide_rank ? 0 : visibleStats.length > 0 ? 150 : 180);
+    // the lower the user's percentile the better
+    const progress = 100 - rank.percentile;
+    const calculateTextWidth = () => measureText(custom_title ||
+        (visibleStats.length > 0 ? i18n.t('statcard.title') : i18n.t('statcard.ranktitle')));
+    const iconWidth = show_icons && visibleStats.length > 0 ? 16 + /* padding */ 1 : 0;
+    // The icons ride inside the step's own slack, so a default card lands on the width grid;
+    // only the minimum, which has no slack, still has to make room for them.
+    const defaultCardWidth = hide_rank
+        ? CARD_DEFAULT_WIDTH
+        : visibleStats.length > 0
+            ? RANK_CARD_DEFAULT_WIDTH
+            : RANK_ONLY_CARD_DEFAULT_WIDTH;
+    // Only a card sized by its own title can outgrow its step: the ranked layouts are fixed,
+    // so their step is also their floor.
+    const fittedWidth = hide_rank
+        ? Math.max(defaultCardWidth, clampValue(50 /* padding */ + calculateTextWidth() * 2, CARD_MIN_WIDTH, Infinity) +
+            iconWidth)
+        : defaultCardWidth;
+    const width = card_width ? (Number.isNaN(card_width) ? fittedWidth : card_width) : fittedWidth;
+    // A value ends at the card's inner edge, clear of the rank ring — or right after
+    // the longest label, on a card too narrow for that.
+    const widestLabel = visibleStats.length > 0
+        ? Math.max(...visibleStats.map(([, stat]) => measureText(`${stat.label}:`, STAT_FONT_SIZE)))
+        : 0;
+    const valueAnchorX = Math.round(Math.max(width - CARD_PADDING_X - STAT_ROW_X - (hide_rank ? 0 : RANK_GUTTER), (show_icons ? LABEL_X_OFFSET : 0) + widestLabel + LABEL_VALUE_GAP));
+    // pass index so that we can calculate the line spacing
+    const statItems = visibleStats.map(([, stat], index) => createTextNode({
         icon: stat.icon,
         label: stat.label,
         value: stat.value,
@@ -334,53 +354,17 @@ const renderStatsCard = (stats, options = {}, username, repo = [], owner = []) =
         index,
         showIcons: show_icons,
         shiftValuePos: 29.01 + (longLabels ? 50 : 0) + (isLongLocale ? 50 : 0),
+        valueAnchorX,
         bold: text_bold,
+        labelBold: false,
         numberFormat: number_format,
         numberPrecision: number_precision,
         link: stat.link,
     }));
-    if (statItems.length === 0 && hide_rank) {
-        throw new CardError('Could not render stats card.', {
-            code: 'invalid_param',
-            secondaryMessage: '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`
-    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 calculateTextWidth = () => {
-        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 && statItems.length ? 16 + /* padding */ 1 : 0;
-    const minCardWidth = (hide_rank
-        ? clampValue(50 /* padding */ + calculateTextWidth() * 2, CARD_MIN_WIDTH, Infinity)
-        : statItems.length
-            ? RANK_CARD_MIN_WIDTH
-            : RANK_ONLY_CARD_MIN_WIDTH) + iconWidth;
-    const defaultCardWidth = (hide_rank
-        ? CARD_DEFAULT_WIDTH
-        : statItems.length
-            ? RANK_CARD_DEFAULT_WIDTH
-            : RANK_ONLY_CARD_DEFAULT_WIDTH) + iconWidth;
-    const width = card_width
-        ? isNaN(card_width)
-            ? Math.max(defaultCardWidth, minCardWidth)
-            : card_width
-        : Math.max(defaultCardWidth, minCardWidth);
     const card = new Card({
         customTitle: custom_title,
-        defaultTitle: statItems.length ? i18n.t('statcard.title') : i18n.t('statcard.ranktitle'),
+        defaultTitle: visibleStats.length > 0 ? i18n.t('statcard.title') : i18n.t('statcard.ranktitle'),
+        titlePrefixIcon: CARD_ICON.stats,
         width,
         height,
         border_radius,
@@ -394,64 +378,49 @@ const renderStatsCard = (stats, options = {}, username, repo = [], owner = []) =
         card.disableAnimations();
     }
     /**
-     * Calculates the right rank circle translation values such that the rank circle
-     * keeps respecting the following padding:
-     *
-     * width > RANK_CARD_DEFAULT_WIDTH: The default right padding of 70 px will be used.
-     * width < RANK_CARD_DEFAULT_WIDTH: The left and right padding will be enlarged
-     *   equally from a certain minimum at RANK_CARD_MIN_WIDTH.
+     * The ring sits centred in the same gutter the values are kept clear of, so the gap
+     * between them holds at every width; a rank-only card has no values, so it centres.
      *
      * @returns Rank circle translation value.
      */
-    const calculateRankXTranslation = () => {
-        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 width / 2 + 20 - 10;
-        }
-    };
+    const calculateRankXTranslation = () => visibleStats.length > 0
+        ? width - CARD_PADDING_X - RANK_GUTTER / 2 + RANK_CIRCLE_CX_OFFSET
+        : width / 2 + 20 - 10;
     // Conditionally rendered elements
-    const rankCircle = hide_rank
-        ? ''
-        : `<g data-testid="rank-circle"
-          transform="translate(${calculateRankXTranslation()}, ${height / 2 - 50})">
-        <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)}
-        </g>
-      </g>`;
+    const rankCircle = !hide_rank &&
+        el('g', {
+            'data-testid': 'rank-circle',
+            transform: `translate(${calculateRankXTranslation()}, ${height / 2 - 50})`,
+        }, el('circle', { class: 'rank-circle-rim', cx: -RANK_CIRCLE_CX_OFFSET, cy: 8, r: 40 }), el('circle', { class: 'rank-circle', cx: -RANK_CIRCLE_CX_OFFSET, cy: 8, r: 40 }), el('g', { class: 'rank-text' }, rankIcon(rank_icon, rank.level, rank.percentile)));
     // Accessibility Labels
-    const labels = Object.entries(STATS)
-        .filter(([key]) => !hide.includes(key))
+    const labels = visibleStats
         .map(([key, stat]) => {
         if (key === 'commits') {
-            return `${i18n.t('statcard.commits')} ${getTotalCommitsYearLabel(include_all_commits, commits_year, i18n)} : ${stat.value}`;
+            return `${i18n.t('statcard.commits')} ${getTotalCommitsRangeLabel(include_all_commits, commitsRange, i18n)} : ${stat.value}`;
         }
         return `${stat.label}: ${stat.value}`;
     })
         .join(', ');
     card.setAccessibilityLabel({
-        title: `${card.title}, Rank: ${rank.level}`,
+        title: `${card.title}, ${i18n.t('statcard.rank')}: ${rank.level}`,
         desc: labels,
     });
-    return card.render(`
-    ${rankCircle}
-    <svg x="0" y="0">
-      ${flexLayout({
-        items: statItems,
-        gap: lheight,
-        direction: 'column',
-    }).join('')}
-    </svg>
-  `);
+    return card.render([
+        rankCircle,
+        el('svg', { x: 0, y: 0 }, flexLayout({ items: statItems, gap: lheight, direction: 'column' })),
+    ]);
 };
-export { RANK_ICONS, renderStatsCard };
+/**
+ * The card, and the values each of its options accepts, keyed by the option's own name.
+ * They ride on the renderer so a list cannot be found without what draws it;
+ * the api handler forwards them onto its own export, which is what a UI reads.
+ */
+const renderStatsCard = Object.assign(renderCard, {
+    OPTIONS: {
+        rank_icon: RANK_ICONS,
+        show: SHOW_STATS,
+        hide: HIDE_STATS,
+        number_format: NUMBER_FORMATS,
+    },
+});
+export { renderStatsCard };