@dynatrace/strato-components 3.13.2 → 3.14.0

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

@@ -1,4 +1,4 @@
-._cd1yys0-3-13-2 {
+._cd1yys0-3-14-0 {
   top: -11px;
   left: -11px;
   width: calc(100% + 22px);
@@ -6,7 +6,7 @@
   z-index: 2;
   pointer-events: none;
 }
-._cd1yys1-3-13-2 {
+._cd1yys1-3-14-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-13-2 _13lzg4k0-3-13-2";
-var datapointIndicatorShiftedLayout = "_cd1yys0-3-13-2 _13lzg4k0-3-13-2";
+var datapointIndicatorLayout = "_cd1yys1-3-14-0 _13lzg4k0-3-14-0";
+var datapointIndicatorShiftedLayout = "_cd1yys0-3-14-0 _13lzg4k0-3-14-0";

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

@@ -40,7 +40,7 @@ const useApplyPanDelta = () => {
   const { reset } = (0, import_useTooltipActions.useTooltipActions)();
   return (delta) => {
     const newCurrentDomain = /* @__PURE__ */ new Map();
-    const allAxesHaveInfiniteZoom = axes.filter((axis) => (0, import_axis_interactions.isZoomEnabledFor)(axis) && (0, import_axis_interactions.isPanEnabledFor)(axis)).every(import_axis_interactions.isInfiniteZoomEnabledFor);
+    const allAxesHaveInfiniteZoom = axes.filter(import_axis_interactions.isPanEnabledFor).every(import_axis_interactions.isInfiniteZoomEnabledFor);
     for (const axis of axes) {
       let nextDomain;
       const currentScale = (0, import_get_scale.getCurrentScale)(axisIdToScales, axis.id);

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

@@ -41,6 +41,7 @@ const useApplyZoomDelta = () => {
     const newCurrentDomain = /* @__PURE__ */ new Map();
     let zoomInEnabled = false;
     let zoomOutEnabled = false;
+    let panEnabled = false;
     const allAxesHaveInfiniteZoom = axes.filter(import_axis_interactions.isZoomEnabledFor).every((axis) => (0, import_axis_interactions.isInfiniteZoomEnabledFor)(axis));
     for (const axis of axes) {
       if ((0, import_axis_interactions.isZoomEnabledFor)(axis)) {
@@ -60,6 +61,7 @@ const useApplyZoomDelta = () => {
         );
         zoomInEnabled ||= inEnabled;
         zoomOutEnabled ||= outEnabled;
+        panEnabled ||= (0, import_axis_interactions.isPanEnabledFor)(axis) && outEnabled;
         newCurrentDomain.set(
           axis.id,
           nextDomain ? { min: nextDomain[0].valueOf(), max: nextDomain[1].valueOf() } : void 0
@@ -71,7 +73,14 @@ const useApplyZoomDelta = () => {
       }
     }
     resetSelectionState?.();
-    setState((0, import_reducer_zoom.reduceZoomDomain)(newCurrentDomain, zoomInEnabled, zoomOutEnabled));
+    setState(
+      (0, import_reducer_zoom.reduceZoomDomain)(
+        newCurrentDomain,
+        zoomInEnabled,
+        zoomOutEnabled,
+        panEnabled
+      )
+    );
     reset();
   };
 };

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

@@ -35,6 +35,7 @@ var import_useSynchronizedSelection = require("../../../../core/components/share
 var import_zoom = require("../../../../core/types/zoom.js");
 var import_get_percentage_from_pixel = require("../../../../core/utils/get-percentage-from-pixel.js");
 var import_is_touchable_device = require("../../../../core/utils/is-touchable-device.js");
+var import_XYChartOnEvent_context = require("../../../context/XYChartOnEvent.context.js");
 var import_useAreaData = require("../../../hooks/useAreaData.js");
 var import_useBarData = require("../../../hooks/useBarData.js");
 var import_useDotData = require("../../../hooks/useDotData.js");
@@ -48,6 +49,7 @@ var import_reduce_interaction_mode = require("../../../store/reduce-interaction-
 var import_reducer_explorer = require("../../../store/reducer-explorer.js");
 var import_selectors = require("../../../store/selectors.js");
 const useOverlayEvents = () => {
+  const { onEvent } = (0, import_react.useContext)(import_XYChartOnEvent_context.XYChartOnEventContext);
   const { filteredSeriesWithDatapoints: rectSeriesData } = (0, import_useRectData.useRectData)();
   const { filteredSeriesWithDatapoints: barSeriesData } = (0, import_useBarData.useBarData)();
   const { filteredSeriesWithDatapoints: dotSeriesData } = (0, import_useDotData.useDotData)();
@@ -98,7 +100,7 @@ const useOverlayEvents = () => {
     unpin();
   }, [dismissChartAt]);
   const handleModeChange = (event) => {
-    const canPan = axesMetadata.isPanEnabled && zoomState.zoomOutEnabled;
+    const canPan = axesMetadata.isPanEnabled && zoomState.panEnabled;
     const shouldSwitchToPanMode = event.mode === "pan" && canPan;
     const shouldSwitchToZoomMode = event.mode === "zoom" && axesMetadata.isZoomEnabled;
     if (shouldSwitchToPanMode || shouldSwitchToZoomMode) {
@@ -133,12 +135,18 @@ const useOverlayEvents = () => {
     );
   };
   const handleTogglePin = (shouldPin, position) => {
+    let datapoint;
     if (shouldPin) {
-      handlePin(position);
+      if (!position) {
+        updateSynchronizedCrosshair?.(void 0);
+        return;
+      }
+      datapoint = handlePin(position);
       updateSynchronizedCrosshair?.(void 0);
     } else {
-      handleUnPin(position);
+      datapoint = handleUnPin(position);
     }
+    onEvent?.({ event: "click", datapoint });
   };
   const handleUnPin = (position) => {
     setState(import_reducer_explorer.reduceExploreUnPin);
@@ -157,14 +165,13 @@ const useOverlayEvents = () => {
           }
         );
       }
+      return metadata.preferred?.datapoint;
     } else {
       resetTooltip();
+      return void 0;
     }
   };
   const handlePin = (position) => {
-    if (!position) {
-      return;
-    }
     const metadata = getDatapoints(position);
     dismissAnnotation();
     if (metadata.preferred) {
@@ -179,6 +186,7 @@ const useOverlayEvents = () => {
         }
       );
     }
+    return metadata.preferred?.datapoint;
   };
   const handleReset = (event) => {
     const { mousePosition: position } = event;

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

@@ -39,6 +39,7 @@ const useZoomToSelection = () => {
   const { resetSelectionState } = (0, import_useSynchronizedSelection.useSynchronizedSelection)();
   let zoomInEnabled = false;
   let zoomOutEnabled = false;
+  let panEnabled = false;
   return () => {
     const newCurrentDomain = /* @__PURE__ */ new Map();
     if (!select) {
@@ -63,6 +64,7 @@ const useZoomToSelection = () => {
         );
         zoomInEnabled ||= inEnabled;
         zoomOutEnabled ||= outEnabled;
+        panEnabled ||= (0, import_axis_interactions.isPanEnabledFor)(axis) && outEnabled;
         newCurrentDomain.set(
           axis.id,
           nextDomain ? { min: nextDomain[0].valueOf(), max: nextDomain[1].valueOf() } : void 0
@@ -79,6 +81,13 @@ const useZoomToSelection = () => {
       }
     }
     resetSelectionState?.();
-    setState((0, import_reducer_zoom.reduceZoomDomain)(newCurrentDomain, zoomInEnabled, zoomOutEnabled));
+    setState(
+      (0, import_reducer_zoom.reduceZoomDomain)(
+        newCurrentDomain,
+        zoomInEnabled,
+        zoomOutEnabled,
+        panEnabled
+      )
+    );
   };
 };

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

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

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-13-2 _13lzg4k0-3-13-2";
+var thresholdPlot = "_1mfu0sw0-3-14-0 _13lzg4k0-3-14-0";

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

@@ -42,7 +42,7 @@ const PanButton = () => {
   const panButtonRef = (0, import_react.useRef)(null);
   const intl = (0, import_react_intl.useIntl)();
   const tabIndex = (0, import_useA11yToolbarTabIndex.useA11yToolbarTabIndex)(import_types.INTERACTION_MODE.Pan);
-  const { zoomOutEnabled } = (0, import_selectors.useZoomState)();
+  const { panEnabled } = (0, import_selectors.useZoomState)();
   const interactionMode = (0, import_selectors.useInteractionModeState)();
   const { resetSelectionState } = (0, import_useSynchronizedSelection.useSynchronizedSelection)();
   const isSelected = interactionMode === import_types.INTERACTION_MODE.Pan;
@@ -63,7 +63,7 @@ const PanButton = () => {
           {
             keys: "alt",
             variant: "minimal",
-            disabled: !zoomOutEnabled
+            disabled: !panEnabled
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_styles_css.styledOrText, children: ` ${intl.formatMessage(import_messages.TOOLBAR_MESSAGES.or)} ` }),
@@ -72,7 +72,7 @@ const PanButton = () => {
           {
             keys: import_constants.KeyboardControls.KEYBOARD_PAN_MODE_SHORTCUT_ALTERNATIVE,
             variant: "minimal",
-            disabled: !zoomOutEnabled
+            disabled: !panEnabled
           }
         )
       ] }),
@@ -80,7 +80,7 @@ const PanButton = () => {
       onKeyDown: (0, import_utils.allowWhenKeyIsEnter)(action),
       onClick: action,
       tabIndex,
-      disabled: !zoomOutEnabled,
+      disabled: !panEnabled,
       placement: "menu",
       "data-dt-name": "ToolbarPanMode"
     }

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

@@ -21,7 +21,6 @@ __export(XYChartToolbar_exports, {
 });
 module.exports = __toCommonJS(XYChartToolbar_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_react_intl = require("react-intl");
 var import_DownloadDataButton = require("./DownloadDataButton.js");
 var import_ExploreButton = require("./ExploreButton.js");
 var import_PanButton = require("./PanButton.js");
@@ -39,7 +38,6 @@ var import_useDownload = require("../../hooks/useDownload.js");
 var import_useToolbar = require("../../hooks/useToolbar.js");
 var import_useXYChartData = require("../../hooks/useXYChartData.js");
 var import_useXYChartSelectionAreaRef = require("../../hooks/useXYChartSelectionAreaRef.js");
-var import_messages = require("../../messages/messages.js");
 var import_selectors = require("../../store/selectors.js");
 var import_build_and_download_csv = require("../../utils/build-and-download-csv.js");
 const XYChartToolbar = ({
@@ -52,26 +50,29 @@ const XYChartToolbar = ({
   const { downloadDataCallback } = (0, import_useDownload.useDownload)();
   const interactionMode = (0, import_selectors.useInteractionModeState)();
   const { axesMetadata } = (0, import_useXYChartData.useXYChartData)();
-  const intl = (0, import_react_intl.useIntl)();
   const selectionAreaRef = (0, import_useXYChartSelectionAreaRef.useXYChartSelectionAreaRef)();
   const isZoomEnabled = axesMetadata.isZoomEnabled;
   const isPanEnabled = axesMetadata.isPanEnabled;
   const shouldHideInteractionControls = !isZoomEnabled && !isPanEnabled;
   const exploreBtnPlace = isZoomEnabled || isPanEnabled ? "menu" : "auto";
   const isDownloadEnabled = true;
-  const initialA11yState = (0, import_zoom.getA11yToolbarConfig)({
-    zoom: { enabled: isZoomEnabled },
-    pan: { enabled: isPanEnabled },
-    download: { enabled: isDownloadEnabled },
-    intent: !!intents
-  });
-  const menuIcon = (0, import_get_menu_trigger_icon.getMenuTriggerIcon)(interactionMode, isZoomEnabled);
-  const menuLabel = !isPanEnabled && !isZoomEnabled ? intl.formatMessage(import_messages.XYCHART_MESSAGES.zoomModeExplore) : void 0;
   const menuDisplayMode = shouldHideInteractionControls ? "never" : (0, import_get_menu_trigger_display_mode.getMenuTriggerDisplayMode)({
     isPanEnabled,
     isZoomEnabled,
     isDownloadEnabled
   });
+  const showDefaultToolbarDownloadButton = isDownloadEnabled && !intents;
+  const showMenuToolbarButton = isDownloadEnabled && !!intents?.length;
+  const startsExpanded = !collapsed;
+  const hasExploreMenu = menuDisplayMode === "always" || menuDisplayMode === "expanded" && startsExpanded || menuDisplayMode === "collapsed" && !startsExpanded;
+  const initialA11yState = (0, import_zoom.getA11yToolbarConfig)({
+    zoom: { enabled: isZoomEnabled },
+    pan: { enabled: isPanEnabled },
+    download: { enabled: showDefaultToolbarDownloadButton },
+    intent: !!intents,
+    hasExploreMenu
+  });
+  const menuIcon = (0, import_get_menu_trigger_icon.getMenuTriggerIcon)(interactionMode, isZoomEnabled);
   const { seriesWithDatapoints, datapointMetadataMap, seriesToMetadata } = (0, import_useXYChartData.useXYChartData)();
   const handleDownloadDataToolbar = () => {
     (0, import_build_and_download_csv.buildAndDownloadCsv)(
@@ -81,8 +82,6 @@ const XYChartToolbar = ({
       downloadDataCallback
     );
   };
-  const showDefaultToolbarDownloadButton = isDownloadEnabled && !intents;
-  const showMenuToolbarButton = isDownloadEnabled && !!intents?.length;
   const onClose = () => selectionAreaRef ? selectionAreaRef.current?.focus() : void 0;
   const behaviorTrackingProps = (0, import_useBehavioralTrackingProps.useBehavioralTrackingProps)(toolbarContext)[0];
   return !hidden ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
@@ -100,7 +99,6 @@ const XYChartToolbar = ({
       onMouseLeave,
       menuIcon,
       showMenuDivider: !shouldHideInteractionControls,
-      menuTriggerLabel: menuLabel,
       menuDisplayMode,
       isDownloadEnabled: showMenuToolbarButton,
       intents,

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

@@ -1,23 +1,23 @@
-._1u58xor0-3-13-2 {
+._1u58xor0-3-14-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-13-2 {
+._1u58xor1-3-14-0 {
   font-weight: var(--dt-typography-text-small-emphasized-weight, 500);
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._1u58xor1-3-13-2::after {
+._1u58xor1-3-14-0::after {
   content: " ";
   white-space: pre;
 }
-._1u58xor2-3-13-2 {
+._1u58xor2-3-14-0 {
   flex: 0 1 auto;
   font-weight: var(--dt-typography-text-small-default-weight, 400);
 }
-._1u58xor3-3-13-2 {
+._1u58xor3-3-14-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-13-2";
-var axisValue = "_1u58xor2-3-13-2";
-var duration = "_1u58xor3-3-13-2";
-var wrapper = "_1u58xor0-3-13-2";
+var axisName = "_1u58xor1-3-14-0";
+var axisValue = "_1u58xor2-3-14-0";
+var duration = "_1u58xor3-3-14-0";
+var wrapper = "_1u58xor0-3-14-0";

package/charts/xy-chart/constants/defaults.js

@@ -54,7 +54,8 @@ const DEFAULT_AXIS_CONFIG = {
 const initialState = {
   zoom: {
     zoomInEnabled: true,
-    zoomOutEnabled: false
+    zoomOutEnabled: false,
+    panEnabled: false
   },
   currentDomain: void 0,
   select: void 0,

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

@@ -0,0 +1,6 @@
+import type { XYChartOnEventPayload } from '../types/xy-chart-props.js';
+export type XYChartOnEventContextValue = {
+    onEvent?: (payload: XYChartOnEventPayload) => void;
+};
+export declare const XYChartOnEventContext: import("react").Context<XYChartOnEventContextValue>;
+//# sourceMappingURL=XYChartOnEvent.context.d.ts.map

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

@@ -0,0 +1,27 @@
+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 XYChartOnEvent_context_exports = {};
+__export(XYChartOnEvent_context_exports, {
+  XYChartOnEventContext: () => XYChartOnEventContext
+});
+module.exports = __toCommonJS(XYChartOnEvent_context_exports);
+var import_react = require("react");
+const XYChartOnEventContext = (0, import_react.createContext)(
+  {}
+);
+XYChartOnEventContext["displayName"] = "XYChartOnEventContext";

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

@@ -1,10 +1,10 @@
-._1ru1qe70-3-13-2 {
+._1ru1qe70-3-14-0 {
   pointer-events: none;
   width: 100%;
   height: 100%;
   z-index: 1;
 }
-._1ru1qe71-3-13-2 {
+._1ru1qe71-3-14-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-13-2 _13lzg4k0-3-13-2 _1ru1qe70-3-13-2";
-var rectangleCanvasPlot = "_13lzg4k0-3-13-2 _1ru1qe70-3-13-2";
+var datapointCanvasPlot = "_1ru1qe71-3-14-0 _13lzg4k0-3-14-0 _1ru1qe70-3-14-0";
+var rectangleCanvasPlot = "_13lzg4k0-3-14-0 _1ru1qe70-3-14-0";

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

@@ -302,15 +302,18 @@ class BarSeriesStrategy extends import_fast_series.FastSeriesBaseStrategy {
     if (!(0, import_get_datapoints.isFlatStringPath)(x0Acc) || !(0, import_get_datapoints.isFlatStringPath)(x1Acc) || !(0, import_get_datapoints.isFlatStringPath)(y1Acc) || !(0, import_get_datapoints.isFlatStringPath)(seriesProps.seriesIdAccessor)) {
       return false;
     }
-    const datum0 = data[0];
-    if (datum0 === void 0) {
+    if (data.length === 0) {
       return false;
     }
     if ((0, import_guards.isTime)(xAxis.type)) {
-      return datum0[x0Acc] instanceof Date && datum0[x1Acc] instanceof Date && typeof datum0[y1Acc] === "number";
+      return data.every(
+        (d) => d[x0Acc] instanceof Date && typeof d[y1Acc] === "number" && (d[x1Acc] === void 0 || d[x1Acc] instanceof Date)
+      );
     }
     if ((0, import_guards.isLinear)(xAxis.type)) {
-      return typeof datum0[x0Acc] === "number" && typeof datum0[x1Acc] === "number" && typeof datum0[y1Acc] === "number";
+      return data.every(
+        (d) => typeof d[x0Acc] === "number" && typeof d[x1Acc] === "number" && typeof d[y1Acc] === "number"
+      );
     }
     return false;
   }
@@ -495,7 +498,12 @@ class BarSeriesStrategy extends import_fast_series.FastSeriesBaseStrategy {
   }
   buildBarDatapoint(datum, x0Raw, x1Raw, y1, xAxisType) {
     if ((0, import_guards.isTime)(xAxisType)) {
-      return { ...datum, x0: x0Raw, x1: x1Raw, y1 };
+      return {
+        ...datum,
+        x0: x0Raw,
+        x1: x1Raw instanceof Date ? x1Raw : void 0,
+        y1
+      };
     }
     return { ...datum, x0: x0Raw, x1: x1Raw, y1 };
   }

package/charts/xy-chart/processing-strategies/utils/cast-data/cast-data-types.js

@@ -78,20 +78,23 @@ function castDataType(value, axisType) {
   return cast[value.constructor.name]?.(value);
 }
 function castDynamicThresholdsDataType(data, xAxisType, yAxisType) {
-  return data.reduce((acc, d) => {
-    const x = castDataType(d.x, xAxisType);
-    const yMin = castDataType((0, import_get_y_value.getYValue)(d, "min"), yAxisType);
-    const yMax = castDataType((0, import_get_y_value.getYValue)(d, "max"), yAxisType);
-    const isValidThreshold = x !== void 0 && yMin !== void 0 && yMax !== void 0;
-    if (isValidThreshold) {
-      if ((0, import_type_guards.isPointThreshold)(yMin, yMax)) {
-        acc.push({ x, y: yMin });
-      } else {
-        acc.push({ x, yMin, yMax });
+  return data.reduce(
+    (acc, d) => {
+      const x = castDataType(d.x, xAxisType);
+      const yMin = castDataType((0, import_get_y_value.getYValue)(d, "min"), yAxisType);
+      const yMax = castDataType((0, import_get_y_value.getYValue)(d, "max"), yAxisType);
+      const isValidThreshold = x !== void 0 && yMin !== void 0 && yMax !== void 0;
+      if (isValidThreshold) {
+        if ((0, import_type_guards.isPointThreshold)(yMin, yMax)) {
+          acc.push({ x, y: yMin });
+        } else {
+          acc.push({ x, yMin, yMax });
+        }
       }
-    }
-    return acc;
-  }, []);
+      return acc;
+    },
+    []
+  );
 }
 function castStaticThresholdsDataType(data, yAxisType) {
   const yMin = castDataType((0, import_get_y_value.getYValue)(data, "min"), yAxisType);

package/charts/xy-chart/providers/XYChartOnEventProvider.d.ts

@@ -0,0 +1,4 @@
+import { type PropsWithChildren } from 'react';
+import { type XYChartOnEventContextValue } from '../context/XYChartOnEvent.context.js';
+export declare const XYChartOnEventProvider: ({ children, onEvent, }: PropsWithChildren<XYChartOnEventContextValue>) => import("react").JSX.Element;
+//# sourceMappingURL=XYChartOnEventProvider.d.ts.map

package/charts/xy-chart/providers/XYChartOnEventProvider.js

@@ -0,0 +1,32 @@
+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 XYChartOnEventProvider_exports = {};
+__export(XYChartOnEventProvider_exports, {
+  XYChartOnEventProvider: () => XYChartOnEventProvider
+});
+module.exports = __toCommonJS(XYChartOnEventProvider_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_XYChartOnEvent_context = require("../context/XYChartOnEvent.context.js");
+const XYChartOnEventProvider = ({
+  children,
+  onEvent
+}) => {
+  const value = (0, import_react.useMemo)(() => ({ onEvent }), [onEvent]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartOnEvent_context.XYChartOnEventContext.Provider, { value, children });
+};

package/charts/xy-chart/providers/XYChartStoreDomainSync.js

@@ -24,6 +24,7 @@ var import_react = require("react");
 var import_useXYChartData = require("../hooks/useXYChartData.js");
 var import_selectors = require("../store/selectors.js");
 var import_get_current_domain_axis = require("../utils/get-current-domain-axis.js");
+var import_is_pan_allowed = require("../utils/is-pan-allowed.js");
 var import_is_zoom_out_allowed = require("../utils/is-zoom-out-allowed.js");
 const XYChartStoreDomainSync = ({ children }) => {
   const { axes, axisIdToScaleDomain } = (0, import_useXYChartData.useXYChartData)();
@@ -31,11 +32,13 @@ const XYChartStoreDomainSync = ({ children }) => {
   (0, import_react.useEffect)(() => {
     const currentDomainMap = (0, import_get_current_domain_axis.getCurrentDomainMap)(axes);
     const zoomOutAllowed = (0, import_is_zoom_out_allowed.isZoomOutAllowed)(axes, axisIdToScaleDomain);
+    const panAllowed = (0, import_is_pan_allowed.isPanAllowed)(axes, axisIdToScaleDomain);
     setState((prev) => ({
       ...prev,
       zoom: {
         ...prev.zoom,
-        zoomOutEnabled: zoomOutAllowed
+        zoomOutEnabled: zoomOutAllowed,
+        panEnabled: panAllowed
       },
       currentDomain: currentDomainMap
     }));

package/charts/xy-chart/store/reducer-reset.js

@@ -32,6 +32,7 @@ function reduceResetInteractions({
     zoom: {
       zoomInEnabled: true,
       zoomOutEnabled: false,
+      panEnabled: false,
       ...zoomStatus
     }
   });

package/charts/xy-chart/store/reducer-zoom.d.ts

@@ -1,3 +1,3 @@
 import { type XYChartState } from '../types/state.js';
-export declare function reduceZoomDomain(domain: XYChartState['currentDomain'], zoomInEnabled: boolean, zoomOutEnabled: boolean): (prev: XYChartState) => XYChartState;
+export declare function reduceZoomDomain(domain: XYChartState['currentDomain'], zoomInEnabled: boolean, zoomOutEnabled: boolean, panEnabled: boolean): (prev: XYChartState) => XYChartState;
 //# sourceMappingURL=reducer-zoom.d.ts.map

package/charts/xy-chart/store/reducer-zoom.js

@@ -20,7 +20,7 @@ __export(reducer_zoom_exports, {
   reduceZoomDomain: () => reduceZoomDomain
 });
 module.exports = __toCommonJS(reducer_zoom_exports);
-function reduceZoomDomain(domain, zoomInEnabled, zoomOutEnabled) {
+function reduceZoomDomain(domain, zoomInEnabled, zoomOutEnabled, panEnabled) {
   return (prev) => ({
     ...prev,
     currentDomain: domain,
@@ -28,7 +28,8 @@ function reduceZoomDomain(domain, zoomInEnabled, zoomOutEnabled) {
     zoom: {
       ...prev.zoom,
       zoomInEnabled,
-      zoomOutEnabled
+      zoomOutEnabled,
+      panEnabled
     },
     select: void 0
   });

package/charts/xy-chart/types/xy-chart-props.d.ts

@@ -23,6 +23,13 @@ import type { ChartToolbarConfig } from '../../core/types/toolbar.js';
 import type { ChartTooltipConfigProps, SeriesDisplayMode } from '../../core/types/tooltip.js';
 import { XYChartAnnotationsConfigProps } from '../context/XYChartAnnotationsConfig.context.js';
 import type { XYChartSelectProps } from '../slots/Select.js';
+/**
+ * @internal
+ */
+export type XYChartOnEventPayload = {
+    event: 'click';
+    datapoint: Record<string, unknown> | undefined;
+};
 /**
  * Props for the xy chart.
  * @public
@@ -65,6 +72,11 @@ export interface XYChartProps extends StylingProps, MaskingProps, AriaLabelingPr
      * @internal
      */
     __downloadDataCallback?: () => void;
+    /**
+     * Fired when a chart interaction event occurs.
+     * @internal
+     */
+    __onEvent?: (payload: XYChartOnEventPayload) => void;
 }
 /**
  * Base series props for the XY chart

package/charts/xy-chart/utils/coloring/bar-datapoint-matches-color-rule.js

@@ -21,9 +21,11 @@ __export(bar_datapoint_matches_color_rule_exports, {
 });
 module.exports = __toCommonJS(bar_datapoint_matches_color_rule_exports);
 var import_lodash_es = require("lodash");
+var import_single_line_name = require("../../../core/utils/single-line-name.js");
 var import_get_fallback_value_accessor = require("../get-fallback-value-accessor.js");
 const barDatapointMatchesColorRule = (datapoint, rule, isValid, series) => {
   const accessor = rule.valueAccessor ?? (0, import_get_fallback_value_accessor.getFallbackValueAccessor)(series);
-  const subject = (0, import_lodash_es.get)(datapoint, accessor);
+  const rawSubject = (0, import_lodash_es.get)(datapoint, accessor);
+  const subject = Array.isArray(rawSubject) ? (0, import_single_line_name.singleLineName)(rawSubject) : rawSubject;
   return !(0, import_lodash_es.isNil)(subject) && isValid(subject, rule.comparator, rule.matchValue);
 };

package/charts/xy-chart/utils/coloring/get-color-selection.d.ts

@@ -3,5 +3,5 @@ import type { XYChartData } from '../../types/xy-chart.js';
 export declare function getColorSelection(colorProp: XYShapeColorProp | undefined, datum: XYChartData): {
     Default: string;
 } | undefined;
-export declare function getColorPaletteSelection(colorProp: XYShapeColorPaletteProp | undefined, datum: XYChartData): "apdex" | "apdex-inverted" | "blue" | "blue-inverted" | "blue-moss" | "blue-moss-inverted" | "blue-steel" | "blue-steel-inverted" | "blue-turquoise" | "blue-turquoise-inverted" | "brown" | "brown-inverted" | "categorical" | "categorical-inverted" | "fireplace" | "fireplace-inverted" | "grey" | "grey-inverted" | "log-level" | "log-level-inverted" | "log-status" | "log-status-inverted" | "magenta" | "magenta-inverted" | "moss" | "moss-inverted" | "orange" | "orange-blue" | "orange-blue-inverted" | "orange-inverted" | "orange-petrol" | "orange-petrol-inverted" | "pear" | "pear-inverted" | "petrol" | "petrol-inverted" | "pink" | "pink-green" | "pink-green-inverted" | "pink-inverted" | "pink-purple" | "pink-purple-inverted" | "purple" | "purple-inverted" | "purple-rain" | "purple-rain-inverted" | "purple-yellow" | "purple-yellow-inverted" | "rainbow" | "rainbow-inverted" | "red" | "red-blue" | "red-blue-inverted" | "red-green" | "red-green-inverted" | "red-inverted" | "red-purple" | "red-purple-inverted" | "security-risk-level" | "security-risk-level-inverted" | "status" | "status-inverted" | "swamps" | "swamps-inverted" | "threshold" | "threshold-inverted" | "turquoise" | "turquoise-inverted" | "vulnerability-status" | "vulnerability-status-inverted" | "yellow" | "yellow-inverted" | string[] | import("../../../index.js").ColoredRange[] | Record<string, string> | undefined;
+export declare function getColorPaletteSelection(colorProp: XYShapeColorPaletteProp | undefined, datum: XYChartData): "apdex" | "apdex-inverted" | "aurora" | "aurora-inverted" | "blue" | "blue-inverted" | "blue-moss" | "blue-moss-inverted" | "blue-steel" | "blue-steel-inverted" | "blue-turquoise" | "blue-turquoise-inverted" | "brown" | "brown-inverted" | "categorical" | "categorical-inverted" | "categorical-vivid" | "categorical-vivid-inverted" | "fireplace" | "fireplace-inverted" | "grey" | "grey-inverted" | "log-level" | "log-level-inverted" | "log-status" | "log-status-inverted" | "magenta" | "magenta-inverted" | "moss" | "moss-inverted" | "neon" | "neon-inverted" | "orange" | "orange-blue" | "orange-blue-inverted" | "orange-inverted" | "orange-petrol" | "orange-petrol-inverted" | "overdrive" | "overdrive-inverted" | "pear" | "pear-inverted" | "petrol" | "petrol-inverted" | "pink" | "pink-green" | "pink-green-inverted" | "pink-inverted" | "pink-purple" | "pink-purple-inverted" | "purple" | "purple-inverted" | "purple-rain" | "purple-rain-inverted" | "purple-yellow" | "purple-yellow-inverted" | "rainbow" | "rainbow-inverted" | "red" | "red-blue" | "red-blue-inverted" | "red-green" | "red-green-inverted" | "red-inverted" | "red-purple" | "red-purple-inverted" | "security-risk-level" | "security-risk-level-inverted" | "status" | "status-inverted" | "swamps" | "swamps-inverted" | "threshold" | "threshold-inverted" | "tide" | "tide-inverted" | "turquoise" | "turquoise-inverted" | "vulnerability-status" | "vulnerability-status-inverted" | "yellow" | "yellow-inverted" | string[] | import("../../../index.js").ColoredRange[] | Record<string, string> | undefined;
 //# sourceMappingURL=get-color-selection.d.ts.map