playbook_ui 16.11.0 → 16.12.0.pre.rc.1
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 +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +5 -0
- data/app/pb_kits/playbook/pb_collapsible/__snapshots__/collapsible.test.js.snap +2 -2
- data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss +1 -1
- data/app/pb_kits/playbook/pb_dropdown/index.js +1 -1
- data/app/pb_kits/playbook/pb_icon/_icon.tsx +1 -3
- data/app/pb_kits/playbook/pb_icon/icon.rb +91 -8
- data/app/pb_kits/playbook/pb_list/item.html.erb +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_table/docs/_playground.json +3 -0
- data/app/pb_kits/playbook/pb_table/docs/_playground.overrides.json +3 -0
- data/dist/chunks/{_pb_line_graph-xWHipZZB.js → _pb_line_graph-Gn_9RYbf.js} +1 -1
- data/dist/chunks/_typeahead-CXg3ungD.js +5 -0
- data/dist/chunks/{globalProps-Bf9KbYid.js → globalProps-CVEUyQe6.js} +1 -1
- data/dist/chunks/{lib-DYWDQgCv.js → lib-CYrXqTdQ.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/dist/playbook.css +1 -1
- data/lib/playbook/changelog_generator.rb +28 -13
- data/lib/playbook/connect_message_generator.rb +2 -1
- data/lib/playbook/version.rb +2 -2
- metadata +6 -6
- data/dist/chunks/_typeahead-CjLwYCaT.js +0 -5
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: b0cbc758e63f9d4d5dbf201736dbd86f6c922ff025a8209c163264ce8a186f54
|
|
4
|
+
data.tar.gz: 87b94773628bf6591d5b7eb136ffa26441a8519b160afca6e4e6ea326a819b4b
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: c91ae82e2bc2c6631192f52806cf76db101b0002a321012201b216ff928df6bf28a34692a85cfeb540191fc4d194807af8a653012e0bab25de93470dbd9e1891
|
|
7
|
+
data.tar.gz: c69a780ec1d5d6f71cfb7b6f1a33199874bb777929b850390040410e911e4c98b99ae50f60bac02488a3ec8e39b4eda25337703a884d0059aedc1f7f8aa518d6
|
|
@@ -32,9 +32,9 @@ exports[`html structure is correct 1`] = `
|
|
|
32
32
|
class="pb_custom_icon svg-inline--fa color_text_lt_lighter svg_lg svg_fw"
|
|
33
33
|
color="currentColor"
|
|
34
34
|
fill="none"
|
|
35
|
-
height="
|
|
35
|
+
height="1.5em"
|
|
36
36
|
viewBox="0 0 30 25"
|
|
37
|
-
width="
|
|
37
|
+
width="1.5em"
|
|
38
38
|
xmlns="http://www.w3.org/2000/svg"
|
|
39
39
|
>
|
|
40
40
|
<path
|
|
@@ -1242,7 +1242,7 @@ export default class PbDropdown extends PbEnhancedElement {
|
|
|
1242
1242
|
closeIcon.className = "pb_form_pill_close";
|
|
1243
1243
|
closeIcon.innerHTML = `<svg class="pb_custom_icon svg-inline--fa svg_${
|
|
1244
1244
|
this.formPillProps.size === "small" ? "xs" : "sm"
|
|
1245
|
-
} svg_fw" xmlns="http://www.w3.org/2000/svg"
|
|
1245
|
+
} svg_fw" xmlns="http://www.w3.org/2000/svg" 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>`;
|
|
1246
1246
|
pill.appendChild(closeIcon);
|
|
1247
1247
|
|
|
1248
1248
|
closeIcon.addEventListener("click", (e) => {
|
|
@@ -31,7 +31,7 @@ type IconOwnProps = {
|
|
|
31
31
|
fixedWidth?: boolean,
|
|
32
32
|
flip?: "horizontal" | "vertical" | "both" | "none",
|
|
33
33
|
icon?: string | ReactSVGElement,
|
|
34
|
-
htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
|
|
34
|
+
htmlOptions?: {[key: string]: string | number | boolean | (() => void)} | any,
|
|
35
35
|
id?: string,
|
|
36
36
|
inverse?: boolean,
|
|
37
37
|
listItem?: boolean,
|
|
@@ -246,8 +246,6 @@ const Icon = (props: IconProps) => {
|
|
|
246
246
|
...htmlProps,
|
|
247
247
|
className: classes,
|
|
248
248
|
id,
|
|
249
|
-
width: 'auto',
|
|
250
|
-
height: 'auto',
|
|
251
249
|
...(props.tabIndex !== undefined && { tabIndex }),
|
|
252
250
|
})
|
|
253
251
|
}
|
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
require "open-uri"
|
|
4
4
|
require "json"
|
|
5
5
|
require "digest"
|
|
6
|
+
require "pathname"
|
|
6
7
|
|
|
7
8
|
module Playbook
|
|
8
9
|
module PbIcon
|
|
@@ -113,20 +114,15 @@ module Playbook
|
|
|
113
114
|
end
|
|
114
115
|
|
|
115
116
|
def render_svg
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
else
|
|
120
|
-
URI.open(source, &:read) # rubocop:disable Security/Open
|
|
121
|
-
end
|
|
117
|
+
content = svg_content
|
|
118
|
+
return "" if content.blank?
|
|
119
|
+
|
|
122
120
|
doc = Nokogiri::XML(content)
|
|
123
121
|
svg = doc.at_css("svg")
|
|
124
122
|
return "" unless svg
|
|
125
123
|
|
|
126
124
|
svg["class"] = %w[pb_custom_icon svg-inline--fa].concat([object.custom_icon_classname]).join(" ")
|
|
127
125
|
svg["id"] = object.id
|
|
128
|
-
svg["height"] = "auto"
|
|
129
|
-
svg["width"] = "auto"
|
|
130
126
|
svg["tabindex"] = object.tabindex
|
|
131
127
|
fill_color = object.color || "currentColor"
|
|
132
128
|
|
|
@@ -296,6 +292,93 @@ module Playbook
|
|
|
296
292
|
|
|
297
293
|
private
|
|
298
294
|
|
|
295
|
+
def svg_content
|
|
296
|
+
return File.read(asset_path) if asset_path.present?
|
|
297
|
+
|
|
298
|
+
read_svg_content(icon || custom_icon)
|
|
299
|
+
end
|
|
300
|
+
|
|
301
|
+
def read_svg_content(source)
|
|
302
|
+
source = source.to_s
|
|
303
|
+
return "" if source.blank?
|
|
304
|
+
|
|
305
|
+
remote = remote_svg_uri(source)
|
|
306
|
+
return read_remote_svg(remote) if remote
|
|
307
|
+
|
|
308
|
+
path = allowed_svg_path(source)
|
|
309
|
+
return "" unless path
|
|
310
|
+
|
|
311
|
+
path.read
|
|
312
|
+
end
|
|
313
|
+
|
|
314
|
+
def remote_svg_uri(source)
|
|
315
|
+
uri = URI.parse(source)
|
|
316
|
+
uri if uri.is_a?(URI::HTTP)
|
|
317
|
+
rescue URI::InvalidURIError
|
|
318
|
+
nil
|
|
319
|
+
end
|
|
320
|
+
|
|
321
|
+
def read_remote_svg(uri)
|
|
322
|
+
uri.open("User-Agent" => "Playbook-Icon-Kit/1.0 (https://github.com/powerhome/playbook)", redirect: false, &:read)
|
|
323
|
+
rescue OpenURI::HTTPError, StandardError
|
|
324
|
+
""
|
|
325
|
+
end
|
|
326
|
+
|
|
327
|
+
def allowed_svg_path(source)
|
|
328
|
+
candidate = Pathname.new(source)
|
|
329
|
+
candidate = Rails.root.join(candidate) unless candidate.absolute?
|
|
330
|
+
resolved = candidate.expand_path
|
|
331
|
+
return nil unless svg_file?(resolved)
|
|
332
|
+
return nil unless path_within_allowed_root?(resolved)
|
|
333
|
+
|
|
334
|
+
resolved
|
|
335
|
+
end
|
|
336
|
+
|
|
337
|
+
# Only ever read real .svg files. This keeps non-svg files that happen to
|
|
338
|
+
# live inside an allowed root (config/master.key, credentials, .env, ...)
|
|
339
|
+
# structurally out of the read path rather than relying on the is_svg?
|
|
340
|
+
# gate to exclude them.
|
|
341
|
+
def svg_file?(path)
|
|
342
|
+
path.file? && path.extname.casecmp(".svg").zero?
|
|
343
|
+
end
|
|
344
|
+
|
|
345
|
+
def path_within_allowed_root?(path)
|
|
346
|
+
real = path.realpath
|
|
347
|
+
allowed_svg_roots.any? do |root|
|
|
348
|
+
real == root || real.to_s.start_with?("#{root}#{File::SEPARATOR}")
|
|
349
|
+
end
|
|
350
|
+
rescue
|
|
351
|
+
false
|
|
352
|
+
end
|
|
353
|
+
|
|
354
|
+
# An SVG may live in the host application or in any mounted engine
|
|
355
|
+
# (Playbook itself, or a host app's component engines), so every loaded
|
|
356
|
+
# engine root is allowed in addition to Rails.root.
|
|
357
|
+
def allowed_svg_roots
|
|
358
|
+
@allowed_svg_roots ||= svg_root_candidates.filter_map { |candidate| real_path(candidate) }.uniq
|
|
359
|
+
end
|
|
360
|
+
|
|
361
|
+
def svg_root_candidates
|
|
362
|
+
Rails::Engine.descendants
|
|
363
|
+
.map { |engine| engine_root(engine) }
|
|
364
|
+
.push(Playbook::Engine.root, Rails.root)
|
|
365
|
+
.compact
|
|
366
|
+
end
|
|
367
|
+
|
|
368
|
+
def engine_root(engine)
|
|
369
|
+
engine.root
|
|
370
|
+
rescue
|
|
371
|
+
nil
|
|
372
|
+
end
|
|
373
|
+
|
|
374
|
+
def real_path(path)
|
|
375
|
+
return nil unless path
|
|
376
|
+
|
|
377
|
+
Pathname.new(path).realpath
|
|
378
|
+
rescue
|
|
379
|
+
nil
|
|
380
|
+
end
|
|
381
|
+
|
|
299
382
|
def resolve_alias(icon)
|
|
300
383
|
return icon unless icon_alias_map
|
|
301
384
|
return icon if icon.nil?
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
<% if object.drag_handle %>
|
|
12
12
|
<span class="pb_draggable_handle" style="vertical-align: middle;">
|
|
13
13
|
<%= pb_rails("body") do %>
|
|
14
|
-
<svg
|
|
14
|
+
<svg 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>
|
|
15
15
|
<% end %>
|
|
16
16
|
</span>
|
|
17
17
|
<% end %>
|
|
@@ -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"
|
|
31
|
+
arrowDiv.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" 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"
|
|
33
|
+
arrowDiv.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" 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
|
|
10
|
+
<svg 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 +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-CVEUyQe6.js";import Highcharts from"highcharts";import HighchartsReact from"highcharts-react-official";import{t as typography,c as colors}from"./lib-CYrXqTdQ.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};
|