@dynatrace/strato-components 3.5.2 → 3.6.0

package/charts/tree-map/hooks/useTreeMapCustomTooltip.js

@@ -0,0 +1,25 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var useTreeMapCustomTooltip_exports = {};
+__export(useTreeMapCustomTooltip_exports, {
+  useTreeMapCustomTooltip: () => useTreeMapCustomTooltip
+});
+module.exports = __toCommonJS(useTreeMapCustomTooltip_exports);
+var import_react = require("react");
+var import_TreeMapCustomTooltipContext = require("../contexts/TreeMapCustomTooltipContext.js");
+const useTreeMapCustomTooltip = () => (0, import_react.useContext)(import_TreeMapCustomTooltipContext.TreeMapCustomTooltipContext);

package/charts/tree-map/providers/TreeMapChartProviders.d.ts

@@ -8,6 +8,7 @@ import type { LegendProps } from '../../core/types/legend.js';
 import type { SeriesActionsTemplate } from '../../core/types/series-actions-template.js';
 import type { ChartToolbarConfig } from '../../core/types/toolbar.js';
 import type { TreeMapFormatter } from '../types/internal.js';
+import type { TreeMapCustomTooltipConfig } from '../types/treemap-chart.config.js';
 import type { LabelsDisplay, NameAccessor, TreeMapData, TreeMapLeafNode } from '../types/treemap.js';
 interface TreeMapChartProvidersProps extends PropsWithChildren {
     data: TreeMapData;
@@ -23,6 +24,7 @@ interface TreeMapChartProvidersProps extends PropsWithChildren {
     max?: 'data-max' | number;
     colorRules?: ColorRuleProps[];
     unit?: string | Unit;
+    tooltip?: TreeMapCustomTooltipConfig;
 }
 export declare const TreeMapChartProviders: {
     (props: TreeMapChartProvidersProps): import("react/jsx-runtime").JSX.Element;

package/charts/tree-map/providers/TreeMapChartProviders.js

@@ -33,6 +33,7 @@ var import_MinMaxConfigContext = require("../context/MinMaxConfigContext.js");
 var import_NameAccessorContext = require("../context/NameAccessorContext.js");
 var import_ToolbarContext = require("../context/ToolbarContext.js");
 var import_TreeMapRawDataContext = require("../context/TreeMapRawDataContext.js");
+var import_TreeMapCustomTooltipContext = require("../contexts/TreeMapCustomTooltipContext.js");
 const TreeMapChartProviders = (props) => {
   const {
     data,
@@ -48,7 +49,8 @@ const TreeMapChartProviders = (props) => {
     max: configMax,
     children,
     colorRules = [],
-    unit
+    unit,
+    tooltip
   } = props;
   const min = configMin === "data-min" ? void 0 : configMin;
   const max = configMax === "data-max" ? void 0 : configMax;
@@ -71,7 +73,13 @@ const TreeMapChartProviders = (props) => {
             formatter,
             truncationMode
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ColorPaletteContext.ColorPaletteContext.Provider, { value: colorPalette, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ChartLegendContext.ChartLegendContext.Provider, { value: legend, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_NameAccessorContext.NameAccessorContext.Provider, { value: nameAccessor, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ToolbarContext.ToolbarContext.Provider, { value: toolbar, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_LabelsDisplayContext.LabelsDisplayContext.Provider, { value: labelsDisplay, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MinMaxConfigContext.MinMaxConfigContext.Provider, { value: { min, max }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_StoreProvider.StoreProvider, { children }) }) }) }) }) }) })
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ColorPaletteContext.ColorPaletteContext.Provider, { value: colorPalette, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ChartLegendContext.ChartLegendContext.Provider, { value: legend, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_NameAccessorContext.NameAccessorContext.Provider, { value: nameAccessor, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ToolbarContext.ToolbarContext.Provider, { value: toolbar, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_LabelsDisplayContext.LabelsDisplayContext.Provider, { value: labelsDisplay, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MinMaxConfigContext.MinMaxConfigContext.Provider, { value: { min, max }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_TreeMapCustomTooltipContext.TreeMapCustomTooltipContext.Provider,
+            {
+              value: tooltip ?? import_TreeMapCustomTooltipContext.DEFAULT_CUSTOM_TOOLTIP_CONFIG,
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_StoreProvider.StoreProvider, { children })
+            }
+          ) }) }) }) }) }) })
         }
       )
     }

package/charts/tree-map/slots/Tooltip.d.ts

@@ -1,4 +1,5 @@
+import type { TreeMapCustomTooltipProps } from '../types/treemap-chart.config.js';
 export declare const Tooltip: {
-    (): null;
+    (props: TreeMapCustomTooltipProps): null;
     displayName: string;
 };

package/charts/tree-map/slots/Tooltip.js

@@ -20,5 +20,5 @@ __export(Tooltip_exports, {
   Tooltip: () => Tooltip
 });
 module.exports = __toCommonJS(Tooltip_exports);
-const Tooltip = () => null;
+const Tooltip = (props) => null;
 Tooltip["displayName"] = "TreeMap.Tooltip";

package/charts/tree-map/types/canvas.d.ts

@@ -4,4 +4,4 @@ export interface BorderDetails {
     enabled: boolean;
     color?: string;
 }
-export type LabelOptions = 'multi' | 'inline' | 'name' | 'fallback' | 'ellipsis';
+export type LabelOptions = 'multi' | 'inline' | 'name' | 'fallback' | 'ellipsis' | 'ellipsis-with-value';

package/charts/tree-map/types/treemap-chart.config.d.ts

@@ -62,11 +62,42 @@ export interface TreeMapContextConfig {
      * Color rules to apply to the treemap nodes
      */
     colorRules?: ColorRuleProps[];
+    /**
+     * Tooltip configuration for the treemap chart
+     */
+    tooltip?: TreeMapCustomTooltipConfig;
 }
+/**
+ * @public
+ */
+export type TreeMapCustomTooltipConfig = {
+    hidden?: boolean;
+    template?: TreeMapCustomTooltipProps['children'];
+};
 /**
  * @internal
  */
-export type FilteredTreeMapContextConfig = Omit<TreeMapContextConfig, 'toolbar' | 'nameAccessor' | 'min' | 'max' | 'colorRules'>;
+export type FilteredTreeMapContextConfig = Omit<TreeMapContextConfig, 'toolbar' | 'nameAccessor' | 'min' | 'max' | 'colorRules' | 'tooltip'>;
+/**
+ * Data passed to a custom TreeMap tooltip render function.
+ * @public
+ */
+export interface TreeMapTooltipPayload {
+    /** Node names from root down to the current node (invisible root excluded). */
+    hierarchyPath: string[];
+    /** Raw numeric value of the node. */
+    value: number;
+    /** Names of direct child nodes. Undefined for leaf nodes. */
+    childrenCount?: string[];
+}
+/**
+ * @public
+ */
+export interface TreeMapCustomTooltipProps {
+    hidden?: boolean;
+    symbolAlignment?: 'left' | 'right';
+    children?: (payload: TreeMapTooltipPayload) => ReactNode;
+}
 /**
  * @internal
  */
@@ -76,6 +107,7 @@ export type TreeMapConfig = Required<FilteredTreeMapContextConfig> & {
     min?: 'data-min' | number;
     max?: 'data-max' | number;
     colorRules?: ColorRuleProps[];
+    tooltip?: TreeMapCustomTooltipConfig;
 };
 /**
  * @public
@@ -86,11 +118,11 @@ export type TreemapChartLegendConfig = LegendProps;
  */
 export interface TreeMapChartSlots {
     legend: Partial<TreemapChartLegendConfig>;
-    tooltip: Partial<boolean>;
     toolbar: Partial<InternalChartToolbarConfigured> | undefined;
     emptyState?: ReactNode;
     errorState?: ReactNode;
     colorRules?: ColorRuleProps[];
+    tooltip?: TreeMapCustomTooltipConfig;
 }
 /**
  * @public

package/charts/tree-map/utils/build-overlay-tooltip-data.js

@@ -25,10 +25,12 @@ const buildOverlayTooltipData = (node, formatter, unit) => {
   const item = (0, import_get_tooltip_item.getTooltipItem)(formatter, node, unit);
   const parentName = node.parent?.data.name;
   const nodeColor = node.parent?.data.color?.Default ?? node.data?.color?.Default ?? "";
+  const path = [...node.ancestors()].reverse().slice(1).map((n) => n.data.name);
+  const children = node.children?.map((c) => c.data.name);
   return {
     geometry: "treemap",
     header1: parentName ? [parentName] : [],
-    metadata: { id: item.id, value: node.data.value },
+    metadata: { id: item.id, value: node.data.value, path, children },
     series: [
       {
         name: item.name,

package/charts/tree-map/utils/build-tree-map-chart-config.js

@@ -68,6 +68,7 @@ const buildTreeMapChartConfig = (props, config, slots) => {
     nameAccessor,
     min,
     max,
-    colorRules
+    colorRules,
+    tooltip: slots.tooltip ?? config.tooltip
   };
 };

package/charts/tree-map/utils/iterate-slots.js

@@ -50,14 +50,20 @@ const iterateChartToolbarSlots = (children) => {
 function iterateSlots(children) {
   let slots = {
     legend: {},
-    tooltip: false,
+    tooltip: void 0,
     toolbar: void 0,
     colorRules: []
   };
   let intents;
   import_react.Children.map(children, (child) => {
     if ((0, import_is_slot.isSlot)(child, import_Tooltip.Tooltip)) {
-      slots = { ...slots, tooltip: true };
+      slots = {
+        ...slots,
+        tooltip: {
+          hidden: child.props?.hidden ?? false,
+          template: child.props?.children
+        }
+      };
     } else if ((0, import_is_slot.isSlot)(child, import_TreeMapChartLegend.Legend)) {
       const legend = child.props;
       slots = { ...slots, legend };

package/charts/xy-chart/XYChart.js

@@ -29,6 +29,7 @@ var import_XYChartBottomAxisArea = require("./components/axes/XYChartBottomAxisA
 var import_XYChartLeftAxisArea = require("./components/axes/XYChartLeftAxisArea.js");
 var import_XYChartRightAxisArea = require("./components/axes/XYChartRightAxisArea.js");
 var import_XYChartTopAxisArea = require("./components/axes/XYChartTopAxisArea.js");
+var import_BarLabelLayout = require("./components/displays/BarDisplay/BarLabelLayout.js");
 var import_XYChartGridLayout = require("./components/layout/XYChartGridLayout.js");
 var import_XYChartOverlay = require("./components/overlay/XYChartOverlay.js");
 var import_XYChartThresholdArea = require("./components/thresholds/XYChartThresholdArea.js");
@@ -121,6 +122,7 @@ const XYChart = (0, import_react.forwardRef)(
                   /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ChartGridRoot.ChartGrid.PlotArea, { children: [
                     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartGridLayout.XYChartGridLayout, {}),
                     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartLayout.XYChartLayout, {}),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_BarLabelLayout.BarLabelLayout, {}),
                     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartAxisBorder.XYChartAxisBorder, {}),
                     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartAnnotationsIndicators.XYChartAnnotationsIndicators, {}),
                     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(

package/charts/xy-chart/XYChartRoot.d.ts

@@ -62,10 +62,7 @@ export declare const XYChart: ((props: XYChartProps & {
         displayName: string;
     };
     Tooltip: {
-        (props: {
-            hidden?: boolean;
-            children?: (tooltipPayload: import("./types/xy-chart.js").XYChartTooltipPayload) => import("react").ReactNode;
-        }): null;
+        (props: import("./types/xy-chart-props.js").XYChartTooltipProps): null;
         displayName: string;
     };
     Intent: {

package/charts/xy-chart/XYChartRoot.js

@@ -29,6 +29,7 @@ var import_defaults = require("./constants/defaults.js");
 var import_XYChartAxesConfig_context = require("./context/axes/XYChartAxesConfig.context.js");
 var import_XYChartAnnotationsConfig_context = require("./context/XYChartAnnotationsConfig.context.js");
 var import_XYChartColorPalette_context = require("./context/XYChartColorPalette.context.js");
+var import_XYChartLegendHidden_context = require("./context/XYChartLegendHidden.context.js");
 var import_XYChartThresholds_context = require("./context/XYChartThresholds.context.js");
 var import_XYChartToolbar_context = require("./context/XYChartToolbar.context.js");
 var import_XYChartTruncationMode_context = require("./context/XYChartTruncationMode.context.js");
@@ -119,49 +120,64 @@ const XYChartRoot = /* @__PURE__ */ (0, import_react.forwardRef)((props, ref) =>
         import_XYChartTruncationMode_context.XYChartTruncationModeContext.Provider,
         {
           value: { truncationMode: config.truncationMode },
-          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartAnnotationsConfig_context.XYChartAnnotationsConfig.Provider, { value: config.annotations, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ColorRuleContext.ColorRuleContext.Provider, { value: config.colorRules, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartStoreProvider.XYChartStoreProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_XYChartDataProvider.XYChartChartDataProvider,
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_XYChartLegendHidden_context.XYChartLegendHiddenContext.Provider,
             {
-              data,
-              seriesVariantsProps: internalConfig.series,
-              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartStoreDomainSync.XYChartStoreDomainSync, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartAnnotationsDataProvider.XYChartAnnotationsDataProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartVisibleAxesProvider.XYChartVisibleAxesProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartColorScalesProvider.XYChartColorScalesProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartAnnotationsShownIndicatorsProvider.XYChartAnnotationsShownIndicatorsProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_OverlayContext.OverlayProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TooltipContext.TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-                import_ChartLayout.ChartLayout,
+              value: Boolean(legendHidden),
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_XYChartAnnotationsConfig_context.XYChartAnnotationsConfig.Provider,
                 {
-                  ref: chartLayoutRef,
-                  chartHeight,
-                  chartWidth: width,
-                  className,
-                  emptyState,
-                  errorState,
-                  isEmpty: (0, import_is_empty_data.isEmptyData)(children, data),
-                  showLoader: loading,
-                  style,
-                  "data-dtrum-mask": dataDtrumMask,
-                  "data-dtrum-allow": dataDtrumAllow,
-                  ...behaviorTrackingProps,
-                  "data-dt-component": COMPONENT_NAME_BEHAVIOURAL_TRACKING,
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ChartLayout.ChartLayout.Graph, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                      import_XYChart.XYChart,
-                      {
-                        config,
-                        ref: rootRef
-                      }
-                    ) }),
-                    !legendHidden && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                      import_ChartLayout.ChartLayout.Legend,
-                      {
-                        position: legendPosition,
-                        initialRatio: legendRatio,
-                        onResize: onRatioChange,
-                        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartLegend.XYChartLegend, {})
-                      }
-                    )
-                  ]
+                  value: config.annotations,
+                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ColorRuleContext.ColorRuleContext.Provider, { value: config.colorRules, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartStoreProvider.XYChartStoreProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_XYChartDataProvider.XYChartChartDataProvider,
+                    {
+                      data,
+                      seriesVariantsProps: internalConfig.series,
+                      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartStoreDomainSync.XYChartStoreDomainSync, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartAnnotationsDataProvider.XYChartAnnotationsDataProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartVisibleAxesProvider.XYChartVisibleAxesProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartColorScalesProvider.XYChartColorScalesProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartAnnotationsShownIndicatorsProvider.XYChartAnnotationsShownIndicatorsProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_OverlayContext.OverlayProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TooltipContext.TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                        import_ChartLayout.ChartLayout,
+                        {
+                          ref: chartLayoutRef,
+                          chartHeight,
+                          chartWidth: width,
+                          className,
+                          emptyState,
+                          errorState,
+                          isEmpty: (0, import_is_empty_data.isEmptyData)(
+                            children,
+                            data
+                          ),
+                          showLoader: loading,
+                          style,
+                          "data-dtrum-mask": dataDtrumMask,
+                          "data-dtrum-allow": dataDtrumAllow,
+                          ...behaviorTrackingProps,
+                          "data-dt-component": COMPONENT_NAME_BEHAVIOURAL_TRACKING,
+                          children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ChartLayout.ChartLayout.Graph, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                              import_XYChart.XYChart,
+                              {
+                                config,
+                                ref: rootRef
+                              }
+                            ) }),
+                            !legendHidden && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                              import_ChartLayout.ChartLayout.Legend,
+                              {
+                                position: legendPosition,
+                                initialRatio: legendRatio,
+                                onResize: onRatioChange,
+                                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartLegend.XYChartLegend, {})
+                              }
+                            )
+                          ]
+                        }
+                      ) }) }) }) }) }) }) })
+                    }
+                  ) }) })
                 }
-              ) }) }) }) }) }) }) })
+              )
             }
-          ) }) }) })
+          )
         }
       ) })
     }

package/charts/xy-chart/components/axes/AxisArea.css

@@ -1,3 +1,3 @@
-._bidc430-3-5-2 {
+._bidc430-3-6-0 {
   position: relative;
 }

package/charts/xy-chart/components/axes/AxisArea.sty.js

@@ -21,4 +21,4 @@ __export(AxisArea_css_exports, {
 });
 module.exports = __toCommonJS(AxisArea_css_exports);
 var import_AxisArea_css_ts_vanilla = require("./AxisArea.css");
-var axisContainerStyle = "_bidc430-3-5-2";
+var axisContainerStyle = "_bidc430-3-6-0";

package/charts/xy-chart/components/axes/AxisTickWithTruncation.css

@@ -1,8 +1,8 @@
-._z2zz8y2-3-5-2 {
-  direction: var(--_z2zz8y0-3-5-2);
+._z2zz8y2-3-6-0 {
+  direction: var(--_z2zz8y0-3-6-0);
   display: inline-block;
   overflow: hidden;
   text-overflow: ellipsis;
   text-wrap: nowrap;
-  width: var(--_z2zz8y1-3-5-2);
+  width: var(--_z2zz8y1-3-6-0);
 }

package/charts/xy-chart/components/axes/AxisTickWithTruncation.sty.js

@@ -23,6 +23,6 @@ __export(AxisTickWithTruncation_css_exports, {
 });
 module.exports = __toCommonJS(AxisTickWithTruncation_css_exports);
 var import_AxisTickWithTruncation_css_ts_vanilla = require("./AxisTickWithTruncation.css");
-var directionValue = "var(--_z2zz8y0-3-5-2)";
-var tickStyle = "_z2zz8y2-3-5-2";
-var widthContainer = "var(--_z2zz8y1-3-5-2)";
+var directionValue = "var(--_z2zz8y0-3-6-0)";
+var tickStyle = "_z2zz8y2-3-6-0";
+var widthContainer = "var(--_z2zz8y1-3-6-0)";

package/charts/xy-chart/components/axes/XYChartBottomAxisArea.js

@@ -35,6 +35,7 @@ var import_react = require("@use-gesture/react");
 var import_clsx = __toESM(require("clsx"));
 var import_react2 = require("react");
 var import_AxisArea_css = require("./AxisArea.sty.js");
+var import_compute_collision_aware_max_space = require("./utils/compute-collision-aware-max-space.js");
 var import_is_axis_pannable = require("./utils/is-axis-pannable.js");
 var import_XTickWithTruncation = require("./XTickWithTruncation.js");
 var import_XYChartPanningControls = require("./XYChartPanningControls.js");
@@ -64,7 +65,14 @@ function XYChartBottomAxisArea() {
   const canPan = (0, import_is_axis_pannable.isAxisPannable)(bottomConfig, scales);
   const tickFormat = (_, index) => bottomTicks.formattedTicks[index];
   const isCategoricalAxis = bottomConfig?.type ? (0, import_guards.isCategorical)(bottomConfig.type) : false;
-  const tickLabelProps = isCategoricalAxis ? (0, import_get_tick_label_props.getTickLabelPropsForCategoryAxis)("bottom", bottomConfig?.tickLabelLayout) : (0, import_get_tick_label_props.getTickLabelPropsForValueAxis)("bottom", bottomConfig?.tickLabelLayout);
+  const isTickRotated = bottomConfig?.tickLabelLayout === "vertical";
+  const tickLabelProps = (0, import_get_tick_label_props.getXAxisTickLabelProps)(
+    "bottom",
+    isCategoricalAxis,
+    isTickRotated,
+    bottomScale,
+    bottomConfig?.tickLabelLayout
+  );
   const areCategoricalTicksNotFittable = bottomScale && isCategoricalAxis && !(0, import_is_tick_label_visible.isTickLabelSpaceAvailable)(bottomScale.step());
   const handlePan = (0, import_useApplyPanDelta.useApplyPanDelta)();
   (0, import_react.useGesture)(
@@ -79,69 +87,79 @@ function XYChartBottomAxisArea() {
     }
   );
   const hideAxis = bottomConfig === void 0 || areCategoricalTicksNotFittable || bottomScale === void 0;
-  const isTickRotated = bottomConfig?.tickLabelLayout === "vertical";
   const tickNameHasEmoji = bottomTicks.ticks.some(
     (name) => import_constants.EMOJI_REGEX.test(name)
   );
-  return hideAxis ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ChartGridRoot.ChartGrid.GridArea, { gridArea: import_grid_templates.AREAS.bottomAxis, children: ({ availableWidth, availableHeight }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    "div",
-    {
-      className: (0, import_clsx.default)(
-        (0, import_ZoomCursors_css.cursorStyle)({ isPanEnabled: canPan }),
-        import_AxisArea_css.axisContainerStyle
+  return hideAxis ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ChartGridRoot.ChartGrid.GridArea, { gridArea: import_grid_templates.AREAS.bottomAxis, children: ({ availableWidth, availableHeight }) => {
+    const maxSpaceForTruncation = (0, import_compute_collision_aware_max_space.computeCollisionAwareMaxSpace)(
+      (0, import_calculate_axis_size.getXTickMaxSize)(
+        availableHeight,
+        availableWidth,
+        isTickRotated,
+        bottomScale,
+        bottomConfig.label,
+        bottomTicks.ticks.length
       ),
-      ref: axisRef,
-      children: [
-        canPan && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_XYChartPanningControls.XYChartPanningControls,
-          {
-            visibleAxis: bottomConfig,
-            onClickPan: (delta) => handlePan(-delta)
-          }
+      bottomTicks.formattedTicks,
+      bottomTicks.ticks,
+      bottomScale,
+      isCategoricalAxis,
+      isTickRotated
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        className: (0, import_clsx.default)(
+          (0, import_ZoomCursors_css.cursorStyle)({ isPanEnabled: canPan }),
+          import_AxisArea_css.axisContainerStyle
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_DivAxisWrapper.DivAxisWrapper,
-          {
-            divAxisStyle: import_constants.axisFontProps,
-            ticks: bottomTicks.formattedTicks,
-            label: bottomConfig.label,
-            isTickVertical: true,
-            isTickRotated,
-            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              import_AxisBottom.AxisBottom,
-              {
-                role: "group",
-                "aria-label": import_defaults.XY_CHART_BOTTOM_AXIS_LABEL,
-                scale: bottomScale,
-                containerSize: availableWidth,
-                height: availableHeight,
-                tickValues: bottomTicks.ticks,
-                tickLabelProps,
-                tickFormat,
-                label: bottomConfig.label,
-                tickComponent: (renderProps) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  import_XTickWithTruncation.XTickWithTruncation,
-                  {
-                    renderProps,
-                    maxSpaceForTruncation: (0, import_calculate_axis_size.getXTickMaxSize)(
-                      availableHeight,
-                      availableWidth,
+        ref: axisRef,
+        children: [
+          canPan && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_XYChartPanningControls.XYChartPanningControls,
+            {
+              visibleAxis: bottomConfig,
+              onClickPan: (delta) => handlePan(-delta)
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_DivAxisWrapper.DivAxisWrapper,
+            {
+              divAxisStyle: import_constants.axisFontProps,
+              ticks: bottomTicks.formattedTicks,
+              label: bottomConfig.label,
+              isTickVertical: true,
+              isTickRotated,
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_AxisBottom.AxisBottom,
+                {
+                  role: "group",
+                  "aria-label": import_defaults.XY_CHART_BOTTOM_AXIS_LABEL,
+                  scale: bottomScale,
+                  containerSize: availableWidth,
+                  height: availableHeight,
+                  tickValues: bottomTicks.ticks,
+                  tickLabelProps,
+                  tickFormat,
+                  label: bottomConfig.label,
+                  tickComponent: (renderProps) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_XTickWithTruncation.XTickWithTruncation,
+                    {
+                      renderProps,
+                      maxSpaceForTruncation,
+                      centerTick: isCategoricalAxis,
                       isTickRotated,
-                      bottomScale,
-                      bottomConfig.label
-                    ),
-                    centerTick: isCategoricalAxis,
-                    isTickRotated,
-                    position: "bottom",
-                    tickNameHasEmoji
-                  }
-                )
-              }
-            )
-          }
-        )
-      ]
-    }
-  ) });
+                      position: "bottom",
+                      tickNameHasEmoji
+                    }
+                  )
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+  } });
 }
 XYChartBottomAxisArea["displayName"] = "XYChartValueBottomAxisArea";