visualizing-change-over-time

経時変化の可視化

リクエストが何かがどのように変化したかに関するものである場合、既定の選択肢は折れ線/面グラフのトレンドです。これは、x 軸の点が多い連続的な系列には通常適切です。しかし、経時変化の形状によっては、別のチャートのほうがはるかに読みやすくなります。このスキルは、@posthog/quill-charts で可視化を構築する際に提示できるメニューであり、スロープグラフも含まれます。

適切な選択肢を提示し、ユーザーに選んでもらってください。これらのいずれも必須ではありません。

変化の形状で選ぶ

変化が…	選ぶもの	理由
多くの時点にわたる連続的な系列（トレンド）	TimeSeriesLineChart / LineChart（強調には面の塗りつぶし）	標準的なトレンド。すべての点のペア間の傾きが確認できます。
複数の系列/カテゴリにわたる2 点のみ（before → after）	SlopeChart	エンティティごとに 1 本の線を左の「before」から右の「after」へ引きます。各エンティティの変化の方向と大きさ、および順位の入れ替わりが一目で読み取れます。
時点における大きさの比較（その間の経路ではない）	BarChart / TimeSeriesBarChart	棒は離散的な値を比較します。サブ系列にはグループ化/積み上げを使用します。
単一の主要な数値と、前期間に対するその変化	MetricCard	大きな数値 + スパークライン + 変化ピル。

ユーザーがちょうど2 つのスナップショット（今週と先週、対照群と処置群、Q1 と Q2）を比較しており、特に多くのカテゴリの_相対的_な動きが重要である場合は、グループ化棒グラフや 2 点の折れ線グラフよりも、スロープグラフをよりすっきりした代替手段として提示してください。

SlopeChart の使用

import { SlopeChart } from '@posthog/quill-charts'
import type { Series } from '@posthog/quill-charts'
import type { SlopeSeriesMeta } from '@posthog/quill-charts'

// One series per entity; `data` is exactly [start, end].
const series: Series<SlopeSeriesMeta>[] = [
    { key: 'us', label: 'US', data: [120, 185] },
    { key: 'eu', label: 'EU', data: [200, 150] },
]

<SlopeChart
    series={series}
    labels={['Before', 'After']}
    theme={theme}
    config={{
        showSeriesLabels: true, // name beside each end point; steepest line always keeps its label
        legend: { show: true }, // each row shows the color, label, and the formatted change
        deltaFormatter: (d) => `${d >= 0 ? '+' : ''}${d}`,
    }}
/>

主なオプション（完全なリストは charts の docs/chart-types.md の「SlopeChart」セクションにあります）:

• showStartLabels / showEndLabels — 値ラベルのチャートレベルの既定値です。系列ごとに meta.showStartLabel / meta.showEndLabel で上書きできます。
• showSeriesLabels — 名前ラベルです。衝突が発生した場合、最も大きな変化（|end − start|）を持つ系列が常にそのラベルを保持します。
• legend: { show, position } — 行には系列ごとの変化が表示されます（deltaFormatter）。
• 値軸は既定で非表示です。開始/終了ラベルが読み取り値となります。

テーマは useChartTheme() から取得します。ラッパーには実際の高さを指定してください。テーマの接続とサイズ設定については、charts の AGENTS.md を参照してください。

スコープに関する注記

スロープグラフを描画する方法は 2 つ あり、どちらを使うかは対象サーフェスによって異なります。

• SlopeChart — @posthog/quill-charts のコンポーネントです。ダッシュボード、レポート、mcp_analytics フロントエンド、カスタム可視化など、UI を直接構築する場合に使用します。これは Max のインラインのトレンド結果カード（services/mcp/src/ui-apps/components/TrendsVisualizer.tsx）にある Slope ビューの切り替えを支えています。
• ChartDisplayType.SlopeGraph — 一級のインサイト表示（frontend/src/types.ts における値 'SlopeGraph'）で、バックエンドの SlopeGraphTrendsQueryRunner（products/product_analytics/backend/hogql_queries/trends/slope_graph_trends_query_runner.py）によってレンダリングされます。これは TrendsQuery を受け取り、日付範囲の 最初と最後のバケット を 2 つのスロープポイントとして保持します（最後のセグメントが現在進行中でまだ集計中の期間である場合は破線になります）。設定は trendsFilter.display: "SlopeGraph" で行います（トレンド限定）。
  • プロダクトのインサイトエディター には、スロープグラフの選択項目が含まれています。
  • API / posthog:insight-create MCP ツール 経由では、trendsFilter.display: "SlopeGraph" を指定した TrendsQuery を渡します。きれいなビフォーアフターを組み立てるには、最初のバケットがベースライン、最後が「現在」になるように日付範囲と interval を選びます（例: ベースラインの月から始まる月次バケット）。