@squadbase/vantage 0.6.2-dev1.48b34e1 → 0.6.2-dev1.51e401a

package/registry/ui/status-badge.tsx

@@ -12,50 +12,214 @@
  * `gray` are still accepted and map to positive / negative / warning / info /
  * neutral. Unknown statuses and tones fall back to `neutral`.
  *
- * The default label comes from `STATUS_VOCABULARY` (one table of status, 日本語ラベル and tone), so the same
- * state is worded the same everywhere (Tracker legends import it too):
+ * The default label comes from `STATUS_VOCABULARY` (one table of status, label and tone; the label follows the
+ * page's language, `<html lang>`), so the same state is worded the same everywhere (Tracker legends import it too):
  *
- * | status | ラベル | 色調 |
+ * | status | ラベル（ja / en） | 色調 |
  * |---|---|---|
- * | `success` | 正常 | positive |
- * | `partial` | 一部失敗 | warning |
- * | `failed` | 失敗 | negative |
- * | `delayed` | 遅延 | warning |
- * | `running` | 実行中 | info |
- * | `stopped` | 停止中 | neutral |
- * | `active` / `inactive` | 有効 / 無効 | positive / neutral |
- * | `warning` / `error` / `pending` | 警告 / エラー / 保留中 | warning / negative / info |
+ * | `success` | 正常 / Healthy | positive |
+ * | `partial` | 一部失敗 / Partially failed | warning |
+ * | `failed` | 失敗 / Failed | negative |
+ * | `delayed` | 遅延 / Delayed | warning |
+ * | `running` | 実行中 / Running | info |
+ * | `stopped` | 停止中 / Stopped | neutral |
+ * | `active` / `inactive` | 有効 / 無効、Active / Inactive | positive / neutral |
+ * | `warning` / `error` / `pending` | 警告 / エラー / 保留中、Warning / Error / Pending | warning / negative / info |
  */
 import { forwardRef } from "react"
 
 import { cn } from "@squadbase/vantage/ui"
 import { Badge } from "@squadbase/vantage/ui"
+import { useSyncExternalStore } from "react"
+
+/* ---------- inlined from @squadbase/squadkit registry/lib/locale.ts (internal to @squadbase/vantage) ---------- */
+
+/**
+ * The display language of the parts and the defaults that follow it.
+ *
+ * The language comes from `<html lang>`: a tag starting with `ja` reads Japanese, anything else English.
+ * Without a usable `lang` (missing, invalid, or no `document` — SSR, Node) the locale is `FALLBACK_LOCALE`
+ * (`en-US`). A `locale` passed explicitly (a prop, an argument) always wins.
+ *
+ * Parts read the locale through `useLocale` (`hooks/use-locale`) and pass it down; the pure helpers here
+ * and in `format` / `comparison` / `chart-*` take it as an argument and fall back to `documentLocale()`.
+ */
+
+/** The language of the built-in wording: Japanese or English. */
+type UiLanguage = "ja" | "en"
+
+/** The locale used when `<html lang>` gives none (and on the server). */
+const FALLBACK_LOCALE = "en-US"
+
+/** `"ja"` when `locale` starts with `ja` (`ja`, `ja-JP`), else `"en"`. A missing locale is `"en"`. */
+function uiLanguage(locale: string | null | undefined): UiLanguage {
+  return typeof locale === "string" && locale.trim().toLowerCase().startsWith("ja") ? "ja" : "en"
+}
+
+/** A BCP 47 tag in its canonical form (`en-gb` → `en-GB`), or `FALLBACK_LOCALE` when it is empty or invalid. */
+function normalizeLocale(tag: string | null | undefined): string {
+  const value = tag?.trim()
+  if (!value) return FALLBACK_LOCALE
+  try {
+    return Intl.getCanonicalLocales(value)[0] ?? FALLBACK_LOCALE
+  } catch {
+    return FALLBACK_LOCALE
+  }
+}
+
+/**
+ * The locale of the page: `document.documentElement.lang`, canonicalized. `FALLBACK_LOCALE` when it is empty or
+ * invalid, or there is no `document`. Parts read it through `useLocale`, never while rendering.
+ */
+function documentLocale(): string {
+  if (typeof document === "undefined") return FALLBACK_LOCALE
+  return normalizeLocale(document.documentElement?.getAttribute("lang"))
+}
+
+/** `locale` when given, else the page's locale (`documentLocale()`). */
+function resolveLocale(locale?: string | null): string {
+  return locale || documentLocale()
+}
+
+/** Picks the wording table of the locale's language. */
+function pickLocale<T>(table: { ja: T; en: T }, locale?: string | null): T {
+  return table[uiLanguage(resolveLocale(locale))]
+}
+
+/** The currency `format="currency"` uses without a `currency`: JPY for Japanese, USD otherwise. */
+function defaultCurrency(locale?: string | null): string {
+  return uiLanguage(resolveLocale(locale)) === "ja" ? "JPY" : "USD"
+}
+
+/** The month a fiscal year starts in (1–12) when none is given: April for Japanese, January otherwise. */
+function defaultFiscalYearStartMonth(locale?: string | null): number {
+  return uiLanguage(resolveLocale(locale)) === "ja" ? 4 : 1
+}
+
+/** A day of the week, 0 = Sunday … 6 = Saturday (the `Date#getDay` / date-fns numbering). */
+type WeekDay = 0 | 1 | 2 | 3 | 4 | 5 | 6
+
+/** Locales whose week starts on Sunday when the runtime has no week data. */
+const SUNDAY_FIRST = new Set(["en", "en-US", "en-CA"])
+
+/**
+ * The first day of the week: Monday for Japanese; otherwise the locale's convention from `Intl.Locale`
+ * (`en-US` Sunday, `en-GB` Monday). Without week data in the runtime: Sunday for `en` / `en-US` / `en-CA`,
+ * Monday for the rest.
+ */
+function weekStartsOn(locale?: string | null): WeekDay {
+  const tag = normalizeLocale(resolveLocale(locale))
+  if (uiLanguage(tag) === "ja") return 1
+  try {
+    const info = new Intl.Locale(tag) as Intl.Locale & {
+      getWeekInfo?: () => { firstDay: number }
+      weekInfo?: { firstDay: number }
+    }
+    const firstDay = info.getWeekInfo?.().firstDay ?? info.weekInfo?.firstDay
+    if (typeof firstDay === "number" && firstDay >= 1 && firstDay <= 7) return (firstDay % 7) as WeekDay
+  } catch {
+    // Fall through to the table below.
+  }
+  return SUNDAY_FIRST.has(tag) ? 0 : 1
+}
+
+/* ---------- inlined from @squadbase/squadkit registry/hooks/use-locale.ts (internal to @squadbase/vantage) ---------- */
+
+const listeners = new Set<() => void>()
+let observer: MutationObserver | null = null
+
+/** One observer on `<html lang>` for every subscribed part. */
+function subscribe(onChange: () => void): () => void {
+  if (typeof document === "undefined" || typeof MutationObserver === "undefined") return () => {}
+  listeners.add(onChange)
+  if (!observer) {
+    observer = new MutationObserver(() => {
+      for (const listener of [...listeners]) listener()
+    })
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ["lang"] })
+  }
+  return () => {
+    listeners.delete(onChange)
+    if (listeners.size === 0 && observer) {
+      observer.disconnect()
+      observer = null
+    }
+  }
+}
+
+const serverLocale = () => FALLBACK_LOCALE
+
+/**
+ * The page's locale (`<html lang>`), following changes made while the page runs. On the server and during
+ * hydration it is `FALLBACK_LOCALE` (`en-US`), so the markup matches; it switches right after.
+ */
+function useDocumentLocale(): string {
+  return useSyncExternalStore(subscribe, documentLocale, serverLocale)
+}
+
+/** The locale a part renders in: its `locale` prop when given, else the page's (`useDocumentLocale`). */
+function useLocale(locale?: string | null): string {
+  const page = useDocumentLocale()
+  return locale || page
+}
+
+/* ---------- end of inlined code ---------- */
 
 type StatusTone = "positive" | "negative" | "warning" | "info" | "neutral"
 
+const STATUS_LABELS = {
+  ja: {
+    success: "正常",
+    partial: "一部失敗",
+    failed: "失敗",
+    delayed: "遅延",
+    running: "実行中",
+    stopped: "停止中",
+    active: "有効",
+    inactive: "無効",
+    warning: "警告",
+    error: "エラー",
+    pending: "保留中",
+  },
+  en: {
+    success: "Healthy",
+    partial: "Partially failed",
+    failed: "Failed",
+    delayed: "Delayed",
+    running: "Running",
+    stopped: "Stopped",
+    active: "Active",
+    inactive: "Inactive",
+    warning: "Warning",
+    error: "Error",
+    pending: "Pending",
+  },
+} as const
+
 /**
- * 状態の語彙の正本: status → 日本語ラベルと色調。StatusBadge の既定の表示と、Tracker の凡例など
- * 同じ状態を語る他の場所が、同じ語を使うためにここから参照する。
+ * 状態の語彙の正本: status → ラベルと色調。StatusBadge の既定の表示と、Tracker の凡例など
+ * 同じ状態を語る他の場所が、同じ語を使うためにここから参照する。`label` は英語（フォールバック）で、
+ * ページの言語に合わせた語は `statusLabel(status, locale)` で引く。
  */
 export const STATUS_VOCABULARY = {
-  success: { label: "正常", tone: "positive" },
-  partial: { label: "一部失敗", tone: "warning" },
-  failed: { label: "失敗", tone: "negative" },
-  delayed: { label: "遅延", tone: "warning" },
-  running: { label: "実行中", tone: "info" },
-  stopped: { label: "停止中", tone: "neutral" },
-  active: { label: "有効", tone: "positive" },
-  inactive: { label: "無効", tone: "neutral" },
-  warning: { label: "警告", tone: "warning" },
-  error: { label: "エラー", tone: "negative" },
-  pending: { label: "保留中", tone: "info" },
+  success: { label: STATUS_LABELS.en.success, tone: "positive" },
+  partial: { label: STATUS_LABELS.en.partial, tone: "warning" },
+  failed: { label: STATUS_LABELS.en.failed, tone: "negative" },
+  delayed: { label: STATUS_LABELS.en.delayed, tone: "warning" },
+  running: { label: STATUS_LABELS.en.running, tone: "info" },
+  stopped: { label: STATUS_LABELS.en.stopped, tone: "neutral" },
+  active: { label: STATUS_LABELS.en.active, tone: "positive" },
+  inactive: { label: STATUS_LABELS.en.inactive, tone: "neutral" },
+  warning: { label: STATUS_LABELS.en.warning, tone: "warning" },
+  error: { label: STATUS_LABELS.en.error, tone: "negative" },
+  pending: { label: STATUS_LABELS.en.pending, tone: "info" },
 } as const satisfies Record<string, { label: string; tone: StatusTone }>
 
 export type StatusKey = keyof typeof STATUS_VOCABULARY
 
-/** 状態の日本語ラベル。語彙に無い status は渡された文字列のまま返す。 */
-export function statusLabel(status: string): string {
-  return Object.hasOwn(STATUS_VOCABULARY, status) ? STATUS_VOCABULARY[status as StatusKey].label : status
+/** 状態のラベル（`locale` の言語。既定はページのロケール）。語彙に無い status は渡された文字列のまま返す。 */
+export function statusLabel(status: string, locale?: string): string {
+  return Object.hasOwn(STATUS_VOCABULARY, status) ? STATUS_LABELS[uiLanguage(resolveLocale(locale))][status as StatusKey] : status
 }
 
 const defaultColorMap: Record<string, string> = Object.fromEntries(
@@ -101,9 +265,10 @@ export const StatusBadge = forwardRef<HTMLSpanElement, StatusBadgeProps>(functio
   { status, label, colorMap, className },
   ref,
 ) {
+  const locale = useLocale()
   const mergedColorMap = { ...defaultColorMap, ...colorMap }
   const style = toneStyles[resolveTone(mergedColorMap[status])]
-  const displayLabel = label ?? statusLabel(status)
+  const displayLabel = label ?? statusLabel(status, locale)
 
   return (
     <Badge

package/registry/ui/tracker.tsx

@@ -16,9 +16,100 @@ import { forwardRef, useCallback, useRef, type ComponentProps } from "react"
 import { cn } from "@squadbase/vantage/ui"
 import { Tooltip, TooltipContent, TooltipTrigger } from "@squadbase/vantage/ui"
 import type { ChartColor } from "@squadbase/vantage/components"
-import { DEFAULT_LOCALE, EMPTY_VALUE, formatValue, toValueFormatter, type ValueFormat } from "@squadbase/vantage/components"
+import { EMPTY_VALUE, formatValue, toValueFormatter, type ValueFormat } from "@squadbase/vantage/components"
 import type { ChartColors, ChartSeriesColor, ChartTone, ValueFormatter } from "@squadbase/vantage/components"
 
+/* ---------- inlined from @squadbase/squadkit registry/lib/locale.ts (internal to @squadbase/vantage) ---------- */
+
+/**
+ * The display language of the parts and the defaults that follow it.
+ *
+ * The language comes from `<html lang>`: a tag starting with `ja` reads Japanese, anything else English.
+ * Without a usable `lang` (missing, invalid, or no `document` — SSR, Node) the locale is `FALLBACK_LOCALE`
+ * (`en-US`). A `locale` passed explicitly (a prop, an argument) always wins.
+ *
+ * Parts read the locale through `useLocale` (`hooks/use-locale`) and pass it down; the pure helpers here
+ * and in `format` / `comparison` / `chart-*` take it as an argument and fall back to `documentLocale()`.
+ */
+
+/** The language of the built-in wording: Japanese or English. */
+type UiLanguage = "ja" | "en"
+
+/** The locale used when `<html lang>` gives none (and on the server). */
+const FALLBACK_LOCALE = "en-US"
+
+/** `"ja"` when `locale` starts with `ja` (`ja`, `ja-JP`), else `"en"`. A missing locale is `"en"`. */
+function uiLanguage(locale: string | null | undefined): UiLanguage {
+  return typeof locale === "string" && locale.trim().toLowerCase().startsWith("ja") ? "ja" : "en"
+}
+
+/** A BCP 47 tag in its canonical form (`en-gb` → `en-GB`), or `FALLBACK_LOCALE` when it is empty or invalid. */
+function normalizeLocale(tag: string | null | undefined): string {
+  const value = tag?.trim()
+  if (!value) return FALLBACK_LOCALE
+  try {
+    return Intl.getCanonicalLocales(value)[0] ?? FALLBACK_LOCALE
+  } catch {
+    return FALLBACK_LOCALE
+  }
+}
+
+/**
+ * The locale of the page: `document.documentElement.lang`, canonicalized. `FALLBACK_LOCALE` when it is empty or
+ * invalid, or there is no `document`. Parts read it through `useLocale`, never while rendering.
+ */
+function documentLocale(): string {
+  if (typeof document === "undefined") return FALLBACK_LOCALE
+  return normalizeLocale(document.documentElement?.getAttribute("lang"))
+}
+
+/** `locale` when given, else the page's locale (`documentLocale()`). */
+function resolveLocale(locale?: string | null): string {
+  return locale || documentLocale()
+}
+
+/** Picks the wording table of the locale's language. */
+function pickLocale<T>(table: { ja: T; en: T }, locale?: string | null): T {
+  return table[uiLanguage(resolveLocale(locale))]
+}
+
+/** The currency `format="currency"` uses without a `currency`: JPY for Japanese, USD otherwise. */
+function defaultCurrency(locale?: string | null): string {
+  return uiLanguage(resolveLocale(locale)) === "ja" ? "JPY" : "USD"
+}
+
+/** The month a fiscal year starts in (1–12) when none is given: April for Japanese, January otherwise. */
+function defaultFiscalYearStartMonth(locale?: string | null): number {
+  return uiLanguage(resolveLocale(locale)) === "ja" ? 4 : 1
+}
+
+/** A day of the week, 0 = Sunday … 6 = Saturday (the `Date#getDay` / date-fns numbering). */
+type WeekDay = 0 | 1 | 2 | 3 | 4 | 5 | 6
+
+/** Locales whose week starts on Sunday when the runtime has no week data. */
+const SUNDAY_FIRST = new Set(["en", "en-US", "en-CA"])
+
+/**
+ * The first day of the week: Monday for Japanese; otherwise the locale's convention from `Intl.Locale`
+ * (`en-US` Sunday, `en-GB` Monday). Without week data in the runtime: Sunday for `en` / `en-US` / `en-CA`,
+ * Monday for the rest.
+ */
+function weekStartsOn(locale?: string | null): WeekDay {
+  const tag = normalizeLocale(resolveLocale(locale))
+  if (uiLanguage(tag) === "ja") return 1
+  try {
+    const info = new Intl.Locale(tag) as Intl.Locale & {
+      getWeekInfo?: () => { firstDay: number }
+      weekInfo?: { firstDay: number }
+    }
+    const firstDay = info.getWeekInfo?.().firstDay ?? info.weekInfo?.firstDay
+    if (typeof firstDay === "number" && firstDay >= 1 && firstDay <= 7) return (firstDay % 7) as WeekDay
+  } catch {
+    // Fall through to the table below.
+  }
+  return SUNDAY_FIRST.has(tag) ? 0 : 1
+}
+
 /* ---------- inlined from @squadbase/squadkit registry/lib/chart-utils.ts (internal to @squadbase/vantage) ---------- */
 
 const ROOT_PROP_KEYS = new Set(["id", "style", "role", "tabIndex", "lang", "hidden"])
@@ -126,9 +217,10 @@ function resolveValueFormatter(
 function resolveAxisFormatter(
   valueFormatter: ValueFormatter | undefined,
   format: ValueFormat | undefined,
-  locale: string = DEFAULT_LOCALE,
+  localeArg?: string,
 ): ValueFormatter {
   if (valueFormatter) return valueFormatter
+  const locale = resolveLocale(localeArg)
   const spec = format === undefined ? { type: "compact" as const } : typeof format === "string" ? { type: format } : format
   if (spec.type !== "compact" && spec.type !== "number" && spec.type !== "currency") return toValueFormatter(format, locale)
   const currency = "currency" in spec ? spec.currency : undefined
@@ -137,40 +229,75 @@ function resolveAxisFormatter(
   return (value) => formatValue(value, short, locale)
 }
 
-/** The unit words of a ja number (`1.2万` / `3.4億` / `1兆`) and their sizes, largest first. */
-const JA_UNITS = [
-  { char: "兆", size: 1e12 },
-  { char: "億", size: 1e8 },
-  { char: "万", size: 1e4 },
-] as const
+interface CompactUnit {
+  token: string
+  size: number
+}
 
-const JA_NUMBER_TOKEN_RE = /\d[\d,]*(?:\.\d+)?(?:兆|億|万)?/
+const compactUnitCache = new Map<string, CompactUnit[] | null>()
+
+/**
+ * The compact-notation unit words of a locale and their sizes, largest first: `兆` / `億` / `万` in ja,
+ * `T` / `B` / `M` / `K` in en. `null` when the locale's compact form puts anything between the number and its
+ * word (`1,5 Mio.`), where a token cannot be swapped in place.
+ */
+function compactUnits(locale: string): CompactUnit[] | null {
+  const cached = compactUnitCache.get(locale)
+  if (cached !== undefined) return cached
+  let units: CompactUnit[] | null = []
+  try {
+    const compact = new Intl.NumberFormat(locale, { notation: "compact" })
+    const seen = new Set<string>()
+    for (let exp = 3; exp <= 15; exp++) {
+      const parts = compact.formatToParts(10 ** exp)
+      const at = parts.findIndex((p) => p.type === "compact")
+      if (at === -1) continue
+      if (parts[at - 1]?.type !== "integer" || at !== parts.length - 1) {
+        units = null
+        break
+      }
+      const token = parts[at]!.value
+      if (seen.has(token)) continue
+      seen.add(token)
+      units.push({ token, size: 10 ** exp })
+    }
+  } catch {
+    units = null
+  }
+  const sorted = units && units.length > 0 ? units.sort((a, b) => b.size - a.size) : null
+  compactUnitCache.set(locale, sorted)
+  return sorted
+}
+
+const escapeRegExp = (text: string) => text.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")
 
 /**
  * The value-axis tick formatter for an axis whose largest tick is `top`: every tick reads in the unit of
- * that largest tick, so 万 and 億 never mix on one axis (`¥0.5億` / `¥1億` / `¥1.5億`, not `¥5,000万` / `¥1億`).
- * Only the ja short forms (`compact` / `number` / `currency`, no `valueFormatter`) have units to align;
- * any other format — and an axis whose largest tick is under 1万 — keeps `resolveAxisFormatter`'s output as it is.
+ * that largest tick, so units never mix on one axis (`¥0.5億` / `¥1億` / `¥1.5億`, not `¥5,000万` / `¥1億`;
+ * `$0.5M` / `$1M` / `$1.5M`, not `$500K` / `$1M`). Only the short forms (`compact` / `number` / `currency`,
+ * no `valueFormatter`) have units to align; any other format — an axis whose largest tick is under the smallest
+ * unit (1万 / 1K), or a locale whose compact form cannot be aligned in place — keeps `resolveAxisFormatter`'s output as it is.
  */
 function resolveAxisTickFormatter(
   valueFormatter: ValueFormatter | undefined,
   format: ValueFormat | undefined,
-  locale: string = DEFAULT_LOCALE,
+  localeArg?: string,
 ): (top: number) => ValueFormatter {
+  const locale = resolveLocale(localeArg)
   const base = resolveAxisFormatter(valueFormatter, format, locale)
   const spec = format === undefined ? { type: "compact" as const } : typeof format === "string" ? { type: format } : format
-  const aligns =
-    !valueFormatter && locale.toLowerCase().startsWith("ja") && (spec.type === "compact" || spec.type === "number" || spec.type === "currency")
-  if (!aligns) return () => base
+  const units = !valueFormatter && (spec.type === "compact" || spec.type === "number" || spec.type === "currency") ? compactUnits(locale) : null
+  if (!units) return () => base
   const number = new Intl.NumberFormat(locale, { maximumFractionDigits: 3 })
+  const numberToken = new RegExp(`\\d[\\d,]*(?:\\.\\d+)?(?:${units.map((u) => escapeRegExp(u.token)).join("|")})?`)
   return (top) => {
-    const unit = JA_UNITS.find((u) => Math.abs(top) >= u.size)
+    const unit = units.find((u) => Math.abs(top) >= u.size)
     if (!unit) return base
     return (value) => {
       const text = base(value)
       if (value === 0 || !Number.isFinite(value)) return text
-      const scaled = `${number.format(Math.abs(value) / unit.size)}${unit.char}`
-      return text.replace(JA_NUMBER_TOKEN_RE, () => scaled)
+      const scaled = `${number.format(Math.abs(value) / unit.size)}${unit.token}`
+      return text.replace(numberToken, () => scaled)
     }
   }
 }
@@ -199,8 +326,20 @@ function clamp(value: number, min: number, max: number): number {
 /** How many categories a chart colours individually; the rest fold into「その他」. */
 const MAX_CHART_SERIES = 5
 
-/** The series name the folded categories get. */
-const OTHER_SERIES_LABEL = "その他"
+/** The series name the folded categories get, by language. */
+const OTHER_SERIES_LABELS: Record<UiLanguage, string> = { ja: "その他", en: "Other" }
+
+/** The series name the folded categories get in `locale` ("Other" / "その他"). Default the page's locale (`<html lang>`). */
+function otherSeriesLabel(locale?: string): string {
+  return OTHER_SERIES_LABELS[uiLanguage(resolveLocale(locale))]
+}
+
+const OTHER_NAMES = new Set(Object.values(OTHER_SERIES_LABELS))
+
+/** Whether a category / row is the "other" bucket by name (「その他」 or "Other", whatever the page language). */
+function isOtherName(name: string | null | undefined): boolean {
+  return typeof name === "string" && OTHER_NAMES.has(name)
+}
 
 interface AggregatedItems<Item extends { name: string; value: number }> {
   /** The `n` largest items, in their given order. All items when there are `n` or fewer. */
@@ -220,7 +359,7 @@ interface AggregatedItems<Item extends { name: string; value: number }> {
 function aggregateTopN<Item extends { name: string; value: number }>(
   items: readonly Item[],
   n: number = MAX_CHART_SERIES,
-  otherLabel: string = OTHER_SERIES_LABEL,
+  otherLabel: string = otherSeriesLabel(),
 ): AggregatedItems<Item> {
   if (items.length <= n) return { top: [...items], rest: [], other: null }
   const ranked = items
@@ -249,7 +388,7 @@ function aggregateSeries(
   data: readonly Record<string, unknown>[],
   categories: readonly string[],
   n: number = MAX_CHART_SERIES,
-  otherLabel: string = OTHER_SERIES_LABEL,
+  otherLabel: string = otherSeriesLabel(),
 ): AggregatedSeries {
   const totals = categories.map((name) => ({
     name,
@@ -281,12 +420,14 @@ function aggregateSeriesKeeping(
   categories: readonly string[],
   keep: string | undefined,
   n: number = MAX_CHART_SERIES,
+  otherLabel: string = otherSeriesLabel(),
 ): AggregatedSeries {
-  if (keep === undefined || !categories.includes(keep)) return aggregateSeries(data, categories, n)
+  if (keep === undefined || !categories.includes(keep)) return aggregateSeries(data, categories, n, otherLabel)
   const aggregated = aggregateSeries(
     data,
     categories.filter((c) => c !== keep),
     n,
+    otherLabel,
   )
   return { ...aggregated, categories: [...aggregated.categories, keep] }
 }
@@ -322,7 +463,7 @@ function seriesColorsWithComparison(
  * Colour per drawn series: the record's token for that category, else the
  * array's token at the category's position in `allCategories` (cycled), else
  * the token palette by drawn position. `otherCategory` — and a category the
- * data itself names「その他」(`OTHER_SERIES_LABEL`) — always gets `otherColor`.
+ * data itself names「その他」/ "Other" (`OTHER_SERIES_LABELS`) — always gets `otherColor`.
  */
 function seriesColorsFor(
   categories: readonly string[],
@@ -334,7 +475,7 @@ function seriesColorsFor(
   const list = Array.isArray(colors) ? (colors as ChartSeriesColor[]) : undefined
   const record = !Array.isArray(colors) && colors ? (colors as Partial<Record<string, ChartSeriesColor>>) : undefined
   return categories.map((category, i) => {
-    if ((otherCategory !== null && category === otherCategory) || category === OTHER_SERIES_LABEL) return otherColor
+    if ((otherCategory !== null && category === otherCategory) || isOtherName(category)) return otherColor
     const fromRecord = record?.[category]
     if (fromRecord) return fromRecord
     if (list && list.length > 0) {
@@ -381,7 +522,7 @@ interface DonutSlicesConfig {
  */
 function donutSlices(
   data: readonly Record<string, unknown>[],
-  { index, value, colors, maxSlices = MAX_CHART_SERIES, otherColor, otherLabel = OTHER_SERIES_LABEL }: DonutSlicesConfig,
+  { index, value, colors, maxSlices = MAX_CHART_SERIES, otherColor, otherLabel = otherSeriesLabel() }: DonutSlicesConfig,
 ): DonutSlice[] {
   const items = data
     .map((row, i) => {
@@ -394,7 +535,8 @@ function donutSlices(
   const slices: DonutSlice[] = top.map((item, rank) => ({
     name: item.name,
     value: item.value,
-    color: palette[rank % palette.length]!,
+    // A row the data itself names「その他」/ "Other" is the same remainder: grey, like the folded slice.
+    color: isOtherName(item.name) ? otherColor : palette[rank % palette.length]!,
     isOther: false,
     row: item.row,
   }))
@@ -467,7 +609,7 @@ interface BarListRowsConfig extends BarListOptions {
  */
 function barListRows<Row extends object>(
   data: readonly Row[],
-  { index = "name", category = "value", sortOrder = "descending", maxItems = MAX_CHART_SERIES, otherLabel = OTHER_SERIES_LABEL, exclude }: BarListRowsConfig = {},
+  { index = "name", category = "value", sortOrder = "descending", maxItems = MAX_CHART_SERIES, otherLabel = otherSeriesLabel(), exclude }: BarListRowsConfig = {},
 ): BarListRow<Row>[] {
   const items = data.map((row): BarListRow<Row> => {
     const cells = row as Record<string, unknown>
@@ -513,19 +655,21 @@ const BAR_LIST_OTHER_TINT = 30
 
 /**
  * The fill of each BarList row: all real rows in the same tint of `color`
- * (`BAR_LIST_TINT`), the folded「その他」row in a tint of `otherColor`
+ * (`BAR_LIST_TINT`), the folded「その他」row (and a row the data names「その他」/ "Other") in a tint of `otherColor`
  * (`BAR_LIST_OTHER_TINT`) — the palest fill, a remainder never outweighs a
  * ranked row. A legacy per-row `color` (or a threshold tone) replaces `color`
  * for that row. A tint, not the solid token, so the label printed over the bar
  * keeps its contrast.
  */
 function barListFills(
-  rows: readonly Pick<BarListRow, "isOther" | "color">[],
+  rows: readonly (Pick<BarListRow, "isOther" | "color"> & { name?: string })[],
   color: ChartColor,
   otherColor: string,
 ): string[] {
   return rows.map((row) =>
-    row.isOther ? tintCss(otherColor, BAR_LIST_OTHER_TINT) : tintCss(chartColorToCss(row.color ?? color), BAR_LIST_TINT),
+    row.isOther || isOtherName(row.name)
+      ? tintCss(otherColor, BAR_LIST_OTHER_TINT)
+      : tintCss(chartColorToCss(row.color ?? color), BAR_LIST_TINT),
   )
 }
 
@@ -741,11 +885,30 @@ interface ChartSummaryInput {
   format?: ValueFormat
   /** Wins over `format`. */
   valueFormatter?: ValueFormatter
+  /** Language of the sentence. Default the page's locale (`<html lang>`). */
+  locale?: string
+}
+
+const SUMMARY_TEXT = {
+  ja: {
+    up: "、前の点より増加",
+    down: "、前の点より減少",
+    flat: "、前の点と横ばい",
+    latest: (label: string, value: string) => `最新 ${label} は ${value}`,
+    top: (name: string, share: string) => `最大は ${name}(${share})`,
+  },
+  en: {
+    up: ", up from the previous point",
+    down: ", down from the previous point",
+    flat: ", flat from the previous point",
+    latest: (label: string, value: string) => `Latest ${label}: ${value}`,
+    top: (name: string, share: string) => `Largest: ${name} (${share})`,
+  },
 }
 
 /**
  * One-sentence summary built from the rows, for `summary="auto"`:
- * 「<title>: 最新 <index> は <値>、前の点より増加/減少/横ばい」. The direction is
+ * 「<title>: 最新 <index> は <値>、前の点より増加/減少/横ばい」("<title>: Latest <index>: <value>, up from the previous point"). The direction is
  * computed from the last two non-empty points of the first series — never
  * written by hand, so it cannot contradict the data. `undefined` when there is
  * no usable point.
@@ -761,26 +924,29 @@ function buildChartSummary(input: ChartSummaryInput): string | undefined {
   }
   const latest = points[points.length - 1]
   if (!latest) return undefined
-  const text = input.valueFormatter ?? toValueFormatter(input.format ?? "compact")
+  const locale = resolveLocale(input.locale)
+  const t = SUMMARY_TEXT[uiLanguage(locale)]
+  const text = input.valueFormatter ?? toValueFormatter(input.format ?? "compact", locale)
   const prev = points[points.length - 2]
-  const direction = !prev ? "" : latest.value > prev.value ? "、前の点より増加" : latest.value < prev.value ? "、前の点より減少" : "、前の点と横ばい"
+  const direction = !prev ? "" : latest.value > prev.value ? t.up : latest.value < prev.value ? t.down : t.flat
   const head = input.title ? `${input.title}: ` : ""
-  return `${head}最新 ${latest.label} は ${text(latest.value)}${direction}`
+  return `${head}${t.latest(latest.label, text(latest.value))}${direction}`
 }
 
 /**
- * `summary="auto"` for a donut: 「<title>: 最大は <名前>(<構成比>)」 from the slices
- * (largest first). `undefined` when there is nothing to describe.
+ * `summary="auto"` for a donut: 「<title>: 最大は <名前>(<構成比>)」("<title>: Largest: <name> (<share>)") from the slices
+ * (largest first). `undefined` when there is nothing to describe. `locale` picks the language; default the page's.
  */
 function buildShareSummary(
   slices: readonly { name: string; value: number }[],
   title?: string,
+  locale?: string,
 ): string | undefined {
   const total = slices.reduce((sum, s) => sum + s.value, 0)
   const top = slices[0]
   if (!top || total <= 0) return undefined
   const share = `${Math.round((top.value / total) * 1000) / 10}%`
-  return `${title ? `${title}: ` : ""}最大は ${top.name}(${share})`
+  return `${title ? `${title}: ` : ""}${SUMMARY_TEXT[uiLanguage(resolveLocale(locale))].top(top.name, share)}`
 }
 
 /* ---------- end of inlined code ---------- */