glance-widgets-sdk 1.0.0

data/lib/glance_widgets/components/progress.rb

@@ -0,0 +1,62 @@
+# frozen_string_literal: true
+
+module GlanceWidgets
+  PROGRESS_BAR_DEFAULTS = {
+    'id' => 'progress', 'min' => 0, 'max' => 100, 'orientation' => 'horizontal', 'thickness' => 6,
+    'labelPosition' => 'end', 'fontSizeRatio' => 0.07, 'labelOpacity' => 1, 'zIndex' => 0
+  }.freeze
+
+  # Modern progress bar: a rounded track and a rounded fill (2 line layers, + a label).
+  def progress_bar(value, options)
+    canvas = require_canvas(options['canvas'], 'progress_bar')
+    id, = Components.identity(options, 'progress', 'progress_bar')
+    minimum = options['min'].nil? ? 0 : options['min']
+    maximum = options['max'].nil? ? 100 : options['max']
+    Components.range('progress_bar', minimum, maximum)
+    thickness = DataValues.fetch_or(options, 'thickness', 6)
+    Modern.require_stroke('progress_bar', 'thickness', thickness, LINE_STROKE_MAX_PT)
+    direction = DataValues.fetch_or(options, 'orientation', 'horizontal')
+    vertical = direction == 'vertical'
+    colors = MODERN_COLORS.merge(DataValues.fetch_or(options, 'colors', {}))
+    z = DataValues.fetch_or(options, 'zIndex', 0)
+    fraction = Components.fraction(value, minimum, maximum)
+    area = Components.area(options['frame'], canvas).to_pt
+    from, to = vertical ? [area['y'], area['y'] + area['height']] : [area['x'], area['x'] + area['width']]
+    layers = []
+    label = options['label']
+    unless label.nil? || label == false
+      content = label.is_a?(String) ? label : percent_label(fraction)
+      at_end = DataValues.fetch_or(options, 'labelPosition', 'end') == 'end'
+      line_box = TEXT_LINE_HEIGHT * LABEL_BOX_LINES
+      fit_across = vertical ? Components.font_for_width(content, area['width']) : area['height'] / line_box
+      fit_along = vertical ? area['height'] / (line_box * LABEL_MAX_SHARE_DIVISOR) : Components.font_for_width(content, area['width'] / LABEL_MAX_SHARE_DIVISOR)
+      requested = Components.font_pt(DataValues.fetch_or(options, 'fontSizeRatio', 0.07), canvas)
+      pt = Components.font_pt(Components.font_ratio([requested, fit_across, fit_along].min, canvas), canvas)
+      slot = vertical ? pt * line_box : Components.text_width(content, pt)
+      reserved = slot + pt * 0.4
+      rect = if vertical
+               { 'x' => area['x'], 'y' => at_end ? to - slot : from, 'width' => area['width'], 'height' => slot }
+             else
+               { 'x' => at_end ? to - slot : from, 'y' => area['y'], 'width' => slot, 'height' => area['height'] }
+             end
+      at_end ? to -= reserved : from += reserved
+      layers << Components.label(id + ':label', Box.from_pt(rect, canvas), content,
+                                 vertical ? 'center' : (at_end ? 'right' : 'left'), 'center',
+                                 Components.font_ratio(pt, canvas), colors['label'], 1, z + 1)
+    end
+    at = vertical ? area['x'] + area['width'] / 2.0 : area['y'] + area['height'] / 2.0
+    minimum_length = Modern.min_capsule_length(canvas, direction, thickness)
+    raise ArgumentError, "progress_bar: the area is too short for a #{thickness} pt bar" unless to - from >= minimum_length
+    spec = { 'canvas' => canvas, 'direction' => direction, 'at' => at, 'width' => thickness, 'zIndex' => z }
+    layers.unshift(Modern.capsule(spec.merge('id' => id + ':track', 'from' => from, 'to' => to,
+                                             'color' => colors['track'], 'opacity' => TRACK_OPACITY)))
+    length = Modern.fill_length(fraction, to - from, minimum_length)
+    if length > 0
+      from_start = vertical == (options['reverse'] ? true : false)
+      start, stop = from_start ? [from, from + length] : [to - length, to]
+      layers.insert(1, Modern.capsule(spec.merge('id' => id + ':fill', 'from' => start, 'to' => stop,
+                                                 'color' => colors['fill'], 'opacity' => 1, 'zIndex' => z + 1)))
+    end
+    Components.combine(layers)
+  end
+end

data/lib/glance_widgets/components/ring_progress.rb

@@ -0,0 +1,89 @@
+# frozen_string_literal: true
+
+module GlanceWidgets
+  RING_PROGRESS_DEFAULTS = {
+    'id' => 'ring', 'min' => 0, 'max' => 100, 'startAngle' => 0, 'thicknessRatio' => 0.1, 'thicknessMin' => 3,
+    'labelOpacity' => 1, 'zIndex' => 0
+  }.freeze
+  RING_SAMPLE_STEP_DEGREES = 2
+  RING_POINT_DECIMALS = 1e4
+  RING_X_EXTREME = 90
+  RING_HALF_TURN = 180
+
+  # The arc from `from` to `to` (degrees clockwise from 12 o'clock) as x-ascending polylines on the unit circle.
+  def arc_pieces(from, to)
+    unit = ->(v) { Numbers.round([1, [-1, v].max].min * RING_POINT_DECIMALS) / RING_POINT_DECIMALS }
+    bounds = [from]
+    angle = ((from - RING_X_EXTREME).fdiv(RING_HALF_TURN)).ceil * RING_HALF_TURN + RING_X_EXTREME
+    while angle < to
+      bounds << angle if angle > from
+      angle += RING_HALF_TURN
+    end
+    bounds << to
+    pieces = []
+    (0...bounds.length - 1).each do |index|
+      a, b = bounds[index], bounds[index + 1]
+      next unless b - a > 1e-9
+      count = [2, ((b - a).fdiv(RING_SAMPLE_STEP_DEGREES)).ceil + 1].max
+      points = Array.new(count) do |step|
+        radians = ((a + ((b - a) * step).fdiv(count - 1)) * Math::PI) / RING_HALF_TURN
+        [unit.call(Math.sin(radians)), unit.call(Math.cos(radians))]
+      end
+      points.reverse! if points.first[0] > points.last[0]
+      pieces << points
+    end
+    pieces
+  end
+
+  def ring_progress(value, options)
+    canvas = require_canvas(options['canvas'], 'ring_progress')
+    id, = Components.identity(options, 'ring', 'ring_progress')
+    minimum = options['min'].nil? ? 0 : options['min']
+    maximum = options['max'].nil? ? 100 : options['max']
+    Components.range('ring_progress', minimum, maximum)
+    start = DataValues.fetch_or(options, 'startAngle', 0)
+    raise ArgumentError, "ring_progress: startAngle must be finite, got #{start}" unless Numbers.finite?(start)
+    colors = MODERN_COLORS.merge(DataValues.fetch_or(options, 'colors', {}))
+    z = DataValues.fetch_or(options, 'zIndex', 0)
+    fraction = Components.fraction(value, minimum, maximum)
+    area = Components.area(options['frame'], canvas).to_pt
+    side = [area['width'], area['height']].min
+    ring_pt = { 'x' => area['x'] + (area['width'] - side) / 2.0, 'y' => area['y'] + (area['height'] - side) / 2.0,
+                'width' => side, 'height' => side }
+    ring_box = Box.from_pt(ring_pt, canvas)
+    thickness = DataValues.fetch_or(options, 'thickness', [CURVE_STROKE_MAX_PT, [3, Numbers.round(side * 0.1)].max].min)
+    Modern.require_stroke('ring_progress', 'thickness', thickness, CURVE_STROKE_MAX_PT)
+    raise ArgumentError, "ring_progress: a #{thickness} pt ring does not fit #{side} pt" unless thickness < side / 2.0
+    pieces = lambda do |from, to, role, color, opacity, zi|
+      arc_pieces(from, to).each_with_index.map do |points, index|
+        curve('id' => "#{id}:#{role}-#{index}", 'frame' => ring_box, 'zIndex' => zi,
+              'data' => { 'mode' => 'samples', 'points' => points, 'domain' => [-1, 1], 'yDomain' => [-1, 1], 'interpolation' => 'linear' },
+              'style' => { 'color' => color, 'opacity' => opacity, 'strokeWidth' => thickness, 'lineCap' => 'round',
+                           'plotPadding' => thickness / 2.0 })
+      end
+    end
+    layers = pieces.call(-RING_X_EXTREME, 360 - RING_X_EXTREME, 'track', colors['track'], TRACK_OPACITY, z)
+    if fraction > 0
+      sweep = fraction * 360
+      from, to = options['counterClockwise'] ? [start - sweep, start] : [start, start + sweep]
+      layers.concat(pieces.call(from, to, 'arc', colors['fill'], 1, z + 1))
+    end
+    if options['label'] != false
+      label = options['label']
+      content = label.is_a?(String) ? label : percent_label(fraction)
+      hole = [1, side / 2.0 - thickness].max
+      hole_width, hole_height = 1.6 * hole, 1.2 * hole
+      requested = if DataValues.set?(options, 'fontSizeRatio')
+                    Components.font_pt(options['fontSizeRatio'], canvas)
+                  else
+                    [hole_height / (TEXT_LINE_HEIGHT * LABEL_BOX_LINES), Components.font_for_width(content, hole_width)].min
+                  end
+      pt = Components.font_pt(Components.font_ratio(requested, canvas), canvas)
+      bw, bh = [hole_width, Components.text_width(content, pt)].max, [hole_height, Components.text_height(pt)].max
+      cx, cy = ring_pt['x'] + side / 2.0, ring_pt['y'] + side / 2.0
+      layers << Components.label(id + ':label', Box.from_pt({ 'x' => cx - bw / 2.0, 'y' => cy - bh / 2.0, 'width' => bw, 'height' => bh }, canvas),
+                                 content, 'center', 'center', Components.font_ratio(pt, canvas), colors['label'], 1, z + 2)
+    end
+    Components.combine(layers)
+  end
+end

data/lib/glance_widgets/components/shared.rb

@@ -0,0 +1,131 @@
+# frozen_string_literal: true
+
+module GlanceWidgets
+  DEFAULT_THEME_NAME = 'lcd'
+  STATUS_COLORS = { 'good' => '#34C759', 'warn' => '#FF9F0A', 'bad' => '#FF453A', 'neutral' => '#8E8E93' }.freeze
+
+  # Shared component measurements are in points until a layer frame is emitted.
+  TEXT_LINE_HEIGHT = 1.2
+  LABEL_BOX_LINES = 1.5
+  LABEL_MAX_SHARE_DIVISOR = 3
+
+  def percent_label(fraction)
+    "#{Numbers.round(fraction * 100)}%"
+  end
+
+  module Components
+    extend self
+    def combine(parts)
+      merged = GlanceWidgets.merge(*parts)
+      { 'layers' => merged.fetch('layers', []), 'data' => merged.fetch('data', {}) }
+    end
+
+    ADVANCES = DataValues.load('text-advances.json')
+
+    def theme(input = nil)
+      input.nil? || input.is_a?(String) ? GlanceWidgets.get_theme(input || DEFAULT_THEME_NAME) : input
+    end
+
+    def area(frame, canvas)
+      return Box.canvas(canvas) if frame.nil?
+      return Box.new(frame.left, frame.top, frame.width, frame.height, canvas) if frame.is_a?(Box)
+      Box.from_frame(frame, canvas)
+    end
+
+    def emitted(box, canvas)
+      frame = box.to_frame
+      { 'frame' => frame, 'rect' => GlanceWidgets.resolve_frame(frame, canvas) }
+    end
+
+    def region(options, what)
+      canvas, frame = options['canvas'], options['frame']
+      unless canvas
+        return frame.to_pt if frame.is_a?(Box) && frame.instance_variable_get(:@canvas)
+        raise ArgumentError, "#{what}: frame needs canvas" if frame
+        return nil
+      end
+      emitted(area(frame, GlanceWidgets.require_canvas(canvas, what)), canvas)['rect']
+    end
+
+    def grid(region, size, theme, what)
+      unless region
+        raise ArgumentError, "#{what}: grid needs both counts without canvas" unless size['columns'] && size['rows']
+        return size.merge('layout' => DataValues.copy(theme['layout']))
+      end
+      GlanceWidgets.solve_grid(size.reject { |_, value| value.nil? }.merge(
+        'region' => region, 'gapMode' => theme['layout']['gapMode'], 'clampAspect' => true
+      ))
+    end
+
+    def looks(theme, colors = {})
+      off = !colors['off'].nil? && colors['off'] != '' ? theme['default'].merge('color' => colors['off']) : theme['default']
+      { 'on' => DataValues.fetch_or(colors, 'on', theme['palette']['on']),
+        'off' => colors.key?('off') && colors['off'].nil? ? EMPTY : off }
+    end
+
+    def advance_em(content)
+      content.each_char.sum do |char|
+        code = char.ord
+        (code.between?(32, 126) ? ADVANCES['ascii'][code - 32] : ADVANCES['extra'].fetch(char, 1000)) + 40
+      end / 1000.0
+    end
+
+    def advance_pt(content, pt)
+      advance_em(content) * pt
+    end
+
+    def text_width(content, pt)
+      advance_em(content) * 1.05 * pt + 1
+    end
+
+    def font_for_width(content, width)
+      [0, width - 1].max / [1e-9, advance_em(content) * 1.05].max
+    end
+
+    def text_height(pt, lines = 1)
+      lines * TEXT_LINE_HEIGHT * pt + 1
+    end
+
+    def font_pt(ratio, canvas)
+      ratio * [canvas['width'], canvas['height']].min
+    end
+
+    def font_ratio(pt, canvas)
+      Numbers.clamp(pt.fdiv([canvas['width'], canvas['height']].min), 0.02, 0.28)
+    end
+
+    def identity(options, fallback, what)
+      id = DataValues.fetch_or(options, 'id', fallback)
+      unless DataValues.set?(options, 'path') || /\A[A-Za-z_][A-Za-z0-9_]*\z/.match(id)
+        raise ArgumentError, "#{what}: non-identifier id needs an explicit path"
+      end
+      [id, DataValues.fetch_or(options, 'path', 'data.' + id)]
+    end
+
+    def decimals(*values)
+      values.all? { |v| Numbers.integer?(v) } ? 0 : 1
+    end
+
+    def fraction(value, minimum, maximum)
+      Numbers.require_finite(value, 'Value')
+      maximum > minimum ? Numbers.clamp((value - minimum).fdiv(maximum - minimum), 0, 1).to_f : 0.0
+    end
+
+    def range(what, minimum, maximum)
+      unless Numbers.finite?(minimum) && Numbers.finite?(maximum) && maximum > minimum
+        raise ArgumentError, "#{what}: max must exceed min"
+      end
+    end
+
+    def positive(what, name, value)
+      raise ArgumentError, "#{what}: #{name} must be positive integer" unless Numbers.integer?(value) && value >= 1
+    end
+
+    def label(id, box, content, horizontal, vertical, ratio, color, opacity, z, weight = nil)
+      style = { 'color' => color, 'textOpacity' => opacity, 'fontSizeRatio' => ratio,
+                'horizontalAlignment' => horizontal, 'verticalAlignment' => vertical }
+      style['fontWeight'] = weight if weight
+      GlanceWidgets.text('id' => id, 'frame' => box, 'text' => content, 'zIndex' => z, 'style' => style)
+    end
+  end
+end

data/lib/glance_widgets/components/signal.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+module GlanceWidgets
+  SIGNAL_DEFAULTS = { 'id' => 'signal', 'min' => 0, 'max' => 100, 'bars' => 4, 'maxHeight' => 14,
+                      'barWidthRatio' => 0.26, 'gapRatio' => 0.5, 'shortestRatio' => 0.35, 'zIndex' => 0 }.freeze
+
+  # Modern reception indicator: ascending round-capped bars, lit up to the level.
+  def signal(level, options)
+    canvas = require_canvas(options['canvas'], 'signal')
+    id, = Components.identity(options, 'signal', 'signal')
+    minimum = options['min'].nil? ? 0 : options['min']
+    maximum = options['max'].nil? ? 100 : options['max']
+    Components.range('signal', minimum, maximum)
+    bars = DataValues.fetch_or(options, 'bars', 4)
+    Components.positive('signal', 'bars', bars)
+    area = Components.area(options['frame'], canvas).to_pt
+    height = DataValues.fetch_or(options, 'height', [SIGNAL_DEFAULTS['maxHeight'], area['height']].min)
+    width = DataValues.fetch_or(options, 'barWidth', height * SIGNAL_DEFAULTS['barWidthRatio'])
+    Modern.require_stroke('signal', 'barWidth', width, LINE_STROKE_MAX_PT)
+    gap = width * SIGNAL_DEFAULTS['gapRatio']
+    minimum_length = Modern.min_capsule_length(canvas, 'vertical', width)
+    unless height >= minimum_length && height <= area['height']
+      raise ArgumentError, "signal: height #{height} pt does not fit the area"
+    end
+    raise ArgumentError, 'signal: the area is too narrow' if bars * width + (bars - 1) * gap > area['width']
+    colors = DataValues.fetch_or(options, 'colors', {})
+    fill = DataValues.fetch_or(colors, 'fill', MODERN_COLORS['label'])
+    track = DataValues.fetch_or(colors, 'track', fill)
+    lit = Numbers.round(Components.fraction(level, minimum, maximum) * bars)
+    bottom = area['y'] + (area['height'] + height) / 2.0
+    layers = Array.new(bars.to_i) do |index|
+      share = bars == 1 ? 1 : SIGNAL_DEFAULTS['shortestRatio'] + ((1 - SIGNAL_DEFAULTS['shortestRatio']) * index).fdiv(bars - 1)
+      Modern.capsule('id' => "#{id}:bar-#{index}", 'canvas' => canvas, 'direction' => 'vertical',
+                     'at' => area['x'] + width / 2.0 + index * (width + gap),
+                     'from' => bottom - [minimum_length, height * share].max, 'to' => bottom,
+                     'width' => width, 'color' => index < lit ? fill : track, 'opacity' => index < lit ? 1 : TRACK_OPACITY,
+                     'zIndex' => DataValues.fetch_or(options, 'zIndex', 0))
+    end
+    Components.combine(layers)
+  end
+end

data/lib/glance_widgets/components/stat.rb

@@ -0,0 +1,171 @@
+# frozen_string_literal: true
+
+module GlanceWidgets
+  STAT_DEFAULTS = {
+    'id' => 'stat', 'deltaDecimals' => 1, 'arrow' => 'icon', 'valueStyle' => 'text', 'align' => 'left',
+    'fontSizeRatio' => 0.08, 'pixelFont' => '5x7', 'pixelUnitFont' => '3x5', 'zIndex' => 0,
+    'labelOpacity' => 0.72, 'valueColor' => '#FFFFFF', 'labelColor' => '#FFFFFF',
+    'upIcon' => 'ph_arrowUp', 'downIcon' => 'ph_arrowDown', 'flatIcon' => 'ph_minus'
+  }.freeze
+
+  # A card keeps its measurements together rather than passing implicit state
+  # through a generic evaluator. Each row produces ordinary protocol layers.
+  class StatCard
+    def initialize(value, options)
+      @options = options
+      @canvas = GlanceWidgets.require_canvas(options['canvas'], 'stat')
+      @id, @path = Components.identity(options, 'stat', 'stat')
+      unless value.is_a?(String) || Numbers.finite?(value)
+        raise ArgumentError, 'Stat value must be finite number or string'
+      end
+      @value = if value.is_a?(String)
+                 value
+               else
+                 Numbers.format_number(value, DataValues.fetch_or(options, 'decimals', Components.decimals(value)))
+               end
+      @theme = Components.theme(options['theme'])
+      @pixel = DataValues.fetch_or(options, 'valueStyle', 'text') == 'pixel'
+      @center = DataValues.fetch_or(options, 'align', 'left') == 'center'
+      @z = DataValues.fetch_or(options, 'zIndex', 0)
+      @colors = DataValues.fetch_or(options, 'colors', {})
+      @value_color = DataValues.fetch_or(@colors, 'value', @pixel ? @theme['palette']['on'] : '#FFFFFF')
+      delta = options['delta']
+      @direction = delta.nil? ? nil : (delta > 0 ? 'up' : (delta < 0 ? 'down' : 'flat'))
+      @delta = options['deltaText']
+      if @delta.nil? && !delta.nil?
+        @delta = (delta > 0 ? '+' : '') + Numbers.format_number(delta, DataValues.fetch_or(options, 'deltaDecimals', 1)) +
+                 DataValues.fetch_or(options, 'deltaSuffix', '')
+      end
+      present = (DataValues.set?(options, 'label') ? ['label'] : []) + ['value'] + (@delta.nil? ? [] : ['delta'])
+      weights = { 'label' => 2, 'value' => 5, 'delta' => 2 }
+      boxes = Components.area(options['frame'], @canvas).rows(present.map { |row| weights[row] })
+      @rows = present.zip(boxes.map(&:to_pt)).to_h
+      @layers = []
+    end
+
+    def build
+      add_label if DataValues.set?(@options, 'label')
+      @pixel ? add_pixel_value : add_text_value
+      add_delta unless @delta.nil?
+      Components.combine(@layers)
+    end
+
+    private
+
+    def used_pt(value)
+      Components.font_pt(Components.font_ratio(value, @canvas), @canvas)
+    end
+
+    def fit_font(height, width, content)
+      used_pt([height / (TEXT_LINE_HEIGHT * LABEL_BOX_LINES), Components.font_for_width(content, width),
+               Components.font_pt(DataValues.fetch_or(@options, 'fontSizeRatio', 0.08), @canvas)].min)
+    end
+
+    def text_layer(role, rect, content, horizontal, pt, color, opacity, weight)
+      @layers << Components.label(@id + ':' + role, Box.from_pt(rect, @canvas), content, horizontal, 'center',
+                                  Components.font_ratio(pt, @canvas), color, opacity, @z, weight)
+    end
+
+    def add_label
+      rect = @rows['label']
+      pt = fit_font(rect['height'], rect['width'], @options['label'])
+      text_layer('label', rect, @options['label'], @center ? 'center' : 'left', pt,
+                 DataValues.fetch_or(@colors, 'label', '#FFFFFF'), 0.72, '400')
+    end
+
+    def add_pixel_value
+      font = DataValues.fetch_or(@options, 'pixelFont', '5x7')
+      main = GlanceWidgets.measure_text(@value, font)
+      small = if DataValues.set?(@options, 'unit')
+                GlanceWidgets.measure_text(@options['unit'], DataValues.fetch_or(@options, 'pixelUnitFont', '3x5'))
+              end
+      content = Components.content_matrix(main['width'] + (small ? 1 + small['width'] : 0),
+                                           [main['height'], small ? small['height'] : 0].max, @theme)
+      content.text(@value, 0, 0, 'font' => font, 'style' => @value_color)
+      if small
+        content.text(@options['unit'], main['width'] + 1, [0, main['height'] - small['height']].max,
+                     'font' => DataValues.fetch_or(@options, 'pixelUnitFont', '3x5'),
+                     'style' => DataValues.fetch_or(@colors, 'value', @theme['palette']['dim']))
+      end
+      region = Components.emitted(Box.from_pt(@rows['value'], @canvas), @canvas)
+      options = @options.select { |key, _| key == 'maxCellSize' }.merge(
+        'theme' => @theme, 'align' => @center ? 'center' : 'left', 'valign' => 'center'
+      )
+      matrix = Components.fit_pixel(content, region['rect'], options)
+      append_matrix(matrix, @id + ':value', region['frame'], @path)
+    end
+
+    def add_text_value
+      rect = @rows['value']
+      unit = @options['unit']
+      value_em = Components.advance_em(@value)
+      width_em = unit.nil? ? value_em * 1.05 :
+        [value_em * 1.05, value_em + 0.15 + Components.advance_em(unit) * 1.05 * 0.45].max
+      fit_width = [0, rect['width'] - 1].max / [1e-9, width_em].max
+      pt = used_pt([rect['height'] / 1.32, fit_width].min)
+      value_width = Components.advance_pt(@value, pt)
+      unit_font, unit_gap = used_pt(pt * 0.45), pt * 0.15
+      unit_width = unit.nil? ? 0 : Components.advance_pt(unit, unit_font)
+      total = value_width + (unit.nil? ? 0 : unit_gap + unit_width)
+      start = @center ? rect['x'] + (rect['width'] - total) / 2 : rect['x']
+      box_height = pt * 1.32
+      top = rect['y'] + (rect['height'] - box_height) / 2
+      value_rect = { 'x' => start, 'y' => top, 'width' => Components.text_width(@value, pt), 'height' => box_height }
+      text_layer('value', value_rect, @value, 'left', pt, @value_color, 1, '700')
+      return if unit.nil?
+      height = unit_font * 1.32
+      unit_rect = { 'x' => start + value_width + unit_gap, 'y' => top + box_height - height,
+                    'width' => Components.text_width(unit, unit_font), 'height' => height }
+      text_layer('unit', unit_rect, unit, 'left', unit_font, @value_color, 0.72, '400')
+    end
+
+    def add_delta
+      rect = @rows['delta']
+      good = if @direction && @direction != 'flat'
+               (@direction == 'up') != DataValues.fetch_or(@options, 'invertDelta', false)
+             end
+      status = good.nil? ? 'neutral' : (good ? 'good' : 'bad')
+      color = DataValues.fetch_or(@colors, status, STATUS_COLORS[status])
+      arrow = DataValues.fetch_or(@options, 'arrow', 'icon')
+      show_arrow = arrow != 'none' && !@direction.nil?
+      pt = fit_font(rect['height'], rect['width'] - (show_arrow ? 1.2 * rect['height'] : 0), @delta)
+      arrow_pt, gap = show_arrow ? [pt * 1.2, pt * 0.4] : [0, 0]
+      total = arrow_pt + gap + Components.advance_pt(@delta, pt)
+      start = @center ? rect['x'] + (rect['width'] - total) / 2 : rect['x']
+      if show_arrow
+        square = { 'x' => start, 'y' => rect['y'] + (rect['height'] - arrow_pt) / 2,
+                   'width' => arrow_pt, 'height' => arrow_pt }
+        add_arrow(arrow, square, color)
+      end
+      text_rect = { 'x' => start + arrow_pt + gap, 'y' => rect['y'],
+                    'width' => Components.text_width(@delta, pt), 'height' => rect['height'] }
+      text_layer('delta', text_rect, @delta, 'left', pt, color, 1, '600')
+    end
+
+    def add_arrow(kind, square, color)
+      if kind == 'icon'
+        name = { 'up' => 'ph_arrowUp', 'down' => 'ph_arrowDown', 'flat' => 'ph_minus' }.fetch(@direction)
+        @layers << GlanceWidgets.icon('id' => @id + ':arrow', 'name' => name, 'frame' => Box.from_pt(square, @canvas),
+                                      'zIndex' => @z, 'style' => { 'color' => color })
+      else
+        rows = @direction == 'flat' ? %w[..... ..... ##### ..... .....] : %w[..#.. .###. ##### ..#.. ..#..]
+        rows = rows.reverse if @direction == 'down'
+        matrix = Components.content_matrix(5, 5, @theme)
+        rows.each_with_index do |row, y|
+          row.each_char.with_index { |char, x| matrix.set(x, y, color) if char == '#' }
+        end
+        region = Components.emitted(Box.from_pt(square, @canvas), @canvas)
+        append_matrix(matrix, @id + ':arrow', region['frame'], @path + 'Arrow')
+      end
+    end
+
+    def append_matrix(matrix, id, frame, path)
+      placed = GlanceWidgets.place(matrix.to_part, 'id' => id, 'frame' => frame, 'path' => path, 'zIndex' => @z)
+      @layers << placed
+    end
+  end
+
+  def stat(value, options)
+    StatCard.new(value, options).build
+  end
+end

data/lib/glance_widgets/components/status.rb

@@ -0,0 +1,102 @@
+# frozen_string_literal: true
+
+module GlanceWidgets
+  STATUS_STRIP_DEFAULTS = {
+    'cellWidth' => 1, 'cellGap' => 1, 'rows' => 5, 'unknownState' => 'unknown',
+    'colors' => { 'ok' => STATUS_COLORS['good'], 'warn' => STATUS_COLORS['warn'], 'down' => STATUS_COLORS['bad'] },
+    'names' => { 'ok' => 'OK', 'warn' => 'Warn', 'down' => 'Down', 'unknown' => 'No data' }
+  }.freeze
+  LABELED_STATUS_STRIP_DEFAULTS = {
+    'id' => 'statusStrip', 'fontSizeRatio' => 0.05, 'labelOpacity' => 0.72, 'zIndex' => 0
+  }.freeze
+
+  def state_style(state, theme, colors)
+    state ||= 'unknown'
+    return colors[state] if colors.key?(state)
+    return theme['default'] if state == 'unknown'
+    raise ArgumentError, "No color for state #{state}"
+  end
+  private :state_style
+
+  def strip_matrix(states, options)
+    raise ArgumentError, 'Status strip needs at least one state' if states.empty?
+    width, gap = DataValues.fetch_or(options, 'cellWidth', 1), DataValues.fetch_or(options, 'cellGap', 1)
+    Components.positive('status_strip', 'cellWidth', width)
+    raise ArgumentError, 'cellGap must be non-negative integer' unless Numbers.integer?(gap) && gap >= 0
+    Components.positive('status_strip', 'rows', options['rows']) if DataValues.set?(options, 'rows')
+    theme = Components.theme(options['theme'])
+    colors = STATUS_STRIP_DEFAULTS['colors'].merge(DataValues.fetch_or(options, 'colors', {}))
+    region = Components.region(options, 'status_strip')
+    size = { 'columns' => states.length * width + (states.length - 1) * gap,
+             'rows' => DataValues.fetch_or(options, 'rows', region ? nil : 5) }
+    plan = Components.grid(region, size, theme, 'status_strip')
+    matrix_options = theme_options(theme, 'default' => EMPTY, 'layout' => plan['layout'])
+    matrix = Matrix.new(plan['columns'], plan['rows'], matrix_options)
+    states.each_with_index do |state, i|
+      matrix.rect(i * (width + gap), 0, width, plan['rows'], state_style(state, theme, colors))
+    end
+    matrix
+  end
+  private :strip_matrix
+
+  def status_strip(states, options = {})
+    strip_matrix(states, options).to_part
+  end
+
+  def labeled_status_strip(states, options)
+    canvas = require_canvas(options['canvas'], 'labeled_status_strip')
+    id, path = Components.identity(options, 'statusStrip', 'labeled_status_strip')
+    theme = Components.theme(options['theme'])
+    colors = STATUS_STRIP_DEFAULTS['colors'].merge(DataValues.fetch_or(options, 'colors', {}).reject { |key, _| key == 'label' })
+    names = STATUS_STRIP_DEFAULTS['names'].merge(DataValues.fetch_or(options, 'names', {}))
+    z, ratio = DataValues.fetch_or(options, 'zIndex', 0), DataValues.fetch_or(options, 'fontSizeRatio', 0.05)
+    color = DataValues.fetch_or(DataValues.fetch_or(options, 'colors', {}), 'label', theme['palette']['on'])
+    legend = DataValues.fetch_or(options, 'legend', false)
+    listed = legend == false ? [] : (legend.is_a?(Array) ? legend : states.map { |s| s || 'unknown' }.uniq)
+    pt = Components.font_pt(ratio, canvas)
+    row_pt, gap_pt = Components.text_height(pt), pt * 0.4
+    has_labels = DataValues.set?(options, 'startLabel') || DataValues.set?(options, 'endLabel')
+    reserved = (has_labels ? gap_pt + row_pt : 0) + (listed.empty? ? 0 : gap_pt + row_pt)
+    area = Components.area(options['frame'], canvas)
+    rect = area.to_pt
+    raise ArgumentError, 'Area too small for labels' if reserved >= rect['height']
+    strip_box = area.inset_pt('bottom' => reserved)
+    part = strip_matrix(states, options.merge('frame' => strip_box, 'canvas' => canvas)).to_part
+    placed = place(part, 'id' => id + ':strip', 'frame' => Components.emitted(strip_box, canvas)['frame'],
+                         'path' => path, 'zIndex' => z)
+    layers = [placed]
+    row_box = lambda do |top, left, width|
+      Box.from_pt({ 'x' => left, 'y' => top, 'width' => width, 'height' => row_pt }, canvas)
+    end
+    label = lambda do |role, box, content, horizontal, label_color|
+      Components.label(id + ':' + role, box, content, horizontal, 'center', ratio, label_color, 0.72, z + 1)
+    end
+    top = rect['y'] + rect['height'] - reserved
+    if has_labels
+      top += gap_pt
+      half = rect['width'] / 2.0
+      if DataValues.set?(options, 'startLabel')
+        layers << label.call('start', row_box.call(top, rect['x'], half), options['startLabel'], 'left', color)
+      end
+      if DataValues.set?(options, 'endLabel')
+        layers << label.call('end', row_box.call(top, rect['x'] + half, half), options['endLabel'], 'right', color)
+      end
+      top += row_pt
+    end
+    unless listed.empty?
+      top += gap_pt
+      slot = rect['width'].fdiv(listed.length)
+      dot_width = Components.text_width('●', pt)
+      name_offset = dot_width + pt * 0.25
+      listed.each_with_index do |state, i|
+        left = rect['x'] + i * slot
+        style = state_style(state, theme, colors)
+        swatch = style.is_a?(String) ? style : theme['default']['color']
+        layers << label.call("legend-dot-#{i}", row_box.call(top, left, dot_width), '●', 'left', swatch)
+        box = row_box.call(top, left + name_offset, [0, slot - name_offset].max)
+        layers << label.call("legend-name-#{i}", box, names.fetch(state, state), 'left', color)
+      end
+    end
+    Components.combine(layers)
+  end
+end