playbook_ui 14.22.0.pre.alpha.PLAY22588587 → 14.22.0.pre.alpha.play2261highchartsbargraphimportedstyles8730
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/Components/CustomCell.tsx +6 -7
- data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableState.ts +2 -2
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +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/example.yml +1 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb +2 -2
- data/app/pb_kits/playbook/pb_bar_graph/barGraphTheme.ts +106 -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 +33 -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 +32 -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_table/_table.tsx +4 -4
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_columns.jsx +8 -8
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_columns_react.md +1 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns.jsx +12 -12
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_react.md +3 -3
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_right_columns.jsx +12 -12
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_right_columns_react.md +3 -3
- 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/app/pb_kits/playbook/pb_typeahead/typeahead.rb +3 -0
- data/dist/chunks/_bar_graph-iq9-hk-x.js +1 -0
- data/dist/chunks/{_typeahead-B7FRYVtS.js → _typeahead-DeLOYzLb.js} +3 -3
- data/dist/chunks/_weekday_stacked-bjb7ElwG.js +45 -0
- data/dist/chunks/{lib-Carqm8Ip.js → lib-GtpYwIew.js} +1 -1
- data/dist/chunks/{pb_form_validation-DqRmTS8m.js → pb_form_validation-BCfG-8Zp.js} +1 -1
- data/dist/chunks/vendor.js +1 -1
- 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 +14 -11
- 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/dist/chunks/_weekday_stacked-D1TcPO8F.js +0 -45
- /data/app/pb_kits/playbook/pb_typeahead/docs/{_typeahead_preserve_input.md → _typeahead_preserve_input_react.md} +0 -0
data/lib/playbook/version.rb
CHANGED
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: playbook_ui
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 14.22.0.pre.alpha.
|
4
|
+
version: 14.22.0.pre.alpha.play2261highchartsbargraphimportedstyles8730
|
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-01 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: actionpack
|
@@ -403,6 +403,8 @@ files:
|
|
403
403
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header.jsx
|
404
404
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_rails.md
|
405
405
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_react.md
|
406
|
+
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header.jsx
|
407
|
+
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header.md
|
406
408
|
- app/pb_kits/playbook/pb_advanced_table/docs/_mock_data_inline_loading.js
|
407
409
|
- app/pb_kits/playbook/pb_advanced_table/docs/advanced_table_mock_data.json
|
408
410
|
- app/pb_kits/playbook/pb_advanced_table/docs/advanced_table_mock_data_infinite_scroll.json
|
@@ -516,19 +518,19 @@ files:
|
|
516
518
|
- app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx
|
517
519
|
- app/pb_kits/playbook/pb_bar_graph/barGraph.test.js
|
518
520
|
- app/pb_kits/playbook/pb_bar_graph/barGraphSettings.js
|
521
|
+
- app/pb_kits/playbook/pb_bar_graph/barGraphTheme.ts
|
519
522
|
- app/pb_kits/playbook/pb_bar_graph/bar_graph.html.erb
|
520
523
|
- app/pb_kits/playbook/pb_bar_graph/bar_graph.rb
|
521
524
|
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.html.erb
|
522
525
|
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.jsx
|
523
526
|
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.md
|
524
|
-
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx
|
525
|
-
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.md
|
526
527
|
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom_rails.html.erb
|
527
528
|
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom_rails.md
|
528
529
|
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_default.html.erb
|
529
530
|
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_default.jsx
|
530
531
|
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.html.erb
|
531
532
|
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.jsx
|
533
|
+
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.md
|
532
534
|
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_horizontal.html.erb
|
533
535
|
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_horizontal.jsx
|
534
536
|
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend.html.erb
|
@@ -540,8 +542,6 @@ files:
|
|
540
542
|
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_position.md
|
541
543
|
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_negative_numbers.html.erb
|
542
544
|
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_negative_numbers.jsx
|
543
|
-
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.jsx
|
544
|
-
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.md
|
545
545
|
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.html.erb
|
546
546
|
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.jsx
|
547
547
|
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.md
|
@@ -3406,8 +3406,10 @@ files:
|
|
3406
3406
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_margin_bottom.jsx
|
3407
3407
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_multi_kit.html.erb
|
3408
3408
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_multi_kit.jsx
|
3409
|
+
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input.html.erb
|
3409
3410
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input.jsx
|
3410
|
-
- app/pb_kits/playbook/pb_typeahead/docs/
|
3411
|
+
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input_rails.md
|
3412
|
+
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input_react.md
|
3411
3413
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.jsx
|
3412
3414
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.md
|
3413
3415
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_truncated_text.html.erb
|
@@ -3614,11 +3616,12 @@ files:
|
|
3614
3616
|
- app/pb_kits/playbook/utilities/test/globalProps/truncate.test.js
|
3615
3617
|
- app/pb_kits/playbook/utilities/text.ts
|
3616
3618
|
- app/pb_kits/playbook/utilities/validEmojiChecker.ts
|
3617
|
-
- dist/chunks/
|
3618
|
-
- dist/chunks/
|
3619
|
+
- dist/chunks/_bar_graph-iq9-hk-x.js
|
3620
|
+
- dist/chunks/_typeahead-DeLOYzLb.js
|
3621
|
+
- dist/chunks/_weekday_stacked-bjb7ElwG.js
|
3619
3622
|
- dist/chunks/lazysizes-B7xYodB-.js
|
3620
|
-
- dist/chunks/lib-
|
3621
|
-
- dist/chunks/pb_form_validation-
|
3623
|
+
- dist/chunks/lib-GtpYwIew.js
|
3624
|
+
- dist/chunks/pb_form_validation-BCfG-8Zp.js
|
3622
3625
|
- dist/chunks/vendor.js
|
3623
3626
|
- dist/menu.yml
|
3624
3627
|
- dist/playbook-doc.js
|
@@ -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.
|