playbook_ui_docs 14.22.0.pre.alpha.PLAY2256stickydataidreact8523 → 14.22.0.pre.alpha.PLAY2281atcustomheaderrails8968

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 (65) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_sort.jsx +65 -0
  3. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_sort.md +5 -0
  4. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header.jsx +69 -0
  5. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header.md +1 -0
  6. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header_rails.html.erb +51 -0
  7. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header_rails.md +1 -0
  8. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +12 -8
  9. data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +2 -0
  10. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.jsx +33 -15
  11. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_default.jsx +33 -15
  12. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.jsx +52 -22
  13. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.md +3 -0
  14. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_horizontal.jsx +12 -16
  15. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend.jsx +31 -15
  16. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_non_clickable.jsx +39 -16
  17. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_position.jsx +86 -38
  18. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_negative_numbers.jsx +32 -15
  19. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.jsx +72 -22
  20. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.md +1 -1
  21. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_spline.jsx +31 -15
  22. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_stacked.jsx +37 -16
  23. data/app/pb_kits/playbook/pb_bar_graph/docs/_description.md +1 -3
  24. data/app/pb_kits/playbook/pb_bar_graph/docs/example.yml +1 -3
  25. data/app/pb_kits/playbook/pb_bar_graph/docs/index.js +0 -2
  26. data/app/pb_kits/playbook/pb_body/docs/_body_truncate.jsx +3 -3
  27. data/app/pb_kits/playbook/pb_body/docs/_body_truncate_react.md +4 -0
  28. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.jsx +71 -26
  29. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.jsx +29 -16
  30. data/app/pb_kits/playbook/pb_circle_chart/docs/{_circle_chart_colors.md → _circle_chart_colors_rails.md} +1 -1
  31. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors_react.md +2 -0
  32. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.jsx +28 -16
  33. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.md +4 -2
  34. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.jsx +23 -15
  35. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_inner_sizes.jsx +81 -51
  36. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.jsx +103 -75
  37. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.md +3 -6
  38. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_live_data.jsx +19 -13
  39. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.jsx +30 -17
  40. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_labels.jsx +34 -20
  41. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_legend_kit.jsx +29 -20
  42. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_title.jsx +28 -20
  43. data/app/pb_kits/playbook/pb_circle_chart/docs/_description.md +1 -0
  44. data/app/pb_kits/playbook/pb_circle_chart/docs/example.yml +0 -1
  45. data/app/pb_kits/playbook/pb_circle_chart/docs/index.js +0 -1
  46. data/app/pb_kits/playbook/pb_title/docs/_title_truncate.jsx +3 -3
  47. data/app/pb_kits/playbook/pb_title/docs/_title_truncate_react.md +4 -0
  48. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open.html.erb +14 -0
  49. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open_rails.md +1 -0
  50. data/app/pb_kits/playbook/pb_tooltip/docs/example.yml +1 -0
  51. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input.html.erb +18 -0
  52. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input_rails.md +1 -0
  53. data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +1 -0
  54. data/dist/playbook-doc.js +2 -2
  55. metadata +22 -13
  56. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx +0 -72
  57. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.md +0 -6
  58. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.jsx +0 -64
  59. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.md +0 -1
  60. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.jsx +0 -38
  61. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.md +0 -1
  62. /data/app/pb_kits/playbook/pb_body/docs/{_body_truncate.md → _body_truncate_rails.md} +0 -0
  63. /data/app/pb_kits/playbook/pb_title/docs/{_title_truncate.md → _title_truncate_rails.md} +0 -0
  64. /data/app/pb_kits/playbook/pb_tooltip/docs/{_tooltip_click_open.md → _tooltip_click_open_react.md} +0 -0
  65. /data/app/pb_kits/playbook/pb_typeahead/docs/{_typeahead_preserve_input.md → _typeahead_preserve_input_react.md} +0 -0
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: playbook_ui_docs
3
3
  version: !ruby/object:Gem::Version
4
- version: 14.22.0.pre.alpha.PLAY2256stickydataidreact8523
4
+ version: 14.22.0.pre.alpha.PLAY2281atcustomheaderrails8968
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: 2025-06-20 00:00:00.000000000 Z
12
+ date: 2025-07-15 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: playbook_ui
@@ -74,6 +74,8 @@ files:
74
74
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell.md
75
75
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell_rails.html.erb
76
76
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell_rails.md
77
+ - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_sort.jsx
78
+ - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_sort.md
77
79
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.jsx
78
80
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.md
79
81
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expand_by_depth.jsx
@@ -147,6 +149,10 @@ files:
147
149
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header.jsx
148
150
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_rails.md
149
151
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_react.md
152
+ - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header.jsx
153
+ - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header.md
154
+ - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header_rails.html.erb
155
+ - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header_rails.md
150
156
  - app/pb_kits/playbook/pb_advanced_table/docs/_mock_data_inline_loading.js
151
157
  - app/pb_kits/playbook/pb_advanced_table/docs/advanced_table_mock_data.json
152
158
  - app/pb_kits/playbook/pb_advanced_table/docs/advanced_table_mock_data_infinite_scroll.json
@@ -226,14 +232,13 @@ files:
226
232
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.html.erb
227
233
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.jsx
228
234
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.md
229
- - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx
230
- - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.md
231
235
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom_rails.html.erb
232
236
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom_rails.md
233
237
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_default.html.erb
234
238
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_default.jsx
235
239
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.html.erb
236
240
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.jsx
241
+ - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.md
237
242
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_horizontal.html.erb
238
243
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_horizontal.jsx
239
244
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend.html.erb
@@ -245,8 +250,6 @@ files:
245
250
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_position.md
246
251
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_negative_numbers.html.erb
247
252
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_negative_numbers.jsx
248
- - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.jsx
249
- - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.md
250
253
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.html.erb
251
254
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.jsx
252
255
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.md
@@ -272,7 +275,8 @@ files:
272
275
  - app/pb_kits/playbook/pb_body/docs/_body_styled.md
273
276
  - app/pb_kits/playbook/pb_body/docs/_body_truncate.html.erb
274
277
  - app/pb_kits/playbook/pb_body/docs/_body_truncate.jsx
275
- - app/pb_kits/playbook/pb_body/docs/_body_truncate.md
278
+ - app/pb_kits/playbook/pb_body/docs/_body_truncate_rails.md
279
+ - app/pb_kits/playbook/pb_body/docs/_body_truncate_react.md
276
280
  - app/pb_kits/playbook/pb_body/docs/_description.md
277
281
  - app/pb_kits/playbook/pb_body/docs/_footer.md
278
282
  - app/pb_kits/playbook/pb_body/docs/example.yml
@@ -417,7 +421,8 @@ files:
417
421
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.jsx
418
422
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.html.erb
419
423
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.jsx
420
- - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.md
424
+ - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors_rails.md
425
+ - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors_react.md
421
426
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.html.erb
422
427
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.jsx
423
428
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.md
@@ -429,8 +434,6 @@ files:
429
434
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.jsx
430
435
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.md
431
436
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_live_data.jsx
432
- - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.jsx
433
- - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.md
434
437
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.html.erb
435
438
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.jsx
436
439
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_labels.html.erb
@@ -439,6 +442,7 @@ files:
439
442
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_legend_kit.jsx
440
443
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_title.html.erb
441
444
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_title.jsx
445
+ - app/pb_kits/playbook/pb_circle_chart/docs/_description.md
442
446
  - app/pb_kits/playbook/pb_circle_chart/docs/example.yml
443
447
  - app/pb_kits/playbook/pb_circle_chart/docs/index.js
444
448
  - app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_click.jsx
@@ -2244,7 +2248,8 @@ files:
2244
2248
  - app/pb_kits/playbook/pb_title/docs/_title_responsive.md
2245
2249
  - app/pb_kits/playbook/pb_title/docs/_title_truncate.html.erb
2246
2250
  - app/pb_kits/playbook/pb_title/docs/_title_truncate.jsx
2247
- - app/pb_kits/playbook/pb_title/docs/_title_truncate.md
2251
+ - app/pb_kits/playbook/pb_title/docs/_title_truncate_rails.md
2252
+ - app/pb_kits/playbook/pb_title/docs/_title_truncate_react.md
2248
2253
  - app/pb_kits/playbook/pb_title/docs/example.yml
2249
2254
  - app/pb_kits/playbook/pb_title/docs/index.js
2250
2255
  - app/pb_kits/playbook/pb_title_count/docs/_description.md
@@ -2281,8 +2286,10 @@ files:
2281
2286
  - app/pb_kits/playbook/pb_toggle/docs/_toggle_props_swift.md
2282
2287
  - app/pb_kits/playbook/pb_toggle/docs/example.yml
2283
2288
  - app/pb_kits/playbook/pb_toggle/docs/index.js
2289
+ - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open.html.erb
2284
2290
  - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open.jsx
2285
- - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open.md
2291
+ - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open_rails.md
2292
+ - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open_react.md
2286
2293
  - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default.html.erb
2287
2294
  - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default_react.jsx
2288
2295
  - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default_react.md
@@ -2332,8 +2339,10 @@ files:
2332
2339
  - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_margin_bottom.jsx
2333
2340
  - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_multi_kit.html.erb
2334
2341
  - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_multi_kit.jsx
2342
+ - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input.html.erb
2335
2343
  - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input.jsx
2336
- - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input.md
2344
+ - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input_rails.md
2345
+ - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input_react.md
2337
2346
  - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.jsx
2338
2347
  - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.md
2339
2348
  - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_truncated_text.html.erb
@@ -1,72 +0,0 @@
1
- import React from 'react'
2
- import ReactDOMServer from 'react-dom/server'
3
- import BarGraph from '../_bar_graph'
4
- import Icon from '../../pb_icon/_icon'
5
-
6
- const chartData = [
7
- {
8
- name: 'Role',
9
- data: [0, 200, 300, 654, 656],
10
- },
11
- {
12
- name: 'Company',
13
- data: [150, 524, 320, 440, 500],
14
- },
15
- ]
16
-
17
- const renderIcon = (iconName, color) => {
18
- return ReactDOMServer.renderToStaticMarkup(
19
- <Icon
20
- color={color}
21
- icon={iconName}
22
- />)
23
- };
24
-
25
- const barGraphOptions = {
26
- yAxis: {
27
- tickInterval: 5,
28
- },
29
- xAxis: {
30
- categories: ['1', '2', '3', '4', '5'],
31
- labels: {
32
- useHTML: true,
33
- formatter: function () {
34
- switch (this.value) {
35
- case '1':
36
- return `${renderIcon('frown', 'error')}`;
37
- case '2':
38
- return `${renderIcon('frown', 'warning')}`;
39
- case '3':
40
- return `${renderIcon('frown-open', 'neutral')}`;
41
- case '4':
42
- return `${renderIcon('smile', 'category_7')}`;
43
- case '5':
44
- return `${renderIcon('smile-beam', 'success')}`;
45
- default:
46
- return ''
47
- }
48
- },
49
- style: {
50
- fontSize: '1.4em',
51
- },
52
- y: 42,
53
- },
54
- },
55
- legend: {
56
- itemMarginTop: 62,
57
- },
58
- }
59
-
60
- const BarGraphCustom = () => (
61
- <div>
62
- <BarGraph
63
- chartData={chartData}
64
- customOptions={barGraphOptions}
65
- id="happiness-dashboard"
66
- legend
67
- title="Bar Graph with Custom Overrides"
68
- />
69
- </div>
70
- )
71
-
72
- export default BarGraphCustom
@@ -1,6 +0,0 @@
1
- The `customOptions` prop provides comprehensive access to additional [Highcharts options](https://api.highcharts.com/highcharts/) that are not explicitly defined as props.
2
- It's important to note that certain options may require specific script imports to function properly.
3
-
4
- Note: If you are having trouble getting any Highcharts options to work, please match the formatting of our [staticOptions](https://github.com/powerhome/playbook/blob/master/playbook/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx#L85-L141). For example, `yAxis` will need to be wrapped with square brackets.
5
-
6
- You may also need to override any of the [defaults](https://github.com/powerhome/playbook/blob/master/playbook/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx#L45-L73) in order to get that options to work.
@@ -1,64 +0,0 @@
1
- import React from 'react'
2
- import Highcharts from "highcharts";
3
- import HighchartsReact from "highcharts-react-official";
4
-
5
- import "../BarGraphStyles.scss";
6
- // Your path might look more like this
7
- //import "playbook-ui/dist/pb_bar_graph/BarGraphStyles.scss";
8
-
9
- const columnChartData = [
10
- {
11
- name: "Installation",
12
- data: [1475, 200, 3000, 654, 656],
13
- },
14
- {
15
- name: "Manufacturing",
16
- data: [4434, 524, 2320, 440, 500],
17
- },
18
- {
19
- name: "Sales & Distribution",
20
- data: [3387, 743, 1344, 434, 440],
21
- },
22
- {
23
- name: "Project Development",
24
- data: [3227, 878, 999, 780, 1000],
25
- },
26
- {
27
- name: "Other",
28
- data: [1111, 677, 3245, 500, 200],
29
- },
30
- ];
31
-
32
- const columnOptions = {
33
- chart: {
34
- type: "column",
35
- },
36
- series: columnChartData,
37
- title: {
38
- text: "Solar Employment Growth by Sector, 2010-2016",
39
- },
40
- subtitle: {
41
- text: "Source: thesolarfoundation.com",
42
- },
43
- xAxis: {
44
- categories: ["Jan", "Feb", "Mar", "Apr", "May"],
45
- },
46
- yAxis: {
47
- min: 0,
48
- title: {
49
- text: "Number of Employees",
50
- },
51
- },
52
- legend: { enabled: false },
53
- credits: { enabled: false },
54
- };
55
-
56
- const BarGraphPbStyles = () => (
57
- <div>
58
- <HighchartsReact highcharts={Highcharts}
59
- options={columnOptions}
60
- />
61
- </div>
62
- )
63
-
64
- export default BarGraphPbStyles
@@ -1 +0,0 @@
1
- You don't need to use the bar graph kit to apply the styles to your Highcharts bar graph. Just import the BarGraphStyles.scss to your component and the styles will apply automatically.
@@ -1,38 +0,0 @@
1
- import React from 'react'
2
- import circleChartTheme from '../circleChartTheme'
3
- import Highcharts from "highcharts"
4
- import HighchartsReact from "highcharts-react-official"
5
-
6
- const data = [
7
- {
8
- name: 'Waiting for Calls',
9
- y: 41,
10
- },
11
- {
12
- name: 'On Call',
13
- y: 49,
14
- },
15
- {
16
- name: 'After Call',
17
- y: 10,
18
- },
19
- ]
20
-
21
- const baseOptions = {
22
- series: [{ data: data }],
23
- }
24
-
25
- const CircleChartPbStyles = () => {
26
- const options = Highcharts.merge({}, circleChartTheme, baseOptions )
27
-
28
- return (
29
- <div>
30
- <HighchartsReact
31
- highcharts={Highcharts}
32
- options={options}
33
- />
34
- </div>
35
- );
36
- };
37
-
38
- export default CircleChartPbStyles;
@@ -1 +0,0 @@
1
- You don't need to use the Circle Chart Kit to apply Playbook styles to your Highcharts circle chart. Just import circleChartTheme.ts and merge it with your chart options—Playbook’s styling will apply automatically.