継続率コホートカード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 }-確認中のセルを強調します。

使い方

import { RetentionCohortCard } from "@gunjo/ui";

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 }],
    },
];

export function CohortRetentionVariants() {
    return (
        <div className="grid gap-6">
            <RetentionCohortCard periods={periods} cohorts={cohorts} />
            <RetentionCohortCard periods={periods} cohorts={cohorts} showValues={false} />
            <RetentionCohortCard periods={periods} cohorts={cohorts} variant="compact" />
        </div>
    );
}

設計の判断

  • 濃さは1色の透明度で作る。升目の色は期間ごとに変えず、color に渡した1色の不透明度を 0.08 から 1.00 まで動かして作ります。虹色にすると「濃い＝多い」が読めなくなるためです。数字を重ねるかどうかは showValues で切り替えます（升目が小さいときは畳みます）。
  • 横スクロールをこのカードの中に閉じ込めた。升目の表は overflow-x-auto の入れ物に入れ、スマホでは最低 34rem を確保して中で横に流します。カードの外枠は overflow-hidden です。これが無いと、期間の多いコホート表がページ全体の横スクロールを引き起こします。
  • 升目の無いところは押せない空欄にした。まだ来ていない期間は aria-hidden の空欄で、ボタンにしていません。onCellSelect を渡したときだけ升目が button になり、渡さなければ読むだけの表のままです。
    一般のカードの設計は UIXHERO の「カード」にあります。

使用コンポーネント

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

関連コンポーネント

ヒートマップテーブル

いつ・なぜ使うか（UIXHERO）

「いつ・なぜ使うか」の判断は、姉妹サイト UIXHERO の記事で解説しています。

UIXHERO: カード（Card）近い記事