keystone_ui 0.45.0 → 0.47.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 978bd820f9629e5a312c465218ba68c9f055edbf7d4e740b450ffc935541ef00
-  data.tar.gz: 1d210e3d67198f807e6ebd626de17c8f39ff98182409b6b1746061f1b63830f9
+  metadata.gz: 20f1ebc15a9b1a15a854e634286e510b9b224167f3f56181ab756744afaa3f44
+  data.tar.gz: a53452a7e08710ca4659937d39bb6d7384f84daa768f6d8afda29c330677a4a3
 SHA512:
-  metadata.gz: 57965061e3a70ccd8ee5be0dd9c9ba7af36afac30278bcb84fa1ec19a74c2b135367bb4fddc06371b5c914d5a6ad2c1b8332dca913ec823aa6030a28028a514a
-  data.tar.gz: 2d8c7a55901017fc335b759596bf13a400ece07714e13a986029fa142cf94f287db343a8468555074d0847433ca227e9893466625b5c94da4d2edc936d371afc
+  metadata.gz: 96a47743d927612dbc8cbed5b0ab0f12c8c34ae1df1555377613b1b33962b5a8ab15732e72983879724f03c18d79da3aec22d9973bc3b8a8396b9306b8f671dc
+  data.tar.gz: 7a0a0e1d2910d253f1f424e65082cd63c3bd40e4b3dbf83cdc67186bfbff72e9116c4c8d4b548bfddf5c59a5ee8b6ceb18051f0a8489e3592a12bb95f2460db5

data/app/assets/javascripts/keystone_ui/line_chart_controller.js

@@ -59,6 +59,8 @@ const LIGHT_THEMES = ["light", "custom"]
 
 export const isDarkMode = (theme, prefersDark) => theme === "dark" || (prefersDark && !LIGHT_THEMES.includes(theme))
 
+export const drawnDark = (element, prefersDark) => isDarkMode(element.closest("[data-theme]")?.dataset.theme, prefersDark)
+
 const CHART_COLOR_COUNT = 5
 
 const INHERITED_FONTS = ["", "inherit"]
@@ -86,7 +88,7 @@ export const styleDatasets = (datasets, theme, resolve) => {
 
 export const watchTheme = ({ document, matchMedia, MutationObserver }, onChange) => {
   const observer = new MutationObserver(onChange)
-  observer.observe(document.documentElement, { attributes: true, attributeFilter: ["data-theme", "data-look"] })
+  observer.observe(document.documentElement, { attributes: true, attributeFilter: ["data-theme", "data-look", "style"] })
   observer.observe(document.head, { childList: true, subtree: true, characterData: true })
   const darkPreference = matchMedia("(prefers-color-scheme: dark)")
   darkPreference.addEventListener("change", onChange)
@@ -136,7 +138,7 @@ export default class extends Controller {
       return match ? read(match[1]) || color : color
     }
 
-    const dark = isDarkMode(document.documentElement.dataset.theme, matchMedia("(prefers-color-scheme: dark)").matches)
+    const dark = drawnDark(this.element, matchMedia("(prefers-color-scheme: dark)").matches)
     return { theme: themeColors(read, dark, styles.fontFamily), resolve }
   }
 }

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

@@ -0,0 +1,13 @@
+<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>

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

@@ -0,0 +1,82 @@
+# frozen_string_literal: true
+
+module Keystone
+  module Ui
+    class BarChartComponent < ViewComponent::Base
+      WIDTH = 600
+      HEIGHT = 240
+      LEFT = 40
+      RIGHT = 8
+      TOP = 18
+      BOTTOM = 24
+      BAR_SHARE = 0.7
+      TICK_COUNT = 4
+      ROUND_STEPS = [ 1, 2, 2.5, 5, 10 ].freeze
+
+      attr_reader :bars
+
+      def initialize(bars:, show_values: false)
+        @bars = bars
+        @show_values = show_values
+      end
+
+      def show_values?
+        @show_values
+      end
+
+      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],
+            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|
+          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 }
+        end
+      end
+
+      def axis_x
+        LEFT - 6
+      end
+
+      def label_baseline
+        HEIGHT - 6
+      end
+
+      private
+
+      def axis_max
+        step * (largest / step).ceil
+      end
+
+      def step
+        @step ||= begin
+          raw = largest / TICK_COUNT
+          magnitude = 10.0**Math.log10(raw).floor
+          ROUND_STEPS.map { |round| round * magnitude }.find { |candidate| candidate >= raw }
+        end
+      end
+
+      def largest
+        bars.map { |bar| bar[:value].to_f }.select(&:positive?).max || 1.0
+      end
+
+      def band
+        plot_width / [ bars.size, 1 ].max
+      end
+
+      def plot_width
+        WIDTH - LEFT - RIGHT
+      end
+
+      def plot_height
+        HEIGHT - TOP - BOTTOM
+      end
+    end
+  end
+end

data/app/helpers/keystone_ui_helper.rb

@@ -21,6 +21,10 @@ module KeystoneUiHelper
     render Keystone::Ui::LineChartComponent.new(**args)
   end
 
+  def ui_bar_chart(**args)
+    render Keystone::Ui::BarChartComponent.new(**args)
+  end
+
   def ui_cta_banner(**args, &block)
     render Keystone::Ui::CtaBannerComponent.new(**args), &block
   end

data/lib/keystone_ui/safelist.rb

@@ -21,6 +21,7 @@ module Keystone
       Keystone::Ui::ModalComponent,
       Keystone::Ui::SelectComponent,
       Keystone::Ui::BadgeComponent,
+      Keystone::Ui::BarChartComponent,
       Keystone::Ui::CopyButtonComponent,
       Keystone::Ui::CardComponent,
       Keystone::Ui::ButtonComponent,

data/lib/keystone_ui/version.rb

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

data/the_local/agents/keystone_ui-develop.md

@@ -82,6 +82,7 @@ not available in the app yet, that is `keystone_ui-install`'s job.
 - `ui_swipe_deck` — a stack of cards accepted or rejected by button or swipe.
 - `ui_chart_card` — a titled card holding a chart.
 - `ui_line_chart` — a line chart with one line per series, over labels or dates.
+- `ui_bar_chart` — a bar chart drawn on the server, which needs no JavaScript and prints.
 - `ui_funnel` — a conversion funnel drawn as bars or one joined shape.
 - `ui_bucket` — an upright container filled toward a goal.
 - `ui_bucket_series` — a wrapping row of buckets.
@@ -455,6 +456,10 @@ two exceptions: `ui_page`'s `padding:` treats any value other than `:none` as
 
     - `ui_chart_card(title:, height: :md)` takes a block holding a chart, with
       `height:` `:sm` `:md` `:lg`.
+    - `ui_bar_chart(bars:, show_values: false)` — `bars:` is
+      `[{ label:, value:, shaded: }, ...]`, where `shaded: true` draws a bar
+      faded. It is drawn on the server as an SVG, so use it, not
+      `ui_line_chart`, for a chart that must print or show without JavaScript.
     - `ui_line_chart(series:, labels: nil, dates: nil, height: :md)` —
       `series:` is `[{ name:, data:, color:, dashed: }, ...]`, where `color:`
       is a CSS colour and `dashed: true` is optional. Pass exactly one of

data/the_local/interface.yml

@@ -11,6 +11,7 @@ develop:
   - ui_stat_card
   - ui_chart_card
   - ui_line_chart
+  - ui_bar_chart
   - ui_cta_banner
   - ui_feature_grid
   - ui_hero

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: keystone_ui
 version: !ruby/object:Gem::Version
-  version: 0.45.0
+  version: 0.47.0
 platform: ruby
 authors:
 - Tyler Schneider
@@ -15,14 +15,14 @@ dependencies:
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 0.20.0
+        version: 0.22.0
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 0.20.0
+        version: 0.22.0
 - !ruby/object:Gem::Dependency
   name: view_component
   requirement: !ruby/object:Gem::Requirement
@@ -82,6 +82,8 @@ files:
 - app/components/keystone/ui/alert_component.rb
 - app/components/keystone/ui/badge_component.html.erb
 - app/components/keystone/ui/badge_component.rb
+- app/components/keystone/ui/bar_chart_component.html.erb
+- app/components/keystone/ui/bar_chart_component.rb
 - app/components/keystone/ui/bottom_nav_component.html.erb
 - app/components/keystone/ui/bottom_nav_component.rb
 - app/components/keystone/ui/bottom_nav_item_component.html.erb