playbook_ui 15.0.0.pre.alpha.removewebpacker10550 → 15.0.0.pre.alpha.renovatenpmtrixvulnerability10692
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 +2 -0
- data/app/pb_kits/playbook/pb_advanced_table/Components/RegularTableView.tsx +12 -11
- data/app/pb_kits/playbook/pb_advanced_table/Components/VirtualizedTableView.tsx +7 -7
- data/app/pb_kits/playbook/pb_advanced_table/Utilities/RowUtils.ts +7 -2
- data/app/pb_kits/playbook/pb_card/_card.scss +12 -4
- data/app/pb_kits/playbook/pb_card/_card.tsx +3 -3
- data/app/pb_kits/playbook/pb_card/_card_mixin.scss +10 -0
- data/app/pb_kits/playbook/pb_card/docs/_card_highlight.html.erb +3 -0
- data/app/pb_kits/playbook/pb_card/docs/_card_highlight.jsx +8 -0
- data/app/pb_kits/playbook/pb_contact/_contact.tsx +5 -0
- data/app/pb_kits/playbook/pb_contact/contact.rb +4 -0
- data/app/pb_kits/playbook/pb_contact/contact.test.js +21 -1
- data/app/pb_kits/playbook/pb_contact/docs/_contact_default.html.erb +16 -1
- data/app/pb_kits/playbook/pb_contact/docs/_contact_default.jsx +15 -0
- data/app/pb_kits/playbook/pb_contact/docs/_contact_default.md +5 -0
- data/app/pb_kits/playbook/pb_contact/docs/_contact_with_detail.html.erb +6 -0
- data/app/pb_kits/playbook/pb_contact/docs/_contact_with_detail.jsx +6 -0
- data/app/pb_kits/playbook/pb_icon_button/_icon_button.tsx +1 -0
- data/app/pb_kits/playbook/pb_icon_button/icon_button.html.erb +2 -1
- data/app/pb_kits/playbook/pb_nav/_item.tsx +19 -5
- data/app/pb_kits/playbook/pb_nav/item.html.erb +6 -2
- data/app/pb_kits/playbook/pb_pb_circle_chart/_pb_circle_chart.scss +3 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/_pb_circle_chart.tsx +62 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_block_content.html.erb +31 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_block_content.jsx +81 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.html.erb +25 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.jsx +40 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.md +5 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_custom_tooltip.html.erb +27 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_custom_tooltip.jsx +39 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_custom_tooltip.md +5 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_legend_position.html.erb +93 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_legend_position.jsx +131 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_legend_position.md +14 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_labels.html.erb +42 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_labels.jsx +58 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_legend.html.erb +24 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_legend.jsx +38 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_default.html.erb +22 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_default.jsx +33 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_inner_sizes.html.erb +118 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_inner_sizes.jsx +144 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_live_data.jsx +60 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_rounded.html.erb +24 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_rounded.jsx +42 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_with_title.html.erb +38 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_with_title.jsx +52 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/example.yml +29 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/index.js +11 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/pbCircleChartTheme.ts +88 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/pb_circle_chart.html.erb +1 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/pb_circle_chart.rb +28 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/pb_circle_chart.test.jsx +51 -0
- data/app/pb_kits/playbook/pb_section_separator/_section_separator.scss +13 -5
- data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_children.html.erb +23 -0
- data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_children.jsx +45 -7
- data/app/pb_kits/playbook/pb_section_separator/section_separator.html.erb +4 -1
- data/app/pb_kits/playbook/pb_section_separator/section_separator.test.js +165 -0
- data/app/pb_kits/playbook/pb_timestamp/_timestamp.tsx +24 -8
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align.html.erb +0 -10
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align.jsx +0 -9
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align.md +1 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.html.erb +3 -17
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.jsx +0 -15
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.md +1 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.html.erb +0 -2
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.jsx +0 -2
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.md +5 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_current_year.html.erb +12 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_current_year.jsx +25 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_current_year.md +1 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_date.html.erb +4 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_date.jsx +17 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_date.md +1 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_time.html.erb +18 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_time.jsx +44 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_time.md +1 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.html.erb +0 -14
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.jsx +0 -14
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.md +1 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_unstyled.html.erb +0 -4
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_unstyled.jsx +0 -4
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated.jsx +0 -1
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated.md +5 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_current_year.html.erb +16 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_current_year.jsx +30 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_current_year.md +1 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_date.html.erb +16 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_date.jsx +30 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_date.md +1 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_time.html.erb +26 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_time.jsx +41 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_time.md +1 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/example.yml +18 -6
- data/app/pb_kits/playbook/pb_timestamp/docs/index.js +6 -0
- data/app/pb_kits/playbook/pb_timestamp/timestamp.rb +29 -7
- data/app/pb_kits/playbook/pb_timestamp/timestamp.test.js +69 -4
- data/dist/chunks/{_line_graph-BgI_x0Qp.js → _line_graph-CUfJ7E4h.js} +1 -1
- data/dist/chunks/{_typeahead-DCpj5VBx.js → _typeahead-DCp1lVJx.js} +2 -2
- data/dist/chunks/{_weekday_stacked-Bq-Luje1.js → _weekday_stacked-qrsOsOR9.js} +3 -3
- data/dist/chunks/{lib-QZuu1ltS.js → lib-BTs5acfO.js} +1 -1
- data/dist/chunks/{pb_form_validation-CleM960_.js → pb_form_validation-CKkaQFX3.js} +1 -1
- data/dist/chunks/vendor.js +1 -1
- data/dist/menu.yml +6 -0
- data/dist/playbook-doc.js +2 -2
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/dist/playbook.css +1 -1
- data/lib/playbook/engine.rb +1 -0
- data/lib/playbook/forms/builder/form_field_builder.rb +28 -1
- data/lib/playbook/kit_base.rb +2 -20
- data/lib/playbook/version.rb +1 -1
- metadata +83 -14
- data/app/pb_kits/playbook/pb_timestamp/docs/_time_stamp_default.md +0 -1
- data/dist/chunks/componentRegistry-DzmmLR2x.js +0 -1
@@ -0,0 +1,118 @@
|
|
1
|
+
<% data_first = [
|
2
|
+
{
|
3
|
+
name: 'Bugs',
|
4
|
+
y: 8,
|
5
|
+
},
|
6
|
+
{
|
7
|
+
name: 'Chores',
|
8
|
+
y: 1,
|
9
|
+
},
|
10
|
+
{
|
11
|
+
name: 'Stories',
|
12
|
+
y: 12,
|
13
|
+
},
|
14
|
+
] %>
|
15
|
+
|
16
|
+
<% data_second = [
|
17
|
+
{
|
18
|
+
name: 'Queued',
|
19
|
+
y: 7,
|
20
|
+
},
|
21
|
+
{
|
22
|
+
name: 'In Progress',
|
23
|
+
y: 6,
|
24
|
+
},
|
25
|
+
{
|
26
|
+
name: 'Validation',
|
27
|
+
y: 3,
|
28
|
+
},
|
29
|
+
{
|
30
|
+
name: 'Done',
|
31
|
+
y: 6,
|
32
|
+
},
|
33
|
+
] %>
|
34
|
+
|
35
|
+
<% data_third = [
|
36
|
+
{
|
37
|
+
name: '1 Point Tickets',
|
38
|
+
y: 2,
|
39
|
+
},
|
40
|
+
{
|
41
|
+
name: '3 Point Tickets',
|
42
|
+
y: 5,
|
43
|
+
},
|
44
|
+
{
|
45
|
+
name: '5 Point Tickets',
|
46
|
+
y: 6,
|
47
|
+
},
|
48
|
+
{
|
49
|
+
name: '8 Point Tickets',
|
50
|
+
y: 3,
|
51
|
+
},
|
52
|
+
{
|
53
|
+
name: '13 Point Tickets',
|
54
|
+
y: 1,
|
55
|
+
},
|
56
|
+
] %>
|
57
|
+
|
58
|
+
<% data_fourth = [
|
59
|
+
{
|
60
|
+
name: 'Facebook',
|
61
|
+
y: 2498,
|
62
|
+
},
|
63
|
+
{
|
64
|
+
name: 'YouTube',
|
65
|
+
y: 2000,
|
66
|
+
},
|
67
|
+
{
|
68
|
+
name: 'WhatsApp',
|
69
|
+
y: 2000,
|
70
|
+
},
|
71
|
+
{
|
72
|
+
name: 'Facebook Messenger',
|
73
|
+
y: 1300,
|
74
|
+
},
|
75
|
+
{
|
76
|
+
name: 'WeChat',
|
77
|
+
y: 1165,
|
78
|
+
},
|
79
|
+
{
|
80
|
+
name: 'Instagram',
|
81
|
+
y: 1000,
|
82
|
+
},
|
83
|
+
{
|
84
|
+
name: 'Tik Tok',
|
85
|
+
y: 800,
|
86
|
+
},
|
87
|
+
] %>
|
88
|
+
|
89
|
+
<% chart_options_small = {
|
90
|
+
series: [{
|
91
|
+
data: data_first,
|
92
|
+
innerSize: '35%'
|
93
|
+
}], } %>
|
94
|
+
|
95
|
+
<% chart_options_md = {
|
96
|
+
series: [{
|
97
|
+
data: data_second,
|
98
|
+
innerSize: '50%'
|
99
|
+
}], } %>
|
100
|
+
|
101
|
+
<% chart_options_lg = {
|
102
|
+
series: [{
|
103
|
+
data: data_third,
|
104
|
+
innerSize: '85%'
|
105
|
+
}], } %>
|
106
|
+
|
107
|
+
<% chart_options_xl = {
|
108
|
+
series: [{
|
109
|
+
data: data_fourth,
|
110
|
+
innerSize: '0%'
|
111
|
+
}], } %>
|
112
|
+
|
113
|
+
|
114
|
+
|
115
|
+
<%= pb_rails("pb_circle_chart", props: { options: chart_options_small }) %>
|
116
|
+
<%= pb_rails("pb_circle_chart", props: { options: chart_options_md }) %>
|
117
|
+
<%= pb_rails("pb_circle_chart", props: { options: chart_options_lg }) %>
|
118
|
+
<%= pb_rails("pb_circle_chart", props: { options: chart_options_xl }) %>
|
@@ -0,0 +1,144 @@
|
|
1
|
+
import React from "react";
|
2
|
+
import { PbCircleChart } from "playbook-ui";
|
3
|
+
|
4
|
+
const dataFirst = [
|
5
|
+
{
|
6
|
+
name: 'Bugs',
|
7
|
+
y: 8,
|
8
|
+
},
|
9
|
+
{
|
10
|
+
name: 'Chores',
|
11
|
+
y: 1,
|
12
|
+
},
|
13
|
+
{
|
14
|
+
name: 'Stories',
|
15
|
+
y: 12,
|
16
|
+
},
|
17
|
+
]
|
18
|
+
|
19
|
+
const dataSecond = [
|
20
|
+
{
|
21
|
+
name: 'Queued',
|
22
|
+
y: 7,
|
23
|
+
},
|
24
|
+
{
|
25
|
+
name: 'In Progress',
|
26
|
+
y: 6,
|
27
|
+
},
|
28
|
+
{
|
29
|
+
name: 'Validation',
|
30
|
+
y: 3,
|
31
|
+
},
|
32
|
+
{
|
33
|
+
name: 'Done',
|
34
|
+
y: 6,
|
35
|
+
},
|
36
|
+
]
|
37
|
+
|
38
|
+
const dataThird = [
|
39
|
+
{
|
40
|
+
name: '1 Point Tickets',
|
41
|
+
y: 2,
|
42
|
+
},
|
43
|
+
{
|
44
|
+
name: '3 Point Tickets',
|
45
|
+
y: 5,
|
46
|
+
},
|
47
|
+
{
|
48
|
+
name: '5 Point Tickets',
|
49
|
+
y: 6,
|
50
|
+
},
|
51
|
+
{
|
52
|
+
name: '8 Point Tickets',
|
53
|
+
y: 3,
|
54
|
+
},
|
55
|
+
{
|
56
|
+
name: '13 Point Tickets',
|
57
|
+
y: 1,
|
58
|
+
},
|
59
|
+
]
|
60
|
+
|
61
|
+
const dataFourth = [
|
62
|
+
{
|
63
|
+
name: 'Facebook',
|
64
|
+
y: 2498,
|
65
|
+
},
|
66
|
+
{
|
67
|
+
name: 'YouTube',
|
68
|
+
y: 2000,
|
69
|
+
},
|
70
|
+
{
|
71
|
+
name: 'WhatsApp',
|
72
|
+
y: 2000,
|
73
|
+
},
|
74
|
+
{
|
75
|
+
name: 'Facebook Messenger',
|
76
|
+
y: 1300,
|
77
|
+
},
|
78
|
+
{
|
79
|
+
name: 'WeChat',
|
80
|
+
y: 1165,
|
81
|
+
},
|
82
|
+
{
|
83
|
+
name: 'Instagram',
|
84
|
+
y: 1000,
|
85
|
+
},
|
86
|
+
{
|
87
|
+
name: 'Tik Tok',
|
88
|
+
y: 800,
|
89
|
+
},
|
90
|
+
]
|
91
|
+
|
92
|
+
const PbCircleChartInnerSizes= (props) => {
|
93
|
+
const chartOptionsSmall = {
|
94
|
+
series: [{
|
95
|
+
data: dataFirst,
|
96
|
+
innerSize: '35%'
|
97
|
+
}],
|
98
|
+
}
|
99
|
+
|
100
|
+
const chartOptionsMedium = {
|
101
|
+
series: [{
|
102
|
+
data: dataSecond,
|
103
|
+
innerSize: '50%'
|
104
|
+
}],
|
105
|
+
}
|
106
|
+
|
107
|
+
const chartOptionsLarge = {
|
108
|
+
series: [{
|
109
|
+
data: dataThird,
|
110
|
+
innerSize: '85%'
|
111
|
+
}],
|
112
|
+
}
|
113
|
+
|
114
|
+
const chartOptionsNone = {
|
115
|
+
series: [{
|
116
|
+
data: dataFourth,
|
117
|
+
innerSize: '0%'
|
118
|
+
}],
|
119
|
+
}
|
120
|
+
|
121
|
+
return (
|
122
|
+
<div>
|
123
|
+
<PbCircleChart
|
124
|
+
options={chartOptionsSmall}
|
125
|
+
{...props}
|
126
|
+
/>
|
127
|
+
<PbCircleChart
|
128
|
+
options={chartOptionsMedium}
|
129
|
+
{...props}
|
130
|
+
/>
|
131
|
+
<PbCircleChart
|
132
|
+
options={chartOptionsLarge}
|
133
|
+
{...props}
|
134
|
+
/>
|
135
|
+
<PbCircleChart
|
136
|
+
options={chartOptionsNone}
|
137
|
+
{...props}
|
138
|
+
/>
|
139
|
+
</div>
|
140
|
+
);
|
141
|
+
};
|
142
|
+
|
143
|
+
|
144
|
+
export default PbCircleChartInnerSizes;
|
@@ -0,0 +1,60 @@
|
|
1
|
+
import React, { useState } from "react";
|
2
|
+
import { PbCircleChart, Button } from "playbook-ui";
|
3
|
+
|
4
|
+
const chartData = [
|
5
|
+
{
|
6
|
+
name: "Waiting for Calls",
|
7
|
+
y: 41,
|
8
|
+
},
|
9
|
+
{
|
10
|
+
name: "On Call",
|
11
|
+
y: 49,
|
12
|
+
},
|
13
|
+
{
|
14
|
+
name: "After Call",
|
15
|
+
y: 10,
|
16
|
+
},
|
17
|
+
];
|
18
|
+
|
19
|
+
const chartData2 = [
|
20
|
+
{
|
21
|
+
name: "Waiting for Calls",
|
22
|
+
y: 48,
|
23
|
+
},
|
24
|
+
{
|
25
|
+
name: "On Call",
|
26
|
+
y: 12,
|
27
|
+
},
|
28
|
+
{
|
29
|
+
name: "After Call",
|
30
|
+
y: 140,
|
31
|
+
},
|
32
|
+
];
|
33
|
+
|
34
|
+
|
35
|
+
const PbCircleChartLiveData = (props) => {
|
36
|
+
|
37
|
+
const [data, setData] = useState(chartData);
|
38
|
+
|
39
|
+
const updateValue = () => {
|
40
|
+
setData(chartData2)
|
41
|
+
}
|
42
|
+
const chartOptions = {
|
43
|
+
series: [{ data: data }],
|
44
|
+
}
|
45
|
+
|
46
|
+
return (
|
47
|
+
<div>
|
48
|
+
<Button
|
49
|
+
onClick={updateValue}
|
50
|
+
text="Update Value"
|
51
|
+
/>
|
52
|
+
<PbCircleChart
|
53
|
+
options={chartOptions}
|
54
|
+
{...props}
|
55
|
+
/>
|
56
|
+
</div>
|
57
|
+
);
|
58
|
+
};
|
59
|
+
|
60
|
+
export default PbCircleChartLiveData;
|
@@ -0,0 +1,24 @@
|
|
1
|
+
<% data = [
|
2
|
+
{
|
3
|
+
name: "Waiting for Calls",
|
4
|
+
y: 41,
|
5
|
+
},
|
6
|
+
{
|
7
|
+
name: "On Call",
|
8
|
+
y: 49,
|
9
|
+
},
|
10
|
+
{
|
11
|
+
name: "After Call",
|
12
|
+
y: 10,
|
13
|
+
},
|
14
|
+
] %>
|
15
|
+
|
16
|
+
<% chart_options = {
|
17
|
+
series: [{
|
18
|
+
data: data,
|
19
|
+
innerSize: '100%',
|
20
|
+
borderWidth: '20',
|
21
|
+
}],
|
22
|
+
} %>
|
23
|
+
|
24
|
+
<%= pb_rails("pb_circle_chart", props: { options: chart_options }) %>
|
@@ -0,0 +1,42 @@
|
|
1
|
+
import React from "react";
|
2
|
+
import { PbCircleChart } from "playbook-ui";
|
3
|
+
|
4
|
+
const data= [
|
5
|
+
{
|
6
|
+
name: "Waiting for Calls",
|
7
|
+
y: 41,
|
8
|
+
},
|
9
|
+
{
|
10
|
+
name: "On Call",
|
11
|
+
y: 49,
|
12
|
+
},
|
13
|
+
{
|
14
|
+
name: "After Call",
|
15
|
+
y: 10,
|
16
|
+
},
|
17
|
+
]
|
18
|
+
|
19
|
+
|
20
|
+
const PbCircleChartRounded = (props) => {
|
21
|
+
const chartOptions = {
|
22
|
+
series: [{ data: data }],
|
23
|
+
plotOptions: {
|
24
|
+
pie: {
|
25
|
+
borderColor: null,
|
26
|
+
borderWidth: 20,
|
27
|
+
innerSize: '100%',
|
28
|
+
},
|
29
|
+
},
|
30
|
+
};
|
31
|
+
|
32
|
+
return (
|
33
|
+
<div>
|
34
|
+
<PbCircleChart
|
35
|
+
options={chartOptions}
|
36
|
+
{...props}
|
37
|
+
/>
|
38
|
+
</div>
|
39
|
+
);
|
40
|
+
};
|
41
|
+
|
42
|
+
export default PbCircleChartRounded;
|
@@ -0,0 +1,38 @@
|
|
1
|
+
<% data = [
|
2
|
+
{
|
3
|
+
name: 'Facebook',
|
4
|
+
y: 2498,
|
5
|
+
},
|
6
|
+
{
|
7
|
+
name: 'YouTube',
|
8
|
+
y: 2000,
|
9
|
+
},
|
10
|
+
{
|
11
|
+
name: 'WhatsApp',
|
12
|
+
y: 2000,
|
13
|
+
},
|
14
|
+
{
|
15
|
+
name: 'Facebook Messenger',
|
16
|
+
y: 1300,
|
17
|
+
},
|
18
|
+
{
|
19
|
+
name: 'WeChat',
|
20
|
+
y: 1165,
|
21
|
+
},
|
22
|
+
{
|
23
|
+
name: 'Instagram',
|
24
|
+
y: 1000,
|
25
|
+
},
|
26
|
+
{
|
27
|
+
name: 'Tik Tok',
|
28
|
+
y: 800,
|
29
|
+
},
|
30
|
+
] %>
|
31
|
+
|
32
|
+
<% chart_options = {
|
33
|
+
series: [{ data: data }],
|
34
|
+
title: { text: "Active Users on Social Media" },
|
35
|
+
} %>
|
36
|
+
|
37
|
+
|
38
|
+
<%= pb_rails("pb_circle_chart", props: { options: chart_options }) %>
|
@@ -0,0 +1,52 @@
|
|
1
|
+
import React from "react";
|
2
|
+
import { PbCircleChart } from "playbook-ui";
|
3
|
+
|
4
|
+
const data= [
|
5
|
+
{
|
6
|
+
name: 'Facebook',
|
7
|
+
y: 2498,
|
8
|
+
},
|
9
|
+
{
|
10
|
+
name: 'YouTube',
|
11
|
+
y: 2000,
|
12
|
+
},
|
13
|
+
{
|
14
|
+
name: 'WhatsApp',
|
15
|
+
y: 2000,
|
16
|
+
},
|
17
|
+
{
|
18
|
+
name: 'Facebook Messenger',
|
19
|
+
y: 1300,
|
20
|
+
},
|
21
|
+
{
|
22
|
+
name: 'WeChat',
|
23
|
+
y: 1165,
|
24
|
+
},
|
25
|
+
{
|
26
|
+
name: 'Instagram',
|
27
|
+
y: 1000,
|
28
|
+
},
|
29
|
+
{
|
30
|
+
name: 'Tik Tok',
|
31
|
+
y: 800,
|
32
|
+
},
|
33
|
+
]
|
34
|
+
|
35
|
+
|
36
|
+
const PbCircleChartWithTitle = (props) => {
|
37
|
+
const chartOptions = {
|
38
|
+
title: { text: "Active Users on Social Media" },
|
39
|
+
series: [{ data: data }],
|
40
|
+
};
|
41
|
+
|
42
|
+
return (
|
43
|
+
<div>
|
44
|
+
<PbCircleChart
|
45
|
+
options={chartOptions}
|
46
|
+
{...props}
|
47
|
+
/>
|
48
|
+
</div>
|
49
|
+
);
|
50
|
+
};
|
51
|
+
|
52
|
+
export default PbCircleChartWithTitle;
|
@@ -0,0 +1,29 @@
|
|
1
|
+
examples:
|
2
|
+
|
3
|
+
rails:
|
4
|
+
- pb_circle_chart_default: Default
|
5
|
+
- pb_circle_chart_rounded: Rounded Corners
|
6
|
+
- pb_circle_chart_block_content: Accepts Any Block
|
7
|
+
- pb_circle_chart_color_overrides: Color Overrides
|
8
|
+
- pb_circle_chart_data_with_labels: Data with Labels
|
9
|
+
- pb_circle_chart_data_with_legend: Data with Legend
|
10
|
+
- pb_circle_chart_data_legend_position: Legend Position
|
11
|
+
- pb_circle_chart_with_title: With Title
|
12
|
+
- pb_circle_chart_inner_sizes: Inner Circle Size Options
|
13
|
+
- pb_circle_chart_custom_tooltip: Tooltip Customization
|
14
|
+
|
15
|
+
|
16
|
+
react:
|
17
|
+
- pb_circle_chart_default: Default
|
18
|
+
- pb_circle_chart_live_data: Live Data
|
19
|
+
- pb_circle_chart_rounded: Rounded Corners
|
20
|
+
- pb_circle_chart_block_content: Accepts Any Block
|
21
|
+
- pb_circle_chart_color_overrides: Color Overrides
|
22
|
+
- pb_circle_chart_data_with_labels: Data with Labels
|
23
|
+
- pb_circle_chart_data_with_legend: Data with Legend
|
24
|
+
- pb_circle_chart_data_legend_position: Legend Position
|
25
|
+
- pb_circle_chart_with_title: With Title
|
26
|
+
- pb_circle_chart_inner_sizes: Inner Circle Size Options
|
27
|
+
- pb_circle_chart_custom_tooltip: Tooltip Customization
|
28
|
+
|
29
|
+
|
@@ -0,0 +1,11 @@
|
|
1
|
+
export { default as PbCircleChartDefault } from './_pb_circle_chart_default.jsx'
|
2
|
+
export { default as PbCircleChartLiveData } from './_pb_circle_chart_live_data.jsx'
|
3
|
+
export { default as PbCircleChartRounded } from './_pb_circle_chart_rounded.jsx'
|
4
|
+
export { default as PbCircleChartBlockContent } from './_pb_circle_chart_block_content.jsx'
|
5
|
+
export { default as PbCircleChartColorOverrides } from './_pb_circle_chart_color_overrides.jsx'
|
6
|
+
export { default as PbCircleChartDataWithLabels } from './_pb_circle_chart_data_with_labels.jsx'
|
7
|
+
export { default as PbCircleChartDataWithLegend } from './_pb_circle_chart_data_with_legend.jsx'
|
8
|
+
export { default as PbCircleChartDataLegendPosition } from './_pb_circle_chart_data_legend_position.jsx'
|
9
|
+
export { default as PbCircleChartWithTitle } from './_pb_circle_chart_with_title.jsx'
|
10
|
+
export { default as PbCircleChartInnerSizes } from './_pb_circle_chart_inner_sizes.jsx'
|
11
|
+
export { default as PbCircleChartCustomTooltip } from './_pb_circle_chart_custom_tooltip.jsx'
|
@@ -0,0 +1,88 @@
|
|
1
|
+
import colors from '../tokens/exports/_colors.module.scss'
|
2
|
+
import typography from '../tokens/exports/_typography.module.scss'
|
3
|
+
|
4
|
+
const pbCircleChartTheme = {
|
5
|
+
title: {
|
6
|
+
text: "",
|
7
|
+
style: {
|
8
|
+
color: colors.text_lt_default,
|
9
|
+
fontFamily: typography.font_family_base,
|
10
|
+
fontWeight: typography.bold,
|
11
|
+
fontSize: typography.heading_3,
|
12
|
+
},
|
13
|
+
},
|
14
|
+
chart: {
|
15
|
+
type: "pie",
|
16
|
+
},
|
17
|
+
tooltip: {
|
18
|
+
backgroundColor: {
|
19
|
+
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
|
20
|
+
stops: [
|
21
|
+
[0, colors.bg_dark],
|
22
|
+
[1, colors.bg_dark],
|
23
|
+
],
|
24
|
+
},
|
25
|
+
pointFormat:
|
26
|
+
'<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: ' +
|
27
|
+
"<b>{point.y}</b>",
|
28
|
+
followPointer: true,
|
29
|
+
shadow: false,
|
30
|
+
borderWidth: 0,
|
31
|
+
borderRadius: 10,
|
32
|
+
style: {
|
33
|
+
fontFamily: typography.font_family_base,
|
34
|
+
color: colors.text_dk_default,
|
35
|
+
fontWeight: typography.regular,
|
36
|
+
fontSize: typography.text_smaller,
|
37
|
+
},
|
38
|
+
},
|
39
|
+
plotOptions: {
|
40
|
+
pie: {
|
41
|
+
dataLabels: {
|
42
|
+
enabled: false,
|
43
|
+
connectorShape: "straight",
|
44
|
+
connectorWidth: 3,
|
45
|
+
format: "<div>{point.name}</div>",
|
46
|
+
style: {
|
47
|
+
fontFamily: typography.font_family_base,
|
48
|
+
fontSize: typography.text_smaller,
|
49
|
+
color: colors.text_lt_light,
|
50
|
+
fontWeight: typography.regular,
|
51
|
+
textOutline: '2px $white',
|
52
|
+
},
|
53
|
+
},
|
54
|
+
innerSize: '50%',
|
55
|
+
borderColor: "",
|
56
|
+
borderWidth: null as number | null,
|
57
|
+
colors: [
|
58
|
+
colors.data_1,
|
59
|
+
colors.data_2,
|
60
|
+
colors.data_3,
|
61
|
+
colors.data_4,
|
62
|
+
colors.data_5,
|
63
|
+
colors.data_6,
|
64
|
+
colors.data_7,
|
65
|
+
],
|
66
|
+
},
|
67
|
+
},
|
68
|
+
legend: {
|
69
|
+
layout: 'horizontal',
|
70
|
+
align: 'center',
|
71
|
+
verticalAlign: 'bottom',
|
72
|
+
itemStyle: {
|
73
|
+
fontFamily: typography.font_family_base,
|
74
|
+
color: colors.text_lt_light,
|
75
|
+
fontWeight: typography.regular,
|
76
|
+
fontSize: typography.text_smaller,
|
77
|
+
},
|
78
|
+
itemHoverStyle: {
|
79
|
+
color: colors.text_lt_default,
|
80
|
+
},
|
81
|
+
itemHiddenStyle: {
|
82
|
+
color: colors.text_lt_lighter,
|
83
|
+
},
|
84
|
+
},
|
85
|
+
credits: { enabled: false }
|
86
|
+
}
|
87
|
+
|
88
|
+
export default pbCircleChartTheme;
|
@@ -0,0 +1 @@
|
|
1
|
+
<%= react_component('PbCircleChart', object.react_props) %>
|
@@ -0,0 +1,28 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
module Playbook
|
4
|
+
module PbPbCircleChart
|
5
|
+
class PbCircleChart < ::Playbook::KitBase
|
6
|
+
prop :options, default: {}
|
7
|
+
prop :container_props, default: {}
|
8
|
+
|
9
|
+
def react_props
|
10
|
+
{
|
11
|
+
options: options,
|
12
|
+
containerProps: container_props_hash,
|
13
|
+
}
|
14
|
+
end
|
15
|
+
|
16
|
+
def container_props_hash
|
17
|
+
container_props.merge({
|
18
|
+
id: id,
|
19
|
+
className: classname,
|
20
|
+
}).compact
|
21
|
+
end
|
22
|
+
|
23
|
+
def classname
|
24
|
+
generate_classname("pb_pb_circle_chart")
|
25
|
+
end
|
26
|
+
end
|
27
|
+
end
|
28
|
+
end
|
@@ -0,0 +1,51 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { render, screen } from '../utilities/test-utils'
|
3
|
+
|
4
|
+
import { PbCircleChart } from 'playbook-ui'
|
5
|
+
|
6
|
+
beforeEach(() => {
|
7
|
+
// Silences error logs within the test suite.
|
8
|
+
jest.spyOn(console, 'error');
|
9
|
+
jest.spyOn(console, 'warn');
|
10
|
+
console.error.mockImplementation(() => {});
|
11
|
+
console.warn.mockImplementation(() => {});
|
12
|
+
});
|
13
|
+
|
14
|
+
afterEach(() => {
|
15
|
+
console.error.mockRestore();
|
16
|
+
console.warn.mockRestore();
|
17
|
+
});
|
18
|
+
|
19
|
+
const chartOptions = {
|
20
|
+
series: [
|
21
|
+
{
|
22
|
+
data: [
|
23
|
+
{
|
24
|
+
name: "Waiting for Calls",
|
25
|
+
y: 41,
|
26
|
+
},
|
27
|
+
{
|
28
|
+
name: "On Call",
|
29
|
+
y: 49,
|
30
|
+
},
|
31
|
+
{
|
32
|
+
name: "After Call",
|
33
|
+
y: 10,
|
34
|
+
},
|
35
|
+
],
|
36
|
+
},
|
37
|
+
],
|
38
|
+
};
|
39
|
+
|
40
|
+
const testId = 'pbcirclechart1';
|
41
|
+
|
42
|
+
test('Kit to exist', () => {
|
43
|
+
render(
|
44
|
+
<PbCircleChart
|
45
|
+
data={{testid: testId}}
|
46
|
+
options={chartOptions}
|
47
|
+
/>
|
48
|
+
)
|
49
|
+
expect(screen.getByTestId(testId)).toBeInTheDocument()
|
50
|
+
})
|
51
|
+
|