@dynatrace/strato-components 3.8.0 → 3.9.0

package/charts/tree-map/utils/get-node-color.d.ts

@@ -1,3 +1,3 @@
-import type { HierarchyRectangularNode } from '@visx/hierarchy/lib/types.js';
+import type { HierarchyRectangularNode } from 'd3-hierarchy';
 import type { InternalTreeMapNode } from '../types/internal.js';
 export declare const getNodeColor: (entry: HierarchyRectangularNode<InternalTreeMapNode>) => string;

package/charts/tree-map/utils/get-node-dimension.d.ts

@@ -1,4 +1,4 @@
-import type { HierarchyRectangularNode } from '@visx/hierarchy/lib/types.js';
+import type { HierarchyRectangularNode } from 'd3-hierarchy';
 import type { InternalTreeMapNode } from '../types/internal.js';
 export declare const getNodeDimension: (entry: HierarchyRectangularNode<InternalTreeMapNode>) => {
     width: number;

package/charts/tree-map/utils/get-node-opacity.d.ts

@@ -1,4 +1,4 @@
-import type { HierarchyRectangularNode } from '@visx/hierarchy/lib/types.js';
+import type { HierarchyRectangularNode } from 'd3-hierarchy';
 import type { LegendItem } from '../../core/components/legend/categorical/types/legend.js';
 import type { HighlightingMap, InternalTreeMapNode } from '../types/internal.js';
 export declare const getNodeOpacity: (entry: HierarchyRectangularNode<InternalTreeMapNode>, highlightingMap: HighlightingMap, highlightedItem?: LegendItem) => number;

package/charts/tree-map/utils/get-node-position.d.ts

@@ -1,4 +1,4 @@
-import type { HierarchyRectangularNode } from '@visx/hierarchy/lib/types.js';
+import type { HierarchyRectangularNode } from 'd3-hierarchy';
 import type { InternalTreeMapNode } from '../types/internal.js';
 export declare const getNodePosition: (entry: HierarchyRectangularNode<InternalTreeMapNode>) => {
     x: number;

package/charts/tree-map/utils/get-tooltip-data.d.ts

@@ -1,4 +1,4 @@
-import type { HierarchyRectangularNode } from '@visx/hierarchy/lib/types.js';
+import type { HierarchyRectangularNode } from 'd3-hierarchy';
 import type { InternalTreeMapNode } from '../types/internal.js';
 export declare const getTooltipData: (leafNodes: HierarchyRectangularNode<InternalTreeMapNode>[], clusterNodes: HierarchyRectangularNode<InternalTreeMapNode>[], relativePosition: {
     x: number;

package/charts/tree-map/utils/get-tooltip-item.d.ts

@@ -1,4 +1,4 @@
-import type { HierarchyRectangularNode } from '@visx/hierarchy/lib/types.js';
+import type { HierarchyRectangularNode } from 'd3-hierarchy';
 import type { Unit } from '@dynatrace-sdk/units';
 import type { Formatter } from '../../core/types/formatter.js';
 import type { InternalTreeMapNode } from '../types/internal.js';

package/charts/tree-map/utils/node-padding.d.ts

@@ -1,4 +1,4 @@
-import { HierarchyRectangularNode } from '@visx/hierarchy/lib/types';
+import type { HierarchyRectangularNode } from 'd3-hierarchy';
 import { type InternalTreeMapNode } from '../types/internal.js';
 export declare function nodePadding<TTreeNode>(node: HierarchyRectangularNode<TTreeNode>, hasParentLabel: boolean): number;
 export declare const nodePaddingTop: (node: HierarchyRectangularNode<InternalTreeMapNode>) => number;

package/charts/tree-map/utils/should-draw-leaf-node.d.ts

@@ -1,3 +1,3 @@
-import type { HierarchyRectangularNode } from '@visx/hierarchy/lib/types.js';
+import type { HierarchyRectangularNode } from 'd3-hierarchy';
 import type { LeafNode } from '../types/guards/node-guards.js';
 export declare const shouldDrawLeafNode: (leaf: HierarchyRectangularNode<LeafNode>) => boolean;

package/charts/tree-map/utils/split-nodes-by-depth.d.ts

@@ -1,4 +1,4 @@
-import type { HierarchyRectangularNode } from '@visx/hierarchy/lib/types.js';
+import type { HierarchyRectangularNode } from 'd3-hierarchy';
 import type { ClusterNode, LeafNode } from '../types/guards/node-guards.js';
 import type { InternalTreeMapNode } from '../types/internal.js';
 export declare const splitNodesByDepth: (nodes: HierarchyRectangularNode<InternalTreeMapNode>[]) => {

package/charts/xy-chart/XYChart.js

@@ -81,9 +81,7 @@ const XYChart = (0, import_react.forwardRef)(
       annotationsConfig?.fixedTracks,
       hiddenTracks.length
     );
-    const hasVisibleAnnotationTracks = tracksQuantity - hiddenTracks.length > 0;
-    const annotationsPadding = hasVisibleAnnotationTracks ? import_defaults.ANNOTATIONS_PADDING_BOTTOM : 0;
-    const annotationsAreaHeight = annotationsVisibleArea + annotationsPadding;
+    const annotationsAreaHeight = annotationsVisibleArea;
     const showAnnotations = (0, import_constants.shouldShowAnnotations)(
       chartGridHeight,
       tracksQuantity

package/charts/xy-chart/components/annotations/XYChartAnnotationsArea.js

@@ -29,7 +29,7 @@ var import_AnnotationsScrollWrapper = require("../../../core/components/annotati
 var import_constants = require("../../../core/components/annotations/constants.js");
 var import_ChartGridRoot = require("../../../core/components/chart-grid/ChartGridRoot.js");
 var import_useGridPlotSize = require("../../../core/components/chart-grid/hooks/useGridPlotSize.js");
-var import_defaults = require("../../constants/defaults.js");
+var import_useVisibleAxesScales = require("../../hooks/useVisibleAxesScales.js");
 var import_useXYChartAnnotationsConfig = require("../../hooks/useXYChartAnnotationsConfig.js");
 var import_useXYChartAnnotationsData = require("../../hooks/useXYChartAnnotationsData.js");
 var import_useXYChartData = require("../../hooks/useXYChartData.js");
@@ -44,6 +44,7 @@ const XYChartAnnotationsArea = () => {
   const annotationsData = (0, import_useXYChartAnnotationsData.useXYChartAnnotationsData)();
   const setState = (0, import_selectors.useSetState)();
   const { width } = (0, import_useGridPlotSize.useGridPlotSize)();
+  const { top: topAxisScale } = (0, import_useVisibleAxesScales.useVisibleAxesScales)();
   const { axes } = (0, import_useXYChartData.useXYChartData)();
   const [behaviorTrackingProps] = (0, import_useBehavioralTrackingProps.useBehavioralTrackingProps)(
     annotationsConfig ?? {}
@@ -72,40 +73,34 @@ const XYChartAnnotationsArea = () => {
     axisType: axis.type,
     axisScale: scale
   }) ? import_AnnotationsTimeDisplay.AnnotationsTimeDisplay : import_AnnotationsNumericalDisplay.AnnotationsNumericalDisplay;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_ChartGridRoot.ChartGrid.GridArea,
-    {
-      paddingBottom: import_defaults.ANNOTATIONS_PADDING_BOTTOM,
-      gridArea: import_grid_templates.AREAS.annotations,
-      children: ({ availableWidth, availableHeight }) => {
-        const labelsOffset = availableWidth - width;
-        const annotationsCommonConfig = {
-          tracks: serializedAnnotationsData,
-          showLabels,
-          labelsOffset,
-          width: availableWidth,
-          markerGroupHover: handleUpdateIndicators,
-          textOverflow: import_constants.DEFAULT_INTEGRATION_TEXT_OVERFLOW,
-          truncateMode: "middle",
-          tooltipConfig: annotationsConfig.tooltip,
-          ...behaviorTrackingProps
-        };
-        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_AnnotationsScrollWrapper.AnnotationsScrollWrapper,
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ChartGridRoot.ChartGrid.GridArea, { gridArea: import_grid_templates.AREAS.annotations, children: ({ availableWidth, availableHeight }) => {
+    const labelsOffset = availableWidth - width;
+    const annotationsCommonConfig = {
+      tracks: serializedAnnotationsData,
+      showLabels,
+      outerBottomLine: !(0, import_lodash_es.isUndefined)(topAxisScale),
+      labelsOffset,
+      width: availableWidth,
+      markerGroupHover: handleUpdateIndicators,
+      textOverflow: import_constants.DEFAULT_INTEGRATION_TEXT_OVERFLOW,
+      truncateMode: "middle",
+      tooltipConfig: annotationsConfig.tooltip,
+      ...behaviorTrackingProps
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_AnnotationsScrollWrapper.AnnotationsScrollWrapper,
+      {
+        height: availableHeight,
+        width: availableWidth + import_constants.SCROLLBAR_THRESHOLD,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          DisplayComponent,
           {
-            height: availableHeight,
-            width: availableWidth + import_constants.SCROLLBAR_THRESHOLD,
-            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              DisplayComponent,
-              {
-                scale,
-                annotationsActions: (annotation) => annotation && annotationsActions?.(annotation),
-                ...annotationsCommonConfig
-              }
-            )
+            scale,
+            annotationsActions: (annotation) => annotation && annotationsActions?.(annotation),
+            ...annotationsCommonConfig
           }
-        );
+        )
       }
-    }
-  );
+    );
+  } });
 };

package/charts/xy-chart/components/annotations/utils/get-indicators-from-annotations.js

@@ -37,6 +37,7 @@ const serializeAnnotationsMarkerFromXYChartData = (data, markerConfig) => {
     hidden: (0, import_evaluate_with_data.evaluateOptionalAttribute)(markerConfig.hidden, data, false),
     priority: (0, import_evaluate_with_data.evaluateOptionalAttribute)(markerConfig.priority, data, 0),
     color: markerConfig.colorAccessor ? (0, import_get_datapoints.getDatumValue)(data, markerConfig.colorAccessor) : void 0,
+    symbolColor: markerConfig.symbolColorAccessor ? (0, import_get_datapoints.getDatumValue)(data, markerConfig.symbolColorAccessor) : void 0,
     title: markerConfig.titleAccessor ? (0, import_get_datapoints.getDatumValue)(data, markerConfig.titleAccessor) : void 0,
     description: markerConfig.descriptionAccessor ? (0, import_get_datapoints.getDatumValue)(data, markerConfig.descriptionAccessor) : void 0,
     indicatorsDisplay: (0, import_evaluate_with_data.evaluateOptionalAttribute)(

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

@@ -1,3 +1,3 @@
-._bidc430-3-8-0 {
+._bidc430-3-9-0 {
   position: relative;
 }

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

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

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

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

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

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

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

@@ -68,7 +68,7 @@ function BarDisplay({
       canvasHeight: height,
       canvasWidth: width,
       opacity: () => import_constants2.DEFAULT_FILL_OPACITY,
-      color: () => color.Default,
+      color: (0, import_bar_accessors.colorAccessor)(color, datapointMetadataMap),
       x: (0, import_bar_accessors.xAccessor)(
         xScale,
         datapointMetadataMap,

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

@@ -1,10 +1,10 @@
-._b76tm80-3-8-0 {
+._b76tm80-3-9-0 {
   position: absolute;
   inset: 0;
   overflow: hidden;
   pointer-events: none;
 }
-._b76tm81-3-8-0 {
+._b76tm81-3-9-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;
 }
-._b76tm82-3-8-0 {
+._b76tm82-3-9-0 {
   position: absolute;
   overflow: hidden;
   pointer-events: none;

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

@@ -118,9 +118,8 @@ function BarLabelOverlay({
     dimensionYScale,
     (0, import_value_representation.relAccessor)(yAxis, axisIdToScaleDomain)
   );
-  const fillHex = (0, import_canvas_color.getCanvasColor)(metadata.color.Default);
-  const insideColor = (0, import_color_contrast.getColorByContrast)(fillHex);
   const outsideColor = import_colors.default.Text.Neutral.Default;
+  const seriesFillHex = (0, import_canvas_color.getCanvasColor)(metadata.color.Default);
   const data = filterToScaleDomain(
     series.data,
     isVertical ? xScale : yScale,
@@ -138,6 +137,9 @@ function BarLabelOverlay({
     const h = hFn(datum);
     const barWidth = Math.abs(w);
     const barHeight = Math.abs(h);
+    const { colorOverride } = datapointMetadataMap.get(datum) ?? {};
+    const fillHex = colorOverride ? (0, import_canvas_color.getCanvasColor)(colorOverride) : seriesFillHex;
+    const insideColor = (0, import_color_contrast.getColorByContrast)(fillHex);
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Fragment, { children: isVertical ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_VerticalBarLabel.VerticalBarLabel,
       {

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

@@ -23,6 +23,6 @@ __export(BarLabelOverlay_css_exports, {
 });
 module.exports = __toCommonJS(BarLabelOverlay_css_exports);
 var import_BarLabelOverlay_css_ts_vanilla = require("./BarLabelOverlay.css");
-var labelClipWrapper = "_b76tm82-3-8-0";
-var labelSpan = "_b76tm81-3-8-0";
-var overlayContainer = "_b76tm80-3-8-0";
+var labelClipWrapper = "_b76tm82-3-9-0";
+var labelSpan = "_b76tm81-3-9-0";
+var overlayContainer = "_b76tm80-3-9-0";

package/charts/xy-chart/components/displays/bar-accessors.d.ts

@@ -1,4 +1,5 @@
 import type { ScaleBand } from 'd3-scale';
+import type { ColorToken } from '../../../core/types/color-palette.js';
 import type { BarScaleLinear } from '../../types/guards.js';
 import type { AnyXYChartScale, MapDatapoints, XYChartAxisDirection } from '../../types/xy-chart-internals.js';
 import type { BarDatapoint } from '../../types/xy-chart.js';
@@ -11,3 +12,9 @@ export declare function xAccessor(scale: AnyXYChartScale, datapointsMetadata: Ma
 export declare function yAccessor(scale: AnyXYChartScale, datapointsMetadata: MapDatapoints, dimensionScale?: ScaleBand<string>, seriesId?: string, relAccessor?: (value: number) => number): (datapoint: BarDatapoint) => number;
 export declare function widthAccessor(scale: AnyXYChartScale, datapointsMetadata: MapDatapoints, dimensionScale?: ScaleBand<string>, relAccessor?: (value: number) => number): (datapoint: BarDatapoint) => number;
 export declare function heightAccessor(scale: AnyXYChartScale, datapointsMetadata: MapDatapoints, dimensionScale?: ScaleBand<string>, relAccessor?: (value: number) => number): (datapoint: BarDatapoint) => number;
+/**
+ * Builds a per-datapoint color accessor for bar series. Each bar is painted with
+ * its `colorOverride` (written by `applyColorRuleToBarSeries`) when present,
+ * falling back to the series-level color resolved from the chart palette.
+ */
+export declare function colorAccessor(seriesColor: ColorToken, datapointsMetadata: MapDatapoints): (datapoint: BarDatapoint) => string;

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

@@ -18,6 +18,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var bar_accessors_exports = {};
 __export(bar_accessors_exports, {
   applyNumericalBarScaleTransformations: () => applyNumericalBarScaleTransformations,
+  colorAccessor: () => colorAccessor,
   heightAccessor: () => heightAccessor,
   widthAccessor: () => widthAccessor,
   xAccessor: () => xAccessor,
@@ -206,3 +207,9 @@ function heightAccessor(scale, datapointsMetadata, dimensionScale, relAccessor)
     relAccessor
   );
 }
+function colorAccessor(seriesColor, datapointsMetadata) {
+  return (datapoint) => {
+    const { colorOverride } = datapointsMetadata.get(datapoint) ?? {};
+    return colorOverride ?? seriesColor.Default;
+  };
+}

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

@@ -98,7 +98,7 @@ function XYLegend({ series, seriesToMetadata }) {
       scaleColorMap,
       isCategoricalRectOnly
     ),
-    // eslint-disable-next-line react-hooks/exhaustive-deps, react-hooks/preserve-manual-memoization
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [series, seriesToMetadata]
   );
   const legendActions = (0, import_getXYLegendActions.getXYLegendActions)(series, seriesToMetadata);

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

@@ -1,3 +1,3 @@
-._1lwufqz0-3-8-0 {
+._1lwufqz0-3-9-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-8-0";
+var shapeIconWrapper = "_1lwufqz0-3-9-0";

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

@@ -1,4 +1,4 @@
-._1bbe5uo0-3-8-0 {
+._1bbe5uo0-3-9-0 {
   overflow: visible;
   cursor: crosshair;
   z-index: 1;

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-8-0";
+var crosshair = "_1bbe5uo0-3-9-0";

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

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

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

@@ -24,6 +24,7 @@ var import_useTooltipActions = require("../../../../core/components/overlay-tool
 var import_useSynchronizedSelection = require("../../../../core/components/shared-chart-interactions/hooks/useSynchronizedSelection.js");
 var import_get_next_pan_domain = require("../../../../core/components/zoom/utils/get-next-pan-domain.js");
 var import_zoom = require("../../../../core/types/zoom.js");
+var import_zoom2 = require("../../../../core/utils/zoom.js");
 var import_useXYChartData = require("../../../hooks/useXYChartData.js");
 var import_useXYChartScales = require("../../../hooks/useXYChartScales.js");
 var import_reducer_pan = require("../../../store/reducer-pan.js");
@@ -54,7 +55,10 @@ const useApplyPanDelta = () => {
           allAxesHaveInfiniteZoom
         );
         nextDomain = [min, max];
-        (0, import_zoom_change_handler.handleZoomChange)(axis, min, max, import_zoom.ZOOM_CHANGE_TYPE.Panning);
+        const panCurrentDomain = currentScale.domain();
+        if (!(0, import_zoom2.isSameDomain)([min, max], panCurrentDomain)) {
+          (0, import_zoom_change_handler.handleZoomChange)(axis, min, max, import_zoom.ZOOM_CHANGE_TYPE.Panning);
+        }
       }
       const currentDomain = currentScale.domain();
       newCurrentDomain.set(

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

@@ -23,6 +23,7 @@ module.exports = __toCommonJS(useApplyZoomDelta_exports);
 var import_useTooltipActions = require("../../../../core/components/overlay-tooltip/useTooltipActions.js");
 var import_useSynchronizedSelection = require("../../../../core/components/shared-chart-interactions/hooks/useSynchronizedSelection.js");
 var import_get_zoom_step = require("../../../../core/components/zoom/utils/get-zoom-step.js");
+var import_zoom = require("../../../../core/utils/zoom.js");
 var import_useXYChartData = require("../../../hooks/useXYChartData.js");
 var import_useXYChartScales = require("../../../hooks/useXYChartScales.js");
 var import_reducer_zoom = require("../../../store/reducer-zoom.js");
@@ -63,7 +64,10 @@ const useApplyZoomDelta = () => {
           axis.id,
           nextDomain ? { min: nextDomain[0].valueOf(), max: nextDomain[1].valueOf() } : void 0
         );
-        (0, import_zoom_change_handler.handleZoomChange)(axis, nextDomain[0], nextDomain[1], type);
+        const zoomCurrentDomain = currentScale.domain();
+        if (!(0, import_zoom.isSameDomain)(nextDomain, zoomCurrentDomain)) {
+          (0, import_zoom_change_handler.handleZoomChange)(axis, nextDomain[0], nextDomain[1], type);
+        }
       }
     }
     resetSelectionState?.();

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

@@ -23,6 +23,7 @@ module.exports = __toCommonJS(useResetInteractions_exports);
 var import_useTooltipActions = require("../../../../core/components/overlay-tooltip/useTooltipActions.js");
 var import_useSynchronizedSelection = require("../../../../core/components/shared-chart-interactions/hooks/useSynchronizedSelection.js");
 var import_zoom = require("../../../../core/types/zoom.js");
+var import_zoom2 = require("../../../../core/utils/zoom.js");
 var import_useXYChartData = require("../../../hooks/useXYChartData.js");
 var import_useXYChartScales = require("../../../hooks/useXYChartScales.js");
 var import_reducer_reset = require("../../../store/reducer-reset.js");
@@ -41,12 +42,16 @@ const useResetInteractions = () => {
       if ((0, import_axis_interactions.isZoomEnabledFor)(axis)) {
         const initialScale = (0, import_get_scale.getInitialScale)(axisIdToScales, axis.id);
         const initialDomain = initialScale.domain();
-        (0, import_zoom_change_handler.handleZoomChange)(
-          axis,
-          initialDomain[0],
-          initialDomain[1],
-          import_zoom.ZOOM_CHANGE_TYPE.Reset
-        );
+        const currentScale = (0, import_get_scale.getCurrentScale)(axisIdToScales, axis.id);
+        const currentDomain = currentScale.domain();
+        if (!(0, import_zoom2.isSameDomain)(currentDomain, initialDomain)) {
+          (0, import_zoom_change_handler.handleZoomChange)(
+            axis,
+            initialDomain[0],
+            initialDomain[1],
+            import_zoom.ZOOM_CHANGE_TYPE.Reset
+          );
+        }
       }
     }
     const allZoomablesAxesHaveInfiniteZoom = axes.filter(import_axis_interactions.isZoomEnabledFor).length > 0 && axes.filter(import_axis_interactions.isZoomEnabledFor).every((axis) => axis.interactions.infinite);

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

@@ -23,6 +23,7 @@ module.exports = __toCommonJS(useZoomToSelection_exports);
 var import_useSynchronizedSelection = require("../../../../core/components/shared-chart-interactions/hooks/useSynchronizedSelection.js");
 var import_get_zoom_step = require("../../../../core/components/zoom/utils/get-zoom-step.js");
 var import_zoom = require("../../../../core/types/zoom.js");
+var import_zoom2 = require("../../../../core/utils/zoom.js");
 var import_useXYChartData = require("../../../hooks/useXYChartData.js");
 var import_useXYChartScales = require("../../../hooks/useXYChartScales.js");
 var import_reducer_zoom = require("../../../store/reducer-zoom.js");
@@ -66,12 +67,15 @@ const useZoomToSelection = () => {
           axis.id,
           nextDomain ? { min: nextDomain[0].valueOf(), max: nextDomain[1].valueOf() } : void 0
         );
-        (0, import_zoom_change_handler.handleZoomChange)(
-          axis,
-          nextDomain[0],
-          nextDomain[1],
-          import_zoom.ZOOM_CHANGE_TYPE.ZoomX
-        );
+        const selectionCurrentDomain = currentScale.domain();
+        if (!(0, import_zoom2.isSameDomain)(nextDomain, selectionCurrentDomain)) {
+          (0, import_zoom_change_handler.handleZoomChange)(
+            axis,
+            nextDomain[0],
+            nextDomain[1],
+            import_zoom.ZOOM_CHANGE_TYPE.ZoomX
+          );
+        }
       }
     }
     resetSelectionState?.();

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

@@ -1,3 +1,3 @@
-._1mfu0sw0-3-8-0 {
+._1mfu0sw0-3-9-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-8-0 _13lzg4k0-3-8-0";
+var thresholdPlot = "_1mfu0sw0-3-9-0 _13lzg4k0-3-9-0";

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

@@ -87,7 +87,6 @@ const XYChartToolbar = ({
   return !hidden ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     import_ChartToolbarRenderer.ChartToolbarRenderer,
     {
-      visible: false,
       visibleWhenMouseInBounds: true,
       handlerRef,
       placement: placement ?? import_defaults.defaultToolbar.placement,

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

@@ -28,6 +28,7 @@ var import_OverlayTooltip = require("../../../../core/components/overlay-tooltip
 var import_useAreaData = require("../../../hooks/useAreaData.js");
 var import_useAxesFormatter = require("../../../hooks/useAxesFormatter.js");
 var import_useXYChartData = require("../../../hooks/useXYChartData.js");
+var import_useXYChartTooltip = require("../../../hooks/useXYChartTooltip.js");
 var import_useXYChartTruncationMode = require("../../../hooks/useXYChartTruncationMode.js");
 function ClosestPointTooltip({
   datapoint,
@@ -39,7 +40,8 @@ function ClosestPointTooltip({
   const intl = (0, import_react_intl.useIntl)();
   const { filteredSeriesWithDatapoints } = (0, import_useAreaData.useAreaData)();
   const { truncationMode } = (0, import_useXYChartTruncationMode.useXYChartTruncationMode)();
-  const { name, color, actions, shape } = (0, import_closestPointTooltipHeaderUtils.buildClosestPointTooltipHeaderProps)({
+  const { seriesDisplayMode } = (0, import_useXYChartTooltip.useXYChartTooltip)();
+  const { name, nameSegments, color, actions, shape } = (0, import_closestPointTooltipHeaderUtils.buildClosestPointTooltipHeaderProps)({
     datapoint,
     series,
     seriesToMetadata,
@@ -55,12 +57,15 @@ function ClosestPointTooltip({
     datapointMetadataMap,
     intl
   });
+  const isMultiLine = nameSegments !== void 0 && seriesDisplayMode === "multi-line";
+  const displayName = isMultiLine ? nameSegments : name;
   const data = [
     {
-      name,
+      name: displayName,
       value: `${yAxisValue} ${yAxisDuration ? `(${yAxisDuration})` : ""}`,
       color,
-      shape
+      shape,
+      multiLine: isMultiLine
     }
   ];
   const label = datapoint.x0 instanceof Date ? "" : void 0;

package/charts/xy-chart/components/tooltip/ClosestPointTooltip/closestPointTooltipHeaderUtils.d.ts

@@ -11,6 +11,7 @@ export interface BuildClosestPointTooltipHeaderPropsArgs<T extends ClosestSeries
 export declare const buildClosestPointTooltipHeaderProps: <T extends ClosestSeries, K extends ClosestDatapoint<T>>({ datapoint, series, seriesToMetadata, seriesWithDatapoints, datapointMetadataMap, }: BuildClosestPointTooltipHeaderPropsArgs<T, K>) => {
     color: string;
     name: string;
+    nameSegments: string[] | undefined;
     actions: (() => SeriesActionsTemplate) | undefined;
     shape: import("../../../../index.js").PointShapeType | undefined;
 };

package/charts/xy-chart/components/tooltip/ClosestPointTooltip/closestPointTooltipHeaderUtils.js

@@ -36,7 +36,7 @@ const buildClosestPointTooltipHeaderProps = ({
     datapoint,
     metadata
   };
-  const { name = "", color = { Default: "blue" } } = metadata;
+  const { name = "", color = { Default: "blue" }, nameSegments } = metadata;
   const shape = "shape" in metadata ? metadata.shape : void 0;
   let actions = void 0;
   if ((0, import_type_guards.isAreaTooltipContext)(enrichedDatapoint)) {
@@ -61,6 +61,7 @@ const buildClosestPointTooltipHeaderProps = ({
   return {
     color: color.Default,
     name,
+    nameSegments,
     actions,
     shape
   };

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

@@ -30,6 +30,7 @@ var import_useBarData = require("../../../hooks/useBarData.js");
 var import_useFormatCategory = require("../../../hooks/useFormatCategory.js");
 var import_useXYChartColorScales = require("../../../hooks/useXYChartColorScales.js");
 var import_useXYChartData = require("../../../hooks/useXYChartData.js");
+var import_useXYChartTooltip = require("../../../hooks/useXYChartTooltip.js");
 var import_useXYChartTruncationMode = require("../../../hooks/useXYChartTruncationMode.js");
 function HoveredPointTooltip({
   datapoint,
@@ -43,7 +44,8 @@ function HoveredPointTooltip({
   const axisIdToFormatter = (0, import_useAxesFormatter.useAxesFormatter)();
   const formatCategory = (0, import_useFormatCategory.useFormatCategory)();
   const intl = (0, import_react_intl.useIntl)();
-  const { name, value, color, actions } = (0, import_hoveredPointTooltipHeaderUtils.buildHoveredPointTooltipHeaderProps)({
+  const { seriesDisplayMode } = (0, import_useXYChartTooltip.useXYChartTooltip)();
+  const { name, nameSegments, value, color, actions } = (0, import_hoveredPointTooltipHeaderUtils.buildHoveredPointTooltipHeaderProps)({
     datapoint,
     series,
     seriesToMetadata,
@@ -62,12 +64,15 @@ function HoveredPointTooltip({
     intl
   });
   const isRect = series.type === "rect";
+  const isMultiLine = !isRect && nameSegments !== void 0 && seriesDisplayMode === "multi-line";
+  const displayName = isMultiLine ? nameSegments : name;
   const yText = `${yAxisValue} ${yAxisDuration ? `(${yAxisDuration})` : ""}`;
   const data = [
     {
-      name: isRect ? yText : name,
+      name: isRect ? yText : displayName,
       value: isRect ? value : yText,
-      color
+      color,
+      multiLine: isMultiLine
     }
   ];
   const label = datapoint.x0 instanceof Date ? "" : void 0;

package/charts/xy-chart/components/tooltip/HoveredPointTooltip/hoveredPointTooltipHeaderUtils.d.ts

@@ -14,6 +14,13 @@ export interface BuildHoveredPointTooltipHeaderPropsArgs<T extends HoveredSeries
 export declare const buildHoveredPointTooltipHeaderProps: <T extends HoveredSeries, K extends T extends BarSeriesWithDatapoints ? BarDatapoint : RectDatapointInternal>({ datapoint, series, seriesToMetadata, seriesWithDatapoints, datapointMetadataMap, colorScaleMap, }: BuildHoveredPointTooltipHeaderPropsArgs<T, K>) => {
     color: string;
     name: string;
+    nameSegments: string[] | undefined;
     value: string;
     actions: (() => SeriesActionsTemplate) | undefined;
+} | {
+    color: string;
+    name: string;
+    value: string;
+    actions: (() => SeriesActionsTemplate) | undefined;
+    nameSegments?: undefined;
 };