@dynatrace/strato-components 3.11.2 → 3.12.0

package/charts/xy-chart/components/thresholds/XYChartThresholdIndicators.js

@@ -21,6 +21,7 @@ __export(XYChartThresholdIndicators_exports, {
 });
 module.exports = __toCommonJS(XYChartThresholdIndicators_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
+var import_type_guards = require("./type-guards.js");
 var import_utils = require("./utils.js");
 var import_XYChartThresholdIndicators_css = require("./XYChartThresholdIndicators.sty.js");
 var import_useGridPlotSize = require("../../../core/components/chart-grid/hooks/useGridPlotSize.js");
@@ -31,7 +32,7 @@ var import_useXYChartScales = require("../../hooks/useXYChartScales.js");
 var import_selectors = require("../../store/selectors.js");
 const XYChartThresholdIndicators = () => {
   const { thresholds, none } = (0, import_useGetThresholds.useGetThresholds)();
-  const { width } = (0, import_useGridPlotSize.useGridPlotSize)();
+  const { width, height } = (0, import_useGridPlotSize.useGridPlotSize)();
   const axisIdToScales = (0, import_useXYChartScales.useXYChartScales)();
   const hoveredThresholdId = (0, import_selectors.useHoveredThresholdState)();
   const { axes } = (0, import_useXYChartData.useXYChartData)();
@@ -39,13 +40,15 @@ const XYChartThresholdIndicators = () => {
     return null;
   }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: import_XYChartThresholdIndicators_css.thresholdPlot, children: thresholds.map((threshold) => {
-    if (!axes.find((axis) => axis.id === threshold.yAxisId)) {
+    const axisId = (0, import_type_guards.isThresholdXStaticInternal)(threshold) ? threshold.xAxisId : threshold.yAxisId;
+    if (!axes.find((axis) => axis.id === axisId)) {
       return void 0;
     }
     const data = (0, import_utils.mapIndicatorDataFrom)({
       axisIdToScales,
       threshold,
-      width
+      width,
+      height
     });
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_ThresholdIndicator.ThresholdIndicator,

package/charts/xy-chart/components/thresholds/XYChartThresholdIndicators.sty.js

@@ -22,4 +22,4 @@ __export(XYChartThresholdIndicators_css_exports, {
 module.exports = __toCommonJS(XYChartThresholdIndicators_css_exports);
 var import_ChartGrid_css_ts_vanilla = require("../../../core/components/chart-grid/ChartGrid.css");
 var import_XYChartThresholdIndicators_css_ts_vanilla = require("./XYChartThresholdIndicators.css");
-var thresholdPlot = "_1mfu0sw0-3-11-2 _13lzg4k0-3-11-2";
+var thresholdPlot = "_1mfu0sw0-3-12-0 _13lzg4k0-3-12-0";

package/charts/xy-chart/components/thresholds/builder.js

@@ -20,6 +20,7 @@ __export(builder_exports, {
   buildThresholds: () => buildThresholds
 });
 module.exports = __toCommonJS(builder_exports);
+var import_get_x_value = require("./get-x-value.js");
 var import_get_y_value = require("./get-y-value.js");
 var import_type_guards = require("./type-guards.js");
 var import_utils = require("./utils.js");
@@ -37,7 +38,17 @@ function getStrokeOnly(threshold) {
   };
   return ((0, import_type_guards2.isPointThreshold)(firstMarkerDomain.y0, firstMarkerDomain.y1) || threshold.strokeOnly) ?? false;
 }
+function getStrokeOnlyX(threshold) {
+  const firstMarkerDomain = {
+    x0: (0, import_get_x_value.getXValue)(threshold.data, "min"),
+    x1: (0, import_get_x_value.getXValue)(threshold.data, "max")
+  };
+  return ((0, import_type_guards2.isPointThreshold)(firstMarkerDomain.x0, firstMarkerDomain.x1) || threshold.strokeOnly) ?? false;
+}
 function hasValidAxes(threshold, yAxisMetadata, xAxisMetadata = void 0) {
+  if ((0, import_type_guards.isThresholdXStatic)(threshold)) {
+    return !!xAxisMetadata && threshold.xAxisId in xAxisMetadata;
+  }
   let xAxisValid = true;
   if ((0, import_type_guards.isThresholdDynamic)(threshold) && xAxisMetadata) {
     xAxisValid = threshold.xAxisId !== void 0 && threshold.xAxisId in xAxisMetadata;
@@ -62,9 +73,39 @@ const buildThresholds = (yAxes, xAxes, thresholdSlots) => {
   }, {});
   const leftAxisWithThresholds = /* @__PURE__ */ new Set();
   const rightAxisWithThresholds = /* @__PURE__ */ new Set();
+  const topAxisWithThresholds = /* @__PURE__ */ new Set();
+  const bottomAxisWithThresholds = /* @__PURE__ */ new Set();
   const thresholdsData = thresholdSlots.reduce(
     (acc, threshold) => {
-      if (hasValidAxes(threshold, yAxisMetadata, xAxisMetadata)) {
+      if (!hasValidAxes(threshold, yAxisMetadata, xAxisMetadata)) {
+        return acc;
+      }
+      if ((0, import_type_guards.isThresholdXStatic)(threshold)) {
+        const xAxis = xAxisMetadata[threshold.xAxisId];
+        const castedData = (0, import_cast_data_types.castStaticXThresholdsDataType)(
+          threshold.data,
+          xAxis.type
+        );
+        if (castedData) {
+          if ((0, import_utils.xAxisPositionIncludes)("top")(xAxis.position)) {
+            topAxisWithThresholds.add(threshold.xAxisId);
+          }
+          if ((0, import_utils.xAxisPositionIncludes)("bottom")(xAxis.position)) {
+            bottomAxisWithThresholds.add(threshold.xAxisId);
+          }
+          acc.push({
+            id: crypto.randomUUID(),
+            xAxisId: threshold.xAxisId,
+            color: (0, import_getValidColor.getValidColor)(threshold.color),
+            position: xAxis.position,
+            label: threshold.label,
+            strokeOnly: getStrokeOnlyX(threshold),
+            data: castedData
+          });
+        }
+        return acc;
+      }
+      {
         const yAxis = yAxisMetadata[threshold.yAxisId];
         const baseThresholdData = {
           id: crypto.randomUUID(),
@@ -119,12 +160,18 @@ const buildThresholds = (yAxes, xAxes, thresholdSlots) => {
     thresholds: thresholdsData,
     none: false,
     offset: {
-      left: (0, import_utils.axesPositionsIncludes)("left", thresholdsData) ? import_constants.THRESHOLD_BAR_THICKNESS : 0,
-      right: (0, import_utils.axesPositionsIncludes)("right", thresholdsData) ? import_constants.THRESHOLD_BAR_THICKNESS : 0
+      left: leftAxisWithThresholds.size ? import_constants.THRESHOLD_BAR_THICKNESS : 0,
+      right: rightAxisWithThresholds.size ? import_constants.THRESHOLD_BAR_THICKNESS : 0,
+      top: topAxisWithThresholds.size ? import_constants.THRESHOLD_BAR_THICKNESS : 0,
+      bottom: bottomAxisWithThresholds.size ? import_constants.THRESHOLD_BAR_THICKNESS : 0
     },
     yAxes: {
       left: leftAxisWithThresholds,
       right: rightAxisWithThresholds
+    },
+    xAxes: {
+      top: topAxisWithThresholds,
+      bottom: bottomAxisWithThresholds
     }
   };
   return thresholds;

package/charts/xy-chart/components/thresholds/get-border-threshold.d.ts

@@ -1,6 +1,8 @@
 import type { XYChartAxisInternal } from '../../types/xy-chart-internals.js';
-export declare function getBorderThreshold(left: XYChartAxisInternal | undefined, right: XYChartAxisInternal | undefined): {
+export declare function getBorderThresholds(left: XYChartAxisInternal | undefined, right: XYChartAxisInternal | undefined, top: XYChartAxisInternal | undefined, bottom: XYChartAxisInternal | undefined): {
     leftBorder: "bothBorders" | "leftBorder";
     rightBorder: "bothBorders" | "rightBorder";
+    topBorder: "bothBorders" | "topBorder";
+    bottomBorder: "bothBorders" | "bottomBorder";
 };
 //# sourceMappingURL=get-border-threshold.d.ts.map

package/charts/xy-chart/components/thresholds/get-border-threshold.js

@@ -17,12 +17,14 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var get_border_threshold_exports = {};
 __export(get_border_threshold_exports, {
-  getBorderThreshold: () => getBorderThreshold
+  getBorderThresholds: () => getBorderThresholds
 });
 module.exports = __toCommonJS(get_border_threshold_exports);
 var import_types = require("../../../core/components/threshold-bar/types.js");
-function getBorderThreshold(left, right) {
+function getBorderThresholds(left, right, top, bottom) {
   const leftBorder = !left || left.hidden ? import_types.BothBorders : import_types.LeftBorder;
-  const rightBorder = !right || right?.hidden ? import_types.BothBorders : import_types.RightBorder;
-  return { leftBorder, rightBorder };
+  const rightBorder = !right || right.hidden ? import_types.BothBorders : import_types.RightBorder;
+  const topBorder = !top || top.hidden ? import_types.BothBorders : import_types.TopBorder;
+  const bottomBorder = !bottom || bottom.hidden ? import_types.BothBorders : import_types.BottomBorder;
+  return { leftBorder, rightBorder, topBorder, bottomBorder };
 }

package/charts/xy-chart/components/thresholds/get-x-value.d.ts

@@ -0,0 +1,12 @@
+import type { _XYChartThresholdXStaticData } from '../../types/xy-chart-props.js';
+/**
+ * Retrieves either the 'xMin' or 'xMax' value from `data` based on `type`,
+ * defaulting to `data.x` when the range keys are absent. Mirrors {@link getYValue}
+ * for X-axis-bound (vertical) thresholds.
+ *
+ * @param data - Object containing potential 'xMin', 'xMax', or 'x' properties.
+ * @param type - Specifies whether to retrieve 'min' (xMin) or 'max' (xMax).
+ * @returns The 'xMin', 'xMax', or 'x' value from the data object.
+ */
+export declare const getXValue: (data: _XYChartThresholdXStaticData, type: "min" | "max") => import("../../types/xy-chart.js").XYChartThresholdValue;
+//# sourceMappingURL=get-x-value.d.ts.map

package/charts/xy-chart/components/thresholds/get-x-value.js

@@ -0,0 +1,30 @@
+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 get_x_value_exports = {};
+__export(get_x_value_exports, {
+  getXValue: () => getXValue
+});
+module.exports = __toCommonJS(get_x_value_exports);
+var import_type_guards = require("./type-guards.js");
+const getXValue = (data, type) => {
+  const key = type === "min" ? "xMin" : "xMax";
+  if ((0, import_type_guards.isDataRangeX)(data)) {
+    return data[key];
+  }
+  return data.x;
+};

package/charts/xy-chart/components/thresholds/type-guards.d.ts

@@ -1,4 +1,5 @@
-import { XYChartThresholdDynamicProps, XYChartThresholdIndicatorProps } from '../../types/xy-chart-props.js';
+import type { XYChartThresholdsPropsInternal, XYChartThresholdXStaticPropsInternal } from '../../types/xy-chart-internals.js';
+import { XYChartThresholdDynamicProps, XYChartThresholdIndicatorProps, _XYChartThresholdDataXRangeStatic, _XYChartThresholdStaticXProps, _XYChartThresholdXStaticData } from '../../types/xy-chart-props.js';
 import { XYChartThresholdData, type XYChartThresholdRangeBase } from '../../types/xy-chart.js';
 /**
  * Type guard to check if a given object is of type DataRangeStatic.
@@ -7,5 +8,28 @@ import { XYChartThresholdData, type XYChartThresholdRangeBase } from '../../type
  * @returns True if the object is a DataRangeStatic, false otherwise.
  */
 export declare const isDataRange: (obj: XYChartThresholdData) => obj is XYChartThresholdRangeBase;
+/**
+ * Type guard to check if a given X-axis threshold data object is a range (vertical band).
+ *
+ * @param obj - The object to check.
+ * @returns True if the object is an X-axis range, false otherwise.
+ */
+export declare const isDataRangeX: (obj: _XYChartThresholdXStaticData) => obj is _XYChartThresholdDataXRangeStatic;
 export declare const isThresholdDynamic: (obj: XYChartThresholdIndicatorProps) => obj is XYChartThresholdDynamicProps;
+/**
+ * Type guard for a static threshold bound to the X axis (vertical line or band).
+ * Distinguished from the dynamic path by its non-array `data`.
+ *
+ * @param obj - The threshold props to check.
+ * @returns True if the threshold is an X-axis static threshold, false otherwise.
+ */
+export declare const isThresholdXStatic: (obj: XYChartThresholdIndicatorProps | _XYChartThresholdStaticXProps) => obj is _XYChartThresholdStaticXProps;
+/**
+ * Type guard for the internal representation of an X-axis static threshold.
+ * X-static is the only internal variant with an `xAxisId` but no `yAxisId`.
+ *
+ * @param threshold - The internal threshold to check.
+ * @returns True if the threshold is an internal X-axis static threshold.
+ */
+export declare const isThresholdXStaticInternal: (threshold: XYChartThresholdsPropsInternal[number]) => threshold is XYChartThresholdXStaticPropsInternal;
 //# sourceMappingURL=type-guards.d.ts.map

package/charts/xy-chart/components/thresholds/type-guards.js

@@ -18,12 +18,24 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var type_guards_exports = {};
 __export(type_guards_exports, {
   isDataRange: () => isDataRange,
-  isThresholdDynamic: () => isThresholdDynamic
+  isDataRangeX: () => isDataRangeX,
+  isThresholdDynamic: () => isThresholdDynamic,
+  isThresholdXStatic: () => isThresholdXStatic,
+  isThresholdXStaticInternal: () => isThresholdXStaticInternal
 });
 module.exports = __toCommonJS(type_guards_exports);
 const isDataRange = (obj) => {
   return typeof obj === "object" && obj !== null && "yMin" in obj && "yMax" in obj;
 };
+const isDataRangeX = (obj) => {
+  return typeof obj === "object" && obj !== null && "xMin" in obj && "xMax" in obj;
+};
 const isThresholdDynamic = (obj) => {
   return "xAxisId" in obj && Array.isArray(obj.data);
 };
+const isThresholdXStatic = (obj) => {
+  return "xAxisId" in obj && !Array.isArray(obj.data) && typeof obj.data === "object" && obj.data !== null && ("x" in obj.data || "xMin" in obj.data);
+};
+const isThresholdXStaticInternal = (threshold) => {
+  return "xAxisId" in threshold && !("yAxisId" in threshold);
+};

package/charts/xy-chart/components/thresholds/utils.d.ts

@@ -3,7 +3,7 @@ import type { ThresholdMarker } from '../../../core/components/threshold-bar/typ
 import type { MinMax } from '../../../core/types/min-max.js';
 import type { AxisIdToScales } from '../../context/XYChartScales.context.js';
 import type { AxisIdToFormatter, XYChartAxisInternal, XYChartThresholdsPropsInternal } from '../../types/xy-chart-internals.js';
-import type { XYChartThresholdDynamicData, XYChartYAxisPosition } from '../../types/xy-chart.js';
+import type { XYChartThresholdDynamicData, XYChartXAxisPosition, XYChartYAxisPosition } from '../../types/xy-chart.js';
 interface ThresholdMarkersReducerConfig {
     axis: 'left' | 'right';
     axisConfig?: XYChartAxisInternal;
@@ -20,14 +20,27 @@ export declare function getDynamicThresholdDomain(data: XYChartThresholdDynamicD
  * Returns a reducer function to accumulate threshold markers with scale and formatted value.
  */
 export declare function markersReducer({ axis, axisConfig, axesIdToScales, axesIdToFormatter, width, axes, }: ThresholdMarkersReducerConfig): (acc: ThresholdMarker[], threshold: XYChartThresholdsPropsInternal[number]) => ThresholdMarker[];
-export declare const axesPositionsIncludes: (axisPosition: "left" | "right", axesPositions: {
-    position: XYChartYAxisPosition;
-}[]) => boolean;
-export declare const axisPositionIncludes: (expectedPosition: "left" | "right") => (actualPosition: "left" | "right" | "both") => boolean;
+interface XThresholdMarkersReducerConfig {
+    axis: 'top' | 'bottom';
+    axisConfig?: XYChartAxisInternal;
+    axesIdToScales: AxisIdToScales;
+    axesIdToFormatter: AxisIdToFormatter;
+    width: number;
+    axes: XYChartAxisInternal[];
+}
+/**
+ * Reducer that accumulates the horizontal (X-axis static) threshold markers for the
+ * top/bottom pill bars. Mirrors {@link markersReducer}, using the X scale and binding
+ * to `xAxisId`. Non X-static thresholds are ignored.
+ */
+export declare function xMarkersReducer({ axis, axisConfig, axesIdToScales, axesIdToFormatter, width, axes, }: XThresholdMarkersReducerConfig): (acc: ThresholdMarker[], threshold: XYChartThresholdsPropsInternal[number]) => ThresholdMarker[];
+export declare const axisPositionIncludes: (expectedPosition: "left" | "right") => (actualPosition: XYChartYAxisPosition | XYChartXAxisPosition) => boolean;
+export declare const xAxisPositionIncludes: (expectedPosition: "top" | "bottom") => (actualPosition: XYChartYAxisPosition | XYChartXAxisPosition) => boolean;
 type IndicatorData = (args: {
     axisIdToScales: AxisIdToScales;
     threshold: XYChartThresholdsPropsInternal[number];
     width: number;
+    height: number;
 }) => ThresholdIndicatorData[];
 export declare const mapIndicatorDataFrom: IndicatorData;
 export {};

package/charts/xy-chart/components/thresholds/utils.js

@@ -17,15 +17,17 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var utils_exports = {};
 __export(utils_exports, {
-  axesPositionsIncludes: () => axesPositionsIncludes,
   axisPositionIncludes: () => axisPositionIncludes,
   getDynamicThresholdDomain: () => getDynamicThresholdDomain,
   mapIndicatorDataFrom: () => mapIndicatorDataFrom,
-  markersReducer: () => markersReducer
+  markersReducer: () => markersReducer,
+  xAxisPositionIncludes: () => xAxisPositionIncludes,
+  xMarkersReducer: () => xMarkersReducer
 });
 module.exports = __toCommonJS(utils_exports);
 var import_d3_scale = require("d3-scale");
 var import_lodash_es = require("lodash");
+var import_get_x_value = require("./get-x-value.js");
 var import_get_y_value = require("./get-y-value.js");
 var import_type_guards = require("./type-guards.js");
 var import_get_marker_value = require("../../../core/components/threshold-bar/utils/get-marker-value.js");
@@ -77,6 +79,9 @@ function markersReducer({
   axes
 }) {
   return (acc, threshold) => {
+    if ((0, import_type_guards.isThresholdXStaticInternal)(threshold)) {
+      return acc;
+    }
     if (!axes.find((axis2) => axis2.id === threshold.yAxisId)) {
       return acc;
     }
@@ -140,20 +145,79 @@ function markersReducer({
     return acc;
   };
 }
-const axesPositionsIncludes = (axisPosition, axesPositions) => {
-  const expectedPositionsIncludes = axisPositionIncludes(axisPosition);
-  return !!axesPositions.find(
-    ({ position }) => expectedPositionsIncludes(position)
-  );
-};
+function xMarkersReducer({
+  axis,
+  axisConfig,
+  axesIdToScales,
+  axesIdToFormatter,
+  width,
+  axes
+}) {
+  return (acc, threshold) => {
+    if (!(0, import_type_guards.isThresholdXStaticInternal)(threshold)) {
+      return acc;
+    }
+    if (!axes.find((a) => a.id === threshold.xAxisId)) {
+      return acc;
+    }
+    if (xAxisPositionIncludes(axis)(threshold.position)) {
+      const xScale = (0, import_get_scale.getCurrentScale)(
+        axesIdToScales,
+        threshold.xAxisId
+      );
+      const markerDomain = {
+        x0: (0, import_get_x_value.getXValue)(threshold.data, "min"),
+        x1: (0, import_get_x_value.getXValue)(threshold.data, "max")
+      };
+      acc.push({
+        ...threshold,
+        y0: (0, import_get_threshold_pixel_ts.getThresholdPixel)(markerDomain.x0, xScale),
+        y1: (0, import_get_threshold_pixel_ts.getThresholdPixel)(markerDomain.x1, xScale),
+        value: (0, import_get_marker_value.getMarkerValue)(
+          { y0: markerDomain.x0, y1: markerDomain.x1 },
+          (0, import_get_axis_formatter_with_time_fallback.getAxisFormatterWithTimeFallback)({
+            axisConfig,
+            axisId: threshold.xAxisId,
+            scale: xScale,
+            axesIdToFormatter,
+            width
+          })
+        )
+      });
+    }
+    return acc;
+  };
+}
 const axisPositionIncludes = (expectedPosition) => (actualPosition) => {
   return [expectedPosition, "both"].includes(actualPosition);
 };
+const xAxisPositionIncludes = (expectedPosition) => (actualPosition) => {
+  return [expectedPosition, "both"].includes(actualPosition);
+};
 const mapIndicatorDataFrom = ({
   axisIdToScales,
   threshold,
-  width
+  width,
+  height
 }) => {
+  if ((0, import_type_guards.isThresholdXStaticInternal)(threshold)) {
+    const xScale = (0, import_get_scale.getCurrentScale)(
+      axisIdToScales,
+      threshold.xAxisId
+    );
+    const xMinScaleValue = (0, import_get_threshold_pixel_ts.getThresholdPixel)(
+      (0, import_get_x_value.getXValue)(threshold.data, "min"),
+      xScale
+    );
+    const xMaxScaleValue = (0, import_get_threshold_pixel_ts.getThresholdPixel)(
+      (0, import_get_x_value.getXValue)(threshold.data, "max"),
+      xScale
+    );
+    return [
+      { x0: xMinScaleValue, x1: xMaxScaleValue, y0: 0, y1: 0 },
+      { x0: xMinScaleValue, x1: xMaxScaleValue, y0: height, y1: height }
+    ];
+  }
   const yScale = (0, import_get_scale.getCurrentScale)(
     axisIdToScales,
     threshold.yAxisId

package/charts/xy-chart/components/toolbar/ExploreButton.js

@@ -37,6 +37,7 @@ var import_ChartToolbarRenderer = require("../../../core/components/toolbar/Char
 var import_useToolbarContext = require("../../../core/components/toolbar/hooks/useToolbarContext.js");
 var import_useA11yToolbarTabIndex = require("../../../core/hooks/useA11yToolbarTabIndex.js");
 var import_get_percentage_from_pixel = require("../../../core/utils/get-percentage-from-pixel.js");
+var import_useSelectConfig = require("../../hooks/useSelectConfig.js");
 var import_messages = require("../../messages/messages.js");
 var import_reduce_interaction_mode = require("../../store/reduce-interaction-mode.js");
 var import_reducer_explorer = require("../../store/reducer-explorer.js");
@@ -53,6 +54,7 @@ const ExploreButton = (props) => {
   const { updateLastItemSelected } = (0, import_useToolbarContext.useToolbarContext)();
   const selectState = (0, import_selectors.useSelectState)();
   const isSelected = interactionMode === import_types.INTERACTION_MODE.Explore;
+  const isSelectDisabled = (0, import_useSelectConfig.useSelectConfig)()?.disabled === true;
   const createInitialSelectionArea = () => {
     if (!(0, import_lodash_es.isNil)(chartRef.current)) {
       const bounds = chartRef.current.getBoundingClientRect();
@@ -86,7 +88,9 @@ const ExploreButton = (props) => {
   };
   const handleKeyDown = () => {
     setState((0, import_reduce_interaction_mode.reduceInteractionMode)(import_types.INTERACTION_MODE.Explore));
-    createInitialSelectionArea();
+    if (!isSelectDisabled) {
+      createInitialSelectionArea();
+    }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_ChartToolbarRenderer.ChartToolbarRenderer.Control,

package/charts/xy-chart/components/tooltip/SharedXYChartTooltip/SharedXYChartTooltip.js

@@ -33,13 +33,16 @@ var import_useXYChartColorScales = require("../../../hooks/useXYChartColorScales
 var import_useXYChartData = require("../../../hooks/useXYChartData.js");
 var import_useXYChartTooltip = require("../../../hooks/useXYChartTooltip.js");
 var import_useXYChartTruncationMode = require("../../../hooks/useXYChartTruncationMode.js");
+function formatSharedTooltipValue(row) {
+  return row.yAxisDuration ? `${row.yAxisValue} (${row.yAxisDuration})` : row.yAxisValue;
+}
 function LazySharedTooltipRow({
   raw,
   ctx,
   seriesDisplayMode
 }) {
   const row = (0, import_sharedXYChartTooltipUtils.buildSharedTooltipRow)(raw.result, ctx);
-  const value = row.yAxisDuration ? `${row.yAxisValue} (${row.yAxisDuration})` : row.yAxisValue;
+  const value = formatSharedTooltipValue(row);
   const isMultiLine = row.nameSegments !== void 0 && seriesDisplayMode === "multi-line";
   const displayName = isMultiLine ? row.nameSegments : row.name;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -85,9 +88,11 @@ function SharedXYChartTooltip({
     const metadata = (0, import_safe_get.safeGet)(seriesToMetadata, result.series);
     const row = (0, import_sharedXYChartTooltipUtils.buildSharedTooltipRow)(result, ctx);
     const isMultiLine = row.nameSegments !== void 0 && seriesDisplayMode === "multi-line";
+    const value = formatSharedTooltipValue(row);
     return {
       name: isMultiLine ? row.nameSegments : metadata.name,
       nameSegments: row.nameSegments,
+      value,
       result
     };
   });

package/charts/xy-chart/components/tooltip/utils/tooltip-styles.css

@@ -1,23 +1,23 @@
-._1u58xor0-3-11-2 {
+._1u58xor0-3-12-0 {
   display: flex;
   flex-wrap: wrap;
   overflow-wrap: anywhere;
   margin-left: var(--dt-spacings-size-4, 4px);
   margin-right: var(--dt-spacings-size-4, 4px);
 }
-._1u58xor1-3-11-2 {
+._1u58xor1-3-12-0 {
   font-weight: var(--dt-typography-text-small-emphasized-weight, 500);
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._1u58xor1-3-11-2::after {
+._1u58xor1-3-12-0::after {
   content: " ";
   white-space: pre;
 }
-._1u58xor2-3-11-2 {
+._1u58xor2-3-12-0 {
   flex: 0 1 auto;
   font-weight: var(--dt-typography-text-small-default-weight, 400);
 }
-._1u58xor3-3-11-2 {
+._1u58xor3-3-12-0 {
   flex: 1 1 auto;
   font-weight: var(--dt-typography-text-small-default-weight, 400);
 }

package/charts/xy-chart/components/tooltip/utils/tooltip-styles.sty.js

@@ -24,7 +24,7 @@ __export(tooltip_styles_css_exports, {
 });
 module.exports = __toCommonJS(tooltip_styles_css_exports);
 var import_tooltip_styles_css_ts_vanilla = require("./tooltip-styles.css");
-var axisName = "_1u58xor1-3-11-2";
-var axisValue = "_1u58xor2-3-11-2";
-var duration = "_1u58xor3-3-11-2";
-var wrapper = "_1u58xor0-3-11-2";
+var axisName = "_1u58xor1-3-12-0";
+var axisValue = "_1u58xor2-3-12-0";
+var duration = "_1u58xor3-3-12-0";
+var wrapper = "_1u58xor0-3-12-0";

package/charts/xy-chart/context/XYChartThresholds.context.js

@@ -27,11 +27,17 @@ const NoThresholdData = {
   thresholds: [],
   offset: {
     left: 0,
-    right: 0
+    right: 0,
+    top: 0,
+    bottom: 0
   },
   yAxes: {
     left: /* @__PURE__ */ new Set(),
     right: /* @__PURE__ */ new Set()
+  },
+  xAxes: {
+    top: /* @__PURE__ */ new Set(),
+    bottom: /* @__PURE__ */ new Set()
   }
 };
 const XYChartThresholdsContext = (0, import_react.createContext)(NoThresholdData);

package/charts/xy-chart/context/XYChartToolbar.context.d.ts

@@ -1,3 +1,3 @@
-import type { XYChartToolbar } from '../types/xy-chart-props.js';
+import type { XYChartToolbar } from '../types/xy-chart-internals.js';
 export declare const XYChartToolbarContext: import("react").Context<XYChartToolbar | undefined>;
 //# sourceMappingURL=XYChartToolbar.context.d.ts.map

package/charts/xy-chart/hooks/useToolbar.d.ts

@@ -1,2 +1,2 @@
-export declare const useToolbar: () => import("../types/xy-chart-props.js").XYChartToolbar;
+export declare const useToolbar: () => import("../types/xy-chart-internals.js").XYChartToolbar;
 //# sourceMappingURL=useToolbar.d.ts.map

package/charts/xy-chart/hooks/useXYChartCrosshairHidden.d.ts

@@ -0,0 +1,5 @@
+export declare function useXYChartCrosshairHidden(): {
+    hideHorizontal: boolean;
+    hideVertical: boolean;
+};
+//# sourceMappingURL=useXYChartCrosshairHidden.d.ts.map

package/charts/xy-chart/hooks/useXYChartCrosshairHidden.js

@@ -0,0 +1,34 @@
+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 useXYChartCrosshairHidden_exports = {};
+__export(useXYChartCrosshairHidden_exports, {
+  useXYChartCrosshairHidden: () => useXYChartCrosshairHidden
+});
+module.exports = __toCommonJS(useXYChartCrosshairHidden_exports);
+var import_useXYChartData = require("./useXYChartData.js");
+function useXYChartCrosshairHidden() {
+  const { axes } = (0, import_useXYChartData.useXYChartData)();
+  return {
+    hideHorizontal: !axes.some((axis) => axis.coordinate === "y") || axes.some(
+      (axis) => axis.coordinate === "y" && axis.hideCrosshair === true
+    ),
+    hideVertical: !axes.some((axis) => axis.coordinate === "x") || axes.some(
+      (axis) => axis.coordinate === "x" && axis.hideCrosshair === true
+    )
+  };
+}

package/charts/xy-chart/layout/XYChartLayout.css

@@ -1,10 +1,10 @@
-._1ru1qe70-3-11-2 {
+._1ru1qe70-3-12-0 {
   pointer-events: none;
   width: 100%;
   height: 100%;
   z-index: 1;
 }
-._1ru1qe71-3-11-2 {
+._1ru1qe71-3-12-0 {
   top: -5.5px;
   left: -5.5px;
   width: calc(100% + 11px);

package/charts/xy-chart/layout/XYChartLayout.sty.js

@@ -23,5 +23,5 @@ __export(XYChartLayout_css_exports, {
 module.exports = __toCommonJS(XYChartLayout_css_exports);
 var import_ChartGrid_css_ts_vanilla = require("../../core/components/chart-grid/ChartGrid.css");
 var import_XYChartLayout_css_ts_vanilla = require("./XYChartLayout.css");
-var datapointCanvasPlot = "_1ru1qe71-3-11-2 _13lzg4k0-3-11-2 _1ru1qe70-3-11-2";
-var rectangleCanvasPlot = "_13lzg4k0-3-11-2 _1ru1qe70-3-11-2";
+var datapointCanvasPlot = "_1ru1qe71-3-12-0 _13lzg4k0-3-12-0 _1ru1qe70-3-12-0";
+var rectangleCanvasPlot = "_13lzg4k0-3-12-0 _1ru1qe70-3-12-0";

package/charts/xy-chart/processing-strategies/strategies/area-series.js

@@ -385,7 +385,7 @@ class AreaSeriesStrategy extends import_fast_series.FastSeriesBaseStrategy {
         prev = { minBoundary: 0, maxBoundary: 0 };
         groupsByX1.set(x1Ms, prev);
       }
-      stackingOffset = y1 > 0 ? prev.maxBoundary : prev.minBoundary;
+      stackingOffset = y1 >= 0 ? prev.maxBoundary : prev.minBoundary;
       const domainByX0 = this.fastStackDomain.get(axisKey);
       const domainByX1 = domainByX0 && domainByX0.get(x0Ms);
       const acc = domainByX1 && domainByX1.get(x1Ms);