@dynatrace/strato-components 3.5.0 → 3.6.0

package/charts/core/components/annotations/components/tooltip/AnnotationsDefaultTooltipContent.js

@@ -0,0 +1,145 @@
+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 AnnotationsDefaultTooltipContent_exports = {};
+__export(AnnotationsDefaultTooltipContent_exports, {
+  AnnotationsDefaultTooltipContent: () => AnnotationsDefaultTooltipContent
+});
+module.exports = __toCommonJS(AnnotationsDefaultTooltipContent_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_react_intl = require("react-intl");
+var import_units = require("@dynatrace-sdk/units");
+var import_useAnnotationsTooltipFormatter = require("./hooks/useAnnotationsTooltipFormatter.js");
+var import_get_symbol = require("./utils/get-symbol.js");
+var import_Divider = require("../../../../../../layouts/divider/Divider.js");
+var import_Footer = require("../../../overlay-tooltip/components/Footer.js");
+var import_Header = require("../../../overlay-tooltip/components/header/Header.js");
+var import_SeriesItem = require("../../../overlay-tooltip/components/series/SeriesItem.js");
+var import_ExternalConfigContext = require("../../../overlay-tooltip/contexts/ExternalConfigContext.js");
+var import_messages = require("../../../overlay-tooltip/messages.js");
+var import_selectors = require("../../../overlay-tooltip/selectors.js");
+var import_tooltip_css = require("../../../overlay-tooltip/tooltip.sty.js");
+var import_useAnnotationsActions = require("../../hooks/useAnnotationsActions.js");
+var import_serialize_marker_range = require("../../utils/serialize-marker-range.js");
+const BASE_ACTIONS_CONFIG = /* @__PURE__ */ new Map([
+  ["name", { field: "valueLabel" }]
+]);
+const buildExternalConfig = (truncationMode) => ({
+  seriesHeader: null,
+  displayHeaderDivider: false,
+  symbolPosition: "left",
+  truncationMode,
+  defaultActionsConfig: BASE_ACTIONS_CONFIG,
+  variant: "single"
+});
+const X_VALUE_LABEL = "X-value";
+const AnnotationsDefaultTooltipContent = (props) => {
+  const { data, tooltipType, truncationMode, maxLines } = props;
+  const formatter = (0, import_useAnnotationsTooltipFormatter.useAnnotationsTooltipFormatter)();
+  const annotationsActions = (0, import_useAnnotationsActions.useAnnotationsActions)();
+  const config = buildExternalConfig(truncationMode);
+  const intl = (0, import_react_intl.useIntl)();
+  const unpinnedPlaceholderText = intl.formatMessage(
+    import_messages.OVERLAY_TOOLTIP_MESSAGES.unpinnedPlaceholderMessage
+  );
+  const pinned = (0, import_selectors.useSelector)((state) => state.pinned);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ExternalConfigContext.ExternalConfigContext.Provider, { value: config, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_tooltip_css.annotationsGroupsScrollContainer, children: data.map((annotationGroup, groupIndex) => {
+      const [from, to] = (0, import_serialize_marker_range.deserializeMarkerRange)(annotationGroup.key);
+      const isRange = to > from;
+      let header1;
+      let showRangeDuration = false;
+      let duration;
+      if (tooltipType === "numerical" && isRange) {
+        header1 = [formatter(from), formatter(to)];
+        duration = String(Math.abs(to - from));
+      } else if (tooltipType === "numerical") {
+        header1 = formatter(from);
+      } else if (isRange) {
+        header1 = [new Date(from), new Date(to)];
+        showRangeDuration = true;
+      } else {
+        header1 = (0, import_units.formatDate)(new Date(from), {
+          day: "2-digit",
+          month: "short",
+          year: "numeric",
+          hour: "2-digit",
+          minute: "2-digit"
+        });
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.Fragment, { children: [
+        groupIndex > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Divider.Divider, { orientation: "horizontal", className: import_tooltip_css.divider }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_Header.Header,
+          {
+            header1,
+            label: X_VALUE_LABEL,
+            showRangeDuration1: showRangeDuration,
+            duration1: duration,
+            maxLines
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_tooltip_css.seriesGridContainer, children: annotationGroup.markers.map((marker) => {
+          const icon = (0, import_get_symbol.getSymbol)(marker);
+          const {
+            id,
+            symbol,
+            title: markerTitle,
+            description: markerDescription,
+            start,
+            end,
+            color,
+            priority,
+            hidden: markerHidden,
+            ...extraFields
+          } = marker;
+          const payload = {
+            ...extraFields,
+            start,
+            end,
+            title: markerTitle,
+            description: markerDescription,
+            symbol
+          };
+          const actions = annotationsActions?.(payload);
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_SeriesItem.SeriesItem,
+            {
+              name: markerTitle ?? "",
+              description: markerDescription,
+              value: "",
+              icon,
+              multiLine: maxLines > 1,
+              maxLines,
+              actions: actions ? () => actions : void 0
+            },
+            id
+          );
+        }) })
+      ] }, annotationGroup.key);
+    }) }),
+    !pinned && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_Footer.Footer,
+      {
+        actions: [],
+        unpinnedPlaceholderText
+      }
+    )
+  ] });
+};
+AnnotationsDefaultTooltipContent.displayName = "AnnotationsDefaultTooltipContent";

package/charts/core/components/annotations/components/tooltip/AnnotationsOverlayTooltip.d.ts

@@ -0,0 +1,24 @@
+import type { TruncationMode } from '../../../../../../typography/text-ellipsis/TextEllipsis.js';
+interface AnnotationsOverlayTooltipProps {
+    tooltipType: 'time' | 'numerical';
+    truncationMode?: TruncationMode;
+    maxLines?: number;
+}
+/**
+ * AnnotationsChart tooltip driven by the shared OverlayTooltip
+ * (`TooltipProvider`) store. Bridges the legacy annotations store into the
+ * shared store so that positioning, pinning and out-of-bounds handling are
+ * identical to XYChart and MeterBar tooltips.
+ *
+ * The actual UI is rendered via `<OverlayTooltip legacyTemplate={...}/>` so
+ * we can keep AnnotationsChart's bespoke layout (multiple Header+Series pairs
+ * for collided marker groups, custom user templates, etc.) while reusing the
+ * shared portal / pin / dismissal behaviour.
+ *
+ * @internal
+ */
+export declare const AnnotationsOverlayTooltip: {
+    (props: AnnotationsOverlayTooltipProps): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};
+export {};

package/charts/core/components/annotations/components/tooltip/AnnotationsOverlayTooltip.js

@@ -0,0 +1,136 @@
+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 AnnotationsOverlayTooltip_exports = {};
+__export(AnnotationsOverlayTooltip_exports, {
+  AnnotationsOverlayTooltip: () => AnnotationsOverlayTooltip
+});
+module.exports = __toCommonJS(AnnotationsOverlayTooltip_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_AnnotationsCustomizedTooltip = require("./AnnotationsCustomizedTooltip.js");
+var import_AnnotationsDefaultTooltipContent = require("./AnnotationsDefaultTooltipContent.js");
+var import_useAnnotationsTooltipConfig = require("./hooks/useAnnotationsTooltipConfig.js");
+var import_OverlayTooltip = require("../../../overlay-tooltip/OverlayTooltip.js");
+var import_useTooltipReducer = require("../../../overlay-tooltip/useTooltipReducer.js");
+var import_utils = require("../../../overlay-tooltip/utils.js");
+var import_selectors = require("../../hooks/store/selectors.js");
+var import_state_setters = require("../../hooks/store/state-setters.js");
+var import_useMarkersInteractions = require("../../hooks/useMarkersInteractions.js");
+var import_AnnotationsDataInitialState = require("../../providers/AnnotationsDataInitialState.js");
+const buildSentinelData = () => ({
+  geometry: "rect",
+  series: [
+    {
+      name: "",
+      value: "",
+      color: ""
+    }
+  ]
+});
+const AnnotationsOverlayTooltip = (props) => {
+  const { tooltipType, truncationMode = "end", maxLines = 1 } = props;
+  const annotationsState = (0, import_selectors.useAnnotationsTooltipState)();
+  const { pinned, data, visibility, position } = annotationsState;
+  const dispatch = (0, import_useTooltipReducer.useTooltipReducer)();
+  const updateAnnotationsTooltipState = (0, import_state_setters.useSetStateTooltip)();
+  const updateAnnotationsSelectionState = (0, import_state_setters.useSetStateSelection)();
+  const onMarkersInteraction = (0, import_useMarkersInteractions.useMarkersInteractions)();
+  const config = (0, import_useAnnotationsTooltipConfig.useAnnotationsTooltipConfig)();
+  const hidden = config?.hidden === true;
+  const hasData = !!data && data.length > 0 && visibility;
+  const prevPinnedRef = (0, import_react.useRef)(false);
+  (0, import_react.useEffect)(() => {
+    const wasPinned = prevPinnedRef.current;
+    prevPinnedRef.current = pinned;
+    if (wasPinned && !pinned) {
+      dispatch({
+        type: "SET_PINNED",
+        payload: {
+          pinned: false,
+          data: (0, import_utils.emptyData)()
+        }
+      })();
+    }
+    if (hidden || !hasData || !position) {
+      dispatch({ type: "SET_OUT_BOUNDS" })();
+      return;
+    }
+    if (pinned) {
+      dispatch({
+        type: "SET_PINNED",
+        payload: {
+          pinned: true,
+          absoluteX: position.x,
+          absoluteY: position.y,
+          data: buildSentinelData()
+        }
+      })();
+    } else {
+      dispatch({
+        type: "SET_POSITION",
+        payload: {
+          absoluteX: position.x,
+          absoluteY: position.y,
+          data: buildSentinelData()
+        }
+      })();
+    }
+  }, [hidden, hasData, pinned, position?.x, position?.y]);
+  (0, import_react.useEffect)(() => {
+    return () => {
+      dispatch({ type: "RESET_TOOLTIP" })();
+      updateAnnotationsTooltipState(import_AnnotationsDataInitialState.initialState.tooltip);
+      updateAnnotationsSelectionState(import_AnnotationsDataInitialState.initialState.selection);
+      onMarkersInteraction?.(import_AnnotationsDataInitialState.initialState.selection);
+    };
+  }, []);
+  (0, import_react.useEffect)(() => {
+    const handleEscape = (event) => {
+      if (event.key !== "Escape") {
+        return;
+      }
+      updateAnnotationsTooltipState(import_AnnotationsDataInitialState.initialState.tooltip);
+      updateAnnotationsSelectionState(import_AnnotationsDataInitialState.initialState.selection);
+      onMarkersInteraction?.(import_AnnotationsDataInitialState.initialState.selection);
+    };
+    window.addEventListener("keyup", handleEscape);
+    return () => {
+      window.removeEventListener("keyup", handleEscape);
+    };
+  }, []);
+  if (hidden || !hasData) {
+    return null;
+  }
+  const legacyTemplate = config?.template ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_AnnotationsCustomizedTooltip.AnnotationsCustomizedTooltip,
+    {
+      tooltipTemplate: config.template,
+      data
+    }
+  ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_AnnotationsDefaultTooltipContent.AnnotationsDefaultTooltipContent,
+    {
+      data,
+      tooltipType,
+      truncationMode,
+      maxLines
+    }
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_OverlayTooltip.OverlayTooltip, { legacyTemplate });
+};
+AnnotationsOverlayTooltip.displayName = "AnnotationsOverlayTooltip";

package/charts/core/components/annotations/components/tooltip/types/annotations-tooltip-props.d.ts

@@ -26,7 +26,7 @@ export interface AnnotationsTooltipItem {
      */
     color: string;
     /**
-     * The maker title
+     * The marker title
      */
     title?: string;
     /**

package/charts/core/components/annotations/components/tooltip/utils/prepare-custom-tooltip-data.js

@@ -21,15 +21,8 @@ __export(prepare_custom_tooltip_data_exports, {
 });
 module.exports = __toCommonJS(prepare_custom_tooltip_data_exports);
 const extractTooltipMarkerProps = (marker) => {
-  const { start, end, color, title, description, symbol } = marker;
-  return {
-    start,
-    end,
-    color,
-    title,
-    description,
-    symbol
-  };
+  const { id: _id, priority: _priority, hidden: _hidden, ...rest } = marker;
+  return rest;
 };
 const prepareCustomTooltipData = (data, hoveredItemKey) => {
   let hoveredMarkers = [];
@@ -37,9 +30,13 @@ const prepareCustomTooltipData = (data, hoveredItemKey) => {
   data?.forEach((annotationGroup) => {
     const { key, markers } = annotationGroup;
     if (key === hoveredItemKey) {
-      hoveredMarkers = markers.map(extractTooltipMarkerProps);
+      hoveredMarkers = markers.map(
+        (marker) => extractTooltipMarkerProps(marker)
+      );
     } else {
-      const closeMarkerGroup = markers.map(extractTooltipMarkerProps);
+      const closeMarkerGroup = markers.map(
+        (marker) => extractTooltipMarkerProps(marker)
+      );
       closeMarkers.push(closeMarkerGroup);
     }
   });

package/charts/core/components/annotations/constants.d.ts

@@ -30,6 +30,7 @@ export declare const DEFAULT_TOOLTIP_Y_OFFSET = 40;
 export declare const DEFAULT_SHOW_LABELS = true;
 export declare const DEFAULT_TEXT_OVERFLOW = "truncate";
 export declare const DEFAULT_TRUNCATION_MODE = "middle";
+export declare const DEFAULT_TOOLTIP_MAX_LINES = 1;
 export declare const DEFAULT_INTEGRATION_TEXT_OVERFLOW = "expand";
 export declare const enum TestIds {
     Marker = "marker",

package/charts/core/components/annotations/constants.js

@@ -36,6 +36,7 @@ __export(constants_exports, {
   DEFAULT_MARKER_PRIORITY: () => DEFAULT_MARKER_PRIORITY,
   DEFAULT_SHOW_LABELS: () => DEFAULT_SHOW_LABELS,
   DEFAULT_TEXT_OVERFLOW: () => DEFAULT_TEXT_OVERFLOW,
+  DEFAULT_TOOLTIP_MAX_LINES: () => DEFAULT_TOOLTIP_MAX_LINES,
   DEFAULT_TOOLTIP_Y_OFFSET: () => DEFAULT_TOOLTIP_Y_OFFSET,
   DEFAULT_TRACK_HIDDEN: () => DEFAULT_TRACK_HIDDEN,
   DEFAULT_TRUNCATION_MODE: () => DEFAULT_TRUNCATION_MODE,
@@ -98,6 +99,7 @@ const DEFAULT_TOOLTIP_Y_OFFSET = 40;
 const DEFAULT_SHOW_LABELS = true;
 const DEFAULT_TEXT_OVERFLOW = "truncate";
 const DEFAULT_TRUNCATION_MODE = "middle";
+const DEFAULT_TOOLTIP_MAX_LINES = 1;
 const DEFAULT_INTEGRATION_TEXT_OVERFLOW = "expand";
 var TestIds = /* @__PURE__ */ ((TestIds2) => {
   TestIds2["Marker"] = "marker";

package/charts/core/components/annotations/hooks/useOverlayEvents.js

@@ -20,10 +20,15 @@ __export(useOverlayEvents_exports, {
   useOverlayEvents: () => useOverlayEvents
 });
 module.exports = __toCommonJS(useOverlayEvents_exports);
+var import_lodash_es = require("lodash");
 var import_react = require("react");
+var import_selectors = require("./store/selectors.js");
+var import_state_setters = require("./store/state-setters.js");
 var import_useAnnotationsHandlers = require("./useAnnotationsHandlers.js");
+var import_useMarkersInteractions = require("./useMarkersInteractions.js");
 var import_constants = require("../constants.js");
 var import_MarkerCoordinates_context = require("../contexts/MarkerCoordinates.context.js");
+var import_AnnotationsDataInitialState = require("../providers/AnnotationsDataInitialState.js");
 var import_in_marker_bounds = require("../utils/in-marker-bounds.js");
 const useOverlayEvents = () => {
   const markerCoordsPerTrack = (0, import_react.useContext)(import_MarkerCoordinates_context.MarkerCoordinatesContext);
@@ -36,6 +41,10 @@ const useOverlayEvents = () => {
     currentHoveredTrack,
     currentHoveredMarker
   } = (0, import_useAnnotationsHandlers.useAnnotationsHandlers)();
+  const { pinnedGroup } = (0, import_selectors.useAnnotationsSelectionState)();
+  const updateTooltipState = (0, import_state_setters.useSetStateTooltip)();
+  const updateTooltipSelection = (0, import_state_setters.useSetStateSelection)();
+  const onMarkersInteraction = (0, import_useMarkersInteractions.useMarkersInteractions)();
   const handleMouseMove = (e) => {
     const { clientX, clientY, currentTarget } = e;
     const { top, left } = currentTarget.getBoundingClientRect();
@@ -71,6 +80,12 @@ const useOverlayEvents = () => {
   const handleClick = (e) => {
     if (currentHoveredMarker.current !== void 0) {
       clickMarker(e, currentHoveredMarker.current);
+      return;
+    }
+    if (!(0, import_lodash_es.isUndefined)(pinnedGroup)) {
+      updateTooltipState(import_AnnotationsDataInitialState.initialState.tooltip);
+      updateTooltipSelection(import_AnnotationsDataInitialState.initialState.selection);
+      onMarkersInteraction?.(import_AnnotationsDataInitialState.initialState.selection);
     }
   };
   const handleMouseLeave = (e) => {

package/charts/core/components/axes/Axis.css

@@ -1,4 +1,4 @@
-._90oaxp0-3-5-0 {
+._90oaxp0-3-6-0 {
   display: block;
   overflow: visible;
 }

package/charts/core/components/axes/Axis.sty.js

@@ -21,4 +21,4 @@ __export(Axis_css_exports, {
 });
 module.exports = __toCommonJS(Axis_css_exports);
 var import_Axis_css_ts_vanilla = require("./Axis.css");
-var axis = "_90oaxp0-3-5-0";
+var axis = "_90oaxp0-3-6-0";

package/charts/core/components/axes/components/PanningControls/PanningControls.css

@@ -1,4 +1,4 @@
-@keyframes _3rbllj2-3-5-0 {
+@keyframes _3rbllj2-3-6-0 {
   0% {
     transform: translateX(-4px);
     opacity: 0.2;
@@ -8,7 +8,7 @@
     opacity: 1;
   }
 }
-@keyframes _3rbllj3-3-5-0 {
+@keyframes _3rbllj3-3-6-0 {
   0% {
     transform: translateX(4px);
     opacity: 0.2;
@@ -18,7 +18,7 @@
     opacity: 1;
   }
 }
-._3rbllj4-3-5-0 {
+._3rbllj4-3-6-0 {
   opacity: 0;
   height: 100%;
   position: absolute;
@@ -34,29 +34,29 @@
   animation-delay: 0.2s;
   animation-fill-mode: forwards;
 }
-._3rbllj5-3-5-0 {
+._3rbllj5-3-6-0 {
   left: 0;
-  animation-name: _3rbllj2-3-5-0;
+  animation-name: _3rbllj2-3-6-0;
 }
-._3rbllj6-3-5-0 {
+._3rbllj6-3-6-0 {
   right: 0;
-  animation-name: _3rbllj3-3-5-0;
+  animation-name: _3rbllj3-3-6-0;
 }
-._3rbllj7-3-5-0 {
+._3rbllj7-3-6-0 {
   color: var(--dt-colors-icon-neutral-subdued, #595a7d);
 }
-._3rbllj7-3-5-0:hover {
+._3rbllj7-3-6-0:hover {
   color: var(--dt-colors-icon-neutral-subdued-hover, #434465);
 }
-._3rbllj7-3-5-0:active {
+._3rbllj7-3-6-0:active {
   color: var(--dt-colors-icon-neutral-subdued-active, #2f2f4f);
 }
-._3rbllj5-3-5-0 ~ div {
-  --_3rbllj0-3-5-0: rgba(0, 0, 0, 0) 12px, rgba(0, 0, 0, 1) 40px;
+._3rbllj5-3-6-0 ~ div {
+  --_3rbllj0-3-6-0: rgba(0, 0, 0, 0) 12px, rgba(0, 0, 0, 1) 40px;
 }
-._3rbllj6-3-5-0 ~ div {
-  --_3rbllj1-3-5-0: rgba(0, 0, 0, 1) calc(100% - 40px), rgba(0, 0, 0, 0) calc(100% - 12px);
+._3rbllj6-3-6-0 ~ div {
+  --_3rbllj1-3-6-0: rgba(0, 0, 0, 1) calc(100% - 40px), rgba(0, 0, 0, 0) calc(100% - 12px);
 }
-._3rbllj4-3-5-0 ~ div {
-  mask: linear-gradient(90deg, var(--_3rbllj0-3-5-0, rgba(0,0,0,1) 0%), var(--_3rbllj1-3-5-0, rgba(0,0,0,1) 0%));
+._3rbllj4-3-6-0 ~ div {
+  mask: linear-gradient(90deg, var(--_3rbllj0-3-6-0, rgba(0,0,0,1) 0%), var(--_3rbllj1-3-6-0, rgba(0,0,0,1) 0%));
 }

package/charts/core/components/axes/components/PanningControls/PanningControls.sty.js

@@ -23,5 +23,5 @@ __export(PanningControls_css_exports, {
 module.exports = __toCommonJS(PanningControls_css_exports);
 var import_PanningControls_css_ts_vanilla = require("./PanningControls.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var panningArrow = "_3rbllj7-3-5-0";
-var panningButtons = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_3rbllj4-3-5-0", variantClassNames: { direction: { toLeft: "_3rbllj5-3-5-0", toRight: "_3rbllj6-3-5-0" } }, defaultVariants: {}, compoundVariants: [] });
+var panningArrow = "_3rbllj7-3-6-0";
+var panningButtons = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_3rbllj4-3-6-0", variantClassNames: { direction: { toLeft: "_3rbllj5-3-6-0", toRight: "_3rbllj6-3-6-0" } }, defaultVariants: {}, compoundVariants: [] });

package/charts/core/components/axes/utils/calculate-axis-size.d.ts

@@ -1,3 +1,3 @@
 import type { ScaleBand, ScaleLinear, ScaleSymLog, ScaleTime } from 'd3-scale';
 export declare const getYTickMaxSize: (containerWidth: number, label?: string) => number;
-export declare const getXTickMaxSize: (containerHeight: number, containerWidth: number, isTickRotated: boolean, scale?: ScaleBand<string> | ScaleLinear<number, number> | ScaleSymLog<number, number> | ScaleTime<number, number>, label?: string) => number;
+export declare const getXTickMaxSize: (containerHeight: number, containerWidth: number, isTickRotated: boolean, scale?: ScaleBand<string> | ScaleLinear<number, number> | ScaleSymLog<number, number> | ScaleTime<number, number>, label?: string, numTicks?: number) => number;

package/charts/core/components/axes/utils/calculate-axis-size.js

@@ -30,7 +30,7 @@ const getYTickMaxSize = (containerWidth, label) => {
   const maxSize = containerWidth - (import_constants.Y_AXES_TICK_LINE_OFFSET + labelArea) + import_get_tick_label_props.ELLIPSIS_BUFFER;
   return Math.max(maxSize, 0);
 };
-const getXTickMaxSize = (containerHeight, containerWidth, isTickRotated, scale, label) => {
+const getXTickMaxSize = (containerHeight, containerWidth, isTickRotated, scale, label, numTicks) => {
   const labelArea = (0, import_lodash_es.isEmpty)(label) ? 0 : import_constants.X_LABEL_AREA;
   let maxSize = 0;
   if (isTickRotated) {
@@ -38,6 +38,8 @@ const getXTickMaxSize = (containerHeight, containerWidth, isTickRotated, scale,
   } else {
     if (scale && (0, import_detect_scale.isBandScale)(scale)) {
       maxSize = scale.step();
+    } else if (numTicks !== void 0 && numTicks > 0 && scale && !(0, import_detect_scale.isSymlogScale)(scale)) {
+      maxSize = containerWidth / numTicks;
     } else {
       maxSize = containerWidth;
     }

package/charts/core/components/axes/utils/get-tick-label-props.d.ts

@@ -1,11 +1,45 @@
+import type { AnyScale } from '../../../types/scales.js';
 import { TickLabelProps } from '../../../types/text-props.js';
 import { TickPrimitiveValue } from '../../../types/tick-value.js';
 import { Orientation, TickLabelLayout } from '../types.js';
+/**
+ * Returns tick label props for the bottom axis with domain-aware alignment.
+ *
+ * Only ticks whose value exactly matches a domain boundary receive edge alignment
+ * (`start` for domainMin, `end` for domainMax). All other ticks are center-aligned
+ * (`middle`), preventing outermost rendered ticks that don't coincide with domain
+ * extremes from being clipped against the chart edge.
+ *
+ * @param domainMin - domain start as a number (use `+` to convert Date values)
+ * @param domainMax - domain end as a number (use `+` to convert Date values)
+ */
+export declare const getBottomTickLabelPropsWithDomainAlignment: (domainMin: number, domainMax: number) => TickLabelProps<TickPrimitiveValue>;
 export declare const ELLIPSIS_BUFFER = 2;
+/**
+ * Returns tick label props for the top axis with domain-aware alignment.
+ *
+ * Mirrors `getBottomTickLabelPropsWithDomainAlignment` for the top position:
+ * only ticks whose value exactly matches a domain boundary receive edge alignment
+ * (`start` for domainMin, `end` for domainMax). All other ticks are center-aligned.
+ *
+ * @param domainMin - domain start as a number (use `+` to convert Date values)
+ * @param domainMax - domain end as a number (use `+` to convert Date values)
+ */
+export declare const getTopTickLabelPropsWithDomainAlignment: (domainMin: number, domainMax: number) => TickLabelProps<TickPrimitiveValue>;
 export declare const getTickLabelPropsForCategoryAxis: (orientation: Orientation, tickLabelLayout?: TickLabelLayout) => TickLabelProps<TickPrimitiveValue>;
 export declare const bottomTickLabelDateProps: TickLabelProps<Date>;
 export declare const bottomPanTickLabelDateProps: TickLabelProps<Date>;
 export declare const getTickLabelPropsForValueAxis: (orientation: Orientation, tickLabelLayout?: TickLabelLayout) => TickLabelProps<TickPrimitiveValue>;
+/**
+ * Selects the correct tick label props for a horizontal (top/bottom) axis.
+ *
+ * Priority:
+ *  1. Categorical axis → category-specific props (accounts for rotation).
+ *  2. Continuous, non-rotated, scale available → domain-aware alignment so
+ *     boundary ticks are anchored to the chart edge instead of center-aligned.
+ *  3. Fallback → standard value-axis props.
+ */
+export declare function getXAxisTickLabelProps(position: 'bottom' | 'top', isCategoricalAxis: boolean, isTickRotated: boolean, scale: AnyScale | undefined, tickLabelLayout?: TickLabelLayout): TickLabelProps<TickPrimitiveValue>;
 /**
  * Gets the corresponding props for a tick label.
  * Takes index and whether the tick is placed at data-min/data-max into consideration.

package/charts/core/components/axes/utils/get-tick-label-props.js

@@ -20,13 +20,32 @@ __export(get_tick_label_props_exports, {
   ELLIPSIS_BUFFER: () => ELLIPSIS_BUFFER,
   bottomPanTickLabelDateProps: () => bottomPanTickLabelDateProps,
   bottomTickLabelDateProps: () => bottomTickLabelDateProps,
+  getBottomTickLabelPropsWithDomainAlignment: () => getBottomTickLabelPropsWithDomainAlignment,
   getTickLabelPropsForCategoryAxis: () => getTickLabelPropsForCategoryAxis,
   getTickLabelPropsForGanttAxis: () => getTickLabelPropsForGanttAxis,
-  getTickLabelPropsForValueAxis: () => getTickLabelPropsForValueAxis
+  getTickLabelPropsForValueAxis: () => getTickLabelPropsForValueAxis,
+  getTopTickLabelPropsWithDomainAlignment: () => getTopTickLabelPropsWithDomainAlignment,
+  getXAxisTickLabelProps: () => getXAxisTickLabelProps
 });
 module.exports = __toCommonJS(get_tick_label_props_exports);
 var import_get_tick_value_as_number = require("../../../utils/get-tick-value-as-number.js");
 var import_constants = require("../constants.js");
+const getBottomTickLabelPropsWithDomainAlignment = (domainMin, domainMax) => {
+  return (value) => {
+    const numericValue = (0, import_get_tick_value_as_number.getTickValueAsNumber)(value);
+    let textAnchor = import_constants.TICK_ALIGMENT.Middle;
+    if (numericValue === domainMin) {
+      textAnchor = import_constants.TICK_ALIGMENT.Start;
+    } else if (numericValue === domainMax) {
+      textAnchor = import_constants.TICK_ALIGMENT.End;
+    }
+    return {
+      y: import_constants.X_AXES_TICK_LINE_OFFSET,
+      textAnchor,
+      verticalAnchor: import_constants.TICK_ALIGMENT.Start
+    };
+  };
+};
 const VISX_BOTTOM_OFFSET = 2;
 const ELLIPSIS_BUFFER = 2;
 const leftTickLabelProps = (_value, index, values) => ({
@@ -88,6 +107,22 @@ const bottomTickLabelPropsForCategoryAxis = (_value) => ({
   textAnchor: import_constants.TICK_ALIGMENT.Middle,
   verticalAnchor: import_constants.TICK_ALIGMENT.Start
 });
+const getTopTickLabelPropsWithDomainAlignment = (domainMin, domainMax) => {
+  return (value) => {
+    const numericValue = (0, import_get_tick_value_as_number.getTickValueAsNumber)(value);
+    let textAnchor = import_constants.TICK_ALIGMENT.Middle;
+    if (numericValue === domainMin) {
+      textAnchor = import_constants.TICK_ALIGMENT.Start;
+    } else if (numericValue === domainMax) {
+      textAnchor = import_constants.TICK_ALIGMENT.End;
+    }
+    return {
+      y: -import_constants.X_AXES_TICK_LINE_OFFSET,
+      textAnchor,
+      verticalAnchor: import_constants.TICK_ALIGMENT.End
+    };
+  };
+};
 const getTickLabelPropsForCategoryAxis = (orientation, tickLabelLayout = "horizontal") => {
   if (orientation === "left") {
     return leftTickCategoricalLabelProps;
@@ -129,6 +164,17 @@ const getTickLabelPropsForValueAxis = (orientation, tickLabelLayout = "horizonta
   }
   return tickLabelLayout === "vertical" ? bottomRotatedTickLabelProps : bottomTickLabelProps;
 };
+function getXAxisTickLabelProps(position, isCategoricalAxis, isTickRotated, scale, tickLabelLayout) {
+  if (isCategoricalAxis) {
+    return getTickLabelPropsForCategoryAxis(position, tickLabelLayout);
+  }
+  if (scale && !isTickRotated) {
+    const domain = scale.domain();
+    const getDomainAligned = position === "bottom" ? getBottomTickLabelPropsWithDomainAlignment : getTopTickLabelPropsWithDomainAlignment;
+    return getDomainAligned(+domain[0], +domain[1]);
+  }
+  return getTickLabelPropsForValueAxis(position, tickLabelLayout);
+}
 const getTickLabelPropsForGanttAxis = (min, max) => {
   return (value, index, values) => {
     let textAnchor = import_constants.TICK_ALIGMENT.Middle;