PhiaUi.Components.SparklineCard (phia_ui v0.1.17)

Compact metric card with an inline SVG sparkline.

Renders a title, large value, optional delta badge, and a minimal polyline chart — no axes, no labels, pure trend visualization. Ideal for dashboards where space is limited and direction/trend is more important than precision.

Zero JavaScript — SVG <polyline> points are computed server-side.

Examples

<.sparkline_card
  title="Revenue"
  value="$12,400"
  data={[4200, 6100, 5800, 7200, 8900, 12400]}
  delta="+32%"
  trend={:up}
/>

<.sparkline_card
  title="Bounce Rate"
  value="45%"
  data={[62, 58, 54, 50, 48, 45]}
  delta="-17%"
  trend={:down}
/>

Summary

Functions

sparkline_card(assigns)

Functions

sparkline_card(assigns)

Attributes

title (:string) (required) - Metric label shown above the value.
value (:string) (required) - Large primary value string (e.g. "$1,240").
data (:list) (required) - List of numbers used to draw the sparkline.
delta (:string) - Optional percentage change string (e.g. "+12.4%"). Omitted when nil. Defaults to nil.
trend (:atom) - Determines sparkline and delta color. :up = green, :down = red, :neutral = muted. Defaults to :neutral. Must be one of :up, :down, or :neutral.
width (:integer) - SVG width in pixels. Defaults to 120.
height (:integer) - SVG height in pixels. Defaults to 40.
animate (:boolean) - Enable line-draw entrance animation. Defaults to true.
animation_duration (:integer) - Animation duration in ms. Defaults to 700.
class (:string) - Additional CSS classes for the root card element. Defaults to nil.
Global attributes are accepted. HTML attributes forwarded to the root <div> element.