この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
こんにちは。データアナリティクス事業本部 サービスソリューション部の北川です。
今回はReactプロジェクトで、ファネルチャートが実装できるライブラリを、いくつか試してみました。
ファネルチャートとは
ファネルチャートとは、ある目的を達成するまでのプロセスを、ステージごとに分割して表現した図表のことを指します。例えばセールスファネルチャートなら、認知されてから顧客を得るまでの一連の活動のことを指します。逆三角形の形をしているのが特徴です。
ファネル チャート (Funnel chart) は、1 つのプロセスの連続するステージを示す連続チャートを追加できるコントロールです。各ステージは減少していき、前の段階のサブセットを含みます。チャートは徐々に減少して狭まり続けるファネル形状になります。
Recharts
フレームワークには、Next.jsを採用しています。
Reactのチャートライブラリの中では、react-chartjs-2と並ぶ知名度の高いライブラリになります。React、D3.jsで構築されています。
Rechartsをインストール。
$ yarn add recharts
/myFunell.tsx
import { NextPage } from "next";
import { FunnelChart, Tooltip, Funnel, LabelList } from "recharts";
type Data = {
value: number;
name: string;
fill: string;
};
const data: Data[] = [
{
value: 100,
name: "Sent",
fill: "#8884d8",
},
{
value: 80,
name: "Viewed",
fill: "#83a6ed",
},
{
value: 50,
name: "Clicked",
fill: "#8dd1e1",
},
{
value: 40,
name: "Add To Card",
fill: "#82ca9d",
},
{
value: 26,
name: "Purchased",
fill: "#a4de6c",
},
];
const MyFunnel: NextPage = () => {
return (
<>
<FunnelChart width={730} height={250}>
<Tooltip />
<Funnel dataKey="value" data={data} isAnimationActive>
<LabelList
position="right"
fill="#000"
stroke="none"
dataKey="name"
/>
</Funnel>
</FunnelChart>
</>
);
};
export default MyFunnel;
動的インポートを使用します。
/sample.tsx
import { NextPage } from "next";
import dynamic from "next/dynamic";
const SampleChart = dynamic(() => import("./MyFunnel"), { ssr: false });
const Sample: NextPage = () => {
return <SampleChart />;
}
export default Sample;
nivo
コンポーネントの種類が豊富で、D3.jsで構築されています。多少実装が複雑な印象を持ちました。
nivoをインストール
$ yarn add @nivo/core @nivo/funnel
MyResponsiveFunnelというコンポーネントを作成し、Propsを渡します。
import React, { FC } from "react";
import { ResponsiveFunnel } from "@nivo/funnel";
const data = [
{
id: "step_sent",
value: 88048,
label: "Sent",
},
{
id: "step_viewed",
value: 78439,
label: "Viewed",
},
{
id: "step_clicked",
value: 67628,
label: "Clicked",
},
{
id: "step_add_to_card",
value: 50843,
label: "Add To Card",
},
{
id: "step_purchased",
value: 40586,
label: "Purchased",
},
];
const MyResponsiveFunnel: FC = () => (
<ResponsiveFunnel
data={data}
margin={{ top: 20, right: 20, bottom: 20, left: 20 }}
borderWidth={10}
labelColor={{ from: "color", modifiers: [["darker", 3]] }}
currentPartSizeExtension={10}
/>
);
export default MyResponsiveFunnel;
こちらもRecharts同様、動的インポートを使用します。
./Sample.tsx
import React from "react";
import dynamic from "next/dynamic";
import { NextPage } from "next";
const SampleChart = dynamic(() => import("./MyFunnel"), {
ssr: false,
});
const Sample: NextPage = () => {
return (
<div style={{ width: 600, height: 300 }}>
<SampleChart />
</div>
);
};
export default Sample;
react-funnel-pipeline
マイナーですが、ファネルチャート用のライブラリがあったので使用してみました。シンプルですが、必要なPropsは揃っています。
react-funnel-pipelineをインストール
$ yarn add react-funnel-pipeline
スタイルは外部ファイルを読み込みます。
/sample.tsx
import { NextPage } from "next";
import { FunnelChart } from "react-funnel-pipeline";
import "react-funnel-pipeline/dist/index.css";
const data = [
{ name: "Sent", value: 252 },
{ name: "Viewed", value: 105 },
{ name: "Clicked", value: 84 },
{ name: "Add To Card", value: 59 },
{ name: "Purchased", value: 19 },
];
const Sample: NextPage = () => {
return (
<FunnelChart
data={data}
/>
);
};
export default Sample;
まとめ
今回は、Next.js内でファネルチャートを実装できるライブラリを試してみました。基本的には、Rechartsを使用するのが無難かなと思いました。知識を深め、実装するグラフの特徴によって、ライブラリを使い分けれるようになりたいです。
ではまた。