TrendIndicator

増減の矢印と変化率。良し悪しは positiveIsGood で決まる。

前期比などの変化を、矢印と変化率で示します。「上がった＝良い」とは限らないので、色は direction と positiveIsGood の組み合わせで決まります — 解約率のように下がる方が良い指標では positiveIsGood={false} を渡してください。

export const client = "only";

import { TrendIndicator } from "@squadbase/vantage/components";

export default function Example() {
  return (
    <div className="grid w-[26rem] grid-cols-[1fr_auto] gap-y-3 text-sm">
      <span>売上</span>
      <TrendIndicator value={12.4} direction="up" />
      <span>新規顧客</span>
      <TrendIndicator value={3.1} direction="down" />
      <span>解約率（下がる方が良い）</span>
      <TrendIndicator value={0.4} direction="down" positiveIsGood={false} />
      <span>変化なし</span>
      <TrendIndicator value={0} direction="neutral" />
    </div>
  );
}

import { TrendIndicator } from "@squadbase/vantage/components";
import type { TrendDirection } from "@squadbase/vantage/components";

PropType

value?number

変化率（`12.4` で 12.4%）。

Typenumber

direction?"up" | "down" | "neutral"

矢印の向き。**必須**。

Type"up" | "down" | "neutral"

positiveIsGood?boolean

上がることが良いか。`false` にすると色が反転する。

Typeboolean

Defaulttrue

className?string

足すクラス。

Typestring

色は 3 通りです。良い方向なら --chart-1、悪い方向なら --primary、neutral なら --muted-foreground。テーマトークンを変えればここも一緒に変わります。