@dynatrace/strato-components 3.11.2 → 3.12.0

package/charts/xy-chart/components/displays/BarDisplay/BarLabelOverlay.css

@@ -1,19 +1,14 @@
-._b76tm80-3-11-2 {
+._b76tm80-3-12-0 {
   position: absolute;
   inset: 0;
   overflow: hidden;
   pointer-events: none;
 }
-._b76tm81-3-11-2 {
+._b76tm81-3-12-0 {
   position: absolute;
   white-space: nowrap;
   font-size: var(--dt-typography-text-small-default-size, 12px);
   font-family: var(--dt-typography-text-small-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-weight: var(--dt-typography-text-small-default-weight, 400);
   line-height: 1;
-}
-._b76tm82-3-11-2 {
-  position: absolute;
-  overflow: hidden;
-  pointer-events: none;
 }

package/charts/xy-chart/components/displays/BarDisplay/BarLabelOverlay.css.d.ts

@@ -1,4 +1,3 @@
 export declare const overlayContainer: string;
 export declare const labelSpan: string;
-export declare const labelClipWrapper: string;
 //# sourceMappingURL=BarLabelOverlay.css.d.ts.map

package/charts/xy-chart/components/displays/BarDisplay/BarLabelOverlay.sty.js

@@ -17,12 +17,10 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var BarLabelOverlay_css_exports = {};
 __export(BarLabelOverlay_css_exports, {
-  labelClipWrapper: () => labelClipWrapper,
   labelSpan: () => labelSpan,
   overlayContainer: () => overlayContainer
 });
 module.exports = __toCommonJS(BarLabelOverlay_css_exports);
 var import_BarLabelOverlay_css_ts_vanilla = require("./BarLabelOverlay.css");
-var labelClipWrapper = "_b76tm82-3-11-2";
-var labelSpan = "_b76tm81-3-11-2";
-var overlayContainer = "_b76tm80-3-11-2";
+var labelSpan = "_b76tm81-3-12-0";
+var overlayContainer = "_b76tm80-3-12-0";

package/charts/xy-chart/components/displays/BarDisplay/HorizontalBarLabel.d.ts

@@ -13,19 +13,12 @@ interface HorizontalBarLabelProps {
     truncationMode: TruncationMode;
 }
 /**
- * HTML "split-clip" label for a single horizontal bar.
+ * HTML label for a single horizontal bar. Colored via a hard-stop gradient
+ * clipped to the text rather than two overlapping copies of the text, which
+ * used to render visibly bolder on Windows (APPDEV-19526).
  *
- * The label renders twice: an outer copy (`outsideColor`) spans from the bar's
- * leading edge to the chart's opposite edge so long labels overflow the bar
- * up to the chart bounds; a wrapper at the bar's bounds clips an inner copy
- * (`insideColor`) via `overflow: hidden`. Where the two overlap, the inner
- * copy paints on top so the section *inside the bar* picks up the contrast
- * color while the section *outside the bar* keeps the neutral text color.
- *
- * When `isReversed` is true (the numerical X axis has `reversed` set, i.e.
- * RTL bars) the layout mirrors: bars grow right-to-left and the label anchors
- * at the bar's right edge (the zero-baseline side), allowing overflow toward
- * the left edge.
+ * When `isReversed` is true (RTL), the layout mirrors: bars grow
+ * right-to-left and the label anchors at the bar's right edge.
  */
 export declare function HorizontalBarLabel({ x, y, barWidth, barHeight, canvasWidth, isReversed, text, insideColor, outsideColor, truncationMode, }: Readonly<HorizontalBarLabelProps>): ReactNode;
 export declare namespace HorizontalBarLabel {

package/charts/xy-chart/components/displays/BarDisplay/HorizontalBarLabel.js

@@ -21,7 +21,6 @@ __export(HorizontalBarLabel_exports, {
 });
 module.exports = __toCommonJS(HorizontalBarLabel_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = require("react");
 var import_BarLabelOverlay_css = require("./BarLabelOverlay.sty.js");
 var import_label_utils = require("./label-utils.js");
 var import_chars_font_width_map = require("../../../../core/components/text-ellipsis/chars-font-width-map.js");
@@ -52,30 +51,25 @@ function HorizontalBarLabel({
     import_chars_font_width_map.charsFontWidth12pixelsSize400Map,
     truncationMode
   );
-  const anchor = isReversed ? { right: import_label_utils.BAR_LABEL_PADDING, textAlign: "right" } : { left: x + import_label_utils.BAR_LABEL_PADDING };
-  const outerStyle = {
-    ...anchor,
+  const insideExtent = Math.max(
+    0,
+    Math.min(availLength, barWidth - import_label_utils.BAR_LABEL_PADDING)
+  );
+  const insidePercent = insideExtent / availLength * 100;
+  const gradient = isReversed ? `linear-gradient(to right, ${outsideColor} 0%, ${outsideColor} ${100 - insidePercent}%, ${insideColor} ${100 - insidePercent}%, ${insideColor} 100%)` : `linear-gradient(to right, ${insideColor} 0%, ${insideColor} ${insidePercent}%, ${outsideColor} ${insidePercent}%, ${outsideColor} 100%)`;
+  const style = {
+    ...isReversed ? {
+      right: canvasWidth - (x + barWidth) + import_label_utils.BAR_LABEL_PADDING,
+      textAlign: "right"
+    } : { left: x + import_label_utils.BAR_LABEL_PADDING },
     top: centerY,
     transform: "translateY(-50%)",
     width: availLength,
-    color: outsideColor
-  };
-  const wrapperStyle = {
-    left: x,
-    top: y,
-    width: barWidth,
-    height: barHeight
-  };
-  const innerStyle = {
-    ...isReversed ? anchor : { left: import_label_utils.BAR_LABEL_PADDING },
-    top: barHeight / 2,
-    transform: "translateY(-50%)",
-    width: availLength,
-    color: insideColor
+    backgroundImage: gradient,
+    WebkitBackgroundClip: "text",
+    backgroundClip: "text",
+    color: "transparent"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_BarLabelOverlay_css.labelSpan, style: outerStyle, children: truncated }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_BarLabelOverlay_css.labelClipWrapper, style: wrapperStyle, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_BarLabelOverlay_css.labelSpan, style: innerStyle, children: truncated }) })
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_BarLabelOverlay_css.labelSpan, style, children: truncated });
 }
 HorizontalBarLabel["displayName"] = "HorizontalBarLabel";

package/charts/xy-chart/components/displays/BarDisplay/VerticalBarLabel.d.ts

@@ -13,12 +13,8 @@ interface VerticalBarLabelProps {
     truncationMode: TruncationMode;
 }
 /**
- * HTML "split-clip" label for a single vertical bar.
- *
- * Mirrors the horizontal split-clip pattern but rotated. The constraining
- * dimension is the bar's WIDTH (perpendicular to the rotated text's reading
- * direction); the bar's height does not constrain a rotated label — the
- * available text length runs the full chart height minus padding.
+ * HTML label for a single vertical (rotated) bar — see `HorizontalBarLabel`
+ * for the coloring approach explanation.
  *
  * When `isReversed` is false (BTT, normal) the bar grows upward and the label
  * is rotated −90°, reading bottom-to-top.

package/charts/xy-chart/components/displays/BarDisplay/VerticalBarLabel.js

@@ -21,7 +21,6 @@ __export(VerticalBarLabel_exports, {
 });
 module.exports = __toCommonJS(VerticalBarLabel_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = require("react");
 var import_BarLabelOverlay_css = require("./BarLabelOverlay.sty.js");
 var import_label_utils = require("./label-utils.js");
 var import_chars_font_width_map = require("../../../../core/components/text-ellipsis/chars-font-width-map.js");
@@ -54,29 +53,27 @@ function VerticalBarLabel({
   const centerX = x + barWidth / 2;
   const centerY = canvasHeight / 2;
   const rotation = isReversed ? "rotate(90deg)" : "rotate(-90deg)";
-  const outerStyle = {
+  const toGradientPosition = (screenY) => {
+    const t = (screenY - import_label_utils.BAR_LABEL_PADDING) / availLength;
+    return isReversed ? t : 1 - t;
+  };
+  const barStart = toGradientPosition(y);
+  const barEnd = toGradientPosition(y + barHeight);
+  const insideStart = Math.max(0, Math.min(1, Math.min(barStart, barEnd)));
+  const insideEnd = Math.max(0, Math.min(1, Math.max(barStart, barEnd)));
+  const insideStartPercent = insideStart * 100;
+  const insideEndPercent = insideEnd * 100;
+  const gradient = `linear-gradient(to right, ${outsideColor} 0%, ${outsideColor} ${insideStartPercent}%, ${insideColor} ${insideStartPercent}%, ${insideColor} ${insideEndPercent}%, ${outsideColor} ${insideEndPercent}%, ${outsideColor} 100%)`;
+  const style = {
     left: centerX,
     top: centerY,
     transform: `translate(-50%, -50%) ${rotation}`,
     width: availLength,
-    color: outsideColor
-  };
-  const wrapperStyle = {
-    left: x,
-    top: y,
-    width: barWidth,
-    height: barHeight
-  };
-  const innerStyle = {
-    left: barWidth / 2,
-    top: centerY - y,
-    transform: `translate(-50%, -50%) ${rotation}`,
-    width: availLength,
-    color: insideColor
+    backgroundImage: gradient,
+    WebkitBackgroundClip: "text",
+    backgroundClip: "text",
+    color: "transparent"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_BarLabelOverlay_css.labelSpan, style: outerStyle, children: truncated }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_BarLabelOverlay_css.labelClipWrapper, style: wrapperStyle, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_BarLabelOverlay_css.labelSpan, style: innerStyle, children: truncated }) })
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_BarLabelOverlay_css.labelSpan, style, children: truncated });
 }
 VerticalBarLabel["displayName"] = "VerticalBarLabel";

package/charts/xy-chart/components/displays/RectLabelOverlay.css

@@ -1,10 +1,10 @@
-._1a48u8w0-3-11-2 {
+._1a48u8w0-3-12-0 {
   position: absolute;
   inset: 0;
   overflow: hidden;
   pointer-events: none;
 }
-._1a48u8w1-3-11-2 {
+._1a48u8w1-3-12-0 {
   position: absolute;
   white-space: nowrap;
   font-size: var(--dt-typography-text-small-default-size, 12px);
@@ -12,7 +12,7 @@
   font-weight: var(--dt-typography-text-small-default-weight, 400);
   line-height: 1;
 }
-._1a48u8w2-3-11-2 {
+._1a48u8w2-3-12-0 {
   position: absolute;
   overflow: hidden;
   pointer-events: none;

package/charts/xy-chart/components/displays/RectLabelOverlay.sty.js

@@ -23,6 +23,6 @@ __export(RectLabelOverlay_css_exports, {
 });
 module.exports = __toCommonJS(RectLabelOverlay_css_exports);
 var import_RectLabelOverlay_css_ts_vanilla = require("./RectLabelOverlay.css");
-var rectLabelClipWrapper = "_1a48u8w2-3-11-2";
-var rectLabelSpan = "_1a48u8w1-3-11-2";
-var rectOverlayContainer = "_1a48u8w0-3-11-2";
+var rectLabelClipWrapper = "_1a48u8w2-3-12-0";
+var rectLabelSpan = "_1a48u8w1-3-12-0";
+var rectOverlayContainer = "_1a48u8w0-3-12-0";

package/charts/xy-chart/components/displays/area-accessors.js

@@ -37,17 +37,19 @@ function applyNumericalBarScaleTransformations(args, accessorCoord, baseline, re
     v0 = !(0, import_lodash_es.isNil)(v0) ? v0 + accumulator : accumulator;
     v1 = !(0, import_lodash_es.isNil)(v1) ? v1 + accumulator : accumulator;
   }
+  const applyFn = (v, fn) => !(0, import_lodash_es.isNil)(v) ? fn(v) : v;
   if (relAccessor && isNotBaseline && !(0, import_lodash_es.isNil)(binDomain) && isSeriesStacked) {
+    const effectiveDomain = binDomain || 1;
     return {
-      v0: !(0, import_lodash_es.isNil)(v0) ? v0 / binDomain * 100 : v0,
-      v1: !(0, import_lodash_es.isNil)(v1) ? v1 / binDomain * 100 : v1,
+      v0: applyFn(v0, (n) => n / effectiveDomain * 100),
+      v1: applyFn(v1, (n) => n / effectiveDomain * 100),
       scale: args.scale
     };
   }
   if (relAccessor) {
     return {
-      v0: !(0, import_lodash_es.isNil)(v0) ? relAccessor(v0) : v0,
-      v1: !(0, import_lodash_es.isNil)(v1) ? relAccessor(v1) : v1,
+      v0: applyFn(v0, relAccessor),
+      v1: applyFn(v1, relAccessor),
       scale: args.scale
     };
   }

package/charts/xy-chart/components/legend/XYLegend/XYLegend.js

@@ -28,7 +28,8 @@ var import_useChartLayoutLoading = require("../../../../core/components/chart-la
 var import_useChartLayoutOrientation = require("../../../../core/components/chart-layout/hooks/useChartLayoutOrientation.js");
 var import_orientation = require("../../../../core/components/chart-layout/utils/orientation.js");
 var import_ChartLegend = require("../../../../core/components/legend/categorical/ChartLegend.js");
-var import_useTooltipReducer = require("../../../../core/components/overlay-tooltip/useTooltipReducer.js");
+var import_usePinCoordinationActions = require("../../../../core/components/overlay-tooltip/usePinCoordinationActions.js");
+var import_useTooltipActions = require("../../../../core/components/overlay-tooltip/useTooltipActions.js");
 var import_build_categorical_items_from_scale = require("../../../../core/utils/build-categorical-items-from-scale.js");
 var import_safe_get = require("../../../../core/utils/safe-get.js");
 var import_useXYChartColorScales = require("../../../hooks/useXYChartColorScales.js");
@@ -77,7 +78,8 @@ function getLegendItems(series, metadata, isMixedSeries, scaleColorMap, isCatego
   });
 }
 function XYLegend({ series, seriesToMetadata }) {
-  const dispatch = (0, import_useTooltipReducer.useTooltipReducer)();
+  const { reset } = (0, import_useTooltipActions.useTooltipActions)();
+  const { dismissAnnotation } = (0, import_usePinCoordinationActions.usePinCoordinationActions)();
   const { orientation: layoutOrientation } = (0, import_useChartLayoutOrientation.useChartLayoutOrientation)();
   const orientation = (0, import_orientation.getLegendOrientation)(layoutOrientation);
   const setState = (0, import_selectors.useSetState)();
@@ -105,10 +107,11 @@ function XYLegend({ series, seriesToMetadata }) {
   const updateVisibleSeries = (0, import_react.useCallback)(
     (visibleItems) => {
       const visibleIds = new Set(visibleItems.map((item) => item.id));
-      dispatch({ type: "RESET_TOOLTIP" })();
+      reset();
+      dismissAnnotation();
       setState((0, import_reducer_filter_series.reduceFilterSeries)(visibleIds));
     },
-    [setState, dispatch]
+    [setState, reset, dismissAnnotation]
   );
   const updateHighlightedSeriesId = (legendItemId) => {
     setState((prev) => ({ ...prev, highlightedSeriesId: legendItemId }));

package/charts/xy-chart/components/legend/XYLegend/xy-legend.css

@@ -1,3 +1,3 @@
-._1lwufqz0-3-11-2 {
+._1lwufqz0-3-12-0 {
   margin: var(--dt-spacings-size-2, 2px);
 }

package/charts/xy-chart/components/legend/XYLegend/xy-legend.sty.js

@@ -21,4 +21,4 @@ __export(xy_legend_css_exports, {
 });
 module.exports = __toCommonJS(xy_legend_css_exports);
 var import_xy_legend_css_ts_vanilla = require("./xy-legend.css");
-var shapeIconWrapper = "_1lwufqz0-3-11-2";
+var shapeIconWrapper = "_1lwufqz0-3-12-0";

package/charts/xy-chart/components/overlay/XYChartOverlay.js

@@ -41,10 +41,13 @@ var import_selectors2 = require("../../../core/components/overlay-tooltip/select
 var import_SynchronizedSelectionArea = require("../../../core/components/shared-chart-interactions/components/SynchronizedSelectionArea.js");
 var import_useSynchronizedSelection = require("../../../core/components/shared-chart-interactions/hooks/useSynchronizedSelection.js");
 var import_useToolbarHandlerRef = require("../../../core/components/toolbar/hooks/useToolbarHandlerRef.js");
+var import_ChartVariantContext = require("../../../core/context/ChartVariantContext.js");
 var import_useEffectOnValueChange = require("../../../core/hooks/useEffectOnValueChange.js");
 var import_xy_chart_z_index_areas = require("../../constants/xy-chart-z-index-areas.js");
 var import_XYChartSelectionAreaRef_context = require("../../context/XYChartSelectionAreaRef.context.js");
+var import_useSelectConfig = require("../../hooks/useSelectConfig.js");
 var import_useSyncedXScaleByPriority = require("../../hooks/useSyncedXScaleByPriority.js");
+var import_useXYChartCrosshairHidden = require("../../hooks/useXYChartCrosshairHidden.js");
 var import_useXYChartData = require("../../hooks/useXYChartData.js");
 var import_useXYChartId = require("../../hooks/useXYChartId.js");
 const XYChartOverlay = () => {
@@ -74,9 +77,12 @@ const XYChartOverlay = () => {
   const chartId = (0, import_useXYChartId.useXYChartId)();
   const syncedXScale = (0, import_useSyncedXScaleByPriority.useSyncedXScaleByPriority)();
   const { axesMetadata } = (0, import_useXYChartData.useXYChartData)();
+  const { crosshair: crosshairConfig } = (0, import_react.useContext)(import_ChartVariantContext.ChartVariantContext);
   const { zoomOutEnabled } = (0, import_selectors.useZoomState)();
   const isZoomDisabled = !axesMetadata.isZoomEnabled;
   const isPanDisabled = !(axesMetadata.isPanEnabled && zoomOutEnabled);
+  const isSelectDisabled = (0, import_useSelectConfig.useSelectConfig)()?.disabled === true;
+  const { hideHorizontal, hideVertical } = (0, import_useXYChartCrosshairHidden.useXYChartCrosshairHidden)();
   (0, import_react.useEffect)(() => {
     if ((0, import_lodash_es.every)([
       selectState,
@@ -110,7 +116,8 @@ const XYChartOverlay = () => {
     {
       style: {
         zIndex: import_xy_chart_z_index_areas.zIndicesXYChartAreas.overlays,
-        userSelect: selectState?.finished === false ? "none" : "auto"
+        userSelect: selectState?.finished === false ? "none" : "auto",
+        cursor: hideHorizontal && hideVertical ? "default" : crosshairConfig?.cursor
       },
       ref: overlay.overlayRef,
       mode,
@@ -132,6 +139,7 @@ const XYChartOverlay = () => {
       isZoomDisabled,
       isZoomXDisabled: isZoomDisabled,
       isPanDisabled,
+      isSelectDisabled,
       children: [
         (inBounds || pinned || selectState) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartOverlayTooltip.XYChartOverlayTooltip, {}),

package/charts/xy-chart/components/overlay/explore/HighlightedRectangleCanvas.js

@@ -47,10 +47,16 @@ const getMinSizeHighlightBar = (point, canvasWidth, canvasHeight) => {
   const height = Math.max(point.height, import_defaults.MIN_BAR_HIGHLIGHT_SIZE_PX);
   const xExpansion = (width - point.width) / 2;
   const yExpansion = (height - point.height) / 2;
+  const rawX = point.x - xExpansion;
+  const clampedX = Math.max(0, rawX);
+  const clampedWidth = Math.max(
+    0,
+    Math.min(rawX + width, canvasWidth) - clampedX
+  );
   return {
-    x: Math.max(0, Math.min(point.x - xExpansion, canvasWidth - width)),
+    x: clampedX,
     y: Math.max(0, Math.min(point.y - yExpansion, canvasHeight - height)),
-    width,
+    width: clampedWidth,
     height
   };
 };

package/charts/xy-chart/components/overlay/explore/XYChartCrosshair.css

@@ -1,4 +1,4 @@
-._1bbe5uo0-3-11-2 {
+._1bbe5uo0-3-12-0 {
   overflow: visible;
   cursor: crosshair;
   z-index: 1;

package/charts/xy-chart/components/overlay/explore/XYChartCrosshair.js

@@ -47,6 +47,7 @@ var import_useFormatCategory = require("../../../hooks/useFormatCategory.js");
 var import_useGetThresholds = require("../../../hooks/useGetThresholds.js");
 var import_useVisibleAxesConfig = require("../../../hooks/useVisibleAxesConfig.js");
 var import_useVisibleAxesScales = require("../../../hooks/useVisibleAxesScales.js");
+var import_useXYChartCrosshairHidden = require("../../../hooks/useXYChartCrosshairHidden.js");
 var import_useXYChartData = require("../../../hooks/useXYChartData.js");
 var import_useXYChartScales = require("../../../hooks/useXYChartScales.js");
 var import_selectors2 = require("../../../store/selectors.js");
@@ -68,7 +69,9 @@ function XYChartCrosshairLines({
   chartBounds,
   isBottomLabelRotated,
   isTopLabelRotated,
-  widthWithBaseOffset
+  widthWithBaseOffset,
+  hideHorizontal,
+  hideVertical
 }) {
   (0, import_selectors.useSelector)(({ relativeX: relativeX2, relativeY: relativeY2 }) => `${relativeX2}-${relativeY2}`);
   const { relativeX, relativeY, pinned, data } = (0, import_selectors.useTooltipSnapshot)();
@@ -119,8 +122,8 @@ function XYChartCrosshairLines({
   const rightOffset = labels.right && hasVisibleSeriesOnThresholdAxis(thresholdYAxes.right) ? thresholdOffset.right : 0;
   const widthWithOffset = widthWithBaseOffset + leftOffset + rightOffset;
   const isBand = variant === "band";
-  const showHorizontalCrosshair = (!isBand || isHorizontal || !pinned) && !crosshairConfig?.horizontalHidden;
-  const showVerticalCrosshair = (!isBand || !isHorizontal || !pinned) && !crosshairConfig?.verticalHidden;
+  const showHorizontalCrosshair = (!isBand || isHorizontal || !pinned) && !crosshairConfig?.horizontalHidden && !hideHorizontal;
+  const showVerticalCrosshair = (!isBand || !isHorizontal || !pinned) && !crosshairConfig?.verticalHidden && !hideVertical;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { className: (0, import_clsx.default)(import_ChartGrid_css.plotLayout, import_XYChartCrosshair_css.crosshair), children: [
     showHorizontalCrosshair && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_HorizontalCrosshair.HorizontalCrosshair,
@@ -170,6 +173,7 @@ function XYChartCrosshair({
   (0, import_useApplyCallbackOnScroll.useApplyCallbackOnScroll)(pinned, dispatch({ type: "RESET_TOOLTIP" }));
   const isBottomLabelRotated = axesConfig["bottom"]?.tickLabelLayout === "vertical";
   const isTopLabelRotated = axesConfig["top"]?.tickLabelLayout === "vertical";
+  const { hideHorizontal, hideVertical } = (0, import_useXYChartCrosshairHidden.useXYChartCrosshairHidden)();
   const hasVisibleSeriesOnThresholdAxis = (() => {
     if (!filteredSeriesIds) {
       return (_axisIds) => true;
@@ -205,7 +209,9 @@ function XYChartCrosshair({
       chartBounds,
       isBottomLabelRotated,
       isTopLabelRotated,
-      widthWithBaseOffset: width
+      widthWithBaseOffset: width,
+      hideHorizontal,
+      hideVertical
     }
   );
 }

package/charts/xy-chart/components/overlay/explore/XYChartCrosshair.sty.js

@@ -21,4 +21,4 @@ __export(XYChartCrosshair_css_exports, {
 });
 module.exports = __toCommonJS(XYChartCrosshair_css_exports);
 var import_XYChartCrosshair_css_ts_vanilla = require("./XYChartCrosshair.css");
-var crosshair = "_1bbe5uo0-3-11-2";
+var crosshair = "_1bbe5uo0-3-12-0";

package/charts/xy-chart/components/overlay/explore/XYChartExplore.css

@@ -1,4 +1,4 @@
-._cd1yys0-3-11-2 {
+._cd1yys0-3-12-0 {
   top: -11px;
   left: -11px;
   width: calc(100% + 22px);
@@ -6,7 +6,7 @@
   z-index: 2;
   pointer-events: none;
 }
-._cd1yys1-3-11-2 {
+._cd1yys1-3-12-0 {
   top: 0px;
   left: 0px;
   width: calc(100% + 1px);

package/charts/xy-chart/components/overlay/explore/XYChartExplore.sty.js

@@ -23,5 +23,5 @@ __export(XYChartExplore_css_exports, {
 module.exports = __toCommonJS(XYChartExplore_css_exports);
 var import_ChartGrid_css_ts_vanilla = require("../../../../core/components/chart-grid/ChartGrid.css");
 var import_XYChartExplore_css_ts_vanilla = require("./XYChartExplore.css");
-var datapointIndicatorLayout = "_cd1yys1-3-11-2 _13lzg4k0-3-11-2";
-var datapointIndicatorShiftedLayout = "_cd1yys0-3-11-2 _13lzg4k0-3-11-2";
+var datapointIndicatorLayout = "_cd1yys1-3-12-0 _13lzg4k0-3-12-0";
+var datapointIndicatorShiftedLayout = "_cd1yys0-3-12-0 _13lzg4k0-3-12-0";

package/charts/xy-chart/components/overlay/hooks/useOverlayEvents.d.ts

@@ -1,4 +1,4 @@
-import type { RefObject } from 'react';
+import { type RefObject } from 'react';
 import { type InteractionMode, type InteractionTriggers, type ZoomBehavior } from '../../../../core/components/interactions-overlay/types.js';
 import type { _SelectionRef } from '../../../../core/components/selection-area/types.js';
 import type { RelativeAbsolutePosition } from '../../../../core/types/pointer-events.js';

package/charts/xy-chart/components/overlay/hooks/useOverlayEvents.js

@@ -20,12 +20,15 @@ __export(useOverlayEvents_exports, {
   useOverlayEvents: () => useOverlayEvents
 });
 module.exports = __toCommonJS(useOverlayEvents_exports);
+var import_react = require("react");
 var import_useApplyPanDelta = require("./useApplyPanDelta.js");
 var import_useApplyZoomDelta = require("./useApplyZoomDelta.js");
 var import_useResetInteractions = require("./useResetInteractions.js");
 var import_useZoomToSelection = require("./useZoomToSelection.js");
 var import_useGridPlotSize = require("../../../../core/components/chart-grid/hooks/useGridPlotSize.js");
 var import_types = require("../../../../core/components/interactions-overlay/types.js");
+var import_pinCoordinationSelectors = require("../../../../core/components/overlay-tooltip/pinCoordinationSelectors.js");
+var import_usePinCoordinationActions = require("../../../../core/components/overlay-tooltip/usePinCoordinationActions.js");
 var import_useTooltipActions = require("../../../../core/components/overlay-tooltip/useTooltipActions.js");
 var import_useSynchronizedCrosshair = require("../../../../core/components/shared-chart-interactions/hooks/useSynchronizedCrosshair.js");
 var import_useSynchronizedSelection = require("../../../../core/components/shared-chart-interactions/hooks/useSynchronizedSelection.js");
@@ -68,6 +71,8 @@ const useOverlayEvents = () => {
   } = (0, import_useSynchronizedSelection.useSynchronizedSelection)();
   const syncedXScale = (0, import_useSyncedXScaleByPriority.useSyncedXScaleByPriority)();
   const { hover, pin, unpin, reset, outOfBounds } = (0, import_useTooltipActions.useTooltipActions)();
+  const { dismissAnnotation } = (0, import_usePinCoordinationActions.usePinCoordinationActions)();
+  const dismissChartAt = (0, import_pinCoordinationSelectors.useDismissChartTooltipSignal)();
   const {
     updateHoverState: updateSynchronizedCrosshair,
     setDisabled: disableSynchronizedCrosshair
@@ -83,7 +88,15 @@ const useOverlayEvents = () => {
   const resetTooltip = () => {
     setState(import_reducer_explorer.reduceExploreCancelHighlight);
     reset();
+    dismissAnnotation();
   };
+  (0, import_react.useEffect)(() => {
+    if (dismissChartAt === 0) {
+      return;
+    }
+    setState(import_reducer_explorer.reduceExploreCancelHighlight);
+    unpin();
+  }, [dismissChartAt]);
   const handleModeChange = (event) => {
     const canPan = axesMetadata.isPanEnabled && zoomState.zoomOutEnabled;
     const shouldSwitchToPanMode = event.mode === "pan" && canPan;
@@ -130,6 +143,7 @@ const useOverlayEvents = () => {
   const handleUnPin = (position) => {
     setState(import_reducer_explorer.reduceExploreUnPin);
     if (position) {
+      dismissAnnotation();
       const metadata = getDatapoints(position);
       unpin();
       if (metadata.preferred) {
@@ -152,6 +166,7 @@ const useOverlayEvents = () => {
       return;
     }
     const metadata = getDatapoints(position);
+    dismissAnnotation();
     if (metadata.preferred) {
       setState((0, import_reducer_explorer.reduceExplorePin)(metadata.preferred.series.id));
       pin(

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

@@ -35,11 +35,10 @@ var import_selectors = require("../../store/selectors.js");
 var import_grid_templates = require("../../utils/grid-templates.js");
 const XYChartThresholdArea = () => {
   const { thresholds, none } = (0, import_useGetThresholds.useGetThresholds)();
-  const { left, right } = (0, import_useVisibleAxesConfig.useVisibleAxesConfig)();
+  const { left, right, top, bottom } = (0, import_useVisibleAxesConfig.useVisibleAxesConfig)();
   const axesIdToScales = (0, import_useXYChartScales.useXYChartScales)();
   const axesIdToFormatter = (0, import_useAxesFormatter.useAxesFormatter)();
   const { width } = (0, import_useGridPlotSize.useGridPlotSize)();
-  const { left: leftConfig, right: rightConfig } = (0, import_useVisibleAxesConfig.useVisibleAxesConfig)();
   const setState = (0, import_selectors.useSetState)();
   const { axes } = (0, import_useXYChartData.useXYChartData)();
   if (none) {
@@ -48,7 +47,7 @@ const XYChartThresholdArea = () => {
   const leftMarkers = thresholds.reduce(
     (0, import_utils.markersReducer)({
       axis: "left",
-      axisConfig: leftConfig,
+      axisConfig: left,
       axesIdToScales,
       axesIdToFormatter,
       width,
@@ -59,7 +58,29 @@ const XYChartThresholdArea = () => {
   const rightMarkers = thresholds.reduce(
     (0, import_utils.markersReducer)({
       axis: "right",
-      axisConfig: rightConfig,
+      axisConfig: right,
+      axesIdToScales,
+      axesIdToFormatter,
+      width,
+      axes
+    }),
+    []
+  );
+  const topMarkers = thresholds.reduce(
+    (0, import_utils.xMarkersReducer)({
+      axis: "top",
+      axisConfig: top,
+      axesIdToScales,
+      axesIdToFormatter,
+      width,
+      axes
+    }),
+    []
+  );
+  const bottomMarkers = thresholds.reduce(
+    (0, import_utils.xMarkersReducer)({
+      axis: "bottom",
+      axisConfig: bottom,
       axesIdToScales,
       axesIdToFormatter,
       width,
@@ -76,7 +97,7 @@ const XYChartThresholdArea = () => {
       }
     }));
   };
-  const { leftBorder, rightBorder } = (0, import_get_border_threshold.getBorderThreshold)(left, right);
+  const { leftBorder, rightBorder, topBorder, bottomBorder } = (0, import_get_border_threshold.getBorderThresholds)(left, right, top, bottom);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
     leftMarkers.length ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_ChartGridRoot.ChartGrid.GridArea,
@@ -117,6 +138,47 @@ const XYChartThresholdArea = () => {
         }
       },
       "rightThreshold"
+    ) : null,
+    topMarkers.length ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_ChartGridRoot.ChartGrid.GridArea,
+      {
+        gridArea: import_grid_templates.AREAS.topThreshold,
+        "data-testid": "top-threshold-area",
+        children: (args) => {
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_ThresholdBar.ThresholdBar,
+            {
+              borderArea: topBorder,
+              markers: topMarkers,
+              length: args.availableWidth,
+              layout: "horizontal",
+              onHover: handleHover
+            }
+          );
+        }
+      },
+      "topThreshold"
+    ) : null,
+    bottomMarkers.length ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_ChartGridRoot.ChartGrid.GridArea,
+      {
+        gridArea: import_grid_templates.AREAS.bottomThreshold,
+        "data-testid": "bottom-threshold-area",
+        children: (args) => {
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_ThresholdBar.ThresholdBar,
+            {
+              borderArea: bottomBorder,
+              isFlipped: true,
+              markers: bottomMarkers,
+              length: args.availableWidth,
+              layout: "horizontal",
+              onHover: handleHover
+            }
+          );
+        }
+      },
+      "bottomThreshold"
     ) : null
   ] });
 };

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

@@ -1,3 +1,3 @@
-._1mfu0sw0-3-11-2 {
+._1mfu0sw0-3-12-0 {
   z-index: 2;
 }