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.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/_playbook.scss +1 -0
- data/app/pb_kits/playbook/pb_advanced_table/Components/RegularTableView.tsx +12 -11
- data/app/pb_kits/playbook/pb_advanced_table/Components/VirtualizedTableView.tsx +8 -8
- data/app/pb_kits/playbook/pb_advanced_table/Utilities/RowUtils.ts +7 -2
- data/app/pb_kits/playbook/pb_bar_graph/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +6 -4
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx +9 -0
- 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 +1 -0
- 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 +62 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors.html.erb +35 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors.jsx +49 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors_rails.md +1 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors_react.md +2 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_default.html.erb +38 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_default.jsx +51 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_height.html.erb +46 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_height.jsx +62 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_height.md +3 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_horizontal.html.erb +47 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_horizontal.jsx +60 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend.html.erb +25 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend.jsx +36 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_non_clickable.jsx +44 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_position.html.erb +100 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_position.jsx +126 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_negative_numbers.html.erb +32 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_negative_numbers.jsx +48 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_secondary_y_axis.html.erb +68 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_secondary_y_axis.jsx +81 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_spline.html.erb +31 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_spline.jsx +42 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_spline.md +2 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_stacked.html.erb +35 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_stacked.jsx +51 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/example.yml +27 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/index.js +11 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/pbBarGraphTheme.ts +106 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/pb_bar_graph.html.erb +1 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/pb_bar_graph.rb +28 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/pbbargraph.test.jsx +31 -0
- data/dist/chunks/{_line_graph-B-n_nsLR.js → _line_graph-BBny-YYZ.js} +1 -1
- data/dist/chunks/{_typeahead-CS9PvM1x.js → _typeahead-CeyJ6-GF.js} +2 -2
- data/dist/chunks/{_weekday_stacked-DaFBilv5.js → _weekday_stacked-Dfq9Ls3V.js} +3 -3
- data/dist/chunks/vendor.js +1 -1
- data/dist/menu.yml +9 -1
- data/dist/playbook-doc.js +2 -2
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/lib/playbook/forms/builder/form_field_builder.rb +10 -29
- data/lib/playbook/version.rb +1 -1
- metadata +38 -5
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: f3ed0631c51b54669ffc7faa87720d44235290b760f64df26d8cad1af3e527d5
|
4
|
+
data.tar.gz: 06da8419d842a780b2e5567affe683a5c28e227400a5231f82bdc6d920411186
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
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
|
-
},
|
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
|
-
|
176
|
-
|
177
|
-
const
|
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
|
-
|
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
|
-
|
214
|
-
|
215
|
-
|
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 } %>
|
File without changes
|
@@ -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,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}) %>
|