react-cheminfo 0.11.0 → 0.13.0

package/src/about/ui/AboutPage.tsx

@@ -7,6 +7,7 @@ import type { AboutContent } from '../core/about.ts';
 import { resolveAbout } from '../core/about.ts';
 
 import { AboutCitations } from './AboutCitations.tsx';
+import { AboutProvidedBy } from './AboutProvidedBy.tsx';
 import { AboutSection } from './AboutSection.tsx';
 
 export interface AboutPageProps {
@@ -24,12 +25,20 @@ export interface AboutPageProps {
    * @default undefined
    */
   children?: ReactNode;
+  /**
+   * The site's own drawn lockup, for a site that has one. It stands in the
+   * hero in place of the mark and the written name, above the tagline, and
+   * must therefore carry the name itself. Anything else about the hero stays
+   * where a reader of our other About pages expects it.
+   * @default undefined
+   */
+  logo?: ReactNode;
 }
 
 /**
- * The About page of a site of the family: what the tool is, what a visitor can
- * do with it, what it is built on, how to cite it, and where to report a
- * problem — always in that order.
+ * The About page of a site of the family: what the tool is, who provides it,
+ * what a visitor can do with it, what it is built on, how to cite it, and where
+ * to report a problem — always in that order.
  *
  * The order is the point. A reader who has read one of our About pages knows
  * where the credits are on the other thirteen, and a site that writes its own
@@ -39,7 +48,7 @@ export interface AboutPageProps {
  * @throws {Error} When the record names a site or a credit that does not exist.
  */
 export function AboutPage(props: AboutPageProps): ReactElement {
-  const { content, className, children } = props;
+  const { content, className, children, logo } = props;
   const about = resolveAbout(content);
   const site = about.site;
 
@@ -50,17 +59,26 @@ export function AboutPage(props: AboutPageProps): ReactElement {
       }
       style={PAGE_STYLE}
     >
-      <header className="about-hero" style={HERO_STYLE}>
-        <SiteMark siteId={site.id} size={56} />
+      <header
+        className="about-hero"
+        style={logo === undefined ? HERO_STYLE : LOGO_HERO_STYLE}
+      >
+        {logo === undefined ? <SiteMark siteId={site.id} size={56} /> : null}
         <div>
-          <h1 style={NAME_STYLE}>
-            <Wordmark siteId={site.id} size={26} />
+          <h1 style={logo === undefined ? NAME_STYLE : LOGO_NAME_STYLE}>
+            {logo ?? <Wordmark siteId={site.id} size={26} />}
           </h1>
           <p style={TAGLINE_STYLE}>{site.tagline}</p>
           <p style={WHAT_STYLE}>{about.what}</p>
         </div>
       </header>
 
+      {about.people.length === 0 && about.providedBy.length === 0 ? null : (
+        <AboutSection title="Provided by" className="about-provided-by">
+          <AboutProvidedBy people={about.people} providers={about.providedBy} />
+        </AboutSection>
+      )}
+
       <AboutSection title="What you can do here" className="about-can">
         <ul style={CAN_LIST_STYLE}>
           {about.can.map((line) => (
@@ -153,6 +171,17 @@ const NAME_STYLE = {
   fontWeight: 700,
 } as const satisfies CSSProperties;
 
+// A drawn lockup already carries the mark and the name at its own proportions,
+// so the hero gives it the full width rather than a column beside a mark.
+const LOGO_HERO_STYLE = {
+  ...HERO_STYLE,
+  display: 'block',
+} as const satisfies CSSProperties;
+
+const LOGO_NAME_STYLE = {
+  margin: '0 0 4px',
+} as const satisfies CSSProperties;
+
 const TAGLINE_STYLE = {
   margin: '2px 0 8px',
   color: 'var(--text-muted)',

package/src/about/ui/AboutProvidedBy.tsx

@@ -0,0 +1,165 @@
+import type { CSSProperties, ReactElement } from 'react';
+
+import type { AboutPerson } from '../core/about.ts';
+import type { ProviderEntry } from '../core/providers.ts';
+
+export interface AboutProvidedByProps {
+  /** Who provides the site, in display order. */
+  people: readonly AboutPerson[];
+  /** The institutions providing the site, drawn as linked logos. */
+  providers: readonly ProviderEntry[];
+}
+
+/**
+ * The lockup of who provides a site: the institution's logo, then the names
+ * and the institution they work at, and under it what each one contributed
+ * when the site says so.
+ * @param props - See {@link AboutProvidedByProps}.
+ * @returns The lockup.
+ */
+export function AboutProvidedBy(props: AboutProvidedByProps): ReactElement {
+  const { people, providers } = props;
+  const withRoles = people.filter((person) => person.role !== undefined);
+
+  return (
+    <div>
+      <div style={LOCKUP_STYLE}>
+        {providers.map((provider) => (
+          <a
+            key={provider.id}
+            href={provider.href}
+            target="_blank"
+            rel="noopener noreferrer"
+            title={provider.fullName}
+            style={LOGO_TILE_STYLE}
+          >
+            <ProviderLogo provider={provider} />
+          </a>
+        ))}
+        <div
+          style={
+            providers.length === 0 ? IDENTITY_STYLE : DIVIDED_IDENTITY_STYLE
+          }
+        >
+          {people.length === 0 ? null : (
+            <p style={NAMES_STYLE}>{joinNames(people)}</p>
+          )}
+          {providers.map((provider) => (
+            <p key={provider.id} style={INSTITUTION_STYLE}>
+              {provider.fullName}
+              <span style={LOCATION_STYLE}>{provider.location}</span>
+            </p>
+          ))}
+        </div>
+      </div>
+      {withRoles.length === 0 ? null : (
+        <ul style={ROLES_STYLE}>
+          {withRoles.map((person) => (
+            <li key={person.name}>
+              <strong>{person.name}</strong> — {person.role}
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}
+
+function joinNames(people: readonly AboutPerson[]): string {
+  const names = people.map((person) => person.name);
+  if (names.length < 2) return names.join('');
+  return `${names.slice(0, -1).join(', ')} and ${names.at(-1)}`;
+}
+
+function ProviderLogo(props: { provider: ProviderEntry }): ReactElement {
+  const { provider } = props;
+  const label = `${provider.name} — ${provider.fullName}`;
+
+  switch (provider.id) {
+    case 'epfl':
+      return <EpflLogo label={label} />;
+    default:
+      return <span>{provider.name}</span>;
+  }
+}
+
+function EpflLogo(props: { label: string }): ReactElement {
+  return (
+    <svg
+      width={112}
+      height={(112 * 53) / 182.4}
+      viewBox="0 0 182.4 53"
+      role="img"
+      aria-label={props.label}
+      style={{ display: 'block' }}
+    >
+      {/* The institution's own colour, not a family token. */}
+      <g fill="red">
+        <polygon points="0 21.6 11.43 21.6 11.43 9.8 38.34 9.8 38.34 0 0 0 0 21.6" />
+        <polygon points="0 53 38.34 53 38.34 43.2 11.43 43.2 11.43 31.4 0 31.4 0 53" />
+        <rect x="11.43" y="21.6" width="24.61" height="9.8" />
+        <path d="M86,4.87a16.12,16.12,0,0,0-5.68-3.53A23.76,23.76,0,0,0,71.82,0H48.14V53H59.57V31.4H71.82a23.76,23.76,0,0,0,8.46-1.34A16.12,16.12,0,0,0,86,26.53a13.43,13.43,0,0,0,3.19-5,17.38,17.38,0,0,0,0-11.62A13.52,13.52,0,0,0,86,4.87ZM78,18.73a5.7,5.7,0,0,1-2.26,1.8,11.33,11.33,0,0,1-3.27.85,32,32,0,0,1-3.86.22H59.57V9.8h9.05a32,32,0,0,1,3.86.22,11,11,0,0,1,3.27.86A5.59,5.59,0,0,1,78,12.67a5,5,0,0,1,.86,3A5,5,0,0,1,78,18.73Z" />
+        <polygon points="155.47 43.2 155.47 0 144.04 0 144.04 53 182.38 53 182.38 43.2 155.47 43.2" />
+        <polygon points="97.42 21.6 108.85 21.6 108.85 9.8 135.76 9.8 135.76 0 97.42 0 97.42 21.6" />
+        <rect x="97.42" y="31.4" width="11.43" height="21.6" />
+        <rect x="108.85" y="21.6" width="24.61" height="9.8" />
+      </g>
+    </svg>
+  );
+}
+
+const LOCKUP_STYLE = {
+  display: 'flex',
+  flexWrap: 'wrap',
+  alignItems: 'center',
+  gap: 20,
+} as const satisfies CSSProperties;
+
+const LOGO_TILE_STYLE = {
+  flex: '0 0 auto',
+  display: 'inline-block',
+  // Logos are drawn for a white page, so they keep one on a dark theme.
+  background: 'white',
+  border: '1px solid var(--border)',
+  borderRadius: 'var(--radius)',
+  padding: '14px 18px',
+} as const satisfies CSSProperties;
+
+const IDENTITY_STYLE = {
+  flex: '1 1 14rem',
+  minWidth: 0,
+} as const satisfies CSSProperties;
+
+const DIVIDED_IDENTITY_STYLE = {
+  ...IDENTITY_STYLE,
+  borderLeft: '3px solid var(--accent)',
+  paddingLeft: 16,
+} as const satisfies CSSProperties;
+
+const NAMES_STYLE = {
+  margin: 0,
+  color: 'var(--text)',
+  fontSize: 19,
+  fontWeight: 600,
+  lineHeight: 1.3,
+} as const satisfies CSSProperties;
+
+const INSTITUTION_STYLE = {
+  margin: '4px 0 0',
+  color: 'var(--text-muted)',
+  fontSize: 14,
+  lineHeight: 1.4,
+} as const satisfies CSSProperties;
+
+const LOCATION_STYLE = {
+  display: 'block',
+  color: 'var(--text-faint)',
+  fontSize: 13,
+} as const satisfies CSSProperties;
+
+const ROLES_STYLE = {
+  margin: '16px 0 0',
+  paddingTop: 12,
+  paddingLeft: 20,
+  borderTop: '1px solid var(--border)',
+} as const satisfies CSSProperties;

package/src/about/ui/index.ts

@@ -2,5 +2,7 @@ export type { AboutCitationsProps } from './AboutCitations.tsx';
 export { AboutCitations } from './AboutCitations.tsx';
 export type { AboutPageProps } from './AboutPage.tsx';
 export { AboutPage } from './AboutPage.tsx';
+export type { AboutProvidedByProps } from './AboutProvidedBy.tsx';
+export { AboutProvidedBy } from './AboutProvidedBy.tsx';
 export type { AboutSectionProps } from './AboutSection.tsx';
 export { AboutSection } from './AboutSection.tsx';

package/src/capsule/ui/CapsuleFilter.tsx

@@ -2,6 +2,9 @@ import type { Intent } from '@blueprintjs/core';
 import { Tag } from '@blueprintjs/core';
 import type { CSSProperties, ReactElement } from 'react';
 
+import { formatInteger } from '../../format/core/numbers.ts';
+import { joinClassNames } from '../../shared/ui/joinClassNames.ts';
+
 /** One capsule of a {@link CapsuleFilter} row. */
 export interface CapsuleOption<TValue extends string = string> {
   /** What picking this capsule selects. */
@@ -26,14 +29,26 @@ export interface CapsuleOption<TValue extends string = string> {
   title?: string;
 }
 
-/** What a row of filter capsules needs. */
-export interface CapsuleFilterProps<TValue extends string = string> {
+/** The capsule drawn first in a multiple row, which clears the selection. */
+export interface CapsuleAllOption {
+  /** What the capsule reads, e.g. `all types`. */
+  label: string;
+  /**
+   * How many rows an empty selection keeps, written after the label.
+   * @default undefined — the capsule carries no count
+   */
+  count?: number;
+  /**
+   * What the pointer is told when it rests on the capsule.
+   * @default undefined
+   */
+  title?: string;
+}
+
+/** What every row of filter capsules needs, whatever it selects. */
+export interface CapsuleFilterBaseProps<TValue extends string = string> {
   /** One entry per capsule, in the order they are drawn. */
   options: ReadonlyArray<CapsuleOption<TValue>>;
-  /** The selected capsule. */
-  value: TValue;
-  /** Called with the newly picked value. */
-  onChange: (value: TValue) => void;
   /**
    * What the group is called, for a screen reader reaching the row.
    * @default 'Filter'
@@ -41,7 +56,7 @@ export interface CapsuleFilterProps<TValue extends string = string> {
   label?: string;
   /**
    * How a count is written.
-   * @default the number in the reader's locale, e.g. `1,204`
+   * @default formatInteger — grouped in thousands, e.g. `1,204`
    */
   formatCount?: (count: number) => string;
   /**
@@ -51,8 +66,45 @@ export interface CapsuleFilterProps<TValue extends string = string> {
   className?: string;
 }
 
+/** A row where exactly one capsule is selected. */
+export interface SingleCapsuleFilterProps<
+  TValue extends string = string,
+> extends CapsuleFilterBaseProps<TValue> {
+  /**
+   * Whether several capsules may be selected at once.
+   * @default false
+   */
+  multiple?: false;
+  /** The selected capsule. */
+  value: TValue;
+  /** Called with the newly picked value. */
+  onChange: (value: TValue) => void;
+}
+
+/** A row where any number of capsules is selected, none meaning all of them. */
+export interface MultipleCapsuleFilterProps<
+  TValue extends string = string,
+> extends CapsuleFilterBaseProps<TValue> {
+  /** Whether several capsules may be selected at once. */
+  multiple: true;
+  /** The selected capsules; an empty selection keeps every row. */
+  values: readonly TValue[];
+  /** Called with the new selection, in the order of `options`. */
+  onChange: (values: TValue[]) => void;
+  /**
+   * The capsule that clears the selection, filled while nothing is selected.
+   * @default undefined — the row has no reset capsule
+   */
+  allOption?: CapsuleAllOption;
+}
+
+/** What a row of filter capsules needs: one selected capsule, or several. */
+export type CapsuleFilterProps<TValue extends string = string> =
+  SingleCapsuleFilterProps<TValue> | MultipleCapsuleFilterProps<TValue>;
+
 /**
- * The row of capsules that narrows a table to one outcome.
+ * The row of capsules that narrows a table to one outcome, or with `multiple`
+ * to any set of them.
  *
  * Every capsule keeps its semantic colour whether or not it is selected, so
  * what a status means stays learnable — the filled shape is what encodes the
@@ -64,51 +116,124 @@ export interface CapsuleFilterProps<TValue extends string = string> {
 export function CapsuleFilter<TValue extends string = string>(
   props: CapsuleFilterProps<TValue>,
 ): ReactElement {
-  const {
-    options,
-    value,
-    onChange,
-    label = 'Filter',
-    formatCount = defaultFormatCount,
-    className,
-  } = props;
+  const capsules =
+    props.multiple === true ? multipleCapsules(props) : singleCapsules(props);
+  const { label = 'Filter', className } = props;
 
   return (
     <div
       role="group"
       aria-label={label}
-      className={
-        className === undefined
-          ? 'capsule-filter'
-          : `capsule-filter ${className}`
-      }
+      className={joinClassNames('capsule-filter', className)}
       style={ROW_STYLE}
     >
-      {options.map((option) => {
-        const selected = option.value === value;
-        return (
-          <Tag
-            key={option.value}
-            interactive
-            round
-            minimal={!selected}
-            intent={option.intent}
-            aria-pressed={selected}
-            htmlTitle={option.title}
-            onClick={() => onChange(option.value)}
-          >
-            {option.count === undefined
-              ? option.label
-              : `${option.label} (${formatCount(option.count)})`}
-          </Tag>
-        );
-      })}
+      {capsules}
     </div>
   );
 }
 
-function defaultFormatCount(count: number): string {
-  return count.toLocaleString();
+function singleCapsules<TValue extends string>(
+  props: SingleCapsuleFilterProps<TValue>,
+): ReactElement[] {
+  const { options, value, onChange, formatCount = formatInteger } = props;
+  const capsules: ReactElement[] = [];
+  for (const option of options) {
+    capsules.push(
+      <Capsule
+        key={`option:${option.value}`}
+        text={capsuleText(option, formatCount)}
+        selected={option.value === value}
+        intent={option.intent}
+        title={option.title}
+        onClick={() => onChange(option.value)}
+      />,
+    );
+  }
+  return capsules;
+}
+
+function multipleCapsules<TValue extends string>(
+  props: MultipleCapsuleFilterProps<TValue>,
+): ReactElement[] {
+  const {
+    options,
+    values,
+    onChange,
+    allOption,
+    formatCount = formatInteger,
+  } = props;
+  const capsules: ReactElement[] = [];
+  if (allOption !== undefined) {
+    capsules.push(
+      <Capsule
+        key="all"
+        text={capsuleText(allOption, formatCount)}
+        selected={values.length === 0}
+        title={allOption.title}
+        onClick={() => onChange([])}
+      />,
+    );
+  }
+  for (const option of options) {
+    capsules.push(
+      <Capsule
+        key={`option:${option.value}`}
+        text={capsuleText(option, formatCount)}
+        selected={values.includes(option.value)}
+        intent={option.intent}
+        title={option.title}
+        onClick={() => onChange(toggled(options, values, option.value))}
+      />,
+    );
+  }
+  return capsules;
+}
+
+interface CapsuleProps {
+  text: string;
+  selected: boolean;
+  intent?: Intent;
+  title: string | undefined;
+  onClick: () => void;
+}
+
+function Capsule(props: CapsuleProps): ReactElement {
+  const { text, selected, intent, title, onClick } = props;
+  return (
+    <Tag
+      interactive
+      round
+      minimal={!selected}
+      intent={intent}
+      aria-pressed={selected}
+      htmlTitle={title}
+      onClick={onClick}
+    >
+      {text}
+    </Tag>
+  );
+}
+
+function capsuleText(
+  capsule: { label: string; count?: number },
+  formatCount: (count: number) => string,
+): string {
+  return capsule.count === undefined
+    ? capsule.label
+    : `${capsule.label} (${formatCount(capsule.count)})`;
+}
+
+function toggled<TValue extends string>(
+  options: ReadonlyArray<CapsuleOption<TValue>>,
+  values: readonly TValue[],
+  flipped: TValue,
+): TValue[] {
+  const next: TValue[] = [];
+  for (const option of options) {
+    const kept = values.includes(option.value);
+    if (option.value === flipped ? !kept : kept) next.push(option.value);
+  }
+  return next;
 }
 
 const ROW_STYLE = {

package/src/capsule/ui/index.ts

@@ -1,2 +1,9 @@
-export type { CapsuleFilterProps, CapsuleOption } from './CapsuleFilter.tsx';
+export type {
+  CapsuleAllOption,
+  CapsuleFilterBaseProps,
+  CapsuleFilterProps,
+  CapsuleOption,
+  MultipleCapsuleFilterProps,
+  SingleCapsuleFilterProps,
+} from './CapsuleFilter.tsx';
 export { CapsuleFilter } from './CapsuleFilter.tsx';

package/src/chart/core/chartAxisPair.ts

@@ -0,0 +1,47 @@
+import { clamp } from '../../format/core/clamp.ts';
+
+/** The two axes a flat figure is drawn against, counting from zero. */
+interface ChartAxisPair {
+  /** The axis along x. */
+  x: number;
+  /** The axis along y. */
+  y: number;
+}
+
+/**
+ * An axis index brought inside the axes that exist.
+ *
+ * A fraction is floored and anything that is not a number lands on the first
+ * axis, so a saved index resolves to the same axis in every figure that reads
+ * it.
+ * @param index - The axis asked for.
+ * @param last - The highest axis there is.
+ * @returns A whole number between zero and `last`.
+ */
+export function clampAxisIndex(index: number, last: number): number {
+  return Math.floor(clamp(index, 0, last));
+}
+
+/**
+ * A pair of axes made safe against the axes that were actually computed.
+ *
+ * A saved pair outlives the data it was made on: reload with fewer columns and
+ * axis eight no longer exists. Both axes are pulled back inside what exists,
+ * and kept apart, because one axis drawn against itself is a diagonal line
+ * that says nothing at all.
+ * @param x - The axis asked for along x.
+ * @param y - The axis asked for along y.
+ * @param count - How many axes there are.
+ * @returns Two axes that exist, and differ whenever there are two to pick from.
+ */
+export function clampAxisPair(
+  x: number,
+  y: number,
+  count: number,
+): ChartAxisPair {
+  const last = Math.max(0, count - 1);
+  const along = clampAxisIndex(x, last);
+  const up = clampAxisIndex(y, last);
+  if (up !== along) return { x: along, y: up };
+  return { x: along, y: along > 0 ? along - 1 : Math.min(1, last) };
+}

package/src/chart/core/chartAxisScale.ts

@@ -1,4 +1,6 @@
+import { clamp } from '../../format/core/clamp.ts';
 import { formatDecimal } from '../../format/core/numbers.ts';
+import { formatSuperscript } from '../../format/core/superscript.ts';
 
 const DEFAULT_COUNT = 5;
 const MAXIMUM_COUNT = 100;
@@ -7,7 +9,6 @@ const NICE_PASSES = 8;
 const ZERO_WIDTH_SHARE = 0.05;
 const ZERO_WIDTH_FALLBACK = 1;
 const COMFORTABLE_LABEL = 6;
-const SUPERSCRIPT_DIGITS = '⁰¹²³⁴⁵⁶⁷⁸⁹';
 const STEP_10 = Math.sqrt(50);
 const STEP_5 = Math.sqrt(10);
 const STEP_2 = Math.SQRT2;
@@ -157,11 +158,7 @@ export function chartExponentSuffix(exponent: number): string {
   if (!Number.isFinite(exponent)) return '';
   const whole = Math.trunc(exponent);
   if (whole === 0) return '';
-  const sign = whole < 0 ? '⁻' : '';
-  const digits = Math.abs(whole)
-    .toString()
-    .replaceAll(/\d/gu, (digit) => SUPERSCRIPT_DIGITS.charAt(Number(digit)));
-  return ` (×10${sign}${digits})`;
+  return ` (×10${formatSuperscript(whole)})`;
 }
 
 type TickSpec = [first: number, last: number, increment: number];
@@ -231,8 +228,7 @@ function decimalExponent(value: number): number {
 }
 
 function tickCount(count: number): number {
-  if (!Number.isFinite(count)) return DEFAULT_COUNT;
-  return Math.min(MAXIMUM_COUNT, Math.max(1, Math.floor(count)));
+  return Math.floor(clamp(count, 1, MAXIMUM_COUNT, DEFAULT_COUNT));
 }
 
 function openDomain(min: number, max: number): [number, number] {

package/src/chart/core/chartBins.ts

@@ -1,4 +1,5 @@
 import type { ChartExtent } from './chartExtent.ts';
+import { chartGroupIndex } from './chartGroups.ts';
 import type { MatrixLike } from './matrix.ts';
 
 /** Counts over one shared set of bin edges, optionally split by series. */
@@ -87,10 +88,5 @@ function groupOf(
   row: number,
   seriesCount: number,
 ): number {
-  if (groups === null) return 0;
-  const raw = groups[row];
-  if (raw === undefined || !Number.isFinite(raw)) return -1;
-  const group = Math.trunc(raw);
-  if (group < 0 || group >= seriesCount) return -1;
-  return group;
+  return groups === null ? 0 : chartGroupIndex(groups, row, seriesCount);
 }

package/src/chart/core/chartGroups.ts

@@ -0,0 +1,24 @@
+/**
+ * Which group a row belongs to, read the one way every figure reads it.
+ *
+ * A group index arrives as whatever the caller had: an `Int32Array` padded
+ * with `-1`, a `Float64Array` padded with `NaN` for the rows nobody assigned,
+ * or a plain array of classes. Every layer that colours, counts or outlines by
+ * group asks the same question of it, so the answer lives here once — a map
+ * and a cloud that disagreed about which group row 12 is in would draw the
+ * same sample in two colours.
+ * @param groupOf - Which group each row belongs to, as an index into the groups.
+ * @param row - Which row to read.
+ * @param groups - How many groups there are.
+ * @returns The group, truncated to a whole index, or `-1` when the entry is missing, not finite, or outside `0..groups - 1`.
+ */
+export function chartGroupIndex(
+  groupOf: ArrayLike<number> | undefined,
+  row: number,
+  groups: number,
+): number {
+  const raw = groupOf?.[row];
+  if (raw === undefined || !Number.isFinite(raw)) return -1;
+  const group = Math.trunc(raw);
+  return group < 0 || group >= groups ? -1 : group;
+}

package/src/chart/core/chartLabels.ts

@@ -1,3 +1,5 @@
+import { formatDecimal, formatPercent } from '../../format/core/numbers.ts';
+
 /** How an axis title is written. */
 export interface ChartAxisTitleOptions {
   /**
@@ -39,7 +41,7 @@ export function chartAxisTitle(
 ): string {
   const { share, digits = DEFAULT_DIGITS } = options;
   if (share === undefined || !Number.isFinite(share)) return name;
-  return `${name} — ${chartShare(share, digits)} %`;
+  return `${name} — ${formatPercent(share, digits)}`;
 }
 
 /**
@@ -56,13 +58,7 @@ export function chartAxisTitle(
  */
 export function chartShare(share: number, digits = DEFAULT_DIGITS): string {
   if (!Number.isFinite(share)) return '';
-  return (share * 100).toFixed(readableDigits(digits));
+  return formatDecimal(share * 100, Number.isFinite(digits) ? digits : 1);
 }
 
 const DEFAULT_DIGITS = 1;
-const MOST_DIGITS = 20;
-
-function readableDigits(digits: number): number {
-  if (!Number.isFinite(digits)) return DEFAULT_DIGITS;
-  return Math.min(MOST_DIGITS, Math.max(0, Math.floor(digits)));
-}