playbook_ui 15.2.0.pre.alpha.PLAY2542formatasyoutypebug11501 → 15.2.0.pre.alpha.PLAY2589advancedtableinlinerowloadingtoggleicon11607

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_units.jsx

@@ -0,0 +1,58 @@
+import React from 'react'
+import PbGaugeChart from '../../pb_pb_gauge_chart/_pb_gauge_chart'
+import { colors, typography } from 'playbook-ui'
+
+
+const data1 = [
+  { name: 'Data Used', y: 32 },
+]
+const data2 = [
+  { name: 'Sales to Date', y: 65 },
+]
+
+const chartOptions1 = {
+  title: {
+    text: "Data Usage",
+  },
+  series: [{ data: data1 }],
+  plotOptions: {
+    solidgauge: {
+      dataLabels: {
+        format:
+          `<span class="fix">{y:,f}</span>` +
+          `<span style="fill: ${colors.text_lt_light}; font-size: ${typography.text_larger};">GB</span>`,
+      },
+    },
+  },
+};
+const chartOptions2 = {
+  title: {
+    text: "Sales Goal",
+  },
+  series: [{ data: data2 }],
+  plotOptions: {
+    solidgauge: {
+      dataLabels: {
+        format:
+          `<span y="28" style="fill: ${colors.text_lt_light}; font-size: ${typography.text_base};">$</span>` +
+          `<span class="fix" y="38">{y:,f}</span>` +
+          `<span style="fill: ${colors.text_lt_light}; font-size: ${typography.text_larger};">k</span>`,
+      },
+    },
+  },
+};
+
+const PbGaugeChartUnits = (props) => (
+  <div>
+    <PbGaugeChart
+        options={chartOptions1}
+        {...props}
+    />
+    <PbGaugeChart
+        options={chartOptions2}
+        {...props}
+    />
+  </div>
+)
+
+export default PbGaugeChartUnits

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_units.md

@@ -0,0 +1 @@
+Use custom CSS with classes or inline styles (as shown in these docs) to customize the appearance of prefix and suffix units.

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

@@ -0,0 +1,29 @@
+examples:
+  
+  rails:
+  - pb_gauge_chart_default: Default
+  - pb_gauge_chart_disable_animation: Disable Animation
+  - pb_gauge_chart_title: With Title
+  - pb_gauge_chart_units: With Units
+  - pb_gauge_chart_full_circle: Full Circle
+  - pb_gauge_chart_min_max: With Min and Max Labels
+  - pb_gauge_chart_sizing: Sizing
+  - pb_gauge_chart_height: Height
+  - pb_gauge_chart_color: Custom Color
+  - pb_gauge_chart_complex: Complex Example
+  
+  
+  react:
+  - pb_gauge_chart_default: Default
+  - pb_gauge_chart_disable_animation: Disable Animation
+  - pb_gauge_chart_title: With Title
+  - pb_gauge_chart_units: With Units
+  - pb_gauge_chart_full_circle: Full Circle
+  - pb_gauge_chart_min_max: With Min and Max Labels
+  - pb_gauge_chart_sizing: Sizing
+  - pb_gauge_chart_height: Height
+  - pb_gauge_chart_live_data: Live Data
+  - pb_gauge_chart_color: Custom Color
+  - pb_gauge_chart_complex: Complex Example
+  
+  

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

@@ -0,0 +1,11 @@
+export { default as PbGaugeChartDefault } from './_pb_gauge_chart_default.jsx'
+export { default as PbGaugeChartDisableAnimation } from './_pb_gauge_chart_disable_animation.jsx'
+export { default as PbGaugeChartTitle } from './_pb_gauge_chart_title.jsx'
+export { default as PbGaugeChartUnits } from './_pb_gauge_chart_units.jsx'
+export { default as PbGaugeChartFullCircle } from './_pb_gauge_chart_full_circle.jsx'
+export { default as PbGaugeChartMinMax } from './_pb_gauge_chart_min_max.jsx'
+export { default as PbGaugeChartSizing } from './_pb_gauge_chart_sizing.jsx'
+export { default as PbGaugeChartHeight } from './_pb_gauge_chart_height.jsx'
+export { default as PbGaugeChartLiveData } from './_pb_gauge_chart_live_data.jsx'
+export { default as PbGaugeChartColor } from './_pb_gauge_chart_color.jsx'
+export { default as PbGaugeChartComplex } from './_pb_gauge_chart_complex.jsx'

data/app/pb_kits/playbook/pb_pb_gauge_chart/pbGaugeGraphTheme.ts

@@ -0,0 +1,91 @@
+import colors from '../tokens/exports/_colors.module.scss'
+import typography from '../tokens/exports/_typography.module.scss'
+
+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: [] as number[],
+  },
+  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 }
+}
+
+export default pbGaugeGraphTheme;

data/app/pb_kits/playbook/pb_pb_gauge_chart/pb_gauge_chart.html.erb

@@ -0,0 +1 @@
+<%= react_component('PbGaugeChart', object.react_props) %>

data/app/pb_kits/playbook/pb_pb_gauge_chart/pb_gauge_chart.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbPbGaugeChart
+    class PbGaugeChart < ::Playbook::KitBase
+      prop :options, default: {}
+
+      def react_props
+        {
+          className: classname,
+          data: data,
+          options: options,
+          id: id,
+        }
+      end
+
+      def classname
+        # Highcharts react needs classname attached to the container div,
+        # we pass an empty string here to avoid conflicts, classname is built in the TSX
+        # We still need generate_classnames to retain ability to pass in custom classnames or global props
+        generate_classname("")
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_pb_gauge_chart/pb_gauge_chart.test.jsx

@@ -0,0 +1,80 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+
+import { PbGaugeChart } from 'playbook-ui'
+
+beforeEach(() => {
+  // Silences error logs within the test suite.
+  jest.spyOn(console, 'error');
+  jest.spyOn(console, 'warn');
+  console.error.mockImplementation(() => {});
+  console.warn.mockImplementation(() => {});
+});
+
+afterEach(() => {
+  console.error.mockRestore();
+  console.warn.mockRestore();
+});
+
+const chartOptions = {
+  series:[{data:[{ name: "Name", y: 45 }]}]
+}
+
+const testId = 'pbgaugechart1'
+
+test('Kit to exist', () => {
+  render(
+  <PbGaugeChart
+      data={{testid: testId}} 
+      options={chartOptions} 
+  />
+)
+  expect(screen.getByTestId(testId)).toBeInTheDocument()
+})
+
+test('Kit to apply base classname', () => {
+  render(
+    <PbGaugeChart
+        data={{testid: testId}} 
+        options={chartOptions} 
+    />
+  )
+
+  expect(screen.getByTestId(testId)).toHaveClass('pb_pb_gauge_chart')
+})
+
+test('Kit to have custom class', () => {
+  render(
+    <PbGaugeChart
+        className='custom-class'
+        data={{testid: testId}} 
+        options={chartOptions} 
+    />
+  )
+
+  expect(screen.getByTestId(testId)).toHaveClass('custom-class')
+})
+
+test('Kit to apply global props', () => {
+  render(
+    <PbGaugeChart
+        data={{testid: testId}} 
+        margin="lg"
+        options={chartOptions} 
+    />
+  )
+
+  expect(screen.getByTestId(testId)).toHaveClass('m_lg')
+})
+
+test('kit to apply id', () => {
+  render(
+    <PbGaugeChart
+        data={{testid: testId}} 
+        id='gauge-chart-id'
+        options={chartOptions} 
+    />
+  )
+
+  expect(screen.getByTestId(testId)).toHaveAttribute('id', 'gauge-chart-id')
+})

data/app/pb_kits/playbook/pb_pb_line_graph/docs/_description.md

@@ -1,3 +1,3 @@
-This kit is a wrapper around the Highcharts library. It applies styling and default settings but does NOT ship Highcharts. In order to use this kit, 'highcharts' and 'highcharts-react-official' must be installed in your repo. Once done, any prop or functionality provided by Highcharts can be used with this kit without requiring specifc props from Playbook. The doc examples below showcase a few common usecases but are not a comprehensive list of all the functionalities possible. 
+This kit is a wrapper around the Highcharts library. It applies styling and default settings but does NOT ship Highcharts. In order to use this kit, 'highcharts' and 'highcharts-react-official' must be installed in your repo. Once done, any prop or functionality provided by Highcharts can be used with this kit without requiring specific props from Playbook. The doc examples below showcase a few common usecases but are not a comprehensive list of all the functionalities possible. 
 
 See the [highcharts API docs](https://api.highcharts.com/highcharts/) for a comprehensive look at what is possible.

data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx

@@ -313,24 +313,20 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
   }
 
   const handleOnChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
-  if (!hasTyped) setHasTyped(true)
-
-  setInputValue(evt.target.value)
-
-  let phoneNumberData
-
-  if (formatAsYouType) {
-    const formattedPhoneNumberData = getCurrentSelectedData(itiRef.current, evt.target.value)
-    phoneNumberData = {...formattedPhoneNumberData, number: unformatNumber(formattedPhoneNumberData.number)}
-  } else {
-    phoneNumberData = getCurrentSelectedData(itiRef.current, evt.target.value)
+    if (!hasTyped) setHasTyped(true)
+    setInputValue(evt.target.value)
+    let phoneNumberData
+    if (formatAsYouType) {
+      const formattedPhoneNumberData = getCurrentSelectedData(itiRef.current, evt.target.value)
+      phoneNumberData = {...formattedPhoneNumberData, number: unformatNumber(formattedPhoneNumberData.number)}
+    } else {
+      phoneNumberData = getCurrentSelectedData(itiRef.current, evt.target.value)
+    }
+    setSelectedData(phoneNumberData)
+    onChange(phoneNumberData)
+    isValid(itiRef.current.isValidNumber())
   }
 
-  setSelectedData(phoneNumberData)
-  onChange(phoneNumberData)
-  isValid(itiRef.current.isValidNumber())
-}
-
   // Separating Concerns as React Docs Recommend
   // This also Fixes things for our react_component rendering on the Rails Side
   useEffect(formatAllCountries, [])
@@ -374,26 +370,11 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
 
       inputRef.current.addEventListener("open:countrydropdown", () => setDropDownIsOpen(true))
       inputRef.current.addEventListener("close:countrydropdown", () => setDropDownIsOpen(false))
-
-      // Handle formatAsYouType with input event
-      if (formatAsYouType) {
-        inputRef.current.addEventListener("input", (evt: Event) => {
-          const target = evt.target as HTMLInputElement
-          const formattedValue = target.value
-
-          // Update internal state
-          setInputValue(formattedValue)
-          setHasTyped(true)
-
-          // Get phone number data with unformatted number
-          const formattedPhoneNumberData = getCurrentSelectedData(telInputInit, formattedValue)
-          const phoneNumberData = {...formattedPhoneNumberData, number: unformatNumber(formattedPhoneNumberData.number)}
-
-          setSelectedData(phoneNumberData)
-          onChange(phoneNumberData)
-          isValid(telInputInit.isValidNumber())
-        })
-      }
+    }
+    if (formatAsYouType) {
+      inputRef.current?.addEventListener("input", (evt) => {
+        handleOnChange(evt as unknown as React.ChangeEvent<HTMLInputElement>);
+      });
     }
   }, [])
 
@@ -408,7 +389,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
     label,
     name,
     onBlur: validateErrors,
-    onChange: formatAsYouType ? undefined : handleOnChange,
+    onChange: handleOnChange,
     value: inputValue
   }
 

data/app/pb_kits/playbook/tokens/_positioning.scss

@@ -22,6 +22,7 @@ $z_7: 700 !default;
 $z_8: 800 !default;
 $z_9: 900 !default;
 $z_10: 1000 !default;
+$z_max: 999999 !default;
 $z_index: (
   zindex_1: $z_1,
   zindex_2: $z_1,

data/app/pb_kits/playbook/utilities/_positioning.scss

@@ -58,6 +58,10 @@
   z-index: $z_10 !important;
 }
 
+.z_index_max {
+  z-index: $z_max !important;
+}
+
 $zIndex_values: (
   1: $z_1,
   2: $z_2,
@@ -68,7 +72,8 @@ $zIndex_values: (
   7: $z_7,
   8: $z_8,
   9: $z_9,
-  10: $z_10
+  10: $z_10,
+  max: $z_max
 );
 
 @each $size, $size_value in $breakpoints_grid {

data/app/pb_kits/playbook/utilities/globalProps.ts

@@ -186,7 +186,7 @@ type VerticalAlign =  {
   verticalAlign?: "baseline" | "super" | "top" | "middle" | "bottom" | "sub" | "text-top" | "text-bottom"
 }
 
-type ZIndexType = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10
+type ZIndexType = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 'max'
 type ZIndexResponsiveType = {[key: string]: ZIndexType}
 type ZIndex = {
   zIndex?: ZIndexType,
@@ -439,6 +439,8 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
           Object.entries(zIndexEntry[1]).forEach((zIndexObj) => {
             css += `z_index_${zIndexObj[0]}_${zIndexObj[1]} `
           })
+        } else if (zIndexEntry[1] === 'max') {
+          css += `z_index_max `
         }
       }
     })

data/dist/chunks/{_line_graph-eXNg1pX_.js → _line_graph-BnVgr42C.js}

@@ -1 +1 @@
-import{jsx,Fragment,jsxs}from"react/jsx-runtime";import{useState,useEffect}from"react";import{e as buildAriaProps,f as buildDataProps,g as buildHtmlProps,H as HighchartsReact,h as Highcharts,i as classnames,j as globalProps,k as HighchartsMore,S as SolidGauge,l as buildCss}from"./_typeahead-B6jpvyrP.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{f as buildAriaProps,g as buildDataProps,h as buildHtmlProps,H as HighchartsReact,i as Highcharts,j as classnames,k as globalProps,l as HighchartsMore,S as SolidGauge,m as buildCss}from"./_typeahead-BH_dkgOy.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};