playbook_ui 15.0.0.pre.alpha.PLAY236510413 → 15.0.0.pre.alpha.play1986inlineloadingsolidvariant10321
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 -3
- data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.tsx +0 -2
- data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.html.erb +0 -1
- data/app/pb_kits/playbook/pb_collapsible/__snapshots__/collapsible.test.js.snap +0 -1
- data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +4 -48
- data/app/pb_kits/playbook/pb_dialog/_close_icon.tsx +1 -5
- data/app/pb_kits/playbook/pb_dialog/_dialog.tsx +8 -6
- data/app/pb_kits/playbook/pb_dialog/dialog.html.erb +1 -1
- data/app/pb_kits/playbook/pb_dialog/dialogHelper.js +65 -0
- data/app/pb_kits/playbook/pb_dialog/dialog_header.html.erb +2 -2
- data/app/pb_kits/playbook/pb_icon/_icon.tsx +2 -13
- data/app/pb_kits/playbook/pb_icon/icon.rb +1 -9
- data/app/pb_kits/playbook/pb_icon_circle/icon_circle.html.erb +1 -1
- data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +0 -3
- data/app/pb_kits/playbook/pb_text_input/docs/example.yml +0 -3
- data/app/pb_kits/playbook/pb_text_input/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_text_input/text_input.rb +3 -2
- data/app/pb_kits/playbook/pb_text_input/text_input.test.js +0 -38
- data/dist/chunks/{_line_graph-B5Dr0Huy.js → _line_graph-CApw7aQD.js} +1 -1
- data/dist/chunks/_typeahead-J1_avqdO.js +6 -0
- data/dist/chunks/{_weekday_stacked-DjQv3Sok.js → _weekday_stacked-BvW0QnF8.js} +2 -2
- data/dist/chunks/{lib-BTs5acfO.js → lib-CY5ZPzic.js} +1 -1
- data/dist/chunks/{pb_form_validation-CKkaQFX3.js → pb_form_validation-D3b0JKHH.js} +1 -1
- data/dist/chunks/vendor.js +1 -1
- data/dist/menu.yml +0 -6
- 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/version.rb +1 -1
- metadata +8 -42
- data/app/pb_kits/playbook/pb_pb_circle_chart/_pb_circle_chart.scss +0 -3
- data/app/pb_kits/playbook/pb_pb_circle_chart/_pb_circle_chart.tsx +0 -62
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_block_content.html.erb +0 -31
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_block_content.jsx +0 -81
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.html.erb +0 -25
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.jsx +0 -40
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.md +0 -5
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_custom_tooltip.html.erb +0 -27
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_custom_tooltip.jsx +0 -39
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_custom_tooltip.md +0 -5
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_legend_position.html.erb +0 -93
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_legend_position.jsx +0 -131
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_legend_position.md +0 -14
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_labels.html.erb +0 -42
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_labels.jsx +0 -58
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_legend.html.erb +0 -24
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_legend.jsx +0 -38
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_default.html.erb +0 -22
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_default.jsx +0 -33
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_inner_sizes.html.erb +0 -118
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_inner_sizes.jsx +0 -144
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_live_data.jsx +0 -60
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_rounded.html.erb +0 -24
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_rounded.jsx +0 -42
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_with_title.html.erb +0 -38
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_with_title.jsx +0 -52
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/example.yml +0 -29
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/index.js +0 -11
- data/app/pb_kits/playbook/pb_pb_circle_chart/pbCircleChartTheme.ts +0 -88
- data/app/pb_kits/playbook/pb_pb_circle_chart/pb_circle_chart.html.erb +0 -1
- data/app/pb_kits/playbook/pb_pb_circle_chart/pb_circle_chart.rb +0 -28
- data/app/pb_kits/playbook/pb_pb_circle_chart/pb_circle_chart.test.jsx +0 -51
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_autocomplete.html.erb +0 -41
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_autocomplete.jsx +0 -80
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_autocomplete.md +0 -1
- data/dist/chunks/_typeahead-GbjDoSSQ.js +0 -6
data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_labels.html.erb
DELETED
@@ -1,42 +0,0 @@
|
|
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
|
-
<% chart_options = {
|
32
|
-
series: [{ data: data }],
|
33
|
-
plotOptions: {
|
34
|
-
pie: {
|
35
|
-
dataLabels: {
|
36
|
-
enabled: true,
|
37
|
-
},
|
38
|
-
},
|
39
|
-
},
|
40
|
-
} %>
|
41
|
-
|
42
|
-
<%= pb_rails("pb_circle_chart", props: { options: chart_options }) %>
|
@@ -1,58 +0,0 @@
|
|
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 PbCircleChartDataWithLabels = (props) => {
|
37
|
-
const chartOptions = {
|
38
|
-
series: [{ data: data }],
|
39
|
-
plotOptions: {
|
40
|
-
pie: {
|
41
|
-
dataLabels: {
|
42
|
-
enabled: true,
|
43
|
-
},
|
44
|
-
},
|
45
|
-
},
|
46
|
-
};
|
47
|
-
|
48
|
-
return (
|
49
|
-
<div>
|
50
|
-
<PbCircleChart
|
51
|
-
options={chartOptions}
|
52
|
-
{...props}
|
53
|
-
/>
|
54
|
-
</div>
|
55
|
-
);
|
56
|
-
}
|
57
|
-
|
58
|
-
export default PbCircleChartDataWithLabels;
|
data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_legend.html.erb
DELETED
@@ -1,24 +0,0 @@
|
|
1
|
-
<% data = [
|
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
|
-
<% chart_options = {
|
16
|
-
series: [{ data: data }],
|
17
|
-
plotOptions: {
|
18
|
-
pie: {
|
19
|
-
showInLegend: true,
|
20
|
-
},
|
21
|
-
},
|
22
|
-
} %>
|
23
|
-
|
24
|
-
<%= pb_rails("pb_circle_chart", props: { options: chart_options }) %>
|
@@ -1,38 +0,0 @@
|
|
1
|
-
import React from "react";
|
2
|
-
import { PbCircleChart } from "playbook-ui";
|
3
|
-
|
4
|
-
const data = [{
|
5
|
-
name: 'Bugs',
|
6
|
-
y: 8,
|
7
|
-
},
|
8
|
-
{
|
9
|
-
name: 'Chores',
|
10
|
-
y: 1,
|
11
|
-
},
|
12
|
-
{
|
13
|
-
name: 'Stories',
|
14
|
-
y: 12,
|
15
|
-
}]
|
16
|
-
|
17
|
-
|
18
|
-
const PbCircleChartDataWithLegend = (props) => {
|
19
|
-
const chartOptions = {
|
20
|
-
series: [{ data: data }],
|
21
|
-
plotOptions: {
|
22
|
-
pie: {
|
23
|
-
showInLegend: true,
|
24
|
-
},
|
25
|
-
},
|
26
|
-
};
|
27
|
-
|
28
|
-
return (
|
29
|
-
<div>
|
30
|
-
<PbCircleChart
|
31
|
-
options={chartOptions}
|
32
|
-
{...props}
|
33
|
-
/>
|
34
|
-
</div>
|
35
|
-
);
|
36
|
-
}
|
37
|
-
|
38
|
-
export default PbCircleChartDataWithLegend;
|
@@ -1,22 +0,0 @@
|
|
1
|
-
<% chart_options = {
|
2
|
-
series: [
|
3
|
-
{
|
4
|
-
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
|
-
} %>
|
21
|
-
|
22
|
-
<%= pb_rails("pb_circle_chart", props: { options: chart_options }) %>
|
@@ -1,33 +0,0 @@
|
|
1
|
-
import React from "react";
|
2
|
-
import { PbCircleChart } from "playbook-ui";
|
3
|
-
|
4
|
-
const chartOptions = {
|
5
|
-
series: [
|
6
|
-
{
|
7
|
-
data: [
|
8
|
-
{
|
9
|
-
name: "Waiting for Calls",
|
10
|
-
y: 41,
|
11
|
-
},
|
12
|
-
{
|
13
|
-
name: "On Call",
|
14
|
-
y: 49,
|
15
|
-
},
|
16
|
-
{
|
17
|
-
name: "After Call",
|
18
|
-
y: 10,
|
19
|
-
},
|
20
|
-
],
|
21
|
-
},
|
22
|
-
],
|
23
|
-
};
|
24
|
-
const PbCircleChartDefault = (props) => (
|
25
|
-
<div>
|
26
|
-
<PbCircleChart
|
27
|
-
options={chartOptions}
|
28
|
-
{...props}
|
29
|
-
/>
|
30
|
-
</div>
|
31
|
-
);
|
32
|
-
|
33
|
-
export default PbCircleChartDefault;
|
@@ -1,118 +0,0 @@
|
|
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 }) %>
|
@@ -1,144 +0,0 @@
|
|
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;
|
@@ -1,60 +0,0 @@
|
|
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;
|
@@ -1,24 +0,0 @@
|
|
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 }) %>
|
@@ -1,42 +0,0 @@
|
|
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;
|
@@ -1,38 +0,0 @@
|
|
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 }) %>
|
@@ -1,52 +0,0 @@
|
|
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;
|