playbook_ui 15.3.0.pre.alpha.PLAY2565formkitsubmitfix11681 → 15.3.0.pre.alpha.PLAY260211773

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e57165e0f6855d1e877e88b67b0cfc62dffcca56c75494c4919a2774443a3f4e
-  data.tar.gz: c13a71137883d0c2277e488a8a0163f88768e01a22d75c9d0f1bcd157ca473b9
+  metadata.gz: 726cf539b5bde924b845f08e1881a6f9f4fa5e3c7688be607e88166f35dc9974
+  data.tar.gz: a1b68b3ff4c39332a3a6eee2833863211675a1de5faf892e440f35fb23b54eba
 SHA512:
-  metadata.gz: e40cbc1a718b7157b85199fbd02852055a6dfa954d351af3a3299a84311b3185b8bbc93de30b9000b2161d97ae1bdd79f8a519ce3524d9907e506b095ed3c9b7
-  data.tar.gz: e06abbce30f98797e15dc84498c72d3d370275df49cb93f490fa8a9cdda3cc5844efe471a2fdb37ad969db0801bc6f6fb6c0f476204eae726b50b30042f1f296
+  metadata.gz: 2f050d36d6fe2270f6cc72c74cfdfef0756e3bf82fa27f029c7d2ed39517868ed41ca17deef93e00236963c8432e4c878ff2e8a3bba4ca3e20998cc93b05ee82
+  data.tar.gz: 1bc4774947204bcd9162c3ab12fc7254ccb90c5592b1c094175bb7b2f6ea26b52fefef39d65fa63ee68d8e966e8378a6cfa53ebaedee0239949ad5ee7dc02b95

data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx

@@ -30,6 +30,7 @@ type TableHeaderCellProps = {
   headerChildren?: React.ReactNode | React.ReactNode[]
   isPinnedLeft?: boolean
   loading?: boolean
+  persistToggleExpansionButton?: boolean
   sortIcon?: string | string[]
   table?: Table<GenericObject>
 } & GlobalProps
@@ -58,6 +59,7 @@ export const TableHeaderCell = ({
     selectableRows,
     hasAnySubRows,
     showActionsBar,
+    persistToggleExpansionButton,
     stickyLeftColumn,
     inlineRowLoading,
     isActionBarVisible,
@@ -220,7 +222,7 @@ const isToggleExpansionEnabled =
               />
             )
           }
-          {isToggleExpansionEnabled && hasAnySubRows && !expandByDepth && (
+          {isToggleExpansionEnabled &&  ((hasAnySubRows) || (inlineRowLoading && persistToggleExpansionButton)) && !expandByDepth && (
               <ToggleIconButton onClick={handleExpandOrCollapse} />
             )}
           {isToggleExpansionEnabled && hasAnySubRows && expandByDepth && (

data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableActions.ts

@@ -9,6 +9,9 @@ interface UseTableActionsProps {
   setExpanded: (expanded: GenericObject) => void;
   onToggleExpansionClick?: (arg: Row<GenericObject>) => void;
   onRowSelectionChange?: (rowSelection: any) => void;
+  inlineRowLoading?: boolean;
+  localPagination?: { pageIndex: number; pageSize: number };
+  setLocalPagination?: (pagination: { pageIndex: number; pageSize: number }) => void;
 }
 
 export function useTableActions({
@@ -16,7 +19,10 @@ export function useTableActions({
   expanded,
   setExpanded,
   onToggleExpansionClick,
-  onRowSelectionChange
+  onRowSelectionChange,
+  inlineRowLoading = false,
+  localPagination,
+  setLocalPagination
 }: UseTableActionsProps) {
 
   // State to achieve 1 second delay before fetching more rows
@@ -38,8 +44,17 @@ export function useTableActions({
 
   // Handle pagination
   const onPageChange = useCallback((page: number) => {
-    table.setPageIndex(page - 1);
-  }, [table]);
+    if (inlineRowLoading && setLocalPagination && localPagination) {
+      // Use manual pagination state for inlineRowLoading
+      setLocalPagination({
+        ...localPagination,
+        pageIndex: page - 1
+      });
+    } else {
+      // Use tanstack's built-in pagination
+      table.setPageIndex(page - 1);
+    }
+  }, [table, inlineRowLoading, setLocalPagination, localPagination]);
 
   // Handle scroll detection for infinite scroll/virtualization
   const fetchMoreOnBottomReached = useCallback((

data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableState.ts

@@ -12,6 +12,7 @@ import {
 import { GenericObject } from "../../types";
 import { createColumnHelper } from "@tanstack/react-table";
 import { createCellFunction } from "../Utilities/CellRendererUtils";
+import { inline } from '@floating-ui/react';
 
 interface UseTableStateProps {
   tableData: GenericObject[];
@@ -35,6 +36,7 @@ interface UseTableStateProps {
   onRowSelectionChange?: (arg: RowSelectionState) => void;
   columnVisibilityControl?: GenericObject;
   rowStyling?: GenericObject;
+  inlineRowLoading?: boolean;
 }
 
 export function useTableState({
@@ -53,7 +55,8 @@ export function useTableState({
   tableOptions,
   columnVisibilityControl,
   pinnedRows,
-  rowStyling
+  rowStyling,
+  inlineRowLoading = false
 }: UseTableStateProps) {
 
   // Create a local state for expanded and setExpanded if expandedControl not used
@@ -64,6 +67,12 @@ export function useTableState({
   const [localRowPinning, setLocalRowPinning] = useState<RowPinningState>({
     top: [],
   });
+  // Manage local state to preserve current page index when inlineRowLoading is enabled so it does not boot table to page 1
+  // We can extend this for more usecases, but for now scoping it only for inlineRowLoading
+  const [localPagination, setLocalPagination] = useState({
+    pageIndex: paginationProps?.pageIndex ?? 0, 
+    pageSize: paginationProps?.pageSize ?? 20,
+  });
   // Determine whether to use the prop or the local state
   const expanded = expandedControl ? expandedControl.value : localExpanded;
   const setExpanded = expandedControl ? expandedControl.onChange : setLocalExpanded;
@@ -133,6 +142,7 @@ export function useTableState({
       ...(selectableRows  && { rowSelection }),
       ...(columnVisibility && { columnVisibility }),
       ...(pinnedRows && { rowPinning }),
+      ...(inlineRowLoading && { pagination: localPagination }),
     },
   }), [
     expanded,
@@ -142,23 +152,36 @@ export function useTableState({
     rowSelection,
     columnVisibility,
     rowPinning,
+    inlineRowLoading,
+    localPagination
   ]);
 
   // Pagination configuration
   const paginationInitializer = useMemo(() => {
     if (!pagination) return {};
 
-    return {
-      getPaginationRowModel: getPaginationRowModel(),
-      paginateExpandedRows: false,
-      initialState: {
-        pagination: {
-          pageIndex: paginationProps?.pageIndex ?? 0,
-          pageSize: paginationProps?.pageSize ?? 20,
+    if (inlineRowLoading) {
+      // Use manual pagination state when inlineRowLoading is enabled (see https://tanstack.com/table/latest/docs/guide/pagination#client-side-pagination)
+      return {
+        getPaginationRowModel: getPaginationRowModel(),
+        paginateExpandedRows: false,
+        onPaginationChange: setLocalPagination,
+        autoResetPageIndex: false, // This is what prevent auto-reset of page index
+      };
+    } else {
+      // Use normal pagination initialization for non- inlineRowLoading usecases
+      return {
+        getPaginationRowModel: getPaginationRowModel(),
+        paginateExpandedRows: false,
+        initialState: {
+          pagination: {
+            pageIndex: paginationProps?.pageIndex ?? 0,
+            pageSize: paginationProps?.pageSize ?? 20,
+          },
         },
-      },
-    };
-  }, [pagination, paginationProps]);
+      };
+    }
+  }, [pagination, paginationProps, inlineRowLoading]);
 
   // Initialize the table
   const table = useReactTable({
@@ -206,9 +229,42 @@ export function useTableState({
   // Set pagination state when pagination is enabled
   useEffect(() => {
     if (pagination && paginationProps?.pageSize) {
-      table.setPageSize(paginationProps.pageSize);
+      if (inlineRowLoading) {
+        // Update local pagination state for inlineRowLoading
+        setLocalPagination(prev => ({
+          ...prev,
+          pageSize: paginationProps.pageSize
+        }));
+      } else {
+        table.setPageSize(paginationProps.pageSize);
+      }
+    }
+  }, [pagination, paginationProps?.pageSize, table, inlineRowLoading]);
+
+  // Update local pagination when paginationProps change and inlineRowLoading is enabled
+  useEffect(() => {
+    if (pagination && inlineRowLoading && paginationProps) {
+      setLocalPagination({
+        pageIndex: paginationProps.pageIndex ?? localPagination.pageIndex,
+        pageSize: paginationProps.pageSize ?? localPagination.pageSize,
+      });
+    }
+  }, [pagination, inlineRowLoading, paginationProps?.pageIndex, paginationProps?.pageSize]);
+
+  // Call the callback with the new page index when localPagination.pageIndex changes (for inlineRowLoading)
+  useEffect(() => {
+    if (pagination && inlineRowLoading && paginationProps) {
+      paginationProps.onPageChange(localPagination.pageIndex);
+    }
+  }, [localPagination.pageIndex, pagination, inlineRowLoading, paginationProps]);
+
+  // Call the callback with the new page index when table pagination state changes (for default pagination)
+  useEffect(() => {
+    if (pagination && !inlineRowLoading && paginationProps) {
+      const currentPageIndex = table.getState().pagination.pageIndex;
+      paginationProps.onPageChange(currentPageIndex);
     }
-  }, [pagination, paginationProps?.pageSize, table]);
+  }, [table.getState().pagination.pageIndex, pagination, inlineRowLoading, paginationProps]);
 
   // Check if table has any sub-rows
   const hasAnySubRows = table.getRowModel().rows.some(row => row.subRows && row.subRows.length > 0);
@@ -247,6 +303,8 @@ export function useTableState({
     rowSelection,
     fullData,
     totalFetched,
-    isFetching
+    isFetching,
+    localPagination,
+    setLocalPagination
   };
 }

data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableHeader.tsx

@@ -39,6 +39,7 @@ export const TableHeader = ({
     hasAnySubRows,
     showActionsBar,
     selectableRows,
+    persistToggleExpansionButton,
     responsive,
     headerRef,
     virtualizedRows,
@@ -92,6 +93,7 @@ export const TableHeader = ({
                   isPinnedLeft={isPinnedLeft}
                   key={`${header.id}-header`}
                   loading={loading}
+                  persistToggleExpansionButton={persistToggleExpansionButton}
                   sortIcon={sortIcon}
                   table={table}
               />
@@ -136,6 +138,7 @@ export const TableHeader = ({
                   isVirtualized
                   key={`${header.id}-header-virtualized`}
                   loading={loading}
+                  persistToggleExpansionButton={persistToggleExpansionButton}
                   sortIcon={sortIcon}
                   table={table}
               />

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx

@@ -63,6 +63,7 @@ type AdvancedTableProps = {
   scrollBarNone?: boolean,
   selectableRows?: boolean,
   showActionsBar?: boolean,
+  persistToggleExpansionButton?: boolean,
   sortControl?: GenericObject
   tableData: GenericObject[]
   tableOptions?: GenericObject
@@ -109,6 +110,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     scrollBarNone= false,
     showActionsBar = true,
     selectableRows,
+    persistToggleExpansionButton = false,
     sortControl,
     stickyLeftColumn,
     tableData,
@@ -134,7 +136,9 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     updateLoadingStateRowCount,
     fullData,
     totalFetched,
-    isFetching
+    isFetching,
+    localPagination,
+    setLocalPagination
   } = useTableState({
     tableData,
     columnDefinitions,
@@ -152,7 +156,8 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     onRowSelectionChange,
     columnVisibilityControl,
     pinnedRows,
-    rowStyling
+    rowStyling,
+    inlineRowLoading
   });
 
   // Initialize table actions
@@ -165,7 +170,10 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     expanded,
     setExpanded,
     onToggleExpansionClick,
-    onRowSelectionChange
+    onRowSelectionChange,
+    inlineRowLoading,
+    localPagination,
+    setLocalPagination
   });
 
   // Set table row count for loading state
@@ -349,6 +357,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
             loading={loading}
             onCustomSortClick={onCustomSortClick}
             onExpandByDepthClick={onExpandByDepthClick}
+            persistToggleExpansionButton={persistToggleExpansionButton}
             pinnedRows={pinnedRows}
             responsive={responsive}
             rowStyling={rowStyling}

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx

@@ -108,6 +108,48 @@ const MOCK_DATA_WITH_ID = [
   },
 ]
 
+const MOCK_DATA_NO_SUBROWS = [
+  {
+    year: "2021",
+    quarter: null,
+    month: null,
+    day: null,
+    newEnrollments: "20",
+    scheduledMeetings: "10",
+    attendanceRate: "51%",
+    completedClasses: "3",
+    classCompletionRate: "33%",
+    graduatedStudents: "19",
+    children: [],
+  },
+  {
+    year: "2022",
+    quarter: null,
+    month: null,
+    day: null,
+    newEnrollments: "25",
+    scheduledMeetings: "17",
+    attendanceRate: "75%",
+    completedClasses: "5",
+    classCompletionRate: "45%",
+    graduatedStudents: "32",
+    children: [],
+  },
+  {
+    year: "2023",
+    quarter: null,
+    month: null,
+    day: null,
+    newEnrollments: "30",
+    scheduledMeetings: "22",
+    attendanceRate: "80%",
+    completedClasses: "7",
+    classCompletionRate: "55%",
+    graduatedStudents: "45",
+    children: [],
+  },
+]
+
 const columnDefinitions = [
   {
     accessor: "year",
@@ -509,6 +551,23 @@ test("inlineRowLoading prop renders inline loading if true", () => {
   expect(inlineLoading).toBeInTheDocument()
 })
 
+test("persistToggleExpansionButton prop shows header toggle when inlineRowLoading is true", () => {
+  render(
+    <AdvancedTable
+        columnDefinitions={columnDefinitions}
+        data={{ testid: testId }}
+        enableToggleExpansion="all"
+        inlineRowLoading
+        persistToggleExpansionButton
+        tableData={MOCK_DATA_NO_SUBROWS}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  const headerToggleButton = kit.querySelector(".gray-icon.toggle-all-icon")
+  expect(headerToggleButton).toBeInTheDocument()
+})
+
 test("responsive prop functions as expected", () => {
   render(
     <AdvancedTable

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

@@ -1,6 +1,8 @@
 import React from "react"
 import AdvancedTable from '../../pb_advanced_table/_advanced_table'
+import Caption from '../../pb_caption/_caption'
 import { MOCK_DATA_INLINE_LOADING } from "./_mock_data_inline_loading"
+import { MOCK_DATA_INLINE_LOADING_EMPTY_CHILDREN } from "./_mock_data_inline_loading_empty_children"
 
 const AdvancedTableInlineRowLoading = (props) => {
   const columnDefinitions = [
@@ -41,16 +43,42 @@ const AdvancedTableInlineRowLoading = (props) => {
 
   return (
     <div>
+      <Caption text="Inline Row Loading - Demonstrated in Row 1 (Rows 2 and 3 have data)" />
       <AdvancedTable
           columnDefinitions={columnDefinitions}
           enableToggleExpansion="all"
           inlineRowLoading
+          marginBottom="md"
           tableData={MOCK_DATA_INLINE_LOADING}
           {...props}
       >
         <AdvancedTable.Header />
         <AdvancedTable.Body subRowHeaders={subRowHeaders}/>
       </AdvancedTable>
+      <Caption text="Inline Row Loading with No Subrow Data - All Rows Display Inline Row Loading and the Toggle All Button is not rendered" />
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          enableToggleExpansion="all"
+          inlineRowLoading
+          marginBottom="md"
+          tableData={MOCK_DATA_INLINE_LOADING_EMPTY_CHILDREN}
+          {...props}
+      >
+        <AdvancedTable.Header />
+        <AdvancedTable.Body subRowHeaders={subRowHeaders}/>
+      </AdvancedTable>
+      <Caption text="Inline Row Loading and Persist Toggle Expansion Button with No Subrow Data - All Rows Display Inline Row Loading and the Toggle All Button is rendered" />
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          enableToggleExpansion="all"
+          inlineRowLoading
+          persistToggleExpansionButton
+          tableData={MOCK_DATA_INLINE_LOADING_EMPTY_CHILDREN}
+          {...props}
+      >
+        <AdvancedTable.Header />
+        <AdvancedTable.Body subRowHeaders={subRowHeaders}/>
+      </AdvancedTable>
     </div>
   )
 }

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

@@ -1,5 +1,14 @@
+### inlineRowLoading
 As a default, the kit assumes that the initial dataset is complete, and it renders all expansion buttons/controls based on that data; if no children are present, no expansion controls are rendered. If, however, you want to change the initial dataset to omit some or all of its children (to improve load times of a complex dataset, perhaps), and you implement a querying logic that loads children only when its parent is expanded, then you must use the `inlineRowLoading` prop to ensure your expansion controls are rendered even though your child data is not yet loaded. You must also pass an empty `children` array to any node that will have children to ensure its parent maintains its ability to expand. If this prop is called AND your data contains empty `children` arrays, the kit will render expansion controls on any row with empty children, and then add an inline loading state within the expanded subrow until those child row(s) are returned to the page [by your query logic].
 
-In this code example, 2021 has an empty children array. Toggle it open to see the inline loading state. Once the correct data loads, this state will be replaced with the correct data rows. 
+In the first Advanced Table in this code example, 2021 has an empty children array. Toggle it open to see the inline loading state. Once the correct data loads, this state will be replaced with the correct data rows. 
 
-This prop is set to `false` by default. 
+This prop is set to `false` by default. 
+
+
+### persistToggleExpansion
+The `persistToggleExpansionButton` is a boolean prop that renders the toggle-all icon in the top left header cell for complex datasets with empty `children` arrays and advanced querying logic explained in the preceeding doc example. Your logic may require an additional query helper file to update data specifically from requerying via toggle all buttons.
+
+In the second and third Advanced Tables in this code example, all 3 rows have empty children arrays. The second Advanced Table demonstrates that the toggle all button does not render (prior to an initial row expansion) without `persistToggleExpansionButton` in place. The third Advanced Table shows the toggle all button due to `persistToggleExpansionButton`. 
+
+This prop is set to false by default and should only be used in conjunction with `inlineRowLoading`.

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

@@ -38,7 +38,10 @@ const AdvancedTablePaginationWithProps = (props) => {
   const paginationProps = {
     pageIndex: 1,
     pageSize: 10,
-    range: 2
+    range: 2,
+    onPageChange: (pageIndex) => {
+      console.log('Current page index:', pageIndex);
+    }
   }
   
   return (

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

@@ -1,5 +1,6 @@
-`paginationProps` is an optional prop that can be used to further customize pagination for the AdvancedTable. This prop is an object with 2 optional items:
+`paginationProps` is an optional prop that can be used to further customize pagination for the AdvancedTable. This prop is an object with the following optional items:
 
 - `pageIndex`: An optional prop to set which page is set to open on initial load. Default is '0'
 - `pageSize`: An optional prop to set total number of rows for each page before the Table paginates. Default is '20'
-- `range`: The range prop determines how many pages to display in the Pagination component. Regardless of this value, the first two and last two pages are always visible to facilitate navigation to the beginning and end of the pagination. If these always-visible pages fall within the specified range, they are included in the display. If they fall outside the range, the pagination will show additional pages up to the number defined by the range prop. See [here for more details](https://playbook.powerapp.cloud/kits/pagination/react#default). Default is set to '5'
+- `range`: The range prop determines how many pages to display in the Pagination component. Regardless of this value, the first two and last two pages are always visible to facilitate navigation to the beginning and end of the pagination. If these always-visible pages fall within the specified range, they are included in the display. If they fall outside the range, the pagination will show additional pages up to the number defined by the range prop. See [here for more details](https://playbook.powerapp.cloud/kits/pagination/react#default). Default is set to '5'
+- `onPageChange`: A callback function that gives to access to the current page index.

data/app/pb_kits/playbook/pb_advanced_table/docs/_mock_data_inline_loading_empty_children.js

@@ -0,0 +1,42 @@
+export const MOCK_DATA_INLINE_LOADING_EMPTY_CHILDREN = [
+    {
+      year: "2021",
+      quarter: null,
+      month: null,
+      day: null,
+      newEnrollments: "20",
+      scheduledMeetings: "10",
+      attendanceRate: "51%",
+      completedClasses: "3",
+      classCompletionRate: "33%",
+      graduatedStudents: "19",
+      children: [],
+    },
+    {
+      year: "2022",
+      quarter: null,
+      month: null,
+      day: null,
+      newEnrollments: "25",
+      scheduledMeetings: "17",
+      attendanceRate: "75%",
+      completedClasses: "5",
+      classCompletionRate: "45%",
+      graduatedStudents: "32",
+      children: [],
+    },
+    {
+      year: "2023",
+      quarter: null,
+      month: null,
+      day: null,
+      newEnrollments: "10",
+      scheduledMeetings: "15",
+      attendanceRate: "65%",
+      completedClasses: "4",
+      classCompletionRate: "49%",
+      graduatedStudents: "29",
+      children: [],
+    },
+  ]
+  

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_quick_pick_styles.scss

@@ -9,29 +9,20 @@ $pb_card_border_radius: $border_rad_heavier;
 
 // used to display dropdown on the left of the calender
 .quick-pick-drop-down {
-  width: auto;
-  display: grid;
+  width: 100%;
 }
 
 .quick-pick-ul {
-  padding: $space_xs 0px;
   margin: 0;
   list-style: none;
 }
 
 .nav-item {
   list-style: none;
-  border-radius: 6px;
-  border-bottom: 0;
-  margin: $space_xs $space_sm;
 }
 
 .nav-item-link {
   text-decoration: none;
-  border-width: $pb_card_border_width;
-  border-style: solid;
-  border-color: $border_light;
-  border-radius: $pb_card_border_radius;
   padding: $space_xs 14px;
   transition-property: color, background-color;
   transition-duration: 0.15s;
@@ -40,15 +31,21 @@ $pb_card_border_radius: $border_rad_heavier;
   color: $charcoal;
   font-size: $font_default;
   font-weight: $regular;
+  text-align: left;
+  border-bottom: 1px solid $border_light;
   &.active {
-    border-width: 2px;
-    border-color: $primary;
+    color: $white;
+    background-color: $primary;
+    &:hover {
+      background-color: $product_1_background;
+      color: $white;
+    }
   }
   @media (hover:hover) {
     &:hover {
       cursor: pointer;
-      box-shadow: $shadow-deep;
-      border-color: $slate;
+      background-color: $bg_light;
+      color: $primary;
     }
   }
 }
@@ -57,19 +54,3 @@ $pb_card_border_radius: $border_rad_heavier;
 .quick-pick-drop-down > .flatpickr-months, .quick-pick-drop-down > .flatpickr-innerContainer {
   display: none;
 }
-
-@media only screen and (max-width: 767px) {
-  .quick-pick-ul {
-    padding: $space_xs $space_xs;
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-  }
-
-  .nav-item {
-    margin: $space_xxs $space_xs;
-  }
-
-  .nav-item-link {
-    padding: $space_xs $space_xxs;
-  }
-}

data/dist/chunks/{_line_graph-h5H-imfn.js → _line_graph-DdZxz7Mk.js}

@@ -1 +1 @@
-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-U8AjZIIW.js";import{c as colors,h as highchartsTheme,m as merge,a as highchartsDarkTheme,t as typography}from"./lib-CGxXTQ75.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-KEbTTXol.js";import{c as colors,h as highchartsTheme,m as merge,a as highchartsDarkTheme,t as typography}from"./lib-CGxXTQ75.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};