Class: Clowk::Phlex::Charts::GaugeLinear

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

Overview

Components::UI::GaugeLinear — horizontal capacity bar for a capacity / percent metric (ported from voodu Metrics::GaugeLinear): a big % up top, a filled track, and used / total figures underneath. The fill tints AMBER past 70% and RED past 90% (same thresholds as GaugeRadial).

percent: true  → headline reads the fill "%".
percent: false → headline reads center_value (raw count) instead.

MULTI mode — pass bars: [{label:, pct:, value_label:, capacity_label:, color:}] to stack one labeled capacity bar per row (e.g. one per pod). Each row shows label + value on top, a fill bar, and (when capacity_label is given) a pct / total line underneath. Multi options:

dot:         true  → a colored square before each label (breakdown style)
threshold:   false → keep each bar its own color (no amber>70 / red>90 tint)
title:       "…"   → a section header row (uppercase label)
total_label: "…"   → a "Total <x>" figure shown at the right of the header

The defaults (dot: false, threshold: true) give the capacity-gauge look; a simple cost/usage breakdown is dot: true, threshold: false with a title + total and value_label-only rows (no capacity_label → no bottom line).

Instance Method Summary collapse

Constructor Details

#initialize(pct: nil, color: "#5B8DEF", value_label: nil, capacity_label: nil, percent: true, center_value: nil, bars: nil, dot: false, threshold: true, title: nil, total_label: nil) ⇒ GaugeLinear

Returns a new instance of GaugeLinear.



25
26
27
28
29
30
31
32
33
34
35
36
37
38
 
# File 'lib/clowk/phlex/charts/gauge_linear.rb', line 25

def initialize(pct: nil, color: "#5B8DEF", value_label: nil, capacity_label: nil, percent: true, center_value: nil,
  bars: nil, dot: false, threshold: true, title: nil, total_label: nil)
  @pct = clamp(pct.to_f) if pct
  @color = color
  @value_label = value_label
  @capacity_label = capacity_label
  @percent = percent
  @center_value = center_value
  @bars = bars.is_a?(Array) ? bars : nil
  @dot = dot
  @threshold = threshold
  @title = title
  @total_label = total_label
end

Instance Method Details

#multi? ⇒ Boolean

Returns:

  • (Boolean) 


40
 
# File 'lib/clowk/phlex/charts/gauge_linear.rb', line 40

def multi? = !@bars.nil? && @bars.any?

#view_template ⇒ Object 



42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
 
# File 'lib/clowk/phlex/charts/gauge_linear.rb', line 42

def view_template
  return multi_template if multi?

  div(class: "flex flex-col justify-center gap-3 py-4 min-h-[120px]") do
    span(class: "font-clowk-mono text-[26px] font-semibold text-clowk-text leading-none") { headline }

    div(class: "h-3.5 w-full bg-clowk-surface-3 overflow-hidden rounded-clowk-sm") do
      div(style: "width: #{@pct.round(1)}%; height: 100%; background: #{fill_color};")
    end

    if @value_label.present? || @capacity_label.present?
      div(class: "flex items-center justify-between font-clowk-mono text-[11px] text-clowk-muted") do
        span { @value_label.to_s.presence || "—" }
        span { @capacity_label.to_s.presence || "" }
      end
    end
  end
end