playbook_ui 16.2.0.pre.alpha.play278114375 → 16.2.0.pre.alpha.play278114393
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_enhanced_element/element_observer.ts +1 -1
- data/app/pb_kits/playbook/pb_enhanced_element/index.ts +1 -1
- data/app/pb_kits/playbook/pb_kit_registry/index.ts +133 -151
- data/dist/chunks/{_pb_line_graph-DmLNisSX.js → _pb_line_graph-COiGKiaG.js} +1 -1
- data/dist/chunks/{_typeahead-A65ydiHU.js → _typeahead-BPxvgwki.js} +1 -1
- data/dist/chunks/{globalProps-CIociBQR.js → globalProps-DmthEI5N.js} +1 -1
- data/dist/chunks/{lib-DMiulv21.js → lib-C9PDFcmX.js} +1 -1
- data/dist/chunks/vendor.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 +5 -5
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 438c861811c5e412128e0005f029bad2f00cc7c2a5acaa0908167190a53b1e9e
|
|
4
|
+
data.tar.gz: c017a6ff8e66cc85dcf65c0db4d5419a915438d2c2a086bcaff843322a76ef79
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 89b9283cc0bcc332404ea561f7ab6c3832dcb3d0d8eb38ff53856ca0a8de630e7b5b715736d6e20579c6cd2a28ea9a9cb44a704a22b580fc31339ea302c2e649
|
|
7
|
+
data.tar.gz: 96f513ad69580949284dae78007b796cd0ef75aea4406e7eca6e381738c4e3a754b9df87ba554d0931e8fa5f60785e8f66a52ffa137d8ff550dcbc2626e7afc5
|
|
@@ -1,198 +1,180 @@
|
|
|
1
1
|
// eslint-disable-next-line
|
|
2
2
|
// @ts-nocheck
|
|
3
|
-
import PbEnhancedElement from
|
|
3
|
+
import PbEnhancedElement from "../pb_enhanced_element";
|
|
4
|
+
|
|
5
|
+
type KitClass = typeof PbEnhancedElement;
|
|
4
6
|
|
|
5
7
|
class PbKitRegistry {
|
|
6
|
-
private static instance: PbKitRegistry
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
private
|
|
8
|
+
private static instance: PbKitRegistry;
|
|
9
|
+
|
|
10
|
+
// array to avoid overwriting if multiple kits share a selector
|
|
11
|
+
private kits: Map<string, KitClass[]> = new Map();
|
|
12
|
+
|
|
13
|
+
private mutationObserver: MutationObserver | null = null;
|
|
14
|
+
private initialized = false;
|
|
15
|
+
|
|
16
|
+
// rAF batching to reduce jank during heavy DOM churn
|
|
17
|
+
private queued = false;
|
|
18
|
+
private pendingMutations: MutationRecord[] = [];
|
|
10
19
|
|
|
11
20
|
static getInstance(): PbKitRegistry {
|
|
12
21
|
if (!PbKitRegistry.instance) {
|
|
13
|
-
PbKitRegistry.instance = new PbKitRegistry()
|
|
22
|
+
PbKitRegistry.instance = new PbKitRegistry();
|
|
14
23
|
}
|
|
15
|
-
return PbKitRegistry.instance
|
|
24
|
+
return PbKitRegistry.instance;
|
|
16
25
|
}
|
|
17
26
|
|
|
18
|
-
register(kit:
|
|
19
|
-
const selector = kit.selector
|
|
27
|
+
register(kit: KitClass): void {
|
|
28
|
+
const selector = kit.selector;
|
|
20
29
|
if (!selector) {
|
|
21
|
-
console.warn(
|
|
22
|
-
return
|
|
30
|
+
console.warn("[PbKitRegistry] Kit missing selector:", kit.name);
|
|
31
|
+
return;
|
|
23
32
|
}
|
|
24
|
-
|
|
33
|
+
|
|
34
|
+
const list = this.kits.get(selector) || [];
|
|
35
|
+
list.push(kit);
|
|
36
|
+
this.kits.set(selector, list);
|
|
25
37
|
}
|
|
26
38
|
|
|
27
39
|
start(): void {
|
|
28
|
-
if (this.initialized) return
|
|
29
|
-
this.initialized = true
|
|
40
|
+
if (this.initialized) return;
|
|
41
|
+
this.initialized = true;
|
|
42
|
+
|
|
43
|
+
const target = document.documentElement || document;
|
|
30
44
|
|
|
31
45
|
// Single MutationObserver for ALL kits
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
})
|
|
46
|
+
// attributes OFF
|
|
47
|
+
this.mutationObserver = new MutationObserver((muts) => this.onMutations(muts));
|
|
35
48
|
|
|
36
|
-
this.mutationObserver.observe(
|
|
37
|
-
attributes: true,
|
|
49
|
+
this.mutationObserver.observe(target, {
|
|
38
50
|
childList: true,
|
|
39
|
-
subtree: true
|
|
40
|
-
|
|
51
|
+
subtree: true,
|
|
52
|
+
// attributes: false by omission
|
|
53
|
+
});
|
|
41
54
|
|
|
42
55
|
// Initial scan of document
|
|
43
|
-
this.
|
|
56
|
+
this.scan(document);
|
|
44
57
|
}
|
|
45
58
|
|
|
46
|
-
|
|
47
|
-
this.
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
59
|
+
stop(): void {
|
|
60
|
+
if (!this.initialized) return;
|
|
61
|
+
|
|
62
|
+
this.mutationObserver?.disconnect();
|
|
63
|
+
this.mutationObserver = null;
|
|
64
|
+
|
|
65
|
+
// Disconnect all kit instances safely (snapshot keys first)
|
|
66
|
+
this.kits.forEach((kitsForSelector) => {
|
|
67
|
+
kitsForSelector.forEach((kit) => {
|
|
68
|
+
if (!kit.elements) return;
|
|
69
|
+
const els = Array.from(kit.elements.keys());
|
|
70
|
+
els.forEach((el) => kit.removeMatch(el));
|
|
71
|
+
});
|
|
72
|
+
});
|
|
73
|
+
|
|
74
|
+
this.pendingMutations = [];
|
|
75
|
+
this.queued = false;
|
|
76
|
+
this.initialized = false;
|
|
57
77
|
}
|
|
58
78
|
|
|
59
|
-
|
|
60
|
-
const addedNodes = new Set<Element>()
|
|
61
|
-
const removedNodes = new Set<Element>()
|
|
62
|
-
const attributeChangedNodes = new Set<Element>()
|
|
79
|
+
// ---- Mutation batching ----
|
|
63
80
|
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
if (mutation.type === 'childList') {
|
|
67
|
-
mutation.addedNodes.forEach(node => {
|
|
68
|
-
if (node.nodeType === Node.ELEMENT_NODE) {
|
|
69
|
-
addedNodes.add(node as Element)
|
|
70
|
-
}
|
|
71
|
-
})
|
|
72
|
-
mutation.removedNodes.forEach(node => {
|
|
73
|
-
if (node.nodeType === Node.ELEMENT_NODE) {
|
|
74
|
-
removedNodes.add(node as Element)
|
|
75
|
-
}
|
|
76
|
-
})
|
|
77
|
-
} else if (mutation.type === 'attributes' && mutation.target.nodeType === Node.ELEMENT_NODE) {
|
|
78
|
-
// Attribute changes might affect selector matching - needs special handling
|
|
79
|
-
attributeChangedNodes.add(mutation.target as Element)
|
|
80
|
-
}
|
|
81
|
-
}
|
|
81
|
+
private onMutations(muts: MutationRecord[]): void {
|
|
82
|
+
this.pendingMutations.push(...muts);
|
|
82
83
|
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
this.handleRemovals(removedNodes)
|
|
86
|
-
}
|
|
84
|
+
if (this.queued) return;
|
|
85
|
+
this.queued = true;
|
|
87
86
|
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
this.
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
if (addedNodes.size > 0) {
|
|
95
|
-
this.handleAdditions(addedNodes)
|
|
96
|
-
}
|
|
87
|
+
requestAnimationFrame(() => {
|
|
88
|
+
this.queued = false;
|
|
89
|
+
const batch = this.pendingMutations;
|
|
90
|
+
this.pendingMutations = [];
|
|
91
|
+
this.processMutations(batch);
|
|
92
|
+
});
|
|
97
93
|
}
|
|
98
94
|
|
|
99
|
-
private
|
|
100
|
-
nodes.
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
const currentlyMatches = node.matches?.(selector)
|
|
104
|
-
const hasInstance = kit.elements?.has(node)
|
|
105
|
-
|
|
106
|
-
if (currentlyMatches && !hasInstance) {
|
|
107
|
-
// Element now matches but wasn't registered, add it
|
|
108
|
-
kit.addMatch(node)
|
|
109
|
-
} else if (!currentlyMatches && hasInstance) {
|
|
110
|
-
// Element no longer matches but is still registered, remove it
|
|
111
|
-
kit.removeMatch(node)
|
|
112
|
-
}
|
|
113
|
-
// If matches and has instance, or doesn't match and no instance, no action needed
|
|
114
|
-
} catch (error) {
|
|
115
|
-
console.debug(`[PbKitRegistry] Error handling attribute change for "${selector}":`, error)
|
|
116
|
-
}
|
|
117
|
-
})
|
|
118
|
-
})
|
|
119
|
-
}
|
|
95
|
+
private processMutations(mutations: MutationRecord[]): void {
|
|
96
|
+
// We only care about added nodes here.
|
|
97
|
+
// Removals handled by cleanupDisconnected() (no selector queries on removed subtrees)
|
|
98
|
+
const addedRoots: Element[] = [];
|
|
120
99
|
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
this.kits.forEach((kit, selector) => {
|
|
124
|
-
try {
|
|
125
|
-
// Check if the removed node itself matches
|
|
126
|
-
if (node.matches?.(selector)) {
|
|
127
|
-
kit.removeMatch(node)
|
|
128
|
-
}
|
|
129
|
-
// Check descendants
|
|
130
|
-
const descendants = node.querySelectorAll?.(selector)
|
|
131
|
-
descendants?.forEach(el => kit.removeMatch(el))
|
|
132
|
-
} catch (error) {
|
|
133
|
-
// Selector might be invalid or node might be detached
|
|
134
|
-
console.debug(`[PbKitRegistry] Error removing matches for "${selector}":`, error)
|
|
135
|
-
}
|
|
136
|
-
})
|
|
137
|
-
})
|
|
138
|
-
}
|
|
100
|
+
for (const mutation of mutations) {
|
|
101
|
+
if (mutation.type !== "childList") continue;
|
|
139
102
|
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
try {
|
|
144
|
-
// Check if the added node itself matches
|
|
145
|
-
if (node.matches?.(selector)) {
|
|
146
|
-
kit.addMatch(node)
|
|
147
|
-
}
|
|
148
|
-
// Check descendants
|
|
149
|
-
const descendants = node.querySelectorAll?.(selector)
|
|
150
|
-
descendants?.forEach(el => kit.addMatch(el))
|
|
151
|
-
} catch (error) {
|
|
152
|
-
// Selector might be invalid
|
|
153
|
-
console.debug(`[PbKitRegistry] Error adding matches for "${selector}":`, error)
|
|
103
|
+
mutation.addedNodes.forEach((node) => {
|
|
104
|
+
if (node.nodeType === Node.ELEMENT_NODE) {
|
|
105
|
+
addedRoots.push(node as Element);
|
|
154
106
|
}
|
|
155
|
-
})
|
|
156
|
-
}
|
|
157
|
-
}
|
|
107
|
+
});
|
|
108
|
+
}
|
|
158
109
|
|
|
159
|
-
|
|
160
|
-
if (
|
|
110
|
+
// Enhance anything newly inserted
|
|
111
|
+
if (addedRoots.length) {
|
|
112
|
+
for (const root of addedRoots) {
|
|
113
|
+
this.scan(root);
|
|
114
|
+
}
|
|
115
|
+
}
|
|
161
116
|
|
|
162
|
-
//
|
|
163
|
-
this.
|
|
164
|
-
|
|
117
|
+
// Handle removals cheaply: only look at already-enhanced elements
|
|
118
|
+
this.cleanupDisconnected();
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
// ---- Scanning / enhancing ----
|
|
165
122
|
|
|
166
|
-
|
|
167
|
-
|
|
123
|
+
private scan(root: ParentNode): void {
|
|
124
|
+
// For each selector, query within root once and attach all kits registered to it
|
|
125
|
+
this.kits.forEach((kitsForSelector, selector) => {
|
|
126
|
+
let matches: NodeListOf<Element>;
|
|
168
127
|
try {
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
})
|
|
174
|
-
}
|
|
128
|
+
// querySelectorAll doesn’t include root itself, so we handle that below too
|
|
129
|
+
matches = (root as any).querySelectorAll
|
|
130
|
+
? (root as any).querySelectorAll(selector)
|
|
131
|
+
: document.querySelectorAll(selector);
|
|
175
132
|
} catch (error) {
|
|
176
|
-
console.
|
|
133
|
+
console.debug(`[PbKitRegistry] Invalid selector "${selector}"`, error);
|
|
134
|
+
return;
|
|
177
135
|
}
|
|
178
|
-
})
|
|
179
136
|
|
|
180
|
-
|
|
137
|
+
if (matches && matches.length) {
|
|
138
|
+
matches.forEach((el) => {
|
|
139
|
+
kitsForSelector.forEach((kit) => kit.addMatch(el));
|
|
140
|
+
});
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
// Include root itself if it matches
|
|
144
|
+
if ((root as any).matches?.(selector)) {
|
|
145
|
+
kitsForSelector.forEach((kit) => kit.addMatch(root as any));
|
|
146
|
+
}
|
|
147
|
+
});
|
|
181
148
|
}
|
|
182
149
|
|
|
183
|
-
//
|
|
184
|
-
|
|
185
|
-
|
|
150
|
+
// No selector queries on removals
|
|
151
|
+
// We just remove instances whose elements are no longer in the DOM
|
|
152
|
+
private cleanupDisconnected(): void {
|
|
153
|
+
this.kits.forEach((kitsForSelector) => {
|
|
154
|
+
kitsForSelector.forEach((kit) => {
|
|
155
|
+
if (!kit.elements) return;
|
|
156
|
+
|
|
157
|
+
// Snapshot keys to avoid mutate-while-iterating
|
|
158
|
+
const els = Array.from(kit.elements.keys());
|
|
159
|
+
for (const el of els) {
|
|
160
|
+
if (!el.isConnected) {
|
|
161
|
+
kit.removeMatch(el);
|
|
162
|
+
}
|
|
163
|
+
}
|
|
164
|
+
});
|
|
165
|
+
});
|
|
186
166
|
}
|
|
187
167
|
|
|
188
|
-
//
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
168
|
+
// Debug helpers
|
|
169
|
+
getRegisteredSelectors(): string[] {
|
|
170
|
+
return Array.from(this.kits.keys());
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
// Optional: manually rescan a subtree (useful if some page toggles data-* after insertion)
|
|
174
|
+
rescan(root: ParentNode = document): void {
|
|
175
|
+
if (!this.initialized) return;
|
|
176
|
+
this.scan(root);
|
|
195
177
|
}
|
|
196
178
|
}
|
|
197
179
|
|
|
198
|
-
export default PbKitRegistry.getInstance()
|
|
180
|
+
export default PbKitRegistry.getInstance();
|
|
@@ -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-DmthEI5N.js";import Highcharts from"highcharts";import HighchartsReact from"highcharts-react-official";import{t as typography,c as colors}from"./lib-C9PDFcmX.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};
|