@squadbase/vantage 0.6.2-dev1.54bde93 → 0.6.2-dev1.56da87f

package/dist/slide/index.js

@@ -1,10 +1,10 @@
-import { DeltaText } from '../chunk-6OTTGAPO.js';
-export { DeltaText } from '../chunk-6OTTGAPO.js';
+import { DeltaText } from '../chunk-TRMHNMMZ.js';
+export { DeltaText } from '../chunk-TRMHNMMZ.js';
 import { useSearchState } from '../chunk-ZO62C6T4.js';
 import '../chunk-6S4BAIGV.js';
-import { EChart } from '../chunk-JXFCSF3K.js';
-import { formatValue, EMPTY_VALUE } from '../chunk-57GHR5LN.js';
-import '../chunk-PDOBHMUQ.js';
+import { EChart } from '../chunk-EG4PX726.js';
+import { formatValue, EMPTY_VALUE } from '../chunk-3RJEOP3J.js';
+import { uiLanguage, useLocale } from '../chunk-ROHNXP7J.js';
 import '../chunk-U736PVHY.js';
 import { createContext, useRef, useState, useLayoutEffect, useContext, createElement, Children, isValidElement, useCallback, cloneElement, useMemo, useEffect } from 'react';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
@@ -1700,8 +1700,13 @@ function SlideHeading({ title, eyebrow }) {
     heading
   ] });
 }
+var TEXT = {
+  ja: { asOf: (asOf) => `${asOf} \u6642\u70B9`, source: (source) => `\u51FA\u5178: ${source}` },
+  en: { asOf: (asOf) => `As of ${asOf}`, source: (source) => `Source: ${source}` }
+};
 function SlideSourceLine({ asOf, source, page }) {
-  const text = [asOf ? `${asOf} \u6642\u70B9` : null, source ? `\u51FA\u5178: ${source}` : null].filter(Boolean).join(" / ");
+  const t = TEXT[uiLanguage(useLocale())];
+  const text = [asOf ? t.asOf(asOf) : null, source ? t.source(source) : null].filter(Boolean).join(" / ");
   if (!text && !page) return null;
   return /* @__PURE__ */ jsx(
     "p",
@@ -1725,7 +1730,7 @@ var MAX_INSIGHTS = 3;
 var MAX_INSIGHT_CHARS = 40;
 var LINE_TYPES = ["solid", "dashed", "dotted"];
 var SYMBOLS = ["circle", "rect", "triangle", "diamond"];
-function buildSlideChartOption(chart) {
+function buildSlideChartOption(chart, locale) {
   return {
     animation: false,
     textStyle: { fontSize: SLIDE_SPEC.fontSize.caption },
@@ -1761,7 +1766,7 @@ function buildSlideChartOption(chart) {
       axisLabel: {
         fontSize: SLIDE_SPEC.fontSize.caption,
         hideOverlap: true,
-        formatter: (v) => formatValue(v, "compact")
+        formatter: (v) => formatValue(v, "compact", locale)
       }
     },
     ...chart.type === "bar" && chart.series.length > 1 ? { aria: { enabled: true, decal: { show: true } } } : {},
@@ -1782,7 +1787,8 @@ function SlideChartInsight({ title, chart, insights, chartSide = "left", asOf, s
   const hasSource = Boolean(asOf || source);
   if (insights.some((t) => t.length > MAX_INSIGHT_CHARS)) console.warn(`SlideChartInsight: an insight is over ${MAX_INSIGHT_CHARS} characters; the column is narrow. Shorten it.`);
   if (insights.length > MAX_INSIGHTS) console.warn(`SlideChartInsight: ${insights.length} insights; ${MAX_INSIGHTS} fit beside the chart. Split the slide.`);
-  const option = useMemo(() => buildSlideChartOption(chart), [chart]);
+  const locale = useLocale();
+  const option = useMemo(() => buildSlideChartOption(chart, locale), [chart, locale]);
   const chartFirst = chartSide === "left";
   const chartColumn = /* @__PURE__ */ jsx(SlideColumn, { span: 7, children: /* @__PURE__ */ jsx("div", { "data-waitfor": "canvas", style: { minHeight: 0, height: "100%" }, children: /* @__PURE__ */ jsx(EChart, { option, height: "100%", ariaLabel: title }) }) });
   const insightsColumn = /* @__PURE__ */ jsx(SlideColumn, { span: 5, children: /* @__PURE__ */ jsx(
@@ -1843,11 +1849,16 @@ function SlideChartInsight({ title, chart, insights, chartSide = "left", asOf, s
     }
   );
 }
+var TEXT2 = {
+  ja: { asOf: (asOf) => `${asOf} \u6642\u70B9`, source: (source) => `\u51FA\u5178: ${source}`, separator: "\u3000|\u3000" },
+  en: { asOf: (asOf) => `As of ${asOf}`, source: (source) => `Source: ${source}`, separator: " | " }
+};
 function SlideCover({ title, subtitle, period, author, asOf, source }) {
+  const t = TEXT2[uiLanguage(useLocale())];
   const meta = [
     period,
     author,
-    [asOf ? `${asOf} \u6642\u70B9` : null, source ? `\u51FA\u5178: ${source}` : null].filter(Boolean).join(" / ") || void 0
+    [asOf ? t.asOf(asOf) : null, source ? t.source(source) : null].filter(Boolean).join(" / ") || void 0
   ].filter(Boolean);
   return /* @__PURE__ */ jsxs(
     "section",
@@ -1909,7 +1920,7 @@ function SlideCover({ title, subtitle, period, author, asOf, source }) {
               lineHeight: SLIDE_SPEC.lineHeight.body,
               color: "var(--slide-muted)"
             },
-            children: meta.join("\u3000|\u3000")
+            children: meta.join(t.separator)
           }
         )
       ]
@@ -2014,21 +2025,38 @@ function SlideExecSummary({ title, points, layout = "rows", asOf, source }) {
 }
 var MAX_ITEMS = 4;
 var ARROW = { up: "\u25B2", down: "\u25BC", flat: "\u25AC" };
-var WORD = { up: "\u5897", down: "\u6E1B", flat: "\u6A2A\u3070\u3044" };
-function deltaView(delta, betterWhen) {
+var TEXT3 = {
+  ja: {
+    up: "\u5897",
+    down: "\u6E1B",
+    flat: "\u6A2A\u3070\u3044",
+    target: (target) => `\u76EE\u6A19 ${target}`,
+    attainment: (shown, rate) => `${shown}(\u9054\u6210\u7387 ${rate})`
+  },
+  en: {
+    up: "Up",
+    down: "Down",
+    flat: "Flat",
+    target: (target) => `Target ${target}`,
+    attainment: (shown, rate) => `${shown} (${rate} attained)`
+  }
+};
+function deltaView(delta, betterWhen, locale) {
   const direction = delta.value > 0 ? "up" : delta.value < 0 ? "down" : "flat";
   const color = direction === "flat" ? "var(--slide-muted)" : direction === betterWhen ? "var(--positive)" : "var(--negative)";
-  const amount = formatValue(delta.value, delta.format, void 0, { signDisplay: "exceptZero" });
-  return { color, text: `${ARROW[direction]} ${WORD[direction]} ${amount}` };
+  const amount = formatValue(delta.value, delta.format, locale, { signDisplay: "exceptZero" });
+  return { color, text: `${ARROW[direction]} ${TEXT3[uiLanguage(locale)][direction]} ${amount}` };
 }
-function targetText(item) {
+function targetText(item, locale) {
   if (item.target === void 0) return void 0;
+  const t = TEXT3[uiLanguage(locale)];
   const { value, target, betterWhen = "up" } = item;
   const rate = value === null ? void 0 : betterWhen === "down" ? target / value : value / target;
-  const shown = `\u76EE\u6A19 ${formatValue(target, item.format)}`;
-  return rate === void 0 || !Number.isFinite(rate) ? shown : `${shown}(\u9054\u6210\u7387 ${formatValue(rate, { type: "percent", digits: 0 })})`;
+  const shown = t.target(formatValue(target, item.format, locale));
+  return rate === void 0 || !Number.isFinite(rate) ? shown : t.attainment(shown, formatValue(rate, { type: "percent", digits: 0 }, locale));
 }
 function SlideKpiGrid({ title, items, asOf, source }) {
+  const locale = useLocale();
   const hasSource = Boolean(asOf || source);
   if (items.length > MAX_ITEMS) console.warn(`SlideKpiGrid: ${items.length} items; ${MAX_ITEMS} fit the canvas. Split the slide.`);
   return /* @__PURE__ */ jsxs(
@@ -2062,8 +2090,8 @@ function SlideKpiGrid({ title, items, asOf, source }) {
               alignItems: "center"
             },
             children: items.map((item, i) => {
-              const delta = item.delta ? deltaView({ value: item.delta.value, format: item.delta.format ?? item.format }, item.betterWhen ?? "up") : void 0;
-              const target = targetText(item);
+              const delta = item.delta ? deltaView({ value: item.delta.value, format: item.delta.format ?? item.format }, item.betterWhen ?? "up", locale) : void 0;
+              const target = targetText(item, locale);
               return /* @__PURE__ */ jsxs(
                 "div",
                 {
@@ -2089,7 +2117,7 @@ function SlideKpiGrid({ title, items, asOf, source }) {
                           fontWeight: 700,
                           fontVariantNumeric: "tabular-nums"
                         },
-                        children: item.display ?? formatValue(item.value, item.format)
+                        children: item.display ?? formatValue(item.value, item.format, locale)
                       }
                     ),
                     delta && /* @__PURE__ */ jsxs("span", { style: { fontSize: "var(--slide-size-body)", lineHeight: SLIDE_SPEC.lineHeight.heading, fontWeight: 700, color: delta.color }, children: [
@@ -2113,16 +2141,21 @@ function SlideKpiGrid({ title, items, asOf, source }) {
   );
 }
 var ARROW2 = { up: "\u25B2", down: "\u25BC", flat: "\u25AC" };
-var WORD2 = { up: "\u5897", down: "\u6E1B", flat: "\u6A2A\u3070\u3044" };
-function deltaView2(delta, betterWhen) {
+var TEXT4 = {
+  ja: { up: "\u5897", down: "\u6E1B", flat: "\u6A2A\u3070\u3044", trend: (label) => `${label}\u306E\u63A8\u79FB` },
+  en: { up: "Up", down: "Down", flat: "Flat", trend: (label) => `${label} trend` }
+};
+function deltaView2(delta, betterWhen, locale) {
   const direction = delta.value > 0 ? "up" : delta.value < 0 ? "down" : "flat";
   const color = direction === "flat" ? "var(--slide-muted)" : direction === betterWhen ? "var(--positive)" : "var(--negative)";
-  const amount = formatValue(delta.value, delta.format, void 0, { signDisplay: "exceptZero" });
-  return { color, text: `${ARROW2[direction]} ${WORD2[direction]} ${amount}` };
+  const amount = formatValue(delta.value, delta.format, locale, { signDisplay: "exceptZero" });
+  return { color, text: `${ARROW2[direction]} ${TEXT4[uiLanguage(locale)][direction]} ${amount}` };
 }
 function SlideKpiHero({ title, label, value, format, display, delta, betterWhen = "up", comparisonLabel, trend, asOf, source }) {
+  const locale = useLocale();
+  const t = TEXT4[uiLanguage(locale)];
   const hasSource = Boolean(asOf || source);
-  const deltaShown = delta ? deltaView2({ value: delta.value, format: delta.format ?? format }, betterWhen) : void 0;
+  const deltaShown = delta ? deltaView2({ value: delta.value, format: delta.format ?? format }, betterWhen, locale) : void 0;
   const option = useMemo(() => {
     if (!trend || trend.length === 0) return void 0;
     return {
@@ -2140,7 +2173,7 @@ function SlideKpiHero({ title, label, value, format, display, delta, betterWhen
       yAxis: {
         type: "value",
         scale: true,
-        axisLabel: { fontSize: SLIDE_SPEC.fontSize.caption, hideOverlap: true, formatter: (v) => formatValue(v, "compact") }
+        axisLabel: { fontSize: SLIDE_SPEC.fontSize.caption, hideOverlap: true, formatter: (v) => formatValue(v, "compact", locale) }
       },
       series: [
         {
@@ -2153,7 +2186,7 @@ function SlideKpiHero({ title, label, value, format, display, delta, betterWhen
         }
       ]
     };
-  }, [trend]);
+  }, [trend, locale]);
   return /* @__PURE__ */ jsxs(
     "section",
     {
@@ -2198,7 +2231,7 @@ function SlideKpiHero({ title, label, value, format, display, delta, betterWhen
                       fontWeight: 700,
                       fontVariantNumeric: "tabular-nums"
                     },
-                    children: display ?? formatValue(value, format)
+                    children: display ?? formatValue(value, format, locale)
                   }
                 ),
                 (deltaShown || comparisonLabel) && /* @__PURE__ */ jsxs("span", { style: { display: "flex", flexWrap: "wrap", alignItems: "baseline", gap: SLIDE_SPEC.space.sm, fontSize: "var(--slide-size-body)", lineHeight: SLIDE_SPEC.lineHeight.heading }, children: [
@@ -2208,7 +2241,7 @@ function SlideKpiHero({ title, label, value, format, display, delta, betterWhen
               ]
             }
           ) }),
-          option && /* @__PURE__ */ jsx(SlideColumn, { span: 6, children: /* @__PURE__ */ jsx("div", { "data-waitfor": "canvas", style: { minHeight: 0, height: "100%" }, children: /* @__PURE__ */ jsx(EChart, { option, height: "100%", ariaLabel: `${label}\u306E\u63A8\u79FB` }) }) })
+          option && /* @__PURE__ */ jsx(SlideColumn, { span: 6, children: /* @__PURE__ */ jsx("div", { "data-waitfor": "canvas", style: { minHeight: 0, height: "100%" }, children: /* @__PURE__ */ jsx(EChart, { option, height: "100%", ariaLabel: t.trend(label) }) }) })
         ] }),
         hasSource && /* @__PURE__ */ jsx(SlideSourceLine, { asOf, source })
       ]
@@ -2217,14 +2250,19 @@ function SlideKpiHero({ title, label, value, format, display, delta, betterWhen
 }
 var MAX_ITEMS2 = 5;
 var MAX_DUE_CHARS = 10;
+var HEADS = {
+  ja: { owner: "\u62C5\u5F53", due: "\u671F\u9650", metric: "\u78BA\u8A8D\u3059\u308B\u6307\u6A19" },
+  en: { owner: "Owner", due: "Due", metric: "Metric to watch" }
+};
 function SlideNextActions({ title, items, asOf, source }) {
+  const head = HEADS[uiLanguage(useLocale())];
   const hasSource = Boolean(asOf || source);
   if (items.length > MAX_ITEMS2) console.warn(`SlideNextActions: ${items.length} items; ${MAX_ITEMS2} fit the canvas. Split the slide.`);
   if (items.some((it) => (it.due?.length ?? 0) > MAX_DUE_CHARS)) console.warn(`SlideNextActions: a due date is over ${MAX_DUE_CHARS} characters; the column is one line wide. Shorten it.`);
   const cols = [
-    { key: "owner", head: "\u62C5\u5F53", fr: 2 },
-    { key: "due", head: "\u671F\u9650", fr: 2 },
-    { key: "metric", head: "\u78BA\u8A8D\u3059\u308B\u6307\u6A19", fr: 3 }
+    { key: "owner", head: head.owner, fr: 2 },
+    { key: "due", head: head.due, fr: 2 },
+    { key: "metric", head: head.metric, fr: 3 }
   ];
   const shown = cols.filter((c) => items.some((it) => it[c.key]));
   const template = [`${SLIDE_SPEC.grid.columnWidth}px`, "minmax(0, 6fr)", ...shown.map((c) => `minmax(0, ${c.fr}fr)`)].join(" ");
@@ -2300,10 +2338,20 @@ function SlideNextActions({ title, items, asOf, source }) {
 }
 var MAX_ROWS = 8;
 var DENSE_ROWS = 6;
-var STATUS = {
-  on: { label: "\u9806\u8ABF", color: "var(--positive)" },
-  risk: { label: "\u8981\u6CE8\u610F", color: "var(--warning)" },
-  off: { label: "\u9045\u5EF6", color: "var(--negative)" }
+var STATUS_COLOR = {
+  on: "var(--positive)",
+  risk: "var(--warning)",
+  off: "var(--negative)"
+};
+var TEXT5 = {
+  ja: {
+    status: { on: "\u9806\u8ABF", risk: "\u8981\u6CE8\u610F", off: "\u9045\u5EF6" },
+    head: { metric: "\u6307\u6A19", target: "\u76EE\u6A19", actual: "\u5B9F\u7E3E", attainment: "\u9054\u6210\u7387", status: "\u72B6\u614B" }
+  },
+  en: {
+    status: { on: "On track", risk: "At risk", off: "Off track" },
+    head: { metric: "Metric", target: "Target", actual: "Actual", attainment: "Attainment", status: "Status" }
+  }
 };
 function attainment(row) {
   if (row.value === null || row.target === void 0) return void 0;
@@ -2311,9 +2359,11 @@ function attainment(row) {
   return Number.isFinite(rate) ? rate : void 0;
 }
 function SlideScorecardTable({ title, rows, columns, asOf, source }) {
+  const locale = useLocale();
+  const t = TEXT5[uiLanguage(locale)];
   const hasSource = Boolean(asOf || source);
   if (rows.length > MAX_ROWS) console.warn(`SlideScorecardTable: ${rows.length} rows; ${MAX_ROWS} fit the canvas. Split the slide.`);
-  const head = { metric: "\u6307\u6A19", target: "\u76EE\u6A19", actual: "\u5B9F\u7E3E", attainment: "\u9054\u6210\u7387", status: "\u72B6\u614B", ...columns };
+  const head = { ...t.head, ...columns };
   const showAttainment = rows.some((r) => attainment(r) !== void 0);
   const cellSize = rows.length > DENSE_ROWS ? SLIDE_SPEC.fontSize.caption : "var(--slide-size-body)";
   const cell = {
@@ -2353,13 +2403,13 @@ function SlideScorecardTable({ title, rows, columns, asOf, source }) {
           ] }) }),
           /* @__PURE__ */ jsx("tbody", { children: rows.map((r, i) => /* @__PURE__ */ jsxs("tr", { children: [
             /* @__PURE__ */ jsx("th", { scope: "row", style: { ...cell, fontWeight: 700 }, children: r.metric }),
-            /* @__PURE__ */ jsx("td", { style: num, children: r.target === void 0 ? EMPTY_VALUE : formatValue(r.target, r.format) }),
-            /* @__PURE__ */ jsx("td", { style: { ...num, fontWeight: 700 }, children: r.display ?? formatValue(r.value, r.format) }),
-            showAttainment && /* @__PURE__ */ jsx("td", { style: num, children: attainment(r) === void 0 ? EMPTY_VALUE : formatValue(attainment(r), { type: "percent", digits: 0 }) }),
+            /* @__PURE__ */ jsx("td", { style: num, children: r.target === void 0 ? EMPTY_VALUE : formatValue(r.target, r.format, locale) }),
+            /* @__PURE__ */ jsx("td", { style: { ...num, fontWeight: 700 }, children: r.display ?? formatValue(r.value, r.format, locale) }),
+            showAttainment && /* @__PURE__ */ jsx("td", { style: num, children: attainment(r) === void 0 ? EMPTY_VALUE : formatValue(attainment(r), { type: "percent", digits: 0 }, locale) }),
             /* @__PURE__ */ jsxs("td", { style: cell, children: [
-              /* @__PURE__ */ jsx("span", { "aria-hidden": true, style: { color: STATUS[r.status].color }, children: "\u25CF" }),
+              /* @__PURE__ */ jsx("span", { "aria-hidden": true, style: { color: STATUS_COLOR[r.status] }, children: "\u25CF" }),
               " ",
-              STATUS[r.status].label
+              t.status[r.status]
             ] })
           ] }, i)) })
         ] }) }),
@@ -2400,6 +2450,7 @@ function SlideChartFull({ title, chart, note, asOf, source }) {
 var MAX_POINTS2 = 3;
 var MAX_POINT_CHARS = 24;
 function SlideComparison({ title, columns, verdict, asOf, source }) {
+  const locale = useLocale();
   const hasSource = Boolean(asOf || source);
   if (columns.length < 2 || columns.length > 3) console.warn(`SlideComparison: ${columns.length} columns; 2\u20133 fit. Split the slide.`);
   if (columns.some((c) => c.points.length > MAX_POINTS2 || c.points.some((t) => t.length > MAX_POINT_CHARS)))
@@ -2425,7 +2476,7 @@ function SlideComparison({ title, columns, verdict, asOf, source }) {
       children: [
         /* @__PURE__ */ jsx(SlideHeading, { title }),
         /* @__PURE__ */ jsx(SlideColumns, { children: columns.map((col, i) => {
-          const main = col.display ?? (col.value === void 0 ? void 0 : col.value === null ? "\u2014" : formatValue(col.value, col.format));
+          const main = col.display ?? (col.value === void 0 ? void 0 : col.value === null ? "\u2014" : formatValue(col.value, col.format, locale));
           return /* @__PURE__ */ jsx(SlideColumn, { span, children: /* @__PURE__ */ jsxs(
             "div",
             {