playbook_ui 14.21.2 → 14.22.0.pre.alpha.PLAY2256stickydataidreact8523

data/app/pb_kits/playbook/pb_advanced_table/index.js

@@ -1,4 +1,5 @@
 import PbEnhancedElement from "../pb_enhanced_element";
+import { updateSelectionActionBar } from "./advanced_table_action_bar";
 
 const ADVANCED_TABLE_SELECTOR = "[data-advanced-table]";
 const DOWN_ARROW_SELECTOR = "#advanced-table_open_icon";
@@ -9,9 +10,33 @@ export default class PbAdvancedTable extends PbEnhancedElement {
     return ADVANCED_TABLE_SELECTOR;
   }
 
+  static expandedRows = new Set();
+  static selectedRows = new Set();
+  static isCollapsing = false;
+
+  constructor(...args) {
+    super(...args);
+    // Map parent row ID to array of its child rows
+    this.childRowsMap = new Map();
+  }
+
+  // Fetch and cache child rows for a given parent row ID
+  childRowsFor(parentId) {
+    if (!this.childRowsMap.has(parentId)) {
+      const table = this.element.closest("table");
+      const rows = Array.from(
+        table.querySelectorAll(`tr[data-row-parent="${parentId}"]`)
+      );
+      this.childRowsMap.set(parentId, rows);
+    }
+    return this.childRowsMap.get(parentId);
+  }
+
   updateTableSelectedRowsAttribute() {
     const mainTable = this.element.closest(".pb_advanced_table");
-    mainTable.dataset.selectedRows = JSON.stringify(Array.from(PbAdvancedTable.selectedRows));
+    mainTable.dataset.selectedRows = JSON.stringify(
+      Array.from(PbAdvancedTable.selectedRows)
+    );
   }
 
   // Check if the row is expanded or collapsed
@@ -104,7 +129,7 @@ export default class PbAdvancedTable extends PbEnhancedElement {
     } else {
       PbAdvancedTable.selectedRows.delete(rowId);
     }
-     // Update background color on row
+    // Update background color on row
     if (!isChecked) {
       rowEl.classList.remove("bg-row-selection");
 
@@ -176,99 +201,129 @@ export default class PbAdvancedTable extends PbEnhancedElement {
       );
       selectAllInput.checked = allChecked;
     }
+    updateSelectionActionBar(table.closest(".pb_advanced_table"), PbAdvancedTable.selectedRows.size);
   }
 
   get target() {
-    const table = this.element.closest("table");
-    return table.querySelectorAll(`[data-row-parent="${this.element.id}"]`);
+    return this.childRowsFor(this.element.id) || [];
   }
 
-  static expandedRows = new Set();
-  static selectedRows = new Set();
-  static isCollapsing = false;
-
   connect() {
-    this.element.addEventListener("click", () => {
-      if (!PbAdvancedTable.isCollapsing) {
-        const isExpanded =
-          this.element.querySelector(UP_ARROW_SELECTOR).style.display ===
-          "inline-block";
-        if (!isExpanded) {
-          PbAdvancedTable.expandedRows.add(this.element.id);
-        } else {
-          PbAdvancedTable.expandedRows.delete(this.element.id);
-        }
-        this.toggleElement(this.target);
-      }
-    });
+    const table = this.element.closest("table");
 
     this.hideCloseIcon();
+    const mainTable = this.element.closest(".pb_advanced_table");
+    
+    // This so it is hidden on first render
+    if (mainTable) {
+      updateSelectionActionBar(mainTable);
+    }
 
-    const table = this.element.closest("table");
+    // Precompute parent→child rows mapping once
+    table.querySelectorAll("tr[data-row-parent]").forEach((row) => {
+      const parentId = row.dataset.rowParent;
+      if (!this.childRowsMap.has(parentId)) {
+        this.childRowsMap.set(parentId, []);
+      }
+      this.childRowsMap.get(parentId).push(row);
+    });
 
     // Prevent duplicate initialization
     if (table.dataset.pbAdvancedTableInitialized) return;
     table.dataset.pbAdvancedTableInitialized = "true";
 
-    // Bind checkbox change handlers for all row checkboxes
-    const checkboxLabels = table.querySelectorAll("label[data-row-id]");
-    checkboxLabels.forEach((label) => {
-      const checkbox = label.querySelector("input[type='checkbox']");
+    // Delegate checkbox changes
+    table.addEventListener("change", (event) => {
+      const checkbox = event.target.closest('input[type="checkbox"]');
       if (!checkbox) return;
-      checkbox.addEventListener("change", (event) => {
-        this.handleCheckboxClick(event);
-      });
-    });
 
-    // Bind nested row expansion logic
-    const nestedButtons = table.querySelectorAll("[data-advanced-table]");
-    nestedButtons.forEach((button) => {
-      button.addEventListener("click", () => {
-        const isExpanded =
-          button.querySelector(UP_ARROW_SELECTOR).style.display === "inline-block";
-        if (isExpanded) {
-          PbAdvancedTable.expandedRows.add(button.id);
-        } else {
-          PbAdvancedTable.expandedRows.delete(button.id);
+      // Header "select-all" logic
+      if (checkbox.closest("#select-all-rows")) {
+        const checkAll = checkbox.checked;
+        const rowCheckboxes = table.querySelectorAll(
+          'label[data-row-id] input[type="checkbox"]'
+        );
+        rowCheckboxes.forEach((cb) => {
+          if (cb.checked !== checkAll) {
+            cb.checked = checkAll;
+            this.handleCheckboxClick({ currentTarget: cb });
+          }
+        });
+        this.updateTableSelectedRowsAttribute();
+        updateSelectionActionBar(table.closest(".pb_advanced_table"), PbAdvancedTable.selectedRows.size);
+        return;
+      }
+
+      // Individual row checkbox logic
+      const rowLabel = checkbox.closest("label[data-row-id]");
+      if (rowLabel) {
+        this.handleCheckboxClick({ currentTarget: checkbox });
+        this.updateTableSelectedRowsAttribute();
+
+        // Sync header select-all state
+        const selectAllInput = table.querySelector(
+          '#select-all-rows input[type="checkbox"]'
+        );
+        if (selectAllInput) {
+          selectAllInput.checked = Array.from(
+            table.querySelectorAll('label[data-row-id] input[type="checkbox"]')
+          ).every((cb) => cb.checked);
         }
-      });
+      }
     });
 
-    // Bind select-all logic for this table
-    const selectAllCheckbox = table.querySelector("#select-all-rows");
-    if (selectAllCheckbox) {
-      selectAllCheckbox.addEventListener("change", () => {
-        const checkboxInput = selectAllCheckbox.querySelector('input[type="checkbox"]');
-        const checkAll = checkboxInput.checked;
+    // Delegate expand/collapse toggles
+    table.addEventListener("click", (event) => {
+      const toggleBtn = event.target.closest("[data-advanced-table]");
+      if (!toggleBtn || PbAdvancedTable.isCollapsing) return;
+
+      // Temporarily bind `this.element` to the clicked toggle
+      const prevElement = this.element;
+      this.element = toggleBtn;
+
+      // Update expandedRows set
+      const isExpanded =
+        toggleBtn.querySelector(UP_ARROW_SELECTOR).style.display ===
+        "inline-block";
+      if (!isExpanded) {
+        PbAdvancedTable.expandedRows.add(toggleBtn.id);
+      } else {
+        PbAdvancedTable.expandedRows.delete(toggleBtn.id);
+      }
 
-        const checkboxes = Array.from(
-          table.querySelectorAll("label[data-row-id] input[type='checkbox']")
-        );
+      // Find direct child rows
+      const childRows = Array.from(
+        table.querySelectorAll(`[data-row-parent="${toggleBtn.id}"]`)
+      );
+      this.toggleElement(childRows);
 
-        checkboxes.forEach((cb) => {
-          cb.checked = checkAll;
-          const rowId = cb.id;
-          const rowEl = cb.closest("tr");
+      // Restore original element context
+      this.element = prevElement;
+    });
 
-          if (checkAll) {
-            PbAdvancedTable.selectedRows.add(rowId);
-            rowEl?.classList.add("bg-row-selection");
-            rowEl?.classList.remove("bg-white", "bg-silver");
-          } else {
-            PbAdvancedTable.selectedRows.delete(rowId);
-            rowEl?.classList.remove("bg-row-selection");
-            rowEl?.classList.add("bg-white");
-          }
-        });
+    this.addBorderRadiusOnLastVisibleRow();
+  }
 
-        checkboxes.forEach((cb) => this.updateParentCheckboxes(cb));
+  addBorderRadiusOnLastVisibleRow() {
+    const parentElement = this.element.closest(".pb_advanced_table");
 
-        this.updateTableSelectedRowsAttribute();
-      });
+    const table = document.getElementById(parentElement.id);
+
+    if (table) {
+      const visibleRows = table.querySelectorAll(
+        "tr.is-visible, tr:not(.toggle-content)"
+      );
+
+      visibleRows.forEach((row) => row.classList.remove("last-visible-row"));
+
+      const lastVisibleRow = visibleRows[visibleRows.length - 1];
+
+      if (lastVisibleRow) {
+        lastVisibleRow.classList.add("last-visible-row");
+      }
     }
   }
 
-
   hideCloseIcon() {
     const closeIcon = this.element.querySelector(UP_ARROW_SELECTOR);
     closeIcon.style.display = "none";
@@ -367,6 +422,8 @@ export default class PbAdvancedTable extends PbEnhancedElement {
       row.classList.toggle("bg-silver", !isVisible);
       row.classList.toggle("bg-white", isVisible);
     }
+
+    this.addBorderRadiusOnLastVisibleRow();
   }
 
   displayDownArrow() {
@@ -449,151 +506,6 @@ export default class PbAdvancedTable extends PbEnhancedElement {
   }
 }
 
-// Isolate action bar functionality so it doesn't mix with existing functionality
-class PbAdvancedTableActionBar {
-  constructor() {
-    this.init();
-  }
-
-  init() {
-    // Initialize action bars for all advanced tables with action bars
-    document.addEventListener('DOMContentLoaded', () => {
-      this.setupActionBars();
-    });
-
-    // Also run immediately in case DOM is already loaded
-    if (document.readyState === 'loading') {
-      // DOM is still loading
-    } else {
-      // DOM is already loaded
-      this.setupActionBars();
-    }
-  }
-
-  setupActionBars() {
-    const advancedTables = document.querySelectorAll('.pb_advanced_table');
-
-    advancedTables.forEach(table => {
-      // Only proceed if this table has both selectable rows AND an action bar
-      if (!this.shouldEnableActionBar(table)) return;
-
-      const actionBar = table.querySelector('.row-selection-actions-card');
-      if (!actionBar) return; // Skip tables without action bars
-
-      // Initialize action bar styles
-      this.initializeActionBar(actionBar);
-
-      // Set up checkbox listeners for this table
-      this.setupCheckboxListeners(table, actionBar);
-    });
-  }
-
-  shouldEnableActionBar(table) {
-    // Check if the table has selectable rows
-    const hasSelectableRows = table.querySelector('input[type="checkbox"]') !== null;
-
-    // Check if the table has a row selection action bar (not other types of action bars)
-    const hasRowSelectionActionBar = table.querySelector('.row-selection-actions-card') !== null;
-
-    // Additional check: look for the presence of row checkboxes with data-row-id
-    const hasRowCheckboxes = table.querySelector('label[data-row-id] input[type="checkbox"]') !== null;
-
-    // Only enable if ALL conditions are met:
-    // 1. Has selectable checkboxes
-    // 2. Has the specific row selection action bar
-    // 3. Has row checkboxes (not just other types of checkboxes)
-    return hasSelectableRows && hasRowSelectionActionBar && hasRowCheckboxes;
-  }
-
-  initializeActionBar(actionBar) {
-    // Set initial hidden state
-    Object.assign(actionBar.style, {
-      height: '0px',
-      overflow: 'hidden',
-      display: 'block',
-      opacity: '0'
-    });
-
-    // Remove any visibility classes
-    actionBar.classList.remove("p_xs", "is-visible", "show-action-card");
-    actionBar.classList.add("p_none");
-  }
-
-  setupCheckboxListeners(table, actionBar) {
-    // Only listen to row checkboxes (those with data-row-id), not all checkboxes
-    const rowCheckboxes = table.querySelectorAll('label[data-row-id] input[type="checkbox"]');
-
-    rowCheckboxes.forEach(checkbox => {
-      checkbox.addEventListener('change', () => {
-        // Use setTimeout to ensure this runs after the main checkbox logic
-        setTimeout(() => {
-          this.updateActionBarVisibility(table, actionBar);
-        }, 0);
-      });
-    });
-
-    // Special handling for select-all checkbox (only if it exists)
-    const selectAllCheckbox = table.querySelector("#select-all-rows");
-    if (selectAllCheckbox) {
-      const selectAllInput = selectAllCheckbox.querySelector('input[type="checkbox"]');
-      if (selectAllInput) {
-        selectAllInput.addEventListener('change', () => {
-          // Use setTimeout to ensure this runs after the main select-all logic
-          setTimeout(() => {
-            this.updateActionBarVisibility(table, actionBar);
-          }, 10); // Slightly longer delay for select-all to ensure all row checkboxes are updated
-        });
-      }
-    }
-  }
-
-  updateActionBarVisibility(table, actionBar) {
-    // Only count row checkboxes (those with data-row-id), not all checkboxes
-    const rowCheckboxes = table.querySelectorAll('label[data-row-id] input[type="checkbox"]');
-
-    // Get all checked row checkboxes
-    const selectedRowCheckboxes = Array.from(rowCheckboxes).filter(cb => cb.checked);
-
-    // Get the selected count
-    const selectedCount = selectedRowCheckboxes.length;
-
-    if (selectedCount > 0) {
-      this.showActionBar(actionBar, selectedCount);
-    } else {
-      this.hideActionBar(actionBar);
-    }
-  }
-
-  showActionBar(actionBar, selectedCount) {
-    // Show action bar directly
-    actionBar.style.height = 'auto';
-    actionBar.style.overflow = 'visible';
-    actionBar.style.opacity = '1';
-    actionBar.style.transitionProperty = 'all';
-    actionBar.style.transitionTimingFunction = 'ease-in-out';
-    actionBar.classList.remove("p_none");
-    actionBar.classList.add("p_xs", "is-visible", "show-action-card");
-
-    // Update the count
-    const countElement = actionBar.querySelector(".selected-count");
-    if (countElement) {
-      countElement.textContent = `${selectedCount} Selected`;
-    }
-  }
-
-  hideActionBar(actionBar) {
-    // Hide action bar directly
-    actionBar.style.height = '0px';
-    actionBar.style.overflow = 'hidden';
-    actionBar.style.opacity = '0';
-    actionBar.classList.add("p_none");
-    actionBar.classList.remove("p_xs", "is-visible", "show-action-card");
-  }
-}
-
-// Initialize the isolated action bar functionality
-new PbAdvancedTableActionBar();
-
 window.expandAllRows = (element) => {
   PbAdvancedTable.handleToggleAllHeaders(element);
 };

data/app/pb_kits/playbook/pb_advanced_table/scss_partials/advanced_table_sticky_mixin.scss

@@ -2,7 +2,8 @@
   $border-color,
   $bg-main,
   $bg-secondary,
-  $highlight: $info_subtle
+  $highlight: #E5EEFA,
+  $highlight-dark: #202850,
 ) {
   border-radius: 4px;
   box-shadow: 1px 0 0 0px $border-color, -1px 0 0 0px $border-color;
@@ -95,4 +96,18 @@
       box-shadow: none !important;
     }
   }
+
+  &.dark {
+    .bg-row-selection {
+      td:first-child,
+      .sticky-left {
+        background-color: $highlight-dark;
+      }
+    }
+    .virtualized-table-row {
+      &.bg-row-selection td:first-child {
+        background-color: $highlight-dark;
+      }
+    }
+  }
 }

data/app/pb_kits/playbook/pb_advanced_table/table_action_bar.html.erb

@@ -8,7 +8,7 @@
 }) do %>
   <%= pb_rails("flex", props: { align_items: "center", justify: "between" }) do %>
     <%= pb_rails("caption", props: { color: "light", padding_left: "xs", size: "xs" }) do %>
-      <span class="selected-count"><%= object.selected_count %> Selected</span>
+      <span class="selected-count"></span>
     <% end %>
     <%= pb_rails("flex/flex_item") do %>
       <%= pb_rails("flex") do %>

data/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb

@@ -7,7 +7,7 @@
       <% header_row.each_with_index do |cell, cell_index| %>
         <% header_id = cell[:accessor].present? ? cell[:accessor] : "header_#{row_index}_#{cell_index}" %>
         <%= pb_rails("table/table_header", props: { id: header_id, colspan: cell[:colspan], classname: [object.th_classname(is_first_column: cell_index.zero?), ('last-header-cell' if cell[:is_last_in_group] && cell_index != 0)].compact.join(' '), sort_menu: cell[:accessor] ? cell[:sort_menu] : nil }) do %>
-          <%= pb_rails("flex", props: { align: "center", justify: cell_index.zero? ? "start" : row_index === header_rows.size - 1 ? "end" : "center", text_align: "end" }) do %>
+          <%= pb_rails("flex", props: { align: "center", justify: cell_index.zero? ? "start" : row_index === header_rows.size - 1 ? "end" : "center", text_align: (cell[:header_alignment] || "end") }) do %>
             <% if cell_index.zero? && row_index === header_rows.size - 1 %>
               <% if object.selectable_rows && object.enable_toggle_expansion != "none" %>
                 <%= pb_rails("flex/flex_item", props: { padding_right: "xs" }) do %>

data/app/pb_kits/playbook/pb_advanced_table/table_header.rb

@@ -98,6 +98,9 @@ module Playbook
 
             process_columns(col[:columns], rows, current_depth + 1, max_depth)
           else
+            raw_styling       = col[:column_styling] || {}
+            header_alignment  = raw_styling[:header_alignment]
+
             colspan = 1
             rows[current_depth] << {
               label: col[:label],
@@ -105,6 +108,7 @@ module Playbook
               accessor: col[:accessor],
               sort_menu: col[:sort_menu],
               is_last_in_group: is_last && current_depth.positive?,
+              header_alignment: header_alignment,
             }
           end
         end
@@ -137,6 +141,7 @@ module Playbook
           accessor: col[:accessor],
           label: col[:label] || "",
           sort_menu: col[:sort_menu] || nil,
+          column_styling: col[:column_styling] || {},
         }
         (max_depth - 1).times do
           wrapped = { label: "", columns: [wrapped] }

data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb

@@ -6,7 +6,7 @@
     <% object.column_definitions.each_with_index do |column, index| %>
         <% next unless column[:accessor].present? %>
         <%= pb_rails("table/table_cell", props: { classname:object.td_classname(column, index)}) do %>
-            <%= pb_rails("flex", props:{ align: "center", justify: index.zero? ? "start" : "end", classname: object.loading ? "loading-cell" : "" }) do %>
+            <%= pb_rails("flex", props:{ align: "center", justify: object.justify_for(column, index), classname: object.loading ? "loading-cell" : "" }) do %>
                 <% if collapsible_trail && index.zero? %>
                     <% (1..depth).each do |i| %>
                         <% additional_offset = i > 1 ? (i - 1) * 0.25 : 0 %>
@@ -34,7 +34,7 @@
                                 </button>
                             <% end %>
                         <% end %>
-                        <%= pb_rails("flex/flex_item", props:{padding_left: index.zero? && (object.row[:children].present? || has_integrated_checkbox) ? "none" : "xs"}) do %>       
+                        <%= pb_rails("flex/flex_item") do %>       
                             <% if column[:custom_renderer].present? %>
                                 <%= raw(column[:custom_renderer].call(object.row, custom_renderer_value(column, index))) %>
                             <% elsif index.zero? %>

data/app/pb_kits/playbook/pb_advanced_table/table_row.rb

@@ -80,6 +80,20 @@ module Playbook
         end
       end
 
+      def justify_for(column, index)
+        if index.zero?
+          "start"
+        else
+          case cell_alignment_for(column)
+          when "left"   then "start"
+          when "center" then "center"
+          when "right"  then "end"
+          else
+            "end"
+          end
+        end
+      end
+
     private
 
       def custom_renderer_value(column, index)
@@ -103,6 +117,25 @@ module Playbook
       def subrow_depth_classname
         depth.positive? ? "depth-sub-row-#{depth}" : ""
       end
+
+      def find_column_def_by_accessor(defs, target_accessor)
+        defs.each do |col|
+          return col if col[:accessor] == target_accessor
+
+          if col[:columns].is_a?(Array)
+            found = find_column_def_by_accessor(col[:columns], target_accessor)
+            return found if found
+          end
+        end
+        nil
+      end
+
+      def cell_alignment_for(column)
+        return nil unless column[:accessor]
+
+        orig_def = find_column_def_by_accessor(column_definitions, column[:accessor])
+        orig_def[:column_styling][:cell_alignment] if orig_def && orig_def[:column_styling].is_a?(Hash)
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_contact/contact.test.js

@@ -77,12 +77,12 @@ test('returns correct icon', () => {
 
   expect(screen.getByTestId('test-cell').querySelector('.pb_custom_icon')).toBeInTheDocument()
   expect(screen.getByTestId('test-home').querySelector('.pb_custom_icon')).toBeInTheDocument()
-  expect(screen.getByTestId('test-work').querySelector('.pb_icon_kit')).toHaveClass('fa-phone-office')
+  expect(screen.getByTestId('test-work').querySelector('.pb_custom_icon')).toBeInTheDocument()
   expect(screen.getByTestId('test-work-cell').querySelector('.pb_custom_icon')).toBeInTheDocument()
   expect(screen.getByTestId('test-email').querySelector('.pb_custom_icon')).toBeInTheDocument()
   expect(screen.getByTestId('test-wrong-phone').querySelector('.pb_custom_icon')).toBeInTheDocument()
   expect(screen.getByTestId('test-wrong-type').querySelector('.pb_custom_icon')).toBeInTheDocument()
-  expect(screen.getByTestId('test-extension').querySelector('.pb_icon_kit')).toHaveClass('fa-phone-plus')
+  expect(screen.getByTestId('test-extension').querySelector('.pb_custom_icon')).toBeInTheDocument()
   expect(screen.getByTestId('test-empty').querySelector('.pb_custom_icon')).toBeInTheDocument()
 })
 

data/app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.ts

@@ -3,8 +3,6 @@ import typography from '../tokens/exports/_typography.module.scss'
 
 import { ThemeProps } from './themeTypes'
 
-import { PlotTreemapOptions } from "highcharts";
-
 const highchartsDarkTheme: ThemeProps = {
   lang: {
     thousandsSep: ',',
@@ -166,43 +164,7 @@ const highchartsDarkTheme: ThemeProps = {
       marker: {
         lineColor: colors.border_dark,
       },
-    },
-
-    //TREEMAP CHART STYLES
-    treemap: {
-      layoutAlgorithm: "squarified",
-      allowTraversingTree: false,
-      animationLimit: 1000,
-      colors: [
-        colors.data_1,
-        colors.data_2,
-        colors.data_3,
-        colors.data_4,
-        colors.data_5,
-        colors.data_6,
-        colors.data_7,
-        colors.data_8,
-      ],
-      dataLabels: {
-        enabled: true,
-        style: {
-          fontFamily: typography.font_family_base,
-          fontWeight: typography.bold,
-          fontSize: typography.heading_4,
-        },
-      },
-      levels: [
-        {
-          level: 1,
-          dataLabels: {
-            enabled: false,
-          },
-        },
-      ],
-      traverseUpButton: {
-        position: { y: -50 },
-      },
-    } as PlotTreemapOptions,
+    }
   },
   credits: {
     enabled: false

data/app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.ts

@@ -3,8 +3,6 @@ import typography from '../tokens/exports/_typography.module.scss'
 
 import { ThemeProps } from './themeTypes'
 
-import { PlotTreemapOptions } from "highcharts";
-
 const highchartsTheme: ThemeProps = {
   lang: {
     thousandsSep: ',',
@@ -165,43 +163,7 @@ const highchartsTheme: ThemeProps = {
       marker: {
         lineColor: '#333',
       },
-    },
-
-    //TREEMAP CHART STYLES
-    treemap: {
-      layoutAlgorithm: "squarified",
-      allowTraversingTree: false,
-      animationLimit: 1000,
-      colors: [
-        colors.data_1,
-        colors.data_2,
-        colors.data_3,
-        colors.data_4,
-        colors.data_5,
-        colors.data_6,
-        colors.data_7,
-        colors.data_8,
-      ],
-      dataLabels: {
-        enabled: true,
-        style: {
-          fontFamily: typography.font_family_base,
-          fontWeight: typography.bold,
-          fontSize: typography.heading_4,
-        },
-      },
-      levels: [
-        {
-          level: 1,
-          dataLabels: {
-            enabled: false,
-          },
-        },
-      ],
-      traverseUpButton: {
-        position: { y: -50 },
-      },
-    } as PlotTreemapOptions,
+    }
   },
   credits: {
     enabled: false