playbook_ui 15.2.0.pre.alpha.PLAY256411551 → 15.2.0.pre.alpha.advancedtableicons11557
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/pb_advanced_table/Components/CustomCell.tsx +3 -1
- data/app/pb_kits/playbook/pb_collapsible/__snapshots__/collapsible.test.js.snap +1 -1
- data/app/pb_kits/playbook/pb_dropdown/index.js +1 -1
- data/app/pb_kits/playbook/pb_icon/_icon.tsx +1 -1
- data/app/pb_kits/playbook/pb_icon/icon.rb +1 -1
- data/app/pb_kits/playbook/pb_popover/docs/_popover_list.html.erb +2 -2
- data/app/pb_kits/playbook/pb_selectable_list/selectable_list_item.html.erb +1 -1
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.test.jsx +1 -35
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx +2 -71
- data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +0 -2
- data/app/pb_kits/playbook/pb_typeahead/docs/index.js +0 -1
- data/dist/chunks/{_line_graph-DyF1XNPs.js → _line_graph-DtToukzQ.js} +1 -1
- data/dist/chunks/_typeahead-nqpbB2ym.js +6 -0
- data/dist/chunks/{_weekday_stacked-Mb4KAUYq.js → _weekday_stacked-DWHza5yt.js} +2 -2
- data/dist/chunks/vendor.js +1 -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/version.rb +1 -1
- metadata +4 -8
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default_options.html.erb +0 -36
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default_options.md +0 -1
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default_value.jsx +0 -41
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default_value.md +0 -1
- data/dist/chunks/_typeahead-CLPk2g9d.js +0 -6
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 6cb2388c16b10e1fb50d190edb64de13ddb59aaeeccf2b03d98691d1122bf3a0
|
|
4
|
+
data.tar.gz: 66b65c235dce558a8759487c1e1ed2e02e61a36a967a99d49628290afb875dcd
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 11d409bd621ad95e909a040ccd07acdfcf99e4634731cbfb80035ebdb4ce953471328f2f0526ef6e769f73839a8c69ee08f7de694d6ef0914550c27c880d4075
|
|
7
|
+
data.tar.gz: e94cb2b6918f6c3311990fba18f5cd27b57397dd40283c5760af2a155d4c5edddb7c51aba3babb977dc91ec2da4461c0870235c204d609587f8f376aca7a54cc
|
|
@@ -71,12 +71,14 @@ export const CustomCell = ({
|
|
|
71
71
|
>
|
|
72
72
|
{row.getIsExpanded() ? (
|
|
73
73
|
<Icon cursor="pointer"
|
|
74
|
+
fixedWidth
|
|
74
75
|
icon="circle-play"
|
|
75
76
|
rotation={90}
|
|
76
77
|
/>
|
|
77
78
|
) : (
|
|
78
79
|
<Icon cursor="pointer"
|
|
79
|
-
|
|
80
|
+
fixedWidth
|
|
81
|
+
icon="circle-play"
|
|
80
82
|
/>
|
|
81
83
|
)}
|
|
82
84
|
</button>
|
|
@@ -522,7 +522,7 @@ export default class PbDropdown extends PbEnhancedElement {
|
|
|
522
522
|
closeIcon.className = "pb_form_pill_close";
|
|
523
523
|
closeIcon.innerHTML = `<svg class="pb_custom_icon svg-inline--fa svg_${
|
|
524
524
|
this.formPillProps.size === "small" ? "xs" : "sm"
|
|
525
|
-
} svg_fw" xmlns="http://www.w3.org/2000/svg" width="
|
|
525
|
+
} svg_fw" xmlns="http://www.w3.org/2000/svg" width="1.5em" viewBox="0 0 31 25"><path fill="currentColor" d="M23.0762 6.77734L17.4512 12.4023L23.0293 17.9805C23.498 18.4023 23.498 19.1055 23.0293 19.5273C22.6074 19.9961 21.9043 19.9961 21.4824 19.5273L15.8574 13.9492L10.2793 19.5273C9.85742 19.9961 9.1543 19.9961 8.73242 19.5273C8.26367 19.1055 8.26367 18.4023 8.73242 17.9336L14.3105 12.3555L8.73242 6.77734C8.26367 6.35547 8.26367 5.65234 8.73242 5.18359C9.1543 4.76172 9.85742 4.76172 10.3262 5.18359L15.9043 10.8086L21.4824 5.23047C21.9043 4.76172 22.6074 4.76172 23.0762 5.23047C23.498 5.65234 23.498 6.35547 23.0762 6.77734Z"/></svg>`;
|
|
526
526
|
pill.appendChild(closeIcon);
|
|
527
527
|
|
|
528
528
|
closeIcon.addEventListener("click", (e) => {
|
|
@@ -110,7 +110,7 @@ module Playbook
|
|
|
110
110
|
svg["class"] = %w[pb_custom_icon svg-inline--fa].concat([object.custom_icon_classname]).join(" ")
|
|
111
111
|
svg["id"] = object.id
|
|
112
112
|
svg["data"] = object.data
|
|
113
|
-
svg["width"] = "
|
|
113
|
+
svg["width"] = "1.5em"
|
|
114
114
|
svg["tabindex"] = object.tabindex
|
|
115
115
|
fill_color = object.color || "currentColor"
|
|
116
116
|
doc.at_css("path")["fill"] = fill_color
|
|
@@ -28,9 +28,9 @@
|
|
|
28
28
|
popoverButton.onclick = () => {
|
|
29
29
|
buttonClicked = !buttonClicked
|
|
30
30
|
if (buttonClicked) {
|
|
31
|
-
arrowDiv.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="
|
|
31
|
+
arrowDiv.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="1.5em" viewBox="0 0 31 25" fill="none" class="pb_custom_icon svg-inline--fa pb_icon_kit svg_fw" id="" data="{}" aria="{}" tabindex=""><path d="M14.2031 5.70312C14.625 5.28125 15.3281 5.28125 15.75 5.70312L24.7969 14.7031C25.2188 15.1719 25.2188 15.875 24.7969 16.2969C24.3281 16.7656 23.625 16.7656 23.2031 16.2969L15 8.09375L6.79688 16.2969C6.32812 16.7656 5.625 16.7656 5.20312 16.2969C4.73438 15.875 4.73438 15.1719 5.20312 14.75L14.2031 5.70312Z" fill="currentColor"/></svg>'
|
|
32
32
|
} else {
|
|
33
|
-
arrowDiv.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="
|
|
33
|
+
arrowDiv.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="1.5em" viewBox="0 0 31 25" fill="none" class="pb_custom_icon svg-inline--fa pb_icon_kit svg_fw" id="" data="{}" aria="{}" tabindex=""><path d="M14.2031 19.2969L5.20312 10.2969C4.73438 9.875 4.73438 9.17188 5.20312 8.70312C5.625 8.28125 6.32812 8.28125 6.79688 8.70312L15 16.9531L23.2031 8.75C23.625 8.28125 24.3281 8.28125 24.7969 8.75C25.2188 9.17188 25.2188 9.875 24.7969 10.2969L15.75 19.2969C15.3281 19.7656 14.625 19.7656 14.2031 19.2969Z" fill="currentColor"/></svg>'
|
|
34
34
|
}
|
|
35
35
|
}
|
|
36
36
|
</script>
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
<% if object.drag_id && object.drag_handle %>
|
|
8
8
|
<span style="vertical-align: middle;">
|
|
9
9
|
<%= pb_rails("body") do %>
|
|
10
|
-
<svg width="
|
|
10
|
+
<svg width="1.5em" viewBox="0 0 31 25" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="pb_custom_icon svg-inline--fa vertical_align_middle svg_fw"><path d="M12.904 6.355a1.48 1.48 0 01-1.5-1.5c0-.796.656-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5 0 .844-.703 1.5-1.5 1.5zm0 7.5a1.48 1.48 0 01-1.5-1.5c0-.796.656-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5 0 .844-.703 1.5-1.5 1.5zm1.5 6c0 .844-.703 1.5-1.5 1.5a1.48 1.48 0 01-1.5-1.5c0-.796.656-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5zm4.5-13.5a1.48 1.48 0 01-1.5-1.5c0-.796.657-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5 0 .844-.703 1.5-1.5 1.5zm1.5 6c0 .844-.703 1.5-1.5 1.5a1.48 1.48 0 01-1.5-1.5c0-.796.657-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5zm-1.5 9a1.48 1.48 0 01-1.5-1.5c0-.796.657-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5 0 .844-.703 1.5-1.5 1.5z" fill="#242B42"></path></svg>
|
|
11
11
|
<% end %>
|
|
12
12
|
</span>
|
|
13
13
|
<% end %>
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react'
|
|
2
|
-
import { render, screen
|
|
2
|
+
import { render, screen } from '../utilities/test-utils'
|
|
3
3
|
import Typeahead from './_typeahead'
|
|
4
4
|
|
|
5
5
|
const options = [
|
|
@@ -137,38 +137,4 @@ test('typeahead with colored pills', () => {
|
|
|
137
137
|
const kit = screen.getByTestId('pills-color-test')
|
|
138
138
|
const pill = kit.querySelector(".pb_form_pill_kit.pb_form_pill_neutral")
|
|
139
139
|
expect(pill).toBeInTheDocument()
|
|
140
|
-
})
|
|
141
|
-
|
|
142
|
-
test('typeahead with defaultValue with focus behavior', async () => {
|
|
143
|
-
render(
|
|
144
|
-
<Typeahead
|
|
145
|
-
data={{ testid: 'default-value-focus-test' }}
|
|
146
|
-
defaultValue={[options[1]]}
|
|
147
|
-
options={options}
|
|
148
|
-
/>
|
|
149
|
-
)
|
|
150
|
-
|
|
151
|
-
const kit = screen.getByTestId('default-value-focus-test')
|
|
152
|
-
const inputDiv = kit.querySelector(".typeahead-kit-select__single-value")
|
|
153
|
-
expect(inputDiv).toHaveTextContent("Red")
|
|
154
|
-
|
|
155
|
-
// Test that the control can receive focus
|
|
156
|
-
const control = kit.querySelector('.typeahead-kit-select__control')
|
|
157
|
-
expect(control).toBeInTheDocument()
|
|
158
|
-
|
|
159
|
-
// Simulate opening the menu by clicking the control
|
|
160
|
-
fireEvent.mouseDown(control)
|
|
161
|
-
|
|
162
|
-
// Wait for menu to appear
|
|
163
|
-
await waitFor(() => {
|
|
164
|
-
const menu = kit.querySelector('.typeahead-kit-select__menu')
|
|
165
|
-
expect(menu).toBeInTheDocument()
|
|
166
|
-
})
|
|
167
|
-
|
|
168
|
-
// Check that the correct option has the focused class
|
|
169
|
-
await waitFor(() => {
|
|
170
|
-
const focusedOption = kit.querySelector('.typeahead-kit-select__option--is-focused')
|
|
171
|
-
expect(focusedOption).toBeInTheDocument()
|
|
172
|
-
expect(focusedOption).toHaveTextContent('Red')
|
|
173
|
-
})
|
|
174
140
|
})
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { useState, useEffect, forwardRef
|
|
1
|
+
import React, { useState, useEffect, forwardRef} from 'react'
|
|
2
2
|
import Select from 'react-select'
|
|
3
3
|
import AsyncSelect from 'react-select/async'
|
|
4
4
|
import CreateableSelect from 'react-select/creatable'
|
|
@@ -106,8 +106,6 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
|
|
|
106
106
|
const [inputValue, setInputValue] = useState("")
|
|
107
107
|
// State to track if form has been submitted to control validation display for react rendered rails kit
|
|
108
108
|
const [formSubmitted, setFormSubmitted] = useState(false)
|
|
109
|
-
// State to track if user has made a selection (to disable defaultValue focus behavior)
|
|
110
|
-
const [hasUserSelected, setHasUserSelected] = useState(false)
|
|
111
109
|
|
|
112
110
|
// If preserveSearchInput is true, we need to control the input value
|
|
113
111
|
const handleInputChange = preserveSearchInput
|
|
@@ -141,69 +139,6 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
|
|
|
141
139
|
}
|
|
142
140
|
: props.onBlur
|
|
143
141
|
|
|
144
|
-
// Create a ref to access React Select instance
|
|
145
|
-
const selectRef = useRef<any>(null)
|
|
146
|
-
|
|
147
|
-
// Configure focus on selected option using React Select's API
|
|
148
|
-
const handleMenuOpen = () => {
|
|
149
|
-
setTimeout(() => {
|
|
150
|
-
let currentValue = props.value || props.defaultValue
|
|
151
|
-
|
|
152
|
-
// Handle react rendered rails version which passes arrays even for single selects
|
|
153
|
-
if (Array.isArray(currentValue) && currentValue.length > 0) {
|
|
154
|
-
currentValue = currentValue[0]
|
|
155
|
-
}
|
|
156
|
-
|
|
157
|
-
// Only apply custom focus if user has NOT made a selection yet
|
|
158
|
-
if (currentValue && selectRef.current && !hasUserSelected && !props.isMulti) {
|
|
159
|
-
|
|
160
|
-
const options = props.options
|
|
161
|
-
if (options) {
|
|
162
|
-
// Find the index of the current value
|
|
163
|
-
const focusedIndex = options.findIndex((option: any) => {
|
|
164
|
-
const optionValue = props.getOptionValue ? props.getOptionValue(option) : option.value
|
|
165
|
-
const currentOptionValue = props.getOptionValue ? props.getOptionValue(currentValue) : currentValue.value
|
|
166
|
-
return optionValue === currentOptionValue
|
|
167
|
-
})
|
|
168
|
-
|
|
169
|
-
if (focusedIndex >= 0 && options[focusedIndex]) {
|
|
170
|
-
// Use React Select's internal state to set focused option
|
|
171
|
-
if (selectRef.current && selectRef.current.setState) {
|
|
172
|
-
const targetOption = options[focusedIndex]
|
|
173
|
-
selectRef.current.setState({
|
|
174
|
-
focusedOption: targetOption,
|
|
175
|
-
focusedValue: null
|
|
176
|
-
})
|
|
177
|
-
|
|
178
|
-
// Handle scrolling so selected option is visible
|
|
179
|
-
setTimeout(() => {
|
|
180
|
-
if (selectRef.current && selectRef.current.menuListRef) {
|
|
181
|
-
const menuElement = selectRef.current.menuListRef
|
|
182
|
-
if (menuElement && menuElement.children && menuElement.children[focusedIndex]) {
|
|
183
|
-
// Calculate the position of the selected option and scroll the menu container
|
|
184
|
-
const optionElement = menuElement.children[focusedIndex] as HTMLElement
|
|
185
|
-
const optionTop = optionElement.offsetTop
|
|
186
|
-
const optionHeight = optionElement.offsetHeight
|
|
187
|
-
const menuHeight = menuElement.clientHeight
|
|
188
|
-
|
|
189
|
-
// Set the menu's scrollTop to position the selected option in the middle
|
|
190
|
-
const scrollToMiddle = optionTop - (menuHeight / 2) + (optionHeight / 2)
|
|
191
|
-
menuElement.scrollTop = Math.max(0, scrollToMiddle)
|
|
192
|
-
}
|
|
193
|
-
}
|
|
194
|
-
}, 20)
|
|
195
|
-
}
|
|
196
|
-
}
|
|
197
|
-
}
|
|
198
|
-
}
|
|
199
|
-
}, 0)
|
|
200
|
-
|
|
201
|
-
// Call original onMenuOpen if provided
|
|
202
|
-
if (props.onMenuOpen) {
|
|
203
|
-
props.onMenuOpen()
|
|
204
|
-
}
|
|
205
|
-
}
|
|
206
|
-
|
|
207
142
|
const selectProps = {
|
|
208
143
|
cacheOptions: true,
|
|
209
144
|
required,
|
|
@@ -237,7 +172,6 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
|
|
|
237
172
|
...(preserveSearchInput ? { inputValue } : {}),
|
|
238
173
|
onInputChange: handleInputChange,
|
|
239
174
|
onBlur: handleBlur,
|
|
240
|
-
onMenuOpen: handleMenuOpen,
|
|
241
175
|
...props,
|
|
242
176
|
}
|
|
243
177
|
|
|
@@ -327,8 +261,6 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
|
|
|
327
261
|
// Reset form submitted state when a selection is made (this is all for react rendered rails kit)
|
|
328
262
|
if (action === 'select-option') {
|
|
329
263
|
setFormSubmitted(false)
|
|
330
|
-
// Mark that user has made a selection to disable default value focus behavior
|
|
331
|
-
setHasUserSelected(true)
|
|
332
264
|
}
|
|
333
265
|
|
|
334
266
|
// If a value is selected and we're preserving input on blur, clear the input
|
|
@@ -337,7 +269,7 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
|
|
|
337
269
|
}
|
|
338
270
|
|
|
339
271
|
if (action === 'select-option') {
|
|
340
|
-
if (selectProps.onMultiValueClick
|
|
272
|
+
if (selectProps.onMultiValueClick) selectProps.onMultiValueClick(option)
|
|
341
273
|
const multiValueClearEvent = new CustomEvent(`pb-typeahead-kit-${selectProps.id}-result-option-select`, { detail: option ? option : _data })
|
|
342
274
|
document.dispatchEvent(multiValueClearEvent)
|
|
343
275
|
}
|
|
@@ -385,7 +317,6 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
|
|
|
385
317
|
error={errorDisplay}
|
|
386
318
|
isDisabled={disabled}
|
|
387
319
|
onChange={handleOnChange}
|
|
388
|
-
ref={selectRef}
|
|
389
320
|
{...selectProps}
|
|
390
321
|
/>
|
|
391
322
|
</div>
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
examples:
|
|
2
2
|
rails:
|
|
3
3
|
- typeahead_default: Default
|
|
4
|
-
- typeahead_default_options: With Default Options
|
|
5
4
|
- typeahead_with_context: With Context
|
|
6
5
|
- typeahead_with_pills: With Pills
|
|
7
6
|
- typeahead_without_pills: Without Pills (Single Select)
|
|
@@ -20,7 +19,6 @@ examples:
|
|
|
20
19
|
|
|
21
20
|
react:
|
|
22
21
|
- typeahead_default: Default
|
|
23
|
-
- typeahead_default_value: With Default Value
|
|
24
22
|
- typeahead_react_hook: React Hook
|
|
25
23
|
- typeahead_with_highlight: With Highlight
|
|
26
24
|
- typeahead_with_pills: With Pills
|
|
@@ -16,4 +16,3 @@ export { default as TypeaheadTruncatedText } from './_typeahead_truncated_text.j
|
|
|
16
16
|
export { default as TypeaheadReactHook } from './_typeahead_react_hook.jsx'
|
|
17
17
|
export { default as TypeaheadDisabled } from './_typeahead_disabled.jsx'
|
|
18
18
|
export { default as TypeaheadPreserveInput } from './_typeahead_preserve_input.jsx'
|
|
19
|
-
export { default as TypeaheadDefaultValue } from './_typeahead_default_value.jsx'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx,Fragment,jsxs}from"react/jsx-runtime";import{useState,useEffect}from"react";import{e as buildAriaProps,f as buildDataProps,g as buildHtmlProps,H as HighchartsReact,h as Highcharts,i as classnames,j as globalProps,k as HighchartsMore,S as SolidGauge,l as buildCss}from"./_typeahead-CLPk2g9d.js";import{c as colors,h as highchartsTheme,m as merge,a as highchartsDarkTheme,t as typography}from"./lib-QZuu1ltS.js";const mapColors=array=>{const regex=/(data)\-[1-8]/;const newArray=array.map((item=>regex.test(item)?`${colors[`data_${item[item.length-1]}`]}`:item));return newArray};const BarGraph=({aria:aria={},data:data={},align:align="center",axisTitle:axisTitle,dark:dark=false,chartData:chartData,className:className="pb_bar_graph",colors:colors2,htmlOptions:htmlOptions={},customOptions:customOptions={},axisFormat:axisFormat,id:id,pointStart:pointStart,stacking:stacking,subTitle:subTitle,type:type="column",title:title="Title",xAxisCategories:xAxisCategories,yAxisMin:yAxisMin,yAxisMax:yAxisMax,legend:legend=false,toggleLegendClick:toggleLegendClick=true,height:height,layout:layout="horizontal",verticalAlign:verticalAlign="bottom",x:x=0,y:y=0,...props})=>{const ariaProps=buildAriaProps(aria);const dataProps=buildDataProps(data);const htmlProps=buildHtmlProps(htmlOptions);const setupTheme=()=>{dark?Highcharts.setOptions(highchartsDarkTheme):Highcharts.setOptions(highchartsTheme)};setupTheme();const staticOptions={title:{text:title},chart:{height:height,type:type},subtitle:{text:subTitle},yAxis:[{labels:{format:typeof axisFormat==="string"?axisFormat:axisFormat&&axisFormat[0]?axisFormat[0].format:""},min:yAxisMin,max:yAxisMax,opposite:false,title:{text:Array.isArray(axisTitle)?axisTitle.length>0?axisTitle[0].name:null:axisTitle},plotLines:typeof yAxisMin!=="undefined"&&yAxisMin!==null?[]:[{value:0,zIndex:10,color:"#E4E8F0"}]}],xAxis:{categories:xAxisCategories},legend:{enabled:legend,align:align,verticalAlign:verticalAlign,layout:layout,x:x,y:y},colors:colors2!==void 0&&colors2.length>0?mapColors(colors2):highchartsTheme.colors,plotOptions:{series:{stacking:stacking,pointStart:pointStart,borderWidth:stacking?0:"",events:{},dataLabels:{enabled:false}}},series:chartData,credits:false};if(Array.isArray(axisTitle)&&axisTitle.length>1&&axisTitle[1].name){staticOptions.yAxis.push({labels:{format:typeof axisFormat==="string"?axisFormat:axisFormat[1].format},min:yAxisMin,max:yAxisMax,opposite:true,title:{text:axisTitle[1].name},plotLines:typeof yAxisMin!=="undefined"&&yAxisMin!==null?[]:[{value:0,zIndex:10,color:"#E4E8F0"}]})}if(!toggleLegendClick){staticOptions.plotOptions.series.events={legendItemClick:()=>false}}const filteredProps={...props};delete filteredProps.verticalAlign;const[options,setOptions]=useState({});useEffect((()=>{setOptions(merge(staticOptions,customOptions))}),[chartData]);return jsx(HighchartsReact,{containerProps:{className:classnames(globalProps(filteredProps),className),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:options})};const alignBlockElement=event=>{const itemToMove=document.querySelector(`#wrapper-circle-chart-${event.target.renderTo.id} .pb-circle-chart-block`);const chartContainer=document.querySelector(`#${event.target.renderTo.id}`);if(itemToMove!==null&&chartContainer!==null){itemToMove.style.height=`${event.target.chartHeight}px`;itemToMove.style.width=`${event.target.chartWidth}px`;if(chartContainer.firstChild!==null){chartContainer.firstChild.before(itemToMove)}}};const CircleChart=({align:align="center",aria:aria={},rounded:rounded=false,borderColor:borderColor=(rounded?null:""),borderWidth:borderWidth=(rounded?20:null),chartData:chartData,children:children,className:className,colors:colors2=[],customOptions:customOptions={},dark:dark=false,data:data={},dataLabelHtml:dataLabelHtml="<div>{point.name}</div>",dataLabels:dataLabels=false,height:height,htmlOptions:htmlOptions={},id:id,innerSize:innerSize="md",legend:legend=false,maxPointSize:maxPointSize=null,minPointSize:minPointSize=null,startAngle:startAngle=null,style:style="pie",title:title,tooltipHtml:tooltipHtml,useHtml:useHtml=false,zMin:zMin=null,layout:layout="horizontal",verticalAlign:verticalAlign="bottom",x:x=0,y:y=0,...props})=>{const ariaProps=buildAriaProps(aria);const dataProps=buildDataProps(data);const htmlProps=buildHtmlProps(htmlOptions);HighchartsMore(Highcharts);const setupTheme=()=>{dark?Highcharts.setOptions(highchartsDarkTheme):Highcharts.setOptions(highchartsTheme)};setupTheme();Highcharts.setOptions({tooltip:{headerFormat:null,pointFormat:tooltipHtml?tooltipHtml:'<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: <b>{point.y}</b>',useHTML:useHtml}});const innerSizes={sm:"35%",md:"50%",lg:"85%",none:"0%"};const innerSizeFormat=size=>innerSizes[size];const filteredProps={...props};delete filteredProps.verticalAlign;const[options,setOptions]=useState({});useEffect((()=>{const formattedChartData=chartData.map((obj=>{obj.y=obj.value;delete obj.value;return obj}));const staticOptions={title:{text:title},chart:{height:height,type:style,events:{render:event=>alignBlockElement(event),redraw:event=>alignBlockElement(event)}},legend:{align:align,verticalAlign:verticalAlign,layout:layout,x:x,y:y},plotOptions:{pie:{colors:colors2.length>0?mapColors(colors2):highchartsTheme.colors,dataLabels:{enabled:dataLabels,connectorShape:"straight",connectorWidth:3,format:dataLabelHtml},showInLegend:legend}},series:[{minPointSize:minPointSize,maxPointSize:maxPointSize,innerSize:borderWidth==20?"100%":innerSizeFormat(innerSize),data:formattedChartData,zMin:zMin,startAngle:startAngle,borderWidth:borderWidth,borderColor:borderColor}],credits:false};setOptions(merge(staticOptions,customOptions))}),[chartData]);return jsx(Fragment,{children:children?jsxs("div",{id:`wrapper-circle-chart-${id}`,children:[jsx(HighchartsReact,{containerProps:{className:classnames("pb_circle_chart",globalProps(filteredProps)),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:options}),jsx("div",{className:"pb-circle-chart-block",children:children})]}):jsx(HighchartsReact,{containerProps:{className:classnames("pb_circle_chart",globalProps(filteredProps)),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:options})})};const Gauge=({aria:aria={},chartData:chartData,customOptions:customOptions={},dark:dark=false,data:data={},disableAnimation:disableAnimation=false,fullCircle:fullCircle=false,height:height=null,htmlOptions:htmlOptions={},id:id,max:max=100,min:min=0,prefix:prefix="",showLabels:showLabels=false,style:style="solidgauge",suffix:suffix="",title:title="",tooltipHtml:tooltipHtml='<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: <b>{point.y}</b>',colors:colors$1=[],minorTickInterval:minorTickInterval=null,circumference:circumference=(fullCircle?[0,360]:[-100,100]),...props})=>{const ariaProps=buildAriaProps(aria);const dataProps=buildDataProps(data);const htmlProps=buildHtmlProps(htmlOptions);HighchartsMore(Highcharts);SolidGauge(Highcharts);const setupTheme=()=>{dark?Highcharts.setOptions(highchartsDarkTheme):Highcharts.setOptions(highchartsTheme)};setupTheme();Highcharts.setOptions({tooltip:{pointFormat:tooltipHtml,followPointer:true}});const css=buildCss({pb_gauge_kit:true});const[options,setOptions]=useState({});useEffect((()=>{const formattedChartData=chartData.map((obj=>{obj.y=obj.value;delete obj.value;return obj}));const staticOptions={chart:{events:{load(){setTimeout(this.reflow.bind(this),0)}},type:style,height:height},title:{text:title},yAxis:{min:min,max:max,lineWidth:0,tickWidth:0,minorTickInterval:minorTickInterval,tickAmount:2,tickPositions:[min,max],labels:{y:26,enabled:showLabels}},credits:false,series:[{data:formattedChartData}],pane:{center:["50%","50%"],size:"90%",startAngle:circumference[0],endAngle:circumference[1],background:{borderWidth:20,innerRadius:"90%",outerRadius:"90%",shape:"arc",className:"gauge-pane"}},colors:colors$1!==void 0&&colors$1.length>0?mapColors(colors$1):highchartsTheme.colors,plotOptions:{series:{animation:!disableAnimation},solidgauge:{borderColor:colors$1!==void 0&&colors$1.length===1?mapColors(colors$1).join():highchartsTheme.colors[0],borderWidth:20,radius:90,innerRadius:"90%",dataLabels:{borderWidth:0,color:colors.text_lt_default,enabled:true,format:`<span class="prefix${dark?" dark":""}">${prefix}</span><span class="fix${dark?" dark":""}">{y:,f}</span><span class="suffix${dark?" dark":""}">${suffix}</span>`,style:{fontFamily:typography.font_family_base,fontWeight:typography.regular,fontSize:typography.heading_2},y:-26}}}};setOptions(merge(staticOptions,customOptions));if(document.querySelector(".prefix")){document.querySelectorAll(".prefix").forEach((prefix2=>{prefix2.setAttribute("y","28")}));document.querySelectorAll(".fix").forEach((fix=>fix.setAttribute("y","38")))}}),[chartData]);return jsx(HighchartsReact,{containerProps:{className:classnames(css,globalProps(props)),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:options})};const LineGraph=({aria:aria={},data:data={},align:align="center",className:className="pb_bar_graph",customOptions:customOptions={},dark:dark=false,gradient:gradient=false,type:type="line",htmlOptions:htmlOptions={},id:id,legend:legend=false,toggleLegendClick:toggleLegendClick=true,layout:layout="horizontal",verticalAlign:verticalAlign="bottom",x:x=0,y:y=0,axisTitle:axisTitle,xAxisCategories:xAxisCategories,yAxisMin:yAxisMin,yAxisMax:yAxisMax,chartData:chartData,pointStart:pointStart,subTitle:subTitle,title:title,height:height,colors:colors2=[],...props})=>{const ariaProps=buildAriaProps(aria);const dataProps=buildDataProps(data);const htmlProps=buildHtmlProps(htmlOptions);const setupTheme=()=>{dark?Highcharts.setOptions(highchartsDarkTheme):Highcharts.setOptions(highchartsTheme)};setupTheme();const staticOptions={title:{text:title},chart:{height:height,type:type},subtitle:{text:subTitle},yAxis:{min:yAxisMin,max:yAxisMax,title:{text:axisTitle}},xAxis:{categories:xAxisCategories},legend:{enabled:legend,align:align,verticalAlign:verticalAlign,layout:layout,x:x,y:y},colors:colors2!==void 0&&colors2.length>0?mapColors(colors2):highchartsTheme.colors,plotOptions:{series:{pointStart:pointStart,events:{},dataLabels:{enabled:false}}},series:chartData,credits:false};if(!toggleLegendClick){staticOptions.plotOptions.series.events={legendItemClick:()=>false}}const filteredProps={...props};delete filteredProps.verticalAlign;const[options,setOptions]=useState({});useEffect((()=>{setOptions(merge(staticOptions,customOptions))}),[chartData]);return jsx(HighchartsReact,{containerProps:{className:classnames(globalProps(filteredProps),className),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:options})};export{BarGraph as B,CircleChart as C,Gauge as G,LineGraph as L};
|
|
1
|
+
import{jsx,Fragment,jsxs}from"react/jsx-runtime";import{useState,useEffect}from"react";import{e as buildAriaProps,f as buildDataProps,g as buildHtmlProps,H as HighchartsReact,h as Highcharts,i as classnames,j as globalProps,k as HighchartsMore,S as SolidGauge,l as buildCss}from"./_typeahead-nqpbB2ym.js";import{c as colors,h as highchartsTheme,m as merge,a as highchartsDarkTheme,t as typography}from"./lib-QZuu1ltS.js";const mapColors=array=>{const regex=/(data)\-[1-8]/;const newArray=array.map((item=>regex.test(item)?`${colors[`data_${item[item.length-1]}`]}`:item));return newArray};const BarGraph=({aria:aria={},data:data={},align:align="center",axisTitle:axisTitle,dark:dark=false,chartData:chartData,className:className="pb_bar_graph",colors:colors2,htmlOptions:htmlOptions={},customOptions:customOptions={},axisFormat:axisFormat,id:id,pointStart:pointStart,stacking:stacking,subTitle:subTitle,type:type="column",title:title="Title",xAxisCategories:xAxisCategories,yAxisMin:yAxisMin,yAxisMax:yAxisMax,legend:legend=false,toggleLegendClick:toggleLegendClick=true,height:height,layout:layout="horizontal",verticalAlign:verticalAlign="bottom",x:x=0,y:y=0,...props})=>{const ariaProps=buildAriaProps(aria);const dataProps=buildDataProps(data);const htmlProps=buildHtmlProps(htmlOptions);const setupTheme=()=>{dark?Highcharts.setOptions(highchartsDarkTheme):Highcharts.setOptions(highchartsTheme)};setupTheme();const staticOptions={title:{text:title},chart:{height:height,type:type},subtitle:{text:subTitle},yAxis:[{labels:{format:typeof axisFormat==="string"?axisFormat:axisFormat&&axisFormat[0]?axisFormat[0].format:""},min:yAxisMin,max:yAxisMax,opposite:false,title:{text:Array.isArray(axisTitle)?axisTitle.length>0?axisTitle[0].name:null:axisTitle},plotLines:typeof yAxisMin!=="undefined"&&yAxisMin!==null?[]:[{value:0,zIndex:10,color:"#E4E8F0"}]}],xAxis:{categories:xAxisCategories},legend:{enabled:legend,align:align,verticalAlign:verticalAlign,layout:layout,x:x,y:y},colors:colors2!==void 0&&colors2.length>0?mapColors(colors2):highchartsTheme.colors,plotOptions:{series:{stacking:stacking,pointStart:pointStart,borderWidth:stacking?0:"",events:{},dataLabels:{enabled:false}}},series:chartData,credits:false};if(Array.isArray(axisTitle)&&axisTitle.length>1&&axisTitle[1].name){staticOptions.yAxis.push({labels:{format:typeof axisFormat==="string"?axisFormat:axisFormat[1].format},min:yAxisMin,max:yAxisMax,opposite:true,title:{text:axisTitle[1].name},plotLines:typeof yAxisMin!=="undefined"&&yAxisMin!==null?[]:[{value:0,zIndex:10,color:"#E4E8F0"}]})}if(!toggleLegendClick){staticOptions.plotOptions.series.events={legendItemClick:()=>false}}const filteredProps={...props};delete filteredProps.verticalAlign;const[options,setOptions]=useState({});useEffect((()=>{setOptions(merge(staticOptions,customOptions))}),[chartData]);return jsx(HighchartsReact,{containerProps:{className:classnames(globalProps(filteredProps),className),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:options})};const alignBlockElement=event=>{const itemToMove=document.querySelector(`#wrapper-circle-chart-${event.target.renderTo.id} .pb-circle-chart-block`);const chartContainer=document.querySelector(`#${event.target.renderTo.id}`);if(itemToMove!==null&&chartContainer!==null){itemToMove.style.height=`${event.target.chartHeight}px`;itemToMove.style.width=`${event.target.chartWidth}px`;if(chartContainer.firstChild!==null){chartContainer.firstChild.before(itemToMove)}}};const CircleChart=({align:align="center",aria:aria={},rounded:rounded=false,borderColor:borderColor=(rounded?null:""),borderWidth:borderWidth=(rounded?20:null),chartData:chartData,children:children,className:className,colors:colors2=[],customOptions:customOptions={},dark:dark=false,data:data={},dataLabelHtml:dataLabelHtml="<div>{point.name}</div>",dataLabels:dataLabels=false,height:height,htmlOptions:htmlOptions={},id:id,innerSize:innerSize="md",legend:legend=false,maxPointSize:maxPointSize=null,minPointSize:minPointSize=null,startAngle:startAngle=null,style:style="pie",title:title,tooltipHtml:tooltipHtml,useHtml:useHtml=false,zMin:zMin=null,layout:layout="horizontal",verticalAlign:verticalAlign="bottom",x:x=0,y:y=0,...props})=>{const ariaProps=buildAriaProps(aria);const dataProps=buildDataProps(data);const htmlProps=buildHtmlProps(htmlOptions);HighchartsMore(Highcharts);const setupTheme=()=>{dark?Highcharts.setOptions(highchartsDarkTheme):Highcharts.setOptions(highchartsTheme)};setupTheme();Highcharts.setOptions({tooltip:{headerFormat:null,pointFormat:tooltipHtml?tooltipHtml:'<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: <b>{point.y}</b>',useHTML:useHtml}});const innerSizes={sm:"35%",md:"50%",lg:"85%",none:"0%"};const innerSizeFormat=size=>innerSizes[size];const filteredProps={...props};delete filteredProps.verticalAlign;const[options,setOptions]=useState({});useEffect((()=>{const formattedChartData=chartData.map((obj=>{obj.y=obj.value;delete obj.value;return obj}));const staticOptions={title:{text:title},chart:{height:height,type:style,events:{render:event=>alignBlockElement(event),redraw:event=>alignBlockElement(event)}},legend:{align:align,verticalAlign:verticalAlign,layout:layout,x:x,y:y},plotOptions:{pie:{colors:colors2.length>0?mapColors(colors2):highchartsTheme.colors,dataLabels:{enabled:dataLabels,connectorShape:"straight",connectorWidth:3,format:dataLabelHtml},showInLegend:legend}},series:[{minPointSize:minPointSize,maxPointSize:maxPointSize,innerSize:borderWidth==20?"100%":innerSizeFormat(innerSize),data:formattedChartData,zMin:zMin,startAngle:startAngle,borderWidth:borderWidth,borderColor:borderColor}],credits:false};setOptions(merge(staticOptions,customOptions))}),[chartData]);return jsx(Fragment,{children:children?jsxs("div",{id:`wrapper-circle-chart-${id}`,children:[jsx(HighchartsReact,{containerProps:{className:classnames("pb_circle_chart",globalProps(filteredProps)),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:options}),jsx("div",{className:"pb-circle-chart-block",children:children})]}):jsx(HighchartsReact,{containerProps:{className:classnames("pb_circle_chart",globalProps(filteredProps)),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:options})})};const Gauge=({aria:aria={},chartData:chartData,customOptions:customOptions={},dark:dark=false,data:data={},disableAnimation:disableAnimation=false,fullCircle:fullCircle=false,height:height=null,htmlOptions:htmlOptions={},id:id,max:max=100,min:min=0,prefix:prefix="",showLabels:showLabels=false,style:style="solidgauge",suffix:suffix="",title:title="",tooltipHtml:tooltipHtml='<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: <b>{point.y}</b>',colors:colors$1=[],minorTickInterval:minorTickInterval=null,circumference:circumference=(fullCircle?[0,360]:[-100,100]),...props})=>{const ariaProps=buildAriaProps(aria);const dataProps=buildDataProps(data);const htmlProps=buildHtmlProps(htmlOptions);HighchartsMore(Highcharts);SolidGauge(Highcharts);const setupTheme=()=>{dark?Highcharts.setOptions(highchartsDarkTheme):Highcharts.setOptions(highchartsTheme)};setupTheme();Highcharts.setOptions({tooltip:{pointFormat:tooltipHtml,followPointer:true}});const css=buildCss({pb_gauge_kit:true});const[options,setOptions]=useState({});useEffect((()=>{const formattedChartData=chartData.map((obj=>{obj.y=obj.value;delete obj.value;return obj}));const staticOptions={chart:{events:{load(){setTimeout(this.reflow.bind(this),0)}},type:style,height:height},title:{text:title},yAxis:{min:min,max:max,lineWidth:0,tickWidth:0,minorTickInterval:minorTickInterval,tickAmount:2,tickPositions:[min,max],labels:{y:26,enabled:showLabels}},credits:false,series:[{data:formattedChartData}],pane:{center:["50%","50%"],size:"90%",startAngle:circumference[0],endAngle:circumference[1],background:{borderWidth:20,innerRadius:"90%",outerRadius:"90%",shape:"arc",className:"gauge-pane"}},colors:colors$1!==void 0&&colors$1.length>0?mapColors(colors$1):highchartsTheme.colors,plotOptions:{series:{animation:!disableAnimation},solidgauge:{borderColor:colors$1!==void 0&&colors$1.length===1?mapColors(colors$1).join():highchartsTheme.colors[0],borderWidth:20,radius:90,innerRadius:"90%",dataLabels:{borderWidth:0,color:colors.text_lt_default,enabled:true,format:`<span class="prefix${dark?" dark":""}">${prefix}</span><span class="fix${dark?" dark":""}">{y:,f}</span><span class="suffix${dark?" dark":""}">${suffix}</span>`,style:{fontFamily:typography.font_family_base,fontWeight:typography.regular,fontSize:typography.heading_2},y:-26}}}};setOptions(merge(staticOptions,customOptions));if(document.querySelector(".prefix")){document.querySelectorAll(".prefix").forEach((prefix2=>{prefix2.setAttribute("y","28")}));document.querySelectorAll(".fix").forEach((fix=>fix.setAttribute("y","38")))}}),[chartData]);return jsx(HighchartsReact,{containerProps:{className:classnames(css,globalProps(props)),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:options})};const LineGraph=({aria:aria={},data:data={},align:align="center",className:className="pb_bar_graph",customOptions:customOptions={},dark:dark=false,gradient:gradient=false,type:type="line",htmlOptions:htmlOptions={},id:id,legend:legend=false,toggleLegendClick:toggleLegendClick=true,layout:layout="horizontal",verticalAlign:verticalAlign="bottom",x:x=0,y:y=0,axisTitle:axisTitle,xAxisCategories:xAxisCategories,yAxisMin:yAxisMin,yAxisMax:yAxisMax,chartData:chartData,pointStart:pointStart,subTitle:subTitle,title:title,height:height,colors:colors2=[],...props})=>{const ariaProps=buildAriaProps(aria);const dataProps=buildDataProps(data);const htmlProps=buildHtmlProps(htmlOptions);const setupTheme=()=>{dark?Highcharts.setOptions(highchartsDarkTheme):Highcharts.setOptions(highchartsTheme)};setupTheme();const staticOptions={title:{text:title},chart:{height:height,type:type},subtitle:{text:subTitle},yAxis:{min:yAxisMin,max:yAxisMax,title:{text:axisTitle}},xAxis:{categories:xAxisCategories},legend:{enabled:legend,align:align,verticalAlign:verticalAlign,layout:layout,x:x,y:y},colors:colors2!==void 0&&colors2.length>0?mapColors(colors2):highchartsTheme.colors,plotOptions:{series:{pointStart:pointStart,events:{},dataLabels:{enabled:false}}},series:chartData,credits:false};if(!toggleLegendClick){staticOptions.plotOptions.series.events={legendItemClick:()=>false}}const filteredProps={...props};delete filteredProps.verticalAlign;const[options,setOptions]=useState({});useEffect((()=>{setOptions(merge(staticOptions,customOptions))}),[chartData]);return jsx(HighchartsReact,{containerProps:{className:classnames(globalProps(filteredProps),className),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:options})};export{BarGraph as B,CircleChart as C,Gauge as G,LineGraph as L};
|