playbook_ui 14.24.0.pre.alpha.play23479502 → 14.24.0.pre.alpha.play23649503

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f4ccc02520ca6f12c398e5c4417dcfeb08b24b1b68bed3ca430137584fd25bf8
-  data.tar.gz: d916bb54b939ce9cbec50449fe9bf90791ae6ac0e330337f54c8fc8f5375c5cb
+  metadata.gz: 7b6125bc029c939ad15a726d63897d11251203a4b3529c1e5909cf5a017938a1
+  data.tar.gz: 03153bcee4384a533f7e1b9c91447ee748077b8f52b097e3cee2134f3a14afa6
 SHA512:
-  metadata.gz: d3c9a37eb5044d3a60ac5d4843fec307a2c183ac800d9fdb940a93503a00cd1dd21f5c28df556096909eae5e7f6369df0f78ea108a0ca37761a595390ead7c0e
-  data.tar.gz: '0845b9c473a82d7322b6ee1d1d9a17e1a4221453ef23a105d66b01d6de4682fdfd6abe77ba38877ae66cdfa3dae70a2b4bfa9602d1808ba11df4aece44607714'
+  metadata.gz: c635cb4af1e58eaddb56b5ba82f10e440e70201aa6eab3a1d469b4b568335ef1099cfd5986ac53dd841fb1b0cb2f4f796d33eb1155f5b5bde188f664f64e5b38
+  data.tar.gz: 76080ead057d43b8d5b794bdd4eadca9abe86495b1d1281edb677d58dfc1fe53dabf98269326b5623974543188da4e83191b01c28d74206512c9bc3b70cab646

data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx

@@ -1,190 +1,41 @@
-import React, { useState, useEffect } from "react";
-import { globalProps } from "../utilities/globalProps";
+import React, { useMemo } from "react"
 import { buildAriaProps, buildDataProps, buildHtmlProps } from "../utilities/props";
+import Highcharts from "highcharts"
+import HighchartsReact from "highcharts-react-official"
 
-import HighchartsReact from "highcharts-react-official";
-import Highcharts from "highcharts";
-import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
-import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
-import mapColors from "../pb_dashboard/pbChartsColorsHelper";
-import { merge } from '../utilities/object'
-
-import classnames from "classnames";
+import barGraphTheme from "./barGraphTheme"
 
 type BarGraphProps = {
-  align?: "left" | "right" | "center";
-  axisTitle: { name: string; }[] | string;
-  dark?: boolean;
-  xAxisCategories: [];
-  yAxisMin: number;
-  yAxisMax: number;
-  chartData: { name: string; data: number[], yAxis: number }[];
-  className?: string;
-  customOptions?: Partial<Highcharts.Options>;
-  id: string;
-  pointStart: number;
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
-  subTitle?: string;
-  title: string;
-  type?: string;
-  legend?: boolean;
-  toggleLegendClick?: boolean;
-  height?: string;
-  colors: string[];
-  layout?: "horizontal" | "vertical" | "proximate";
-  verticalAlign?: "top" | "middle" | "bottom";
-  x?: number;
-  y?: number;
-  aria?: { [key: string]: string };
-  data?: { [key: string]: string };
-  stacking?: "normal" | "percent" 
-  axisFormat?: { format: string; }[] | string;
-};
-
-
-const BarGraph = ({
-  aria = {},
-  data = {},
-  align = "center",
-  axisTitle,
-  dark = false,
-  chartData,
-  className = "pb_bar_graph",
-  colors,
-  htmlOptions = {},
-  customOptions = {},
-  axisFormat,
-  id,
-  pointStart,
-  stacking,
-  subTitle,
-  type = "column",
-  title = "Title",
-  xAxisCategories,
-  yAxisMin,
-  yAxisMax,
-  legend = false,
-  toggleLegendClick = true,
-  height,
-  layout = "horizontal",
-  verticalAlign = "bottom",
-  x = 0,
-  y = 0,
-  ...props
-}: BarGraphProps): React.ReactElement => { 
-  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:
-      colors !== undefined && colors.length > 0
-        ? mapColors(colors)
-        : 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"
-  }],
-  });
+  options: Record<string, unknown>
+  containerProps?: React.HTMLProps<HTMLDivElement>
+  data?: Record<string, unknown>
 }
 
-  if (!toggleLegendClick) {
-    staticOptions.plotOptions.series.events = { legendItemClick: () => false };
-  }
+const BarGraph = ({
+  options,
+  containerProps = {},
+  data = {}
+}: BarGraphProps): React.ReactElement => {
 
-  const filteredProps: any = {...props};
-  delete filteredProps.verticalAlign;
+  const dataProps = buildDataProps(data)
 
-  const [options, setOptions] = useState({});
+  const mergedOptions = useMemo(() => {
+    if (!options || typeof options !== "object") {
+      // eslint-disable-next-line no-console
+      console.error("❌ Invalid options passed to <BarGraph />", options)
+      return {}
+    }
 
-  useEffect(() => {
-    setOptions(merge(staticOptions, customOptions));
-  }, [chartData]);
+    return Highcharts.merge({}, barGraphTheme, options)
+  }, [options])
 
   return (
     <HighchartsReact
-        containerProps={{
-          className: classnames(globalProps(filteredProps), className),
-          id: id,
-          ...ariaProps,
-          ...dataProps,
-          ...htmlProps
-        }}
+        containerProps={{ ...containerProps, ...dataProps }}
         highcharts={Highcharts}
-        options={options}
+        options={mergedOptions}
     />
-  );
-};
+  )
+}
 
-export default BarGraph;
+export default BarGraph

data/app/pb_kits/playbook/pb_bar_graph/barGraph.test.js

@@ -20,9 +20,8 @@ const testId = 'bargraph1';
 test('bargraph uses exact classname', () => {
   render(
     <BarGraph
-        className='super_important_class'
+        containerProps={{ className: 'super_important_class' }}
         data={{ testid: testId }}
-        id='bar-default'
     />
   );
  

data/app/pb_kits/playbook/pb_bar_graph/bar_graph.html.erb

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

data/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb

@@ -3,91 +3,25 @@
 module Playbook
   module PbBarGraph
     class BarGraph < Playbook::KitBase
-      prop :align, type: Playbook::Props::Enum,
-                   values: %w[left right center],
-                   default: "center"
-      prop :axis_title
-      prop :axis_format
-      prop :chart_data, type: Playbook::Props::Array,
-                        default: []
-      prop :custom_options, default: {}
-      prop :orientation, type: Playbook::Props::Enum,
-                         values: %w[vertical horizontal],
-                         default: "vertical"
-      prop :point_start, type: Playbook::Props::Numeric
-      prop :stacking
-      prop :subtitle
-      prop :title
-      prop :x_axis_categories, type: Playbook::Props::Array,
-                               default: []
-      prop :y_axis_min, type: Playbook::Props::Numeric
-      prop :y_axis_max, type: Playbook::Props::Numeric
-      prop :legend, type: Playbook::Props::Boolean,
-                    default: false
-      prop :toggle_legend_click, type: Playbook::Props::Boolean,
-                                 default: true
-      prop :height
-      prop :colors, type: Playbook::Props::Array,
-                    default: []
-      prop :layout, type: Playbook::Props::Enum,
-                    values: %w[horizontal vertical proximate],
-                    default: "horizontal"
-      prop :vertical_align, type: Playbook::Props::Enum,
-                            values: %w[top middle bottom],
-                            default: "bottom"
-      prop :x, type: Playbook::Props::Numeric
-      prop :y, type: Playbook::Props::Numeric
+      prop :options, default: {}
+      prop :container_props, default: {}
 
-      def chart_type
-        orientation == "horizontal" ? "bar" : "column"
+      def chart_options
+        options
       end
 
-      def standard_options
+      def react_props
         {
-          align: align,
-          id: id,
-          className: classname,
-          chartData: chart_data,
-          dark: dark ? "dark" : "",
-          type: chart_type,
-          title: title,
-          stacking: stacking,
-          subTitle: subtitle,
-          axisTitle: axis_title,
-          axisFormat: axis_format,
-          pointStart: point_start,
-          xAxisCategories: x_axis_categories,
-          yAxisMin: y_axis_min,
-          yAxisMax: y_axis_max,
-          legend: legend,
-          toggleLegendClick: toggle_legend_click,
-          height: height,
-          colors: colors,
-          layout: layout,
-          verticalAlign: vertical_align,
-          x: x,
-          y: y,
+          options: options,
+          containerProps: container_props_hash,
         }
       end
 
-      def chart_options
-        standard_options.deep_merge(custom_options)
-      end
-
-      def vertical_align_props
-        if vertical_align
-          if object.vertical_align
-            original_result = super
-            class_to_remove = "vertical_align_#{object.vertical_align}"
-
-            modified_result = original_result.gsub(class_to_remove, "").strip
-            modified_result.empty? ? nil : modified_result
-          else
-            super
-          end
-        else
-          super
-        end
+      def container_props_hash
+        container_props.merge({
+                                id: id,
+                                className: classname,
+                              }).compact
       end
 
       def classname

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_default.html.erb

@@ -15,12 +15,24 @@
     data: [1111,677,3245,500,200]
 }] %>
 
-<%= pb_rails("bar_graph", props: {
-    axis_title: 'Number of Employees',
-    chart_data: data,
-    id: "bar-default",
-    y_axis_min: 0,
-    x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
-    subtitle: 'Source: thesolarfoundation.com',
-    title: 'Solar Employment Growth by Sector, 2010-2016',
-}) %>
+
+<% chart_options = {
+  series: data,
+  title: {
+    text: 'Solar Employment Growth by Sector, 2010-2016',
+  },
+  subtitle: {
+    text: 'Source: thesolarfoundation.com',
+  },
+  xAxis: {
+    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
+  },
+  yAxis: {
+    title: {
+      text: 'Number of Employees',
+    },
+  },
+}
+%>
+
+<%= pb_rails("bar_graph", props: {options: chart_options}) %>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx

@@ -52,7 +52,7 @@ const FixedConfirmationToast = (props: FixedConfirmationToastProps): React.React
   } = props;
 
   const returnedIcon = icon || iconMap[status]
-  const iconClass = icon && icon !== "none" ? "custom_icon" : ""
+  const iconClass = icon ? "custom_icon" : ""
 
   const css = classnames(
     `pb_fixed_confirmation_toast_kit_${status}`,
@@ -92,7 +92,7 @@ const FixedConfirmationToast = (props: FixedConfirmationToastProps): React.React
             onClick={handleClick}
             {...htmlProps}
         >
-          {returnedIcon && icon !== "none" && (
+          {returnedIcon && (
             <Icon
                 className="pb_icon"
                 fixedWidth

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

@@ -8,7 +8,6 @@ examples:
   - fixed_confirmation_toast_auto_close: Click to Show Auto Close
   - fixed_confirmation_toast_children: Children
   - fixed_confirmation_toast_custom_icon: Custom Icon
-  - fixed_confirmation_toast_no_icon: No Icon
   
   react:
   - fixed_confirmation_toast_default: Default
@@ -18,7 +17,6 @@ examples:
   - fixed_confirmation_toast_auto_close: Click to Show Auto Close
   - fixed_confirmation_toast_children: Children
   - fixed_confirmation_toast_custom_icon: Custom Icon
-  - fixed_confirmation_toast_no_icon: No Icon
 
   swift:
   - fixed_confirmation_toast_default_swift: Default

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

@@ -5,4 +5,3 @@ export { default as FixedConfirmationToastPositions } from './_fixed_confirmatio
 export { default as FixedConfirmationToastAutoClose } from './_fixed_confirmation_toast_auto_close.jsx'
 export { default as FixedConfirmationToastChildren } from './_fixed_confirmation_toast_children.jsx'
 export { default as FixedConfirmationToastCustomIcon } from './_fixed_confirmation_toast_custom_icon.jsx'
-export { default as FixedConfirmationToastNoIcon } from './_fixed_confirmation_toast_no_icon.jsx'

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.html.erb

@@ -1,7 +1,6 @@
 <%= pb_content_tag do %>
-    <% if object.icon_value && object.icon_value != "none" %>
     <%= pb_rails("icon", props: { icon: object.icon_value, classname: "pb_icon", fixed_width: true }) %>
-    <% end %>
+
     <% if content %>
         <%= content %>
     <% elsif object.show_text? %>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.rb

@@ -56,7 +56,7 @@ module Playbook
       end
 
       def icon_class
-        icon.present? && icon != "none" ? " custom_icon" : ""
+        icon.present? ? " custom_icon" : ""
       end
 
       def classname

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.test.js

@@ -56,12 +56,6 @@ test('renders custom icon when provided', () => {
     expect(container.querySelector('.custom_icon')).toBeInTheDocument();
 });
 
-test("renders no icon when icon prop is 'none'", () => {
-    const { container } = render(<FixedConfirmationToast icon="none" />);
-    expect(container.querySelector('.pb_icon')).not.toBeInTheDocument();
-    expect(container.querySelector('.custom_icon')).not.toBeInTheDocument();
-});
-
 test('renders correctly with multiLine prop', () => {
     const { container } = render(<FixedConfirmationToast multiLine />);
     expect(container.querySelector('._multi_line')).toBeInTheDocument();

data/dist/chunks/_line_graph-BsZ3DcJo.js

@@ -0,0 +1 @@
+import{jsx,Fragment,jsxs}from"react/jsx-runtime";import{useMemo,useState,useEffect}from"react";import{b as buildDataProps,H as Highcharts,c as HighchartsReact,d as buildAriaProps,e as buildHtmlProps,f as HighchartsMore,g as classnames,h as globalProps,S as SolidGauge,i as buildCss}from"./_typeahead-CKvqSXWH.js";import{b as barGraphTheme,c as colors,h as highchartsTheme,m as merge,a as highchartsDarkTheme,t as typography}from"./lib-BplzvaaY.js";const BarGraph=({options:options,containerProps:containerProps={},data:data={}})=>{const dataProps=buildDataProps(data);const mergedOptions=useMemo((()=>{if(!options||typeof options!=="object"){console.error("❌ Invalid options passed to <BarGraph />",options);return{}}return Highcharts.merge({},barGraphTheme,options)}),[options]);return jsx(HighchartsReact,{containerProps:{...containerProps,...dataProps},highcharts:Highcharts,options:mergedOptions})};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 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};