Class: Clowk::Phlex::Charts::NumberCard

Inherits:
Clowk::Phlex::Component show all
Defined in:
lib/clowk/phlex/charts/number_card.rb

Overview

Components::Metrics::NumberCard — a single big-number tile for a dashboard log-count panel (scope_kind "log"). Where ChartCard plots a warehouse series, this shows ONE number: how many log lines matched the panel's LogQuery filter over the dashboard's range (see LogMetricData).

Visual — deliberately spare ("just the number"):

┌────────────────────────────┐
│ FS · INVITE           [1h] │   colored label + range chip
│                            │
│           1,284            │   big bold count, centered
│                            │
└────────────────────────────┘

Lives in the SAME metrics-display grid as the chart cards: it carries data-metric-key (the panel_key) so the Settings/Order drawer hides, reorders and resizes it alongside the charts. Grid stretch makes it match the height of any chart card sharing its row, so the number centers nicely.

Constant Summary collapse

TV_VALUE_FONT =

TV_VALUE_FONT / TV_CAPTION_FONT — the no-timeline stat sizes: a container query so each stat FILLS its column (readable on a wall-mounted TV). Applied server-side for a saved no-timeline panel AND by the number-card controller when the operator hides the timeline live via the popover (same rule: big ONLY while the timeline is hidden).

"clamp(28px, 20cqw, 120px)"
TV_CAPTION_FONT = 
"clamp(11px, 4cqw, 18px)"

Instance Method Summary collapse

Constructor Details

#initialize(label:, color:, formatted:, range:, metric: nil, truncated: false, clamped: false, series: [], numbers: nil, colored: true, range_ms: nil, sub: nil, default_visible: true, retention_days: 7, resizable: true) ⇒ NumberCard

Returns a new instance of NumberCard.

Parameters:

  • label (String) —

    panel label ("fs · INVITE")

  • color (String) —

    accent color token for the label

  • formatted (String) —

    count with thousands separators ("1,284")

  • range (String) —

    dashboard range key, shown as a chip ("1h")

  • metric (String, nil) (defaults to: nil) —

    the panel_key → data-metric-key for hide/reorder

  • truncated (Boolean) (defaults to: false) —

    count hit COUNT_CAP → render "≥ N"

  • clamped (Boolean) (defaults to: false) —

    range outran log retention → note "last Nd"

  • series (Array) (defaults to: []) —

    [value:, formatted:] for the trend sparkline. Empty (live-scan fallback before the warehouse fills) → no sparkline.

  • range_ms (Integer) (defaults to: nil) —

    range width for the sparkline x-axis math.

  • sub (String, nil) (defaults to: nil) —

    muted qualifier ("avg · duration_ms"); nil for a plain count.

  • default_visible (Boolean) (defaults to: true) 


35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
 
# File 'lib/clowk/phlex/charts/number_card.rb', line 35

def initialize(label:, color:, formatted:, range:, metric: nil,
  truncated: false, clamped: false, series: [], numbers: nil, colored: true, range_ms: nil, sub: nil, default_visible: true, retention_days: 7, resizable: true)
  @resizable = resizable
  @retention_days = retention_days
  @label = label
  @color = color
  @formatted = formatted
  @range = range
  @metric = metric
  @truncated = truncated
  @clamped = clamped
  # series — SINGLE tile: a flat [{ts,value,formatted}] sparkline. MULTI tile
  # (numbers present): the multi-series array [{label,color,points}] the shared
  # timeline draws (one area per pod). numbers — MULTI only: one stat per pod
  # ({label, color, formatted, value}) rendered side by side.
  @series = Array(series)
  @numbers = numbers
  # colored — MULTI only: paint each stat in its pod's series color, or (false)
  # render them all solid (text color) for a calmer wall. The timeline keeps its
  # colors either way — the lines need them to stay apart.
  @colored = colored
  @range_ms = range_ms
  @sub = sub
  @default_visible = default_visible
end

Instance Method Details

#multi? ⇒ Boolean

multi? — a multi-pod Number: N current-value stats side by side over a shared multi-area timeline. @numbers carries the per-pod headlines.

Returns:

  • (Boolean) 


63
 
# File 'lib/clowk/phlex/charts/number_card.rb', line 63

def multi? = @numbers.is_a?(Array) && @numbers.size >= 2

#view_template ⇒ Object 



73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
 
# File 'lib/clowk/phlex/charts/number_card.rb', line 73

def view_template
  root_data = {}

  if @metric
    root_data[:metrics_display_target] = "card"
    root_data[:metric_key] = @metric
  end

  root_data[:default_visible] = "false" unless @default_visible

  # number-card controller → live show/hide of the sparkline from the options
  # popover ("Show timeline" / "T"). Only wired when there IS a sparkline + a
  # panel key to broadcast on; a bare number tile needs neither.
  if @metric && chart?
    root_data[:controller] = "number-card"
    root_data[:number_card_key_value] = @metric
    # Multi tile → hand the controller the no-timeline stat sizes so hiding the
    # timeline live (popover) scales the stats up, same as a saved no-timeline
    # panel; showing it restores the modest size.
    if multi?
      root_data[:number_card_stat_size_value] = TV_VALUE_FONT
      root_data[:number_card_caption_size_value] = TV_CAPTION_FONT
    end
  end

  div(
    class: "relative bg-clowk-surface border border-clowk-border p-3.5 flex flex-col gap-2 min-w-0",
    data: root_data
  ) do
    card_header
    value_block
    timeline_block

    if @metric && @resizable
      resize_handle("left")
      resize_handle("right")
    end
  end
end