choosing-trend-or-slope-view

Par posthog · skills

Clarifiez la manière de visualiser une évolution sur une plage temporelle avant de construire une tendance. À utiliser lorsque l'utilisateur demande dans quelle mesure quelque chose a changé, augmenté, chuté, progressé ou régressé entre deux points ou périodes — « de combien X a-t-il évolué entre A et B », « avant vs après », « début vs fin », « d'une semaine à l'autre », « comparer ce mois au précédent », « évolution dans le temps » — ou mentionne un « slope chart » / « slopegraph ». Deux interprétations de « changement » nécessitent des graphiques différents : la tendance complète (une courbe, chaque intervalle) versus uniquement les deux extrémités (un slope, début vs fin). Demandez lequel est souhaité, puis affichez-le. Non applicable pour choisir un ChartDisplayType d'insight sauvegardé dans l'éditeur d'insights.

npx skills add https://github.com/posthog/skills --skill choosing-trend-or-slope-view

Choisir une ligne de tendance ou une vue en pente

« Comment X a-t-il changé entre A et B ? » est ambigu. Deux graphiques répondent à deux questions différentes, donc clarifiez avant de construire sauf si l'utilisateur en a déjà nommé un :

  • Évolution dans le temps (ligne) — la valeur à chaque intervalle sur la plage. Montre le chemin : les creux, les pics, quand ça a bougé. C'est la tendance par défaut.
  • Début vs fin (pente) — seulement le premier et le dernier point, une ligne par série les reliant. Montre le changement net et, sur plusieurs séries, qui a monté, qui a baissé, et tout basculement de classement — sans le bruit du chemin entre les deux.

Quand la demande pourrait être l'une ou l'autre, posez un simple ou/ou, par exemple :

Voulez-vous voir comment ça a bougé sur toute la période (un graphique en ligne), ou juste le changement du début à la fin (un graphique en pente) ?

Si l'utilisateur veut clairement l'une — « dis-moi juste combien ça a augmenté du début à la fin » → pente ; « montre-moi la tendance / quand ça a pic » → ligne — sautez la question et construisez-la.

Comment rendre chacun

Les deux proviennent de la même TrendsQuery sur la même plage de dates — la pente est cette série réduite à son premier et dernier point, pas une requête différente.

Évolution dans le temps → ligne

Comportement de tendances par défaut. Créez ou exécutez une TrendsQuery et laissez trendsFilter.display comme ActionsLineGraph (par défaut, « évolution dans le temps ») :

{
  "kind": "TrendsQuery",
  "series": [{ "kind": "EventsNode", "event": "$pageview", "math": "total" }],
  "dateRange": { "date_from": "2025-01-01", "date_to": "2025-03-31" },
  "trendsFilter": { "display": "ActionsLineGraph" }
}

Début vs fin → pente

Exécutez la tendance avec posthog:query-trends. La carte de résultat que Max rend a un bouton de bascule de vue Ligne / Barre / Pente — basculez-le sur Pente pour afficher chaque série comme une seule ligne de son premier à son dernier point, avec le changement par série dans la légende. Dites à l'utilisateur qu'il peut passer à la vue Pente sur le résultat.

La vue en pente est idéale pour une comparaison avant→après nette, surtout avec plusieurs séries/catégories dont le mouvement relatif importe. Choisissez une plage de dates dont les deux extrémités sont les points que vous voulez comparer (la pente utilise le premier et le dernier intervalle).

Limites importantes

  • Deux surfaces, un calcul. La pente en ligne (carte de résultat query-trends de Max) et la pente d'insight enregistrée (ChartDisplayType.SlopeGraph, derrière le feature flag slope-graph-insight) montrent la même chose : la valeur du premier intervalle vs la valeur du dernier intervalle, à l'intervalle de groupement choisi. Le groupement définit la pente — groupez par mois pour comparer le premier vs le dernier mois, par jour pour le premier vs le dernier jour. Utilisez la vue en ligne pour une comparaison avant→après rapide sur un résultat que vous regardez déjà ; utilisez l'affichage enregistré pour le persister sur un tableau de bord où le flag est activé. Une période finale encore en accumulation est affichée telle quelle avec un connecteur en tirets, la même affordance que le graphique en ligne utilise pour une fin incomplète.
  • Pour une comparaison période par période sur une seule série (ce mois vs le précédent), une ligne avec compareFilter: { "compare": true } superpose les deux périodes ; une pente est le meilleur choix pour comparer les extrémités de plusieurs séries à la fois.

Skills similaires