niceeval 0.5.4 → 0.6.1

package/src/report/react/AttemptList.tsx

@@ -0,0 +1,113 @@
+// AttemptList:实体列表的叶子层——每项一个 Attempt,固定展示判定、断言、error、Judge 评语
+// (assertions 的 detail/evidence)与证据引用(locator)。它不预设只看失败,
+// 报告作者过滤 items、用 .slice() 限量,total 让渲染面如实报告剩余数量,不静默截断。
+// ExperimentList / EvalList 的下钻数组是同一个 AttemptListItem[],这里的渲染逻辑因此
+// 也是它们展开区里"逐条 attempt"那一层的唯一实现(通过 AttemptRow 导出复用,不重写一遍)。
+
+import type { ReactElement } from "react";
+import type { AttemptListItem } from "../types.ts";
+import type { AttemptLocator } from "../../results/locator.ts";
+import { DEFAULT_REPORT_LOCALE, localeText, type ReportLocale } from "../locale.ts";
+import { colorClassForKey } from "./colors.ts";
+import { cx, formatDurationMs, formatUSD, verdictMark } from "./format.ts";
+
+/** locator + 判定符的普通 <a>,AttemptList/EvalList/ExperimentList 共用。 */
+export function AttemptLocatorBadge({
+  item,
+  attemptHref,
+}: {
+  item: Pick<AttemptListItem, "locator" | "verdict">;
+  attemptHref: (locator: AttemptLocator) => string;
+}): ReactElement {
+  return (
+    <a
+      className={cx("nre-locator", `nre-verdict-${item.verdict}`)}
+      href={attemptHref(item.locator)}
+    >
+      {item.locator}
+      <span className="nre-locator-mark">{verdictMark(item.verdict)}</span>
+    </a>
+  );
+}
+
+function AssertionRow({ assertion, locale }: { assertion: AttemptListItem["assertions"][number]; locale: ReportLocale }): ReactElement {
+  return (
+    <li className={cx("nre-assertion", `nre-assertion-${assertion.severity}`, !assertion.passed && "nre-assertion-failed")}>
+      <span className="nre-assertion-severity">{assertion.severity}</span>
+      <span className="nre-assertion-name">{assertion.name}</span>
+      <span className="nre-assertion-score">
+        {localeText(locale, "attemptList.score", { score: assertion.score })}
+      </span>
+      {(assertion.detail || assertion.evidence) && (
+        <details className="nre-assertion-more">
+          <summary>{localeText(locale, "attemptList.details")}</summary>
+          {assertion.detail && <p className="nre-assertion-detail">{assertion.detail}</p>}
+          {assertion.evidence && <blockquote className="nre-assertion-evidence">{assertion.evidence}</blockquote>}
+        </details>
+      )}
+    </li>
+  );
+}
+
+/** 一条 Attempt 的完整卡片:AttemptList 自己的一项,也是 EvalList 展开区里的一行。 */
+export function AttemptRow({
+  item,
+  attemptHref,
+  locale = DEFAULT_REPORT_LOCALE,
+}: {
+  item: AttemptListItem;
+  attemptHref: (locator: AttemptLocator) => string;
+  locale?: ReportLocale;
+}): ReactElement {
+  return (
+    <li className={cx("nre-attempt", `nre-attempt-${item.verdict}`)}>
+      <div className="nre-attempt-head">
+        <AttemptLocatorBadge item={item} attemptHref={attemptHref} />
+        <span className="nre-attempt-eval">{item.evalId}</span>
+        <span className="nre-attempt-experiment">{item.experimentId}</span>
+        {/* agent 键:稳定散列上色,与其它块(MetricMatrix 列头、DeltaTable 行…)同键同色 */}
+        <span className={cx("nre-attempt-agent", "nre-key", colorClassForKey(item.agent))}>{item.agent}</span>
+        <span className="nre-attempt-duration">{formatDurationMs(item.durationMs)}</span>
+        {item.costUSD !== undefined && <span className="nre-attempt-cost">{formatUSD(item.costUSD)}</span>}
+      </div>
+      {item.error && <p className="nre-attempt-error">{item.error}</p>}
+      {item.assertions.length > 0 && (
+        <ul className="nre-assertions">
+          {item.assertions.map((a, i) => (
+            <AssertionRow key={i} assertion={a} locale={locale} />
+          ))}
+        </ul>
+      )}
+    </li>
+  );
+}
+
+export function AttemptList({
+  items,
+  total,
+  attemptHref,
+  className,
+  locale = DEFAULT_REPORT_LOCALE,
+}: {
+  items: AttemptListItem[];
+  /** items 被 slice 时的原始数量;如实显示还剩多少条没展示。 */
+  total?: number;
+  attemptHref: (locator: AttemptLocator) => string;
+  className?: string;
+  locale?: ReportLocale;
+}): ReactElement {
+  const remaining = (total ?? items.length) - items.length;
+  return (
+    <section className={cx("nre", "nre-attempt-list", className)}>
+      {items.length === 0 && <p className="nre-attempt-list-empty">{localeText(locale, "attemptList.empty")}</p>}
+      <ul className="nre-attempts">
+        {items.map((item) => (
+          <AttemptRow key={item.locator} item={item} attemptHref={attemptHref} locale={locale} />
+        ))}
+      </ul>
+      {remaining > 0 && (
+        <p className="nre-truncated">{localeText(locale, "attemptList.truncated", { n: remaining })}</p>
+      )}
+    </section>
+  );
+}

package/src/report/react/DeltaTable.tsx

@@ -4,9 +4,10 @@
 
 import type { ReactElement } from "react";
 import type { DeltaData, MetricColumn } from "../types.ts";
+import { DEFAULT_REPORT_LOCALE, localeText, resolveMetricLabel, type ReportLocale } from "../locale.ts";
 import { MetricCellView } from "./cell.tsx";
 import { colorClassForKey } from "./colors.ts";
-import { MISSING_TEXT, cx } from "./format.ts";
+import { cx } from "./format.ts";
 
 /** Δ 的语义配色 class:好/坏由 better 方向判定,不看正负号本身。 */
 function deltaToneClass(delta: number | null, better: MetricColumn["better"]): string {
@@ -20,20 +21,22 @@ function deltaToneClass(delta: number | null, better: MetricColumn["better"]): s
 export function DeltaTable({
   data,
   className,
+  locale = DEFAULT_REPORT_LOCALE,
 }: {
   data: DeltaData;
   className?: string;
+  locale?: ReportLocale;
 }): ReactElement {
   return (
     <table className={cx("nre", "nre-delta-table", className)}>
       <thead>
         <tr>
           <th scope="col" className="nre-dimension">
-            pair (A → B)
+            {localeText(locale, "delta.pairHeader")}
           </th>
           {data.columns.map((col) => (
             <th scope="col" key={col.key} className="nre-metric-col">
-              {col.label}
+              {resolveMetricLabel(col.label, locale, col.key)}
               {col.unit && <span className="nre-unit">({col.unit})</span>}
             </th>
           ))}
@@ -57,16 +60,16 @@ export function DeltaTable({
                   {/* A/B 走统一的 MetricCellView:缺数据文案与覆盖率角标同一套 */}
                   <span className="nre-delta-side nre-delta-a">
                     <span className="nre-delta-tag">A</span>
-                    <MetricCellView cell={cell.a} />
+                    <MetricCellView cell={cell.a} locale={locale} />
                   </span>
                   <span className="nre-delta-side nre-delta-b">
                     <span className="nre-delta-tag">B</span>
-                    <MetricCellView cell={cell.b} />
+                    <MetricCellView cell={cell.b} locale={locale} />
                   </span>
                   <span className={cx("nre-delta-side", "nre-delta-d", deltaToneClass(cell.delta, col.better))}>
                     <span className="nre-delta-tag">Δ</span>
                     {/* 任一侧 null → delta null:显示缺,不硬算 */}
-                    {cell.delta === null ? <span className="nre-missing">{MISSING_TEXT}</span> : cell.display}
+                    {cell.delta === null ? <span className="nre-missing">{localeText(locale, "cell.missing")}</span> : cell.display}
                   </span>
                 </td>
               );

package/src/report/react/ExperimentList.tsx

@@ -0,0 +1,220 @@
+// ExperimentList:实体列表的第一级。web 面是一行一个 experiment 的固定列比较表；
+// 每行用原生 <details> 展开到 Eval 与 Attempt locator。数据仍完全来自
+// ExperimentList.data(),不恢复旧 ExperimentTable 的混合实体计算层。
+
+import type { ReactElement } from "react";
+import type { AttemptLocator } from "../../results/locator.ts";
+import type { AttemptListItem, ExperimentListEvalRow, ExperimentListItem } from "../types.ts";
+import { attemptItemReason } from "../format.ts";
+import { DEFAULT_REPORT_LOCALE, localeText, type ReportLocale } from "../locale.ts";
+import { AttemptLocatorBadge } from "./AttemptList.tsx";
+import { MetricCellView } from "./cell.tsx";
+import { colorClassForKey } from "./colors.ts";
+import { cx, formatDurationMs, formatUSD, verdictMark } from "./format.ts";
+
+const verdictOrder = ["passed", "failed", "errored", "skipped"] as const;
+
+function passRateTone(value: number | null): string | undefined {
+  if (value === null) return undefined;
+  if (value >= 0.8) return "nre-good";
+  if (value >= 0.5) return "nre-warn";
+  return "nre-bad";
+}
+
+function formatDate(value: string, locale: ReportLocale): string {
+  const date = new Date(value);
+  if (Number.isNaN(date.valueOf())) return value;
+  return new Intl.DateTimeFormat(locale === "zh-CN" ? "zh-CN" : "en", {
+    month: "short",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+  }).format(date);
+}
+
+function VerdictSummary({ item, locale }: { item: ExperimentListItem; locale: ReportLocale }): ReactElement {
+  const parts = verdictOrder
+    .filter((verdict) => item.verdicts[verdict] > 0)
+    .map((verdict) => `${item.verdicts[verdict]} ${localeText(locale, `verdict.${verdict}`)}`);
+  return <span className="nre-experiment-pill">{parts.join(" / ") || "—"}</span>;
+}
+
+function ExperimentAttemptRow({
+  attempt,
+  last,
+  attemptHref,
+}: {
+  attempt: AttemptListItem;
+  last: boolean;
+  attemptHref: (locator: AttemptLocator) => string;
+}): ReactElement {
+  const reason = attemptItemReason(attempt);
+  return (
+    <li className={cx("nre-experiment-attempt-row", `nre-eval-${attempt.verdict}`)}>
+      <span className="nre-attempt-branch" aria-hidden="true">{last ? "└─" : "├─"}</span>
+      <span className="nre-eval-attempt-badges">
+        <AttemptLocatorBadge item={attempt} attemptHref={attemptHref} />
+      </span>
+      <span className="nre-eval-attempt-metrics">
+        {formatDurationMs(attempt.durationMs)}
+        {attempt.costUSD !== undefined && <> · {formatUSD(attempt.costUSD)}</>}
+      </span>
+      <span className="nre-eval-reason">{reason ?? "—"}</span>
+    </li>
+  );
+}
+
+function EvalAttempts({
+  row,
+  attemptHref,
+  locale,
+}: {
+  row: ExperimentListEvalRow;
+  attemptHref: (locator: AttemptLocator) => string;
+  locale: ReportLocale;
+}): ReactElement {
+  return (
+    <li className="nre-experiment-eval">
+      <div className={cx("nre-experiment-eval-header", `nre-eval-${row.verdict}`)}>
+        <span className={cx("nre-eval-verdict", `nre-verdict-${row.verdict}`)}>{verdictMark(row.verdict)}</span>
+        <span className="nre-eval-id">{row.evalId}</span>
+        <span className="nre-eval-attempt-count">{localeText(locale, "overview.attemptsCount", { n: row.attempts.length })}</span>
+        <span className="nre-eval-summary">
+          {row.verdict === "passed"
+            ? [formatDurationMs(row.duration.value ?? 0), row.cost.value === null ? undefined : formatUSD(row.cost.value)]
+                .filter((value): value is string => value !== undefined)
+                .join(" · ")
+            : row.reason}
+        </span>
+      </div>
+      <ul className="nre-experiment-attempts">
+        {row.attempts.map((attempt, index) => (
+          <ExperimentAttemptRow
+            key={attempt.locator}
+            attempt={attempt}
+            last={index === row.attempts.length - 1}
+            attemptHref={attemptHref}
+          />
+        ))}
+      </ul>
+    </li>
+  );
+}
+
+function Flags({ flags, locale }: { flags: Record<string, unknown> | undefined; locale: ReportLocale }): ReactElement | null {
+  if (!flags || Object.keys(flags).length === 0) return null;
+  return (
+    <div className="nre-experiment-flags">
+      <span>{localeText(locale, "experimentList.flags")}</span>
+      {Object.entries(flags).map(([key, value]) => (
+        <b key={key}>{key}={String(value)}</b>
+      ))}
+    </div>
+  );
+}
+
+function ExperimentRow({
+  item,
+  attemptHref,
+  locale,
+}: {
+  item: ExperimentListItem;
+  attemptHref: (locator: AttemptLocator) => string;
+  locale: ReportLocale;
+}): ReactElement {
+  return (
+    <details className="nre-experiment-entry">
+      <summary className="nre-experiment-summary">
+        <span className="nre-experiment-name" data-sort-value={item.experimentId}>
+          <b className={cx("nre-experiment-id", "nre-key", colorClassForKey(item.experimentId))}>{item.experimentId}</b>
+          <small>
+            {localeText(locale, "overview.evalsCount", { n: item.evals })}
+            {item.attempts > item.evals ? ` · ${localeText(locale, "overview.attemptsCount", { n: item.attempts })}` : ""}
+            {` · ${formatDate(item.lastRunAt, locale)}`}
+          </small>
+        </span>
+        <span data-sort-value={item.model ?? ""}>{item.model ?? localeText(locale, "experimentList.defaultModel")}</span>
+        <span data-sort-value={item.agent}>{item.agent}</span>
+        <span className="nre-num" data-sort-value={item.duration.value ?? ""}>
+          <MetricCellView cell={item.duration} locale={locale} />
+        </span>
+        <span className={cx("nre-num", passRateTone(item.passRate.value))} data-sort-value={item.passRate.value ?? ""}>
+          <MetricCellView cell={item.passRate} locale={locale} />
+        </span>
+        <span className="nre-num" data-sort-value={item.tokens.value ?? ""}>
+          <MetricCellView cell={item.tokens} locale={locale} />
+        </span>
+        <span className="nre-num" data-sort-value={item.cost.value ?? ""}>
+          <MetricCellView cell={item.cost} locale={locale} />
+        </span>
+        <span data-sort-value={item.verdicts.passed}><VerdictSummary item={item} locale={locale} /></span>
+      </summary>
+      <div className="nre-experiment-detail">
+        <Flags flags={item.flags} locale={locale} />
+        <ul className="nre-experiment-evals">
+          {item.evalRows.map((row) => (
+            <EvalAttempts key={row.evalId} row={row} attemptHref={attemptHref} locale={locale} />
+          ))}
+        </ul>
+      </div>
+    </details>
+  );
+}
+
+export function ExperimentList({
+  items,
+  attemptHref,
+  filter = false,
+  className,
+  locale = DEFAULT_REPORT_LOCALE,
+}: {
+  items: ExperimentListItem[];
+  attemptHref: (locator: AttemptLocator) => string;
+  filter?: boolean;
+  className?: string;
+  locale?: ReportLocale;
+}): ReactElement {
+  const labels = [
+    localeText(locale, "experimentList.experiment"),
+    localeText(locale, "table.model"),
+    localeText(locale, "table.agent"),
+    localeText(locale, "experimentList.avgDuration"),
+    localeText(locale, "experimentList.passRate"),
+    localeText(locale, "experimentList.tokens"),
+    localeText(locale, "experimentList.estimatedCost"),
+    localeText(locale, "experimentList.result"),
+  ];
+  const board = (
+    <div className="nre-experiment-table">
+      <div className="nre-experiment-head">
+        {labels.map((label, index) => (
+          <button
+            type="button"
+            data-nre-experiment-sort={index}
+            className={index === 4 ? "nre-sort-desc" : undefined}
+            key={label}
+          >
+            {label}
+          </button>
+        ))}
+      </div>
+      {items.length === 0 && <p className="nre-experiment-list-empty">{localeText(locale, "attemptList.empty")}</p>}
+      {items.map((item) => (
+        <ExperimentRow key={item.experimentId} item={item} attemptHref={attemptHref} locale={locale} />
+      ))}
+    </div>
+  );
+  return (
+    <div className={cx("nre", "nre-experiment-list", filter && "nre-experiment-table-wrap", className)}>
+      {filter && (
+        <input
+          className="nre-filter"
+          data-nre-experiment-filter=""
+          type="search"
+          placeholder={localeText(locale, "experimentList.filterPlaceholder")}
+        />
+      )}
+      {board}
+    </div>
+  );
+}

package/src/report/react/GroupSummary.tsx

@@ -0,0 +1,66 @@
+// GroupSummary:一组 experiment(如自定义报告里同一 <Section> 内的全部 experiment)的
+// 紧凑摘要块——恢复旧 GroupSelector 卡片的信息密度(通过率、experiment/eval 数、failed、
+// errored、总成本、最后运行时间),但只渲染 GroupSummaryData 算好的 MetricCell / 计数,
+// 不现场重算比例(docs/feature/reports/library.md「GroupSummary」)。errored 为 0 时省略该片段(旧卡片同一姿态),
+// 但这只是渲染取舍——数据侧 verdicts.errored 字段本身永不省略。
+
+import type { ReactElement } from "react";
+import type { GroupSummaryData } from "../types.ts";
+import { DEFAULT_REPORT_LOCALE, localeText, type ReportLocale } from "../locale.ts";
+import { MetricCellView } from "./cell.tsx";
+import { cx, formatUSD } from "./format.ts";
+
+export function GroupSummary({
+  data,
+  className,
+  locale = DEFAULT_REPORT_LOCALE,
+}: {
+  data: GroupSummaryData;
+  className?: string;
+  locale?: ReportLocale;
+}): ReactElement {
+  const missing = <span className="nre-missing">{localeText(locale, "cell.missing")}</span>;
+  return (
+    <div className={cx("nre", "nre-group-summary", className)}>
+      <dl className="nre-group-kpis">
+        <div className="nre-group-kpi nre-group-kpi-rate">
+          <dt>{localeText(locale, "overview.passRate")}</dt>
+          <dd>
+            <MetricCellView cell={data.passRate} locale={locale} />
+          </dd>
+        </div>
+        <div className="nre-group-kpi">
+          <dt>{localeText(locale, "groupSummary.experiments")}</dt>
+          <dd>{data.experiments}</dd>
+        </div>
+        <div className="nre-group-kpi">
+          <dt>{localeText(locale, "overview.evals")}</dt>
+          <dd>{data.evals}</dd>
+        </div>
+        <div className="nre-group-kpi">
+          <dt>{localeText(locale, "overview.attempts")}</dt>
+          <dd>{data.attempts}</dd>
+        </div>
+        <div className="nre-group-kpi">
+          <dt>{localeText(locale, "verdict.failed")}</dt>
+          <dd className="nre-verdict-failed">{data.verdicts.failed}</dd>
+        </div>
+        {/* errored 为 0 省略这一片段(旧 GroupSelector 卡片同一姿态);数据字段本身不受影响 */}
+        {data.verdicts.errored > 0 && (
+          <div className="nre-group-kpi">
+            <dt>{localeText(locale, "verdict.errored")}</dt>
+            <dd className="nre-verdict-errored">{data.verdicts.errored}</dd>
+          </div>
+        )}
+        <div className="nre-group-kpi">
+          <dt>{localeText(locale, "overview.totalCost")}</dt>
+          {/* totalCostUSD 全缺 = null:显示缺数据,不编 $0 */}
+          <dd>{data.totalCostUSD === null ? missing : formatUSD(data.totalCostUSD)}</dd>
+        </div>
+      </dl>
+      {data.lastRunAt && (
+        <p className="nre-group-summary-time">{localeText(locale, "latestRun", { run: data.lastRunAt })}</p>
+      )}
+    </div>
+  );
+}

package/src/report/react/MetricBars.tsx

@@ -1,11 +1,13 @@
 // MetricBars:分组条形——同一份矩阵数据的另一种摆法(MetricBars.data = MetricMatrix.data)。
 // 组维度一组条、系列维度一根条、条长是指标值;竖向分组柱,柱顶标数值,系列颜色与
-// 其它组件的稳定配色一致,图例自动生成。组内按值排序,方向随 better;
-// 缺数据的系列不画柱、不编 0(与 text 面的 — 同口径)。
+// 其它组件的稳定配色一致(类名 nre-series-cN 由 CSS 上色,深色主题跟随),图例自动生成。
+// 组内按值排序,方向随 better;缺数据的系列不画柱、不编 0(与 text 面的 — 同口径)。
 
 import type { ReactElement } from "react";
-import type { AttemptRef, MatrixData, MetricCell } from "../types.ts";
-import { colorHexForKey, colorClassForKey } from "./colors.ts";
+import type { MatrixData, MetricCell } from "../types.ts";
+import type { AttemptLocator } from "../../results/locator.ts";
+import { DEFAULT_REPORT_LOCALE, resolveMetricLabel, type ReportLocale } from "../locale.ts";
+import { colorClassForKey, seriesClassForKey } from "./colors.ts";
 import { cx } from "./format.ts";
 
 const WIDTH = 640;
@@ -16,10 +18,12 @@ export function MetricBars({
   data,
   attemptHref,
   className,
+  locale = DEFAULT_REPORT_LOCALE,
 }: {
   data: MatrixData;
-  attemptHref?: (ref: AttemptRef) => string;
+  attemptHref?: (locator: AttemptLocator) => string;
   className?: string;
+  locale?: ReportLocale;
 }): ReactElement {
   // 稀疏 cells → 首次出现顺序的组/系列键 + 查找表
   const groupKeys: string[] = [];
@@ -31,6 +35,7 @@ export function MetricBars({
     byPosition.set(JSON.stringify([entry.row, entry.column]), entry.cell);
   }
 
+  const metricLabel = resolveMetricLabel(data.metric.label, locale, data.metric.key);
   const better = data.metric.better ?? "higher";
   const values = data.cells.map((c) => c.cell.value).filter((v): v is number => v !== null);
   const maxValue = values.length > 0 ? Math.max(...values) : 0;
@@ -47,7 +52,7 @@ export function MetricBars({
         className="nre-bars-svg"
         viewBox={`0 0 ${WIDTH} ${HEIGHT}`}
         role="img"
-        aria-label={`${data.metric.label} by ${data.rows} × ${data.columns}`}
+        aria-label={`${metricLabel} by ${data.rows} × ${data.columns}`}
       >
         {groupKeys.map((group, gi) => {
           const x0 = PLOT.left + gi * groupWidth;
@@ -68,34 +73,40 @@ export function MetricBars({
                 const y = PLOT.bottom - h;
                 const title = `${group} · ${series}: ${cell.display}(${cell.samples}/${cell.total})`;
                 const rect = (
-                  <rect className="nre-bar" x={x + 2} y={y} width={barWidth - 4} height={h} fill={colorHexForKey(series)}>
+                  <rect
+                    className={cx("nre-bar", seriesClassForKey(series))}
+                    x={x + 2}
+                    y={y}
+                    width={barWidth - 4}
+                    height={h}
+                  >
                     <title>{title}</title>
                   </rect>
                 );
-                const ref = cell.refs[0];
+                const locator = cell.refs[0];
                 return (
                   <g key={series}>
-                    {attemptHref && ref ? <a href={attemptHref(ref)}>{rect}</a> : rect}
+                    {attemptHref && locator ? <a href={attemptHref(locator)}>{rect}</a> : rect}
                     {/* 柱顶标数值;覆盖不全时把 samples/total 一并标出,不藏 */}
-                    <text className="nre-bar-value" x={x + barWidth / 2} y={y - 4} textAnchor="middle" fontSize={10} fill="#525252">
+                    <text className="nre-bar-value" x={x + barWidth / 2} y={y - 4} textAnchor="middle">
                       {cell.samples < cell.total ? `${cell.display} ${cell.samples}/${cell.total}` : cell.display}
                     </text>
                   </g>
                 );
               })}
-              <text className="nre-bars-group-label" x={x0 + groupWidth / 2} y={HEIGHT - 20} textAnchor="middle" fontSize={12} fill="#525252">
+              <text className="nre-bars-group-label" x={x0 + groupWidth / 2} y={HEIGHT - 20} textAnchor="middle">
                 {group}
               </text>
             </g>
           );
         })}
         {/* 基线 */}
-        <line x1={PLOT.left} y1={PLOT.bottom} x2={PLOT.right} y2={PLOT.bottom} stroke="#d4d4d4" />
+        <line className="nre-bars-baseline" x1={PLOT.left} y1={PLOT.bottom} x2={PLOT.right} y2={PLOT.bottom} />
       </svg>
       {/* 图例:系列 → 稳定配色,跨块同键同色 */}
       <figcaption className="nre-bars-legend">
         <span className="nre-bars-metric">
-          {data.metric.label}
+          {metricLabel}
           {data.metric.unit && <span className="nre-unit">({data.metric.unit})</span>}
         </span>
         {seriesKeys.map((series) => (