playbook_ui 15.0.0.pre.alpha.removewebpacker10589 → 15.0.0.pre.alpha.renovatenpmtrixvulnerability10692

data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.html.erb

@@ -3,37 +3,30 @@
   show_date: false,
   show_timezone: true,
   timezone: "America/New_York",
-  align: "left"
 }) %>
 
 <br>
 
 <%= pb_rails("timestamp", props: {
   timestamp: DateTime.now,
-  show_date: true,
   show_timezone: true,
   timezone: "America/New_York",
-  align: "left"
 }) %>
 
 <br>
 
 <%= pb_rails("timestamp", props: {
   timestamp: DateTime.now + 4.years,
-  show_date: true,
   show_timezone: true,
   timezone: "America/New_York",
-  align: "left"
 }) %>
 
 <br>
 
 <%= pb_rails("timestamp", props: {
   timestamp: DateTime.now - 1.year,
-  show_date: true,
   show_timezone: true,
   timezone: "America/New_York",
-  align: "left"
 }) %>
 
 <br>
@@ -43,37 +36,30 @@
   show_date: false,
   show_timezone: true,
   timezone: "Asia/Hong_Kong",
-  align: "left"
 }) %>
 
 <br>
 
 <%= pb_rails("timestamp", props: {
   timestamp: DateTime.now,
-  show_date: true,
   show_timezone: true,
   timezone: "Asia/Hong_Kong",
-  align: "left"
 }) %>
 
 <br>
 
 <%= pb_rails("timestamp", props: {
   timestamp: DateTime.now + 4.years,
-  show_date: true,
   show_timezone: true,
   timezone: "Asia/Hong_Kong",
-  align: "left"
 }) %>
 
 <br>
 
 <%= pb_rails("timestamp", props: {
   timestamp: DateTime.now - 1.year,
-  show_date: true,
   show_timezone: true,
   timezone: "Asia/Hong_Kong",
-  align: "left"
 }) %>
 
 <br>

data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.jsx

@@ -15,7 +15,6 @@ const TimestampTimezones = (props) => {
   return (
     <div>
       <Timestamp
-          align="left"
           showDate={false}
           showTimezone
           timestamp={todaysDate}
@@ -26,8 +25,6 @@ const TimestampTimezones = (props) => {
       <br />
 
       <Timestamp
-          align="left"
-          showDate
           showTimezone
           timestamp={todaysDate}
           timezone="America/New_York"
@@ -37,8 +34,6 @@ const TimestampTimezones = (props) => {
       <br />
 
       <Timestamp
-          align="left"
-          showDate
           showTimezone
           timestamp={futureDate}
           timezone="America/New_York"
@@ -48,8 +43,6 @@ const TimestampTimezones = (props) => {
       <br />
 
       <Timestamp
-          align="left"
-          showDate
           showTimezone
           timestamp={pastDate}
           timezone="America/New_York"
@@ -59,7 +52,6 @@ const TimestampTimezones = (props) => {
       <br />
 
       <Timestamp
-          align="left"
           showDate={false}
           showTimezone
           timestamp={todaysDate}
@@ -70,8 +62,6 @@ const TimestampTimezones = (props) => {
       <br />
 
       <Timestamp
-          align="left"
-          showDate
           showTimezone
           timestamp={todaysDate}
           timezone="Asia/Hong_Kong"
@@ -81,8 +71,6 @@ const TimestampTimezones = (props) => {
       <br />
 
       <Timestamp
-          align="left"
-          showDate
           showTimezone
           timestamp={futureDate}
           timezone="Asia/Hong_Kong"
@@ -92,8 +80,6 @@ const TimestampTimezones = (props) => {
       <br />
 
       <Timestamp
-          align="left"
-          showDate
           showTimezone
           timestamp={pastDate}
           timezone="Asia/Hong_Kong"

data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.md

@@ -0,0 +1 @@
+The `showTimezone`/`show_timezone` prop can be used to show the timezone as well. This is set to false by default. **NOTE**: This prop must be used in conjunction with the `timezone` prop to specify which timezone to display. 

data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_unstyled.html.erb

@@ -2,8 +2,6 @@
 
 <%= pb_rails("timestamp", props: {
   timestamp: DateTime.now,
-  show_date: true,
-  align: "left",
   unstyled: true,
 }) %>
 
@@ -14,8 +12,6 @@
 <%= pb_rails("title", props: { size: 1 }) do %>
   <%= pb_rails("timestamp", props: {
     timestamp: DateTime.now,
-    show_date: true,
-    align: "left",
     unstyled: true,
   }) %>
 <% end %>

data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_unstyled.jsx

@@ -10,8 +10,6 @@ const TimestampUnstyled = (props) => {
           text="Basic unstyled example"
       />
       <Timestamp
-          align="left"
-          showDate
           timestamp={new Date()}
           unstyled
           {...props}
@@ -24,8 +22,6 @@ const TimestampUnstyled = (props) => {
       />
       <Title size={1}>
         <Timestamp
-            align="left"
-            showDate
             timestamp={new Date()}
             unstyled
             {...props}

data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated.jsx

@@ -17,7 +17,6 @@ const TimestampUpdated = (props) => {
       <br />
 
       <Timestamp
-          showUser={false}
           timestamp={todaysDate}
           variant="updated"
           {...props}

data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated.md

@@ -0,0 +1,5 @@
+Use variant `updated` to show last updated at timestamp. 
+
+This variant can be customized using the optional `showUser`/`show_user` prop to show user as part of the text. When showing the user, pass in the user name using the `text` prop as shown. 
+
+`showUser`/`show_user` is set to false by default. 

data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_current_year.html.erb

@@ -0,0 +1,16 @@
+<%= pb_rails("timestamp", props: {
+  timestamp: DateTime.now,
+  variant: "updated",
+  show_user: true,
+  show_current_year: true,
+  text: "Maricris Nonato"
+}) %>
+
+<br>
+
+<%= pb_rails("timestamp", props: {
+  timestamp: DateTime.now,
+  variant: "updated",
+  show_user: false,
+  show_current_year: true
+}) %>

data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_current_year.jsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import Timestamp from '../_timestamp'
+
+const todaysDate = new Date()
+
+const TimestampUpdatedShowCurrentYear = (props) => {
+  return (
+    <div>
+      <Timestamp
+          showCurrentYear
+          showUser
+          text="Maricris Nonato"
+          timestamp={todaysDate}
+          variant="updated"
+          {...props}
+      />
+
+      <br />
+
+      <Timestamp
+          showCurrentYear
+          timestamp={todaysDate}
+          variant="updated"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default TimestampUpdatedShowCurrentYear

data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_current_year.md

@@ -0,0 +1 @@
+The `updated` variant can also be used in conjunction with the `showCurrentYear`/`show_current_year` prop to show the year even if it is the current year. 

data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_date.html.erb

@@ -0,0 +1,16 @@
+<%= pb_rails("timestamp", props: {
+  timestamp: DateTime.now,
+  variant: "updated",
+  show_user: true,
+  show_date: false,
+  text: "Maricris Nonato"
+}) %>
+
+<br>
+
+<%= pb_rails("timestamp", props: {
+  timestamp: DateTime.now,
+  variant: "updated",
+  show_user: false,
+  show_date: false
+}) %>

data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_date.jsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import Timestamp from '../_timestamp'
+
+const todaysDate = new Date()
+
+const TimestampUpdatedShowDate = (props) => {
+  return (
+    <div>
+      <Timestamp
+          showDate={false}
+          showUser
+          text="Maricris Nonato"
+          timestamp={todaysDate}
+          variant="updated"
+          {...props}
+      />
+
+      <br />
+
+      <Timestamp
+          showDate={false}
+          timestamp={todaysDate}
+          variant="updated"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default TimestampUpdatedShowDate

data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_date.md

@@ -0,0 +1 @@
+The `updated` variant can also be used in conjunction with the `showDate`/`show_date` prop. This prop is set to true by default but can be set to false to hide the date.

data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_time.html.erb

@@ -0,0 +1,26 @@
+<%= pb_rails("timestamp", props: {
+  timestamp: DateTime.now,
+  variant: "updated",
+  show_user: true,
+  show_time: false,
+  text: "Maricris Nonato"
+}) %>
+
+<br>
+
+<%= pb_rails("timestamp", props: {
+  timestamp: DateTime.now,
+  variant: "updated",
+  show_user: false,
+  show_time: false
+}) %>
+
+<br>
+
+<%= pb_rails("timestamp", props: {
+  timestamp: DateTime.now,
+  variant: "updated",
+  show_current_year: true,
+  show_user: false,
+  show_time: false
+}) %>

data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_time.jsx

@@ -0,0 +1,41 @@
+import React from 'react'
+import Timestamp from '../_timestamp'
+
+const todaysDate = new Date()
+
+const TimestampUpdatedShowTime = (props) => {
+  return (
+    <div>
+      <Timestamp
+          showTime={false}
+          showUser
+          text="Maricris Nonato"
+          timestamp={todaysDate}
+          variant="updated"
+          {...props}
+      />
+
+      <br />
+
+      <Timestamp
+          showTime={false}
+          timestamp={todaysDate}
+          variant="updated"
+          {...props}
+      />
+
+       <br />
+
+      <Timestamp
+          showCurrentYear
+          showTime={false}
+          timestamp={todaysDate}
+          variant="updated"
+          {...props}
+      />
+
+    </div>
+  )
+}
+
+export default TimestampUpdatedShowTime

data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_time.md

@@ -0,0 +1 @@
+The `updated` variant can also be used in conjunction with the `showTime`/`show_time` prop. This prop is set to true by default but can be set to false to hide the time. This can also be used in conjunction with `showCurrentYear`/`show_current_year` to show the year even if it is the current year.

data/app/pb_kits/playbook/pb_timestamp/docs/example.yml

@@ -2,18 +2,30 @@ examples:
 
   rails:
   - timestamp_default: Default
+  - timestamp_show_date: Hide Date
+  - timestamp_show_time: Hide Time
+  - timestamp_show_current_year: Show Current Year
+  - timestamp_timezones: Show Timezones
   - timestamp_align: Alignments
-  - timestamp_timezones: Timezones
-  - timestamp_updated: Last Updated by
-  - timestamp_elapsed: Time Ago
+  - timestamp_elapsed: Time Ago (Elapsed Variant)
+  - timestamp_updated: Last Updated by (Updated Variant)
+  - timestamp_updated_show_current_year: Last Updated by (Updated Variant) - Show Current Year
+  - timestamp_updated_show_date: Last Updated by (Updated Variant) - Hide Date
+  - timestamp_updated_show_time: Last Updated by (Updated Variant) - Hide Time
   - timestamp_unstyled: Unstyled
 
   react:
   - timestamp_default: Default
+  - timestamp_show_date: Hide Date
+  - timestamp_show_time: Hide Time
+  - timestamp_show_current_year: Show Current Year
+  - timestamp_timezones: Show Timezones
   - timestamp_align: Alignments
-  - timestamp_timezones: Timezones
-  - timestamp_updated: Last Updated by
-  - timestamp_elapsed: Time Ago
+  - timestamp_elapsed: Time Ago (Elapsed Variant)
+  - timestamp_updated: Last Updated by (Updated Variant)
+  - timestamp_updated_show_current_year: Last Updated by (Updated Variant) - Show Current Year
+  - timestamp_updated_show_date: Last Updated by (Updated Variant) - Hide Date
+  - timestamp_updated_show_time: Last Updated by (Updated Variant) - Hide Time
   - timestamp_unstyled: Unstyled
 
   swift:

data/app/pb_kits/playbook/pb_timestamp/docs/index.js

@@ -4,3 +4,9 @@ export { default as TimestampTimezones } from './_timestamp_timezones.jsx'
 export { default as TimestampUpdated } from './_timestamp_updated.jsx'
 export { default as TimestampElapsed } from './_timestamp_elapsed.jsx'
 export { default as TimestampUnstyled } from './_timestamp_unstyled.jsx'
+export { default as TimestampShowDate } from './_timestamp_show_date.jsx'
+export { default as TimestampShowTime } from './_timestamp_show_time.jsx'
+export { default as TimestampShowCurrentYear } from './_timestamp_show_current_year.jsx'
+export { default as TimestampUpdatedShowCurrentYear } from './_timestamp_updated_show_current_year.jsx'
+export { default as TimestampUpdatedShowDate } from './_timestamp_updated_show_date.jsx'
+export { default as TimestampUpdatedShowTime } from './_timestamp_updated_show_time.jsx'

data/app/pb_kits/playbook/pb_timestamp/timestamp.rb

@@ -14,8 +14,12 @@ module Playbook
                     default: "left"
       prop :hide_updated, type: Playbook::Props::Boolean,
                           default: false
+      prop :show_current_year, type: Playbook::Props::Boolean,
+                               default: false
       prop :show_date, type: Playbook::Props::Boolean,
                        default: true
+      prop :show_time, type: Playbook::Props::Boolean,
+                       default: true
       prop :show_timezone, type: Playbook::Props::Boolean,
                            default: false
       prop :show_user, type: Playbook::Props::Boolean,
@@ -50,14 +54,22 @@ module Playbook
         when "elapsed"
           format_elapsed_string
         else
-          show_date ? datetime_or_text : format_time_string
+          if show_date && show_time
+            datetime_or_text
+          elsif show_date && !show_time
+            timestamp ? format_date_string : text
+          elsif !show_date && show_time
+            format_time_string
+          else
+            text
+          end
         end
       end
 
     private
 
       def format_year_string
-        pb_date_time.to_year != DateTime.now.year.to_s ? ", #{pb_date_time.to_year}" : ""
+        pb_date_time.to_year != DateTime.now.year.to_s || show_current_year ? ", #{pb_date_time.to_year}" : ""
       end
 
       def format_time_string
@@ -73,14 +85,24 @@ module Playbook
       end
 
       def format_datetime_string
-        "#{format_date_string} · #{format_time_string}".html_safe
+        if show_time
+          "#{format_date_string} · #{format_time_string}".html_safe
+        else
+          format_date_string
+        end
       end
 
       def format_updated_string
-        user_string = show_user ? " by #{text}" : ""
-        datetime_string = " on #{format_date_string} at #{format_time_string}"
-
-        "Last updated#{user_string}#{datetime_string}"
+        final_updated_string = []
+        final_updated_string << "by #{text}" if show_user && text.present?
+        if show_date && !show_time
+          final_updated_string << "on #{format_date_string}"
+        elsif show_date && show_time
+          final_updated_string << "on #{format_date_string} at #{format_time_string}"
+        elsif show_time && !show_date
+          final_updated_string << "at #{format_time_string}"
+        end
+        "Last updated #{final_updated_string.join(' ')}"
       end
 
       def format_elapsed_string

data/app/pb_kits/playbook/pb_timestamp/timestamp.test.js

@@ -102,7 +102,6 @@ describe("Timestamp Kit", () => {
     render(
       <Timestamp
           data={{ testid: testId }}
-          showDate={false}
           showUser
           text="Maricris Nonato"
           timestamp={new Date()}
@@ -112,7 +111,7 @@ describe("Timestamp Kit", () => {
     const kit = screen.getByTestId(testId);
     const text = kit.querySelector(".pb_caption_kit_xs");
     expect(text.textContent).toEqual(
-      "Last updated  by Maricris Nonato on Jan 1 at 12:00a"
+      "Last updated by Maricris Nonato on Jan 1 at 12:00a"
     );
   });
 
@@ -120,14 +119,13 @@ describe("Timestamp Kit", () => {
     render(
       <Timestamp
           data={{ testid: testId }}
-          showDate={false}
           timestamp={new Date()}
           variant="updated"
       />
     );
     const kit = screen.getByTestId(testId);
     const text = kit.querySelector(".pb_caption_kit_xs");
-    expect(text.textContent).toEqual("Last updated  on Jan 1 at 12:00a");
+    expect(text.textContent).toEqual("Last updated on Jan 1 at 12:00a");
   });
 
   test("renders Timestamp elapsed variant with user", () => {
@@ -162,3 +160,70 @@ describe("Timestamp Kit", () => {
     expect(text.textContent).toEqual("  a few seconds ago");
   });
 });
+
+  test("default variant: time only when showDate=false", () => {
+    render(
+      <Timestamp
+          data={{ testid: testId }}
+          showDate={false}
+          showTime
+          timestamp={new Date()}
+      />
+    )
+    const text = screen.getByTestId(testId).querySelector(".pb_caption_kit_xs")
+    expect(text?.textContent).toEqual("12:00a")
+  })
+
+  test("default variant: date only when showTime=false (no year for current year)", () => {
+    render(
+      <Timestamp
+          data={{ testid: testId }}
+          showTime={false}
+          timestamp={new Date()}
+      />
+    )
+    const text = screen.getByTestId(testId).querySelector(".pb_caption_kit_xs")
+    expect(text?.textContent).toEqual("Jan 1")
+  })
+
+  test("default variant: date only with showCurrentYear=true forces year", () => {
+    render(
+      <Timestamp
+          data={{ testid: testId }}
+          showCurrentYear
+          showTime={false}
+          timestamp={new Date()}
+      />
+    )
+    const text = screen.getByTestId(testId).querySelector(".pb_caption_kit_xs")
+    expect(text?.textContent).toEqual("Jan 1, 2020")
+  })
+
+  test('updated variant: "by user" + date only when showDate=true and showTime=false', () => {
+    render(
+      <Timestamp
+          data={{ testid: testId }}
+          showTime={false}
+          showUser
+          text="Maricris Nonato"
+          timestamp={new Date()}
+          variant="updated"
+      />
+    )
+    const text = screen.getByTestId(testId).querySelector(".pb_caption_kit_xs")
+    expect(text?.textContent).toEqual("Last updated by Maricris Nonato on Jan 1")
+  })
+
+  test('updated variant: "at time" only when showDate=false and showTime=true', () => {
+    render(
+      <Timestamp
+          data={{ testid: testId }}
+          showDate={false}
+          timestamp={new Date()}
+          variant="updated"
+      />
+    )
+    const text = screen.getByTestId(testId).querySelector(".pb_caption_kit_xs")
+    expect(text?.textContent).toEqual("Last updated at 12:00a")
+  })
+

data/dist/chunks/{_line_graph-DeH7NK-i.js → _line_graph-CUfJ7E4h.js}

@@ -1 +1 @@
-import{jsx,Fragment,jsxs}from"react/jsx-runtime";import{useState,useEffect}from"react";import{d as buildAriaProps,e as buildDataProps,f as buildHtmlProps,H as HighchartsReact,g as Highcharts,h as classnames,i as globalProps,j as HighchartsMore,S as SolidGauge,k as buildCss}from"./_typeahead-CCGp0OQe.js";import{c as colors,h as highchartsTheme,m as merge,a as highchartsDarkTheme,t as typography}from"./lib-QZuu1ltS.js";const mapColors=array=>{const regex=/(data)\-[1-8]/;const newArray=array.map((item=>regex.test(item)?`${colors[`data_${item[item.length-1]}`]}`:item));return newArray};const BarGraph=({aria:aria={},data:data={},align:align="center",axisTitle:axisTitle,dark:dark=false,chartData:chartData,className:className="pb_bar_graph",colors:colors2,htmlOptions:htmlOptions={},customOptions:customOptions={},axisFormat:axisFormat,id:id,pointStart:pointStart,stacking:stacking,subTitle:subTitle,type:type="column",title:title="Title",xAxisCategories:xAxisCategories,yAxisMin:yAxisMin,yAxisMax:yAxisMax,legend:legend=false,toggleLegendClick:toggleLegendClick=true,height:height,layout:layout="horizontal",verticalAlign:verticalAlign="bottom",x:x=0,y:y=0,...props})=>{const ariaProps=buildAriaProps(aria);const dataProps=buildDataProps(data);const htmlProps=buildHtmlProps(htmlOptions);const setupTheme=()=>{dark?Highcharts.setOptions(highchartsDarkTheme):Highcharts.setOptions(highchartsTheme)};setupTheme();const staticOptions={title:{text:title},chart:{height:height,type:type},subtitle:{text:subTitle},yAxis:[{labels:{format:typeof axisFormat==="string"?axisFormat:axisFormat&&axisFormat[0]?axisFormat[0].format:""},min:yAxisMin,max:yAxisMax,opposite:false,title:{text:Array.isArray(axisTitle)?axisTitle.length>0?axisTitle[0].name:null:axisTitle},plotLines:typeof yAxisMin!=="undefined"&&yAxisMin!==null?[]:[{value:0,zIndex:10,color:"#E4E8F0"}]}],xAxis:{categories:xAxisCategories},legend:{enabled:legend,align:align,verticalAlign:verticalAlign,layout:layout,x:x,y:y},colors:colors2!==void 0&&colors2.length>0?mapColors(colors2):highchartsTheme.colors,plotOptions:{series:{stacking:stacking,pointStart:pointStart,borderWidth:stacking?0:"",events:{},dataLabels:{enabled:false}}},series:chartData,credits:false};if(Array.isArray(axisTitle)&&axisTitle.length>1&&axisTitle[1].name){staticOptions.yAxis.push({labels:{format:typeof axisFormat==="string"?axisFormat:axisFormat[1].format},min:yAxisMin,max:yAxisMax,opposite:true,title:{text:axisTitle[1].name},plotLines:typeof yAxisMin!=="undefined"&&yAxisMin!==null?[]:[{value:0,zIndex:10,color:"#E4E8F0"}]})}if(!toggleLegendClick){staticOptions.plotOptions.series.events={legendItemClick:()=>false}}const filteredProps={...props};delete filteredProps.verticalAlign;const[options,setOptions]=useState({});useEffect((()=>{setOptions(merge(staticOptions,customOptions))}),[chartData]);return jsx(HighchartsReact,{containerProps:{className:classnames(globalProps(filteredProps),className),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:options})};const alignBlockElement=event=>{const itemToMove=document.querySelector(`#wrapper-circle-chart-${event.target.renderTo.id} .pb-circle-chart-block`);const chartContainer=document.querySelector(`#${event.target.renderTo.id}`);if(itemToMove!==null&&chartContainer!==null){itemToMove.style.height=`${event.target.chartHeight}px`;itemToMove.style.width=`${event.target.chartWidth}px`;if(chartContainer.firstChild!==null){chartContainer.firstChild.before(itemToMove)}}};const CircleChart=({align:align="center",aria:aria={},rounded:rounded=false,borderColor:borderColor=(rounded?null:""),borderWidth:borderWidth=(rounded?20:null),chartData:chartData,children:children,className:className,colors:colors2=[],customOptions:customOptions={},dark:dark=false,data:data={},dataLabelHtml:dataLabelHtml="<div>{point.name}</div>",dataLabels:dataLabels=false,height:height,htmlOptions:htmlOptions={},id:id,innerSize:innerSize="md",legend:legend=false,maxPointSize:maxPointSize=null,minPointSize:minPointSize=null,startAngle:startAngle=null,style:style="pie",title:title,tooltipHtml:tooltipHtml,useHtml:useHtml=false,zMin:zMin=null,layout:layout="horizontal",verticalAlign:verticalAlign="bottom",x:x=0,y:y=0,...props})=>{const ariaProps=buildAriaProps(aria);const dataProps=buildDataProps(data);const htmlProps=buildHtmlProps(htmlOptions);HighchartsMore(Highcharts);const setupTheme=()=>{dark?Highcharts.setOptions(highchartsDarkTheme):Highcharts.setOptions(highchartsTheme)};setupTheme();Highcharts.setOptions({tooltip:{headerFormat:null,pointFormat:tooltipHtml?tooltipHtml:'<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: <b>{point.y}</b>',useHTML:useHtml}});const innerSizes={sm:"35%",md:"50%",lg:"85%",none:"0%"};const innerSizeFormat=size=>innerSizes[size];const filteredProps={...props};delete filteredProps.verticalAlign;const[options,setOptions]=useState({});useEffect((()=>{const formattedChartData=chartData.map((obj=>{obj.y=obj.value;delete obj.value;return obj}));const staticOptions={title:{text:title},chart:{height:height,type:style,events:{render:event=>alignBlockElement(event),redraw:event=>alignBlockElement(event)}},legend:{align:align,verticalAlign:verticalAlign,layout:layout,x:x,y:y},plotOptions:{pie:{colors:colors2.length>0?mapColors(colors2):highchartsTheme.colors,dataLabels:{enabled:dataLabels,connectorShape:"straight",connectorWidth:3,format:dataLabelHtml},showInLegend:legend}},series:[{minPointSize:minPointSize,maxPointSize:maxPointSize,innerSize:borderWidth==20?"100%":innerSizeFormat(innerSize),data:formattedChartData,zMin:zMin,startAngle:startAngle,borderWidth:borderWidth,borderColor:borderColor}],credits:false};setOptions(merge(staticOptions,customOptions))}),[chartData]);return jsx(Fragment,{children:children?jsxs("div",{id:`wrapper-circle-chart-${id}`,children:[jsx(HighchartsReact,{containerProps:{className:classnames("pb_circle_chart",globalProps(filteredProps)),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:options}),jsx("div",{className:"pb-circle-chart-block",children:children})]}):jsx(HighchartsReact,{containerProps:{className:classnames("pb_circle_chart",globalProps(filteredProps)),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:options})})};const Gauge=({aria:aria={},chartData:chartData,customOptions:customOptions={},dark:dark=false,data:data={},disableAnimation:disableAnimation=false,fullCircle:fullCircle=false,height:height=null,htmlOptions:htmlOptions={},id:id,max:max=100,min:min=0,prefix:prefix="",showLabels:showLabels=false,style:style="solidgauge",suffix:suffix="",title:title="",tooltipHtml:tooltipHtml='<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: <b>{point.y}</b>',colors:colors$1=[],minorTickInterval:minorTickInterval=null,circumference:circumference=(fullCircle?[0,360]:[-100,100]),...props})=>{const ariaProps=buildAriaProps(aria);const dataProps=buildDataProps(data);const htmlProps=buildHtmlProps(htmlOptions);HighchartsMore(Highcharts);SolidGauge(Highcharts);const setupTheme=()=>{dark?Highcharts.setOptions(highchartsDarkTheme):Highcharts.setOptions(highchartsTheme)};setupTheme();Highcharts.setOptions({tooltip:{pointFormat:tooltipHtml,followPointer:true}});const css=buildCss({pb_gauge_kit:true});const[options,setOptions]=useState({});useEffect((()=>{const formattedChartData=chartData.map((obj=>{obj.y=obj.value;delete obj.value;return obj}));const staticOptions={chart:{events:{load(){setTimeout(this.reflow.bind(this),0)}},type:style,height:height},title:{text:title},yAxis:{min:min,max:max,lineWidth:0,tickWidth:0,minorTickInterval:minorTickInterval,tickAmount:2,tickPositions:[min,max],labels:{y:26,enabled:showLabels}},credits:false,series:[{data:formattedChartData}],pane:{center:["50%","50%"],size:"90%",startAngle:circumference[0],endAngle:circumference[1],background:{borderWidth:20,innerRadius:"90%",outerRadius:"90%",shape:"arc",className:"gauge-pane"}},colors:colors$1!==void 0&&colors$1.length>0?mapColors(colors$1):highchartsTheme.colors,plotOptions:{series:{animation:!disableAnimation},solidgauge:{borderColor:colors$1!==void 0&&colors$1.length===1?mapColors(colors$1).join():highchartsTheme.colors[0],borderWidth:20,radius:90,innerRadius:"90%",dataLabels:{borderWidth:0,color:colors.text_lt_default,enabled:true,format:`<span class="prefix${dark?" dark":""}">${prefix}</span><span class="fix${dark?" dark":""}">{y:,f}</span><span class="suffix${dark?" dark":""}">${suffix}</span>`,style:{fontFamily:typography.font_family_base,fontWeight:typography.regular,fontSize:typography.heading_2},y:-26}}}};setOptions(merge(staticOptions,customOptions));if(document.querySelector(".prefix")){document.querySelectorAll(".prefix").forEach((prefix2=>{prefix2.setAttribute("y","28")}));document.querySelectorAll(".fix").forEach((fix=>fix.setAttribute("y","38")))}}),[chartData]);return jsx(HighchartsReact,{containerProps:{className:classnames(css,globalProps(props)),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:options})};const LineGraph=({aria:aria={},data:data={},align:align="center",className:className="pb_bar_graph",customOptions:customOptions={},dark:dark=false,gradient:gradient=false,type:type="line",htmlOptions:htmlOptions={},id:id,legend:legend=false,toggleLegendClick:toggleLegendClick=true,layout:layout="horizontal",verticalAlign:verticalAlign="bottom",x:x=0,y:y=0,axisTitle:axisTitle,xAxisCategories:xAxisCategories,yAxisMin:yAxisMin,yAxisMax:yAxisMax,chartData:chartData,pointStart:pointStart,subTitle:subTitle,title:title,height:height,colors:colors2=[],...props})=>{const ariaProps=buildAriaProps(aria);const dataProps=buildDataProps(data);const htmlProps=buildHtmlProps(htmlOptions);const setupTheme=()=>{dark?Highcharts.setOptions(highchartsDarkTheme):Highcharts.setOptions(highchartsTheme)};setupTheme();const staticOptions={title:{text:title},chart:{height:height,type:type},subtitle:{text:subTitle},yAxis:{min:yAxisMin,max:yAxisMax,title:{text:axisTitle}},xAxis:{categories:xAxisCategories},legend:{enabled:legend,align:align,verticalAlign:verticalAlign,layout:layout,x:x,y:y},colors:colors2!==void 0&&colors2.length>0?mapColors(colors2):highchartsTheme.colors,plotOptions:{series:{pointStart:pointStart,events:{},dataLabels:{enabled:false}}},series:chartData,credits:false};if(!toggleLegendClick){staticOptions.plotOptions.series.events={legendItemClick:()=>false}}const filteredProps={...props};delete filteredProps.verticalAlign;const[options,setOptions]=useState({});useEffect((()=>{setOptions(merge(staticOptions,customOptions))}),[chartData]);return jsx(HighchartsReact,{containerProps:{className:classnames(globalProps(filteredProps),className),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:options})};export{BarGraph as B,CircleChart as C,Gauge as G,LineGraph as L};
+import{jsx,Fragment,jsxs}from"react/jsx-runtime";import{useState,useEffect}from"react";import{d as buildAriaProps,e as buildDataProps,f as buildHtmlProps,H as HighchartsReact,g as Highcharts,h as classnames,i as globalProps,j as HighchartsMore,S as SolidGauge,k as buildCss}from"./_typeahead-DCp1lVJx.js";import{c as colors,h as highchartsTheme,m as merge,a as highchartsDarkTheme,t as typography}from"./lib-BTs5acfO.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};