keystone_ui 0.30.0 → 0.31.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 53f39974ced2866fb949b3bfbe0e1be0359977df8a890f9bf83e20b8a04cff11
-  data.tar.gz: 7dc3d1ae90c88bd89ccff1c67a861f6e391558605edb5aaaa136f3c674e47cb6
+  metadata.gz: a6c7e18e911657e41ed1a4eff2133400015bd7a58e0c437f6886d219173f01fa
+  data.tar.gz: 91b2f652bb7313d9cda361e126e969d06b64827e80118888a73cce3840471f68
 SHA512:
-  metadata.gz: ce349e68888fb9085cf9475eb3a96cb6dec23e193df5912905e559f5371dcb7d936d7e6b80a09d820fa28a91da0993c67add11578729dd37e62f25b3d7bac787
-  data.tar.gz: 37cfadba853c471e4ba8a4e9cf94c941e9a554151a76ba9bba4573b80bf80b49850ac713a55da7f148b3aabd6fb253a36b1089c5c132f0afa86d1072aa6e6216
+  metadata.gz: 466ea8fbb32ed4683db9537a52d7ba41d667f79dfa52aec27aaab85f5fc14b872fcc03b7d880136936133685fdc1af5f839aa4392c5ba698af62694e4a5832b0
+  data.tar.gz: 435630df203142fa669f0d93333e6b2637b2d4ec2d25b6e8fa1a7aa00e54ba5fdace3a3416905c144f706f18373ad78b8b11c067f5d1a62ee6453655358b4b77

data/app/components/keystone/ui/funnel_component.html.erb

@@ -1,14 +1,35 @@
-<div class="<%= container_classes %>">
-  <% layers.each do |layer| %>
-    <% if layer.conversion_percent %>
-      <div class="<%= transition_classes %>">↓ <%= layer.conversion_percent %>%</div>
-    <% end %>
-    <div class="<%= layer_classes %>">
-      <div class="<%= row_classes %>">
-        <span class="<%= label_classes %>"><%= layer.label %></span>
+<% if joined? %>
+  <div class="<%= JOINED_CLASSES %>">
+    <% layers.each do |layer| %>
+      <% if layer.conversion_percent %>
+        <div></div>
+        <div class="<%= BAND_ROW_CLASSES %>">
+          <div class="<%= BAND_CLASSES %>" style="clip-path: <%= band_clip_path(layer) %>"></div>
+          <div class="<%= BAND_LABEL_ROW_CLASSES %>"><span class="<%= BAND_LABEL_CLASSES %>"><%= layer.conversion_percent %>%</span></div>
+        </div>
+      <% end %>
+      <div class="<%= WORDS_CLASSES %>">
         <span class="<%= value_classes %>"><%= layer.value %></span>
+        <span class="<%= label_classes %>"><%= layer.label %></span>
+      </div>
+      <div class="<%= BLOCK_CLASSES %>">
+        <div class="<%= BLOCK_FILL_CLASSES %> <%= layer.color_classes %>" style="width: <%= layer.width_percent %>%"></div>
       </div>
-      <div class="<%= bar_classes %> <%= layer.color_classes %>" style="width: <%= layer.width_percent %>%"></div>
-    </div>
-  <% end %>
-</div>
+    <% end %>
+  </div>
+<% else %>
+  <div class="<%= container_classes %>">
+    <% layers.each do |layer| %>
+      <% if layer.conversion_percent %>
+        <div class="<%= transition_classes %>">↓ <%= layer.conversion_percent %>%</div>
+      <% end %>
+      <div class="<%= layer_classes %>">
+        <div class="<%= row_classes %>">
+          <span class="<%= label_classes %>"><%= layer.label %></span>
+          <span class="<%= value_classes %>"><%= layer.value %></span>
+        </div>
+        <div class="<%= bar_classes %> <%= layer.color_classes %>" style="width: <%= layer.width_percent %>%"></div>
+      </div>
+    <% end %>
+  </div>
+<% end %>

data/app/components/keystone/ui/funnel_component.rb

@@ -3,7 +3,7 @@
 module Keystone
   module Ui
     class FunnelComponent < ViewComponent::Base
-      Layer = Struct.new(:label, :value, :width_percent, :conversion_percent, :color_classes, keyword_init: true)
+      Layer = Struct.new(:label, :value, :width_percent, :conversion_percent, :color_classes, :previous_width_percent, keyword_init: true)
 
       CONTAINER_CLASSES = "ks-funnel"
       LAYER_CLASSES = "ks-funnel-layer"
@@ -12,6 +12,14 @@ module Keystone
       VALUE_CLASSES = "ks-funnel-value text-sm tabular-nums"
       BAR_CLASSES = "ks-funnel-bar h-8 transition-all"
       TRANSITION_CLASSES = "ks-funnel-transition text-center text-xs"
+      BAND_LABEL_ROW_CLASSES = "absolute inset-0 flex items-center justify-center"
+      BAND_ROW_CLASSES = "relative h-7"
+      BLOCK_FILL_CLASSES = "h-full"
+      BLOCK_CLASSES = "flex justify-center h-12"
+      WORDS_CLASSES = "flex flex-col justify-center"
+      BAND_LABEL_CLASSES = "ks-funnel-band-label text-xs"
+      BAND_CLASSES = "ks-funnel-band absolute inset-0"
+      JOINED_CLASSES = "ks-funnel-joined grid grid-cols-[max-content_1fr]"
       STEP_COLOR_CLASSES = {
         accent: "ks-funnel-bar-accent",
         sky: "ks-funnel-bar-sky",
@@ -20,10 +28,24 @@ module Keystone
         rose: "ks-funnel-bar-rose"
       }.freeze
 
-      attr_reader :steps
+      attr_reader :steps, :shape
+
+      def initialize(steps:, shape: :bars)
+        raise ArgumentError, "a funnel's shape is :bars or :joined, got #{shape.inspect}" unless %i[bars joined].include?(shape)
 
-      def initialize(steps:)
         @steps = steps
+        @shape = shape
+      end
+
+      def joined?
+        shape == :joined
+      end
+
+      def band_clip_path(layer)
+        top = (100 - layer.previous_width_percent) / 2.0
+        bottom = (100 - layer.width_percent) / 2.0
+
+        "polygon(#{format("%g%%", top)} 0, #{format("%g%%", 100 - top)} 0, #{format("%g%%", 100 - bottom)} 100%, #{format("%g%%", bottom)} 100%)"
       end
 
       def layers
@@ -35,7 +57,8 @@ module Keystone
             value: step[:value],
             width_percent: width_percent(step[:value]),
             conversion_percent: conversion_percent(step[:value], previous),
-            color_classes: color_classes(step[:color], index)
+            color_classes: color_classes(step[:color], index),
+            previous_width_percent: previous && width_percent(previous)
           )
           previous = step[:value]
           layer

data/lib/keystone_ui/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module KeystoneUi
-  VERSION = "0.30.0"
+  VERSION = "0.31.0"
 end

data/the_local/agents/keystone_ui-develop.md

@@ -337,13 +337,20 @@ outer element. See Conventions before using it.
   the last, marks only whole days, and reads each day as a date such as
   "Oct 2, 2026", which is also the heading a hovered point shows. The time of
   day is dropped, so pass one value per day.
-- `ui_funnel(steps:)` — a conversion funnel. `steps:` is
-  `[{ label:, value:, color: }, ...]` in order, with `color:` optional. Bar
-  widths are relative to the first step; the caption between two layers is the
-  step-to-step conversion. Each bar takes the next colour in the order
-  `:accent` `:sky` `:violet` `:amber` `:rose`, starting again after `:rose`; a
-  step passing one of those symbols as `color:` uses it instead, and any other
-  symbol raises. Divide-by-zero safe, no JavaScript.
+- `ui_funnel(steps:, shape: :bars)` — a conversion funnel. `steps:` is
+  `[{ label:, value:, color: }, ...]` in order, with `color:` optional. Each
+  step's width is its value as a share of the first step's value, and the
+  percent shown between two steps is the second step's value divided by the
+  first's. Each step takes the next colour in the order `:accent` `:sky`
+  `:violet` `:amber` `:rose`, starting again after `:rose`; a step passing one
+  of those symbols as `color:` uses it instead, and any other symbol raises.
+  Values are printed as given. Divide-by-zero safe, no JavaScript. `shape:`
+  `:bars` draws one bar per step, left-aligned, with the label and value on a
+  row above it and a `↓ N%` caption between two bars. `shape: :joined` draws
+  one shape: each step's value over its label in a column on the left, each
+  step's block centred at its width, and between two blocks a neutral band
+  that narrows from the block above to the block below, with the percent on it.
+  Any other `shape:` raises `ArgumentError`.
 - `ui_bucket(goal:, actual:, label: nil, over: :success)` — an upright container
   for one target, filled from the bottom toward `goal:`. It shows the optional
   `label` on top, then `goal`, the container, `actual`, and the percent reached.
@@ -459,6 +466,12 @@ outer element. See Conventions before using it.
    its neighbours rather than a point at zero. Whether a missing day is left
    out or passed as a zero is the app's own rule, so ask the developer rather
    than pick. Never format dates into strings and pass them as `labels:`.
+   For a funnel, whether it is drawn as separate bars or as one joined shape
+   is the developer's choice, so ask before passing `shape:`. If a joined
+   funnel shows its blocks but no band between them, the app's
+   keystone_ui-styles version does not define the `ks-funnel-band` classes, so
+   stop and hand that part to `keystone_ui-install`, and add no classes to fix
+   it.
    Put the actions on a record, such as Edit and Delete, in an action menu
    rather than in a row of buttons: `menu:` on the `ui_section` that shows the
    record, `table.actions` for a table row, or `ui_action_menu` anywhere else.

data/the_local/agents/keystone_ui-info.md

@@ -129,6 +129,13 @@ holds the catalog.
 - **Figures are numbers.** Components that measure or compare values, such as
   progress bars, funnels and buckets, do arithmetic on them. Pass a number, not
   a formatted string such as `"9,000"`. A bucket raises on one.
+- **A funnel has two shapes.** Both size each step against the first step and
+  show the percent carried from one step to the next. The default draws one bar
+  per step, each with its label and value on a row above it. The joined shape
+  draws the steps as one figure: each step's value and label sit in a column on
+  the left, each step is a block centred at its width, and a neutral band
+  between two blocks narrows from one width to the next and holds the percent.
+  Any other shape raises `ArgumentError`. Neither shape needs JavaScript.
 - **A line chart is labelled or dated.** A line chart draws one line per
   series, and each series is a name and its values, with an optional colour
   and an optional dashed line. Its horizontal axis is given one of two ways,

data/the_local/interface.yml

@@ -112,6 +112,7 @@ sources:
   - app/components/keystone/ui/breadcrumbs_component.rb
   - app/components/keystone/ui/breadcrumbs_component.html.erb
   - app/components/keystone/ui/funnel_component.rb
+  - app/components/keystone/ui/funnel_component.html.erb
   - app/components/keystone/ui/bucket_component.rb
   - app/components/keystone/ui/bucket_series_component.rb
   - app/components/keystone/ui/grid_component.rb

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: keystone_ui
 version: !ruby/object:Gem::Version
-  version: 0.30.0
+  version: 0.31.0
 platform: ruby
 authors:
 - Tyler Schneider
@@ -15,14 +15,14 @@ dependencies:
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 0.9.0
+        version: 0.10.0
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 0.9.0
+        version: 0.10.0
 - !ruby/object:Gem::Dependency
   name: view_component
   requirement: !ruby/object:Gem::Requirement