thecore_ui_commons 3.1.11 → 3.2.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/lib/echarts/speedometer.rb +163 -0
- data/lib/thecore_ui_commons/version.rb +1 -1
- data/lib/thecore_ui_commons.rb +1 -0
- metadata +2 -1
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 5675378f9ff9fbfc745eae4fd8284a7c068440f1594ec13a0f6e4e7b486267c3
|
4
|
+
data.tar.gz: d468bfc1369d418e2053159325b86f0c0fbe960a80f810dcd3d424e93a75eb96
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 9385b2c24d2f9d8cadcadfb89983dcd49d50339590a379597712b5341503565dab84c2e80c456579f0a68e962a48a6cfac70478a37b0ec87795b1f9da00be8da
|
7
|
+
data.tar.gz: 3031a3698af5e067f2c2bc0e26484f2595e2a61b2efead74349a2070f8f3e5c9e5475d10f040c070a149e75cdfe489cac2a16e8cee372ee2592d8cb6a2519483
|
@@ -0,0 +1,163 @@
|
|
1
|
+
|
2
|
+
module Echarts
|
3
|
+
module Speedometer
|
4
|
+
# Computes the percentage of a value within a given range.
|
5
|
+
#
|
6
|
+
# @param value [Numeric] The value to compute the percentage for.
|
7
|
+
# @param lower_bound [Numeric] The lower bound of the range.
|
8
|
+
# @param upper_bound [Numeric] The upper bound of the range.
|
9
|
+
# @return [Float] The percentage of the value within the range.
|
10
|
+
def self.compute_percentage(value, lower_bound, upper_bound)
|
11
|
+
(value - lower_bound) / (upper_bound - lower_bound)
|
12
|
+
end
|
13
|
+
|
14
|
+
# Computes the angle for a given value.
|
15
|
+
#
|
16
|
+
# @param value [Float] The value to compute the angle for.
|
17
|
+
# @return [Float] The angle in degrees.
|
18
|
+
def self.compute_angle(value)
|
19
|
+
# Compute the angles from the percentages knowing that the startAngle = 225 and the endAngle = -45 clockwise
|
20
|
+
225 - (value * 270)
|
21
|
+
end
|
22
|
+
|
23
|
+
# Computes the angles for a given value and the minimum and maximum values in percentage.
|
24
|
+
#
|
25
|
+
# @param value_in_percentage [Float] The value in percentage.
|
26
|
+
# @param min_in_percentage [Float] The minimum value in percentage.
|
27
|
+
# @param max_in_percentage [Float] The maximum value in percentage.
|
28
|
+
# @return [Array<Float>] The minimum angle, maximum angle, and value angle in degrees.
|
29
|
+
def self.compute_angles(value_in_percentage, min_in_percentage, max_in_percentage)
|
30
|
+
min_angle = compute_angle(min_in_percentage)
|
31
|
+
max_angle = compute_angle(max_in_percentage)
|
32
|
+
value_angle = compute_angle(value_in_percentage)
|
33
|
+
|
34
|
+
return min_angle, max_angle, value_angle
|
35
|
+
end
|
36
|
+
|
37
|
+
# Computes the color for the gauge chart based on the minimum and maximum values.
|
38
|
+
#
|
39
|
+
# @param min [Numeric] The minimum value.
|
40
|
+
# @param max [Numeric] The maximum value.
|
41
|
+
# @param min_in_percentage [Float] The minimum value in percentage.
|
42
|
+
# @param max_in_percentage [Float] The maximum value in percentage.
|
43
|
+
# @param color_ok [String] The color for values within the range.
|
44
|
+
# @param color_error [String] The color for values outside the range.
|
45
|
+
# @param color_generic [String] The color for generic values.
|
46
|
+
# @return [Array<Array>] An array of color values and their corresponding percentages.
|
47
|
+
def self.compute_color(min, max, min_in_percentage, max_in_percentage, color_ok = "limegreen", color_error = "tomato", color_generic = "dodgerblue")
|
48
|
+
color = []
|
49
|
+
color << [min_in_percentage, color_error] if !min.zero? && (max > min || max.zero?)
|
50
|
+
color << [max_in_percentage, color_ok] if !max.zero? && (max > min || min.zero?)
|
51
|
+
color << [1, max > min ? color_error : ( max == min && max != 0 || max == 0 && min ==0 ? color_generic : color_ok )]
|
52
|
+
|
53
|
+
color
|
54
|
+
end
|
55
|
+
|
56
|
+
# Computes the options for the gauge chart.
|
57
|
+
#
|
58
|
+
# @param value [Numeric] The value to display on the gauge chart.
|
59
|
+
# @param min [Numeric] The minimum value.
|
60
|
+
# @param max [Numeric] The maximum value.
|
61
|
+
# @param lower_bound [Numeric] The lower bound of the range.
|
62
|
+
# @param upper_bound [Numeric] The upper bound of the range.
|
63
|
+
# @param measure_unit [String] The unit of measurement for the value.
|
64
|
+
# @param name [String] The name of the gauge chart.
|
65
|
+
# @param color_ok [String] The color for values within the range.
|
66
|
+
# @param color_error [String] The color for values outside the range.
|
67
|
+
# @param color_generic [String] The color for generic values.
|
68
|
+
# @return [Hash] The options for the gauge chart.
|
69
|
+
def self.get_config(value, min, max, lower_bound, upper_bound, measure_unit, name, color_ok = "limegreen", color_error = "tomato", color_generic = "dodgerblue")
|
70
|
+
min_in_percentage = compute_percentage(min, lower_bound, upper_bound)
|
71
|
+
max_in_percentage = compute_percentage(max, lower_bound, upper_bound)
|
72
|
+
value_in_percentage = compute_percentage(value, lower_bound, upper_bound)
|
73
|
+
|
74
|
+
color = compute_color(min, max, min_in_percentage, max_in_percentage, color_ok, color_error, color_generic)
|
75
|
+
min_angle, max_angle, value_angle = compute_angles(value_in_percentage, min_in_percentage, max_in_percentage)
|
76
|
+
|
77
|
+
# The gauge chart
|
78
|
+
raw_js_options = {
|
79
|
+
series: [
|
80
|
+
{
|
81
|
+
type: "gauge",
|
82
|
+
min: lower_bound,
|
83
|
+
max: upper_bound,
|
84
|
+
splitNumber: ((upper_bound - lower_bound) / lower_bound).abs,
|
85
|
+
axisLine: {
|
86
|
+
lineStyle: {
|
87
|
+
width: 30,
|
88
|
+
color: color,
|
89
|
+
},
|
90
|
+
},
|
91
|
+
pointer: {
|
92
|
+
itemStyle: {
|
93
|
+
color: "auto",
|
94
|
+
},
|
95
|
+
},
|
96
|
+
axisTick: {
|
97
|
+
distance: -30,
|
98
|
+
length: 8,
|
99
|
+
lineStyle: {
|
100
|
+
color: "#fff",
|
101
|
+
width: 2,
|
102
|
+
},
|
103
|
+
},
|
104
|
+
splitLine: {
|
105
|
+
distance: -30,
|
106
|
+
length: 30,
|
107
|
+
lineStyle: {
|
108
|
+
color: "#fff",
|
109
|
+
width: 4,
|
110
|
+
},
|
111
|
+
},
|
112
|
+
axisLabel: {
|
113
|
+
color: "inherit",
|
114
|
+
distance: 40,
|
115
|
+
fontSize: 20,
|
116
|
+
},
|
117
|
+
detail: {
|
118
|
+
valueAnimation: true,
|
119
|
+
# formatter: "#{value.to_i}#{measure_unit}",
|
120
|
+
color: "inherit",
|
121
|
+
},
|
122
|
+
data: [
|
123
|
+
{
|
124
|
+
value: value,
|
125
|
+
name: name,
|
126
|
+
},
|
127
|
+
],
|
128
|
+
},
|
129
|
+
# Dummy Gauge to be used to show the min max thresholds
|
130
|
+
{
|
131
|
+
type: "gauge",
|
132
|
+
z: 3,
|
133
|
+
startAngle: min_angle, # Here you can dinamically change the value
|
134
|
+
min: min,
|
135
|
+
endAngle: max_angle, # Here you can dinamically change the value
|
136
|
+
max: max,
|
137
|
+
splitNumber: 1,
|
138
|
+
axisLabel: {
|
139
|
+
distance: -24,
|
140
|
+
},
|
141
|
+
axisTick: {
|
142
|
+
show: false,
|
143
|
+
},
|
144
|
+
axisLine: {
|
145
|
+
lineStyle: {
|
146
|
+
width: 0,
|
147
|
+
},
|
148
|
+
},
|
149
|
+
splitLine: {
|
150
|
+
distance: -12,
|
151
|
+
# length: 50,
|
152
|
+
lineStyle: {
|
153
|
+
width: 0,
|
154
|
+
},
|
155
|
+
},
|
156
|
+
},
|
157
|
+
],
|
158
|
+
}
|
159
|
+
|
160
|
+
return raw_js_options
|
161
|
+
end
|
162
|
+
end
|
163
|
+
end
|
data/lib/thecore_ui_commons.rb
CHANGED
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: thecore_ui_commons
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 3.
|
4
|
+
version: 3.2.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Gabriele Tassoni
|
@@ -142,6 +142,7 @@ files:
|
|
142
142
|
- config/locales/it.yml
|
143
143
|
- config/routes.rb
|
144
144
|
- db/seeds.rb
|
145
|
+
- lib/echarts/speedometer.rb
|
145
146
|
- lib/tasks/thecore_ui_commons_tasks.rake
|
146
147
|
- lib/thecore_ui_commons.rb
|
147
148
|
- lib/thecore_ui_commons/engine.rb
|