This commit is contained in:
zhx 2026-06-08 01:20:00 +08:00
parent 62d88d178f
commit 66ffb3647c
2 changed files with 13 additions and 2 deletions

View File

@ -65,10 +65,11 @@ function MetricSubValues({ items }) {
}
function MetricDelta({ compact = false, item }) {
const tone = item.deltaTone || (String(item.delta || "").trim().startsWith("-") ? "down" : "up");
return (
<div className={["metric-delta", compact ? "metric-delta--compact" : "", item.deltaTone === "down" ? "metric-delta--down" : ""].filter(Boolean).join(" ")}>
<div className={["metric-delta", compact ? "metric-delta--compact" : "", tone === "down" ? "metric-delta--down" : ""].filter(Boolean).join(" ")}>
<span>{item.caption}</span>
<b className={item.delta ? "" : "metric-delta-empty"}>{item.delta ? `${item.deltaTone === "down" ? "↓" : "↑"} ${item.delta.replace(/^[-+]/, "")}` : "--"}</b>
<b className={item.delta ? "" : "metric-delta-empty"}>{item.delta ? `${tone === "down" ? "↓" : "↑"} ${item.delta.replace(/^[-+]/, "")}` : "--"}</b>
</div>
);
}

View File

@ -0,0 +1,10 @@
import { render, screen } from "@testing-library/react";
import { expect, test } from "vitest";
import { MetricCard } from "./MetricCard.jsx";
test("renders a down arrow when delta text is negative", () => {
render(<MetricCard item={{ caption: "与昨日相比", delta: "-39.27%", label: "活跃用户", value: "116" }} />);
expect(screen.getByText("↓ 39.27%")).toBeInTheDocument();
});