PhoenixKitWebAnalytics.Web.Components (PhoenixKitWebAnalytics v0.2.0)

Copy Markdown View Source

The shared building blocks of the six report pages: the filter bar, stat tiles, the trend chart, and the ranked breakdown card.

The charts are CSS, not JavaScript

A module whose whole premise is "no client-side weight on your pages" would be a strange place to pull in a charting library for its own admin. Every visual here is divs with a percentage height or width — themed by daisyUI variables, responsive without a resize listener, and readable in both light and dark themes with no configuration. Values are exposed through title attributes, so hovering still tells you the exact number.

Summary

Functions

breakdown_card(assigns)

A ranked "label + counts" card, with each row's share drawn as a bar behind the label.

delta(current, previous)

Percentage change from previous to current, or nil when there is no meaningful comparison (no previous data, or no previous period at all).

disabled_notice(assigns)

A short call to action shown when tracking is installed but off.

filter_bar(assigns)

Period + site selector shared by every report page.

format_duration(seconds)

Formats a duration in seconds as 1m 05s.

format_ms(ms)

Formats a millisecond duration.

format_number(value)

Formats an integer with thin thousands separators (1 234 567).

format_percent(value)

Formats a percentage to one decimal place.

stat_tile(assigns)

A headline number, optionally with its change against the previous period.

traffic_chart(assigns)

The trend chart — one column per bucket, height proportional to the metric.

Functions

breakdown_card(assigns)

A ranked "label + counts" card, with each row's share drawn as a bar behind the label.

Attributes

  • title (:string) (required)
  • rows (:list) (required)
  • icon (:string) - Defaults to nil.
  • empty_message (:string) - Defaults to "Nothing recorded yet.".
  • label_header (:string) - Defaults to nil.
  • metric_header (:string) - Defaults to "Views".
  • link (:string) - Defaults to nil.
  • link_label (:string) - Defaults to "View all".

delta(current, previous)

@spec delta(number() | nil, number() | nil) :: float() | nil

Percentage change from previous to current, or nil when there is no meaningful comparison (no previous data, or no previous period at all).

disabled_notice(assigns)

A short call to action shown when tracking is installed but off.

Attributes

  • settings_path (:string) (required)

filter_bar(assigns)

Period + site selector shared by every report page.

Emits phx-change="filter" with period and site params.

Attributes

  • period (:string) (required)
  • site (:string) - Defaults to nil.
  • sites (:list) - Defaults to [].
  • active_visitors (:integer) - Defaults to nil.

format_duration(seconds)

@spec format_duration(number() | nil) :: String.t()

Formats a duration in seconds as 1m 05s.

iex> PhoenixKitWebAnalytics.Web.Components.format_duration(65.4)
"1m 05s"

format_ms(ms)

@spec format_ms(number() | nil) :: String.t()

Formats a millisecond duration.

format_number(value)

@spec format_number(integer() | float() | nil) :: String.t()

Formats an integer with thin thousands separators (1 234 567).

iex> PhoenixKitWebAnalytics.Web.Components.format_number(1234567)
"1,234,567"

format_percent(value)

@spec format_percent(number() | nil) :: String.t()

Formats a percentage to one decimal place.

stat_tile(assigns)

A headline number, optionally with its change against the previous period.

Attributes

  • label (:string) (required)
  • value (:string) (required)
  • hint (:string) - Defaults to nil.
  • delta (:float) - Defaults to nil.
  • delta_good (:atom) - Defaults to :up. Must be one of :up, or :down.

traffic_chart(assigns)

The trend chart — one column per bucket, height proportional to the metric.

Renders nothing but divs: no canvas, no chart library, no resize handler.

Named traffic_chart rather than bar_chart because core 2.0 introduced PhoenixKitWeb.Components.Core.Chart.bar_chart/1, which every LiveView imports via use PhoenixKitWeb, :live_view — two same-arity imports of that name make an unqualified call ambiguous and fail to compile. Core's is a generic SVG chart keyed on id/data; this one is bucket-aware and takes series/metric/bucket, so they are not interchangeable.

Attributes

  • series (:list) (required)
  • metric (:atom) - Defaults to :pageviews. Must be one of :pageviews, or :visitors.
  • bucket (:atom) - Defaults to :day.