playbook_ui_docs 15.0.0.pre.alpha.stimulusbutton10763 → 15.0.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.
Files changed (130) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_vertical_border.jsx +2 -2
  3. data/app/pb_kits/playbook/pb_bar_graph/docs/example.yml +1 -0
  4. data/app/pb_kits/playbook/pb_button/docs/example.yml +0 -2
  5. data/app/pb_kits/playbook/pb_card/docs/_card_highlight.html.erb +0 -3
  6. data/app/pb_kits/playbook/pb_card/docs/_card_highlight.jsx +0 -8
  7. data/app/pb_kits/playbook/pb_contact/docs/_contact_default.html.erb +1 -16
  8. data/app/pb_kits/playbook/pb_contact/docs/_contact_default.jsx +0 -15
  9. data/app/pb_kits/playbook/pb_contact/docs/_contact_with_detail.html.erb +0 -6
  10. data/app/pb_kits/playbook/pb_contact/docs/_contact_with_detail.jsx +0 -6
  11. data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +0 -1
  12. data/app/pb_kits/playbook/pb_loading_inline/docs/example.yml +0 -2
  13. data/app/pb_kits/playbook/pb_loading_inline/docs/index.js +0 -1
  14. data/app/pb_kits/playbook/pb_nav/docs/example.yml +0 -2
  15. data/app/pb_kits/playbook/pb_nav/docs/index.js +1 -2
  16. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_breached.html.erb +3 -3
  17. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_common.html.erb +3 -3
  18. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_confirmation.html.erb +3 -3
  19. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_meter_settings.html.erb +3 -3
  20. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_strength_change.html.erb +3 -3
  21. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.html.erb +2 -2
  22. data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_children.html.erb +0 -23
  23. data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_children.jsx +7 -45
  24. data/app/pb_kits/playbook/pb_text_input/docs/example.yml +0 -3
  25. data/app/pb_kits/playbook/pb_text_input/docs/index.js +0 -1
  26. data/app/pb_kits/playbook/pb_timestamp/docs/_time_stamp_default.md +1 -0
  27. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align.html.erb +10 -0
  28. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align.jsx +9 -0
  29. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.html.erb +17 -3
  30. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.jsx +15 -0
  31. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.html.erb +2 -0
  32. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.jsx +2 -0
  33. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.html.erb +14 -0
  34. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.jsx +14 -0
  35. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_unstyled.html.erb +4 -0
  36. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_unstyled.jsx +4 -0
  37. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated.jsx +1 -0
  38. data/app/pb_kits/playbook/pb_timestamp/docs/example.yml +6 -18
  39. data/app/pb_kits/playbook/pb_timestamp/docs/index.js +0 -6
  40. data/dist/playbook-doc.js +2 -2
  41. metadata +3 -91
  42. data/app/pb_kits/playbook/pb_button/docs/_button_managed_disabled.html.erb +0 -29
  43. data/app/pb_kits/playbook/pb_button/docs/_button_managed_disabled.md +0 -5
  44. data/app/pb_kits/playbook/pb_button/docs/_button_managed_disabled_helper.html.erb +0 -18
  45. data/app/pb_kits/playbook/pb_button/docs/_button_managed_disabled_helper.md +0 -5
  46. data/app/pb_kits/playbook/pb_contact/docs/_contact_default.md +0 -5
  47. data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_variant.html.erb +0 -5
  48. data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_variant.jsx +0 -24
  49. data/app/pb_kits/playbook/pb_nav/docs/_horizontal_nav_extendedunderline.html.erb +0 -6
  50. data/app/pb_kits/playbook/pb_nav/docs/_horizontal_nav_extendedunderline.jsx +0 -39
  51. data/app/pb_kits/playbook/pb_nav/docs/_horizontal_nav_extendedunderline.md +0 -1
  52. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors.html.erb +0 -35
  53. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors.jsx +0 -49
  54. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors_rails.md +0 -1
  55. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors_react.md +0 -2
  56. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_default.html.erb +0 -38
  57. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_default.jsx +0 -51
  58. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_height.html.erb +0 -46
  59. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_height.jsx +0 -62
  60. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_height.md +0 -3
  61. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_horizontal.html.erb +0 -47
  62. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_horizontal.jsx +0 -60
  63. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend.html.erb +0 -25
  64. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend.jsx +0 -36
  65. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_non_clickable.jsx +0 -44
  66. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_position.html.erb +0 -100
  67. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_position.jsx +0 -126
  68. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_negative_numbers.html.erb +0 -32
  69. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_negative_numbers.jsx +0 -48
  70. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_secondary_y_axis.html.erb +0 -68
  71. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_secondary_y_axis.jsx +0 -81
  72. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_spline.html.erb +0 -31
  73. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_spline.jsx +0 -42
  74. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_spline.md +0 -2
  75. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_stacked.html.erb +0 -35
  76. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_stacked.jsx +0 -51
  77. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/example.yml +0 -27
  78. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/index.js +0 -11
  79. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_block_content.html.erb +0 -31
  80. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_block_content.jsx +0 -81
  81. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.html.erb +0 -25
  82. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.jsx +0 -40
  83. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.md +0 -5
  84. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_custom_tooltip.html.erb +0 -27
  85. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_custom_tooltip.jsx +0 -39
  86. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_custom_tooltip.md +0 -5
  87. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_legend_position.html.erb +0 -93
  88. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_legend_position.jsx +0 -131
  89. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_legend_position.md +0 -14
  90. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_labels.html.erb +0 -42
  91. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_labels.jsx +0 -58
  92. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_legend.html.erb +0 -24
  93. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_legend.jsx +0 -38
  94. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_default.html.erb +0 -22
  95. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_default.jsx +0 -33
  96. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_inner_sizes.html.erb +0 -118
  97. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_inner_sizes.jsx +0 -144
  98. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_live_data.jsx +0 -60
  99. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_rounded.html.erb +0 -24
  100. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_rounded.jsx +0 -42
  101. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_with_title.html.erb +0 -38
  102. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_with_title.jsx +0 -52
  103. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/example.yml +0 -29
  104. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/index.js +0 -11
  105. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_autocomplete.html.erb +0 -41
  106. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_autocomplete.jsx +0 -80
  107. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_autocomplete.md +0 -1
  108. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align.md +0 -1
  109. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.md +0 -1
  110. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.md +0 -5
  111. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_current_year.html.erb +0 -12
  112. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_current_year.jsx +0 -25
  113. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_current_year.md +0 -1
  114. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_date.html.erb +0 -4
  115. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_date.jsx +0 -17
  116. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_date.md +0 -1
  117. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_time.html.erb +0 -18
  118. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_time.jsx +0 -44
  119. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_time.md +0 -1
  120. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.md +0 -1
  121. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated.md +0 -5
  122. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_current_year.html.erb +0 -16
  123. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_current_year.jsx +0 -30
  124. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_current_year.md +0 -1
  125. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_date.html.erb +0 -16
  126. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_date.jsx +0 -30
  127. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_date.md +0 -1
  128. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_time.html.erb +0 -26
  129. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_time.jsx +0 -41
  130. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_time.md +0 -1
@@ -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;
@@ -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;