playbook_ui 14.22.0.pre.alpha.PLAY22578709 → 14.22.0.pre.alpha.PLAY22958842
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_badge/_badge.scss +5 -6
- 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 +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_circle_chart/circleChartTheme.ts +36 -1
- 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_draggable/context/index.tsx +4 -12
- data/app/pb_kits/playbook/pb_draggable/context/types.ts +2 -5
- 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_tooltip/index.js +59 -36
- data/app/pb_kits/playbook/pb_tooltip/tooltip.rb +9 -2
- data/dist/chunks/_circle_chart-BjcInQNv.js +1 -0
- data/dist/chunks/{_typeahead-BZsshVoi.js → _typeahead-CuwY9iVi.js} +3 -3
- data/dist/chunks/{_weekday_stacked-DO4S-plL.js → _weekday_stacked-C3EeTZ8D.js} +1 -1
- data/dist/chunks/{lib-Carqm8Ip.js → lib-DYpq0k8j.js} +1 -1
- data/dist/chunks/{pb_form_validation-DqRmTS8m.js → pb_form_validation-BUOKwfvW.js} +1 -1
- data/dist/chunks/vendor.js +1 -1
- data/dist/menu.yml +68 -8
- data/dist/playbook-doc.js +1 -1
- 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 +15 -14
- 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_tooltip/docs/{_tooltip_click_open.md → _tooltip_click_open_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.PLAY22958842
|
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-07 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: actionpack
|
@@ -518,19 +518,19 @@ files:
|
|
518
518
|
- app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx
|
519
519
|
- app/pb_kits/playbook/pb_bar_graph/barGraph.test.js
|
520
520
|
- app/pb_kits/playbook/pb_bar_graph/barGraphSettings.js
|
521
|
+
- app/pb_kits/playbook/pb_bar_graph/barGraphTheme.ts
|
521
522
|
- app/pb_kits/playbook/pb_bar_graph/bar_graph.html.erb
|
522
523
|
- app/pb_kits/playbook/pb_bar_graph/bar_graph.rb
|
523
524
|
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.html.erb
|
524
525
|
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.jsx
|
525
526
|
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.md
|
526
|
-
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx
|
527
|
-
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.md
|
528
527
|
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom_rails.html.erb
|
529
528
|
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom_rails.md
|
530
529
|
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_default.html.erb
|
531
530
|
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_default.jsx
|
532
531
|
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.html.erb
|
533
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
|
534
534
|
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_horizontal.html.erb
|
535
535
|
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_horizontal.jsx
|
536
536
|
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend.html.erb
|
@@ -542,8 +542,6 @@ files:
|
|
542
542
|
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_position.md
|
543
543
|
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_negative_numbers.html.erb
|
544
544
|
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_negative_numbers.jsx
|
545
|
-
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.jsx
|
546
|
-
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.md
|
547
545
|
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.html.erb
|
548
546
|
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.jsx
|
549
547
|
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.md
|
@@ -769,7 +767,8 @@ files:
|
|
769
767
|
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.jsx
|
770
768
|
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.html.erb
|
771
769
|
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.jsx
|
772
|
-
- app/pb_kits/playbook/pb_circle_chart/docs/
|
770
|
+
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors_rails.md
|
771
|
+
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors_react.md
|
773
772
|
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.html.erb
|
774
773
|
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.jsx
|
775
774
|
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.md
|
@@ -781,8 +780,6 @@ files:
|
|
781
780
|
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.jsx
|
782
781
|
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.md
|
783
782
|
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_live_data.jsx
|
784
|
-
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.jsx
|
785
|
-
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.md
|
786
783
|
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.html.erb
|
787
784
|
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.jsx
|
788
785
|
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_labels.html.erb
|
@@ -791,6 +788,7 @@ files:
|
|
791
788
|
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_legend_kit.jsx
|
792
789
|
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_title.html.erb
|
793
790
|
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_title.jsx
|
791
|
+
- app/pb_kits/playbook/pb_circle_chart/docs/_description.md
|
794
792
|
- app/pb_kits/playbook/pb_circle_chart/docs/example.yml
|
795
793
|
- app/pb_kits/playbook/pb_circle_chart/docs/index.js
|
796
794
|
- app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.scss
|
@@ -3341,8 +3339,10 @@ files:
|
|
3341
3339
|
- app/pb_kits/playbook/pb_toggle/toggle.test.js
|
3342
3340
|
- app/pb_kits/playbook/pb_tooltip/_tooltip.scss
|
3343
3341
|
- app/pb_kits/playbook/pb_tooltip/_tooltip.tsx
|
3342
|
+
- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open.html.erb
|
3344
3343
|
- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open.jsx
|
3345
|
-
- app/pb_kits/playbook/pb_tooltip/docs/
|
3344
|
+
- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open_rails.md
|
3345
|
+
- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open_react.md
|
3346
3346
|
- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default.html.erb
|
3347
3347
|
- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default_react.jsx
|
3348
3348
|
- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default_react.md
|
@@ -3618,11 +3618,12 @@ files:
|
|
3618
3618
|
- app/pb_kits/playbook/utilities/test/globalProps/truncate.test.js
|
3619
3619
|
- app/pb_kits/playbook/utilities/text.ts
|
3620
3620
|
- app/pb_kits/playbook/utilities/validEmojiChecker.ts
|
3621
|
-
- dist/chunks/
|
3622
|
-
- dist/chunks/
|
3621
|
+
- dist/chunks/_circle_chart-BjcInQNv.js
|
3622
|
+
- dist/chunks/_typeahead-CuwY9iVi.js
|
3623
|
+
- dist/chunks/_weekday_stacked-C3EeTZ8D.js
|
3623
3624
|
- dist/chunks/lazysizes-B7xYodB-.js
|
3624
|
-
- dist/chunks/lib-
|
3625
|
-
- dist/chunks/pb_form_validation-
|
3625
|
+
- dist/chunks/lib-DYpq0k8j.js
|
3626
|
+
- dist/chunks/pb_form_validation-BUOKwfvW.js
|
3626
3627
|
- dist/chunks/vendor.js
|
3627
3628
|
- dist/menu.yml
|
3628
3629
|
- 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.
|
@@ -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.
|
/data/app/pb_kits/playbook/pb_tooltip/docs/{_tooltip_click_open.md → _tooltip_click_open_react.md}
RENAMED
File without changes
|