Module: RailsuiCharts::MetricHelper

Defined in:
lib/railsui_charts/metric_helper.rb

Instance Method Summary collapse

Instance Method Details

#railsui_metric(label:, value:, change: nil, comparison: nil, history: nil, format: :number, **options) ⇒ Object

A compact label / value / delta stack with an optional sparkline.



6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
# File 'lib/railsui_charts/metric_helper.rb', line 6

def railsui_metric(label:, value:, change: nil, comparison: nil, history: nil, format: :number, **options)
  change ||= comparison
  sparkline = metric_sparkline(history, options)

  content_tag(:div, class: "railsui-metric") do
    safe_join([
      content_tag(:p, label, class: "railsui-metric-label"),
      content_tag(:div, class: "railsui-metric-value-row") do
        safe_join([
          content_tag(:span, format_metric_value(value, format), class: "railsui-metric-value"),
          change ? metric_delta(change) : nil
        ].compact)
      end,
      sparkline
    ].compact)
  end
end

#railsui_metric_card(label:, value:, previous: nil, change: nil, history: nil, compare: nil, format: :number, updated_at: nil, details_path: nil, details_label: "More details", positive_is_good: true, chart_height: 180, expand: false, **options) ⇒ Object

The full dashboard card: label, value, delta, previous-period line, a comparison chart, and a footer. This is the piece a Rails app actually drops into a dashboard — the chart alone is rarely the whole job. expand: true turns the footer link into an expanded view of the same series — a card chart is 180px tall, which is enough to read a trend and not enough to read a value. Takes precedence over details_path.



30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
 
# File 'lib/railsui_charts/metric_helper.rb', line 30

def railsui_metric_card(label:, value:, previous: nil, change: nil, history: nil, compare: nil,
                        format: :number, updated_at: nil, details_path: nil,
                        details_label: "More details", positive_is_good: true,
                        chart_height: 180, expand: false, **options)
  change ||= percentage_change(value, previous)
  expand &&= history.present?
  # The chart cannot know that a falling churn rate is a win, so the card
  # tells it — the tooltip colours its delta the same way the value does.
  chart_options = options.merge(label: options[:label] || label, trend_up_is_good: positive_is_good)

  card = content_tag(:div, class: "railsui-metric-card", data: expand ? { controller: "railsui-metric-dialog" } : {}) do
    safe_join([
      metric_card_head(label, value, change, previous, format, positive_is_good),
      metric_card_chart(history, compare, format, chart_height, chart_options),
      metric_card_footer(updated_at, details_path, details_label, expand: expand),
      expand ? metric_dialog(label, value, change, previous, history, compare, format, positive_is_good, chart_options) : nil
    ].compact)
  end

  card
end

#railsui_metric_card_skeleton(chart_height: 180, footer: true, label: "Loading metric") ⇒ Object

The card's own placeholder. It stands in for the text that is coming and leaves the plot area empty: a grey slab where the chart goes claims more about the shape of the data than a loading state can know.



55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
 
# File 'lib/railsui_charts/metric_helper.rb', line 55

def railsui_metric_card_skeleton(chart_height: 180, footer: true, label: "Loading metric")
  content_tag(:div, class: "railsui-metric-card", role: "status", aria: { busy: true, label: label }) do
    safe_join([
      content_tag(:div, class: "railsui-metric-card__head") do
        safe_join(%w[label value meta].map do |part|
          content_tag(:span, "", class: "railsui-skeleton-bar railsui-skeleton-bar--#{part}", aria: { hidden: true })
        end)
      end,
      content_tag(:div, "", class: "railsui-metric-card__chart", style: "min-height: #{chart_height.to_i}px"),
      footer ? content_tag(:div, class: "railsui-metric-card__footer") do
        content_tag(:span, "", class: "railsui-skeleton-bar railsui-skeleton-bar--footer", aria: { hidden: true })
      end : nil
    ].compact)
  end
end