Skip to content

feat(predictions): add forecast line chart to pipeline detail page #201

Description

@roman1887

Context

The Forecast pipeline detail page (/predictive-intelligence → click a Forecast pipeline) currently shows:

  • Status / Last Trained / Output Table
  • Accuracy metrics (MAPE / MAE / RMSE / R²)
  • Configuration (target column, horizon, model)
  • A raw predictions table

It does not show a chart of the forecast. Anyone evaluating the product expects a chart — historical actuals next to the predicted line, with confidence band — and right now we hand them a numeric table instead.

Expected behavior

On the Forecast pipeline detail page, render a line chart above the Predictions table (between Configuration and the table):

  • X-axis: time (the original KPI's timestamp column + predicted_at continuation)
  • Y-axis: the target column (e.g. daily_events, revenue)
  • Two series:
    • Historical actuals — gray bars or muted line for the trailing window of KPI data feeding the pipeline (e.g. last 60 days)
    • Predicted values — Actyze blue line (#5d6ad3) extending past the historical range for the forecast horizon
  • Optional (nice-to-have, not blocking): confidence band shaded around the predicted line if the model emits one
  • Hover tooltips with exact values

Chart should fill the card width. Aspect roughly 16:6 so it sits visually between the two existing sections.

Acceptance criteria

  • Chart renders on the Forecast pipeline detail page only (Classify / Estimate / Detect get their own visualizations in follow-up issues)
  • Pulls historical KPI data from the source KPI's materialized table (kpi_data.kpi_<slug>) for at least the past 2 × horizon days
  • Pulls predictions from the pipeline's output table (prediction_data.pred_<slug>_<horizon>)
  • Empty / loading / error states handled (no infinite spinner, no blank page)
  • Works on the existing demo data (Daily Engagement Trend Forecast - 30d)
  • Tested manually on demo.actyze.ai before close

Technical notes

  • Plotly is already in the frontend stack — use it. No new charting deps.
  • Backend probably needs one endpoint that returns historical + predicted rows aligned by timestamp; the frontend should not stitch two queries together.
  • The Forecast pipeline's predicted_at column today is a creation timestamp, not the forecast date — the backend response needs to expose the actual forecast date axis (KPI's time column + horizon offsets).

Motivation

  • Customer demos: viewers expect a chart, not a table. This is the single biggest UX gap I hit while doing recon for the LinkedIn video series.
  • Marketing video script Improve dashboard layout and fix scrolling issues #1 (Forecast 60s) is blocked on this — Scene 3 explicitly needs the chart visual.

Once shipped, deploy to demo.actyze.ai, then we can record the Forecast video and close this.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions