keystone_ui 0.49.0 → 0.50.0
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:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: '05930c5225692bb2da76e1b225ac33f9f55998c0a0191db3efa700debbdb63ae'
|
|
4
|
+
data.tar.gz: 3e15b80fbd141058715b2b20ea8635f36c0865adda59963dc4f3b58b8f8a0cba
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: b13b8ae4504be8f2a70c26daf383f5b36187deb5629c371e5f4baedaddc0b473e3ae257424e4a4d4707fd878711916d490b51852b1f56d660ea1c87215198f18
|
|
7
|
+
data.tar.gz: a6ab8860835e55b121dec967e44f776fbb2b722991bfdfcef9a77ed72431abd05e2bb8a147ddabd48f5ef3485088472e81313930fa88b2a8db2e07924710e198
|
|
@@ -1,13 +1,34 @@
|
|
|
1
|
-
<
|
|
2
|
-
|
|
3
|
-
<
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
<
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
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
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
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 *
|
|
30
|
-
{ x:
|
|
31
|
-
center:
|
|
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..
|
|
41
|
+
(0..(axis_max / step).round).map do |position|
|
|
38
42
|
value = (step * position).round(6)
|
|
39
|
-
{ y:
|
|
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
|
-
|
|
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
|
data/lib/keystone_ui/version.rb
CHANGED