playbook_ui 14.5.0.pre.alpha.PLAY1486highchartscssdrivenPOC3954 → 14.5.0.pre.alpha.PLAY1510railsformloading3975
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/_playbook.scss +0 -1
- data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.scss +1 -3
- data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx +184 -5
- data/app/pb_kits/playbook/pb_bar_graph/barGraph.test.js +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.tsx +216 -5
- data/app/pb_kits/playbook/pb_circle_chart/circleChart.test.js +1 -1
- data/app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.ts +11 -3
- data/app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.ts +13 -3
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.html.erb +30 -7
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.md +0 -2
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with_loading.html.erb +8 -0
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with_loading.md +1 -0
- data/app/pb_kits/playbook/pb_form/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_form/form.rb +2 -0
- data/app/pb_kits/playbook/pb_form/formHelper.js +41 -0
- data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx +9 -1
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.html.erb +19 -0
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.jsx +27 -0
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.md +1 -0
- data/app/pb_kits/playbook/pb_form_pill/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_form_pill/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_gantt_chart/_gantt_chart.tsx +64 -3
- data/app/pb_kits/playbook/pb_gauge/_gauge.tsx +203 -5
- data/app/pb_kits/playbook/pb_gauge/gauge.test.js +1 -1
- data/app/pb_kits/playbook/pb_line_graph/_line_graph.tsx +154 -5
- data/app/pb_kits/playbook/pb_line_graph/lineGraph.test.js +1 -1
- data/app/pb_kits/playbook/pb_map/pbMapTheme.ts +17 -195
- data/app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.tsx +113 -5
- data/app/pb_kits/playbook/pb_treemap_chart/treemapChart.test.js +1 -1
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx +4 -1
- data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.tsx +3 -1
- data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +3 -1
- data/dist/chunks/_typeahead-CnC6UeRx.js +22 -0
- data/dist/chunks/_weekday_stacked-DzL3HGZ_.js +45 -0
- data/dist/chunks/lib-DJCA-0lC.js +29 -0
- data/dist/chunks/{pb_form_validation-Bu-tMfIi.js → pb_form_validation-CyF9hGTn.js} +1 -1
- data/dist/chunks/vendor.js +1 -1
- 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/pb_forms_helper.rb +3 -1
- data/lib/playbook/version.rb +1 -1
- metadata +12 -7
- data/app/pb_kits/playbook/pb_dashboard/_highcharts_theme.scss +0 -52
- data/dist/chunks/_typeahead-D84d1KBa.js +0 -22
- data/dist/chunks/_weekday_stacked-CmT_2e83.js +0 -45
- data/dist/chunks/lib-BCt68dVK.js +0 -29
@@ -1,201 +1,23 @@
|
|
1
1
|
import colors from '../tokens/exports/_colors.module.scss'
|
2
|
-
import typography from '../tokens/exports/_typography.module.scss'
|
3
2
|
|
4
3
|
const mapTheme = {
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
},
|
23
|
-
title: {
|
24
|
-
style: {
|
25
|
-
color: colors.text_lt_default,
|
26
|
-
fontFamily: typography.font_family_base,
|
27
|
-
fontWeight: typography.bold,
|
28
|
-
fontSize: typography.heading_3,
|
29
|
-
},
|
30
|
-
},
|
31
|
-
subtitle: {
|
32
|
-
style: {
|
33
|
-
fontFamily: typography.font_family_base,
|
34
|
-
color: colors.text_lt_light,
|
35
|
-
fontWeight: typography.regular,
|
36
|
-
fontSize: typography.text_base,
|
37
|
-
},
|
38
|
-
},
|
39
|
-
xAxis: {
|
40
|
-
gridLineWidth: 0,
|
41
|
-
lineColor: colors.border_light,
|
42
|
-
tickColor: colors.border_light,
|
43
|
-
labels: {
|
44
|
-
style: {
|
45
|
-
fontFamily: typography.font_family_base,
|
46
|
-
color: colors.text_lt_lighter,
|
47
|
-
fontWeight: typography.bold,
|
48
|
-
fontSize: typography.text_smaller,
|
49
|
-
},
|
50
|
-
},
|
51
|
-
title: {
|
52
|
-
style: {
|
53
|
-
color: colors.text_lt_default,
|
54
|
-
fontFamily: typography.font_family_base,
|
55
|
-
fontWeight: typography.regular,
|
56
|
-
fontSize: typography.heading_4,
|
57
|
-
},
|
58
|
-
},
|
59
|
-
},
|
60
|
-
yAxis: {
|
61
|
-
gridLineColor: colors.border_light,
|
62
|
-
minorGridLineColor: colors.border_light,
|
63
|
-
lineWidth: 0,
|
64
|
-
tickWidth: 0,
|
65
|
-
labels: {
|
66
|
-
style: {
|
67
|
-
fontFamily: typography.font_family_base,
|
68
|
-
color: colors.text_lt_lighter,
|
69
|
-
fontWeight: typography.bold,
|
70
|
-
fontSize: typography.text_smaller,
|
71
|
-
},
|
72
|
-
},
|
73
|
-
title: {
|
74
|
-
style: {
|
75
|
-
fontFamily: typography.font_family_base,
|
76
|
-
color: colors.text_lt_lighter,
|
77
|
-
fontWeight: typography.bold,
|
78
|
-
fontSize: typography.text_smaller,
|
79
|
-
},
|
80
|
-
},
|
81
|
-
},
|
82
|
-
legend: {
|
83
|
-
layout: 'horizontal',
|
84
|
-
align: 'center',
|
85
|
-
verticalAlign: 'bottom',
|
86
|
-
itemStyle: {
|
87
|
-
fontFamily: typography.font_family_base,
|
88
|
-
color: colors.text_lt_light,
|
89
|
-
fontWeight: typography.regular,
|
90
|
-
fontSize: typography.text_smaller,
|
91
|
-
},
|
92
|
-
itemHoverStyle: {
|
93
|
-
color: colors.text_lt_default,
|
94
|
-
},
|
95
|
-
itemHiddenStyle: {
|
96
|
-
color: colors.text_lt_lighter,
|
97
|
-
},
|
98
|
-
},
|
99
|
-
tooltip: {
|
100
|
-
backgroundColor: {
|
101
|
-
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
|
102
|
-
stops: [
|
103
|
-
[0, colors.bg_dark],
|
104
|
-
[1, colors.bg_dark],
|
105
|
-
],
|
106
|
-
},
|
107
|
-
shadow: false,
|
108
|
-
borderWidth: 0,
|
109
|
-
borderRadius: 10,
|
110
|
-
style: {
|
111
|
-
fontFamily: typography.font_family_base,
|
112
|
-
color: colors.text_dk_default,
|
113
|
-
fontWeight: typography.regular,
|
114
|
-
fontSize: typography.text_smaller,
|
115
|
-
},
|
116
|
-
},
|
117
|
-
// specific to gauge
|
118
|
-
// unfilled gauge color
|
119
|
-
pane: {
|
120
|
-
background: {
|
121
|
-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
122
|
-
// @ts-ignore
|
123
|
-
borderColor: colors.border_light,
|
124
|
-
},
|
125
|
-
},
|
126
|
-
|
127
|
-
plotOptions: {
|
128
|
-
// PIE STYLES
|
129
|
-
pie: {
|
130
|
-
colors: [
|
131
|
-
colors.data_1,
|
132
|
-
colors.data_2,
|
133
|
-
colors.data_3,
|
134
|
-
colors.data_4,
|
135
|
-
colors.data_5,
|
136
|
-
colors.data_6,
|
137
|
-
colors.data_7,
|
138
|
-
],
|
139
|
-
dataLabels: {
|
140
|
-
style: {
|
141
|
-
fontFamily: typography.font_family_base,
|
142
|
-
fontSize: typography.text_smaller,
|
143
|
-
color: colors.text_lt_light,
|
144
|
-
fontWeight: typography.regular,
|
145
|
-
textOutline: '2px $white',
|
146
|
-
},
|
147
|
-
},
|
148
|
-
},
|
149
|
-
|
150
|
-
// LINE CHART STYLES
|
151
|
-
line: {
|
152
|
-
dataLabels: {
|
153
|
-
color: '#CCC',
|
154
|
-
},
|
155
|
-
marker: {
|
156
|
-
lineColor: '#333',
|
157
|
-
},
|
158
|
-
},
|
159
|
-
|
160
|
-
//TREEMAP CHART STYLES
|
161
|
-
treemap: {
|
162
|
-
layoutAlgorithm: "squarified",
|
163
|
-
allowTraversingTree: false,
|
164
|
-
animationLimit: 1000,
|
165
|
-
colors: [
|
166
|
-
colors.data_1,
|
167
|
-
colors.data_2,
|
168
|
-
colors.data_3,
|
169
|
-
colors.data_4,
|
170
|
-
colors.data_5,
|
171
|
-
colors.data_6,
|
172
|
-
colors.data_7,
|
173
|
-
colors.data_8,
|
174
|
-
],
|
175
|
-
dataLabels: {
|
176
|
-
enabled: true,
|
177
|
-
style: {
|
178
|
-
fontFamily: typography.font_family_base,
|
179
|
-
fontWeight: typography.bold,
|
180
|
-
fontSize: typography.heading_4,
|
181
|
-
},
|
182
|
-
},
|
183
|
-
levels: [
|
184
|
-
{
|
185
|
-
level: 1,
|
186
|
-
dataLabels: {
|
187
|
-
enabled: false,
|
188
|
-
},
|
189
|
-
},
|
190
|
-
],
|
191
|
-
traverseUpButton: {
|
192
|
-
position: { y: -50 },
|
193
|
-
},
|
194
|
-
},
|
195
|
-
},
|
196
|
-
credits: {
|
197
|
-
enabled: false
|
198
|
-
},
|
4
|
+
marker : colors.primary_action,
|
5
|
+
maptiles: 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json',
|
6
|
+
flyToConfig: {
|
7
|
+
zoom: 13,
|
8
|
+
bearing: 0,
|
9
|
+
curve: 1.42, // change the speed at which it zooms
|
10
|
+
easing: function (t: any) {
|
11
|
+
return t;
|
12
|
+
},
|
13
|
+
essential: true
|
14
|
+
},
|
15
|
+
zoomConfig: { duration:1000 },
|
16
|
+
mapConfig: {
|
17
|
+
style: 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json',
|
18
|
+
zoom: 13,
|
19
|
+
attributionControl: false,
|
20
|
+
}
|
199
21
|
}
|
200
22
|
|
201
23
|
export default mapTheme
|
@@ -1,10 +1,118 @@
|
|
1
|
-
import React from
|
1
|
+
import React, { useState, useEffect } from "react";
|
2
|
+
import classnames from "classnames";
|
3
|
+
|
4
|
+
import { globalProps } from "../utilities/globalProps";
|
5
|
+
import { buildAriaProps, buildDataProps, buildHtmlProps } from "../utilities/props";
|
6
|
+
|
7
|
+
import HighchartsReact from "highcharts-react-official";
|
8
|
+
import Highcharts from "highcharts";
|
9
|
+
import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
|
10
|
+
import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
|
11
|
+
import mapColors from "../pb_dashboard/pbChartsColorsHelper";
|
12
|
+
import treemap from 'highcharts/modules/treemap'
|
13
|
+
import { merge } from 'lodash'
|
14
|
+
|
15
|
+
type TreemapChartProps = {
|
16
|
+
chartData: {
|
17
|
+
name: string;
|
18
|
+
parent?: string | number;
|
19
|
+
value: number;
|
20
|
+
color?: string;
|
21
|
+
id?: string | number;
|
22
|
+
}[];
|
23
|
+
className?: string;
|
24
|
+
colors: string[];
|
25
|
+
customOptions?: Partial<Highcharts.Options>;
|
26
|
+
dark?: boolean;
|
27
|
+
drillable: boolean;
|
28
|
+
grouped: boolean;
|
29
|
+
height?: string;
|
30
|
+
htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
|
31
|
+
id: number | string;
|
32
|
+
title?: string;
|
33
|
+
tooltipHtml: string;
|
34
|
+
type?: string;
|
35
|
+
aria?: { [key: string]: string };
|
36
|
+
data?: { [key: string]: string };
|
37
|
+
};
|
38
|
+
|
39
|
+
const TreemapChart = ({
|
40
|
+
aria = {},
|
41
|
+
data = {},
|
42
|
+
chartData,
|
43
|
+
colors,
|
44
|
+
customOptions = {},
|
45
|
+
dark = false,
|
46
|
+
drillable = false,
|
47
|
+
grouped = false,
|
48
|
+
height,
|
49
|
+
htmlOptions = {},
|
50
|
+
id,
|
51
|
+
title = "",
|
52
|
+
tooltipHtml = '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: <b>{point.value}</b>',
|
53
|
+
type = "treemap",
|
54
|
+
...props
|
55
|
+
}: TreemapChartProps): React.ReactElement => {
|
56
|
+
|
57
|
+
const ariaProps = buildAriaProps(aria)
|
58
|
+
const dataProps = buildDataProps(data)
|
59
|
+
const htmlProps = buildHtmlProps(htmlOptions)
|
60
|
+
|
61
|
+
const setupTheme = () => {
|
62
|
+
dark
|
63
|
+
? Highcharts.setOptions(highchartsDarkTheme)
|
64
|
+
: Highcharts.setOptions(highchartsTheme);
|
65
|
+
};
|
66
|
+
treemap(Highcharts)
|
67
|
+
setupTheme();
|
68
|
+
|
69
|
+
const staticOptions = {
|
70
|
+
title: {
|
71
|
+
text: title,
|
72
|
+
},
|
73
|
+
chart: {
|
74
|
+
height: height,
|
75
|
+
type: type,
|
76
|
+
},
|
77
|
+
credits: false,
|
78
|
+
series: [
|
79
|
+
{
|
80
|
+
data: chartData,
|
81
|
+
},
|
82
|
+
],
|
83
|
+
plotOptions: {
|
84
|
+
treemap: {
|
85
|
+
tooltip: {
|
86
|
+
pointFormat: tooltipHtml,
|
87
|
+
},
|
88
|
+
allowTraversingTree: drillable,
|
89
|
+
colorByPoint: !grouped,
|
90
|
+
colors:
|
91
|
+
colors !== undefined && colors.length > 0
|
92
|
+
? mapColors(colors)
|
93
|
+
: highchartsTheme.colors,
|
94
|
+
},
|
95
|
+
},
|
96
|
+
};
|
97
|
+
|
98
|
+
const [options, setOptions] = useState({});
|
99
|
+
|
100
|
+
useEffect(() => {
|
101
|
+
setOptions(merge(staticOptions, customOptions));
|
102
|
+
}, [chartData]);
|
2
103
|
|
3
|
-
const TreemapChart: React.FC = () => {
|
4
104
|
return (
|
5
|
-
<
|
6
|
-
|
7
|
-
|
105
|
+
<HighchartsReact
|
106
|
+
containerProps={{
|
107
|
+
className: classnames(globalProps(props), "pb_treemap_chart"),
|
108
|
+
id: id,
|
109
|
+
...ariaProps,
|
110
|
+
...dataProps,
|
111
|
+
...htmlProps
|
112
|
+
}}
|
113
|
+
highcharts={Highcharts}
|
114
|
+
options={options}
|
115
|
+
/>
|
8
116
|
);
|
9
117
|
};
|
10
118
|
|
@@ -136,12 +136,15 @@ const Typeahead = ({
|
|
136
136
|
}
|
137
137
|
}
|
138
138
|
|
139
|
+
const filteredProps: TypeaheadProps = {...props}
|
140
|
+
delete filteredProps.truncate
|
141
|
+
|
139
142
|
const dataProps = buildDataProps(data)
|
140
143
|
const htmlProps = buildHtmlProps(htmlOptions)
|
141
144
|
const classes = classnames(
|
142
145
|
'pb_typeahead_kit react-select',
|
143
146
|
`mb_${marginBottom}`,
|
144
|
-
globalProps(
|
147
|
+
globalProps(filteredProps),
|
145
148
|
className
|
146
149
|
)
|
147
150
|
|
@@ -16,7 +16,7 @@ type Props = {
|
|
16
16
|
const MultiValue = (props: Props) => {
|
17
17
|
const { removeProps } = props
|
18
18
|
const { imageUrl, label } = props.data
|
19
|
-
const { dark, multiKit, pillColor } = props.selectProps
|
19
|
+
const { dark, multiKit, pillColor, truncate } = props.selectProps
|
20
20
|
|
21
21
|
const formPillProps = {
|
22
22
|
marginRight: 'xs',
|
@@ -51,6 +51,7 @@ const MultiValue = (props: Props) => {
|
|
51
51
|
name={label}
|
52
52
|
size={multiKit === 'smallPill' ? 'small' : ''}
|
53
53
|
text=''
|
54
|
+
truncate={truncate}
|
54
55
|
{...props}
|
55
56
|
/>
|
56
57
|
}
|
@@ -64,6 +65,7 @@ const MultiValue = (props: Props) => {
|
|
64
65
|
name=''
|
65
66
|
size={multiKit === 'smallPill' ? 'small' : ''}
|
66
67
|
text={label}
|
68
|
+
truncate={truncate}
|
67
69
|
{...props}
|
68
70
|
/>
|
69
71
|
}
|
@@ -65,10 +65,10 @@ module Playbook
|
|
65
65
|
def typeahead_react_options
|
66
66
|
base_options = {
|
67
67
|
className: classname,
|
68
|
-
pillColor: pill_color,
|
69
68
|
dark: dark,
|
70
69
|
defaultValue: default_options,
|
71
70
|
error: error,
|
71
|
+
htmlOptions: html_options,
|
72
72
|
id: id,
|
73
73
|
inline: inline,
|
74
74
|
isMulti: is_multi,
|
@@ -77,8 +77,10 @@ module Playbook
|
|
77
77
|
multiKit: multi_kit,
|
78
78
|
name: name,
|
79
79
|
options: options,
|
80
|
+
pillColor: pill_color,
|
80
81
|
placeholder: placeholder,
|
81
82
|
plusIcon: plus_icon,
|
83
|
+
truncate: truncate,
|
82
84
|
}
|
83
85
|
|
84
86
|
base_options[:getOptionLabel] = get_option_label if get_option_label.present?
|