@stats-forge/github-stats-forge-core 0.3.0 → 0.4.0

package/src/api/params.ts

@@ -5,8 +5,8 @@ import { COLOR_PARAM_KEYS, THEME_PARAM_KEYS, isValidColorInput } from '../common
 import { GITHUB_USERNAME_PATTERN } from '../common/constants.ts';
 import { getWidestRange, parseRangeDate } from '../common/date.ts';
 import { CardError } from '../common/error.ts';
+import { isLocaleAvailable } from '../common/localize.ts';
 import { parseArray, parseBoolean } from '../common/ops.ts';
-import { isLocaleAvailable } from '../translations.ts';
 
 /**
  * @file The api layer is the trust boundary:

package/src/api/pin.ts

@@ -1,6 +1,6 @@
 import * as z from 'zod/mini';
 
-import { renderRepoCard } from '../cards/repo.ts';
+import { renderRepoCard } from '../cards/repo/index.ts';
 import { fetchRepo } from '../fetchers/repo.ts';
 
 import { cardHandler } from './handler.ts';

package/src/api/stats.ts

@@ -1,6 +1,6 @@
 import * as z from 'zod/mini';
 
-import { renderStatsCard } from '../cards/stats.ts';
+import { renderStatsCard } from '../cards/stats/index.ts';
 import { OWNER_AFFILIATIONS } from '../common/constants.ts';
 import { fetchStats } from '../fetchers/stats.ts';
 

package/src/api/top-langs.ts

@@ -1,6 +1,6 @@
 import * as z from 'zod/mini';
 
-import { renderTopLanguages } from '../cards/top-languages.ts';
+import { renderTopLanguages } from '../cards/top-languages/index.ts';
 import { OWNER_AFFILIATIONS } from '../common/constants.ts';
 import { fetchTopLanguages } from '../fetchers/top-languages.ts';
 

package/src/api/wakatime.ts

@@ -1,6 +1,6 @@
 import * as z from 'zod/mini';
 
-import { renderWakatimeCard } from '../cards/wakatime.ts';
+import { renderWakatimeCard } from '../cards/wakatime/index.ts';
 import { fetchWakatimeStats } from '../fetchers/wakatime.ts';
 
 import { cardHandler } from './handler.ts';

package/src/cards/{contributed-to.ts → contributed-to/index.ts}

@@ -1,17 +1,18 @@
-import { CARD_ICON, CARD_WIDTH, FONT_SIZE, firefoxFontSize, font } from '../common/brand.ts';
-import { Card } from '../common/Card.ts';
-import { getLightDarkColors } from '../common/color.ts';
-import { formatYears } from '../common/date.ts';
-import { kFormatter } from '../common/fmt.ts';
-import { I18n } from '../common/I18n.ts';
-import { clampValue } from '../common/ops.ts';
-import { createProgressNode, measureText } from '../common/render.ts';
-import type { ContributedRepo, ContributedToData } from '../fetchers/types.ts';
-import type { Child } from '../markup/index.ts';
-import { atRule, el, rule } from '../markup/index.ts';
-import { contributedToCardLocales } from '../translations.ts';
+import { CARD_ICON, CARD_WIDTH, FONT_SIZE, firefoxFontSize, font } from '../../common/brand.ts';
+import { Card } from '../../common/Card.ts';
+import { getLightDarkColors } from '../../common/color.ts';
+import { formatYears } from '../../common/date.ts';
+import { kFormatter } from '../../common/fmt.ts';
+import type { Localized } from '../../common/localize.ts';
+import { localize } from '../../common/localize.ts';
+import { clampValue } from '../../common/ops.ts';
+import { createProgressNode, measureText } from '../../common/render.ts';
+import type { ContributedRepo, ContributedToData } from '../../fetchers/types.ts';
+import type { Child } from '../../markup/index.ts';
+import { atRule, el, rule } from '../../markup/index.ts';
+import type { CardOptions, CommonCardOptions } from '../options.ts';
 
-import type { CardOptions, CommonCardOptions } from './options.ts';
+import { contributedToCardLocales } from './locales.ts';
 
 const CARD_DEFAULT_WIDTH = CARD_WIDTH.wide;
 const MIN_CARD_WIDTH = 340;
@@ -53,9 +54,6 @@ interface ContributedToCardOptions extends CommonCardOptions {
   hide_years: boolean;
 }
 
-/** The card's own translation table, so `t` is checked against the keys it declares. */
-type ContributedToI18n = I18n<ReturnType<typeof contributedToCardLocales>>;
-
 /**
  * The title, naming the account unless that makes it too wide for the card.
  *
@@ -64,11 +62,13 @@ type ContributedToI18n = I18n<ReturnType<typeof contributedToCardLocales>>;
  *
  * @returns The default title, which `custom_title` still overrides.
  */
-const defaultTitleFor = (i18n: ContributedToI18n, contentWidth: number): string => {
-  const named = i18n.t('contributedtocard.title');
-  return measureText(named, TITLE_FONT_SIZE) <= contentWidth
-    ? named
-    : i18n.t('contributedtocard.title-unnamed');
+const defaultTitleFor = (
+  t: Localized<typeof contributedToCardLocales>,
+  login: string,
+  contentWidth: number,
+): string => {
+  const named = t.title({ login });
+  return measureText(named, TITLE_FONT_SIZE) <= contentWidth ? named : t.titleUnnamed();
 };
 
 /**
@@ -190,19 +190,21 @@ const createRepoRow = ({
  * @returns The footer text.
  */
 const footerText = ({
-  i18n,
+  t,
   shown,
   totalRepos,
   years,
 }: {
-  i18n: ContributedToI18n;
+  t: Localized<typeof contributedToCardLocales>;
   shown: number;
   totalRepos: number;
   /** Empty when the year marks are hidden, which is what puts the years on the card. */
   years: Array<number>;
 }): string => {
   const parts = [
-    i18n.t(shown < totalRepos ? 'contributedtocard.footer-top' : 'contributedtocard.footer-all'),
+    shown < totalRepos
+      ? t.footerTop({ shown, count: totalRepos })
+      : t.footerAll({ count: totalRepos }),
   ];
 
   const [firstYear] = years;
@@ -261,12 +263,9 @@ const renderContributedToCard = (
     }),
   );
 
-  const i18n = new I18n({
-    locale,
-    translations: contributedToCardLocales({ login, shown: repos.length, totalRepos }),
-  });
+  const t = localize(contributedToCardLocales, locale);
 
-  const footer = footerText({ i18n, shown: repos.length, totalRepos, years });
+  const footer = footerText({ t, shown: repos.length, totalRepos, years });
   const footerY = FIRST_ROW_Y + Math.max(repos.length, 1) * rowHeight + FOOTER_GAP;
   const height = BODY_OFFSET_Y + footerY + BOTTOM_PADDING;
 
@@ -274,7 +273,7 @@ const renderContributedToCard = (
 
   const card = new Card({
     customTitle: custom_title,
-    defaultTitle: defaultTitleFor(i18n, contentWidth - TITLE_ICON_COLUMN),
+    defaultTitle: defaultTitleFor(t, login, contentWidth - TITLE_ICON_COLUMN),
     titlePrefixIcon: CARD_ICON.contributedTo,
     width,
     height,
@@ -342,14 +341,18 @@ const renderContributedToCard = (
   card.setAccessibilityLabel({
     title: card.title,
     desc: [
-      ...repos.map((repo) => {
-        const inYears = hide_years
-          ? ''
-          : `, ${i18n.t('contributedtocard.years')}: ${repo.years.join(', ')}`;
-        return `${repo.nameWithOwner}: ${repo.contributions} ${i18n.t(
-          'contributedtocard.contributions',
-        )}${inYears}`;
-      }),
+      ...repos.map((repo) =>
+        hide_years
+          ? t.accessibilityRepo({
+              repo: repo.nameWithOwner,
+              count: repo.contributions,
+            })
+          : t.accessibilityRepoYears({
+              repo: repo.nameWithOwner,
+              count: repo.contributions,
+              years: repo.years.join(', '),
+            }),
+      ),
       footer,
     ].join('; '),
   });
@@ -362,7 +365,7 @@ const renderContributedToCard = (
         ? el(
             'text',
             { class: 'repo-name', 'data-testid': 'no-repos', x: 0, y: FIRST_ROW_Y },
-            i18n.t('contributedtocard.no-contributions'),
+            t.noContributions(),
           )
         : rows,
       el('text', { class: 'footer', 'data-testid': 'footer', x: 0, y: footerY }, footer),

package/src/cards/contributed-to/locales.ts

@@ -0,0 +1,41 @@
+import { defineLocales } from '../../common/localize.ts';
+
+/** The contributed-to card's labels in the locales they have been translated into. */
+const contributedToCardLocales = defineLocales({
+  title: {
+    en: 'Repositories {login} contributed to',
+  },
+  // Drawn instead of the title above when naming the account overruns the card.
+  titleUnnamed: {
+    en: 'Repositories contributed to',
+  },
+  noContributions: {
+    en: 'No contributions found',
+  },
+  footerAll: {
+    en: { one: '{count} repository', other: '{count} repositories' },
+  },
+  footerTop: {
+    en: {
+      one: 'top {shown} of {count} repository',
+      other: 'top {shown} of {count} repositories',
+    },
+  },
+  // One row of what an assistive reader gets in place of the card, whose inner text
+  // `role="img"` hides. The year marks carry information no other element does, so the
+  // row naming them is a wording of its own rather than a fragment appended to the other.
+  accessibilityRepo: {
+    en: {
+      one: '{repo}: {count} contribution',
+      other: '{repo}: {count} contributions',
+    },
+  },
+  accessibilityRepoYears: {
+    en: {
+      one: '{repo}: {count} contribution, years: {years}',
+      other: '{repo}: {count} contributions, years: {years}',
+    },
+  },
+});
+
+export { contributedToCardLocales };

package/src/cards/{gist.ts → gist/index.ts}

@@ -1,11 +1,11 @@
-import { CARD_ICON, CARD_WIDTH, FONT_SIZE, font } from '../common/brand.ts';
-import { Card } from '../common/Card.ts';
-import { getLightDarkColors } from '../common/color.ts';
-import { kFormatter } from '../common/fmt.ts';
-import { I18n } from '../common/I18n.ts';
-import { icons } from '../common/icons.ts';
-import { getLanguageColor } from '../common/languageColors.ts';
-import { parseEmojis } from '../common/ops.ts';
+import { CARD_ICON, CARD_WIDTH, FONT_SIZE, font } from '../../common/brand.ts';
+import { Card } from '../../common/Card.ts';
+import { getLightDarkColors } from '../../common/color.ts';
+import { kFormatter } from '../../common/fmt.ts';
+import { icons } from '../../common/icons.ts';
+import { getLanguageColor } from '../../common/languageColors.ts';
+import { localize } from '../../common/localize.ts';
+import { parseEmojis } from '../../common/ops.ts';
 import {
   countWrappedLines,
   wrapTextMultiline,
@@ -15,13 +15,13 @@ import {
   measureText,
   wrappedTextNode,
   wrappedTextStyles,
-} from '../common/render.ts';
-import type { GistData } from '../fetchers/types.ts';
-import type { Child } from '../markup/index.ts';
-import { el, rule } from '../markup/index.ts';
-import { gistCardLocales } from '../translations.ts';
+} from '../../common/render.ts';
+import type { GistData } from '../../fetchers/types.ts';
+import type { Child } from '../../markup/index.ts';
+import { el, rule } from '../../markup/index.ts';
+import type { CardOptions, CommonCardOptions } from '../options.ts';
 
-import type { CardOptions, CommonCardOptions } from './options.ts';
+import { gistCardLocales } from './locales.ts';
 
 const ICON_SIZE = 16;
 const CARD_DEFAULT_WIDTH = CARD_WIDTH.standard;
@@ -56,9 +56,9 @@ const renderGistCard = (gistData: GistData, options: CardOptions<GistCardOptions
 
   const { lightColors, darkColors } = getLightDarkColors({ ...options, theme });
 
-  const i18n = new I18n({ locale, translations: gistCardLocales });
+  const t = localize(gistCardLocales, locale);
 
-  const desc = parseEmojis(description || i18n.t('gistcard.no-description'));
+  const desc = parseEmojis(description || t.noDescription());
 
   let descriptionLines: number;
   let descriptionSvg: Child;
@@ -108,7 +108,7 @@ const renderGistCard = (gistData: GistData, options: CardOptions<GistCardOptions
   const svgStars = iconWithLabel(icons.star, totalStars, 'starsCount', ICON_SIZE);
   const svgForks = iconWithLabel(icons.fork, totalForks, 'forksCount', ICON_SIZE);
 
-  const languageName = language || i18n.t('gistcard.unspecified-language');
+  const languageName = language || t.unspecifiedLanguage();
   const languageColor = getLanguageColor(languageName);
 
   const svgLanguage = createLanguageNode(languageName, languageColor);
@@ -161,9 +161,12 @@ const renderGistCard = (gistData: GistData, options: CardOptions<GistCardOptions
   // shows has to be repeated here.
   card.setAccessibilityLabel({
     title: card.title,
-    desc: `${desc}. ${i18n.t('gistcard.language')}: ${languageName}, ${i18n.t(
-      'gistcard.stars',
-    )}: ${totalStars}, ${i18n.t('gistcard.forks')}: ${totalForks}`,
+    desc: t.accessibilityDesc({
+      desc,
+      language: languageName,
+      stars: totalStars,
+      forks: totalForks,
+    }),
   });
 
   return card.render([

package/src/cards/gist/locales.ts

@@ -0,0 +1,17 @@
+import { defineLocales } from '../../common/localize.ts';
+
+/** The gist card's labels in the locales they have been translated into. */
+const gistCardLocales = defineLocales({
+  noDescription: {
+    en: 'No description provided',
+  },
+  unspecifiedLanguage: {
+    en: 'Unspecified',
+  },
+  // What an assistive reader gets in place of the card, whose inner text `role="img"` hides.
+  accessibilityDesc: {
+    en: '{desc}. Language: {language}, Stars: {stars}, Forks: {forks}',
+  },
+});
+
+export { gistCardLocales };

package/src/cards/organization/index.ts

@@ -0,0 +1,358 @@
+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 type { CardColors } from '../../common/color.ts';
+import { CardError } from '../../common/error.ts';
+import { kFormatter } from '../../common/fmt.ts';
+import { icons } from '../../common/icons.ts';
+import { localize } from '../../common/localize.ts';
+import { parseEmojis } from '../../common/ops.ts';
+import {
+  NUMBER_FORMATS,
+  createTextNode,
+  flexLayout,
+  measureText,
+  wrapTextMultiline,
+} from '../../common/render.ts';
+import type { OrganizationData } from '../../fetchers/types.ts';
+import type { Child, CssChild } from '../../markup/index.ts';
+import { el, rule } from '../../markup/index.ts';
+import type { CardOptions, CommonCardOptions } from '../options.ts';
+
+import { orgCardLocales } from './locales.ts';
+
+const CARD_DEFAULT_WIDTH = CARD_WIDTH.standard;
+/** 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;
+/** `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;
+const DESCRIPTION_FONT_SIZE = FONT_SIZE.meta;
+const DESCRIPTION_LINE_HEIGHT_PX = 16;
+const DESCRIPTION_MAX_LINES = 2;
+/** Air between the description and the first stat row. */
+const DESCRIPTION_GAP = 8;
+
+/** Stats the card draws only when `show` names them. */
+const SHOW_STATS = ['releases', 'commits', 'members', 'top_language', 'created'] 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 = ['repos', 'stars', 'forks', 'watchers', 'open_issues', 'open_prs'] as const;
+type HideStat = (typeof HIDE_STATS)[number];
+
+type StatId = HideStat | ShowStat;
+
+interface OrgCardOptions extends CommonCardOptions {
+  locale: string;
+  hide: Array<string>;
+  show: Array<string>;
+  show_icons: boolean;
+  hide_title: boolean;
+  hide_description: boolean;
+  card_width: number;
+  line_height: number | string;
+  custom_title: string;
+  disable_animations: boolean;
+  number_format: string;
+  text_bold: boolean;
+}
+
+/** Meta data for a stat, used to build its text node and accessibility label. */
+interface StatItem {
+  icon: Child;
+  label: string;
+  value: number | string;
+  id: string;
+}
+
+/**
+ * @returns Card CSS styles.
+ */
+const getStyles = ({
+  textColor,
+  iconColor,
+  show_icons,
+}: {
+  textColor: string;
+  iconColor: string;
+  show_icons: boolean;
+}): Array<CssChild> => [
+  rule('.stat', {
+    font: font('regular', 'body'),
+    fill: textColor,
+    'font-variant-numeric': 'tabular-nums',
+  }),
+  rule('.description', { font: font('regular', 'meta'), fill: textColor, opacity: 0.9 }),
+  rule('.stagger', { opacity: 0, animation: 'fadeInAnimation 0.3s ease-in-out forwards' }),
+  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' }),
+];
+
+/**
+ * Renders the organization card.
+ *
+ * @returns The organization card SVG object.
+ */
+const renderCard = (
+  organization: OrganizationData,
+  options: CardOptions<OrgCardOptions> = {},
+): string => {
+  const {
+    name,
+    description,
+    createdAt,
+    publicRepos,
+    totalStars,
+    totalForks,
+    totalWatchers,
+    openIssues,
+    openPRs,
+    totalReleases,
+    totalCommits,
+    publicMembers,
+    topLanguage,
+    truncated,
+  } = organization;
+  const {
+    hide = [],
+    show = [],
+    show_icons = true,
+    hide_title = false,
+    hide_border = false,
+    hide_description = false,
+    card_width,
+    line_height = 25,
+    text_bold = true,
+    custom_title,
+    border_radius,
+    number_format = 'short',
+    locale,
+    disable_animations = false,
+  } = 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: ShowStat): boolean => show.includes(stat);
+
+  const apostrophe = /s$/i.test(name.trim()) ? '' : 's';
+  const t = localize(orgCardLocales, locale);
+
+  /**
+   * A total the walk may have stopped short of reads as a lower bound.
+   *
+   * @returns The value, as the row draws it.
+   */
+  const total = (value: number): number | string =>
+    truncated
+      ? `${number_format.toLowerCase() === 'long' ? String(value) : kFormatter(value)}+`
+      : value;
+
+  const STATS: Partial<Record<StatId, StatItem>> = {
+    repos: {
+      icon: icons.repo,
+      label: t.repos(),
+      value: publicRepos,
+      id: 'repos',
+    },
+    stars: {
+      icon: icons.star,
+      label: t.stars(),
+      value: total(totalStars),
+      id: 'stars',
+    },
+    forks: {
+      icon: icons.fork,
+      label: t.forks(),
+      value: total(totalForks),
+      id: 'forks',
+    },
+    watchers: {
+      icon: icons.watchers,
+      label: t.watchers(),
+      value: total(totalWatchers),
+      id: 'watchers',
+    },
+    open_issues: {
+      icon: icons.issues,
+      label: t.openIssues(),
+      value: total(openIssues),
+      id: 'open_issues',
+    },
+    open_prs: {
+      icon: icons.prs,
+      label: t.openPrs(),
+      value: total(openPRs),
+      id: 'open_prs',
+    },
+  };
+
+  if (shows('releases')) {
+    STATS['releases'] = {
+      icon: icons.tag,
+      label: t.releases(),
+      value: total(totalReleases),
+      id: 'releases',
+    };
+  }
+  if (shows('commits')) {
+    STATS['commits'] = {
+      icon: icons.commits,
+      label: t.commits(),
+      value: total(totalCommits),
+      id: 'commits',
+    };
+  }
+
+  if (shows('members')) {
+    STATS['members'] = {
+      icon: icons.people,
+      label: t.members(),
+      value: publicMembers,
+      id: 'members',
+    };
+  }
+  if (shows('top_language')) {
+    STATS['top_language'] = {
+      icon: icons.code,
+      label: t.topLanguage(),
+      value: topLanguage?.name ?? t.unspecifiedLanguage(),
+      id: 'top_language',
+    };
+  }
+  if (shows('created')) {
+    const year = new Date(createdAt).getUTCFullYear();
+    STATS['created'] = {
+      icon: icons.calendar,
+      label: t.created(),
+      value: Number.isNaN(year) ? '—' : String(year),
+      id: 'created',
+    };
+  }
+
+  const visibleStats = Object.entries(STATS).filter(([key]) => !hide.includes(key));
+
+  if (visibleStats.length === 0) {
+    throw new CardError('Could not render organization card.', {
+      code: 'invalid_param',
+      secondaryMessage: 'At least one stat is required.',
+    });
+  }
+
+  const width = card_width && !Number.isNaN(card_width) ? card_width : CARD_DEFAULT_WIDTH;
+
+  const desc = hide_description ? '' : parseEmojis(description || t.noDescription());
+  const descriptionLines = desc
+    ? wrapTextMultiline(
+        desc,
+        width - 2 * CARD_PADDING_X,
+        DESCRIPTION_FONT_SIZE,
+        DESCRIPTION_MAX_LINES,
+      )
+    : [];
+  const statsTop =
+    descriptionLines.length > 0
+      ? descriptionLines.length * DESCRIPTION_LINE_HEIGHT_PX + DESCRIPTION_GAP
+      : 0;
+
+  const height = 45 + (visibleStats.length + 1) * lheight + statsTop;
+
+  // A value ends at the card's inner edge — or right after the longest label,
+  // on a card too narrow for that.
+  const widestLabel = Math.max(
+    ...visibleStats.map(([, stat]) => measureText(`${stat.label}:`, FONT_SIZE.body)),
+  );
+  const valueAnchorX = Math.round(
+    Math.max(
+      width - CARD_PADDING_X - STAT_ROW_X,
+      (show_icons ? LABEL_X_OFFSET : 0) + widestLabel + LABEL_VALUE_GAP,
+    ),
+  );
+
+  const statItems = visibleStats.map(([, stat], index) =>
+    createTextNode({
+      icon: stat.icon,
+      label: stat.label,
+      value: stat.value,
+      id: stat.id,
+      index,
+      showIcons: show_icons,
+      shiftValuePos: 0,
+      valueAnchorX,
+      bold: text_bold,
+      labelBold: false,
+      numberFormat: number_format,
+    }),
+  );
+
+  const card = new Card({
+    customTitle: custom_title,
+    defaultTitle: t.title({ name, apostrophe }),
+    titlePrefixIcon: CARD_ICON.organization,
+    width,
+    height,
+    border_radius,
+    colors: { light: lightColors, dark: darkColors },
+  });
+
+  card.setHideBorder(hide_border);
+  card.setHideTitle(hide_title);
+  const cardStyles = ({ textColor, iconColor }: CardColors): Array<CssChild> =>
+    getStyles({ textColor, iconColor, show_icons });
+  card.setCSS({ light: cardStyles, dark: cardStyles });
+
+  if (disable_animations) {
+    card.disableAnimations();
+  }
+
+  // `role="img"` hides the inner text from assistive tech, so everything the card
+  // shows has to be repeated here.
+  card.setAccessibilityLabel({
+    title: card.title,
+    desc: [
+      desc && `${desc}.`,
+      visibleStats.map(([, stat]) => `${stat.label}: ${String(stat.value)}`).join(', '),
+    ]
+      .filter(Boolean)
+      .join(' '),
+  });
+
+  const descriptionSvg =
+    descriptionLines.length > 0 &&
+    el(
+      'text',
+      { class: 'description', 'data-testid': 'description', x: CARD_PADDING_X, y: -5 },
+      descriptionLines.map((line) => el('tspan', { dy: '1.2em', x: CARD_PADDING_X }, line)),
+    );
+
+  return card.render([
+    descriptionSvg,
+    el(
+      'g',
+      { transform: `translate(0, ${statsTop})` },
+      flexLayout({ items: statItems, gap: lheight, direction: 'column' }),
+    ),
+  ]);
+};
+
+/**
+ * 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 renderOrganizationCard = Object.assign(renderCard, {
+  OPTIONS: {
+    show: SHOW_STATS,
+    hide: HIDE_STATS,
+    number_format: NUMBER_FORMATS,
+  },
+});
+
+export { renderOrganizationCard };