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.
Files changed (86) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +3 -2
  3. data/app/pb_kits/playbook/pb_advanced_table/Components/RegularTableView.tsx +11 -12
  4. data/app/pb_kits/playbook/pb_advanced_table/Components/VirtualizedTableView.tsx +7 -7
  5. data/app/pb_kits/playbook/pb_advanced_table/Utilities/RowUtils.ts +2 -7
  6. data/app/pb_kits/playbook/pb_bar_graph/docs/example.yml +1 -0
  7. data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +4 -6
  8. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx +0 -9
  9. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.html.erb +3 -3
  10. data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +0 -1
  11. data/app/pb_kits/playbook/pb_pb_circle_chart/_pb_circle_chart.scss +3 -0
  12. data/app/pb_kits/playbook/pb_pb_circle_chart/_pb_circle_chart.tsx +62 -0
  13. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_block_content.html.erb +31 -0
  14. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_block_content.jsx +81 -0
  15. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.html.erb +25 -0
  16. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.jsx +40 -0
  17. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.md +5 -0
  18. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_custom_tooltip.html.erb +27 -0
  19. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_custom_tooltip.jsx +39 -0
  20. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_custom_tooltip.md +5 -0
  21. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_legend_position.html.erb +93 -0
  22. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_legend_position.jsx +131 -0
  23. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_legend_position.md +14 -0
  24. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_labels.html.erb +42 -0
  25. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_labels.jsx +58 -0
  26. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_legend.html.erb +24 -0
  27. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_legend.jsx +38 -0
  28. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_default.html.erb +22 -0
  29. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_default.jsx +33 -0
  30. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_inner_sizes.html.erb +118 -0
  31. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_inner_sizes.jsx +144 -0
  32. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_live_data.jsx +60 -0
  33. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_rounded.html.erb +24 -0
  34. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_rounded.jsx +42 -0
  35. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_with_title.html.erb +38 -0
  36. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_with_title.jsx +52 -0
  37. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/example.yml +29 -0
  38. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/index.js +11 -0
  39. data/app/pb_kits/playbook/pb_pb_circle_chart/pbCircleChartTheme.ts +88 -0
  40. data/app/pb_kits/playbook/pb_pb_circle_chart/pb_circle_chart.html.erb +1 -0
  41. data/app/pb_kits/playbook/{pb_pb_bar_graph/pb_bar_graph.rb → pb_pb_circle_chart/pb_circle_chart.rb} +3 -3
  42. data/app/pb_kits/playbook/pb_pb_circle_chart/pb_circle_chart.test.jsx +51 -0
  43. data/dist/chunks/{_line_graph-BBny-YYZ.js → _line_graph-B5Dr0Huy.js} +1 -1
  44. data/dist/chunks/{_typeahead-CeyJ6-GF.js → _typeahead-GbjDoSSQ.js} +2 -2
  45. data/dist/chunks/{_weekday_stacked-BZw0f9oB.js → _weekday_stacked-DjQv3Sok.js} +3 -3
  46. data/dist/chunks/vendor.js +1 -1
  47. data/dist/menu.yml +7 -9
  48. data/dist/playbook-doc.js +2 -2
  49. data/dist/playbook-rails-react-bindings.js +1 -1
  50. data/dist/playbook-rails.js +1 -1
  51. data/dist/playbook.css +1 -1
  52. data/lib/playbook/forms/builder/form_field_builder.rb +1 -9
  53. data/lib/playbook/version.rb +1 -1
  54. metadata +37 -38
  55. data/app/pb_kits/playbook/pb_pb_bar_graph/_pb_bar_graph.scss +0 -0
  56. data/app/pb_kits/playbook/pb_pb_bar_graph/_pb_bar_graph.tsx +0 -62
  57. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors.html.erb +0 -35
  58. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors.jsx +0 -49
  59. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors_rails.md +0 -1
  60. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors_react.md +0 -2
  61. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_default.html.erb +0 -38
  62. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_default.jsx +0 -51
  63. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_height.html.erb +0 -46
  64. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_height.jsx +0 -62
  65. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_height.md +0 -3
  66. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_horizontal.html.erb +0 -47
  67. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_horizontal.jsx +0 -60
  68. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend.html.erb +0 -25
  69. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend.jsx +0 -36
  70. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_non_clickable.jsx +0 -44
  71. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_position.html.erb +0 -100
  72. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_position.jsx +0 -126
  73. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_negative_numbers.html.erb +0 -32
  74. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_negative_numbers.jsx +0 -48
  75. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_secondary_y_axis.html.erb +0 -68
  76. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_secondary_y_axis.jsx +0 -81
  77. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_spline.html.erb +0 -31
  78. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_spline.jsx +0 -42
  79. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_spline.md +0 -2
  80. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_stacked.html.erb +0 -35
  81. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_stacked.jsx +0 -51
  82. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/example.yml +0 -27
  83. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/index.js +0 -11
  84. data/app/pb_kits/playbook/pb_pb_bar_graph/pbBarGraphTheme.ts +0 -106
  85. data/app/pb_kits/playbook/pb_pb_bar_graph/pb_bar_graph.html.erb +0 -1
  86. 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: 982344fe138179bc21bb46402ac4d6e897531ab4a6ed64d34177f0be9aa9d577
4
- data.tar.gz: df3971a42e4036f06a4f704bb8ef50d78365b666344b19b1aacda4679443bca9
3
+ metadata.gz: c2160795c8e7884b53baf24a0caf41501a31484abfc2558b1cda1eb92c78e156
4
+ data.tar.gz: 0bd79d78760dc7617e1ab5a232a703ebb5c20fda537b2bcc8e45d0f69dc36260
5
5
  SHA512:
6
- metadata.gz: ee369ee9ccf522bbc8fa3c57e6b0022801088391b8cac6663840ca9497e56acf5a1aaded868b0075edf27eb52c27525fa9848ccc6ad0b74882920571c369344c
7
- data.tar.gz: e15b63750ce6b4bce43d5e4a729b5d6791389c769af14fb46e2bd037ff7e8c647bb70c4ed0d05445fc71e76bcb8f2f93dcfbb21008e515b1f29edd6e08cfcfb6
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 'pb_empty_state/empty_state';
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}-loading-row`}>
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
- // Use the utility function to get consistent row color
178
- const rowColor = getRowColorClass(row, inlineRowLoading || false);
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
- // Check if row can expand or is currently expanded
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
- {!hideLabel && (
214
- <Caption
215
- className="pb_date_picker_kit_label"
216
- text={label}
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(:div, "aria-atomic": "true", "aria-live": "polite", role: "status", tabindex: 0, onkeydown: "if(event.key==='Enter'||event.key===' '){ this.remove(); }" ) do %>
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, aria: { "aria-label": "#{object.icon_value} icon" } }) %>
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, aria: { "aria-label": "Close Toast" } }) if object.closeable %>
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,3 @@
1
+ .pb_pb_circle_chart {
2
+
3
+ }
@@ -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.