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

package/src/cards/repo.ts

@@ -1,3 +1,4 @@
+import { CARD_ICON, CARD_WIDTH, FONT_SIZE, FONT_WEIGHT, font } from '../common/brand.ts';
 import { Card } from '../common/Card.ts';
 import { getLightDarkColors } from '../common/color.ts';
 import { kFormatter } from '../common/fmt.ts';
@@ -5,6 +6,7 @@ import { I18n } from '../common/I18n.ts';
 import { icons } from '../common/icons.ts';
 import { buildSearchFilter, clampValue, parseEmojis } from '../common/ops.ts';
 import {
+  NUMBER_FORMATS,
   countWrappedLines,
   wrapTextMultiline,
   createLanguageNode,
@@ -23,12 +25,22 @@ import { repoCardLocales } from '../translations.ts';
 import type { CardOptions, CommonCardOptions } from './options.ts';
 
 const ICON_SIZE = 16;
-const CARD_DEFAULT_WIDTH = 400;
+const CARD_DEFAULT_WIDTH = CARD_WIDTH.standard;
 const X_OFFSET = 25;
-const DESCRIPTION_FONT_SIZE = 13;
+const DESCRIPTION_FONT_SIZE = FONT_SIZE.meta;
 const DESCRIPTION_LINE_HEIGHT_PX = 16;
 const DESCRIPTION_MAX_LINES = 3;
 
+/** Stats the card draws only when `show` names them. */
+const REPO_SHOW_STATS = [
+  'prs_authored',
+  'prs_commented',
+  'prs_reviewed',
+  'issues_authored',
+  'issues_commented',
+] as const;
+type RepoShowStat = (typeof REPO_SHOW_STATS)[number];
+
 interface RepoCardOptions extends CommonCardOptions {
   locale: string;
   show_owner: boolean;
@@ -85,10 +97,7 @@ const getBadgeSVG = (label: string, xOffset = 0): MarkupElement => {
  *
  * @returns Repository card SVG object.
  */
-const renderRepoCard = (
-  repo: RepositoryData,
-  options: CardOptions<RepoCardOptions> = {},
-): string => {
+const renderCard = (repo: RepositoryData, options: CardOptions<RepoCardOptions> = {}): string => {
   const {
     name,
     nameWithOwner,
@@ -133,10 +142,13 @@ const renderRepoCard = (
     translations: repoCardLocales,
   });
 
+  // Typed against the exported list, so a stat drawn here cannot be missing from it.
+  const shows = (stat: RepoShowStat): boolean => show.includes(stat);
+
   const repoFilter = encodeURIComponent(buildSearchFilter([nameWithOwner], []));
   const encodedUsername = encodeURIComponent(username ?? '');
   const STATS: Record<string, RepoStatItem> = {};
-  if (show.includes('prs_authored')) {
+  if (shows('prs_authored')) {
     STATS['prs_authored'] = {
       icon: icons.prs,
       label: i18n.t('repocard.prs-authored'),
@@ -145,7 +157,7 @@ const renderRepoCard = (
       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('repocard.prs-commented'),
@@ -154,7 +166,7 @@ const renderRepoCard = (
       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('repocard.prs-reviewed'),
@@ -163,7 +175,7 @@ const renderRepoCard = (
       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('repocard.issues-authored'),
@@ -172,7 +184,7 @@ const renderRepoCard = (
       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('repocard.issues-commented'),
@@ -203,9 +215,9 @@ const renderRepoCard = (
   const extraLHeight = Number.parseInt(String(line_height), 10);
   const lineHeight = 10;
   const header = show_owner ? nameWithOwner : name;
-  const langName = primaryLanguage?.name || 'Unspecified';
+  const langName = primaryLanguage?.name || i18n.t('repocard.unspecified-language');
   const langColor = primaryLanguage?.color || '#333';
-  const desc = parseEmojis(description || 'No description provided');
+  const desc = parseEmojis(description || i18n.t('repocard.no-description'));
   const descriptionBoxWidth = card_width - 2 * X_OFFSET;
 
   let descriptionLinesCount: number;
@@ -294,7 +306,7 @@ const renderRepoCard = (
 
   const card = new Card({
     defaultTitle: header.length > 35 ? `${header.slice(0, 35)}...` : header,
-    titlePrefixIcon: icons.contribs,
+    titlePrefixIcon: CARD_ICON.repo,
     width: card_width,
     height,
     border_radius,
@@ -307,21 +319,21 @@ const renderRepoCard = (
   card.setCSS({
     light: ({ textColor, iconColor }) => [
       rule('.description', {
-        font: `400 ${DESCRIPTION_FONT_SIZE}px 'Segoe UI', Ubuntu, Sans-Serif`,
+        font: font('regular', 'meta'),
         fill: textColor,
         ...(browser_rendering ? wrappedTextStyles(textColor) : {}),
       }),
-      rule('.gray', { font: "400 12px 'Segoe UI', Ubuntu, Sans-Serif", fill: textColor }),
-      rule('.badge', { font: "600 11px 'Segoe UI', Ubuntu, Sans-Serif" }),
+      rule('.gray', { font: font('regular', 'small'), fill: textColor }),
+      rule('.badge', { font: font('semibold', 'micro') }),
       rule('.badge rect', { opacity: 0.2, stroke: textColor }),
       rule('.badge text', { fill: textColor }),
-      rule('.stat', { font: "400 12px 'Segoe UI', Ubuntu, Sans-Serif", fill: textColor }),
+      rule('.stat', { font: font('regular', 'small'), fill: textColor }),
       rule('.stagger', {
         opacity: 0,
         animation: 'fadeInAnimation 0.3s ease-in-out forwards',
       }),
-      rule('.not_bold', { 'font-weight': 400 }),
-      rule('.bold', { 'font-weight': 700 }),
+      rule('.not_bold', { 'font-weight': FONT_WEIGHT.regular }),
+      rule('.bold', { 'font-weight': FONT_WEIGHT.semibold }),
       rule('.icon', { fill: iconColor, display: 'block' }),
     ],
     dark: ({ textColor, iconColor }) => [
@@ -363,4 +375,16 @@ const renderRepoCard = (
   ]);
 };
 
+/**
+ * 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 renderRepoCard = Object.assign(renderCard, {
+  OPTIONS: {
+    show: REPO_SHOW_STATS,
+    number_format: NUMBER_FORMATS,
+  },
+});
+
 export { renderRepoCard };

package/src/cards/stats.ts

@@ -1,11 +1,21 @@
+import {
+  CARD_ICON,
+  CARD_WIDTH,
+  FONT_SIZE,
+  FONT_WEIGHT,
+  firefoxFontSize,
+  font,
+} from '../common/brand.ts';
 import { Card } from '../common/Card.ts';
 import { getLightDarkColors } from '../common/color.ts';
 import type { CardColors } from '../common/color.ts';
+import type { GitHubDateRange } from '../common/date.ts';
+import { formatRange } from '../common/date.ts';
 import { CardError } from '../common/error.ts';
 import { I18n } from '../common/I18n.ts';
 import { icons, rankIcon } from '../common/icons.ts';
 import { buildSearchFilter, clampValue } from '../common/ops.ts';
-import { createTextNode, flexLayout, measureText } from '../common/render.ts';
+import { NUMBER_FORMATS, createTextNode, flexLayout, measureText } from '../common/render.ts';
 import type { StatsData } from '../fetchers/types.ts';
 import type { Child, CssChild } from '../markup/index.ts';
 import { atRule, cssComment, el, rule } from '../markup/index.ts';
@@ -14,19 +24,19 @@ import { statCardLocales, wakatimeCardLocales } from '../translations.ts';
 import type { CardOptions, CommonCardOptions } from './options.ts';
 
 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 = 14;
+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. */
@@ -36,6 +46,30 @@ const LABEL_VALUE_GAP = 16;
 const RANK_ICONS = ['default', 'github', 'percentile'] as const;
 type RankIcon = (typeof RANK_ICONS)[number];
 
+/** 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',
+] as const;
+type ShowStat = (typeof SHOW_STATS)[number];
+
+/** Stats the card always draws, and so the ones `hide` has anything to remove. */
+const HIDE_STATS = ['stars', 'commits', 'prs', 'issues', 'contribs'] as const;
+type HideStat = (typeof HIDE_STATS)[number];
+
+/** Every stat the card can draw: the ones it always draws, plus the ones `show` adds. */
+type StatId = HideStat | ShowStat;
+
 interface StatCardOptions extends CommonCardOptions {
   locale: string;
   hide: Array<string>;
@@ -44,7 +78,6 @@ interface StatCardOptions extends CommonCardOptions {
   card_width: number;
   hide_rank: boolean;
   include_all_commits: boolean;
-  commits_year: number;
   line_height: number | string;
   custom_title: string;
   disable_animations: boolean;
@@ -141,26 +174,22 @@ const getStyles = ({
   progress: number;
 }): Array<CssChild> => [
   rule('.stat', {
-    font: `400 ${STAT_FONT_SIZE}px 'Segoe UI', Ubuntu, "Helvetica Neue", Sans-Serif`,
+    font: font('regular', 'body'),
     fill: textColor,
     'font-variant-numeric': 'tabular-nums',
   }),
-  atRule(
-    '@supports(-moz-appearance: auto)',
-    cssComment('Selector detects Firefox'),
-    rule('.stat', { 'font-size': '12px' }),
-  ),
+  firefoxFontSize(['.stat'], 'small'),
   rule('.stagger', { opacity: 0, animation: 'fadeInAnimation 0.3s ease-in-out forwards' }),
   rule('.rank-text', {
-    font: "700 22px 'Segoe UI', Ubuntu, Sans-Serif",
+    font: font('bold', 'display'),
     fill: textColor,
     animation: 'scaleInAnimation 0.3s ease-in-out forwards',
   }),
-  rule('.rank-percentile-header', { 'font-size': '14px' }),
-  rule('.rank-percentile-text', { 'font-size': '16px' }),
+  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': 400, opacity: 0.75 }),
-  rule('.bold', { 'font-weight': 600 }),
+  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,
@@ -187,19 +216,17 @@ const getStyles = ({
 ];
 
 /**
- * Return the label for commits according to the selected options
- *
- * @returns The label corresponding to the options.
+ * @returns What the commit count covers, for the stat's label.
  */
-const getTotalCommitsYearLabel = (
+const getTotalCommitsRangeLabel = (
   include_all_commits: boolean,
-  commits_year: number | undefined,
+  commitsRange: GitHubDateRange | undefined,
   i18n: I18n,
 ): string =>
   include_all_commits
     ? ''
-    : commits_year
-      ? ` (${commits_year})`
+    : commitsRange
+      ? ` (${formatRange(commitsRange)})`
       : ` (${i18n.t('wakatimecard.lastyear')})`;
 
 /**
@@ -207,7 +234,7 @@ const getTotalCommitsYearLabel = (
  *
  * @returns The stats card SVG object.
  */
-const renderStatsCard = (
+const renderCard = (
   stats: StatsData,
   options: CardOptions<StatCardOptions> = {},
   username?: string,
@@ -218,6 +245,7 @@ const renderStatsCard = (
     name,
     totalStars,
     totalCommits,
+    commitsRange,
     totalIssues,
     totalPRs,
     totalPRsMerged,
@@ -243,7 +271,6 @@ const renderStatsCard = (
     card_width,
     hide_rank = false,
     include_all_commits = false,
-    commits_year,
     line_height = 25,
     text_bold = true,
     custom_title,
@@ -260,6 +287,9 @@ const renderStatsCard = (
 
   const { lightColors, darkColors } = getLightDarkColors(options);
 
+  // Typed against the exported list, so a stat drawn here cannot be missing from it.
+  const shows = (stat: ShowStat): boolean => show.includes(stat);
+
   const apostrophe = /s$/i.test(name.trim()) ? '' : 's';
   const i18n = new I18n({
     locale,
@@ -270,7 +300,7 @@ const renderStatsCard = (
   });
 
   // Meta data for creating text nodes with createTextNode function
-  const STATS: Record<string, StatItem> = {
+  const STATS: Partial<Record<StatId, StatItem>> = {
     stars: {
       icon: icons.star,
       label: i18n.t('statcard.totalstars'),
@@ -279,7 +309,7 @@ const renderStatsCard = (
     },
   };
 
-  if (show.includes('contributions')) {
+  if (shows('contributions')) {
     STATS['contributions'] = {
       icon: icons.contributions,
       label: i18n.t('statcard.contributions'),
@@ -290,9 +320,9 @@ const renderStatsCard = (
 
   STATS['commits'] = {
     icon: icons.commits,
-    label: `${i18n.t('statcard.commits')}${getTotalCommitsYearLabel(
+    label: `${i18n.t('statcard.commits')}${getTotalCommitsRangeLabel(
       include_all_commits,
-      commits_year,
+      commitsRange,
       i18n,
     )}`,
     value: totalCommits,
@@ -305,7 +335,7 @@ const renderStatsCard = (
     id: 'prs',
   };
 
-  if (show.includes('prs_merged')) {
+  if (shows('prs_merged')) {
     STATS['prs_merged'] = {
       icon: icons.prs_merged,
       label: i18n.t('statcard.prs-merged'),
@@ -314,7 +344,7 @@ const renderStatsCard = (
     };
   }
 
-  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'),
@@ -328,7 +358,7 @@ const renderStatsCard = (
     };
   }
 
-  if (show.includes('reviews')) {
+  if (shows('reviews')) {
     STATS['reviews'] = {
       icon: icons.reviews,
       label: i18n.t('statcard.reviews'),
@@ -344,7 +374,7 @@ const renderStatsCard = (
     id: 'issues',
   };
 
-  if (show.includes('discussions_started')) {
+  if (shows('discussions_started')) {
     STATS['discussions_started'] = {
       icon: icons.discussions_started,
       label: i18n.t('statcard.discussions-started'),
@@ -352,7 +382,7 @@ const renderStatsCard = (
       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'),
@@ -363,7 +393,7 @@ const renderStatsCard = (
 
   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'),
@@ -372,7 +402,7 @@ const renderStatsCard = (
       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'),
@@ -381,7 +411,7 @@ const renderStatsCard = (
       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'),
@@ -390,7 +420,7 @@ const renderStatsCard = (
       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'),
@@ -399,7 +429,7 @@ const renderStatsCard = (
       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'),
@@ -410,15 +440,15 @@ const renderStatsCard = (
   }
 
   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',
@@ -455,29 +485,24 @@ const renderStatsCard = (
         (visibleStats.length > 0 ? 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 && visibleStats.length > 0 ? 16 + /* padding */ 1 : 0;
-  const minCardWidth =
-    (hide_rank
-      ? clampValue(50 /* padding */ + calculateTextWidth() * 2, CARD_MIN_WIDTH, Infinity)
-      : visibleStats.length > 0
-        ? RANK_CARD_MIN_WIDTH
-        : RANK_ONLY_CARD_MIN_WIDTH) + iconWidth;
-  const defaultCardWidth =
-    (hide_rank
-      ? CARD_DEFAULT_WIDTH
-      : visibleStats.length > 0
-        ? RANK_CARD_DEFAULT_WIDTH
-        : RANK_ONLY_CARD_DEFAULT_WIDTH) + iconWidth;
-  const width = card_width
-    ? Number.isNaN(card_width)
-      ? Math.max(defaultCardWidth, minCardWidth)
-      : card_width
-    : Math.max(defaultCardWidth, minCardWidth);
+  // 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.
@@ -515,6 +540,7 @@ const renderStatsCard = (
   const card = new Card({
     customTitle: custom_title,
     defaultTitle: visibleStats.length > 0 ? i18n.t('statcard.title') : i18n.t('statcard.ranktitle'),
+    titlePrefixIcon: CARD_ICON.stats,
     width,
     height,
     border_radius,
@@ -533,26 +559,15 @@ const renderStatsCard = (
   }
 
   /**
-   * 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 = (): number => {
-    if (visibleStats.length > 0) {
-      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;
-      }
-      return minXTranslation + (width - minCardWidth) / 2;
-    }
-    return width / 2 + 20 - 10;
-  };
+  const calculateRankXTranslation = (): number =>
+    visibleStats.length > 0
+      ? width - CARD_PADDING_X - RANK_GUTTER / 2 + RANK_CIRCLE_CX_OFFSET
+      : width / 2 + 20 - 10;
 
   // Conditionally rendered elements
   const rankCircle =
@@ -563,8 +578,8 @@ const renderStatsCard = (
         'data-testid': 'rank-circle',
         transform: `translate(${calculateRankXTranslation()}, ${height / 2 - 50})`,
       },
-      el('circle', { class: 'rank-circle-rim', cx: -10, cy: 8, r: 40 }),
-      el('circle', { class: 'rank-circle', cx: -10, cy: 8, r: 40 }),
+      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)),
     );
 
@@ -572,9 +587,9 @@ const renderStatsCard = (
   const labels = visibleStats
     .map(([key, stat]) => {
       if (key === 'commits') {
-        return `${i18n.t('statcard.commits')} ${getTotalCommitsYearLabel(
+        return `${i18n.t('statcard.commits')} ${getTotalCommitsRangeLabel(
           include_all_commits,
-          commits_year,
+          commitsRange,
           i18n,
         )} : ${stat.value}`;
       }
@@ -583,7 +598,7 @@ const renderStatsCard = (
     .join(', ');
 
   card.setAccessibilityLabel({
-    title: `${card.title}, Rank: ${rank.level}`,
+    title: `${card.title}, ${i18n.t('statcard.rank')}: ${rank.level}`,
     desc: labels,
   });
 
@@ -593,4 +608,18 @@ const renderStatsCard = (
   ]);
 };
 
-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 };