playbook_ui 14.23.0.pre.rc.1 → 14.23.0.pre.rc.3
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/example.yml +7 -6
- 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_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/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 +12 -4
- data/app/pb_kits/playbook/pb_draggable/context/types.ts +5 -2
- data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +27 -17
- 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_tooltip/index.js +59 -36
- data/app/pb_kits/playbook/pb_tooltip/tooltip.rb +9 -2
- data/dist/chunks/_circle_chart-BZmlhBs2.js +1 -0
- data/dist/chunks/{_typeahead-B7FRYVtS.js → _typeahead-B1tu_vWi.js} +3 -3
- data/dist/chunks/{_weekday_stacked-ClwpVoVy.js → _weekday_stacked-CKk0dR5s.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 +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 +19 -16
- 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/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.23.0.pre.rc.
|
4
|
+
version: 14.23.0.pre.rc.3
|
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-14 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
|
@@ -575,7 +573,8 @@ files:
|
|
575
573
|
- app/pb_kits/playbook/pb_body/docs/_body_styled.md
|
576
574
|
- app/pb_kits/playbook/pb_body/docs/_body_truncate.html.erb
|
577
575
|
- app/pb_kits/playbook/pb_body/docs/_body_truncate.jsx
|
578
|
-
- app/pb_kits/playbook/pb_body/docs/
|
576
|
+
- app/pb_kits/playbook/pb_body/docs/_body_truncate_rails.md
|
577
|
+
- app/pb_kits/playbook/pb_body/docs/_body_truncate_react.md
|
579
578
|
- app/pb_kits/playbook/pb_body/docs/_description.md
|
580
579
|
- app/pb_kits/playbook/pb_body/docs/_footer.md
|
581
580
|
- app/pb_kits/playbook/pb_body/docs/example.yml
|
@@ -769,7 +768,8 @@ files:
|
|
769
768
|
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.jsx
|
770
769
|
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.html.erb
|
771
770
|
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.jsx
|
772
|
-
- app/pb_kits/playbook/pb_circle_chart/docs/
|
771
|
+
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors_rails.md
|
772
|
+
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors_react.md
|
773
773
|
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.html.erb
|
774
774
|
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.jsx
|
775
775
|
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.md
|
@@ -781,8 +781,6 @@ files:
|
|
781
781
|
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.jsx
|
782
782
|
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.md
|
783
783
|
- 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
784
|
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.html.erb
|
787
785
|
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.jsx
|
788
786
|
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_labels.html.erb
|
@@ -791,6 +789,7 @@ files:
|
|
791
789
|
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_legend_kit.jsx
|
792
790
|
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_title.html.erb
|
793
791
|
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_title.jsx
|
792
|
+
- app/pb_kits/playbook/pb_circle_chart/docs/_description.md
|
794
793
|
- app/pb_kits/playbook/pb_circle_chart/docs/example.yml
|
795
794
|
- app/pb_kits/playbook/pb_circle_chart/docs/index.js
|
796
795
|
- app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.scss
|
@@ -3284,7 +3283,8 @@ files:
|
|
3284
3283
|
- app/pb_kits/playbook/pb_title/docs/_title_responsive.md
|
3285
3284
|
- app/pb_kits/playbook/pb_title/docs/_title_truncate.html.erb
|
3286
3285
|
- app/pb_kits/playbook/pb_title/docs/_title_truncate.jsx
|
3287
|
-
- app/pb_kits/playbook/pb_title/docs/
|
3286
|
+
- app/pb_kits/playbook/pb_title/docs/_title_truncate_rails.md
|
3287
|
+
- app/pb_kits/playbook/pb_title/docs/_title_truncate_react.md
|
3288
3288
|
- app/pb_kits/playbook/pb_title/docs/example.yml
|
3289
3289
|
- app/pb_kits/playbook/pb_title/docs/index.js
|
3290
3290
|
- app/pb_kits/playbook/pb_title/title.html.erb
|
@@ -3341,8 +3341,10 @@ files:
|
|
3341
3341
|
- app/pb_kits/playbook/pb_toggle/toggle.test.js
|
3342
3342
|
- app/pb_kits/playbook/pb_tooltip/_tooltip.scss
|
3343
3343
|
- app/pb_kits/playbook/pb_tooltip/_tooltip.tsx
|
3344
|
+
- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open.html.erb
|
3344
3345
|
- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open.jsx
|
3345
|
-
- app/pb_kits/playbook/pb_tooltip/docs/
|
3346
|
+
- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open_rails.md
|
3347
|
+
- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open_react.md
|
3346
3348
|
- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default.html.erb
|
3347
3349
|
- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default_react.jsx
|
3348
3350
|
- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default_react.md
|
@@ -3618,11 +3620,12 @@ files:
|
|
3618
3620
|
- app/pb_kits/playbook/utilities/test/globalProps/truncate.test.js
|
3619
3621
|
- app/pb_kits/playbook/utilities/text.ts
|
3620
3622
|
- app/pb_kits/playbook/utilities/validEmojiChecker.ts
|
3621
|
-
- dist/chunks/
|
3622
|
-
- dist/chunks/
|
3623
|
+
- dist/chunks/_circle_chart-BZmlhBs2.js
|
3624
|
+
- dist/chunks/_typeahead-B1tu_vWi.js
|
3625
|
+
- dist/chunks/_weekday_stacked-CKk0dR5s.js
|
3623
3626
|
- dist/chunks/lazysizes-B7xYodB-.js
|
3624
|
-
- dist/chunks/lib-
|
3625
|
-
- dist/chunks/pb_form_validation-
|
3627
|
+
- dist/chunks/lib-DYpq0k8j.js
|
3628
|
+
- dist/chunks/pb_form_validation-BUOKwfvW.js
|
3626
3629
|
- dist/chunks/vendor.js
|
3627
3630
|
- dist/menu.yml
|
3628
3631
|
- 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.
|
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
|