playbook_ui 14.23.0.pre.alpha.play23129273 → 14.23.0.pre.rc.0

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header_multi_header.jsx

@@ -1,107 +0,0 @@
-import React from "react"
-import AdvancedTable from '../../pb_advanced_table/_advanced_table'
-import Icon from "../../pb_icon/_icon"
-import Flex from "../../pb_flex/_flex"
-import Caption from "../../pb_caption/_caption"
-import Tooltip from "../../pb_tooltip/_tooltip"
-import MOCK_DATA from "./advanced_table_mock_data.json"
-
-const AdvancedTableWithCustomHeaderMultiHeader = (props) => {
-
-const columnDefinitions = [
-    {
-      accessor: "year",
-      label: "Year",
-      id: "year",
-      cellAccessors: ["quarter", "month", "day"],
-    },
-    {
-      label: "Enrollment Data",
-      id: "enrollmentData",
-      header: () => (
-        <Flex alignItems="center" 
-            justifyContent="center"
-        >
-          <Caption marginRight="xs">Enrollments Data</Caption>
-          <Tooltip placement="top" 
-              text="Whoa. I'm a Tooltip" 
-              zIndex={10}
-          >
-            <Icon cursor="pointer" 
-                icon="info"
-                size="xs" 
-            />
-          </Tooltip>
-        </Flex>
-      ),
-      columns: [
-        {
-          label: "Enrollment Stats",
-          id: "enrollmentStats",
-          columns: [
-            {
-              accessor: "newEnrollments",
-              id: "newEnrollments",
-              label: "New Enrollments",
-            },
-            {
-              accessor: "scheduledMeetings",
-              id: "scheduledMeetings",
-              label: "Scheduled Meetings",
-            },
-          ],
-        },
-      ],
-    },
-    {
-      label: "Performance Data",
-      id: "performanceData",
-      columns: [
-        {
-          label: "Completion Metrics",
-          id: "completionMetrics",
-          columns: [
-            {
-              accessor: "completedClasses",
-              label: "Completed Classes",
-              id: "completedClasses",
-            },
-            {
-              accessor: "classCompletionRate",
-              label: "Class Completion Rate",
-              id: "classCompletionRate",
-            },
-          ],
-        },
-        {
-          label: "Attendance",
-          id: "attendance",
-          columns: [
-            {
-              accessor: "attendanceRate",
-              label: "Attendance Rate",
-              id: "attendanceRate",
-            },
-            {
-              accessor: "scheduledMeetings",
-              label: "Scheduled Meetings",
-              id: "scheduledMeetings",
-            },
-          ],
-        },
-      ],
-    },
-  ];
-
-  return (
-    <div>
-      <AdvancedTable
-          columnDefinitions={columnDefinitions}
-          tableData={MOCK_DATA}
-          {...props}
-      />
-    </div>
-  )
-}
-
-export default AdvancedTableWithCustomHeaderMultiHeader;

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header_multi_header.md

@@ -1 +0,0 @@
-The optional `header` key/value pair within `columnDefinitions` can also be used with multi headers as seen here. 

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header_rails.html.erb

@@ -1,51 +0,0 @@
-<%
-  column_definitions = [
-    {
-      accessor: "year",
-      label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
-    },
-    {
-      accessor: "newEnrollments",
-      label: "New Enrollments",
-      header: ->(cell, label) {
-        capture do
-          pb_rails("flex", props: { align_items: "center", justify_content: "center" }) do
-            pb_rails("caption", props: { margin_right: "xs", text: "New Enrollments" }) +
-            pb_rails("icon", props: { id: "tooltip-interact", icon: "info", size: "xs" }) +
-            pb_rails("tooltip", props: {
-              trigger_element_id: "tooltip-interact",
-              tooltip_id: "example-custom-tooltip",
-              position: "top",
-              z_index: "10"
-            }) do
-              "Whoa. I'm a Tooltip"
-            end
-          end
-        end
-      }
-    },
-    {
-      accessor: "scheduledMeetings",
-      label: "Scheduled Meetings",
-    },
-    {
-      accessor: "attendanceRate",
-      label: "Attendance Rate",
-    },
-    {
-      accessor: "completedClasses",
-      label: "Completed Classes",
-    },
-    {
-      accessor: "classCompletionRate",
-      label: "Class Completion Rate",
-    },
-    {
-      accessor: "graduatedStudents",
-      label: "Graduated Students",
-    }
-  ]
-%>
-
-<%= pb_rails("advanced_table", props: { id: "custom_header_table", table_data: @table_data, column_definitions: column_definitions }) %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header_rails.md

@@ -1 +0,0 @@
-The optional `header` item can be used within `column_definitions` to render a custom header. This example shows an Icon and Tooltip being used but other kits can be used as well.

data/app/pb_kits/playbook/pb_bar_graph/barGraphTheme.ts

@@ -1,106 +0,0 @@
-import colors from '../tokens/exports/_colors.module.scss'
-import typography from '../tokens/exports/_typography.module.scss'
-
-const barGraphTheme = {
-    title: {
-        text: "",
-        style: {
-            color: colors.text_lt_default,
-            fontFamily: typography.font_family_base,
-            fontWeight: typography.bold,
-            fontSize: typography.heading_3,
-        },
-    },
-    subtitle: {
-        text: "",
-        style: {
-            fontFamily: typography.font_family_base,
-            color: colors.text_lt_light,
-            fontWeight: typography.regular,
-            fontSize: typography.text_base,
-        },
-    },
-    chart: {
-        type: "column",
-    },
-    tooltip: {
-        backgroundColor: {
-            linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
-            stops: [
-                [0, colors.bg_dark],
-                [1, colors.bg_dark],
-            ],
-        },
-        style: {
-            fontFamily: typography.font_family_base,
-            color: colors.text_dk_default,
-            fontWeight: typography.regular,
-            fontSize: typography.text_smaller,
-        },
-    },
-    colors: [
-        colors.data_1,
-        colors.data_2,
-        colors.data_3,
-        colors.data_4,
-        colors.data_5,
-        colors.data_6,
-        colors.data_7,
-    ],
-    credits: { enabled: false },
-    legend: { 
-        enabled: false, 
-        itemStyle: {
-            color: colors.text_lt_light,
-            fill: colors.text_lt_light,
-            fontSize: typography.text_smaller,
-        },
-     },
-    xAxis: {
-        gridLineWidth: 0,
-        lineColor: colors.border_light,
-        tickColor: colors.border_light,
-        labels: {
-            style: {
-                fontFamily: typography.font_family_base,
-                color: colors.text_lt_lighter,
-                fontWeight: typography.bold,
-                fontSize: typography.text_smaller,
-            },
-        },
-        title: {
-            style: {
-                color: colors.text_lt_default,
-                fontFamily: typography.font_family_base,
-                fontWeight: typography.regular,
-                fontSize: typography.heading_4,
-            },
-        },
-    },
-    yAxis: {
-        alternateGridColor: undefined as string | undefined,
-        minorTickInterval: null as number | null,
-        gridLineColor: colors.border_light,
-        minorGridLineColor: colors.border_light,
-        lineWidth: 0,
-        tickWidth: 0,
-        labels: {
-            style: {
-                fontFamily: typography.font_family_base,
-                color: colors.text_lt_lighter,
-                fontWeight: typography.bold,
-                fontSize: typography.text_smaller,
-            },
-        },
-        title: {
-            style: {
-                fontFamily: typography.font_family_base,
-                color: colors.text_lt_lighter,
-                fontWeight: typography.bold,
-                fontSize: typography.text_smaller,
-            },
-        },
-    },
-}
-
-export default barGraphTheme;

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.md

@@ -1,3 +0,0 @@
-By default, Highcharts have a height of 400px, but this can be customized. You can override the default by specifying either a percentage or a fixed pixel value.
-
-Using a percentage maintains a consistent aspect ratio across different responsive sizes. For example, setting the height to 50% makes the chart’s height half of its width.

data/app/pb_kits/playbook/pb_body/docs/_body_truncate_react.md

@@ -1,4 +0,0 @@
-##### Prop
-`truncate` | **Type**: Enum | **Values**: 1 | 2 | 3 | 4 | 5
-
-The `truncate` prop truncates overflowing text up to a maximum of five rows and adds an ellipsis at the end.

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors_react.md

@@ -1,2 +0,0 @@
-Custom data colors allow for color customization to match the needs of business requirements. 
-Import the colors from Playbook's tokens, then set custom colors in the plotOptions.pie.colors array using the desired color variables. Hex colors are also available `eg: #CA0095`.

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

@@ -1 +0,0 @@
-**Important Note for the React Kit**: In order to leverage this kit, you must install `highcharts` and `highcharts-react-official` into your project as shown below. To then apply Playbook styles to your Highchart, import circleChartTheme.ts from playbook-ui and merge it with your Highchart options. Then, pass the merged value to the options prop. Playbook’s styling will be applied automatically. See the examples in the documentation below.

data/app/pb_kits/playbook/pb_dropdown/_dropdown_mixin.scss

@@ -1,36 +0,0 @@
-@import "../tokens/colors";
-
-// activeStyle fontColor sass map to go through text colors + set of custom colors
-$custom-font-colors: (
-  primary: $primary
-);
-
-$merged-font-colors: map-merge($text_colors, $custom-font-colors);
-
-$font-colors: ();
-
-@each $key, $val in $merged-font-colors {
-  $font-colors: map-merge($font-colors, ($key: $val));
-}
-
-@mixin apply-font-color($color) {
-  color: $color;
-
-  [class^="pb_body"],
-  [class^="pb_title_kit"],
-  a {
-    color: $color !important;
-  }
-}
-
-// activeStyle backgroundColor map (set of custom colors)
-$custom-background-colors: (
-  "bg_light": $bg_light,
-  "white": $white,
-);
-
-$background-colors: ();
-
-@each $key, $val in $custom-background-colors {
-  $background-colors: map-merge($background-colors, ($key: $val));
-}

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_active_style_options.jsx

@@ -1,90 +0,0 @@
-import React from 'react'
-import Dropdown from '../_dropdown'
-
-const DropdownCustomActiveStyleOptions = (props) => {
-
-
-  const options = [
-    {
-      label: "United States",
-      value: "unitedStates",
-      id: "us"
-    },
-    {
-      label: "Canada",
-      value: "canada",
-      id: "ca"
-    },
-    {
-      label: "Pakistan",
-      value: "pakistan",
-      id: "pk"
-    }
-  ];  
-
-
-  return (
-  <div>
-    <Dropdown
-        activeStyle={{
-          backgroundColor: "bg_light",
-          fontColor: "primary",
-        }}
-        label="Background Color: bg_light; Font Color: primary"
-        marginBottom="sm"
-        options={options}
-        {...props}
-    >
-      <Dropdown.Trigger/>
-      <Dropdown.Container>
-        {options.map((option) => (
-          <Dropdown.Option key={option.id} 
-              option={option}
-          />
-        ))}
-      </Dropdown.Container>
-    </Dropdown>
-    <Dropdown
-        activeStyle={{
-          backgroundColor: "white",
-          fontColor: "primary",
-        }}
-        label="Background Color: white; Font Color: primary"
-        marginBottom="sm"
-        options={options}
-        {...props}
-    />
-    <Dropdown
-        activeStyle={{
-          backgroundColor: "bg_light",
-          fontColor: "text_lt_default",
-        }}
-        autocomplete
-        label="Background Color: bg_light; Font Color: text_lt_default"
-        marginBottom="sm"
-        options={options}
-        {...props}
-    />
-    <Dropdown
-        activeStyle={{
-          fontColor: "text_lt_lighter",
-        }}
-        label="Font Color: text_lt_lighter"
-        marginBottom="sm"
-        options={options}
-        {...props}
-    >
-      <Dropdown.Trigger/>
-      <Dropdown.Container>
-        {options.map((option) => (
-          <Dropdown.Option key={option.id} 
-              option={option}
-          />
-        ))}
-      </Dropdown.Container>
-    </Dropdown>
-  </div>
-  )
-}
-
-export default  DropdownCustomActiveStyleOptions

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_active_style_options_react.md

@@ -1,4 +0,0 @@
-The `activeStyle` prop can be used to customize the appearance of the dropdown selection indicator. It accepts an object with the following keys: `backgroundColor` sets the background color of the selected item (and its hover state); `fontColor` sets the font color of the selected item.
-
-`backgroundColor` **Type**: String | **Values**: bg_light | white | **Default**: (no selection) is primary
-`fontColor` **Type**: String | **Values**: primary | all [Playbook Text Colors](https://playbook.powerapp.cloud/visual_guidelines/colors) | **Default**: (no selection) is white

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

@@ -1 +0,0 @@
-**Important Note for the React Kit**: In order to leverage this kit, you must install `highcharts` and `highcharts-react-official` into your project as shown below. To then apply Playbook styles to your Highchart, import gaugeTheme.ts from playbook-ui and merge it with your Highchart options. Then, pass the merged value to the options prop. Playbook’s styling will be applied automatically. See the examples in the documentation below.

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_colors_react.md

@@ -1,2 +0,0 @@
-Custom data colors allow for color customization to match the needs of business requirements.
-Pass the prop `plotOptions.solidgauge.borderColor` with a Playbook token like `colors.` + `data_1 | data_2 | data_3 | data_4 | data_5 | data_6 | data_7 | data_8`. Hex colors are also available `eg: #CA0095`

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex_react.md

@@ -1 +0,0 @@
-We are able to wrap the Highcharts Gauge kit within Playbook kits (such as Flex and Card components).

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_units_react.md

@@ -1 +0,0 @@
-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_line_graph/docs/_line_graph_colors_react.md

@@ -1,3 +0,0 @@
-
-Custom data colors allow for color customization to match the needs of business requirements. 
-Import the colors from Playbook's tokens, then set custom colors in the colors array using the desired color variables. Hex colors are also available `eg: #CA0095`.

data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_height.md

@@ -1,3 +0,0 @@
-By default, Highcharts have a height of 400px, but this can be customized. You can override the default by specifying either a percentage or a fixed pixel value.
-
-Using a percentage maintains a consistent aspect ratio across different responsive sizes. For example, setting the height to 50% makes the chart’s height half of its width.

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_strict_mode.html.erb

@@ -1,10 +0,0 @@
-<%= pb_rails("phone_number_input", props: {
-    strict_mode: true,
-}) %>
-
-<%= pb_rails("body", props: { text: "With format_as_you_type" }) %>
-
-<%= pb_rails("phone_number_input", props: {
-    strict_mode: true,
-    format_as_you_type: true,
-}) %>

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_strict_mode.jsx

@@ -1,26 +0,0 @@
-import React from "react";
-
-import Body from '../../pb_body/_body'
-import PhoneNumberInput from '../../pb_phone_number_input/_phone_number_input'
-
-const PhoneNumberInputStrictMode = (props) => {
-
-    return (
-        <>
-            <PhoneNumberInput
-                id="strict"
-                strictMode
-                {...props}
-            />
-            <Body>With formatAsYouType</Body>
-            <PhoneNumberInput
-                formatAsYouType
-                id="strict"
-                strictMode
-                {...props}
-            />
-        </>
-    );
-};
-
-export default PhoneNumberInputStrictMode;

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_strict_mode.md

@@ -1,3 +0,0 @@
-Ignore any irrelevant characters and cap the length at the maximum valid number length.
-
-This can be combined with `format_as_you_type` / `formatAsYouType`. 

data/app/pb_kits/playbook/pb_title/docs/_title_truncate_react.md

@@ -1,4 +0,0 @@
-##### Prop
-`truncate` | **Type**: Enum | **Values**: 1 | 2 | 3 | 4 | 5
-
-The `truncate` prop truncates overflowing text up to a maximum of five rows and adds an ellipsis at the end.

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open.html.erb

@@ -1,14 +0,0 @@
-<%= pb_rails("button", props: { 
-  text: "Click to Open",
-  id: "click-tooltip-trigger-1",
-  variant: "primary"
-}) %>
-
-<%= pb_rails("tooltip", props: {
-  trigger_element_selector: "#click-tooltip-trigger-1",
-  tooltip_id: "click-tooltip-1",
-  position: "top",
-  use_click_to_open: true
-}) do %>
-  Tooltip opened by click! Click trigger again to close.
-<% end %>

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open_rails.md

@@ -1 +0,0 @@
-Set the prop `use_click_to_open` as `true` so that the tooltip will only appear when an item is clicked rather than hovered over.

data/dist/chunks/_line_graph-BNbgv7cZ.js

@@ -1 +0,0 @@
-import{jsx,Fragment,jsxs}from"react/jsx-runtime";import{useState,useEffect}from"react";import{b as buildAriaProps,c as buildDataProps,d as buildHtmlProps,H as HighchartsReact,e as Highcharts,f as classnames,g as globalProps,h as HighchartsMore,S as SolidGauge,i as buildCss}from"./_typeahead-BjxzQL_-.js";import{c as colors,h as highchartsTheme,m as merge,a as highchartsDarkTheme,t as typography}from"./lib-CY5ZPzic.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};