playbook_ui 14.24.0.pre.alpha.testingwithoutdatepicker9615 → 14.24.0.pre.alpha.testingwithoutlazyload9529
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_date_picker/_date_picker.tsx +33 -1
- data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb +11 -1
- data/app/pb_kits/playbook/pb_date_picker/date_picker.test.js +215 -1
- data/dist/chunks/{_line_graph-B0SsQi-l.js → _line_graph-qk_BN_J0.js} +1 -1
- data/dist/chunks/{_typeahead-BgBecRbi.js → _typeahead-ZLTFtAoW.js} +1 -1
- data/dist/chunks/{_weekday_stacked-BlsASRoi.js → _weekday_stacked-rU5SIBAO.js} +2 -2
- data/dist/chunks/{lib-DujEDjJx.js → lib-CY5ZPzic.js} +2 -2
- data/dist/chunks/{pb_form_validation-D3vVNE8Q.js → pb_form_validation-D3b0JKHH.js} +1 -1
- data/dist/chunks/vendor.js +1 -1
- data/dist/playbook-doc.js +1 -1
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/lib/playbook/version.rb +1 -1
- metadata +7 -8
- data/dist/chunks/lazysizes-B7xYodB-.js +0 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 64a141d94e5ef234fb2ec95185ff176aad2ae02840bb184cc7840e7665256659
|
|
4
|
+
data.tar.gz: d8dffbb0f1a40ec480be47fb056a9b5f3ff1518cb8791252e5c56dcbb1c1bb73
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: fb17faa5c45ee69cc85d0422d23eb52a112c3a8d3ce6c5e174960d751964a32b8993336dc86811769f361e78c0314465305cc1c97b5a2c06bbbf918691c2383b
|
|
7
|
+
data.tar.gz: 3e0d0be40dd0afd0f8b57629cdc54557392f4ef7d28b981d24b3cb95dc0004e285320607a092d873d6411b9eb30a0bf54c6a877ac63ff65f93dae80a4b80b5fd
|
|
@@ -115,7 +115,39 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
|
|
|
115
115
|
const inputDataProps = buildDataProps(inputData)
|
|
116
116
|
|
|
117
117
|
useEffect(() => {
|
|
118
|
-
|
|
118
|
+
datePickerHelper({
|
|
119
|
+
allowInput,
|
|
120
|
+
customQuickPickDates,
|
|
121
|
+
defaultDate,
|
|
122
|
+
disableDate,
|
|
123
|
+
disableRange,
|
|
124
|
+
disableWeekdays,
|
|
125
|
+
enableTime,
|
|
126
|
+
format,
|
|
127
|
+
hideIcon,
|
|
128
|
+
inLine,
|
|
129
|
+
maxDate,
|
|
130
|
+
minDate,
|
|
131
|
+
mode,
|
|
132
|
+
onChange,
|
|
133
|
+
onClose,
|
|
134
|
+
pickerId,
|
|
135
|
+
plugins,
|
|
136
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
137
|
+
// @ts-ignore
|
|
138
|
+
position,
|
|
139
|
+
positionElement,
|
|
140
|
+
selectionType,
|
|
141
|
+
showTimezone,
|
|
142
|
+
staticPosition,
|
|
143
|
+
thisRangesEndToday,
|
|
144
|
+
yearRange,
|
|
145
|
+
controlsStartId,
|
|
146
|
+
controlsEndId,
|
|
147
|
+
syncStartWith,
|
|
148
|
+
syncEndWith,
|
|
149
|
+
required: false,
|
|
150
|
+
}, scrollContainer)
|
|
119
151
|
}, initializeOnce ? [] : undefined)
|
|
120
152
|
const filteredProps = {...props}
|
|
121
153
|
if (filteredProps.marginBottom === undefined) {
|
|
@@ -69,8 +69,18 @@
|
|
|
69
69
|
<%= javascript_tag do %>
|
|
70
70
|
(function() {
|
|
71
71
|
const loadDatePicker = () => {
|
|
72
|
-
|
|
72
|
+
datePickerHelper(<%= object.date_picker_config %>, "<%= object.scroll_container %>")
|
|
73
|
+
|
|
74
|
+
if (<%= object.selection_type == "quickpick" %>) {
|
|
75
|
+
document.getElementById("<%= object.picker_id %>").addEventListener("change", ({ target }) => {
|
|
76
|
+
const startDate = document.getElementById("<%= object.start_date_id %>")
|
|
77
|
+
const endDate = document.getElementById("<%= object.end_date_id %>")
|
|
78
|
+
const splittedValue = target.value.split(" to ")
|
|
79
|
+
startDate.value = splittedValue[0]
|
|
80
|
+
endDate.value = splittedValue[1] ? splittedValue[1] : splittedValue[0]
|
|
81
|
+
})
|
|
73
82
|
}
|
|
83
|
+
}
|
|
74
84
|
|
|
75
85
|
window.addEventListener("DOMContentLoaded", () => {
|
|
76
86
|
loadDatePicker()
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
/* eslint-disable no-console */
|
|
2
2
|
import React from 'react'
|
|
3
|
-
import { render, screen } from '../utilities/test-utils'
|
|
3
|
+
import { fireEvent, render, screen, waitFor, within } from '../utilities/test-utils'
|
|
4
4
|
|
|
5
5
|
import DatePicker from './_date_picker'
|
|
6
|
+
import DateTime from "../pb_kit/dateTime.ts"
|
|
7
|
+
import { getTimezoneText } from './plugins/timeSelect'
|
|
6
8
|
|
|
7
9
|
jest.setSystemTime(new Date('01/01/2020'));
|
|
8
10
|
const DEFAULT_DATE = new Date()
|
|
@@ -37,4 +39,216 @@ describe('DatePicker Kit', () => {
|
|
|
37
39
|
const kit = screen.getByTestId(testId)
|
|
38
40
|
expect(kit).toHaveClass('pb_date_picker_kit mb_sm')
|
|
39
41
|
})
|
|
42
|
+
|
|
43
|
+
test('shows DatePicker date format m/d/Y', async () => {
|
|
44
|
+
const testId = 'datepicker-date'
|
|
45
|
+
render(
|
|
46
|
+
<DatePicker
|
|
47
|
+
data={{ testid: testId }}
|
|
48
|
+
defaultDate={DEFAULT_DATE}
|
|
49
|
+
format="m/d/Y"
|
|
50
|
+
pickerId="date-picker-date"
|
|
51
|
+
/>
|
|
52
|
+
)
|
|
53
|
+
|
|
54
|
+
const kit = screen.getByTestId(testId)
|
|
55
|
+
|
|
56
|
+
|
|
57
|
+
const input = within(kit).getByPlaceholderText('Select Date')
|
|
58
|
+
expect(input).toBeInTheDocument()
|
|
59
|
+
|
|
60
|
+
await waitFor(() => {
|
|
61
|
+
expect(input).toHaveValue('01/01/2020')
|
|
62
|
+
})
|
|
63
|
+
})
|
|
64
|
+
|
|
65
|
+
test('shows DatePicker time caption text', async () => {
|
|
66
|
+
const testId = 'datepicker-time-caption'
|
|
67
|
+
render(
|
|
68
|
+
<DatePicker
|
|
69
|
+
data={{ testid: testId }}
|
|
70
|
+
defaultDate={DEFAULT_DATE}
|
|
71
|
+
enableTime
|
|
72
|
+
pickerId="date-picker-time-caption"
|
|
73
|
+
/>
|
|
74
|
+
)
|
|
75
|
+
|
|
76
|
+
const kit = screen.getByTestId(testId)
|
|
77
|
+
const input = within(kit).getByPlaceholderText('Select Date')
|
|
78
|
+
|
|
79
|
+
fireEvent(
|
|
80
|
+
input,
|
|
81
|
+
new MouseEvent('click', {
|
|
82
|
+
bubbles: true,
|
|
83
|
+
cancelable: true,
|
|
84
|
+
}),
|
|
85
|
+
)
|
|
86
|
+
await waitFor(() => {
|
|
87
|
+
const caption = within(kit).getByText('Select Time')
|
|
88
|
+
expect(caption).toBeInTheDocument()
|
|
89
|
+
})
|
|
90
|
+
})
|
|
91
|
+
|
|
92
|
+
test('shows DatePicker timezone text', async () => {
|
|
93
|
+
const testId = 'datepicker-timezone'
|
|
94
|
+
render(
|
|
95
|
+
<DatePicker
|
|
96
|
+
data={{ testid: testId }}
|
|
97
|
+
defaultDate={DEFAULT_DATE}
|
|
98
|
+
enableTime
|
|
99
|
+
pickerId="date-picker-timezone"
|
|
100
|
+
showTimezone
|
|
101
|
+
/>
|
|
102
|
+
)
|
|
103
|
+
|
|
104
|
+
const kit = screen.getByTestId(testId)
|
|
105
|
+
const input = within(kit).getByPlaceholderText('Select Date')
|
|
106
|
+
const defaultTimezoneText = getTimezoneText(DEFAULT_DATE)
|
|
107
|
+
|
|
108
|
+
fireEvent(
|
|
109
|
+
input,
|
|
110
|
+
new MouseEvent('click', {
|
|
111
|
+
bubbles: true,
|
|
112
|
+
cancelable: true,
|
|
113
|
+
}),
|
|
114
|
+
)
|
|
115
|
+
await waitFor(() => {
|
|
116
|
+
const timezoneText = within(kit).getByText(defaultTimezoneText)
|
|
117
|
+
expect(timezoneText).toBeInTheDocument()
|
|
118
|
+
})
|
|
119
|
+
})
|
|
120
|
+
|
|
121
|
+
test('shows DatePicker meridiem toggle', async () => {
|
|
122
|
+
const testId = 'datepicker-meridiem'
|
|
123
|
+
render(
|
|
124
|
+
<DatePicker
|
|
125
|
+
data={{ testid: testId }}
|
|
126
|
+
defaultDate={DEFAULT_DATE}
|
|
127
|
+
enableTime
|
|
128
|
+
pickerId="date-picker-meridiem"
|
|
129
|
+
/>
|
|
130
|
+
)
|
|
131
|
+
|
|
132
|
+
const kit = screen.getByTestId(testId)
|
|
133
|
+
const input = within(kit).getByPlaceholderText('Select Date')
|
|
134
|
+
|
|
135
|
+
fireEvent(
|
|
136
|
+
input,
|
|
137
|
+
new MouseEvent('click', {
|
|
138
|
+
bubbles: true,
|
|
139
|
+
cancelable: true,
|
|
140
|
+
}),
|
|
141
|
+
)
|
|
142
|
+
const meridiemToggleAM = within(kit).getByLabelText('AM')
|
|
143
|
+
const meridiemTogglePM = within(kit).getByLabelText('PM')
|
|
144
|
+
await waitFor(() => {
|
|
145
|
+
expect(meridiemToggleAM).toBeInTheDocument()
|
|
146
|
+
expect(meridiemTogglePM).toBeInTheDocument()
|
|
147
|
+
})
|
|
148
|
+
|
|
149
|
+
fireEvent(
|
|
150
|
+
meridiemToggleAM,
|
|
151
|
+
new MouseEvent('click', {
|
|
152
|
+
bubbles: true,
|
|
153
|
+
cancelable: true,
|
|
154
|
+
}),
|
|
155
|
+
)
|
|
156
|
+
await waitFor(() => {
|
|
157
|
+
expect(input).toHaveValue('01/01/2020 at 12:00 AM')
|
|
158
|
+
})
|
|
159
|
+
|
|
160
|
+
fireEvent(
|
|
161
|
+
meridiemTogglePM,
|
|
162
|
+
new MouseEvent('click', {
|
|
163
|
+
bubbles: true,
|
|
164
|
+
cancelable: true,
|
|
165
|
+
}),
|
|
166
|
+
)
|
|
167
|
+
await waitFor(() => {
|
|
168
|
+
expect(input).toHaveValue('01/01/2020 at 12:00 PM')
|
|
169
|
+
})
|
|
170
|
+
})
|
|
171
|
+
|
|
172
|
+
test('shows DatePicker QuickPick dropdown and adds correct date to input', async () => {
|
|
173
|
+
const testId = 'datepicker-quick-pick'
|
|
174
|
+
render(
|
|
175
|
+
<DatePicker
|
|
176
|
+
allowInput
|
|
177
|
+
data={{ testid: testId }}
|
|
178
|
+
mode="range"
|
|
179
|
+
pickerId="date-picker-quick-pick"
|
|
180
|
+
placeholder="mm/dd/yyyy to mm/dd/yyyy"
|
|
181
|
+
selectionType="quickpick"
|
|
182
|
+
/>
|
|
183
|
+
)
|
|
184
|
+
|
|
185
|
+
const kit = screen.getByTestId(testId)
|
|
186
|
+
const input = within(kit).getByPlaceholderText('mm/dd/yyyy to mm/dd/yyyy')
|
|
187
|
+
|
|
188
|
+
fireEvent(
|
|
189
|
+
input,
|
|
190
|
+
new MouseEvent('click', {
|
|
191
|
+
bubbles: true,
|
|
192
|
+
cancelable: true,
|
|
193
|
+
}),
|
|
194
|
+
)
|
|
195
|
+
const today = within(kit).getByText('Today')
|
|
196
|
+
const thisYear = within(kit).getByText('This year')
|
|
197
|
+
await waitFor(() => {
|
|
198
|
+
expect(today).toBeInTheDocument()
|
|
199
|
+
expect(thisYear).toBeInTheDocument()
|
|
200
|
+
})
|
|
201
|
+
|
|
202
|
+
fireEvent(
|
|
203
|
+
thisYear,
|
|
204
|
+
new MouseEvent('click', {
|
|
205
|
+
bubbles: true,
|
|
206
|
+
cancelable: true,
|
|
207
|
+
}),
|
|
208
|
+
)
|
|
209
|
+
|
|
210
|
+
await waitFor(() => {
|
|
211
|
+
expect(input).toHaveValue(DateTime.getYearStartDate(new Date()).formatDate() + " to " + DateTime.getYearEndDate(new Date()).formatDate())
|
|
212
|
+
})
|
|
213
|
+
})
|
|
214
|
+
|
|
215
|
+
test('shows DatePicker QuickPick ranges ending today', async () => {
|
|
216
|
+
const testId = 'datepicker-quick-pick-ends-today'
|
|
217
|
+
render(
|
|
218
|
+
<DatePicker
|
|
219
|
+
allowInput
|
|
220
|
+
data={{ testid: testId }}
|
|
221
|
+
mode="range"
|
|
222
|
+
pickerId="date-picker-quick-pick"
|
|
223
|
+
placeholder="mm/dd/yyyy to mm/dd/yyyy"
|
|
224
|
+
selectionType="quickpick"
|
|
225
|
+
thisRangesEndToday
|
|
226
|
+
/>
|
|
227
|
+
)
|
|
228
|
+
|
|
229
|
+
const kit = screen.getByTestId(testId)
|
|
230
|
+
const input = within(kit).getByPlaceholderText('mm/dd/yyyy to mm/dd/yyyy')
|
|
231
|
+
|
|
232
|
+
fireEvent(
|
|
233
|
+
input,
|
|
234
|
+
new MouseEvent('click', {
|
|
235
|
+
bubbles: true,
|
|
236
|
+
cancelable: true,
|
|
237
|
+
}),
|
|
238
|
+
)
|
|
239
|
+
|
|
240
|
+
const thisYear = within(kit).getByText('This year')
|
|
241
|
+
|
|
242
|
+
fireEvent(
|
|
243
|
+
thisYear,
|
|
244
|
+
new MouseEvent('click', {
|
|
245
|
+
bubbles: true,
|
|
246
|
+
cancelable: true,
|
|
247
|
+
}),
|
|
248
|
+
)
|
|
249
|
+
|
|
250
|
+
await waitFor(() => {
|
|
251
|
+
expect(input).toHaveValue(DateTime.getYearStartDate(new Date()).formatDate() + " to " + new Date().formatDate())
|
|
252
|
+
})
|
|
253
|
+
})
|
|
40
254
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx,Fragment,jsxs}from"react/jsx-runtime";import{useState,useEffect}from"react";import{b as buildAriaProps,c as buildDataProps,d as buildHtmlProps,H as HighchartsReact,e as Highcharts,f as classnames,g as globalProps,h as HighchartsMore,S as SolidGauge,i as buildCss}from"./_typeahead-BgBecRbi.js";import{c as colors,h as highchartsTheme,m as merge,a as highchartsDarkTheme,t as typography}from"./lib-DujEDjJx.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{b as buildAriaProps,c as buildDataProps,d as buildHtmlProps,H as HighchartsReact,e as Highcharts,f as classnames,g as globalProps,h as HighchartsMore,S as SolidGauge,i as buildCss}from"./_typeahead-ZLTFtAoW.js";import{c as colors,h as highchartsTheme,m as merge,a as highchartsDarkTheme,t as typography}from"./lib-CY5ZPzic.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,4 +1,4 @@
|
|
|
1
|
-
import{g as getDefaultExportFromCjs,o as filter,p as omit,q as noop$2,u as useCollapsible,r as createPopper,s as uniqueId,v as get,w as flip$2,x as offset$2,y as shift$2,z as arrow$3,A as computePosition$1,B as createCoords$1,C as round$1,D as max$1,E as min$1,F as rectToClientRect$1,G as getAllIcons,H as cloneDeep,I as isEmpty$1,J as isString}from"./lib-
|
|
1
|
+
import{g as getDefaultExportFromCjs,o as filter,p as omit,q as noop$2,u as useCollapsible,r as createPopper,s as uniqueId,v as get,w as flip$2,x as offset$2,y as shift$2,z as arrow$3,A as computePosition$1,B as createCoords$1,C as round$1,D as max$1,E as min$1,F as rectToClientRect$1,G as getAllIcons,H as cloneDeep,I as isEmpty$1,J as isString}from"./lib-CY5ZPzic.js";import*as React from"react";import React__default,{createContext,useReducer,useEffect,useMemo,useContext,createElement,useRef,forwardRef,useState,useLayoutEffect,useCallback,useImperativeHandle,Component,Fragment as Fragment$1}from"react";import{jsx as jsx$1,Fragment,jsxs}from"react/jsx-runtime";import{TrixEditor}from"react-trix";import Trix from"trix";import*as ReactDOM from"react-dom";import ReactDOM__default,{createPortal}from"react-dom";import require$$0 from"react-is";const initialState={items:[],dragData:{id:"",initialGroup:"",originId:""},isDragging:"",activeContainer:""};const reducer=(state,action)=>{switch(action.type){case"SET_ITEMS":return{...state,items:action.payload};case"SET_DRAG_DATA":return{...state,dragData:action.payload};case"SET_IS_DRAGGING":return{...state,isDragging:action.payload};case"SET_ACTIVE_CONTAINER":return{...state,activeContainer:action.payload};case"CHANGE_CATEGORY":return{...state,items:state.items.map((item=>item.id===action.payload.itemId?{...item,container:action.payload.container}:item))};case"REORDER_ITEMS":{const{dragId:dragId,targetId:targetId}=action.payload;const newItems=[...state.items];const draggedItem=newItems.find((item=>item.id===dragId));const draggedIndex=newItems.indexOf(draggedItem);const targetIndex=newItems.findIndex((item=>item.id===targetId));newItems.splice(draggedIndex,1);newItems.splice(targetIndex,0,draggedItem);return{...state,items:newItems}}default:return state}};const DragContext=createContext({});const DraggableContext=()=>useContext(DragContext);const DraggableProvider=({children:children,initialItems:initialItems,onReorder:onReorder,onDragStart:onDragStart,onDragEnter:onDragEnter,onDragEnd:onDragEnd,onDrop:onDrop,onDragOver:onDragOver,dropZone:dropZone={type:"ghost",color:"neutral",direction:"vertical"},providerId:providerId="default"})=>{const[state,dispatch]=useReducer(reducer,initialState);let dropZoneType="ghost";let dropZoneColor="neutral";let dropZoneDirection="vertical";if(typeof dropZone==="string"){dropZoneType=dropZone}else{dropZoneType=dropZone.type||"ghost";dropZoneColor=dropZone.type==="line"?dropZone.color||"primary":dropZone.color||"neutral";if(dropZoneType==="line"){dropZoneDirection=dropZone.direction||"vertical"}}useEffect((()=>{dispatch({type:"SET_ITEMS",payload:initialItems})}),[initialItems]);useEffect((()=>{onReorder(state.items)}),[state.items]);const handleDragStart=(id,container)=>{dispatch({type:"SET_DRAG_DATA",payload:{id:id,initialGroup:container,originId:providerId}});dispatch({type:"SET_IS_DRAGGING",payload:id});if(onDragStart)onDragStart(id,container)};const handleDragEnter=(id,container)=>{if(state.dragData.originId!==providerId)return;if(state.dragData.id!==id){dispatch({type:"REORDER_ITEMS",payload:{dragId:state.dragData.id,targetId:id}});dispatch({type:"SET_DRAG_DATA",payload:{id:state.dragData.id,initialGroup:container,originId:providerId}})}if(onDragEnter)onDragEnter(id,container)};const handleDragEnd=()=>{dispatch({type:"SET_IS_DRAGGING",payload:""});dispatch({type:"SET_ACTIVE_CONTAINER",payload:""});dispatch({type:"SET_DRAG_DATA",payload:{id:"",initialGroup:"",originId:""}});if(onDragEnd)onDragEnd()};const changeCategory=(itemId,container)=>{dispatch({type:"CHANGE_CATEGORY",payload:{itemId:itemId,container:container}})};const handleDrop=container=>{if(state.dragData.originId!==providerId)return;dispatch({type:"SET_IS_DRAGGING",payload:""});dispatch({type:"SET_ACTIVE_CONTAINER",payload:""});changeCategory(state.dragData.id,container);if(onDrop)onDrop(container)};const handleDragOver=(e,container)=>{if(state.dragData.originId!==providerId)return;e.preventDefault();dispatch({type:"SET_ACTIVE_CONTAINER",payload:container});if(onDragOver)onDragOver(e,container)};const contextValue=useMemo((()=>({items:state.items,dragData:state.dragData,isDragging:state.isDragging,activeContainer:state.activeContainer,dropZone:dropZoneType,dropZoneColor:dropZoneColor,...dropZoneType==="line"?{direction:dropZoneDirection}:{},handleDragStart:handleDragStart,handleDragEnter:handleDragEnter,handleDragEnd:handleDragEnd,handleDrop:handleDrop,handleDragOver:handleDragOver})),[state,dropZoneType,dropZoneColor,dropZoneDirection]);return jsx$1(DragContext.Provider,{value:contextValue,children:children})};var classnames$1={exports:{}};
|
|
2
2
|
/*!
|
|
3
3
|
Copyright (c) 2018 Jed Watson.
|
|
4
4
|
Licensed under the MIT License (MIT), see
|