clowk-phlex 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: b10e1c1b36b5e16888028366d135b56fcacc162fd840dc1aaf5d2d5d7fbe5734
+  data.tar.gz: 6038808ec21e1151aeba34792e9208799c360f93c35db6f1cbb70c5f7f5ae3df
+SHA512:
+  metadata.gz: 7e8a286c705b5479c34fbce8551dc71a185ffc918bfcf35ebfd8ec93ce29e88329895ced4e620defbcd2a1e7a9799d723aaa2086f56e9ae14ae90a8aa2ed4ae8
+  data.tar.gz: 91501a9ff871de452a3a70135b783c73e350ab52638c6ce87c39196a438c7304f727c1fcdeaafc5b76ab71dce1ca737772cb149c471c97e3300e7aad8381cab4

data/lib/clowk/phlex/charts/card.rb

@@ -0,0 +1,518 @@
+# frozen_string_literal: true
+
+# Components::Metrics::ChartCard — header (label + current value +
+# min/avg/max strip + maximize button) + a Components::Metrics::Chart
+# underneath. 2x2 grid layout on /metrics renders four of these per
+# resource and per HTTP scope.
+#
+# Visual:
+#
+#   ┌───────────────────────────────────────────────────────────┐
+#   │ CPU  25%        min 21.9  avg 30.8  max 39.8  ⛶           │
+#   │ ┌───────────────────────────────────────────────────────┐ │
+#   │ │ chart …                                               │ │
+#   │ └───────────────────────────────────────────────────────┘ │
+#   └───────────────────────────────────────────────────────────┘
+#
+# Maximize (⛶) opens a SHARED modal (see Components::Metrics::ChartModal)
+# rendered once at the bottom of Views::Metrics::Index. The button
+# is just an anchor with `data-turbo-stream="true"`; clicking it
+# sends an Accept: text/vnd.turbo-stream.html GET to /metrics/chart,
+# whose response targets the modal's slots
+# (#chart-modal-title + #chart-modal-body) and invokes the custom
+# chart_modal_open Turbo Stream action. No per-card overlay, no
+# Stimulus controller for open/close — server drives the whole
+# lifecycle via turbo_stream actions.
+class Clowk::Phlex::Charts::Card < Clowk::Phlex::Component
+  # current — the unaggregated "right now" value from
+  # MetricsPageData (server-side latest field). When nil, falls
+  # back to series.last's bucket-aggregated value. The fallback
+  # only kicks in for cold-boot when the API hasn't shipped a
+  # latest yet; otherwise the headline tracks the literal latest
+  # sample and stays stable across range pills.
+  #
+  # expand_url: STRING → enables the maximize button. Caller
+  # (Views::Metrics::Index#render_chart_cards) builds the URL via
+  # metrics_chart_path with metric/source/scale baked in. Pass nil
+  # (or omit) to render a maximize-less card — used historically
+  # by call sites that don't have access to the full single-chart
+  # context; safe default.
+  # metric: STRING — the metric key (e.g. "cpu_percent"). When given,
+  # the root div gains data-metrics-display-target="card" +
+  # data-metric-key="<metric>" so MetricsDisplayController can hide/
+  # show this card based on the operator's display settings.
+  # Pass nil (or omit) to opt out of the display-filter system
+  # (e.g. standalone chart cards outside the main grid).
+  #
+  # section: STRING — "resource" or "http". When "http", a small
+  # inline [http] badge renders next to the metric label, giving
+  # operators a visual cue that the card is HTTP-derived. (The
+  # divider-style HTTP section header was removed in favor of this
+  # inline tag — fewer hard breaks in the grid, same signal.)
+  #
+  # default_visible: BOOLEAN — when false, the card emits
+  # data-default-visible="false". The metrics-display controller
+  # reads this on first connect for a kind that has no saved
+  # display settings yet and hides the card by default. Operator
+  # can un-hide it via the Settings drawer's Latency / Errors
+  # picker groups.
+  # capacity_label: STRING — "39 GB" / "512 MB" / etc. When given,
+  # the headline grows a "/ <capacity_label> · NN%" suffix so the
+  # card reads "21.9 GB / 39 GB · 56%" — mirrors the Overview's
+  # Memory/Disk cards. Pass nil for metrics with no natural total
+  # (CPU %, HTTP counts, network rates).
+  # capacity_pct: NUMBER — integer percentage paired with the label.
+  # Always renders alongside capacity_label; nil when the current
+  # sample is missing (we omit the "· NN%" trail in that case).
+  # chart_type: STRING — "area" (default, the time-series line+fill),
+  # "gauge_radial" (semicircle dial), or "gauge_linear" (capacity bar).
+  # Gauges need a ceiling (a percent metric, or a capacity_pct); when
+  # that's missing the card silently falls back to the area chart so a
+  # gauge panel on a limitless metric never renders blank.
+  # resizable: renders the column-resize grab handles (metrics-display#startResize).
+  # Only meaningful inside a metrics-display dashboard grid; pass false when the
+  # card lives in a plain grid (no drag-resize controller) so no dead affordance.
+  def initialize(label:, color:, unit:, range_ms:, points: [], current: nil, expand_url: nil, metric: nil, section: nil, default_visible: true, capacity_label: nil, capacity_pct: nil, chart_type: "area", percent: true, series: nil, resizable: true, gauge_bars: nil)
+    @resizable = resizable
+    # gauge_bars — MULTI linear gauge: [{label:, pct:, value_label:, capacity_label:, color:}]
+    # stacked one row per pod (chart_type "gauge_linear"). See render_body.
+    @gauge_bars = gauge_bars.is_a?(Array) ? gauge_bars : nil
+    @label = label
+    @color = color
+    @unit = unit
+    @points = Array(points)
+    # series — OPTIONAL multi-series (pilot: Line): one line per pod. When
+    # present the card renders a multi Chart + a legend instead of the single
+    # headline/stat strip. See Components::Metrics::Chart#series.
+    @series = series.is_a?(Array) ? series : nil
+    @range_ms = range_ms
+    @current = current
+    @expand_url = expand_url
+    @metric = metric
+    @section = section
+    @default_visible = default_visible
+    @capacity_label = capacity_label
+    @capacity_pct = capacity_pct
+    @chart_type = chart_type
+    # percent — false makes gauges read the raw value in the center instead of
+    # the fill "%" (a count has no natural ceiling → "% of peak" confuses).
+    @percent = percent
+  end
+
+  def view_template
+    root_data = {}
+
+    if @metric
+      root_data[:metrics_display_target] = "card"
+      root_data[:metric_key] = @metric
+    end
+
+    root_data[:section] = @section if @section
+    root_data[:default_visible] = "false" unless @default_visible
+
+    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
+      render_body
+      stat_footer
+      if @metric && @resizable
+        resize_handle("left")
+        resize_handle("right")
+      end
+    end
+  end
+
+  private
+
+  # resize_handle — grab strip on the card's LEFT or RIGHT edge. Dragging it
+  # changes how many grid columns the card spans (metrics-display#startResize
+  # snaps to columns + persists); the left edge just inverts the drag direction.
+  # Only on cards with a metric key (the resizable ones); a no-op on mobile
+  # (single-column grid). The SVG chart reflows on the width change via the
+  # metrics-chart ResizeObserver.
+  def resize_handle(edge)
+    div(
+      data: {action: "pointerdown->metrics-display#startResize", resize_edge: edge},
+      aria: {hidden: "true"},
+      title: "Drag to resize",
+      class: tokens(
+        "absolute top-0 bottom-0 w-1.5 cursor-col-resize hover:bg-clowk-accent/30 active:bg-clowk-accent/60 z-10 touch-none",
+        (edge == "left") ? "left-0" : "right-0"
+      )
+    )
+  end
+
+  # render_body — the chart_type switch. Gauges fall back to the area
+  # chart when there's no usable ceiling (see gauge_pct).
+  # multi? — a multi-series (multi-pod) panel drawing one line per series.
+  def multi? = !@series.nil? && @series.any?
+
+  # gauge_multi? — a stacked multi linear gauge (one capacity bar per pod).
+  def gauge_multi? = !@gauge_bars.nil? && @gauge_bars.any? && @chart_type.to_s == "gauge_linear"
+
+  def render_body
+    if gauge_multi?
+      return div(class: "flex-1 flex flex-col justify-center") do
+        render Clowk::Phlex::Charts::GaugeLinear.new(bars: @gauge_bars)
+      end
+    end
+
+    if multi?
+      return render Clowk::Phlex::Charts::TimeSeries.new(
+        points: [], series: @series,
+        color: @color, unit: @unit, label: @label,
+        # Line (raio) or Area (raio + translucent fill) — same multi machinery.
+        range_ms: @range_ms, height: 200, style: chart_style,
+        # @metric is the panel_key on a dashboard card — a stable id the chart
+        # keys its hidden-line state to so it survives realtime stream refreshes.
+        key: @metric
+      )
+    end
+
+    # Gauges are short; flex-1 lets the body grow to the card height (grid
+    # rows stretch to the tallest area chart) so the min/avg/max footer
+    # sits pinned at the bottom instead of floating mid-card.
+    if gauge?
+      div(class: "flex-1 flex flex-col justify-center") do
+        if gauge_radial?
+          render Clowk::Phlex::Charts::GaugeRadial.new(
+            pct: gauge_pct, color: @color, sub_label: gauge_sub_label,
+            percent: @percent, value_label: gauge_center_value
+          )
+        else
+          render Clowk::Phlex::Charts::GaugeLinear.new(
+            pct: gauge_pct, color: @color,
+            value_label: gauge_value_label, capacity_label: @capacity_label,
+            percent: @percent, center_value: gauge_center_value
+          )
+        end
+      end
+    else
+      render Clowk::Phlex::Charts::TimeSeries.new(
+        points: @points,
+        color: @color,
+        unit: @unit,
+        label: @label,
+        range_ms: @range_ms,
+        height: 200,
+        style: chart_style,
+        # Stable panel id so a single-series Line chart also keys its "Show
+        # dots" pref (options menu). Harmless on area/bars (no menu, no dots).
+        key: @metric
+      )
+    end
+  end
+
+  # chart_style — Bar / Line / Area for the non-gauge branch.
+  def chart_style
+    case @chart_type.to_s
+    when "bars" then :bars
+    when "line" then :line
+    else :area
+    end
+  end
+
+  def gauge? = gauge_radial? || gauge_linear?
+  def gauge_radial? = @chart_type.to_s == "gauge_radial" && !gauge_pct.nil?
+  def gauge_linear? = @chart_type.to_s == "gauge_linear" && !gauge_pct.nil?
+
+  # gauge_pct — the 0..100 fill. Capacity metrics (memory/disk) use the
+  # computed capacity_pct; percent metrics (CPU%) use the value itself.
+  # nil → no ceiling → ChartCard renders the area chart instead.
+  def gauge_pct
+    return @capacity_pct unless @capacity_pct.nil?
+    return @current || stats[:current] if percent_unit?
+
+    nil
+  end
+
+  # gauge_sub_label — radial center sub-line: "13.2 / 42 GB" for a
+  # capacity metric, nil for a percent metric (the % already is it).
+  def gauge_sub_label
+    return nil unless @capacity_label
+
+    v = @current || stats[:current]
+    return @capacity_label if v.nil?
+
+    "#{Clowk::Phlex::Charts::Format.number(v)} / #{@capacity_label}"
+  end
+
+  # gauge_value_label — linear "used" figure ("13.2 GB"); nil for a
+  # percent metric.
+  def gauge_value_label
+    return nil if percent_unit? || @capacity_label.nil?
+
+    v = @current || stats[:current]
+    v.nil? ? nil : "#{Clowk::Phlex::Charts::Format.number(v)} #{@unit}".strip
+  end
+
+  # gauge_center_value — the raw current value the radial shows in its center
+  # when percent: false (a count reads clearer than "% of peak").
+  def gauge_center_value
+    v = @current || stats[:current]
+    v.nil? ? nil : "#{Clowk::Phlex::Charts::Format.number(v)} #{@unit}".strip
+  end
+
+  # card_header — colored label + big current value + right-aligned
+  # min/avg/max strip + maximize affordance.
+  #
+  # Headline current value preference order:
+  #   1. @current — set explicitly by the caller from the API's
+  #                 unaggregated `latest` field. Stable across
+  #                 range pills (the whole point).
+  #   2. series.last value — bucket-aggregated; only used when
+  #                 the API didn't ship a latest (cold boot or
+  #                 older controller).
+  #
+  # Named `card_header` (not `header`) because `header` is also
+  # a Phlex HTML tag — Phlex's method_missing for HTML tags
+  # collides with this method name.
+  def card_header
+    s = stats
+
+    # Header carries ONLY the identity + headline now: label + [http]
+    # badge + current value + capacity, with the maximize pinned
+    # top-right (shrink-0, outside the wrapping flow so it never orphans
+    # at narrow widths). The min/avg/max strip moved to stat_footer
+    # under the chart — mirrors the expand modal's layout, keeps the
+    # header clean and uncluttered on a 4-up grid.
+    # Header is single-line (no flex-wrap): a narrow card in a 4-up grid must
+    # NOT wrap the label/value/capacity onto a second line — that grows the card
+    # and pushes the whole grid row taller, breaking footer alignment across the
+    # row. Instead the label + capacity truncate (ellipsis) under pressure while
+    # the headline value (shrink-0) stays whole.
+    div(class: "flex items-start justify-between gap-2") do
+      div(class: "flex items-baseline gap-x-2.5 min-w-0 overflow-hidden") do
+        span(
+          class: "text-[11.5px] font-semibold uppercase tracking-[0.05em] min-w-0 truncate",
+          style: "color: #{@color};"
+        ) { @label }
+
+        # [http] inline badge — replaces the old HTTP section divider.
+        # Same visual signal ("this metric comes from ingress logs") but
+        # without splitting the grid into two boxes.
+        if @section == "http"
+          span(
+            class: "text-[9.5px] font-clowk-mono text-clowk-muted-2 uppercase tracking-[0.06em] " \
+                   "border border-clowk-border px-1 py-px translate-y-[-1px] shrink-0",
+            title: "HTTP metric (ingress)"
+          ) { "http" }
+        end
+
+        # Render number + unit. For percent metrics the unit is part
+        # of the formatted string (so we can show "<0.01%" without
+        # the magnitude tier rendering "<0.01" with a separate "%"
+        # span looking like "<0.01 %"). For everything else the
+        # number stays plain and the unit hangs in its own muted
+        # span.
+        # Multi-series has no single headline value — show the pod count.
+        if multi?
+          span(class: "font-clowk-mono text-[12px] text-clowk-muted shrink-0 whitespace-nowrap") { "#{@series.size} pods" }
+        elsif gauge_multi?
+          span(class: "font-clowk-mono text-[12px] text-clowk-muted shrink-0 whitespace-nowrap") { "#{@gauge_bars.size} pods" }
+        end
+
+        # Gauges render the value + capacity inside the dial/bar, so the
+        # header drops the big number to avoid showing it twice.
+        unless gauge? || multi? || gauge_multi?
+          span(class: "font-clowk-mono text-[22px] font-semibold text-clowk-text shrink-0 whitespace-nowrap") do
+            if percent_unit?
+              plain format_current(@current || s[:current])
+            else
+              plain format_current(@current || s[:current])
+              span(class: "text-clowk-muted text-[12px] font-normal ml-0.5") { @unit }
+            end
+          end
+
+          capacity_chip if @capacity_label
+        end
+      end
+
+      # Top-right actions: maximize (⛶) first, then the options menu (⋮) LAST —
+      # the triple-dot menu is conventionally the trailing icon.
+      div(class: "flex items-center gap-0.5 shrink-0") do
+        maximize_link if @expand_url
+        options_menu if options_menu?
+      end
+    end
+  end
+
+  # options_menu? — which panels get the ⋮ options menu. Its sole option today
+  # ("Show dots") only makes sense where dots exist: Line (single + multi always
+  # draw dots) and multi Area (one dotted line per pod). Single Area has no dots,
+  # so it gets no menu.
+  def options_menu?
+    return true if @chart_type.to_s == "line"
+
+    multi? && @chart_type.to_s == "area"
+  end
+
+  # options_menu — the triple-dot popover. The trigger lives in the header; the
+  # menu (portaled out on open by the popover controller to escape clipping)
+  # carries its own panel-options controller keyed by the panel id, so its
+  # toggle persists + broadcasts to the matching chart. Content must be self-
+  # contained (no data-action bound to an ancestor that won't survive portaling).
+  def options_menu
+    div(class: "relative", data: {controller: "popover"}) do
+      button(
+        type: "button",
+        data: {popover_target: "trigger", action: "popover#toggle"},
+        class: "inline-flex items-center justify-center w-7 h-7 text-clowk-muted hover:text-clowk-text hover:bg-clowk-surface-2",
+        aria: {label: "Panel options", haspopup: "true"}, title: "Panel options"
+      ) { icon(:ellipsis_vertical, class: "w-4 h-4") }
+
+      div(
+        hidden: true,
+        data: {popover_target: "menu", controller: "panel-options", panel_options_key_value: @metric},
+        class: "min-w-[220px] bg-clowk-surface-2 border border-clowk-border shadow-xl overflow-hidden"
+      ) do
+        # Header — names the panel, like a dropdown's section header.
+        div(class: "px-3 py-2 border-b border-clowk-border text-[10.5px] font-semibold uppercase tracking-[0.06em] text-clowk-muted-2 truncate") { @label }
+
+        # Option row — label + kbd hint (left), macOS-style switch (right).
+        label(class: "flex items-center justify-between gap-3 px-3 py-2.5 text-[12px] text-clowk-text-2 hover:bg-clowk-surface cursor-pointer select-none") do
+          span(class: "flex items-center gap-2 min-w-0") do
+            plain "Show dots"
+            option_kbd("D")
+          end
+          render Clowk::Phlex::UI::Switch.new(
+            checked: true,
+            data: {panel_options_target: "dots", action: "change->panel-options#toggleDots"}
+          )
+        end
+      end
+    end
+  end
+
+  # option_kbd — the shortcut hint beside an option: pressing the key toggles it
+  # while the popover is open (see panel_options_controller).
+  def option_kbd(key)
+    span(class: "inline-flex items-center justify-center min-w-[16px] h-4 px-1 rounded border border-clowk-border bg-clowk-surface text-[10px] font-clowk-mono text-clowk-muted-2 leading-none") { key }
+  end
+
+  # stat_footer — min/avg/max strip BELOW the chart, mirroring the
+  # expand modal's footer (Views::Metrics::ChartModalBody#stat_strip).
+  # Frees the header of the stats clutter so it stays clean even on a
+  # 4-up grid. Skipped when there's no data (the chart shows its own
+  # empty state).
+  def stat_footer
+    # Multi-series draws its own interactive legend inside the Chart (so the
+    # legend buttons sit in the metrics-chart controller scope + can toggle the
+    # lines). Nothing extra to render here.
+    return if multi? || gauge_multi?
+    return if @points.empty?
+
+    s = stats
+
+    # Single line, no wrap: a narrow card must keep min/avg/max on ONE row so
+    # the card height stays constant across the grid (a wrapped footer grows the
+    # card and misaligns the whole row). Block + nowrap + text-ellipsis clips
+    # with a "…" instead of breaking to a second line.
+    div(class: "min-w-0 overflow-hidden text-ellipsis whitespace-nowrap px-0.5") do
+      stat_chip("min", s[:min])
+      stat_chip("avg", s[:avg])
+      stat_chip("max", s[:max])
+    end
+  end
+
+  # maximize_link — anchor with `data-turbo-stream="true"` so the
+  # GET request negotiates a turbo_stream response. The server
+  # (MetricsController#chart) renders a stream that updates the
+  # shared #chart-modal-* slots and fires the chart_modal_open
+  # action — all in one request, no client-side state to manage.
+  #
+  # Trade-off vs button + JS controller: cmd-click NOW opens
+  # /metrics/chart in a new tab as a normal page (format.html
+  # fallback). Previously this would just no-op or open a JS-only
+  # action. Honest hyperlink semantics restored for free.
+  def maximize_link
+    a(
+      href: @expand_url,
+      data: {turbo_stream: "true"},
+      title: "Expand chart",
+      "aria-label": "Expand #{@label} chart",
+      class: "inline-flex items-center justify-center w-7 h-7 text-clowk-muted hover:text-clowk-text hover:bg-clowk-surface-2 shrink-0"
+    ) do
+      icon(:arrows_pointing_out, class: "w-3.5 h-3.5")
+    end
+  end
+
+  # stat_chip — footer min/avg/max chip. Matches the expand modal's
+  # stat_strip vocabulary (muted label + emphasized value) so the
+  # inline card and the modal read the same.
+  # stat_chip — inline (NOT a flex item) so the parent's text-ellipsis can clip
+  # the row as one continuous line. mr-4 spaces the chips (last:mr-0 drops the
+  # trailing gap); inline-block would make each chip atomic and break the
+  # single-line ellipsis, so they stay plain inline spans.
+  def stat_chip(label, value)
+    span(class: "text-[11px] font-clowk-mono text-clowk-muted mr-4 last:mr-0") do
+      plain "#{label} "
+      span(class: "text-clowk-text font-semibold") { format_value(value) }
+    end
+  end
+
+  # capacity_chip — the "of Y · NN%" suffix that pairs the headline
+  # current value with the resource's total. Renders just to the
+  # right of the headline so the operator reads "21.9 GB / 39 GB ·
+  # 56%" as one cohesive measurement. Muted styling keeps it from
+  # competing with the headline.
+  def capacity_chip
+    span(
+      class: "font-clowk-mono text-[12px] text-clowk-muted min-w-0 truncate",
+      title: @capacity_pct ? "current / total · #{@capacity_pct}% used" : "current / total"
+    ) do
+      plain "/ #{@capacity_label}"
+      if @capacity_pct
+        plain " · "
+        span(class: "text-clowk-text-2") { "#{@capacity_pct}%" }
+      end
+    end
+  end
+
+  # format_current — magnitude-adaptive headline. Percent metrics
+  # go through Clowk::Phlex::Charts::Format.percent so sub-1% values keep enough
+  # precision to be honest (0.05% instead of "0.0%"); other
+  # metrics use Clowk::Phlex::Charts::Format.number (the unit hangs in a separate
+  # muted span — see header).
+  def format_current(v)
+    return "—" if v.nil?
+
+    percent_unit? ? Clowk::Phlex::Charts::Format.percent(v) : Clowk::Phlex::Charts::Format.number(v)
+  end
+
+  # format_value — min/avg/max chips. Same logic as format_current
+  # so the headline + chips agree on precision (no more "current 0.0
+  # · avg 0.0 · max 0.0" lying about a chart that clearly varies).
+  def format_value(v)
+    return "—" if v.nil?
+
+    percent_unit? ? Clowk::Phlex::Charts::Format.percent(v) : Clowk::Phlex::Charts::Format.number(v)
+  end
+
+  # percent_unit? — whether the headline + chip formatters should
+  # bake the `%` into the formatted string. True only for actual
+  # percent units; "MB"/"GB"/"" stay number-only with the unit
+  # rendered in its own span.
+  def percent_unit?
+    @unit == "%"
+  end
+
+  # stats — current/min/avg/max in one pass over the series. Same
+  # shape the inspiration computes in `stats()` (line 350-355).
+  def stats
+    return {min: nil, max: nil, avg: nil, current: nil} if @points.empty?
+
+    values = @points.map { |p| p[:value].to_f }
+    sum = values.sum
+    current = values.last
+
+    {
+      min: values.min,
+      max: values.max,
+      avg: sum / values.size,
+      current: current
+    }
+  end
+end

data/lib/clowk/phlex/charts/chart_shape.rb

@@ -0,0 +1,86 @@
+# frozen_string_literal: true
+
+# Components::Metrics::ChartShape — the little glyph for a chart TYPE
+# (area / bars / line / radial / linear). ONE source of truth for the shape
+# icons, shared by the dashboard builder's shape chips and the expand modal's
+# chart-type dropdown (and whatever comes next).
+#
+# `css` sizes it: the default "w-full h-full" fills the big builder chip
+# preview; a small "w-6 h-4" sits inline before a dropdown label.
+#
+# Everything draws with currentColor so the glyph inherits the surrounding
+# text color — the builder sets it live to the metric hue, a dropdown row uses
+# its own text/accent color.
+class Clowk::Phlex::Charts::ChartShape < Clowk::Phlex::Component
+  # [{value, label, gauge}] for the time-series + gauge shapes, in display
+  # order. The canonical list the ChartTypePicker and the builder's metric
+  # shape chips both iterate. `gauge: true` ones need a metric with a ceiling.
+  METRIC_TYPES = [
+    {value: "area", label: "Area", gauge: false},
+    {value: "bars", label: "Bar", gauge: false},
+    {value: "line", label: "Line", gauge: false},
+    {value: "gauge_radial", label: "Radial", gauge: true},
+    {value: "gauge_linear", label: "Linear", gauge: true}
+  ].freeze
+
+  LABELS = METRIC_TYPES.to_h { |t| [t[:value], t[:label]] }.freeze
+
+  def initialize(type:, css: "w-full h-full")
+    @type = type.to_s
+    @css = css
+  end
+
+  def view_template
+    case @type
+    when "bars" then bars
+    when "line" then line
+    when "gauge_radial" then radial
+    when "gauge_linear" then linear
+    else area
+    end
+  end
+
+  private
+
+  def base_svg(fill: "none", &)
+    svg(viewBox: "0 0 80 40", class: @css, fill: fill, "aria-hidden": "true", preserveAspectRatio: "xMidYMid meet", &)
+  end
+
+  def area
+    base_svg do |s|
+      s.polygon(points: "0,28 20,18 40,22 60,10 80,16 80,40 0,40", fill: "currentColor", opacity: "0.18")
+      s.polyline(points: "0,28 20,18 40,22 60,10 80,16", stroke: "currentColor", "stroke-width": "2.5", "stroke-linejoin": "round", "stroke-linecap": "round")
+    end
+  end
+
+  def bars
+    base_svg do |s|
+      [[10, 22], [26, 12], [42, 18], [58, 8]].each do |x, y|
+        s.rect(x: x, y: y, width: "9", height: 36 - y, rx: "1.5", fill: "currentColor", opacity: "0.85")
+      end
+    end
+  end
+
+  def line
+    pts = [[8, 29], [30, 15], [52, 23], [72, 9]]
+
+    base_svg do |s|
+      s.polyline(points: pts.map { |x, y| "#{x},#{y}" }.join(" "), stroke: "currentColor", "stroke-width": "2.5", "stroke-linejoin": "round", "stroke-linecap": "round")
+      pts.each { |x, y| s.circle(cx: x, cy: y, r: "3", fill: "currentColor") }
+    end
+  end
+
+  def radial
+    base_svg do |s|
+      s.path(d: "M14 34 A26 26 0 0 1 66 34", stroke: "var(--clowk-border-2)", "stroke-width": "5", "stroke-linecap": "round")
+      s.path(d: "M14 34 A26 26 0 0 1 52 12", stroke: "currentColor", "stroke-width": "5", "stroke-linecap": "round")
+    end
+  end
+
+  def linear
+    base_svg(fill: nil) do |s|
+      s.rect(x: "8", y: "17", width: "64", height: "7", rx: "3.5", fill: "var(--clowk-border-2)")
+      s.rect(x: "8", y: "17", width: "42", height: "7", rx: "3.5", fill: "currentColor")
+    end
+  end
+end