Skip to content

Metrics: Add visualization chart for views over time #2562

@lukepayyapilli

Description

@lukepayyapilli

Context

Related to #2336 (Metrics for downloads) and #2561 (Pagination and ordering). The current metrics page displays views over time as a table, but a visual chart would make trends more immediately apparent.

Problem

Tabular data is useful for precise numbers but makes it difficult to:

  • Quickly identify trends (growth, decline, seasonality)
  • Spot anomalies or spikes in activity
  • Compare relative activity across time periods

Proposed Approach

Chart Implementation

  • Add a line chart or bar chart above the views over time table
  • Use a lightweight JavaScript charting library that's already in use or minimal to add
  • Show monthly unique viewers over time with appropriate axis labels

Library Options (in order of preference)

  1. Chart.js: Popular, lightweight (~60KB), good documentation, MIT licensed
  2. ApexCharts: Modern, responsive, good for time series
  3. Native SVG: No dependency but more development effort

Implementation Details

  • Pass the views_over_time data to the template as JSON for the chart
  • Chart should be responsive and work on mobile
  • Include hover tooltips showing exact values
  • Consider showing a subset of data (e.g., last 24 months) with option to see more

Alternatives Considered

  1. Server-side rendered chart (matplotlib/pillow): Generates image on server, no JS needed, but less interactive and adds server load
  2. Sparkline only: Minimal visualization without full chart - simpler but less informative
  3. External analytics integration: Link to Google Analytics or similar - requires separate setup and may not have the specific metrics we track

Acceptance Criteria

  • Line or bar chart displays views over time
  • Chart is responsive and works on mobile devices
  • Hover/touch shows exact values for each data point
  • Chart handles edge cases (no data, single data point, etc.)
  • Minimal impact on page load time

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions