keystone_ui 0.49.0 → 0.50.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: c5188a7128c83107e3bb691fbbeb68733c14ff424e97bbbceea5cb4f901409a9
4
- data.tar.gz: 897711fad313df1fad9c2d2f2d29fc881c7b26a66c59028842c18816b9fdd364
3
+ metadata.gz: 1dd732a6c6f357ad5faee4d6eaca18a520d52a4005806f0bd6b653d6eb802aa3
4
+ data.tar.gz: c2f11d4b9ef0e3b47b1e558dc84ec1b605822fd5ba11cb1a0ba2e070d3bc2266
5
5
  SHA512:
6
- metadata.gz: 0ddc36bc018b6ebbd5be50aa7413eaddbc5380598ed7e0af989f3d241bf3522785c8def0d00aaf75b4dc733b45fbe37f18a13860570fcff137604d7f60b521cd
7
- data.tar.gz: f95983f302a7fc742e5962b4477b3c21429b93cd9a1a2561390fdc33482483a6f1f68eb661770f9a9cd0cb63b592febd444f18bbce19eb886c4a526a5b9297a9
6
+ metadata.gz: 7bdf1f5074e92f8036456e4fd88d3615617225d4a75feb2e522b3396aa10daabffbb890f0b03272bb89ad1c39cb85068d6b731257961fe59d390e83d54a24f29
7
+ data.tar.gz: fbdfd5f8b5e0ee67bfa0f954f8eb9d62b3eae0c0ef9152def74d7091a2709c72228d6c860adb1e5b9ead1a9c0c2ce0a04f9237d9ee57365b9efaf15b120e1520
@@ -1,13 +1,34 @@
1
- <svg class="ks-bar-chart" viewBox="0 0 <%= Keystone::Ui::BarChartComponent::WIDTH %> <%= Keystone::Ui::BarChartComponent::HEIGHT %>" role="img">
2
- <% ticks.each do |tick| %>
3
- <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>
4
- <text class="ks-bar-chart-text" data-axis-tick x="<%= axis_x %>" y="<%= (tick[:y] + 4).round(2) %>" text-anchor="end"><%= tick[:label] %></text>
5
- <% end %>
6
- <% drawn_bars.each do |bar| %>
7
- <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>
8
- <% if show_values? %>
9
- <text class="ks-bar-chart-value" x="<%= bar[:center].round(2) %>" y="<%= (bar[:y] - 4).round(2) %>" text-anchor="middle"><%= bar[:value] %></text>
10
- <% end %>
11
- <text class="ks-bar-chart-text" data-bar-label x="<%= bar[:center].round(2) %>" y="<%= label_baseline %>" text-anchor="middle"><%= bar[:label] %></text>
12
- <% end %>
13
- </svg>
1
+ <div class="<%= Keystone::Ui::BarChartComponent::FRAME_CLASSES %>" role="img">
2
+ <div class="<%= Keystone::Ui::BarChartComponent::PLOT_ROW_CLASSES %>">
3
+ <svg class="<%= Keystone::Ui::BarChartComponent::AXIS_CLASSES %>">
4
+ <% ticks.each do |tick| %>
5
+ <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>
6
+ <% end %>
7
+ </svg>
8
+ <div class="<%= Keystone::Ui::BarChartComponent::PLOT_CLASSES %>">
9
+ <svg class="<%= Keystone::Ui::BarChartComponent::LAYER_CLASSES %>" viewBox="0 0 100 100" preserveAspectRatio="none">
10
+ <% ticks.each do |tick| %>
11
+ <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>
12
+ <% end %>
13
+ <% drawn_bars.each do |bar| %>
14
+ <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>
15
+ <% end %>
16
+ </svg>
17
+ <% if show_values? %>
18
+ <svg class="<%= Keystone::Ui::BarChartComponent::LAYER_CLASSES %>">
19
+ <% drawn_bars.each do |bar| %>
20
+ <text class="ks-bar-chart-value" x="<%= bar[:center].round(2) %>%" y="<%= bar[:y].round(2) %>%" dy="-4" text-anchor="middle"><%= bar[:value] %></text>
21
+ <% end %>
22
+ </svg>
23
+ <% end %>
24
+ </div>
25
+ </div>
26
+ <div class="<%= Keystone::Ui::BarChartComponent::LABEL_ROW_CLASSES %>">
27
+ <span class="<%= Keystone::Ui::BarChartComponent::LABEL_SPACER_CLASSES %>"></span>
28
+ <svg class="<%= Keystone::Ui::BarChartComponent::LABELS_CLASSES %>">
29
+ <% drawn_bars.each do |bar| %>
30
+ <text class="ks-bar-chart-text" data-bar-label x="<%= bar[:center].round(2) %>%" y="100%" dy="-6" text-anchor="middle"><%= bar[:label] %></text>
31
+ <% end %>
32
+ </svg>
33
+ </div>
34
+ </div>
@@ -3,12 +3,16 @@
3
3
  module Keystone
4
4
  module Ui
5
5
  class BarChartComponent < ViewComponent::Base
6
- WIDTH = 600
7
- HEIGHT = 240
8
- LEFT = 40
9
- RIGHT = 8
10
- TOP = 18
11
- BOTTOM = 24
6
+ FRAME_CLASSES = "ks-bar-chart flex aspect-[5/2] max-h-80 w-full flex-col"
7
+ PLOT_ROW_CLASSES = "flex min-h-0 flex-1"
8
+ AXIS_CLASSES = "h-full w-10 shrink-0 overflow-visible"
9
+ PLOT_CLASSES = "relative min-w-0 flex-1"
10
+ LAYER_CLASSES = "absolute inset-0 h-full w-full overflow-visible"
11
+ LABEL_ROW_CLASSES = "flex h-6 shrink-0"
12
+ LABEL_SPACER_CLASSES = "w-10 shrink-0"
13
+ LABELS_CLASSES = "h-full min-w-0 flex-1 overflow-visible"
14
+ FULL = 100.0
15
+ HEADROOM = 8.0
12
16
  BAR_SHARE = 0.7
13
17
  TICK_COUNT = 4
14
18
  ROUND_STEPS = [ 1, 2, 2.5, 5, 10 ].freeze
@@ -26,28 +30,20 @@ module Keystone
26
30
 
27
31
  def drawn_bars
28
32
  bars.each_with_index.map do |bar, index|
29
- height = bar[:value].to_f / axis_max * plot_height
30
- { x: LEFT + (index * band) + (band * (1 - BAR_SHARE) / 2), y: TOP + plot_height - height, width: band * BAR_SHARE, height: height,
31
- center: LEFT + (index * band) + (band / 2), label: bar[:label], value: bar[:value],
33
+ height = bar[:value].to_f / axis_max * (FULL - HEADROOM)
34
+ { x: (index * band) + (band * (1 - BAR_SHARE) / 2), y: FULL - height, width: band * BAR_SHARE, height: height,
35
+ center: (index * band) + (band / 2), label: bar[:label], value: bar[:value],
32
36
  classes: [ "ks-bar-chart-bar", ("ks-bar-chart-bar-shaded" if bar[:shaded]) ].compact.join(" ") }
33
37
  end
34
38
  end
35
39
 
36
40
  def ticks
37
- (0..TICK_COUNT).map do |position|
41
+ (0..(axis_max / step).round).map do |position|
38
42
  value = (step * position).round(6)
39
- { y: TOP + plot_height - (value / axis_max * plot_height), label: (value % 1).zero? ? value.to_i.to_s : value.to_s }
43
+ { y: FULL - (value / axis_max * (FULL - HEADROOM)), label: (value % 1).zero? ? value.to_i.to_s : value.to_s }
40
44
  end
41
45
  end
42
46
 
43
- def axis_x
44
- LEFT - 6
45
- end
46
-
47
- def label_baseline
48
- HEIGHT - 6
49
- end
50
-
51
47
  private
52
48
 
53
49
  def axis_max
@@ -67,15 +63,7 @@ module Keystone
67
63
  end
68
64
 
69
65
  def band
70
- plot_width / [ bars.size, 1 ].max
71
- end
72
-
73
- def plot_width
74
- WIDTH - LEFT - RIGHT
75
- end
76
-
77
- def plot_height
78
- HEIGHT - TOP - BOTTOM
66
+ FULL / [ bars.size, 1 ].max
79
67
  end
80
68
  end
81
69
  end
@@ -7,7 +7,7 @@ require "keystone_ui/navigation_check"
7
7
 
8
8
  module KeystoneUi
9
9
  class Engine < ::Rails::Engine
10
- config.autoload_paths << root.join("app/components")
10
+ config.autoload_paths << root.join("app/components").to_s
11
11
 
12
12
  # Pin JavaScript controllers for importmap-based host apps.
13
13
  initializer "keystone_ui.importmap", before: "importmap" do |app|
@@ -1,5 +1,5 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module KeystoneUi
4
- VERSION = "0.49.0"
4
+ VERSION = "0.50.1"
5
5
  end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: keystone_ui
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.49.0
4
+ version: 0.50.1
5
5
  platform: ruby
6
6
  authors:
7
7
  - Tyler Schneider