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.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_sort.jsx +65 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_sort.md +5 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header.jsx +69 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header.md +1 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header_rails.html.erb +51 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header_rails.md +1 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +12 -8
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.jsx +33 -15
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_default.jsx +33 -15
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.jsx +52 -22
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.md +3 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_horizontal.jsx +12 -16
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend.jsx +31 -15
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_non_clickable.jsx +39 -16
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_position.jsx +86 -38
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_negative_numbers.jsx +32 -15
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.jsx +72 -22
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.md +1 -1
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_spline.jsx +31 -15
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_stacked.jsx +37 -16
- data/app/pb_kits/playbook/pb_bar_graph/docs/_description.md +1 -3
- data/app/pb_kits/playbook/pb_bar_graph/docs/example.yml +1 -3
- data/app/pb_kits/playbook/pb_bar_graph/docs/index.js +0 -2
- data/app/pb_kits/playbook/pb_body/docs/_body_truncate.jsx +3 -3
- data/app/pb_kits/playbook/pb_body/docs/_body_truncate_react.md +4 -0
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.jsx +71 -26
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.jsx +29 -16
- data/app/pb_kits/playbook/pb_circle_chart/docs/{_circle_chart_colors.md → _circle_chart_colors_rails.md} +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors_react.md +2 -0
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.jsx +28 -16
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.md +4 -2
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.jsx +23 -15
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_inner_sizes.jsx +81 -51
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.jsx +103 -75
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.md +3 -6
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_live_data.jsx +19 -13
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.jsx +30 -17
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_labels.jsx +34 -20
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_legend_kit.jsx +29 -20
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_title.jsx +28 -20
- data/app/pb_kits/playbook/pb_circle_chart/docs/_description.md +1 -0
- data/app/pb_kits/playbook/pb_circle_chart/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_title/docs/_title_truncate.jsx +3 -3
- data/app/pb_kits/playbook/pb_title/docs/_title_truncate_react.md +4 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open.html.erb +14 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open_rails.md +1 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input.html.erb +18 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input_rails.md +1 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +1 -0
- data/dist/playbook-doc.js +2 -2
- metadata +22 -13
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx +0 -72
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.md +0 -6
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.jsx +0 -64
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.md +0 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.jsx +0 -38
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.md +0 -1
- /data/app/pb_kits/playbook/pb_body/docs/{_body_truncate.md → _body_truncate_rails.md} +0 -0
- /data/app/pb_kits/playbook/pb_title/docs/{_title_truncate.md → _title_truncate_rails.md} +0 -0
- /data/app/pb_kits/playbook/pb_tooltip/docs/{_tooltip_click_open.md → _tooltip_click_open_react.md} +0 -0
- /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.
|
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-
|
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/
|
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/
|
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/
|
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/
|
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/
|
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.
|
File without changes
|
File without changes
|
/data/app/pb_kits/playbook/pb_tooltip/docs/{_tooltip_click_open.md → _tooltip_click_open_react.md}
RENAMED
File without changes
|
File without changes
|