playbook_ui 4.13.1 → 4.14.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 +4 -4
- data/app/pb_kits/playbook/_playbook.scss +1 -0
- data/app/pb_kits/playbook/data/menu.yml +3 -0
- data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.html.erb +12 -0
- data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.scss +6 -0
- data/app/pb_kits/playbook/pb_circle_chart/circle_chart.rb +81 -0
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.html.erb +19 -0
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_inner_sizes.html.erb +136 -0
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_labels.html.erb +37 -0
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_legend_kit.html.erb +22 -0
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_title.html.erb +38 -0
- data/app/pb_kits/playbook/pb_circle_chart/docs/example.yml +9 -0
- data/app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.js +26 -1
- data/app/pb_kits/playbook/pb_popover/_popover.jsx +25 -18
- data/app/pb_kits/playbook/pb_popover/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_popover/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_radio/_radio.jsx +16 -16
- data/app/pb_kits/playbook/pb_select/_select.jsx +2 -0
- data/app/pb_kits/playbook/pb_text_input/_text_input.jsx +2 -0
- data/app/pb_kits/playbook/pb_textarea/_textarea.jsx +2 -0
- data/app/pb_kits/playbook/plugins/pb_chart.js +49 -1
- data/lib/playbook/version.rb +1 -1
- metadata +13 -4
- data/app/pb_kits/playbook/pb_popover/docs/_popover_portal.jsx +0 -34
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 0e529c840f659aace42862d67f6579c6fa9f1fc952960381374b8b005ff41b95
|
|
4
|
+
data.tar.gz: 53c5c3676212e699d5c232fc6d4bc59ea3ab10a97335d08e7dc0e4e139a8859f
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 92e483f7ec5633610f6180f3d1cf8740f9fae2d128c9db1a17ae8ac55a352a19f358ad32104236f8dcbe9ccd370f40a57c3a63b2b7587a200c95f8d00500dc76
|
|
7
|
+
data.tar.gz: 4707de050cf746dd9d82db1cc36cdc1bdf03a8a2653510e2785b324491ddbb1c462faea3053d4ba0d4e65c99f20bf609db0e76a16a3e851518ad58797af6c283
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
<%= content_tag(:div, "",
|
|
2
|
+
aria: object.aria,
|
|
3
|
+
id: object.id,
|
|
4
|
+
data: object.data,
|
|
5
|
+
class: object.classname) %>
|
|
6
|
+
<% content_for :pb_js do %>
|
|
7
|
+
<%= javascript_tag do %>
|
|
8
|
+
window.addEventListener('DOMContentLoaded', function() {
|
|
9
|
+
new pbChart('.selector', <%= object.chart_options %>)
|
|
10
|
+
})
|
|
11
|
+
<% end %>
|
|
12
|
+
<% end %>
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
# frozen_string_literal: true
|
|
2
|
+
|
|
3
|
+
module Playbook
|
|
4
|
+
module PbCircleChart
|
|
5
|
+
class CircleChart
|
|
6
|
+
include Playbook::Props
|
|
7
|
+
|
|
8
|
+
partial "pb_circle_chart/circle_chart"
|
|
9
|
+
|
|
10
|
+
prop :chart_data, type: Playbook::Props::Array,
|
|
11
|
+
default: []
|
|
12
|
+
prop :style, type: Playbook::Props::Enum,
|
|
13
|
+
values: %w[pie],
|
|
14
|
+
default: "pie"
|
|
15
|
+
|
|
16
|
+
prop :data_labels, type: Playbook::Props::Boolean, default: false
|
|
17
|
+
prop :min_point_size, type: Playbook::Props::Numeric
|
|
18
|
+
prop :max_point_size, type: Playbook::Props::Numeric
|
|
19
|
+
prop :inner_size, type: Playbook::Props::Enum,
|
|
20
|
+
values: %w[sm md lg none],
|
|
21
|
+
default: "md"
|
|
22
|
+
prop :z_min, type: Playbook::Props::Numeric
|
|
23
|
+
prop :start_angle, type: Playbook::Props::Numeric
|
|
24
|
+
prop :header_format
|
|
25
|
+
prop :data_label_html, default: '<div>{point.name}</div>'
|
|
26
|
+
prop :tooltip_html, default: '<span style="font-weight: bold; color:{point.color};">●</span>
|
|
27
|
+
{point.name}: ' + '<b>{point.y}
|
|
28
|
+
</b>'
|
|
29
|
+
prop :use_html, type: Playbook::Props::Boolean, default: false
|
|
30
|
+
prop :legend, type: Playbook::Props::Boolean, default: false
|
|
31
|
+
prop :title, default: ''
|
|
32
|
+
|
|
33
|
+
def chart_type
|
|
34
|
+
style == "variablepie" ? "variablepie" : "pie"
|
|
35
|
+
end
|
|
36
|
+
|
|
37
|
+
def chart_data_formatted
|
|
38
|
+
chart_data.map{ |hash| hash[:y] = hash.delete :value}
|
|
39
|
+
return chart_data
|
|
40
|
+
end
|
|
41
|
+
|
|
42
|
+
def inner_size_format
|
|
43
|
+
case inner_size
|
|
44
|
+
when "lg"
|
|
45
|
+
"85%"
|
|
46
|
+
when "sm"
|
|
47
|
+
"35%"
|
|
48
|
+
when "none"
|
|
49
|
+
"0%"
|
|
50
|
+
when "md"
|
|
51
|
+
"50%"
|
|
52
|
+
end
|
|
53
|
+
|
|
54
|
+
end
|
|
55
|
+
|
|
56
|
+
def chart_options
|
|
57
|
+
{
|
|
58
|
+
id: id,
|
|
59
|
+
chartData: chart_data_formatted,
|
|
60
|
+
title: title,
|
|
61
|
+
type: chart_type,
|
|
62
|
+
showInLegend: legend,
|
|
63
|
+
dataLabelHtml: data_label_html,
|
|
64
|
+
dataLabels: data_labels,
|
|
65
|
+
headerFormat: header_format,
|
|
66
|
+
tooltipHtml: tooltip_html,
|
|
67
|
+
useHTML: use_html,
|
|
68
|
+
minPointSize: min_point_size,
|
|
69
|
+
maxPointSize: max_point_size,
|
|
70
|
+
innerSize: inner_size_format,
|
|
71
|
+
zMin: z_min,
|
|
72
|
+
startAngle: start_angle,
|
|
73
|
+
}.to_json.html_safe
|
|
74
|
+
end
|
|
75
|
+
|
|
76
|
+
def classname
|
|
77
|
+
generate_classname("pb_circle_chart")
|
|
78
|
+
end
|
|
79
|
+
end
|
|
80
|
+
end
|
|
81
|
+
end
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
<% data = [{
|
|
2
|
+
name: 'Waiting for Calls',
|
|
3
|
+
value: 41,
|
|
4
|
+
},
|
|
5
|
+
{
|
|
6
|
+
name: 'On Call',
|
|
7
|
+
value: 49,
|
|
8
|
+
},
|
|
9
|
+
{
|
|
10
|
+
name: 'After call',
|
|
11
|
+
value: 10,
|
|
12
|
+
}
|
|
13
|
+
] %>
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
<%= pb_rails("circle_chart", props: {
|
|
17
|
+
chart_data: data,
|
|
18
|
+
id: "default-test"
|
|
19
|
+
}) %>
|
|
@@ -0,0 +1,136 @@
|
|
|
1
|
+
<% data_1 = [{
|
|
2
|
+
name: 'Bugs',
|
|
3
|
+
value: 8,
|
|
4
|
+
|
|
5
|
+
},
|
|
6
|
+
{
|
|
7
|
+
name: 'Chores',
|
|
8
|
+
value: 1,
|
|
9
|
+
|
|
10
|
+
},
|
|
11
|
+
{
|
|
12
|
+
name: 'Stories',
|
|
13
|
+
value: 12,
|
|
14
|
+
|
|
15
|
+
}
|
|
16
|
+
] %>
|
|
17
|
+
|
|
18
|
+
<% data_2 = [{
|
|
19
|
+
name: 'Queued',
|
|
20
|
+
value: 7,
|
|
21
|
+
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
name: 'In Progress',
|
|
25
|
+
value: 6,
|
|
26
|
+
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
name: 'Validation',
|
|
30
|
+
value: 3,
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
name: 'Done',
|
|
34
|
+
value: 6,
|
|
35
|
+
},
|
|
36
|
+
|
|
37
|
+
] %>
|
|
38
|
+
|
|
39
|
+
<% data_3 = [{
|
|
40
|
+
name: '1 Point Tickets',
|
|
41
|
+
value: 2,
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
name: '3 Point Tickets',
|
|
45
|
+
value: 5,
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
name: '5 Point Tickets',
|
|
49
|
+
value: 6,
|
|
50
|
+
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
name: '8 Point Tickets',
|
|
54
|
+
value: 3,
|
|
55
|
+
},
|
|
56
|
+
{
|
|
57
|
+
name: '13 Point Tickets',
|
|
58
|
+
value: 1,
|
|
59
|
+
},
|
|
60
|
+
|
|
61
|
+
] %>
|
|
62
|
+
<% data_4 = [{
|
|
63
|
+
name: 'Facebook',
|
|
64
|
+
value: 2498,
|
|
65
|
+
},
|
|
66
|
+
{
|
|
67
|
+
name: 'YouTube',
|
|
68
|
+
value: 2000,
|
|
69
|
+
},
|
|
70
|
+
{
|
|
71
|
+
name: 'WhatsApp',
|
|
72
|
+
value: 2000,
|
|
73
|
+
|
|
74
|
+
},
|
|
75
|
+
{
|
|
76
|
+
name: 'Facebook Messenger',
|
|
77
|
+
value: 1300,
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
name: 'WeChat',
|
|
81
|
+
value: 1165,
|
|
82
|
+
},
|
|
83
|
+
{
|
|
84
|
+
name: 'Instagram',
|
|
85
|
+
value: 1000,
|
|
86
|
+
},
|
|
87
|
+
{
|
|
88
|
+
name: 'Tik Tok',
|
|
89
|
+
value: 800,
|
|
90
|
+
},
|
|
91
|
+
] %>
|
|
92
|
+
|
|
93
|
+
|
|
94
|
+
<%= pb_rails("circle_chart", props: {
|
|
95
|
+
chart_data: data_1,
|
|
96
|
+
id: "size-test-1",
|
|
97
|
+
min_point_size: 2,
|
|
98
|
+
max_point_size: 200,
|
|
99
|
+
inner_size: "sm",
|
|
100
|
+
z_min: 0,
|
|
101
|
+
start_angle: 0,
|
|
102
|
+
header_format: '',
|
|
103
|
+
}) %>
|
|
104
|
+
|
|
105
|
+
<%= pb_rails("circle_chart", props: {
|
|
106
|
+
chart_data: data_2,
|
|
107
|
+
id: "size-test-2",
|
|
108
|
+
min_point_size: 2,
|
|
109
|
+
max_point_size: 200,
|
|
110
|
+
inner_size: "md",
|
|
111
|
+
z_min: 0,
|
|
112
|
+
start_angle: 0,
|
|
113
|
+
header_format: '',
|
|
114
|
+
}) %>
|
|
115
|
+
|
|
116
|
+
<%= pb_rails("circle_chart", props: {
|
|
117
|
+
chart_data: data_3,
|
|
118
|
+
id: "size-test-3",
|
|
119
|
+
min_point_size: 2,
|
|
120
|
+
max_point_size: 200,
|
|
121
|
+
inner_size: "lg",
|
|
122
|
+
z_min: 0,
|
|
123
|
+
start_angle: 0,
|
|
124
|
+
header_format: '',
|
|
125
|
+
}) %>
|
|
126
|
+
|
|
127
|
+
<%= pb_rails("circle_chart", props: {
|
|
128
|
+
chart_data: data_4,
|
|
129
|
+
id: "size-test-4",
|
|
130
|
+
min_point_size: 2,
|
|
131
|
+
max_point_size: 200,
|
|
132
|
+
inner_size: "none",
|
|
133
|
+
z_min: 0,
|
|
134
|
+
start_angle: 0,
|
|
135
|
+
header_format: '',
|
|
136
|
+
}) %>
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
<% data = [{
|
|
2
|
+
name: 'Facebook',
|
|
3
|
+
value: 2498,
|
|
4
|
+
},
|
|
5
|
+
{
|
|
6
|
+
name: 'YouTube',
|
|
7
|
+
value: 2000,
|
|
8
|
+
},
|
|
9
|
+
{
|
|
10
|
+
name: 'WhatsApp',
|
|
11
|
+
value: 2000,
|
|
12
|
+
|
|
13
|
+
},
|
|
14
|
+
{
|
|
15
|
+
name: 'Facebook Messenger',
|
|
16
|
+
value: 1300,
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
name: 'WeChat',
|
|
20
|
+
value: 1165,
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
name: 'Instagram',
|
|
24
|
+
value: 1000,
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
name: 'Tik Tok',
|
|
28
|
+
value: 800,
|
|
29
|
+
},
|
|
30
|
+
] %>
|
|
31
|
+
|
|
32
|
+
<%= pb_rails("circle_chart", props: {
|
|
33
|
+
style: "pie",
|
|
34
|
+
chart_data: data,
|
|
35
|
+
id: "with-labels-example",
|
|
36
|
+
data_labels: true
|
|
37
|
+
}) %>
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
<% data_1 = [{
|
|
2
|
+
name: 'Bugs',
|
|
3
|
+
value: 8,
|
|
4
|
+
|
|
5
|
+
},
|
|
6
|
+
{
|
|
7
|
+
name: 'Chores',
|
|
8
|
+
value: 1,
|
|
9
|
+
|
|
10
|
+
},
|
|
11
|
+
{
|
|
12
|
+
name: 'Stories',
|
|
13
|
+
value: 12,
|
|
14
|
+
}
|
|
15
|
+
] %>
|
|
16
|
+
|
|
17
|
+
<%= pb_rails("circle_chart", props: {
|
|
18
|
+
style: "pie",
|
|
19
|
+
chart_data: data_1,
|
|
20
|
+
legend: true,
|
|
21
|
+
id: "with-legend-example",
|
|
22
|
+
}) %>
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
<% data_5 = [{
|
|
2
|
+
name: 'Facebook',
|
|
3
|
+
value: 2498,
|
|
4
|
+
},
|
|
5
|
+
{
|
|
6
|
+
name: 'YouTube',
|
|
7
|
+
value: 2000,
|
|
8
|
+
},
|
|
9
|
+
{
|
|
10
|
+
name: 'WhatsApp',
|
|
11
|
+
value: 2000,
|
|
12
|
+
|
|
13
|
+
},
|
|
14
|
+
{
|
|
15
|
+
name: 'Facebook Messenger',
|
|
16
|
+
value: 1300,
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
name: 'WeChat',
|
|
20
|
+
value: 1165,
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
name: 'Instagram',
|
|
24
|
+
value: 1000,
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
name: 'Tik Tok',
|
|
28
|
+
value: 800,
|
|
29
|
+
},
|
|
30
|
+
] %>
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
<%= pb_rails("circle_chart", props: {
|
|
34
|
+
style: "pie",
|
|
35
|
+
title: "Active Users on Social Media",
|
|
36
|
+
chart_data: data_5,
|
|
37
|
+
id: "with-caption-example",
|
|
38
|
+
}) %>
|
|
@@ -4,6 +4,9 @@ import typography from '../tokens/_typography.scss'
|
|
|
4
4
|
import Highcharts from 'highcharts'
|
|
5
5
|
|
|
6
6
|
const highchartsTheme = {
|
|
7
|
+
lang: {
|
|
8
|
+
thousandsSep: ',',
|
|
9
|
+
},
|
|
7
10
|
colors: [
|
|
8
11
|
colors.data_1,
|
|
9
12
|
colors.data_2,
|
|
@@ -19,7 +22,6 @@ const highchartsTheme = {
|
|
|
19
22
|
plotBackgroundColor: null,
|
|
20
23
|
plotShadow: false,
|
|
21
24
|
plotBorderWidth: 0,
|
|
22
|
-
|
|
23
25
|
},
|
|
24
26
|
title: {
|
|
25
27
|
style: {
|
|
@@ -141,6 +143,29 @@ const highchartsTheme = {
|
|
|
141
143
|
},
|
|
142
144
|
threshold: null,
|
|
143
145
|
},
|
|
146
|
+
|
|
147
|
+
// PIE STYLES
|
|
148
|
+
pie: {
|
|
149
|
+
colors: [
|
|
150
|
+
colors.data_1,
|
|
151
|
+
colors.data_2,
|
|
152
|
+
colors.data_3,
|
|
153
|
+
colors.data_4,
|
|
154
|
+
colors.data_5,
|
|
155
|
+
colors.data_6,
|
|
156
|
+
colors.data_7,
|
|
157
|
+
],
|
|
158
|
+
dataLabels: {
|
|
159
|
+
style: {
|
|
160
|
+
fontFamily: typography.font_family_base,
|
|
161
|
+
fontSize: typography.text_smaller,
|
|
162
|
+
color: colors.text_lt_light,
|
|
163
|
+
fontWeight: typography.regular,
|
|
164
|
+
},
|
|
165
|
+
},
|
|
166
|
+
},
|
|
167
|
+
|
|
168
|
+
// LINE CHART STYLES
|
|
144
169
|
line: {
|
|
145
170
|
dataLabels: {
|
|
146
171
|
color: '#CCC',
|
|
@@ -26,14 +26,22 @@ type PbPopoverProps = {
|
|
|
26
26
|
shouldClosePopover?: () => Boolean,
|
|
27
27
|
} & PopperProps
|
|
28
28
|
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
29
|
+
// Prop enabled default modifiers here
|
|
30
|
+
// https://popper.js.org/docs/v2/modifiers
|
|
31
|
+
|
|
32
|
+
const POPOVER_MODIFIERS = {
|
|
33
|
+
offset: { //https://popper.js.org/docs/v2/modifiers/offset/
|
|
34
|
+
enabled: true,
|
|
35
|
+
name: 'offset',
|
|
36
|
+
options: {
|
|
37
|
+
offset: [0, 8],
|
|
38
|
+
},
|
|
39
|
+
phase: 'main',
|
|
32
40
|
},
|
|
33
41
|
}
|
|
34
42
|
|
|
35
43
|
const popoverModifiers = ({ modifiers, offset }) => {
|
|
36
|
-
return offset ?
|
|
44
|
+
return offset ? modifiers.concat([POPOVER_MODIFIERS.offset]) : modifiers
|
|
37
45
|
}
|
|
38
46
|
|
|
39
47
|
const Popover = ({
|
|
@@ -43,15 +51,13 @@ const Popover = ({
|
|
|
43
51
|
offset,
|
|
44
52
|
placement,
|
|
45
53
|
referenceElement,
|
|
46
|
-
show,
|
|
47
54
|
}: PbPopoverProps) => (
|
|
48
55
|
<Popper
|
|
49
56
|
modifiers={popoverModifiers({ modifiers, offset })}
|
|
50
57
|
placement={placement}
|
|
51
58
|
referenceElement={referenceElement}
|
|
52
59
|
>
|
|
53
|
-
{({ placement, ref,
|
|
54
|
-
scheduleUpdate()
|
|
60
|
+
{({ placement, ref, style }) => {
|
|
55
61
|
return (
|
|
56
62
|
<div
|
|
57
63
|
className={buildCss('pb_popover_kit', className)}
|
|
@@ -59,7 +65,7 @@ const Popover = ({
|
|
|
59
65
|
ref={ref}
|
|
60
66
|
style={style}
|
|
61
67
|
>
|
|
62
|
-
<div className={buildCss('popover_tooltip',
|
|
68
|
+
<div className={buildCss('popover_tooltip', 'show')}>
|
|
63
69
|
<Card shadow="deeper">
|
|
64
70
|
{ children }
|
|
65
71
|
</Card>
|
|
@@ -73,13 +79,13 @@ const Popover = ({
|
|
|
73
79
|
|
|
74
80
|
export default class PbReactPopover extends React.Component<PbPopoverProps> {
|
|
75
81
|
static defaultProps = {
|
|
76
|
-
modifiers:
|
|
82
|
+
modifiers: [],
|
|
77
83
|
offset: false,
|
|
78
84
|
placement: 'left',
|
|
79
85
|
portal: 'body',
|
|
80
86
|
show: false,
|
|
81
87
|
shouldClosePopover: noop,
|
|
82
|
-
usePortal:
|
|
88
|
+
usePortal: true,
|
|
83
89
|
}
|
|
84
90
|
|
|
85
91
|
componentDidMount() {
|
|
@@ -134,7 +140,6 @@ export default class PbReactPopover extends React.Component<PbPopoverProps> {
|
|
|
134
140
|
offset={offset}
|
|
135
141
|
placement={placement}
|
|
136
142
|
referenceElement={referenceElement}
|
|
137
|
-
show={show}
|
|
138
143
|
>
|
|
139
144
|
{children}
|
|
140
145
|
</Popover>
|
|
@@ -156,13 +161,15 @@ export default class PbReactPopover extends React.Component<PbPopoverProps> {
|
|
|
156
161
|
)}
|
|
157
162
|
</PopperReference>
|
|
158
163
|
</If>
|
|
159
|
-
<If condition={
|
|
160
|
-
{
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
164
|
+
<If condition={show}>
|
|
165
|
+
<If condition={usePortal}>
|
|
166
|
+
{ReactDOM.createPortal(
|
|
167
|
+
popoverComponent,
|
|
168
|
+
document.querySelector(portal)
|
|
169
|
+
)}
|
|
170
|
+
<Else />
|
|
171
|
+
{popoverComponent}
|
|
172
|
+
</If>
|
|
166
173
|
</If>
|
|
167
174
|
</PopperManager>
|
|
168
175
|
)
|
|
@@ -11,7 +11,6 @@ examples:
|
|
|
11
11
|
- popover_default: Default
|
|
12
12
|
- popover_with_button: With Button
|
|
13
13
|
- popover_list: With any children
|
|
14
|
-
- popover_portal: Use with `portal` option
|
|
15
14
|
- popover_click_outside: Close on click outside
|
|
16
15
|
- popover_click_inside: Close on click inside
|
|
17
16
|
- popover_click_any: Close on click anywhere
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
export { default as PopoverDefault } from './_popover_default.jsx'
|
|
2
2
|
export { default as PopoverWithButton } from './_popover_with_button.jsx'
|
|
3
3
|
export { default as PopoverList } from './_popover_list.jsx'
|
|
4
|
-
export { default as PopoverPortal } from './_popover_portal.jsx'
|
|
5
4
|
export { default as PopoverClickOutside } from './_popover_click_outside.jsx'
|
|
6
5
|
export { default as PopoverClickInside } from './_popover_click_inside.jsx'
|
|
7
6
|
export { default as PopoverClickAny } from './_popover_click_any.jsx'
|
|
@@ -19,22 +19,21 @@ type RadioProps = {
|
|
|
19
19
|
onChange: (Boolean)=>void,
|
|
20
20
|
}
|
|
21
21
|
|
|
22
|
-
const Radio = (
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
22
|
+
const Radio = ({
|
|
23
|
+
checked = false,
|
|
24
|
+
children,
|
|
25
|
+
className = '',
|
|
26
|
+
dark = false,
|
|
27
|
+
data,
|
|
28
|
+
error = false,
|
|
29
|
+
id,
|
|
30
|
+
label,
|
|
31
|
+
name,
|
|
32
|
+
value,
|
|
33
|
+
text,
|
|
34
|
+
onChange = () => {},
|
|
35
|
+
...props
|
|
36
|
+
}: RadioProps) => {
|
|
38
37
|
const errorClass = error ? 'error' : ''
|
|
39
38
|
|
|
40
39
|
return (
|
|
@@ -46,6 +45,7 @@ const Radio = (props: RadioProps) => {
|
|
|
46
45
|
{children}
|
|
47
46
|
<Else />
|
|
48
47
|
<input
|
|
48
|
+
{...props}
|
|
49
49
|
checked={checked}
|
|
50
50
|
data={data}
|
|
51
51
|
name={name}
|
|
@@ -67,6 +67,7 @@ const Select = ({
|
|
|
67
67
|
options = [],
|
|
68
68
|
required = false,
|
|
69
69
|
value,
|
|
70
|
+
...props
|
|
70
71
|
}: SelectProps) => {
|
|
71
72
|
const errorClass = error ? ' error' : ''
|
|
72
73
|
const css = buildCss('pb_select', { dark }) + errorClass
|
|
@@ -99,6 +100,7 @@ const Select = ({
|
|
|
99
100
|
{children}
|
|
100
101
|
<Else />
|
|
101
102
|
<select
|
|
103
|
+
{...props}
|
|
102
104
|
disabled={disabled}
|
|
103
105
|
id={name}
|
|
104
106
|
multiple={multiple}
|
|
@@ -30,6 +30,7 @@ const TextInput = ({
|
|
|
30
30
|
type = 'text',
|
|
31
31
|
value,
|
|
32
32
|
children = null,
|
|
33
|
+
...props
|
|
33
34
|
}: TextInputProps) => {
|
|
34
35
|
const css = classnames([
|
|
35
36
|
`pb_text_input_kit${dark === true ? '_dark' : ''}`,
|
|
@@ -49,6 +50,7 @@ const TextInput = ({
|
|
|
49
50
|
{children}
|
|
50
51
|
<Else />
|
|
51
52
|
<input
|
|
53
|
+
{...props}
|
|
52
54
|
className="text_input"
|
|
53
55
|
name={name}
|
|
54
56
|
onChange={onChange}
|
|
@@ -35,6 +35,7 @@ const Textarea = ({
|
|
|
35
35
|
placeholder,
|
|
36
36
|
rows = 4,
|
|
37
37
|
value,
|
|
38
|
+
...props
|
|
38
39
|
}: TextareaProps) => {
|
|
39
40
|
const textareaClass = `pb_textarea_kit${dark ? '_dark' : ''}`
|
|
40
41
|
const errorClass = error ? 'error' : null
|
|
@@ -50,6 +51,7 @@ const Textarea = ({
|
|
|
50
51
|
{children}
|
|
51
52
|
<Else />
|
|
52
53
|
<textarea
|
|
54
|
+
{...props}
|
|
53
55
|
className={textareaClass}
|
|
54
56
|
name={name}
|
|
55
57
|
onChange={onChange}
|
|
@@ -2,6 +2,8 @@ import Highcharts from 'highcharts'
|
|
|
2
2
|
|
|
3
3
|
import { highchartsTheme } from '../pb_dashboard/pbChartsLightTheme.js'
|
|
4
4
|
|
|
5
|
+
require('highcharts/modules/variable-pie')(Highcharts)
|
|
6
|
+
|
|
5
7
|
class pbChart {
|
|
6
8
|
defaults = {
|
|
7
9
|
callbackInitializeBefore: () => {},
|
|
@@ -26,7 +28,50 @@ class pbChart {
|
|
|
26
28
|
this.element = element
|
|
27
29
|
this.options = options
|
|
28
30
|
this.settings = this.extendDefaults(this.defaults, options)
|
|
29
|
-
|
|
31
|
+
|
|
32
|
+
if (this.options.type == 'variablepie' || this.options.type == 'pie'){
|
|
33
|
+
this.setupPieChart()
|
|
34
|
+
} else {
|
|
35
|
+
this.setupChart()
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
setupPieChart() {
|
|
40
|
+
Highcharts.setOptions(highchartsTheme)
|
|
41
|
+
|
|
42
|
+
Highcharts.chart(this.defaults.id, {
|
|
43
|
+
title: {
|
|
44
|
+
text: this.defaults.title,
|
|
45
|
+
},
|
|
46
|
+
chart: {
|
|
47
|
+
type: this.defaults.type,
|
|
48
|
+
},
|
|
49
|
+
plotOptions: {
|
|
50
|
+
pie: {
|
|
51
|
+
dataLabels: {
|
|
52
|
+
enabled: this.defaults.dataLabels,
|
|
53
|
+
connectorShape: 'straight',
|
|
54
|
+
connectorWidth: 3,
|
|
55
|
+
format: this.defaults.dataLabelHtml,
|
|
56
|
+
},
|
|
57
|
+
showInLegend: this.defaults.showInLegend,
|
|
58
|
+
},
|
|
59
|
+
},
|
|
60
|
+
tooltip: {
|
|
61
|
+
headerFormat: this.defaults.headerFormat,
|
|
62
|
+
pointFormat: this.defaults.tooltipHtml,
|
|
63
|
+
useHTML: this.defaults.useHTML,
|
|
64
|
+
},
|
|
65
|
+
series: [{
|
|
66
|
+
minPointSize: this.defaults.minPointSize,
|
|
67
|
+
maxPointSize: this.defaults.maxPointSize,
|
|
68
|
+
innerSize: this.defaults.innerSize,
|
|
69
|
+
data: this.defaults.chartData,
|
|
70
|
+
zMin: this.defaults.zMin,
|
|
71
|
+
startAngle: this.defaults.startAngle,
|
|
72
|
+
}],
|
|
73
|
+
credits: false,
|
|
74
|
+
})
|
|
30
75
|
}
|
|
31
76
|
|
|
32
77
|
setupChart() {
|
|
@@ -55,6 +100,9 @@ class pbChart {
|
|
|
55
100
|
plotOptions: {
|
|
56
101
|
series: {
|
|
57
102
|
pointStart: this.defaults.pointStart,
|
|
103
|
+
dataLabels: {
|
|
104
|
+
enabled: false,
|
|
105
|
+
},
|
|
58
106
|
},
|
|
59
107
|
},
|
|
60
108
|
series: this.defaults.chartData,
|
data/lib/playbook/version.rb
CHANGED
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: playbook_ui
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 4.
|
|
4
|
+
version: 4.14.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Power UX
|
|
@@ -9,7 +9,7 @@ authors:
|
|
|
9
9
|
autorequire:
|
|
10
10
|
bindir: bin
|
|
11
11
|
cert_chain: []
|
|
12
|
-
date: 2020-
|
|
12
|
+
date: 2020-05-14 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: actionpack
|
|
@@ -625,6 +625,15 @@ files:
|
|
|
625
625
|
- app/pb_kits/playbook/pb_checkbox/docs/_description.md
|
|
626
626
|
- app/pb_kits/playbook/pb_checkbox/docs/example.yml
|
|
627
627
|
- app/pb_kits/playbook/pb_checkbox/docs/index.js
|
|
628
|
+
- app/pb_kits/playbook/pb_circle_chart/_circle_chart.html.erb
|
|
629
|
+
- app/pb_kits/playbook/pb_circle_chart/_circle_chart.scss
|
|
630
|
+
- app/pb_kits/playbook/pb_circle_chart/circle_chart.rb
|
|
631
|
+
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.html.erb
|
|
632
|
+
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_inner_sizes.html.erb
|
|
633
|
+
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_labels.html.erb
|
|
634
|
+
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_legend_kit.html.erb
|
|
635
|
+
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_title.html.erb
|
|
636
|
+
- app/pb_kits/playbook/pb_circle_chart/docs/example.yml
|
|
628
637
|
- app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.html.erb
|
|
629
638
|
- app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.jsx
|
|
630
639
|
- app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.scss
|
|
@@ -1197,7 +1206,6 @@ files:
|
|
|
1197
1206
|
- app/pb_kits/playbook/pb_popover/docs/_popover_default.jsx
|
|
1198
1207
|
- app/pb_kits/playbook/pb_popover/docs/_popover_list.html.erb
|
|
1199
1208
|
- app/pb_kits/playbook/pb_popover/docs/_popover_list.jsx
|
|
1200
|
-
- app/pb_kits/playbook/pb_popover/docs/_popover_portal.jsx
|
|
1201
1209
|
- app/pb_kits/playbook/pb_popover/docs/_popover_with_button.html.erb
|
|
1202
1210
|
- app/pb_kits/playbook/pb_popover/docs/_popover_with_button.jsx
|
|
1203
1211
|
- app/pb_kits/playbook/pb_popover/docs/_popover_with_circle.html.erb
|
|
@@ -1713,7 +1721,8 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
|
1713
1721
|
- !ruby/object:Gem::Version
|
|
1714
1722
|
version: '0'
|
|
1715
1723
|
requirements: []
|
|
1716
|
-
|
|
1724
|
+
rubyforge_project:
|
|
1725
|
+
rubygems_version: 2.7.3
|
|
1717
1726
|
signing_key:
|
|
1718
1727
|
specification_version: 4
|
|
1719
1728
|
summary: Playbook Design System
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
import React, { useState } from 'react'
|
|
2
|
-
import {
|
|
3
|
-
Button,
|
|
4
|
-
PbReactPopover,
|
|
5
|
-
} from '../..'
|
|
6
|
-
|
|
7
|
-
const PopoverPortal = () => {
|
|
8
|
-
const [showPopover, setShowPopover] = useState(false)
|
|
9
|
-
|
|
10
|
-
const handleTogglePopover = () => {
|
|
11
|
-
setShowPopover(!showPopover)
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
const popoverReference = (
|
|
15
|
-
<Button
|
|
16
|
-
onClick={handleTogglePopover}
|
|
17
|
-
text="Button Secondary"
|
|
18
|
-
variant="secondary"
|
|
19
|
-
/>
|
|
20
|
-
)
|
|
21
|
-
|
|
22
|
-
return (
|
|
23
|
-
<PbReactPopover
|
|
24
|
-
placement="bottom"
|
|
25
|
-
reference={popoverReference}
|
|
26
|
-
show={showPopover}
|
|
27
|
-
usePortal
|
|
28
|
-
>
|
|
29
|
-
{'Whoa. I\'m a portal popover.'}
|
|
30
|
-
</PbReactPopover>
|
|
31
|
-
)
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
export default PopoverPortal
|