playbook_ui 15.0.0.pre.alpha.PLAY2453formtextfieldtextinputprops10419 → 15.0.0.pre.alpha.PLAY2473rowhighlightfix10510

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 (54) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +1 -0
  3. data/app/pb_kits/playbook/pb_advanced_table/Components/RegularTableView.tsx +12 -11
  4. data/app/pb_kits/playbook/pb_advanced_table/Components/VirtualizedTableView.tsx +8 -8
  5. data/app/pb_kits/playbook/pb_advanced_table/Utilities/RowUtils.ts +7 -2
  6. data/app/pb_kits/playbook/pb_bar_graph/docs/example.yml +0 -1
  7. data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +6 -4
  8. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx +9 -0
  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 +1 -0
  11. data/app/pb_kits/playbook/pb_pb_bar_graph/_pb_bar_graph.scss +0 -0
  12. data/app/pb_kits/playbook/pb_pb_bar_graph/_pb_bar_graph.tsx +62 -0
  13. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors.html.erb +35 -0
  14. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors.jsx +49 -0
  15. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors_rails.md +1 -0
  16. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors_react.md +2 -0
  17. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_default.html.erb +38 -0
  18. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_default.jsx +51 -0
  19. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_height.html.erb +46 -0
  20. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_height.jsx +62 -0
  21. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_height.md +3 -0
  22. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_horizontal.html.erb +47 -0
  23. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_horizontal.jsx +60 -0
  24. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend.html.erb +25 -0
  25. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend.jsx +36 -0
  26. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_non_clickable.jsx +44 -0
  27. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_position.html.erb +100 -0
  28. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_position.jsx +126 -0
  29. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_negative_numbers.html.erb +32 -0
  30. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_negative_numbers.jsx +48 -0
  31. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_secondary_y_axis.html.erb +68 -0
  32. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_secondary_y_axis.jsx +81 -0
  33. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_spline.html.erb +31 -0
  34. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_spline.jsx +42 -0
  35. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_spline.md +2 -0
  36. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_stacked.html.erb +35 -0
  37. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_stacked.jsx +51 -0
  38. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/example.yml +27 -0
  39. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/index.js +11 -0
  40. data/app/pb_kits/playbook/pb_pb_bar_graph/pbBarGraphTheme.ts +106 -0
  41. data/app/pb_kits/playbook/pb_pb_bar_graph/pb_bar_graph.html.erb +1 -0
  42. data/app/pb_kits/playbook/pb_pb_bar_graph/pb_bar_graph.rb +28 -0
  43. data/app/pb_kits/playbook/pb_pb_bar_graph/pbbargraph.test.jsx +31 -0
  44. data/dist/chunks/{_line_graph-B-n_nsLR.js → _line_graph-BBny-YYZ.js} +1 -1
  45. data/dist/chunks/{_typeahead-CS9PvM1x.js → _typeahead-CeyJ6-GF.js} +2 -2
  46. data/dist/chunks/{_weekday_stacked-DaFBilv5.js → _weekday_stacked-Dfq9Ls3V.js} +3 -3
  47. data/dist/chunks/vendor.js +1 -1
  48. data/dist/menu.yml +9 -1
  49. data/dist/playbook-doc.js +2 -2
  50. data/dist/playbook-rails-react-bindings.js +1 -1
  51. data/dist/playbook-rails.js +1 -1
  52. data/lib/playbook/forms/builder/form_field_builder.rb +10 -29
  53. data/lib/playbook/version.rb +1 -1
  54. metadata +38 -5
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 54fcd1f906850aef4a0cb6bed59528aba515ecad3d77d7b683aec6ad648c35f7
4
- data.tar.gz: 44872dba3a60477e53e025edbede11499ebfb6222726bcd75c1182ba240f4b87
3
+ metadata.gz: f3ed0631c51b54669ffc7faa87720d44235290b760f64df26d8cad1af3e527d5
4
+ data.tar.gz: 06da8419d842a780b2e5567affe683a5c28e227400a5231f82bdc6d920411186
5
5
  SHA512:
6
- metadata.gz: 73dca3aa1816d3ff4bc58fe03c114d7e82a76d48fec71fa41944f483dfc825d21f8bae7a3ba68dfe66f82edc77971c753b8101f3fe6bf16231912ec15b21f105
7
- data.tar.gz: 5a3824c690ae7f0fb824d02fafb68c7efce49b3bd84ee494c69e1ab9aa871f473ba05962eb041a4bcba1a8cb51d858a43140ed989d455e10d94d61f19e02352b
6
+ metadata.gz: 2ac52928a5ea5c597a37469b85f6509cbd26236e7e5195b9636d8409cfc7ad513d22ddb4a7889f47bf12d7d1fca748704fcd72007b89acef5e66a93cf4681db4
7
+ data.tar.gz: faa7715595570f694456f0d9a19430c3ff0b7cbdf66ab1f63e8a843110541e1da10fb22149e004069bc82dd8a27a7469f279e9fd41957befdcca61d3f21b8038
@@ -108,6 +108,7 @@
108
108
  @import 'pb_user_badge/user_badge';
109
109
  @import 'pb_weekday_stacked/weekday_stacked';
110
110
  @import 'pb_empty_state/empty_state';
111
+ @import 'pb_pb_bar_graph/pb_bar_graph';
111
112
  @import 'utilities/mixins';
112
113
  @import 'utilities/spacing';
113
114
  @import 'utilities/cursor';
@@ -5,6 +5,7 @@ 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"
8
9
 
9
10
  import LoadingInline from "../../pb_loading_inline/_loading_inline"
10
11
  import Checkbox from "../../pb_checkbox/_checkbox"
@@ -60,7 +61,7 @@ const TableCellRenderer = ({
60
61
  const cellAlignment = colDef?.columnStyling?.cellAlignment ?? "right"
61
62
  const paddingValue = colDef?.columnStyling?.cellPadding ?? customRowStyle?.cellPadding
62
63
  const paddingClass = paddingValue ? `p_${paddingValue}` : undefined
63
-
64
+
64
65
  return (
65
66
  <td
66
67
  align={cellAlignment}
@@ -132,6 +133,7 @@ export const RegularTableView = ({
132
133
 
133
134
  const columnPinning = table.getState().columnPinning || { left: [] };
134
135
  const columnDefinitions = table.options.meta?.columnDefinitions || [];
136
+
135
137
  // Row pinning
136
138
  function PinnedRow({ row }: { row: Row<any> }) {
137
139
  const customRowStyle = rowStyling?.length > 0 && rowStyling?.find((s: GenericObject) => s?.rowId === row.id);
@@ -144,7 +146,7 @@ export const RegularTableView = ({
144
146
  backgroundColor: customRowStyle?.backgroundColor ? customRowStyle?.backgroundColor : 'white',
145
147
  color: customRowStyle?.fontColor,
146
148
  position: 'sticky',
147
- top:
149
+ top:
148
150
  row.getIsPinned() === 'top'
149
151
  ? `${row.getPinnedIndex() * rowHeight + headerHeight}px`
150
152
  : undefined,
@@ -169,21 +171,20 @@ export const RegularTableView = ({
169
171
  return (
170
172
  <>
171
173
  {pinnedRows && table.getTopRows().map((row: Row<GenericObject>) => (
172
- <PinnedRow key={row.id}
173
- row={row}
174
+ <PinnedRow key={row.id}
175
+ row={row}
174
176
  />
175
177
  ))}
176
178
  {totalRows.map((row: Row<GenericObject>, rowIndex: number) => {
177
- const isExpandable = row.getIsExpanded();
178
179
  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";
184
181
  const isFirstRegularRow = rowIndex === 0 && !row.getIsPinned();
185
182
  const customRowStyle = rowStyling?.length > 0 && rowStyling?.find((s: GenericObject) => s?.rowId === row.id);
186
183
 
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
+
187
188
  return (
188
189
  <React.Fragment key={`${row.index}-${row.id}-${row.depth}-row`}>
189
190
  {isFirstChildofSubrow && subRowHeaders && (
@@ -228,7 +229,7 @@ export const RegularTableView = ({
228
229
 
229
230
  {/* Display LoadingInline if Row Data is querying and there are no children already */}
230
231
  {isDataLoading && (
231
- <tr key={`${row.id}-row`}>
232
+ <tr key={`${row.id}-loading-row`}>
232
233
  <td colSpan={numberOfColumns}
233
234
  style={{ paddingLeft: `${row.depth === 0 ? 0.5 : (row.depth * 2)}em` }}
234
235
  >
@@ -243,4 +244,4 @@ export const RegularTableView = ({
243
244
  );
244
245
  }
245
246
 
246
- export default RegularTableView;
247
+ export default RegularTableView;
@@ -7,6 +7,7 @@ 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"
10
11
 
11
12
  import LoadingInline from "../../pb_loading_inline/_loading_inline"
12
13
  import Checkbox from "../../pb_checkbox/_checkbox"
@@ -45,10 +46,10 @@ export const VirtualizedTableView = ({
45
46
 
46
47
  const columnPinning = table.getState().columnPinning || { left: [] };
47
48
  const sortingState = JSON.stringify(table.getState().sorting || []);
48
-
49
+
49
50
  // Store column widths extracted from header
50
51
  const [columnWidths, setColumnWidths] = useState<{[key: string]: string}>({});
51
-
52
+
52
53
  // Function to get header cell widths
53
54
  const getHeaderCellWidths = () => {
54
55
  const widths: {[key: string]: string} = {};
@@ -103,7 +104,7 @@ export const VirtualizedTableView = ({
103
104
  // Create debounced version of the width measurement function
104
105
  const handleResize = debounce(() => {
105
106
  setColumnWidths(getHeaderCellWidths());
106
- }, 0);
107
+ }, 100);
107
108
 
108
109
  // Add the event listener
109
110
  window.addEventListener('resize', handleResize);
@@ -136,7 +137,7 @@ export const VirtualizedTableView = ({
136
137
  </tr>
137
138
  );
138
139
  }
139
-
140
+
140
141
  // Establish # of Parent Rows (so that Footer count does not include every single row)
141
142
  const topLevelRowCount = table.getRowModel().flatRows.filter((row: Row<GenericObject>) => row.depth === 0).length;
142
143
 
@@ -172,10 +173,9 @@ export const VirtualizedTableView = ({
172
173
 
173
174
  if (item.type === 'row') {
174
175
  const row = item.row;
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";
176
+
177
+ // Use the utility function to get consistent row color
178
+ const rowColor = getRowColorClass(row, inlineRowLoading || false);
179
179
 
180
180
  return (
181
181
  <tr
@@ -10,9 +10,14 @@ 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));
14
13
 
15
- return row.getIsSelected() ? "bg-row-selection" : rowBackground ? "bg-silver" : "bg-white";
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";
16
21
  }
17
22
 
18
23
  /**
@@ -4,7 +4,6 @@ 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
8
7
  - bar_graph_height: Height
9
8
  - bar_graph_spline: Spline
10
9
  - bar_graph_colors: Color Overrides
@@ -210,10 +210,12 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
210
210
  className="input_wrapper"
211
211
  >
212
212
 
213
- <Caption
214
- className="pb_date_picker_kit_label"
215
- text={hideLabel ? null : label}
216
- />
213
+ {!hideLabel && (
214
+ <Caption
215
+ className="pb_date_picker_kit_label"
216
+ text={label}
217
+ />
218
+ )}
217
219
  <>
218
220
  <div className="date_picker_input_wrapper">
219
221
  <input
@@ -35,6 +35,7 @@ type FixedConfirmationToastProps = {
35
35
 
36
36
  const FixedConfirmationToast = (props: FixedConfirmationToastProps): React.ReactElement => {
37
37
  const [showToast, toggleToast] = useState(true);
38
+
38
39
  const {
39
40
  autoClose = 0,
40
41
  children,
@@ -87,8 +88,15 @@ const FixedConfirmationToast = (props: FixedConfirmationToastProps): React.React
87
88
  <>
88
89
  {showToast && (
89
90
  <div
91
+ aria-atomic="true"
92
+ aria-live="polite"
90
93
  className={css}
91
94
  onClick={handleClick}
95
+ onKeyDown={(e) => {
96
+ if (e.key === "Enter" || e.key === " ") handleClick();
97
+ }}
98
+ role="status"
99
+ tabIndex={0}
92
100
  {...htmlProps}
93
101
  >
94
102
  {returnedIcon && icon !== "none" && (
@@ -111,6 +119,7 @@ const FixedConfirmationToast = (props: FixedConfirmationToastProps): React.React
111
119
 
112
120
  {closeable && (
113
121
  <Icon
122
+ aria={{ "label": "Close Toast" }}
114
123
  className="pb_icon"
115
124
  cursor="pointer"
116
125
  fixedWidth={false}
@@ -1,6 +1,6 @@
1
- <%= pb_content_tag do %>
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 %>
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, aria: { "aria-label": "#{object.icon_value} icon" } }) %>
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 }) if object.closeable %>
11
+ <%= pb_rails("icon", props: { icon: "times", classname: "pb_icon", cursor: "pointer", fixed_width: true, aria: { "aria-label": "Close Toast" } }) if object.closeable %>
12
12
  <% end %>
@@ -91,6 +91,7 @@
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" } %>
94
95
  <%= form.phone_number_field :example_phone_number_field, props: { label: "Example phone field", hidden_inputs: true } %>
95
96
  <%= form.email_field :example_email_field, props: { label: true } %>
96
97
  <%= form.number_field :example_number_field, props: { label: true } %>
@@ -0,0 +1,62 @@
1
+ import React, { useMemo } from "react"
2
+ import { globalProps } from "../utilities/globalProps";
3
+ import { buildAriaProps, buildDataProps, buildHtmlProps } from "../utilities/props";
4
+ import Highcharts from "highcharts"
5
+ import HighchartsReact from "highcharts-react-official"
6
+
7
+ import pbBarGraphTheme from "./pbBarGraphTheme"
8
+
9
+ import classnames from "classnames";
10
+
11
+ type PbBarGraphProps = {
12
+
13
+ options: Record<string, unknown>
14
+ className?: string
15
+ aria?: { [key: string]: string };
16
+ data?: { [key: string]: string };
17
+ id: string;
18
+ htmlOptions?: {[key: string]: string | number | boolean | (() => void)};
19
+ }
20
+
21
+ const PbBarGraph = ({
22
+ aria = {},
23
+ data = {},
24
+ id,
25
+ htmlOptions = {},
26
+ options,
27
+ className = "pb_pb_bar_graph",
28
+ }: PbBarGraphProps): React.ReactElement => {
29
+
30
+ const ariaProps = buildAriaProps(aria);
31
+ const dataProps = buildDataProps(data)
32
+ const htmlProps = buildHtmlProps(htmlOptions);
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 <BarGraph />", options)
38
+ return {}
39
+ }
40
+
41
+ return Highcharts.merge({}, pbBarGraphTheme, 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 PbBarGraph
@@ -0,0 +1,35 @@
1
+ <% chart_data = [{
2
+ name: 'Installation',
3
+ data: [1475,200,3000,654,656]
4
+ }, {
5
+ name: 'Manufacturing',
6
+ data: [4434,524,2320,440,500]
7
+ }, {
8
+ name: 'Sales & Distribution',
9
+ data: [3387,743,1344,434,440,]
10
+ }, {
11
+ name: 'Project Development',
12
+ data: [3227,878,999,780,1000]
13
+ }, {
14
+ name: 'Other',
15
+ data: [1111,677,3245,500,200]
16
+ }] %>
17
+
18
+ <% chart_options = {
19
+ series: chart_data,
20
+ title: {
21
+ text: "Bar Graph with Custom Data Colors",
22
+ },
23
+ xAxis: {
24
+ categories: ["Jan", "Feb", "Mar", "Apr", "May"],
25
+ },
26
+ yAxis: {
27
+ title: {
28
+ text: "Number of Employees",
29
+ },
30
+ },
31
+ colors: ['#1CA05C', '#FD804C', '#144075', '#00C4D7', '#DA0014'],
32
+ }
33
+ %>
34
+
35
+ <%= pb_rails("pb_bar_graph", props: {options: chart_options}) %>
@@ -0,0 +1,49 @@
1
+ import React from 'react'
2
+ import { PbBarGraph } from 'playbook-ui'
3
+ import colors from '../../tokens/exports/_colors.module.scss'
4
+
5
+ const chartData = [{
6
+ name: 'Installation',
7
+ data: [1475, 200, 3000, 654, 656],
8
+ }, {
9
+ name: 'Manufacturing',
10
+ data: [4434, 524, 2320, 440, 500],
11
+ }, {
12
+ name: 'Sales & Distribution',
13
+ data: [3387, 743, 1344, 434, 440],
14
+ }, {
15
+ name: 'Project Development',
16
+ data: [3227, 878, 999, 780, 1000],
17
+ }, {
18
+ name: 'Other',
19
+ data: [1111, 677, 3245, 500, 200],
20
+ }]
21
+
22
+ const chartOptions = {
23
+ series: chartData,
24
+ title: {
25
+ text: "Bar Graph with Custom Data Colors",
26
+ },
27
+ xAxis: {
28
+ categories: ["Jan", "Feb", "Mar", "Apr", "May"],
29
+ },
30
+ yAxis: {
31
+ title: {
32
+ text: "Number of Employees",
33
+ },
34
+ },
35
+ colors: [colors.data_4, colors.data_5, colors.data_6, colors.data_7, colors.data_8],
36
+ }
37
+
38
+ const PbBarGraphColors = () => {
39
+
40
+ return (
41
+ <div>
42
+ <PbBarGraph
43
+ options={chartOptions}
44
+ />
45
+ </div>
46
+ )
47
+ }
48
+
49
+ export default PbBarGraphColors
@@ -0,0 +1 @@
1
+ Custom data colors allow for color customization to match the needs of business requirements. To accomplish this, you can use hex values.
@@ -0,0 +1,2 @@
1
+ Custom data colors allow for color customization to match the needs of business requirements.
2
+ You can use Playbook's color tokens or use hex values.
@@ -0,0 +1,38 @@
1
+ <% chart_data = [{
2
+ name: 'Installation',
3
+ data: [1475,200,3000,654,656]
4
+ }, {
5
+ name: 'Manufacturing',
6
+ data: [4434,524,2320,440,500]
7
+ }, {
8
+ name: 'Sales & Distribution',
9
+ data: [3387,743,1344,434,440,]
10
+ }, {
11
+ name: 'Project Development',
12
+ data: [3227,878,999,780,1000]
13
+ }, {
14
+ name: 'Other',
15
+ data: [1111,677,3245,500,200]
16
+ }] %>
17
+
18
+
19
+ <% chart_options = {
20
+ series: chart_data,
21
+ title: {
22
+ text: 'Solar Employment Growth by Sector, 2010-2016',
23
+ },
24
+ subtitle: {
25
+ text: 'Source: thesolarfoundation.com',
26
+ },
27
+ xAxis: {
28
+ categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
29
+ },
30
+ yAxis: {
31
+ title: {
32
+ text: 'Number of Employees',
33
+ },
34
+ },
35
+ }
36
+ %>
37
+
38
+ <%= pb_rails("pb_bar_graph", props: {options: chart_options}) %>
@@ -0,0 +1,51 @@
1
+ import React from 'react'
2
+ import { PbBarGraph } from 'playbook-ui'
3
+
4
+ const chartData = [{
5
+ name: 'Installation',
6
+ data: [1475, 200, 3000, 654, 656],
7
+ }, {
8
+ name: 'Manufacturing',
9
+ data: [4434, 524, 2320, 440, 500],
10
+ }, {
11
+ name: 'Sales & Distribution',
12
+ data: [3387, 743, 1344, 434, 440],
13
+ }, {
14
+ name: 'Project Development',
15
+ data: [3227, 878, 999, 780, 1000],
16
+ }, {
17
+ name: 'Other',
18
+ data: [1111, 677, 3245, 500, 200],
19
+ }]
20
+
21
+ const chartOptions = {
22
+ series: chartData,
23
+ title: {
24
+ text: 'Solar Employment Growth by Sector, 2010-2016',
25
+ },
26
+ subtitle: {
27
+ text: 'Source: thesolarfoundation.com',
28
+ },
29
+ xAxis: {
30
+ categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
31
+ },
32
+ yAxis: {
33
+ title: {
34
+ text: 'Number of Employees',
35
+ },
36
+ },
37
+ }
38
+
39
+ const PbBarGraphDefault = (props) => {
40
+
41
+ return (
42
+ <div>
43
+ <PbBarGraph
44
+ {...props}
45
+ options={chartOptions}
46
+ />
47
+ </div>
48
+ )
49
+ }
50
+
51
+ export default PbBarGraphDefault
@@ -0,0 +1,46 @@
1
+ <% chart_data = [{
2
+ name: 'Number of Installations',
3
+ data: [1475,200,3000,654,656]
4
+ }] %>
5
+
6
+ <% chart_options_pixel = {
7
+ chart: {
8
+ height: "300"
9
+ },
10
+ series: chart_data,
11
+ title: {
12
+ text: "Fixed Height (300px)",
13
+ },
14
+ xAxis: {
15
+ categories: ["Jan", "Feb", "Mar", "Apr", "May"],
16
+ },
17
+ yAxis: {
18
+ title: {
19
+ text: "Number of Employees",
20
+ },
21
+ }
22
+ } %>
23
+
24
+ <%= pb_rails("pb_bar_graph", props: {options: chart_options_pixel}) %>
25
+
26
+ <br /><br />
27
+
28
+ <% chart_options_percentage = {
29
+ chart: {
30
+ height: "50%"
31
+ },
32
+ series: chart_data,
33
+ title: {
34
+ text: "Percentage Height (50%)",
35
+ },
36
+ xAxis: {
37
+ categories: ["Jan", "Feb", "Mar", "Apr", "May"],
38
+ },
39
+ yAxis: {
40
+ title: {
41
+ text: "Number of Employees",
42
+ },
43
+ }
44
+ } %>
45
+
46
+ <%= pb_rails("pb_bar_graph", props: {options: chart_options_percentage}) %>
@@ -0,0 +1,62 @@
1
+ import React from 'react'
2
+ import { PbBarGraph } from 'playbook-ui'
3
+
4
+ const chartData = [{
5
+ name: 'Number of Installations',
6
+ data: [1475, 200, 3000, 654, 656],
7
+ }]
8
+
9
+ const pixelHeightChartOptions = {
10
+ chart: {
11
+ height: "300"
12
+ },
13
+ series: chartData,
14
+ title: {
15
+ text: "Fixed Height (300px)",
16
+ },
17
+ xAxis: {
18
+ categories: ["Jan", "Feb", "Mar", "Apr", "May"],
19
+ },
20
+ yAxis: {
21
+ title: {
22
+ text: "Number of Employees",
23
+ },
24
+ },
25
+ };
26
+
27
+ const percentageHeightChartOptions = {
28
+ chart: {
29
+ height: "50%"
30
+ },
31
+ series: chartData,
32
+ title: {
33
+ text: "Percentage Height (50%)",
34
+ },
35
+ xAxis: {
36
+ categories: ["Jan", "Feb", "Mar", "Apr", "May"],
37
+ },
38
+ yAxis: {
39
+ title: {
40
+ text: "Number of Employees",
41
+ },
42
+ },
43
+ };
44
+
45
+
46
+
47
+ const PbBarGraphHeight = () => (
48
+ <div>
49
+ <PbBarGraph
50
+ options={pixelHeightChartOptions}
51
+ />
52
+
53
+ <br />
54
+ <br />
55
+
56
+ <PbBarGraph
57
+ options={percentageHeightChartOptions}
58
+ />
59
+ </div>
60
+ )
61
+
62
+ export default PbBarGraphHeight
@@ -0,0 +1,3 @@
1
+ By default, Highcharts have a height of 400px, but this can be customized. You can override the default by specifying either a percentage or a fixed pixel value.
2
+
3
+ Using a percentage maintains a consistent aspect ratio across different responsive sizes. For example, setting the height to 50% makes the chart’s height half of its width.
@@ -0,0 +1,47 @@
1
+ <% chart_options = {
2
+ chart: {
3
+ type: 'bar'
4
+ },
5
+ title: {
6
+ text: 'Historic World Population by Region',
7
+ align: 'left'
8
+ },
9
+ subtitle: {
10
+ text: 'Source: <a ' +
11
+ 'href="https://en.wikipedia.org/wiki/List_of_continents_and_continental_subregions_by_population"' +
12
+ 'target="_blank">Wikipedia.org</a>',
13
+ align: 'left'
14
+ },
15
+ xAxis: {
16
+ categories: ['Africa', 'America', 'Asia', 'Europe'],
17
+ lineWidth: 0
18
+ },
19
+ yAxis: {
20
+ title: {
21
+ text: '',
22
+ },
23
+ },
24
+ tooltip: {
25
+ valueSuffix: ' millions'
26
+ },
27
+ plotOptions: {
28
+ bar: {
29
+ dataLabels: {
30
+ enabled: true
31
+ },
32
+ groupPadding: 0.1
33
+ }
34
+ },
35
+ series: [{
36
+ name: 'Year 1990',
37
+ data: [631, 727, 3202, 721]
38
+ }, {
39
+ name: 'Year 2000',
40
+ data: [814, 841, 3714, 726]
41
+ }, {
42
+ name: 'Year 2018',
43
+ data: [1276, 1007, 4561, 746]
44
+ }],
45
+ } %>
46
+
47
+ <%= pb_rails("pb_bar_graph", props: {options: chart_options}) %>