@squadbase/vantage 0.6.2-dev1.9365dcd → 0.6.2-dev1.9d7130b

package/registry/ui/kpi-card.tsx

@@ -43,7 +43,7 @@
  *   line takes its name from it ("昨日 617"), the same way a `label` on any `vs` does.
  * - **Two or more comparisons sit under the value**, not beside it, so the value
  *   keeps its place and its width whatever the card holds.
- * - **Polarity drives everything.** With `polarity="lower-is-better"` the target
+ * - **`betterWhen` drives everything.** With `betterWhen="down"` the target
  *   is met at or below it, and the record badge marks the lowest value.
  * - **Rates change in points.** With a `percent` format the delta and
  *   `{difference}` are in percentage points ("-0.5pt"); `change="relative"` opts
@@ -91,7 +91,7 @@ import {
   type PeriodGrain,
   type Polarity,
 } from "@squadbase/vantage/components"
-import { DEFAULT_LOCALE, EMPTY_VALUE, formatDate, formatDatesInText, formatDelta, formatKind, formatPoints, formatValue, type ValueFormat } from "@squadbase/vantage/components"
+import { EMPTY_VALUE, formatDate, formatDatesInText, formatDelta, formatKind, formatPoints, formatValue, type ValueFormat } from "@squadbase/vantage/components"
 import { computeTargetProgress, detectRecord, inferPeriodGrain, type KpiPeriod } from "@squadbase/vantage/components"
 import { formatRelativeTime } from "@squadbase/vantage/components"
 import { Sparkline } from "@squadbase/vantage/components"
@@ -100,6 +100,140 @@ import { Card, CardAction, CardDescription, CardFooter, CardHeader, CardTitle }
 import { Skeleton } from "@squadbase/vantage/ui"
 import { Delta } from "@squadbase/vantage/components"
 import { SampleBadge, useSampleMark } from "@squadbase/vantage/components"
+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 ---------- */
 
 export interface KpiCardSource {
   /** Period the data covers (e.g. "2023-04 以降"). ISO year-months / dates in it are written by the card ("2023年4月 以降"). */
@@ -125,11 +259,11 @@ export interface KpiCardProps extends Omit<ComponentProps<"div">, "children"> {
   value: number | null | undefined
   /**
    * Value format, also used for previous / target / remaining. Default `"compact"`.
-   * `"currency"` is JPY in 万・億; `"percent"` takes a ratio (0.021 → 2.1%) and
+   * `"currency"` is JPY in 万・億 on a ja page (USD in K・M・B otherwise); `"percent"` takes a ratio (0.021 → 2.1%) and
    * switches the delta to points. See `formatValue` for the full table.
    */
   format?: ValueFormat
-  /** Default `"ja-JP"`. */
+  /** Locale of the numbers and the built-in wording. Default: the page's (`<html lang>`, else `"en-US"`). */
   locale?: string
   /**
    * What the value is compared against; drives the delta (tier 3) and previous line (tier 4).
@@ -147,7 +281,9 @@ export interface KpiCardProps extends Omit<ComponentProps<"div">, "children"> {
    * @example provisional  /  provisional={{ label: "暫定" }}
    */
   provisional?: boolean | { label?: string }
-  /** Whether a rise is good. Default `"higher-is-better"`. `"neutral"` never colours the change and skips the target and record logic. */
+  /** Which direction is good: `"up"` (default) or `"down"` (churn, error rate). Wins over `polarity`. */
+  betterWhen?: "up" | "down"
+  /** @deprecated Older name of `betterWhen` (`"higher-is-better"` / `"lower-is-better"`). `"neutral"` (never colours the change, skips the target and record logic) is only reachable here. `betterWhen` wins if both are given. */
   polarity?: Polarity
   /** `"relative"` ("+12.4%"), `"points"` ("-0.5pt") or `"difference"` ("+¥530万", in `format`). Default: points for a `percent` format, else relative. */
   change?: ChangeDisplay
@@ -160,7 +296,7 @@ export interface KpiCardProps extends Omit<ComponentProps<"div">, "children"> {
   /**
    * Target for the current period. Under the value it adds a 6px bar (actual, the pace
    * projection, a tick at the target) and one line "目標の 49%・このペースなら 98%"
-   * (the projection only while `period` is in progress). With `polarity="lower-is-better"`
+   * (the projection only while `period` is in progress). With `betterWhen="down"`
    * or a rate target (points) there is no bar: "目標 … まであと …" in the footer.
    */
   target?: number
@@ -243,7 +379,72 @@ const KPI_FOOTER_CLASS = "flex-col items-start gap-2 rounded-none border-t-0 bg-
 
 const PLACEHOLDER = /\{(\w+)\}/g
 
-const isJapanese = (locale: string) => locale.toLowerCase().startsWith("ja")
+const TEXT = {
+  ja: {
+    target: "目標",
+    provisional: "速報",
+    joiner: "・",
+    countFrom: (count: string) => `${count}件から集計`,
+    excluded: (count: string) => `${count}件を除外`,
+    noBaseline: (baseline: string) => `${baseline}の実績がないため、比較できません。`,
+    previous: (baseline: string, value: string) => `${baseline} ${value}`,
+    noPrevious: (baseline: string) => `${baseline}の実績なし`,
+    barLead: (tl: string, pct: string) => `${tl}の ${pct}`,
+    pace: (pct: string) => `このペースなら ${pct}`,
+    provisionalSuffix: "（確定前）",
+    provisionalReached: (tl: string, target: string) => `${tl} ${target} に到達（確定前）`,
+    provisionalSoFar: (tl: string, target: string, pct: string) => `${tl} ${target} に対して現時点 ${pct}（確定前）`,
+    provisionalToGo: (tl: string, target: string, distance: string) => `${tl} ${target} まであと ${distance}（確定前）`,
+    provisionalToGoRate: (tl: string, distance: string, pct: string) => `${tl}まであと ${distance}（現時点 ${pct}・確定前）`,
+    met: (tl: string, target: string) => `${tl} ${target} を達成`,
+    toGo: (tl: string, target: string, distance: string) => `${tl} ${target} まであと ${distance}`,
+    reached: (tl: string, target: string) => `${tl} ${target} に到達`,
+    reachedRate: (tl: string, target: string, pct: string) => `${tl} ${target} に到達（${pct} 達成）`,
+    toGoRate: (tl: string, distance: string, pct: string) => `${tl}まであと ${distance}（${pct} 達成）`,
+    progressLabel: (tl: string) => `${tl}に対する進捗`,
+    progressValue: (tl: string, target: string, value: string, pct: string) => `${tl} ${target} に対して ${value}（${pct}）`,
+    history: (label: string, points: number) => `${label}の推移（直近 ${points} 点）`,
+    updatedRelative: (relative: string) => `${relative}に更新`,
+    updatedAbsolute: (absolute: string) => `${absolute} に更新`,
+    updatedBoth: (absolute: string, relative: string) => `${absolute} に更新（${relative}）`,
+    summaryExample: "{label}は目標の {achievement} まで来ています。",
+  },
+  en: {
+    target: "Target",
+    provisional: "Preliminary",
+    joiner: " · ",
+    countFrom: (count: string) => `Based on ${count} records`,
+    excluded: (count: string) => `${count} excluded`,
+    noBaseline: (baseline: string) => `No ${baseline} data to compare against.`,
+    previous: (baseline: string, value: string) => `${capitalize(baseline)}: ${value}`,
+    noPrevious: (baseline: string) => `No ${baseline} data`,
+    barLead: (tl: string, pct: string) => `${tl}: ${pct}`,
+    pace: (pct: string) => `On pace for ${pct}`,
+    provisionalSuffix: " (preliminary)",
+    provisionalReached: (tl: string, target: string) => `${tl} ${target}: reached (preliminary)`,
+    provisionalSoFar: (tl: string, target: string, pct: string) => `${tl} ${target}: ${pct} so far (preliminary)`,
+    provisionalToGo: (tl: string, target: string, distance: string) => `${tl} ${target}: ${distance} to go (preliminary)`,
+    provisionalToGoRate: (tl: string, distance: string, pct: string) => `${tl}: ${distance} to go (${pct} so far, preliminary)`,
+    met: (tl: string, target: string) => `${tl} ${target}: met`,
+    toGo: (tl: string, target: string, distance: string) => `${tl} ${target}: ${distance} to go`,
+    reached: (tl: string, target: string) => `${tl} ${target}: reached`,
+    reachedRate: (tl: string, target: string, pct: string) => `${tl} ${target}: reached (${pct} achieved)`,
+    toGoRate: (tl: string, distance: string, pct: string) => `${tl}: ${distance} to go (${pct} achieved)`,
+    progressLabel: (tl: string) => `Progress toward ${tl}`,
+    progressValue: (tl: string, target: string, value: string, pct: string) => `${value} of ${tl} ${target} (${pct})`,
+    history: (label: string, points: number) => `${label} trend (last ${points} points)`,
+    updatedRelative: (relative: string) => `Updated ${relative}`,
+    updatedAbsolute: (absolute: string) => `Updated ${absolute}`,
+    updatedBoth: (absolute: string, relative: string) => `Updated ${absolute} (${relative})`,
+    summaryExample: "{label} is at {achievement} of target.",
+  },
+} satisfies Record<UiLanguage, unknown>
+
+type KpiText = (typeof TEXT)[UiLanguage]
+
+function capitalize(text: string): string {
+  return text.charAt(0).toUpperCase() + text.slice(1)
+}
 
 const isMissing = (v: string | null | undefined) => v === null || v === undefined || v === ""
 
@@ -304,11 +505,11 @@ function isProduction(): boolean {
   }
 }
 
-function warnShallowSummary(template: string) {
+function warnShallowSummary(template: string, t: KpiText) {
   if (shallowSummaryWarned || isProduction() || !isShallowSummary(template)) return
   shallowSummaryWarned = true
   console.warn(
-    `[KpiCard] summary="${template}" only repeats the delta badge and the previous actual. Say one fact beyond the comparison — composition, target, record or rate (e.g. "{label}は目標の {achievement} まで来ています。").`,
+    `[KpiCard] summary="${template}" only repeats the delta badge and the previous actual. Say one fact beyond the comparison — composition, target, record or rate (e.g. "${t.summaryExample}").`,
   )
 }
 
@@ -321,17 +522,18 @@ export function KpiCard({
   label,
   value,
   format,
-  locale = DEFAULT_LOCALE,
+  locale: localeProp,
   comparison: comparisonProp,
   comparisons,
   provisional,
-  polarity,
+  betterWhen,
+  polarity: polarityProp,
   change,
   neutralBand,
   showPrevious = true,
   summary,
   target,
-  targetLabel = "目標",
+  targetLabel,
   targetDisplay,
   period,
   history,
@@ -347,26 +549,28 @@ export function KpiCard({
   className,
   ...props
 }: KpiCardProps) {
+  const locale = useLocale(localeProp)
+  const t = TEXT[uiLanguage(locale)]
   const allComparisons = [...(comparisonProp ? [comparisonProp] : []), ...(comparisons ?? [])]
   const comparison = allComparisons[0]
   const isProvisional = provisional !== undefined && provisional !== false
-  const provisionalLabel = typeof provisional === "object" && provisional.label ? provisional.label : "速報"
+  const provisionalLabel = typeof provisional === "object" && provisional.label ? provisional.label : t.provisional
   const sample = useSampleMark()
+  // `betterWhen` is the documented name and wins over the older `polarity`.
+  const polarity: Polarity | undefined = betterWhen ? (betterWhen === "down" ? "lower-is-better" : "higher-is-better") : polarityProp
   const neutral = polarity === "neutral"
   const hasPrevious = comparison !== undefined && showPrevious
   // Two or more badges would squeeze the value from the right; they get their own row under it instead.
   const stacked = allComparisons.length > 1
   const hasTarget = target !== undefined
   const grain = comparison?.grain ?? historyGrain ?? inferPeriodGrain(period)
-  const record = isProvisional || neutral ? null : detectRecord(history, historyGrain ?? grain, polarity)
+  const record = isProvisional || neutral ? null : detectRecord(history, historyGrain ?? grain, polarity, locale)
   const sourceParts = source
     ? [
         source.period !== undefined ? formatDatesInText(source.period, locale) : undefined,
-        source.count !== undefined ? `${formatValue(source.count, "number", locale)}件から集計` : undefined,
+        source.count !== undefined ? t.countFrom(formatValue(source.count, "number", locale)) : undefined,
         source.excluded !== undefined && Number.isFinite(source.excluded) && source.excluded > 0
-          ? isJapanese(locale)
-            ? `${formatValue(source.excluded, "number", locale)}件を除外`
-            : `${formatValue(source.excluded, "number", locale)} excluded`
+          ? t.excluded(formatValue(source.excluded, "number", locale))
           : undefined,
         source.name,
         source.note,
@@ -381,7 +585,7 @@ export function KpiCard({
   const lower = polarity === "lower-is-better"
   // The bar reads "how far toward the target"; a rate (points) or a lower-is-better target has no such fill.
   const targetBar = hasTarget && !neutral && !byPoints && !lower
-  if (summary !== undefined) warnShallowSummary(summary)
+  if (summary !== undefined) warnShallowSummary(summary, t)
   // Two rows of the parent grid (body, footer), shared by subgrid; a plain two-row grid when standalone.
   const cardClass = cn("row-span-2 grid content-start gap-y-0 grid-rows-subgrid", className)
   const valueSize = small ? "text-xl @[218px]/card:text-2xl" : "text-2xl @[218px]/card:text-4xl"
@@ -444,14 +648,14 @@ export function KpiCard({
   /** An unsigned distance in the metric's unit — points for a rate. */
   const fmtDistance = (v: number) => (isRate ? formatPoints(v, locale, { signDisplay: "never" }) : fmt(v))
   const pct = (v: number) => formatValue(v, { type: "percent", digits: 0 }, locale)
-  const tl = targetLabel
+  const tl = targetLabel ?? t.target
   const display = change ?? defaultChangeDisplay(format)
   // Value digits only carry over to a change in points; a relative change keeps its own fixed digits.
   const digits =
     display === "points" && typeof format === "object" && format !== null && "digits" in format ? format.digits : undefined
   const graded = comparison ? { ...comparison, grain } : undefined
-  const result = graded ? computeComparison(value, graded, { polarity, neutralBand }) : null
-  const baseline = graded ? comparisonBaseline(graded.vs, grain, graded.label, graded.toDate) : null
+  const result = graded ? computeComparison(value, graded, { polarity, neutralBand, locale }) : null
+  const baseline = graded ? comparisonBaseline(graded.vs, grain, graded.label, graded.toDate, locale) : null
   const progress = hasTarget && !neutral ? computeTargetProgress(value, target, { period, now, polarity }) : null
   // A linear pace only makes sense for an accumulating total, not for a rate.
   const projectedValue =
@@ -479,7 +683,7 @@ export function KpiCard({
             : null,
           remaining: progress ? fmtDistance(progress.remaining) : null,
         },
-        result && result.direction === "none" && baseline ? `${baseline}の実績がないため、比較できません。` : null,
+        result && result.direction === "none" && baseline ? t.noBaseline(baseline) : null,
       )
     : null
 
@@ -491,9 +695,9 @@ export function KpiCard({
     const projected = projectedValue !== null && projectedValue > actual ? projectedValue : actual
     const scale = Math.max(target as number, actual, projected)
     const at = (v: number) => (scale > 0 ? (v / scale) * 100 : 0)
-    const parts = [`${tl}の ${pct(progress!.achievement)}`]
+    const parts = [t.barLead(tl, pct(progress!.achievement))]
     if (projectedValue !== null && progress!.projected != null)
-      parts.push(`このペースなら ${formatValue(progress!.projected, { type: "percent", digits: 0 }, locale)}`)
+      parts.push(t.pace(formatValue(progress!.projected, { type: "percent", digits: 0 }, locale)))
     return {
       actualAt: at(actual),
       projectedAt: at(projected),
@@ -509,23 +713,23 @@ export function KpiCard({
     else if (isProvisional)
       targetText = progress.achieved
         ? byPoints
-          ? `${tl} ${fmt(target)} に到達（確定前）`
-          : `${tl} ${fmt(target)} に対して現時点 ${pct(progress.achievement)}（確定前）`
+          ? t.provisionalReached(tl, fmt(target))
+          : t.provisionalSoFar(tl, fmt(target), pct(progress.achievement))
         : byPoints
-          ? `${tl} ${fmt(target)} まであと ${fmtDistance(progress.remaining)}（確定前）`
-          : `${tl}まであと ${fmtDistance(progress.remaining)}（現時点 ${pct(progress.achievement)}・確定前）`
+          ? t.provisionalToGo(tl, fmt(target), fmtDistance(progress.remaining))
+          : t.provisionalToGoRate(tl, fmtDistance(progress.remaining), pct(progress.achievement))
     else if (lower)
       targetText = progress.achieved
-        ? `${tl} ${fmt(target)} を達成`
-        : `${tl} ${fmt(target)} まであと ${fmtDistance(progress.remaining)}`
+        ? t.met(tl, fmt(target))
+        : t.toGo(tl, fmt(target), fmtDistance(progress.remaining))
     else if (byPoints)
       targetText = progress.achieved
-        ? `${tl} ${fmt(target)} に到達`
-        : `${tl} ${fmt(target)} まであと ${fmtDistance(progress.remaining)}`
+        ? t.reached(tl, fmt(target))
+        : t.toGo(tl, fmt(target), fmtDistance(progress.remaining))
     else
       targetText = progress.achieved
-        ? `${tl} ${fmt(target)} に到達（${pct(progress.achievement)} 達成）`
-        : `${tl}まであと ${fmtDistance(progress.remaining)}（${pct(progress.achievement)} 達成）`
+        ? t.reachedRate(tl, fmt(target), pct(progress.achievement))
+        : t.toGoRate(tl, fmtDistance(progress.remaining), pct(progress.achievement))
   }
 
   const hasFooter =
@@ -590,7 +794,7 @@ export function KpiCard({
           ))}
         {hasPrevious && comparison && (
           <div data-slot="kpi-card-previous" className="col-span-full text-sm text-muted-foreground tabular-nums">
-            {result?.previous != null ? `${baseline} ${fmt(result.previous)}` : `${baseline}の実績なし`}
+            {result?.previous != null ? t.previous(baseline ?? "", fmt(result.previous)) : t.noPrevious(baseline ?? "")}
           </div>
         )}
         {bar && progress && (
@@ -598,11 +802,11 @@ export function KpiCard({
             <div
               data-slot="kpi-card-target-bar"
               role="progressbar"
-              aria-label={`${tl}に対する進捗`}
+              aria-label={t.progressLabel(tl)}
               aria-valuemin={0}
               aria-valuemax={target}
               aria-valuenow={Math.min(Math.max(value as number, 0), target as number)}
-              aria-valuetext={`${tl} ${fmt(target)} に対して ${fmt(value)}（${pct(progress.achievement)}）`}
+              aria-valuetext={t.progressValue(tl, fmt(target), fmt(value), pct(progress.achievement))}
               className="relative h-2 w-full overflow-hidden rounded-full bg-muted"
             >
               <div className="absolute inset-y-0 left-0 bg-chart-1" style={{ width: `${bar.actualAt}%` }} />
@@ -621,16 +825,17 @@ export function KpiCard({
             </div>
             <p
               data-slot="kpi-card-target"
-              title={[bar.lead, bar.pace].filter(Boolean).join("・")}
+              title={[bar.lead, bar.pace].filter(Boolean).join(t.joiner)}
               className="truncate text-sm text-muted-foreground tabular-nums"
             >
               {bar.lead}
               {bar.pace && (
                 <>
-                  ・<span data-slot="kpi-card-projection" data-estimate="">{bar.pace}</span>
+                  {t.joiner}
+                  <span data-slot="kpi-card-projection" data-estimate="">{bar.pace}</span>
                 </>
               )}
-              {isProvisional && "（確定前）"}
+              {isProvisional && t.provisionalSuffix}
             </p>
           </div>
         )}
@@ -655,15 +860,15 @@ export function KpiCard({
           {sourceParts.length > 0 && (
             <p
               data-slot="kpi-card-source"
-              title={sourceParts.join("・")}
+              title={sourceParts.join(t.joiner)}
               className="line-clamp-2 w-full text-xs leading-normal text-muted-foreground tabular-nums"
             >
-              {sourceParts.join("・")}
+              {sourceParts.join(t.joiner)}
             </p>
           )}
           {hasUpdated && (
             <p data-slot="kpi-card-updated" className="text-xs leading-normal text-muted-foreground">
-              {updatedAtText(updatedAt, updatedAtDisplay, locale, now, timeZone)}
+              {updatedAtText(updatedAt, updatedAtDisplay, locale, t, now, timeZone)}
             </p>
           )}
           {showSparkline && (
@@ -674,7 +879,7 @@ export function KpiCard({
                 height={SPARKLINE_HEIGHT}
                 color="text-chart-1"
                 highlight="latest"
-                aria-label={`${label}の推移（直近 ${historyPoints.length} 点）`}
+                aria-label={t.history(label, historyPoints.length)}
               />
             </div>
           )}
@@ -684,16 +889,17 @@ export function KpiCard({
   )
 }
 
-/** 「3 分前に更新」「2026/10/20 14:30 に更新」「2026/10/20 14:30 に更新（3 分前）」。 */
+/** 「3 分前に更新」「2026/10/20 14:30 に更新」「2026/10/20 14:30 に更新（3 分前）」（英語は "Updated 3 minutes ago" など）。 */
 function updatedAtText(
   updatedAt: Date | string | number,
   display: "relative" | "absolute" | "both",
   locale: string,
+  t: KpiText,
   now: Date | number | undefined,
   timeZone?: string,
 ): string {
   const relative = formatRelativeTime(updatedAt, { now, locale })
-  if (display === "relative") return `${relative}に更新`
+  if (display === "relative") return t.updatedRelative(relative)
   const absolute = formatDate(updatedAt, "datetime", locale, { timeZone })
-  return display === "absolute" ? `${absolute} に更新` : `${absolute} に更新（${relative}）`
+  return display === "absolute" ? t.updatedAbsolute(absolute) : t.updatedBoth(absolute, relative)
 }