playbook_ui 16.4.0.pre.rc.5 → 16.4.0
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_popover/docs/_popover_placement.jsx +81 -0
- data/app/pb_kits/playbook/pb_popover/docs/_popover_placement_react.md +1 -0
- data/app/pb_kits/playbook/pb_popover/docs/_popover_position.html.erb +128 -0
- data/app/pb_kits/playbook/pb_popover/docs/_popover_position_rails.md +1 -0
- data/app/pb_kits/playbook/pb_popover/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_popover/docs/index.js +2 -1
- data/dist/chunks/{_pb_line_graph-D6s5rymw.js → _pb_line_graph-DHY2Tea7.js} +1 -1
- data/dist/chunks/_typeahead-CpQ_F870.js +1 -0
- data/dist/chunks/{globalProps-Ds_6HBhX.js → globalProps-C893Xh66.js} +1 -1
- data/dist/chunks/{lib-BaO72ugL.js → lib-9kTaI6nm.js} +2 -2
- data/dist/chunks/vendor.js +3 -3
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/lib/playbook/version.rb +1 -1
- metadata +10 -6
- data/dist/chunks/_typeahead-Bh0RF1X-.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: 4a635bc71af18602cfde24d3d052b40cbb7592f4b91017588e7c9203de44e596
|
|
4
|
+
data.tar.gz: 592c7183ddbb6d16b0dedc1680795abbb7c49b61db857fe4e93ab631e2aa22a5
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 73e7d60fb1a65ceada297940f482b0eaa54a96ce14f118b3e1bcbba4c252ceab99cab9d57c4c1db690cff3ebb9e34db5640a7193bea5187f0e29f5ca0d26fef1
|
|
7
|
+
data.tar.gz: 234064ff262cf2ac638b83a39b2b5e8acb75a17c6abd3aa0b7ab85d278ca193de4b27dd9497b38e35df82927662d74f1b7445a7bef330a647d3d08f3161a671b
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
import React, { useState } from 'react'
|
|
2
|
+
|
|
3
|
+
import Button from '../../pb_button/_button'
|
|
4
|
+
import Flex from '../../pb_flex/_flex'
|
|
5
|
+
import PbReactPopover from '../../pb_popover/_popover'
|
|
6
|
+
|
|
7
|
+
const ROWS = [
|
|
8
|
+
[
|
|
9
|
+
{ placement: 'top', label: 'Top' },
|
|
10
|
+
{ placement: 'top-start', label: 'Top start' },
|
|
11
|
+
{ placement: 'top-end', label: 'Top end' },
|
|
12
|
+
],
|
|
13
|
+
[
|
|
14
|
+
{ placement: 'bottom', label: 'Bottom' },
|
|
15
|
+
{ placement: 'bottom-start', label: 'Bottom start' },
|
|
16
|
+
{ placement: 'bottom-end', label: 'Bottom end' },
|
|
17
|
+
],
|
|
18
|
+
[
|
|
19
|
+
{ placement: 'left', label: 'Left' },
|
|
20
|
+
{ placement: 'left-start', label: 'Left start' },
|
|
21
|
+
{ placement: 'left-end', label: 'Left end' },
|
|
22
|
+
],
|
|
23
|
+
[
|
|
24
|
+
{ placement: 'right', label: 'Right' },
|
|
25
|
+
{ placement: 'right-start', label: 'Right start' },
|
|
26
|
+
{ placement: 'right-end', label: 'Right end' },
|
|
27
|
+
],
|
|
28
|
+
]
|
|
29
|
+
|
|
30
|
+
const PopoverPlacement = (props) => {
|
|
31
|
+
const [open, setOpen] = useState({})
|
|
32
|
+
|
|
33
|
+
const isOpen = (placement) => open[placement] === true
|
|
34
|
+
const setOpenFor = (placement) => (value) => setOpen((prev) => ({ ...prev, [placement]: value }))
|
|
35
|
+
const toggle = (placement) => setOpenFor(placement)(!isOpen(placement))
|
|
36
|
+
const handleShouldClose = (placement) => (shouldClose) => {
|
|
37
|
+
if (shouldClose) setOpenFor(placement)(false)
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
return (
|
|
41
|
+
<>
|
|
42
|
+
{ROWS.map((placements, rowIndex) => (
|
|
43
|
+
<Flex
|
|
44
|
+
justify="around"
|
|
45
|
+
key={placements[0].placement}
|
|
46
|
+
marginBottom={rowIndex < ROWS.length - 1 ? 'sm' : undefined}
|
|
47
|
+
orientation="row"
|
|
48
|
+
wrap
|
|
49
|
+
{...props}
|
|
50
|
+
>
|
|
51
|
+
{placements.map(({ placement, label }) => {
|
|
52
|
+
const trigger = (
|
|
53
|
+
<Button
|
|
54
|
+
key={placement}
|
|
55
|
+
onClick={() => toggle(placement)}
|
|
56
|
+
text={label}
|
|
57
|
+
variant="secondary"
|
|
58
|
+
/>
|
|
59
|
+
)
|
|
60
|
+
return (
|
|
61
|
+
<PbReactPopover
|
|
62
|
+
closeOnClick="outside"
|
|
63
|
+
key={placement}
|
|
64
|
+
offset
|
|
65
|
+
placement={placement}
|
|
66
|
+
reference={trigger}
|
|
67
|
+
shouldClosePopover={handleShouldClose(placement)}
|
|
68
|
+
show={isOpen(placement)}
|
|
69
|
+
{...props}
|
|
70
|
+
>
|
|
71
|
+
{`Popover: ${label.toLowerCase()}`}
|
|
72
|
+
</PbReactPopover>
|
|
73
|
+
)
|
|
74
|
+
})}
|
|
75
|
+
</Flex>
|
|
76
|
+
))}
|
|
77
|
+
</>
|
|
78
|
+
)
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
export default PopoverPlacement
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
Use the `placement` prop to control where the popover appears relative to its trigger. Valid values include `top`, `bottom`, `left`, `right`, and aligned variants such as `top-start`, `top-end`, `bottom-start`, `bottom-end`, `left-start`, `left-end`, `right-start`, and `right-end`.
|
|
@@ -0,0 +1,128 @@
|
|
|
1
|
+
<%= pb_rails("flex", props: { justify: "around", margin_bottom: "sm", orientation: "row", wrap: true }) do %>
|
|
2
|
+
<%= pb_rails("button", props: { text: "Top", variant: "secondary", id: "placement-popover-top" }) %>
|
|
3
|
+
<%= pb_rails("popover", props: {
|
|
4
|
+
close_on_click: "outside",
|
|
5
|
+
trigger_element_id: "placement-popover-top",
|
|
6
|
+
tooltip_id: "placement-tooltip-top",
|
|
7
|
+
position: "top",
|
|
8
|
+
offset: true
|
|
9
|
+
}) do %>
|
|
10
|
+
Popover: top
|
|
11
|
+
<% end %>
|
|
12
|
+
<%= pb_rails("button", props: { text: "Top start", variant: "secondary", id: "placement-popover-top-start" }) %>
|
|
13
|
+
<%= pb_rails("popover", props: {
|
|
14
|
+
close_on_click: "outside",
|
|
15
|
+
trigger_element_id: "placement-popover-top-start",
|
|
16
|
+
tooltip_id: "placement-tooltip-top-start",
|
|
17
|
+
position: "top-start",
|
|
18
|
+
offset: true
|
|
19
|
+
}) do %>
|
|
20
|
+
Popover: top start
|
|
21
|
+
<% end %>
|
|
22
|
+
<%= pb_rails("button", props: { text: "Top end", variant: "secondary", id: "placement-popover-top-end" }) %>
|
|
23
|
+
<%= pb_rails("popover", props: {
|
|
24
|
+
close_on_click: "outside",
|
|
25
|
+
trigger_element_id: "placement-popover-top-end",
|
|
26
|
+
tooltip_id: "placement-tooltip-top-end",
|
|
27
|
+
position: "top-end",
|
|
28
|
+
offset: true
|
|
29
|
+
}) do %>
|
|
30
|
+
Popover: top end
|
|
31
|
+
<% end %>
|
|
32
|
+
<% end %>
|
|
33
|
+
<%= pb_rails("flex", props: { justify: "around", margin_bottom: "sm", orientation: "row", wrap: true }) do %>
|
|
34
|
+
<%= pb_rails("button", props: { text: "Bottom", variant: "secondary", id: "placement-popover-bottom" }) %>
|
|
35
|
+
<%= pb_rails("popover", props: {
|
|
36
|
+
close_on_click: "outside",
|
|
37
|
+
trigger_element_id: "placement-popover-bottom",
|
|
38
|
+
tooltip_id: "placement-tooltip-bottom",
|
|
39
|
+
position: "bottom",
|
|
40
|
+
offset: true
|
|
41
|
+
}) do %>
|
|
42
|
+
Popover: bottom
|
|
43
|
+
<% end %>
|
|
44
|
+
<%= pb_rails("button", props: { text: "Bottom start", variant: "secondary", id: "placement-popover-bottom-start" }) %>
|
|
45
|
+
<%= pb_rails("popover", props: {
|
|
46
|
+
close_on_click: "outside",
|
|
47
|
+
trigger_element_id: "placement-popover-bottom-start",
|
|
48
|
+
tooltip_id: "placement-tooltip-bottom-start",
|
|
49
|
+
position: "bottom-start",
|
|
50
|
+
offset: true
|
|
51
|
+
}) do %>
|
|
52
|
+
Popover: bottom start
|
|
53
|
+
<% end %>
|
|
54
|
+
<%= pb_rails("button", props: { text: "Bottom end", variant: "secondary", id: "placement-popover-bottom-end" }) %>
|
|
55
|
+
<%= pb_rails("popover", props: {
|
|
56
|
+
close_on_click: "outside",
|
|
57
|
+
trigger_element_id: "placement-popover-bottom-end",
|
|
58
|
+
tooltip_id: "placement-tooltip-bottom-end",
|
|
59
|
+
position: "bottom-end",
|
|
60
|
+
offset: true
|
|
61
|
+
}) do %>
|
|
62
|
+
Popover: bottom end
|
|
63
|
+
<% end %>
|
|
64
|
+
<% end %>
|
|
65
|
+
<%= pb_rails("flex", props: { justify: "around", margin_bottom: "sm", orientation: "row", wrap: true }) do %>
|
|
66
|
+
<%= pb_rails("button", props: { text: "Left", variant: "secondary", id: "placement-popover-left" }) %>
|
|
67
|
+
<%= pb_rails("popover", props: {
|
|
68
|
+
close_on_click: "outside",
|
|
69
|
+
trigger_element_id: "placement-popover-left",
|
|
70
|
+
tooltip_id: "placement-tooltip-left",
|
|
71
|
+
position: "left",
|
|
72
|
+
offset: true
|
|
73
|
+
}) do %>
|
|
74
|
+
Popover: left
|
|
75
|
+
<% end %>
|
|
76
|
+
<%= pb_rails("button", props: { text: "Left start", variant: "secondary", id: "placement-popover-left-start" }) %>
|
|
77
|
+
<%= pb_rails("popover", props: {
|
|
78
|
+
close_on_click: "outside",
|
|
79
|
+
trigger_element_id: "placement-popover-left-start",
|
|
80
|
+
tooltip_id: "placement-tooltip-left-start",
|
|
81
|
+
position: "left-start",
|
|
82
|
+
offset: true
|
|
83
|
+
}) do %>
|
|
84
|
+
Popover: left start
|
|
85
|
+
<% end %>
|
|
86
|
+
<%= pb_rails("button", props: { text: "Left end", variant: "secondary", id: "placement-popover-left-end" }) %>
|
|
87
|
+
<%= pb_rails("popover", props: {
|
|
88
|
+
close_on_click: "outside",
|
|
89
|
+
trigger_element_id: "placement-popover-left-end",
|
|
90
|
+
tooltip_id: "placement-tooltip-left-end",
|
|
91
|
+
position: "left-end",
|
|
92
|
+
offset: true
|
|
93
|
+
}) do %>
|
|
94
|
+
Popover: left end
|
|
95
|
+
<% end %>
|
|
96
|
+
<% end %>
|
|
97
|
+
<%= pb_rails("flex", props: { justify: "around", orientation: "row", wrap: true }) do %>
|
|
98
|
+
<%= pb_rails("button", props: { text: "Right", variant: "secondary", id: "placement-popover-right" }) %>
|
|
99
|
+
<%= pb_rails("popover", props: {
|
|
100
|
+
close_on_click: "outside",
|
|
101
|
+
trigger_element_id: "placement-popover-right",
|
|
102
|
+
tooltip_id: "placement-tooltip-right",
|
|
103
|
+
position: "right",
|
|
104
|
+
offset: true
|
|
105
|
+
}) do %>
|
|
106
|
+
Popover: right
|
|
107
|
+
<% end %>
|
|
108
|
+
<%= pb_rails("button", props: { text: "Right start", variant: "secondary", id: "placement-popover-right-start" }) %>
|
|
109
|
+
<%= pb_rails("popover", props: {
|
|
110
|
+
close_on_click: "outside",
|
|
111
|
+
trigger_element_id: "placement-popover-right-start",
|
|
112
|
+
tooltip_id: "placement-tooltip-right-start",
|
|
113
|
+
position: "right-start",
|
|
114
|
+
offset: true
|
|
115
|
+
}) do %>
|
|
116
|
+
Popover: right start
|
|
117
|
+
<% end %>
|
|
118
|
+
<%= pb_rails("button", props: { text: "Right end", variant: "secondary", id: "placement-popover-right-end" }) %>
|
|
119
|
+
<%= pb_rails("popover", props: {
|
|
120
|
+
close_on_click: "outside",
|
|
121
|
+
trigger_element_id: "placement-popover-right-end",
|
|
122
|
+
tooltip_id: "placement-tooltip-right-end",
|
|
123
|
+
position: "right-end",
|
|
124
|
+
offset: true
|
|
125
|
+
}) do %>
|
|
126
|
+
Popover: right end
|
|
127
|
+
<% end %>
|
|
128
|
+
<% end %>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
Use the `position` prop to control where the popover appears relative to its trigger. Valid values include `top`, `bottom`, `left`, `right`, and aligned variants such as `top-start`, `top-end`, `bottom-start`, `bottom-end`, `left-start`, `left-end`, `right-start`, and `right-end`.
|
|
@@ -7,6 +7,7 @@ examples:
|
|
|
7
7
|
- popover_scroll_height: Scroll and Height Settings
|
|
8
8
|
- popover_actionable_content: With Actionable Content
|
|
9
9
|
- popover_append_to: Append To
|
|
10
|
+
- popover_position: Position
|
|
10
11
|
|
|
11
12
|
react:
|
|
12
13
|
- popover_default: Default
|
|
@@ -16,3 +17,4 @@ examples:
|
|
|
16
17
|
- popover_scroll_height: Scroll and Height Settings
|
|
17
18
|
- popover_actionable_content: With Actionable Content
|
|
18
19
|
- popover_append_to: Append To
|
|
20
|
+
- popover_placement: Placement
|
|
@@ -4,4 +4,5 @@ export { default as PopoverClose } from './_popover_close.jsx'
|
|
|
4
4
|
export { default as PopoverZIndex } from './_popover_z_index.jsx'
|
|
5
5
|
export { default as PopoverScrollHeight } from './_popover_scroll_height.jsx'
|
|
6
6
|
export { default as PopoverActionableContent } from './_popover_actionable_content.jsx'
|
|
7
|
-
export { default as PopoverAppendTo } from './_popover_append_to.jsx'
|
|
7
|
+
export { default as PopoverAppendTo } from './_popover_append_to.jsx'
|
|
8
|
+
export { default as PopoverPlacement } from './_popover_placement.jsx'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx}from"react/jsx-runtime";import{useMemo}from"react";import{b as buildAriaProps,a as buildDataProps,c as buildHtmlProps,d as classnames,e as buildCss,g as globalProps}from"./globalProps-
|
|
1
|
+
import{jsx}from"react/jsx-runtime";import{useMemo}from"react";import{b as buildAriaProps,a as buildDataProps,c as buildHtmlProps,d as classnames,e as buildCss,g as globalProps}from"./globalProps-C893Xh66.js";import Highcharts from"highcharts";import HighchartsReact from"highcharts-react-official";import{t as typography,c as colors}from"./lib-9kTaI6nm.js";import highchartsMore from"highcharts/highcharts-more";import solidGauge from"highcharts/modules/solid-gauge";const barGraphTheme={title:{text:"",style:{color:colors.text_lt_default,fontFamily:typography.font_family_base,fontWeight:typography.bold,fontSize:typography.heading_3}},subtitle:{text:"",style:{fontFamily:typography.font_family_base,color:colors.text_lt_light,fontWeight:typography.regular,fontSize:typography.text_base}},chart:{type:"column"},tooltip:{backgroundColor:{linearGradient:{x1:0,y1:0,x2:0,y2:1},stops:[[0,colors.bg_dark],[1,colors.bg_dark]]},style:{fontFamily:typography.font_family_base,color:colors.text_dk_default,fontWeight:typography.regular,fontSize:typography.text_smaller}},colors:[colors.data_1,colors.data_2,colors.data_3,colors.data_4,colors.data_5,colors.data_6,colors.data_7],credits:{enabled:false},legend:{enabled:false,itemStyle:{color:colors.text_lt_light,fill:colors.text_lt_light,fontSize:typography.text_smaller}},xAxis:{gridLineWidth:0,lineColor:colors.border_light,tickColor:colors.border_light,labels:{style:{fontFamily:typography.font_family_base,color:colors.text_lt_lighter,fontWeight:typography.bold,fontSize:typography.text_smaller}},title:{style:{color:colors.text_lt_default,fontFamily:typography.font_family_base,fontWeight:typography.regular,fontSize:typography.heading_4}}},yAxis:{alternateGridColor:void 0,minorTickInterval:null,gridLineColor:colors.border_light,minorGridLineColor:colors.border_light,lineWidth:0,tickWidth:0,labels:{style:{fontFamily:typography.font_family_base,color:colors.text_lt_lighter,fontWeight:typography.bold,fontSize:typography.text_smaller}},title:{style:{fontFamily:typography.font_family_base,color:colors.text_lt_lighter,fontWeight:typography.bold,fontSize:typography.text_smaller}}}};const PbBarGraph=props=>{const{aria:aria={},data:data={},id:id,htmlOptions:htmlOptions={},options:options,className:className}=props;const ariaProps=buildAriaProps(aria);const dataProps=buildDataProps(data);const htmlProps=buildHtmlProps(htmlOptions);const classes=classnames(buildCss("pb_pb_bar_graph"),globalProps(props),className);const mergedOptions=useMemo((()=>{if(!options||typeof options!=="object"){console.error("❌ Invalid options passed to <PbBarGraph />",options);return{}}return Highcharts.merge({},barGraphTheme,options)}),[options]);return jsx("div",{children:jsx(HighchartsReact,{containerProps:{className:classnames(classes),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:mergedOptions})})};const pbCircleChartTheme={title:{text:"",style:{color:colors.text_lt_default,fontFamily:typography.font_family_base,fontWeight:typography.bold,fontSize:typography.heading_3}},chart:{type:"pie"},tooltip:{backgroundColor:{linearGradient:{x1:0,y1:0,x2:0,y2:1},stops:[[0,colors.bg_dark],[1,colors.bg_dark]]},pointFormat:'<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: <b>{point.y}</b>',followPointer:true,shadow:false,borderWidth:0,borderRadius:10,style:{fontFamily:typography.font_family_base,color:colors.text_dk_default,fontWeight:typography.regular,fontSize:typography.text_smaller}},plotOptions:{pie:{dataLabels:{enabled:false,connectorShape:"straight",connectorWidth:3,format:"<div>{point.name}</div>",style:{fontFamily:typography.font_family_base,fontSize:typography.text_smaller,color:colors.text_lt_light,fontWeight:typography.regular,textOutline:"2px $white"}},innerSize:"50%",borderColor:"",borderWidth:null,colors:[colors.data_1,colors.data_2,colors.data_3,colors.data_4,colors.data_5,colors.data_6,colors.data_7]}},legend:{layout:"horizontal",align:"center",verticalAlign:"bottom",itemStyle:{fontFamily:typography.font_family_base,color:colors.text_lt_light,fontWeight:typography.regular,fontSize:typography.text_smaller},itemHoverStyle:{color:colors.text_lt_default},itemHiddenStyle:{color:colors.text_lt_lighter}},credits:{enabled:false}};const PbCircleChart=props=>{const{aria:aria={},className:className,data:data={},id:id,htmlOptions:htmlOptions={},options:options}=props;const ariaProps=buildAriaProps(aria);const dataProps=buildDataProps(data);const htmlProps=buildHtmlProps(htmlOptions);const classes=classnames(buildCss("pb_pb_circle_chart"),globalProps(props),className);const mergedOptions=useMemo((()=>{if(!options||typeof options!=="object"){console.error("❌ Invalid options passed to <PbCircleChart />",options);return{}}return Highcharts.merge({},pbCircleChartTheme,options)}),[options]);return jsx("div",{children:jsx(HighchartsReact,{containerProps:{className:classnames(classes),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:mergedOptions})})};const pbGaugeGraphTheme={title:{text:"",style:{fontFamily:typography.font_family_base,fontSize:typography.text_larger}},chart:{type:"solidgauge",events:{render(){this.container;const arc=this.container.querySelector("path.gauge-pane");if(arc)arc.setAttribute("stroke-linejoin","round")}}},pane:{size:"90%",startAngle:-100,endAngle:100,background:[{borderWidth:20,innerRadius:"90%",outerRadius:"90%",shape:"arc",className:"gauge-pane",borderColor:colors.border_light,borderRadius:"50%"}]},tooltip:{backgroundColor:{linearGradient:{x1:0,y1:0,x2:0,y2:1},stops:[[0,colors.bg_dark],[1,colors.bg_dark]]},pointFormat:'<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: <b>{point.y}</b>',followPointer:true,shadow:false,borderWidth:0,borderRadius:10,style:{fontFamily:typography.font_family_base,color:colors.text_dk_default,fontWeight:typography.regular,fontSize:typography.text_smaller}},yAxis:{min:0,max:100,lineWidth:0,tickPositions:[]},plotOptions:{solidgauge:{borderColor:colors.data_1,borderWidth:20,color:colors.data_1,radius:90,innerRadius:"90%",y:-26,dataLabels:{borderWidth:0,color:colors.text_lt_default,enabled:true,format:'<span class="fix">{y:,f}</span>',style:{fontFamily:typography.font_family_base,fontWeight:typography.regular,fontSize:typography.heading_2},y:-26}}},credits:{enabled:false}};const PbGaugeChart=props=>{const{aria:aria={},className:className,data:data={},htmlOptions:htmlOptions={},id:id,ref:ref,options:options={}}=props;const ariaProps=buildAriaProps(aria);const dataProps=buildDataProps(data);const htmlProps=buildHtmlProps(htmlOptions);const classes=classnames(buildCss("pb_pb_gauge_chart"),globalProps(props),className);const mergedOptions=useMemo((()=>{if(!options||typeof options!=="object"){console.error("❌ Invalid options passed to <PbLineGraph />",options);return{}}return Highcharts.merge({},pbGaugeGraphTheme,options)}),[options]);highchartsMore(Highcharts);solidGauge(Highcharts);return jsx("div",{children:jsx(HighchartsReact,{containerProps:{className:classnames(classes),id:id,ref:ref,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:mergedOptions})})};const pbLineGraphTheme={title:{text:"",style:{color:colors.text_lt_default,fontFamily:typography.font_family_base,fontWeight:typography.bold,fontSize:typography.heading_3}},subtitle:{text:"",style:{fontFamily:typography.font_family_base,color:colors.text_lt_light,fontWeight:typography.regular,fontSize:typography.text_base}},chart:{type:"line"},tooltip:{backgroundColor:{linearGradient:{x1:0,y1:0,x2:0,y2:1},stops:[[0,colors.bg_dark],[1,colors.bg_dark]]},followPointer:true,shadow:false,borderWidth:0,borderRadius:10,style:{fontFamily:typography.font_family_base,color:colors.text_dk_default,fontWeight:typography.regular,fontSize:typography.text_smaller}},plotOptions:{line:{dataLabels:{enabled:false}}},credits:{enabled:false},legend:{enabled:false,itemStyle:{fontFamily:typography.font_family_base,color:colors.text_lt_light,fontWeight:typography.regular,fontSize:typography.text_smaller},itemHoverStyle:{color:colors.text_lt_default},itemHiddenStyle:{color:colors.text_lt_lighter}},colors:[colors.data_1,colors.data_2,colors.data_3,colors.data_4,colors.data_5,colors.data_6,colors.data_7],xAxis:{gridLineWidth:0,lineColor:colors.border_light,tickColor:colors.border_light,labels:{style:{fontFamily:typography.font_family_base,color:colors.text_lt_lighter,fontWeight:typography.bold,fontSize:typography.text_smaller}},title:{style:{color:colors.text_lt_default,fontFamily:typography.font_family_base,fontWeight:typography.regular,fontSize:typography.heading_4}}},yAxis:{alternateGridColor:void 0,minorTickInterval:null,gridLineColor:colors.border_light,minorGridLineColor:colors.border_light,lineWidth:0,tickWidth:0,tickPixelInterval:50,labels:{style:{fontFamily:typography.font_family_base,color:colors.text_lt_lighter,fontWeight:typography.bold,fontSize:typography.text_smaller}},title:{style:{fontFamily:typography.font_family_base,color:colors.text_lt_lighter,fontWeight:typography.bold,fontSize:typography.text_smaller}}}};const PbLineGraph=props=>{const{aria:aria={},className:className,data:data={},id:id,htmlOptions:htmlOptions={},options:options}=props;const ariaProps=buildAriaProps(aria);const dataProps=buildDataProps(data);const htmlProps=buildHtmlProps(htmlOptions);const classes=classnames(buildCss("pb_pb_line_graph"),globalProps(props),className);const mergedOptions=useMemo((()=>{if(!options||typeof options!=="object"){console.error("❌ Invalid options passed to <PbLineGraph />",options);return{}}return Highcharts.merge({},pbLineGraphTheme,options)}),[options]);return jsx("div",{children:jsx(HighchartsReact,{containerProps:{className:classnames(classes),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:mergedOptions})})};export{PbBarGraph as P,PbCircleChart as a,PbGaugeChart as b,PbLineGraph as c};
|