継続率コホートカードRetentionCohortCardExperimental

獲得月や開始時期ごとの継続率を、期間別に比較するコホートカードです。

プレビュー

データ

対象: 2月コホート / 3か月

状態とバリエーション

標準表示

値付きの標準コホート表です。

コホート継続率

初月1か月2か月3か月4か月5か月6か月7か月1月
コホート100%76%64%58%51%46%41%36%2月
コホート100%72%62%62%48%42%37%3月
コホート100%68%56%49%43%38%4月
コホート100%70%59%50%44%5月
コホート100%66%53%47%6月
コホート100%63%51%

選択セル

確認中のコホート期間を強調します。

コホート継続率

初月1か月2か月3か月4か月5か月6か月7か月1月
コホート100%76%64%58%51%46%41%36%2月
コホート100%72%62%62%48%42%37%3月
コホート100%68%56%49%43%38%4月
コホート100%70%59%50%44%5月
コホート100%66%53%47%6月
コホート100%63%51%

値なし

セル内テキストを消して濃淡だけで確認します。

コホート継続率

初月1か月2か月3か月4か月5か月6か月7か月1月
コホート2月
コホート3月
コホート4月
コホート5月
コホート6月
コホート

コンパクト

ダッシュボードグリッド向けの密度です。

コホート継続率

初月1か月2か月3か月4か月5か月6か月7か月1月
コホート100%76%64%58%51%46%41%36%2月
コホート100%72%62%62%48%42%37%3月
コホート100%68%56%49%43%38%4月
コホート100%70%59%50%44%5月
コホート100%66%53%47%6月
コホート100%63%51%

プロパティ

表は横にスクロールできます
プロパティ型初期値説明
cohortsRetentionCohortRow[]-コホート行と各期間の値です。
periodsReactNode[]-初月、1か月など列に表示する期間ラベルです。
selectedCell{ cohortIndex: number; periodIndex: number }-確認中のセルを強調します。

使い方

const periods = ["初月", "1か月", "2か月", "3か月", "4か月", "5か月", "6か月", "7か月"];
const cohorts = [
    { label: "1月コホート", size: 1240, values: [{ value: 100 }, { value: 76 }, { value: 64 }, { value: 58 }, { value: 51 }, { value: 46 }, { value: 41 }, { value: 36 }] },
    { label: "2月コホート", size: 1144, values: [{ value: 100 }, { value: 72 }, { value: 62 }, { value: 62 }, { value: 48 }, { value: 42 }, { value: 37 }] },
    { label: "3月コホート", size: 1048, values: [{ value: 100 }, { value: 68 }, { value: 56 }, { value: 49 }, { value: 43 }, { value: 38 }] },
    { label: "4月コホート", size: 952, values: [{ value: 100 }, { value: 70 }, { value: 59 }, { value: 50 }, { value: 44 }] },
    { label: "5月コホート", size: 856, values: [{ value: 100 }, { value: 66 }, { value: 53 }, { value: 47 }] },
    { label: "6月コホート", size: 760, values: [{ value: 100 }, { value: 63 }, { value: 51 }] },
];

<RetentionCohortCard periods={periods} cohorts={cohorts} />
<RetentionCohortCard periods={periods} cohorts={cohorts} showValues={false} />
<RetentionCohortCard periods={periods} cohorts={cohorts} variant="compact" />

使用コンポーネント

継続率コホートカードチャート凡例ツールチップ

関連コンポーネント

ヒートマップテーブル