keystone_ui 0.48.0 → 0.50.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 92d45d0ca72ce5a2128a391d80bd404bcfae53fc8cbef3a2a79ffaad716bcf1e
-  data.tar.gz: 48fc5e92e536ddd94a2ee7b60793f29a72969f3a9329ab86e8f6d66222c6dc2a
+  metadata.gz: '05930c5225692bb2da76e1b225ac33f9f55998c0a0191db3efa700debbdb63ae'
+  data.tar.gz: 3e15b80fbd141058715b2b20ea8635f36c0865adda59963dc4f3b58b8f8a0cba
 SHA512:
-  metadata.gz: dff8292ec2415468e2c63f54a12b12bd5a8dcca50313794b3ab5a78720cc1cec36e344044fa00cf3689932a86bc256c7edd94c5af6f01002d54f6d9b491efc0b
-  data.tar.gz: e226f99862c150bb1f8d2e81c03c66fb63ffb5a70e5e53759532eedde96767367a4f12873e46f34eccddf9603e8ecce3ccf52510d1aa59791bf7823342cc2d33
+  metadata.gz: b13b8ae4504be8f2a70c26daf383f5b36187deb5629c371e5f4baedaddc0b473e3ae257424e4a4d4707fd878711916d490b51852b1f56d660ea1c87215198f18
+  data.tar.gz: a6ab8860835e55b121dec967e44f776fbb2b722991bfdfcef9a77ed72431abd05e2bb8a147ddabd48f5ef3485088472e81313930fa88b2a8db2e07924710e198

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

@@ -1,13 +1,34 @@
-<svg class="ks-bar-chart" viewBox="0 0 <%= Keystone::Ui::BarChartComponent::WIDTH %> <%= Keystone::Ui::BarChartComponent::HEIGHT %>" role="img">
-  <% ticks.each do |tick| %>
-    <line class="ks-bar-chart-grid" x1="<%= Keystone::Ui::BarChartComponent::LEFT %>" x2="<%= Keystone::Ui::BarChartComponent::WIDTH - Keystone::Ui::BarChartComponent::RIGHT %>" y1="<%= tick[:y].round(2) %>" y2="<%= tick[:y].round(2) %>"></line>
-    <text class="ks-bar-chart-text" data-axis-tick x="<%= axis_x %>" y="<%= (tick[:y] + 4).round(2) %>" text-anchor="end"><%= tick[:label] %></text>
-  <% end %>
-  <% drawn_bars.each do |bar| %>
-    <rect class="<%= bar[:classes] %>" x="<%= bar[:x].round(2) %>" y="<%= bar[:y].round(2) %>" width="<%= bar[:width].round(2) %>" height="<%= bar[:height].round(2) %>"></rect>
-    <% if show_values? %>
-      <text class="ks-bar-chart-value" x="<%= bar[:center].round(2) %>" y="<%= (bar[:y] - 4).round(2) %>" text-anchor="middle"><%= bar[:value] %></text>
-    <% end %>
-    <text class="ks-bar-chart-text" data-bar-label x="<%= bar[:center].round(2) %>" y="<%= label_baseline %>" text-anchor="middle"><%= bar[:label] %></text>
-  <% end %>
-</svg>
+<div class="<%= Keystone::Ui::BarChartComponent::FRAME_CLASSES %>" role="img">
+  <div class="<%= Keystone::Ui::BarChartComponent::PLOT_ROW_CLASSES %>">
+    <svg class="<%= Keystone::Ui::BarChartComponent::AXIS_CLASSES %>">
+      <% ticks.each do |tick| %>
+        <text class="ks-bar-chart-text" data-axis-tick x="100%" dx="-6" y="<%= tick[:y].round(2) %>%" dominant-baseline="middle" text-anchor="end"><%= tick[:label] %></text>
+      <% end %>
+    </svg>
+    <div class="<%= Keystone::Ui::BarChartComponent::PLOT_CLASSES %>">
+      <svg class="<%= Keystone::Ui::BarChartComponent::LAYER_CLASSES %>" viewBox="0 0 100 100" preserveAspectRatio="none">
+        <% ticks.each do |tick| %>
+          <line class="ks-bar-chart-grid" x1="0" x2="100" y1="<%= tick[:y].round(2) %>" y2="<%= tick[:y].round(2) %>" vector-effect="non-scaling-stroke"></line>
+        <% end %>
+        <% drawn_bars.each do |bar| %>
+          <rect class="<%= bar[:classes] %>" x="<%= bar[:x].round(2) %>" y="<%= bar[:y].round(2) %>" width="<%= bar[:width].round(2) %>" height="<%= bar[:height].round(2) %>"></rect>
+        <% end %>
+      </svg>
+      <% if show_values? %>
+        <svg class="<%= Keystone::Ui::BarChartComponent::LAYER_CLASSES %>">
+          <% drawn_bars.each do |bar| %>
+            <text class="ks-bar-chart-value" x="<%= bar[:center].round(2) %>%" y="<%= bar[:y].round(2) %>%" dy="-4" text-anchor="middle"><%= bar[:value] %></text>
+          <% end %>
+        </svg>
+      <% end %>
+    </div>
+  </div>
+  <div class="<%= Keystone::Ui::BarChartComponent::LABEL_ROW_CLASSES %>">
+    <span class="<%= Keystone::Ui::BarChartComponent::LABEL_SPACER_CLASSES %>"></span>
+    <svg class="<%= Keystone::Ui::BarChartComponent::LABELS_CLASSES %>">
+      <% drawn_bars.each do |bar| %>
+        <text class="ks-bar-chart-text" data-bar-label x="<%= bar[:center].round(2) %>%" y="100%" dy="-6" text-anchor="middle"><%= bar[:label] %></text>
+      <% end %>
+    </svg>
+  </div>
+</div>

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

@@ -3,12 +3,16 @@
 module Keystone
   module Ui
     class BarChartComponent < ViewComponent::Base
-      WIDTH = 600
-      HEIGHT = 240
-      LEFT = 40
-      RIGHT = 8
-      TOP = 18
-      BOTTOM = 24
+      FRAME_CLASSES = "ks-bar-chart flex aspect-[5/2] max-h-80 w-full flex-col"
+      PLOT_ROW_CLASSES = "flex min-h-0 flex-1"
+      AXIS_CLASSES = "h-full w-10 shrink-0 overflow-visible"
+      PLOT_CLASSES = "relative min-w-0 flex-1"
+      LAYER_CLASSES = "absolute inset-0 h-full w-full overflow-visible"
+      LABEL_ROW_CLASSES = "flex h-6 shrink-0"
+      LABEL_SPACER_CLASSES = "w-10 shrink-0"
+      LABELS_CLASSES = "h-full min-w-0 flex-1 overflow-visible"
+      FULL = 100.0
+      HEADROOM = 8.0
       BAR_SHARE = 0.7
       TICK_COUNT = 4
       ROUND_STEPS = [ 1, 2, 2.5, 5, 10 ].freeze
@@ -26,28 +30,20 @@ module Keystone
 
       def drawn_bars
         bars.each_with_index.map do |bar, index|
-          height = bar[:value].to_f / axis_max * plot_height
-          { x: LEFT + (index * band) + (band * (1 - BAR_SHARE) / 2), y: TOP + plot_height - height, width: band * BAR_SHARE, height: height,
-            center: LEFT + (index * band) + (band / 2), label: bar[:label], value: bar[:value],
+          height = bar[:value].to_f / axis_max * (FULL - HEADROOM)
+          { x: (index * band) + (band * (1 - BAR_SHARE) / 2), y: FULL - height, width: band * BAR_SHARE, height: height,
+            center: (index * band) + (band / 2), label: bar[:label], value: bar[:value],
             classes: [ "ks-bar-chart-bar", ("ks-bar-chart-bar-shaded" if bar[:shaded]) ].compact.join(" ") }
         end
       end
 
       def ticks
-        (0..TICK_COUNT).map do |position|
+        (0..(axis_max / step).round).map do |position|
           value = (step * position).round(6)
-          { y: TOP + plot_height - (value / axis_max * plot_height), label: (value % 1).zero? ? value.to_i.to_s : value.to_s }
+          { y: FULL - (value / axis_max * (FULL - HEADROOM)), label: (value % 1).zero? ? value.to_i.to_s : value.to_s }
         end
       end
 
-      def axis_x
-        LEFT - 6
-      end
-
-      def label_baseline
-        HEIGHT - 6
-      end
-
       private
 
       def axis_max
@@ -67,15 +63,7 @@ module Keystone
       end
 
       def band
-        plot_width / [ bars.size, 1 ].max
-      end
-
-      def plot_width
-        WIDTH - LEFT - RIGHT
-      end
-
-      def plot_height
-        HEIGHT - TOP - BOTTOM
+        FULL / [ bars.size, 1 ].max
       end
     end
   end

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

@@ -12,7 +12,8 @@
     <% end %>
   </div>
   <p class="<%= value_classes %>">
-    <% if link? %><a href="<%= href %>" class="<%= value_link_classes %>"><%= value %></a><% else %><%= value %><% end %><% if suffix? %><span class="<%= suffix_classes %>"> <%= suffix %></span><% end %>
+    <% if missing? %><span class="<%= Keystone::Ui::StatCardComponent::FALLBACK_CLASSES %>"><%= fallback %></span><% elsif link? %><a href="<%= href %>" class="<%= value_link_classes %>"><%= value %></a><% else %><%= value %><% end %><% if suffix? %><span class="<%= suffix_classes %>"> <%= suffix %></span><% end %>
   </p>
+  <% if note %><p class="<%= Keystone::Ui::StatCardComponent::NOTE_CLASSES %>"><%= note %></p><% end %>
   <p class="<%= change_row_classes %>"><%= change_label %></p>
 </div>

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

@@ -6,6 +6,7 @@ module Keystone
       EMPHASIS_CLASSES = "ks-stat-card-emphasis"
       HEADER_CLASSES = "ks-stat-card-header flex items-start justify-between"
       CARD_CLASSES = "ks-metric-card relative"
+      PLAIN_CLASSES = "ks-metric-plain relative"
       LABEL_CLASSES = "ks-stat-card-label text-sm"
       VALUE_BASE_CLASSES = "ks-stat-card-value text-3xl"
       SUFFIX_CLASSES = "ks-stat-card-suffix text-lg"
@@ -13,6 +14,8 @@ module Keystone
       CHANGE_ROW_CLASSES = "ks-stat-card-change h-5 text-sm"
       VALUE_LINK_CLASSES = "hover:underline focus:outline-none focus-visible:underline"
       INFO_BUTTON_CLASSES = "ks-stat-card-info peer shrink-0 transition"
+      NOTE_CLASSES = "ks-stat-card-note text-sm"
+      FALLBACK_CLASSES = "ks-stat-card-fallback"
 
       INFO_ICON = <<~SVG.freeze
         <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
@@ -26,10 +29,13 @@ module Keystone
         info: "ks-tone-info"
       }.freeze
 
-      attr_reader :label, :value, :suffix, :definition, :calculation, :change, :href
+      attr_reader :label, :value, :suffix, :definition, :calculation, :change, :href, :note
 
-      def initialize(label:, value:, variant: :neutral, suffix: nil, definition: nil, calculation: nil, change: nil, href: nil)
+      def initialize(label:, value:, variant: :neutral, suffix: nil, definition: nil, calculation: nil, change: nil, href: nil, note: nil, plain: false, fallback: nil)
         @label = label
+        @fallback = fallback
+        @note = note
+        @plain = plain
         @value = value
         @variant = variant
         @suffix = suffix
@@ -39,8 +45,16 @@ module Keystone
         @href = href
       end
 
+      def missing?
+        @value.to_s.empty? && !@fallback.nil?
+      end
+
+      def fallback
+        @fallback
+      end
+
       def classes
-        CARD_CLASSES
+        @plain ? PLAIN_CLASSES : CARD_CLASSES
       end
 
       def label_classes

data/lib/keystone_ui/version.rb

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

data/the_local/agents/keystone_ui-develop.md

@@ -420,7 +420,7 @@ two exceptions: `ui_page`'s `padding:` treats any value other than `:none` as
 
 10. Explain figures.
 
-    - `ui_stat_card(label:, value:, variant: :neutral, suffix: nil, definition: nil, calculation: nil, change: nil, href: nil)`
+    - `ui_stat_card(label:, value:, variant: :neutral, suffix: nil, definition: nil, calculation: nil, change: nil, href: nil, note: nil, plain: false, fallback: nil)`
       — `variant:` is `:neutral` `:success` `:danger` `:warning` `:info` and
       colours the value. `change:` is a signed number shown as `▲ 4.2%` in
       green, `▼` in red, or plain at zero. `href:` links the value only, so

metadata

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