FunnelSteps

ファネルの各段を棒で示す。転換率も出せる。

ファネルの各段を、先頭を最大幅とする棒で表します。段の間の転換率も出せます。ECharts を持ち出すほどではない、軽い可視化です。

export const client = "only";

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

const data = [
  { label: "訪問", value: 12_400 },
  { label: "商品ページ", value: 6_820 },
  { label: "カート追加", value: 2_140 },
  { label: "購入", value: 861 },
];

export default function Example() {
  return (
    <FunnelSteps
      className="w-[30rem]"
      data={data}
      showConversion
      formatValue={(value) => value.toLocaleString("ja-JP")}
    />
  );
}

import { FunnelSteps, funnelStepsVariants } from "@squadbase/vantage/components";
import type { FunnelStep } from "@squadbase/vantage/components";

PropType

data?FunnelStep[]

各段。**先頭が最大幅**になる。

TypeFunnelStep[]

showConversion?boolean

段の間に転換率を出す。

Typeboolean

formatValue?(value: number) => string

値の書式。既定はそのまま。

Type(value: number) => string

animate?boolean

マウント時に幅を伸ばすアニメーション。

Typeboolean

size?"sm" | "md" | "lg"

Type"sm" | "md" | "lg"

Default"md"

direction?"vertical" | "horizontal"

Type"vertical" | "horizontal"

Default"vertical"

FunnelStep

interface FunnelStep {
  label: string;
  value: number;
  color?: string; // 既定はテーマの chart 色
  onClick?: () => void;
}

onClick を渡した段は押せるようになるので、その段の内訳へドリルダウンさせられます。