playbook_ui 15.0.0.pre.alpha.PLAY2473rowhighlightfix10512 → 15.0.0.pre.alpha.PLAY236510413
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/_playbook.scss +3 -2
- data/app/pb_kits/playbook/pb_advanced_table/Components/RegularTableView.tsx +11 -12
- data/app/pb_kits/playbook/pb_advanced_table/Components/VirtualizedTableView.tsx +7 -7
- data/app/pb_kits/playbook/pb_advanced_table/Utilities/RowUtils.ts +2 -7
- data/app/pb_kits/playbook/pb_bar_graph/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +4 -6
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx +0 -9
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.html.erb +3 -3
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +0 -1
- data/app/pb_kits/playbook/pb_pb_circle_chart/_pb_circle_chart.scss +3 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/_pb_circle_chart.tsx +62 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_block_content.html.erb +31 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_block_content.jsx +81 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.html.erb +25 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.jsx +40 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.md +5 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_custom_tooltip.html.erb +27 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_custom_tooltip.jsx +39 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_custom_tooltip.md +5 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_legend_position.html.erb +93 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_legend_position.jsx +131 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_legend_position.md +14 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_labels.html.erb +42 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_labels.jsx +58 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_legend.html.erb +24 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_legend.jsx +38 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_default.html.erb +22 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_default.jsx +33 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_inner_sizes.html.erb +118 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_inner_sizes.jsx +144 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_live_data.jsx +60 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_rounded.html.erb +24 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_rounded.jsx +42 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_with_title.html.erb +38 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_with_title.jsx +52 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/example.yml +29 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/index.js +11 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/pbCircleChartTheme.ts +88 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/pb_circle_chart.html.erb +1 -0
- data/app/pb_kits/playbook/{pb_pb_bar_graph/pb_bar_graph.rb → pb_pb_circle_chart/pb_circle_chart.rb} +3 -3
- data/app/pb_kits/playbook/pb_pb_circle_chart/pb_circle_chart.test.jsx +51 -0
- data/dist/chunks/{_line_graph-BBny-YYZ.js → _line_graph-B5Dr0Huy.js} +1 -1
- data/dist/chunks/{_typeahead-CeyJ6-GF.js → _typeahead-GbjDoSSQ.js} +2 -2
- data/dist/chunks/{_weekday_stacked-BZw0f9oB.js → _weekday_stacked-DjQv3Sok.js} +3 -3
- data/dist/chunks/vendor.js +1 -1
- data/dist/menu.yml +7 -9
- 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/forms/builder/form_field_builder.rb +1 -9
- data/lib/playbook/version.rb +1 -1
- metadata +37 -38
- data/app/pb_kits/playbook/pb_pb_bar_graph/_pb_bar_graph.scss +0 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/_pb_bar_graph.tsx +0 -62
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors.html.erb +0 -35
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors.jsx +0 -49
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors_rails.md +0 -1
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors_react.md +0 -2
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_default.html.erb +0 -38
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_default.jsx +0 -51
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_height.html.erb +0 -46
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_height.jsx +0 -62
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_height.md +0 -3
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_horizontal.html.erb +0 -47
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_horizontal.jsx +0 -60
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend.html.erb +0 -25
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend.jsx +0 -36
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_non_clickable.jsx +0 -44
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_position.html.erb +0 -100
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_position.jsx +0 -126
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_negative_numbers.html.erb +0 -32
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_negative_numbers.jsx +0 -48
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_secondary_y_axis.html.erb +0 -68
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_secondary_y_axis.jsx +0 -81
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_spline.html.erb +0 -31
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_spline.jsx +0 -42
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_spline.md +0 -2
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_stacked.html.erb +0 -35
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_stacked.jsx +0 -51
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/example.yml +0 -27
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/index.js +0 -11
- data/app/pb_kits/playbook/pb_pb_bar_graph/pbBarGraphTheme.ts +0 -106
- data/app/pb_kits/playbook/pb_pb_bar_graph/pb_bar_graph.html.erb +0 -1
- data/app/pb_kits/playbook/pb_pb_bar_graph/pbbargraph.test.jsx +0 -31
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: c2160795c8e7884b53baf24a0caf41501a31484abfc2558b1cda1eb92c78e156
|
4
|
+
data.tar.gz: 0bd79d78760dc7617e1ab5a232a703ebb5c20fda537b2bcc8e45d0f69dc36260
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: '079e5354e33efd02c223d772f6ea1a0d4d16f1ac7631231e2ca5a841acc7178ab7e89f3475e6572999e6ed52a35288d3bffce23770d0321392ed532de27468a8'
|
7
|
+
data.tar.gz: 54c89d7d1eeae1d607b9df1a03aa4820dce84333731b67421b57be5e935b6170953929f86c4ebe8cf79b2029bc57b5d8bebf6ce1d0a92981d460f948b2eea5b5
|
@@ -1,5 +1,6 @@
|
|
1
1
|
|
2
2
|
|
3
|
+
|
3
4
|
@import 'pb_advanced_table/advanced_table';
|
4
5
|
@import 'pb_avatar/avatar';
|
5
6
|
@import 'pb_background/background';
|
@@ -32,6 +33,7 @@
|
|
32
33
|
@import 'pb_distribution_bar/distribution_bar';
|
33
34
|
@import 'pb_draggable/draggable';
|
34
35
|
@import 'pb_dropdown/dropdown';
|
36
|
+
@import 'pb_empty_state/empty_state';
|
35
37
|
@import 'pb_file_upload/file_upload';
|
36
38
|
@import 'pb_filter/filter';
|
37
39
|
@import 'pb_fixed_confirmation_toast/fixed_confirmation_toast';
|
@@ -107,8 +109,7 @@
|
|
107
109
|
@import 'pb_user/user';
|
108
110
|
@import 'pb_user_badge/user_badge';
|
109
111
|
@import 'pb_weekday_stacked/weekday_stacked';
|
110
|
-
@import '
|
111
|
-
@import 'pb_pb_bar_graph/pb_bar_graph';
|
112
|
+
@import 'pb_pb_circle_chart/pb_circle_chart';
|
112
113
|
@import 'utilities/mixins';
|
113
114
|
@import 'utilities/spacing';
|
114
115
|
@import 'utilities/cursor';
|
@@ -5,7 +5,6 @@ import { flexRender, Row, Cell } from "@tanstack/react-table"
|
|
5
5
|
import { GenericObject } from "../../types"
|
6
6
|
import { isChrome } from "../Utilities/BrowserCheck"
|
7
7
|
import { findColumnDefByAccessor } from "../Utilities/ColumnStylingHelper"
|
8
|
-
import { getRowColorClass, shouldShowLoadingIndicator } from "../Utilities/RowUtils"
|
9
8
|
|
10
9
|
import LoadingInline from "../../pb_loading_inline/_loading_inline"
|
11
10
|
import Checkbox from "../../pb_checkbox/_checkbox"
|
@@ -61,7 +60,7 @@ const TableCellRenderer = ({
|
|
61
60
|
const cellAlignment = colDef?.columnStyling?.cellAlignment ?? "right"
|
62
61
|
const paddingValue = colDef?.columnStyling?.cellPadding ?? customRowStyle?.cellPadding
|
63
62
|
const paddingClass = paddingValue ? `p_${paddingValue}` : undefined
|
64
|
-
|
63
|
+
|
65
64
|
return (
|
66
65
|
<td
|
67
66
|
align={cellAlignment}
|
@@ -133,7 +132,6 @@ export const RegularTableView = ({
|
|
133
132
|
|
134
133
|
const columnPinning = table.getState().columnPinning || { left: [] };
|
135
134
|
const columnDefinitions = table.options.meta?.columnDefinitions || [];
|
136
|
-
|
137
135
|
// Row pinning
|
138
136
|
function PinnedRow({ row }: { row: Row<any> }) {
|
139
137
|
const customRowStyle = rowStyling?.length > 0 && rowStyling?.find((s: GenericObject) => s?.rowId === row.id);
|
@@ -146,7 +144,7 @@ export const RegularTableView = ({
|
|
146
144
|
backgroundColor: customRowStyle?.backgroundColor ? customRowStyle?.backgroundColor : 'white',
|
147
145
|
color: customRowStyle?.fontColor,
|
148
146
|
position: 'sticky',
|
149
|
-
top:
|
147
|
+
top:
|
150
148
|
row.getIsPinned() === 'top'
|
151
149
|
? `${row.getPinnedIndex() * rowHeight + headerHeight}px`
|
152
150
|
: undefined,
|
@@ -171,20 +169,21 @@ export const RegularTableView = ({
|
|
171
169
|
return (
|
172
170
|
<>
|
173
171
|
{pinnedRows && table.getTopRows().map((row: Row<GenericObject>) => (
|
174
|
-
<PinnedRow key={row.id}
|
175
|
-
row={row}
|
172
|
+
<PinnedRow key={row.id}
|
173
|
+
row={row}
|
176
174
|
/>
|
177
175
|
))}
|
178
176
|
{totalRows.map((row: Row<GenericObject>, rowIndex: number) => {
|
177
|
+
const isExpandable = row.getIsExpanded();
|
179
178
|
const isFirstChildofSubrow = row.depth > 0 && row.index === 0;
|
179
|
+
const rowHasNoChildren = row.original?.children && !row.original.children.length ? true : false;
|
180
180
|
const numberOfColumns = table.getAllFlatColumns().length;
|
181
|
+
const isDataLoading = isExpandable && (inlineRowLoading && rowHasNoChildren) && (row.depth < columnDefinitions[0]?.cellAccessors?.length);
|
182
|
+
const rowBackground = isExpandable && ((!inlineRowLoading && row.getCanExpand()) || (inlineRowLoading && rowHasNoChildren));
|
183
|
+
const rowColor = row.getIsSelected() ? "bg-row-selection" : rowBackground ? "bg-silver" : "bg-white";
|
181
184
|
const isFirstRegularRow = rowIndex === 0 && !row.getIsPinned();
|
182
185
|
const customRowStyle = rowStyling?.length > 0 && rowStyling?.find((s: GenericObject) => s?.rowId === row.id);
|
183
186
|
|
184
|
-
// Use functions from RowUtils for consistent cell coloring
|
185
|
-
const rowColor = getRowColorClass(row, inlineRowLoading || false);
|
186
|
-
const isDataLoading = shouldShowLoadingIndicator(row, inlineRowLoading || false, columnDefinitions[0]?.cellAccessors?.length || 0);
|
187
|
-
|
188
187
|
return (
|
189
188
|
<React.Fragment key={`${row.index}-${row.id}-${row.depth}-row`}>
|
190
189
|
{isFirstChildofSubrow && subRowHeaders && (
|
@@ -229,7 +228,7 @@ export const RegularTableView = ({
|
|
229
228
|
|
230
229
|
{/* Display LoadingInline if Row Data is querying and there are no children already */}
|
231
230
|
{isDataLoading && (
|
232
|
-
<tr key={`${row.id}-
|
231
|
+
<tr key={`${row.id}-row`}>
|
233
232
|
<td colSpan={numberOfColumns}
|
234
233
|
style={{ paddingLeft: `${row.depth === 0 ? 0.5 : (row.depth * 2)}em` }}
|
235
234
|
>
|
@@ -244,4 +243,4 @@ export const RegularTableView = ({
|
|
244
243
|
);
|
245
244
|
}
|
246
245
|
|
247
|
-
export default RegularTableView;
|
246
|
+
export default RegularTableView;
|
@@ -7,7 +7,6 @@ import { GenericObject } from "../../types"
|
|
7
7
|
|
8
8
|
import { isChrome } from "../Utilities/BrowserCheck"
|
9
9
|
import { getVirtualizedRowStyle } from "../Utilities/TableContainerStyles"
|
10
|
-
import { getRowColorClass } from "../Utilities/RowUtils"
|
11
10
|
|
12
11
|
import LoadingInline from "../../pb_loading_inline/_loading_inline"
|
13
12
|
import Checkbox from "../../pb_checkbox/_checkbox"
|
@@ -46,10 +45,10 @@ export const VirtualizedTableView = ({
|
|
46
45
|
|
47
46
|
const columnPinning = table.getState().columnPinning || { left: [] };
|
48
47
|
const sortingState = JSON.stringify(table.getState().sorting || []);
|
49
|
-
|
48
|
+
|
50
49
|
// Store column widths extracted from header
|
51
50
|
const [columnWidths, setColumnWidths] = useState<{[key: string]: string}>({});
|
52
|
-
|
51
|
+
|
53
52
|
// Function to get header cell widths
|
54
53
|
const getHeaderCellWidths = () => {
|
55
54
|
const widths: {[key: string]: string} = {};
|
@@ -137,7 +136,7 @@ export const VirtualizedTableView = ({
|
|
137
136
|
</tr>
|
138
137
|
);
|
139
138
|
}
|
140
|
-
|
139
|
+
|
141
140
|
// Establish # of Parent Rows (so that Footer count does not include every single row)
|
142
141
|
const topLevelRowCount = table.getRowModel().flatRows.filter((row: Row<GenericObject>) => row.depth === 0).length;
|
143
142
|
|
@@ -173,9 +172,10 @@ export const VirtualizedTableView = ({
|
|
173
172
|
|
174
173
|
if (item.type === 'row') {
|
175
174
|
const row = item.row;
|
176
|
-
|
177
|
-
|
178
|
-
const
|
175
|
+
const isExpandable = row.getIsExpanded();
|
176
|
+
const rowHasNoChildren = row.original?.children && !row.original.children.length;
|
177
|
+
const rowBackground = isExpandable && ((!inlineRowLoading && row.getCanExpand()) || (inlineRowLoading && rowHasNoChildren));
|
178
|
+
const rowColor = row.getIsSelected() ? "bg-row-selection" : rowBackground ? "bg-silver" : "bg-white";
|
179
179
|
|
180
180
|
return (
|
181
181
|
<tr
|
@@ -10,14 +10,9 @@ export const getRowColorClass = (
|
|
10
10
|
): string => {
|
11
11
|
const isExpandable = row.getIsExpanded();
|
12
12
|
const rowHasNoChildren = row.original?.children && !row.original.children.length ? true : false;
|
13
|
+
const rowBackground = isExpandable && ((!inlineRowLoading && row.getCanExpand()) || (inlineRowLoading && rowHasNoChildren));
|
13
14
|
|
14
|
-
|
15
|
-
const shouldShowExpandedBackground = isExpandable && (
|
16
|
-
(!inlineRowLoading && row.getCanExpand()) ||
|
17
|
-
(inlineRowLoading && (rowHasNoChildren || row.getCanExpand()))
|
18
|
-
);
|
19
|
-
|
20
|
-
return row.getIsSelected() ? "bg-row-selection" : shouldShowExpandedBackground ? "bg-silver" : "bg-white";
|
15
|
+
return row.getIsSelected() ? "bg-row-selection" : rowBackground ? "bg-silver" : "bg-white";
|
21
16
|
}
|
22
17
|
|
23
18
|
/**
|
@@ -4,6 +4,7 @@ examples:
|
|
4
4
|
- bar_graph_default: Default
|
5
5
|
- bar_graph_legend: Legend
|
6
6
|
- bar_graph_legend_position: Legend Position
|
7
|
+
- bar_graph_legend_non_clickable: Legend Non Clickable
|
7
8
|
- bar_graph_height: Height
|
8
9
|
- bar_graph_spline: Spline
|
9
10
|
- bar_graph_colors: Color Overrides
|
@@ -210,12 +210,10 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
|
|
210
210
|
className="input_wrapper"
|
211
211
|
>
|
212
212
|
|
213
|
-
|
214
|
-
|
215
|
-
|
216
|
-
|
217
|
-
/>
|
218
|
-
)}
|
213
|
+
<Caption
|
214
|
+
className="pb_date_picker_kit_label"
|
215
|
+
text={hideLabel ? null : label}
|
216
|
+
/>
|
219
217
|
<>
|
220
218
|
<div className="date_picker_input_wrapper">
|
221
219
|
<input
|
@@ -35,7 +35,6 @@ type FixedConfirmationToastProps = {
|
|
35
35
|
|
36
36
|
const FixedConfirmationToast = (props: FixedConfirmationToastProps): React.ReactElement => {
|
37
37
|
const [showToast, toggleToast] = useState(true);
|
38
|
-
|
39
38
|
const {
|
40
39
|
autoClose = 0,
|
41
40
|
children,
|
@@ -88,15 +87,8 @@ const FixedConfirmationToast = (props: FixedConfirmationToastProps): React.React
|
|
88
87
|
<>
|
89
88
|
{showToast && (
|
90
89
|
<div
|
91
|
-
aria-atomic="true"
|
92
|
-
aria-live="polite"
|
93
90
|
className={css}
|
94
91
|
onClick={handleClick}
|
95
|
-
onKeyDown={(e) => {
|
96
|
-
if (e.key === "Enter" || e.key === " ") handleClick();
|
97
|
-
}}
|
98
|
-
role="status"
|
99
|
-
tabIndex={0}
|
100
92
|
{...htmlProps}
|
101
93
|
>
|
102
94
|
{returnedIcon && icon !== "none" && (
|
@@ -119,7 +111,6 @@ const FixedConfirmationToast = (props: FixedConfirmationToastProps): React.React
|
|
119
111
|
|
120
112
|
{closeable && (
|
121
113
|
<Icon
|
122
|
-
aria={{ "label": "Close Toast" }}
|
123
114
|
className="pb_icon"
|
124
115
|
cursor="pointer"
|
125
116
|
fixedWidth={false}
|
@@ -1,6 +1,6 @@
|
|
1
|
-
<%= pb_content_tag
|
1
|
+
<%= pb_content_tag do %>
|
2
2
|
<% if object.icon_value && object.icon_value != "none" %>
|
3
|
-
<%= pb_rails("icon", props: { icon: object.icon_value, classname: "pb_icon", fixed_width: true
|
3
|
+
<%= pb_rails("icon", props: { icon: object.icon_value, classname: "pb_icon", fixed_width: true }) %>
|
4
4
|
<% end %>
|
5
5
|
<% if content %>
|
6
6
|
<%= content %>
|
@@ -8,5 +8,5 @@
|
|
8
8
|
<%= pb_rails("title", props: { text: object.text, size: 4, flex: "1", classname: "pb_fixed_confirmation_toast_text" }) %>
|
9
9
|
<% end %>
|
10
10
|
|
11
|
-
<%= pb_rails("icon", props: { icon: "times", classname: "pb_icon", cursor: "pointer", fixed_width: true
|
11
|
+
<%= pb_rails("icon", props: { icon: "times", classname: "pb_icon", cursor: "pointer", fixed_width: true }) if object.closeable %>
|
12
12
|
<% end %>
|
@@ -91,7 +91,6 @@
|
|
91
91
|
<%= pb_form_with(scope: :example, url: "", method: :get) do |form| %>
|
92
92
|
<%= form.typeahead :example_typeahead, props: { data: { typeahead_example1: true, user: {} }, label: true, placeholder: "Search for a user" } %>
|
93
93
|
<%= form.text_field :example_text_field, props: { label: true } %>
|
94
|
-
<%= form.text_field :example_text_field_2, props: { label: "Text Field Custom Label" } %>
|
95
94
|
<%= form.phone_number_field :example_phone_number_field, props: { label: "Example phone field", hidden_inputs: true } %>
|
96
95
|
<%= form.email_field :example_email_field, props: { label: true } %>
|
97
96
|
<%= form.number_field :example_number_field, props: { label: true } %>
|
@@ -0,0 +1,62 @@
|
|
1
|
+
|
2
|
+
import React, { useMemo } from 'react'
|
3
|
+
import classnames from 'classnames'
|
4
|
+
import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
|
5
|
+
import Highcharts from "highcharts"
|
6
|
+
import HighchartsReact from "highcharts-react-official"
|
7
|
+
import pbCircleGraphTheme from './pbCircleChartTheme'
|
8
|
+
import { globalProps } from '../utilities/globalProps'
|
9
|
+
|
10
|
+
type PbCircleChartProps = {
|
11
|
+
aria?: { [key: string]: string },
|
12
|
+
className?: string,
|
13
|
+
data?: { [key: string]: string },
|
14
|
+
id?: string,
|
15
|
+
htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
|
16
|
+
options: Record<string, unknown>
|
17
|
+
}
|
18
|
+
|
19
|
+
const PbCircleChart = (props: PbCircleChartProps) => {
|
20
|
+
const {
|
21
|
+
aria = {},
|
22
|
+
className,
|
23
|
+
data = {},
|
24
|
+
id,
|
25
|
+
htmlOptions = {},
|
26
|
+
options
|
27
|
+
} = props
|
28
|
+
|
29
|
+
const ariaProps = buildAriaProps(aria)
|
30
|
+
const dataProps = buildDataProps(data)
|
31
|
+
const htmlProps = buildHtmlProps(htmlOptions);
|
32
|
+
const classes = classnames(buildCss('pb_pb_circle_chart'), globalProps(props), className)
|
33
|
+
|
34
|
+
const mergedOptions = useMemo(() => {
|
35
|
+
if (!options || typeof options !== "object") {
|
36
|
+
// eslint-disable-next-line no-console
|
37
|
+
console.error("❌ Invalid options passed to <PbCircleChart />", options)
|
38
|
+
return {}
|
39
|
+
}
|
40
|
+
|
41
|
+
return Highcharts.merge({}, pbCircleGraphTheme, options)
|
42
|
+
}, [options])
|
43
|
+
|
44
|
+
return (
|
45
|
+
|
46
|
+
<div>
|
47
|
+
<HighchartsReact
|
48
|
+
containerProps={{
|
49
|
+
className: classnames(globalProps, className),
|
50
|
+
id: id,
|
51
|
+
...ariaProps,
|
52
|
+
...dataProps,
|
53
|
+
...htmlProps
|
54
|
+
}}
|
55
|
+
highcharts={Highcharts}
|
56
|
+
options={mergedOptions}
|
57
|
+
/>
|
58
|
+
</div>
|
59
|
+
)
|
60
|
+
}
|
61
|
+
|
62
|
+
export default PbCircleChart
|
@@ -0,0 +1,31 @@
|
|
1
|
+
<% data = [
|
2
|
+
{
|
3
|
+
name: "Waiting for Calls",
|
4
|
+
y: 41,
|
5
|
+
},
|
6
|
+
{
|
7
|
+
name: "On Call",
|
8
|
+
y: 49,
|
9
|
+
},
|
10
|
+
{
|
11
|
+
name: "After Call",
|
12
|
+
y: 10,
|
13
|
+
},
|
14
|
+
] %>
|
15
|
+
|
16
|
+
<% chart_options = {
|
17
|
+
series: [{
|
18
|
+
data: data,
|
19
|
+
innerSize: '100%',
|
20
|
+
borderWidth: '20',
|
21
|
+
}],
|
22
|
+
} %>
|
23
|
+
|
24
|
+
<div style="position: relative;">
|
25
|
+
<%= pb_rails("pb_circle_chart", props: { options: chart_options }) %>
|
26
|
+
|
27
|
+
<div class="pb-circle-chart-block"
|
28
|
+
style="position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; z-index: 1; text-align: center; pointer-events: none;">
|
29
|
+
<%= pb_rails("title", props: { size: 1, tag: "div", text: "83" }) %>
|
30
|
+
</div>
|
31
|
+
</div>
|
@@ -0,0 +1,81 @@
|
|
1
|
+
import React from "react";
|
2
|
+
import { PbCircleChart, Title } from "playbook-ui";
|
3
|
+
|
4
|
+
const data= [
|
5
|
+
{
|
6
|
+
name: "Waiting for Calls",
|
7
|
+
y: 41,
|
8
|
+
},
|
9
|
+
{
|
10
|
+
name: "On Call",
|
11
|
+
y: 49,
|
12
|
+
},
|
13
|
+
{
|
14
|
+
name: "After Call",
|
15
|
+
y: 10,
|
16
|
+
},
|
17
|
+
]
|
18
|
+
|
19
|
+
|
20
|
+
const PbCircleChartBlockContent = (props) => {
|
21
|
+
const chartOptions = {
|
22
|
+
series: [{
|
23
|
+
data: data,
|
24
|
+
innerSize: '100%',
|
25
|
+
borderWidth: 20,
|
26
|
+
borderColor: null,
|
27
|
+
}],
|
28
|
+
chart: {
|
29
|
+
events: {
|
30
|
+
render: function() {
|
31
|
+
const chart = this;
|
32
|
+
const blockElement = document.querySelector('.pb-circle-chart-block');
|
33
|
+
if (blockElement) {
|
34
|
+
blockElement.style.width = chart.chartWidth + 'px';
|
35
|
+
blockElement.style.height = chart.chartHeight + 'px';
|
36
|
+
}
|
37
|
+
},
|
38
|
+
redraw: function() {
|
39
|
+
const chart = this;
|
40
|
+
const blockElement = document.querySelector('.pb-circle-chart-block');
|
41
|
+
if (blockElement) {
|
42
|
+
blockElement.style.width = chart.chartWidth + 'px';
|
43
|
+
blockElement.style.height = chart.chartHeight + 'px';
|
44
|
+
}
|
45
|
+
}
|
46
|
+
}
|
47
|
+
}
|
48
|
+
}
|
49
|
+
|
50
|
+
return (
|
51
|
+
<div style={{ position: 'relative' }}>
|
52
|
+
<PbCircleChart
|
53
|
+
options={chartOptions}
|
54
|
+
{...props}
|
55
|
+
/>
|
56
|
+
<div
|
57
|
+
className="pb-circle-chart-block"
|
58
|
+
style={{
|
59
|
+
position: 'absolute',
|
60
|
+
top: 0,
|
61
|
+
left: 0,
|
62
|
+
display: 'flex',
|
63
|
+
justifyContent: 'center',
|
64
|
+
alignItems: 'center',
|
65
|
+
zIndex: 1,
|
66
|
+
textAlign: 'center',
|
67
|
+
pointerEvents: 'none'
|
68
|
+
}}
|
69
|
+
>
|
70
|
+
<Title
|
71
|
+
size={1}
|
72
|
+
tag="div"
|
73
|
+
>
|
74
|
+
{'83'}
|
75
|
+
</Title>
|
76
|
+
</div>
|
77
|
+
</div>
|
78
|
+
);
|
79
|
+
};
|
80
|
+
|
81
|
+
export default PbCircleChartBlockContent;
|
@@ -0,0 +1,25 @@
|
|
1
|
+
<% data = [
|
2
|
+
{
|
3
|
+
name: "Waiting for Calls",
|
4
|
+
y: 41,
|
5
|
+
},
|
6
|
+
{
|
7
|
+
name: "On Call",
|
8
|
+
y: 49,
|
9
|
+
},
|
10
|
+
{
|
11
|
+
name: "After Call",
|
12
|
+
y: 10,
|
13
|
+
},
|
14
|
+
] %>
|
15
|
+
|
16
|
+
<% chart_options = {
|
17
|
+
series: [{ data: data }],
|
18
|
+
plotOptions: {
|
19
|
+
pie: {
|
20
|
+
colors: ["#144075", "#1CA05C", "#F9BB00"],
|
21
|
+
},
|
22
|
+
},
|
23
|
+
} %>
|
24
|
+
|
25
|
+
<%= pb_rails("pb_circle_chart", props: { options: chart_options }) %>
|
@@ -0,0 +1,40 @@
|
|
1
|
+
import React from "react";
|
2
|
+
import { PbCircleChart, colors } from "playbook-ui";
|
3
|
+
|
4
|
+
const data= [
|
5
|
+
{
|
6
|
+
name: "Waiting for Calls",
|
7
|
+
y: 41,
|
8
|
+
},
|
9
|
+
{
|
10
|
+
name: "On Call",
|
11
|
+
y: 49,
|
12
|
+
},
|
13
|
+
{
|
14
|
+
name: "After Call",
|
15
|
+
y: 10,
|
16
|
+
},
|
17
|
+
]
|
18
|
+
|
19
|
+
|
20
|
+
const PbCircleChartColorOverrides = (props) => {
|
21
|
+
const chartOptions = {
|
22
|
+
series: [{ data: data }],
|
23
|
+
plotOptions: {
|
24
|
+
pie: {
|
25
|
+
colors: ["#144075", colors.data_4, colors.data_2], // Custom colors via hex OR Playbook color tokens
|
26
|
+
},
|
27
|
+
},
|
28
|
+
};
|
29
|
+
|
30
|
+
return (
|
31
|
+
<div>
|
32
|
+
<PbCircleChart
|
33
|
+
options={chartOptions}
|
34
|
+
{...props}
|
35
|
+
/>
|
36
|
+
</div>
|
37
|
+
);
|
38
|
+
}
|
39
|
+
|
40
|
+
export default PbCircleChartColorOverrides;
|
@@ -0,0 +1,5 @@
|
|
1
|
+
Custom data colors allow for color customization to match the needs of business requirements.
|
2
|
+
|
3
|
+
For React, import the colors from Playbook's tokens, then set custom colors in the plotOptions.pie.colors array using the desired color variables.
|
4
|
+
|
5
|
+
For Rails, only HEX colors can be used eg: `#CA0095`
|
@@ -0,0 +1,27 @@
|
|
1
|
+
|
2
|
+
<% data = [
|
3
|
+
{
|
4
|
+
name: 'Waiting for Calls',
|
5
|
+
y: 41,
|
6
|
+
},
|
7
|
+
{
|
8
|
+
name: 'On Call',
|
9
|
+
y: 49,
|
10
|
+
},
|
11
|
+
{
|
12
|
+
name: 'After Call',
|
13
|
+
y: 10,
|
14
|
+
},
|
15
|
+
] %>
|
16
|
+
|
17
|
+
<% chart_options = {
|
18
|
+
series: [{ data: data }],
|
19
|
+
tooltip: {
|
20
|
+
headerFormat: nil,
|
21
|
+
pointFormat: '<p>Custom tooltip for {point.name} <br/>with value: {point.y}</p>',
|
22
|
+
useHTML: true,
|
23
|
+
},
|
24
|
+
} %>
|
25
|
+
|
26
|
+
|
27
|
+
<%= pb_rails("pb_circle_chart", props: { options: chart_options }) %>
|
@@ -0,0 +1,39 @@
|
|
1
|
+
import React from "react";
|
2
|
+
import { PbCircleChart } from "playbook-ui";
|
3
|
+
|
4
|
+
const data = [
|
5
|
+
{
|
6
|
+
name: 'Waiting for Calls',
|
7
|
+
y: 41,
|
8
|
+
},
|
9
|
+
{
|
10
|
+
name: 'On Call',
|
11
|
+
y: 49,
|
12
|
+
},
|
13
|
+
{
|
14
|
+
name: 'After Call',
|
15
|
+
y: 10,
|
16
|
+
},
|
17
|
+
]
|
18
|
+
|
19
|
+
const PbCircleChartCustomTooltip = (props) => {
|
20
|
+
const chartOptions = {
|
21
|
+
series: [{ data: data }],
|
22
|
+
tooltip: {
|
23
|
+
headerFormat: null,
|
24
|
+
pointFormat: '<p>Custom tooltip for {point.name} <br/>with value: {point.y}</p>',
|
25
|
+
useHTML: true,
|
26
|
+
},
|
27
|
+
}
|
28
|
+
|
29
|
+
return (
|
30
|
+
<div>
|
31
|
+
<PbCircleChart
|
32
|
+
options={chartOptions}
|
33
|
+
{...props}
|
34
|
+
/>
|
35
|
+
</div>
|
36
|
+
);
|
37
|
+
};
|
38
|
+
|
39
|
+
export default PbCircleChartCustomTooltip;
|
@@ -0,0 +1,5 @@
|
|
1
|
+
Custom tooltip formatting is configured through the tooltip object in the chart options:
|
2
|
+
`headerFormat` **Type**: String | when set to null will disable the header.
|
3
|
+
`pointFormat` **Type**: String | defines the HTML template for each data point and supports custom HTML when `useHTML` is enabled.
|
4
|
+
`useHTML` **Type**: boolean (default false) | enables HTML rendering in tooltips.
|
5
|
+
`{point.name}` and `{point.y}` are useful values that can be referenced for each point in the graph.
|