@dynatrace/strato-components 3.7.1 → 3.9.0

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

@@ -1,6 +1,7 @@
 import { useSynchronizedSelection } from "../../../../core/components/shared-chart-interactions/hooks/useSynchronizedSelection.js";
 import { getZoomStep } from "../../../../core/components/zoom/utils/get-zoom-step.js";
 import { ZOOM_CHANGE_TYPE } from "../../../../core/types/zoom.js";
+import { isSameDomain } from "../../../../core/utils/zoom.js";
 import { useXYChartData } from "../../../hooks/useXYChartData.js";
 import { useXYChartScales } from "../../../hooks/useXYChartScales.js";
 import { reduceZoomDomain } from "../../../store/reducer-zoom.js";
@@ -47,12 +48,15 @@ const useZoomToSelection = () => {
           axis.id,
           nextDomain ? { min: nextDomain[0].valueOf(), max: nextDomain[1].valueOf() } : void 0
         );
-        handleZoomChange(
-          axis,
-          nextDomain[0],
-          nextDomain[1],
-          ZOOM_CHANGE_TYPE.ZoomX
-        );
+        const selectionCurrentDomain = currentScale.domain();
+        if (!isSameDomain(nextDomain, selectionCurrentDomain)) {
+          handleZoomChange(
+            axis,
+            nextDomain[0],
+            nextDomain[1],
+            ZOOM_CHANGE_TYPE.ZoomX
+          );
+        }
       }
     }
     resetSelectionState?.();

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/xy-chart/components/overlay/hooks/useZoomToSelection.ts"],
-  "sourcesContent": ["import { useSynchronizedSelection } from '../../../../core/components/shared-chart-interactions/hooks/useSynchronizedSelection.js';\nimport { getZoomStep } from '../../../../core/components/zoom/utils/get-zoom-step.js';\nimport type { AnyNumberScale } from '../../../../core/types/scales.js';\nimport { ZOOM_CHANGE_TYPE } from '../../../../core/types/zoom.js';\nimport { useXYChartData } from '../../../hooks/useXYChartData.js';\nimport { useXYChartScales } from '../../../hooks/useXYChartScales.js';\nimport { reduceZoomDomain } from '../../../store/reducer-zoom.js';\nimport { useSelectState, useSetState } from '../../../store/selectors.js';\nimport type { XYChartState } from '../../../types/state.js';\nimport {\n  isInfiniteZoomEnabledFor,\n  isZoomEnabledFor,\n} from '../../../utils/axis-interactions.js';\nimport { getCurrentScale, getInitialScale } from '../../../utils/get-scale.js';\nimport { handleZoomChange } from '../utils/zoom-change-handler.js';\n\nexport const useZoomToSelection = () => {\n  const setState = useSetState();\n  const axisIdToScales = useXYChartScales();\n  const { axes } = useXYChartData();\n  const select = useSelectState();\n  const { resetSelectionState } = useSynchronizedSelection();\n\n  let zoomInEnabled = false;\n  let zoomOutEnabled = false;\n\n  return () => {\n    const newCurrentDomain: XYChartState['currentDomain'] = new Map();\n\n    if (!select) {\n      return;\n    }\n\n    for (const axis of axes) {\n      if (isZoomEnabledFor(axis)) {\n        const currentScale = getCurrentScale(axisIdToScales, axis.id);\n        const initialScale = getInitialScale(axisIdToScales, axis.id);\n\n        const initialDomain = initialScale.domain() as number[] | Date[];\n\n        const {\n          nextDomain,\n          zoomInEnabled: inEnabled,\n          zoomOutEnabled: outEnabled,\n        } = getZoomStep(\n          currentScale as AnyNumberScale,\n          [+initialDomain[0], +initialDomain[1]],\n          isInfiniteZoomEnabledFor(axis),\n          select.start.relative.x,\n          select.end.relative.x,\n          'zoom-x',\n        );\n\n        zoomInEnabled ||= inEnabled;\n        zoomOutEnabled ||= outEnabled;\n\n        newCurrentDomain.set(\n          axis.id,\n          nextDomain\n            ? { min: nextDomain[0].valueOf(), max: nextDomain[1].valueOf() }\n            : undefined,\n        );\n\n        handleZoomChange(\n          axis,\n          nextDomain[0],\n          nextDomain[1],\n          ZOOM_CHANGE_TYPE.ZoomX,\n        );\n      }\n    }\n    resetSelectionState?.();\n    setState(reduceZoomDomain(newCurrentDomain, zoomInEnabled, zoomOutEnabled));\n  };\n};\n"],
-  "mappings": "AAAA,SAAS,gCAAgC;AACzC,SAAS,mBAAmB;AAE5B,SAAS,wBAAwB;AACjC,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AACjC,SAAS,gBAAgB,mBAAmB;AAE5C;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,iBAAiB,uBAAuB;AACjD,SAAS,wBAAwB;AAE1B,MAAM,qBAAqB,MAAM;AACtC,QAAM,WAAW,YAAY;AAC7B,QAAM,iBAAiB,iBAAiB;AACxC,QAAM,EAAE,KAAK,IAAI,eAAe;AAChC,QAAM,SAAS,eAAe;AAC9B,QAAM,EAAE,oBAAoB,IAAI,yBAAyB;AAEzD,MAAI,gBAAgB;AACpB,MAAI,iBAAiB;AAErB,SAAO,MAAM;AACX,UAAM,mBAAkD,oBAAI,IAAI;AAEhE,QAAI,CAAC,QAAQ;AACX;AAAA,IACF;AAEA,eAAW,QAAQ,MAAM;AACvB,UAAI,iBAAiB,IAAI,GAAG;AAC1B,cAAM,eAAe,gBAAgB,gBAAgB,KAAK,EAAE;AAC5D,cAAM,eAAe,gBAAgB,gBAAgB,KAAK,EAAE;AAE5D,cAAM,gBAAgB,aAAa,OAAO;AAE1C,cAAM;AAAA,UACJ;AAAA,UACA,eAAe;AAAA,UACf,gBAAgB;AAAA,QAClB,IAAI;AAAA,UACF;AAAA,UACA,CAAC,CAAC,cAAc,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;AAAA,UACrC,yBAAyB,IAAI;AAAA,UAC7B,OAAO,MAAM,SAAS;AAAA,UACtB,OAAO,IAAI,SAAS;AAAA,UACpB;AAAA,QACF;AAEA,0BAAkB;AAClB,2BAAmB;AAEnB,yBAAiB;AAAA,UACf,KAAK;AAAA,UACL,aACI,EAAE,KAAK,WAAW,CAAC,EAAE,QAAQ,GAAG,KAAK,WAAW,CAAC,EAAE,QAAQ,EAAE,IAC7D;AAAA,QACN;AAEA;AAAA,UACE;AAAA,UACA,WAAW,CAAC;AAAA,UACZ,WAAW,CAAC;AAAA,UACZ,iBAAiB;AAAA,QACnB;AAAA,MACF;AAAA,IACF;AACA,0BAAsB;AACtB,aAAS,iBAAiB,kBAAkB,eAAe,cAAc,CAAC;AAAA,EAC5E;AACF;",
+  "sourcesContent": ["import { useSynchronizedSelection } from '../../../../core/components/shared-chart-interactions/hooks/useSynchronizedSelection.js';\nimport { getZoomStep } from '../../../../core/components/zoom/utils/get-zoom-step.js';\nimport type { AnyNumberScale } from '../../../../core/types/scales.js';\nimport { ZOOM_CHANGE_TYPE } from '../../../../core/types/zoom.js';\nimport { isSameDomain } from '../../../../core/utils/zoom.js';\nimport { useXYChartData } from '../../../hooks/useXYChartData.js';\nimport { useXYChartScales } from '../../../hooks/useXYChartScales.js';\nimport { reduceZoomDomain } from '../../../store/reducer-zoom.js';\nimport { useSelectState, useSetState } from '../../../store/selectors.js';\nimport type { XYChartState } from '../../../types/state.js';\nimport {\n  isInfiniteZoomEnabledFor,\n  isZoomEnabledFor,\n} from '../../../utils/axis-interactions.js';\nimport { getCurrentScale, getInitialScale } from '../../../utils/get-scale.js';\nimport { handleZoomChange } from '../utils/zoom-change-handler.js';\n\nexport const useZoomToSelection = () => {\n  const setState = useSetState();\n  const axisIdToScales = useXYChartScales();\n  const { axes } = useXYChartData();\n  const select = useSelectState();\n  const { resetSelectionState } = useSynchronizedSelection();\n\n  let zoomInEnabled = false;\n  let zoomOutEnabled = false;\n\n  return () => {\n    const newCurrentDomain: XYChartState['currentDomain'] = new Map();\n\n    if (!select) {\n      return;\n    }\n\n    for (const axis of axes) {\n      if (isZoomEnabledFor(axis)) {\n        const currentScale = getCurrentScale(axisIdToScales, axis.id);\n        const initialScale = getInitialScale(axisIdToScales, axis.id);\n\n        const initialDomain = initialScale.domain() as number[] | Date[];\n\n        const {\n          nextDomain,\n          zoomInEnabled: inEnabled,\n          zoomOutEnabled: outEnabled,\n        } = getZoomStep(\n          currentScale as AnyNumberScale,\n          [+initialDomain[0], +initialDomain[1]],\n          isInfiniteZoomEnabledFor(axis),\n          select.start.relative.x,\n          select.end.relative.x,\n          'zoom-x',\n        );\n\n        zoomInEnabled ||= inEnabled;\n        zoomOutEnabled ||= outEnabled;\n\n        newCurrentDomain.set(\n          axis.id,\n          nextDomain\n            ? { min: nextDomain[0].valueOf(), max: nextDomain[1].valueOf() }\n            : undefined,\n        );\n\n        const selectionCurrentDomain = currentScale.domain() as (\n          | number\n          | Date\n        )[];\n        if (\n          !isSameDomain(nextDomain as (number | Date)[], selectionCurrentDomain)\n        ) {\n          handleZoomChange(\n            axis,\n            nextDomain[0],\n            nextDomain[1],\n            ZOOM_CHANGE_TYPE.ZoomX,\n          );\n        }\n      }\n    }\n    resetSelectionState?.();\n    setState(reduceZoomDomain(newCurrentDomain, zoomInEnabled, zoomOutEnabled));\n  };\n};\n"],
+  "mappings": "AAAA,SAAS,gCAAgC;AACzC,SAAS,mBAAmB;AAE5B,SAAS,wBAAwB;AACjC,SAAS,oBAAoB;AAC7B,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AACjC,SAAS,gBAAgB,mBAAmB;AAE5C;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,iBAAiB,uBAAuB;AACjD,SAAS,wBAAwB;AAE1B,MAAM,qBAAqB,MAAM;AACtC,QAAM,WAAW,YAAY;AAC7B,QAAM,iBAAiB,iBAAiB;AACxC,QAAM,EAAE,KAAK,IAAI,eAAe;AAChC,QAAM,SAAS,eAAe;AAC9B,QAAM,EAAE,oBAAoB,IAAI,yBAAyB;AAEzD,MAAI,gBAAgB;AACpB,MAAI,iBAAiB;AAErB,SAAO,MAAM;AACX,UAAM,mBAAkD,oBAAI,IAAI;AAEhE,QAAI,CAAC,QAAQ;AACX;AAAA,IACF;AAEA,eAAW,QAAQ,MAAM;AACvB,UAAI,iBAAiB,IAAI,GAAG;AAC1B,cAAM,eAAe,gBAAgB,gBAAgB,KAAK,EAAE;AAC5D,cAAM,eAAe,gBAAgB,gBAAgB,KAAK,EAAE;AAE5D,cAAM,gBAAgB,aAAa,OAAO;AAE1C,cAAM;AAAA,UACJ;AAAA,UACA,eAAe;AAAA,UACf,gBAAgB;AAAA,QAClB,IAAI;AAAA,UACF;AAAA,UACA,CAAC,CAAC,cAAc,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;AAAA,UACrC,yBAAyB,IAAI;AAAA,UAC7B,OAAO,MAAM,SAAS;AAAA,UACtB,OAAO,IAAI,SAAS;AAAA,UACpB;AAAA,QACF;AAEA,0BAAkB;AAClB,2BAAmB;AAEnB,yBAAiB;AAAA,UACf,KAAK;AAAA,UACL,aACI,EAAE,KAAK,WAAW,CAAC,EAAE,QAAQ,GAAG,KAAK,WAAW,CAAC,EAAE,QAAQ,EAAE,IAC7D;AAAA,QACN;AAEA,cAAM,yBAAyB,aAAa,OAAO;AAInD,YACE,CAAC,aAAa,YAAiC,sBAAsB,GACrE;AACA;AAAA,YACE;AAAA,YACA,WAAW,CAAC;AAAA,YACZ,WAAW,CAAC;AAAA,YACZ,iBAAiB;AAAA,UACnB;AAAA,QACF;AAAA,MACF;AAAA,IACF;AACA,0BAAsB;AACtB,aAAS,iBAAiB,kBAAkB,eAAe,cAAc,CAAC;AAAA,EAC5E;AACF;",
   "names": []
 }

package/esm/charts/xy-chart/components/overlay/utils/draw-shape.js

@@ -1,6 +1,24 @@
 import Colors from "@dynatrace/strato-design-tokens/colors";
 import { getCanvasColor } from "../../../../core/components/canvas/utils/canvas-color.js";
+import { drawRoundRect } from "../../../../core/components/canvas/utils/drawRoundRect.js";
+import { getOuterCircleSize } from "../../../../core/components/data-point/utils/data-point.js";
+import { DEFAULT_HIGHLIGHTED_OPACITY } from "../../../../core/constants.js";
 const TRIANGLE_RADIUS_ADJUSTMENT = 1;
+const PILL_BORDER_RADIUS = 7;
+const PILL_BORDER_WIDTH = 1;
+const drawPill = (ctx, points, strokeColor) => {
+  const { x, y, width, height } = getOuterCircleSize(points, "y");
+  ctx.beginPath();
+  drawRoundRect(ctx, x, y, width, height, PILL_BORDER_RADIUS);
+  ctx.globalAlpha = DEFAULT_HIGHLIGHTED_OPACITY;
+  ctx.fillStyle = getCanvasColor(Colors.Background.Base.Default);
+  ctx.fill();
+  ctx.globalAlpha = 1;
+  ctx.lineWidth = PILL_BORDER_WIDTH;
+  ctx.strokeStyle = getCanvasColor(strokeColor);
+  ctx.stroke();
+  ctx.closePath();
+};
 const drawShapeFill = (ctx, point, radius) => {
   drawShape(ctx, point, radius, true, false);
 };
@@ -70,6 +88,7 @@ const drawShape = (ctx, point, radius, fillShape, strokeShape, strokeColor) => {
   ctx.closePath();
 };
 export {
+  drawPill,
   drawShapeFill,
   drawShapeStroke
 };

package/esm/charts/xy-chart/components/overlay/utils/draw-shape.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/xy-chart/components/overlay/utils/draw-shape.ts"],
-  "sourcesContent": ["import Colors from '@dynatrace/strato-design-tokens/colors';\n\nimport { getCanvasColor } from '../../../../core/components/canvas/utils/canvas-color.js';\nimport { PointShapeType } from '../../../../core/components/shape/type.js';\nimport { DataPoint } from '../../../../core/types/data-point.js';\n\nconst TRIANGLE_RADIUS_ADJUSTMENT = 1;\n\nexport const drawShapeFill = (\n  ctx: CanvasRenderingContext2D,\n  point: DataPoint & { shape?: PointShapeType },\n  radius: number,\n) => {\n  drawShape(ctx, point, radius, true, false);\n};\n\nexport const drawShapeStroke = (\n  ctx: CanvasRenderingContext2D,\n  point: DataPoint & { shape?: PointShapeType },\n  radius: number,\n  strokeColor?: string,\n) => {\n  drawShape(ctx, point, radius, false, true, strokeColor);\n};\n\nconst createPathCircle = (\n  ctx: CanvasRenderingContext2D,\n  point: DataPoint & { shape?: PointShapeType },\n  radius: number,\n) => {\n  ctx.arc(point.x, point.y, radius, 0, 2 * Math.PI);\n};\n\nconst createPathSquare = (\n  radius: number,\n  ctx: CanvasRenderingContext2D,\n  point: DataPoint & { shape?: PointShapeType },\n) => {\n  const s = radius;\n  ctx.rect(point.x - s, point.y - s, 2 * s, 2 * s);\n};\n\nconst createPathTriangle = (\n  radius: number,\n  ctx: CanvasRenderingContext2D,\n  point: DataPoint & { shape?: PointShapeType },\n) => {\n  const r = radius - TRIANGLE_RADIUS_ADJUSTMENT;\n  const R = 2 * r;\n  const side = r * 2 * Math.sqrt(3);\n\n  ctx.beginPath();\n  ctx.moveTo(point.x, point.y - R);\n  ctx.lineTo(point.x + side / 2, point.y + r);\n  ctx.lineTo(point.x - side / 2, point.y + r);\n  ctx.closePath();\n};\n\nconst createPathDiamond = (\n  radius: number,\n  ctx: CanvasRenderingContext2D,\n  point: DataPoint & { shape?: PointShapeType },\n) => {\n  const s = radius * Math.sqrt(2);\n  ctx.beginPath();\n  ctx.moveTo(point.x, point.y - s);\n  ctx.lineTo(point.x + s, point.y);\n  ctx.lineTo(point.x, point.y + s);\n  ctx.lineTo(point.x - s, point.y);\n  ctx.closePath();\n};\n\nconst drawShape = (\n  ctx: CanvasRenderingContext2D,\n  point: DataPoint & { shape?: PointShapeType },\n  radius: number,\n  fillShape?: boolean,\n  strokeShape?: boolean,\n  strokeColor?: string,\n) => {\n  ctx.beginPath();\n  switch (point.shape) {\n    case 'circle':\n      createPathCircle(ctx, point, radius);\n      break;\n    case 'square': {\n      createPathSquare(radius, ctx, point);\n      break;\n    }\n    case 'triangle': {\n      createPathTriangle(radius, ctx, point);\n      break;\n    }\n    case 'diamond': {\n      createPathDiamond(radius, ctx, point);\n      break;\n    }\n    default:\n      createPathCircle(ctx, point, radius);\n  }\n  if (fillShape) {\n    ctx.fillStyle = getCanvasColor(point.color.Default);\n    ctx.fill();\n  }\n  if (strokeShape) {\n    ctx.globalAlpha = 0.7;\n    ctx.fillStyle = getCanvasColor(Colors.Background.Base.Default);\n    ctx.fill();\n\n    ctx.globalAlpha = 1;\n    ctx.lineWidth = 1;\n    ctx.strokeStyle = getCanvasColor(strokeColor);\n    ctx.stroke();\n  }\n  ctx.closePath();\n};\n"],
-  "mappings": "AAAA,OAAO,YAAY;AAEnB,SAAS,sBAAsB;AAI/B,MAAM,6BAA6B;AAE5B,MAAM,gBAAgB,CAC3B,KACA,OACA,WACG;AACH,YAAU,KAAK,OAAO,QAAQ,MAAM,KAAK;AAC3C;AAEO,MAAM,kBAAkB,CAC7B,KACA,OACA,QACA,gBACG;AACH,YAAU,KAAK,OAAO,QAAQ,OAAO,MAAM,WAAW;AACxD;AAEA,MAAM,mBAAmB,CACvB,KACA,OACA,WACG;AACH,MAAI,IAAI,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,IAAI,KAAK,EAAE;AAClD;AAEA,MAAM,mBAAmB,CACvB,QACA,KACA,UACG;AACH,QAAM,IAAI;AACV,MAAI,KAAK,MAAM,IAAI,GAAG,MAAM,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACjD;AAEA,MAAM,qBAAqB,CACzB,QACA,KACA,UACG;AACH,QAAM,IAAI,SAAS;AACnB,QAAM,IAAI,IAAI;AACd,QAAM,OAAO,IAAI,IAAI,KAAK,KAAK,CAAC;AAEhC,MAAI,UAAU;AACd,MAAI,OAAO,MAAM,GAAG,MAAM,IAAI,CAAC;AAC/B,MAAI,OAAO,MAAM,IAAI,OAAO,GAAG,MAAM,IAAI,CAAC;AAC1C,MAAI,OAAO,MAAM,IAAI,OAAO,GAAG,MAAM,IAAI,CAAC;AAC1C,MAAI,UAAU;AAChB;AAEA,MAAM,oBAAoB,CACxB,QACA,KACA,UACG;AACH,QAAM,IAAI,SAAS,KAAK,KAAK,CAAC;AAC9B,MAAI,UAAU;AACd,MAAI,OAAO,MAAM,GAAG,MAAM,IAAI,CAAC;AAC/B,MAAI,OAAO,MAAM,IAAI,GAAG,MAAM,CAAC;AAC/B,MAAI,OAAO,MAAM,GAAG,MAAM,IAAI,CAAC;AAC/B,MAAI,OAAO,MAAM,IAAI,GAAG,MAAM,CAAC;AAC/B,MAAI,UAAU;AAChB;AAEA,MAAM,YAAY,CAChB,KACA,OACA,QACA,WACA,aACA,gBACG;AACH,MAAI,UAAU;AACd,UAAQ,MAAM,OAAO;AAAA,IACnB,KAAK;AACH,uBAAiB,KAAK,OAAO,MAAM;AACnC;AAAA,IACF,KAAK,UAAU;AACb,uBAAiB,QAAQ,KAAK,KAAK;AACnC;AAAA,IACF;AAAA,IACA,KAAK,YAAY;AACf,yBAAmB,QAAQ,KAAK,KAAK;AACrC;AAAA,IACF;AAAA,IACA,KAAK,WAAW;AACd,wBAAkB,QAAQ,KAAK,KAAK;AACpC;AAAA,IACF;AAAA,IACA;AACE,uBAAiB,KAAK,OAAO,MAAM;AAAA,EACvC;AACA,MAAI,WAAW;AACb,QAAI,YAAY,eAAe,MAAM,MAAM,OAAO;AAClD,QAAI,KAAK;AAAA,EACX;AACA,MAAI,aAAa;AACf,QAAI,cAAc;AAClB,QAAI,YAAY,eAAe,OAAO,WAAW,KAAK,OAAO;AAC7D,QAAI,KAAK;AAET,QAAI,cAAc;AAClB,QAAI,YAAY;AAChB,QAAI,cAAc,eAAe,WAAW;AAC5C,QAAI,OAAO;AAAA,EACb;AACA,MAAI,UAAU;AAChB;",
+  "sourcesContent": ["import Colors from '@dynatrace/strato-design-tokens/colors';\n\nimport { getCanvasColor } from '../../../../core/components/canvas/utils/canvas-color.js';\nimport { drawRoundRect } from '../../../../core/components/canvas/utils/drawRoundRect.js';\nimport { getOuterCircleSize } from '../../../../core/components/data-point/utils/data-point.js';\nimport { PointShapeType } from '../../../../core/components/shape/type.js';\nimport { DEFAULT_HIGHLIGHTED_OPACITY } from '../../../../core/constants.js';\nimport { DataPoint } from '../../../../core/types/data-point.js';\n\nconst TRIANGLE_RADIUS_ADJUSTMENT = 1;\nconst PILL_BORDER_RADIUS = 7;\nconst PILL_BORDER_WIDTH = 1;\n\nexport const drawPill = (\n  ctx: CanvasRenderingContext2D,\n  points: DataPoint[],\n  strokeColor: string,\n) => {\n  const { x, y, width, height } = getOuterCircleSize(points, 'y');\n  ctx.beginPath();\n  drawRoundRect(ctx, x, y, width, height, PILL_BORDER_RADIUS);\n  ctx.globalAlpha = DEFAULT_HIGHLIGHTED_OPACITY;\n  ctx.fillStyle = getCanvasColor(Colors.Background.Base.Default);\n  ctx.fill();\n  ctx.globalAlpha = 1;\n  ctx.lineWidth = PILL_BORDER_WIDTH;\n  ctx.strokeStyle = getCanvasColor(strokeColor);\n  ctx.stroke();\n  ctx.closePath();\n};\n\nexport const drawShapeFill = (\n  ctx: CanvasRenderingContext2D,\n  point: DataPoint & { shape?: PointShapeType },\n  radius: number,\n) => {\n  drawShape(ctx, point, radius, true, false);\n};\n\nexport const drawShapeStroke = (\n  ctx: CanvasRenderingContext2D,\n  point: DataPoint & { shape?: PointShapeType },\n  radius: number,\n  strokeColor?: string,\n) => {\n  drawShape(ctx, point, radius, false, true, strokeColor);\n};\n\nconst createPathCircle = (\n  ctx: CanvasRenderingContext2D,\n  point: DataPoint & { shape?: PointShapeType },\n  radius: number,\n) => {\n  ctx.arc(point.x, point.y, radius, 0, 2 * Math.PI);\n};\n\nconst createPathSquare = (\n  radius: number,\n  ctx: CanvasRenderingContext2D,\n  point: DataPoint & { shape?: PointShapeType },\n) => {\n  const s = radius;\n  ctx.rect(point.x - s, point.y - s, 2 * s, 2 * s);\n};\n\nconst createPathTriangle = (\n  radius: number,\n  ctx: CanvasRenderingContext2D,\n  point: DataPoint & { shape?: PointShapeType },\n) => {\n  const r = radius - TRIANGLE_RADIUS_ADJUSTMENT;\n  const R = 2 * r;\n  const side = r * 2 * Math.sqrt(3);\n\n  ctx.beginPath();\n  ctx.moveTo(point.x, point.y - R);\n  ctx.lineTo(point.x + side / 2, point.y + r);\n  ctx.lineTo(point.x - side / 2, point.y + r);\n  ctx.closePath();\n};\n\nconst createPathDiamond = (\n  radius: number,\n  ctx: CanvasRenderingContext2D,\n  point: DataPoint & { shape?: PointShapeType },\n) => {\n  const s = radius * Math.sqrt(2);\n  ctx.beginPath();\n  ctx.moveTo(point.x, point.y - s);\n  ctx.lineTo(point.x + s, point.y);\n  ctx.lineTo(point.x, point.y + s);\n  ctx.lineTo(point.x - s, point.y);\n  ctx.closePath();\n};\n\nconst drawShape = (\n  ctx: CanvasRenderingContext2D,\n  point: DataPoint & { shape?: PointShapeType },\n  radius: number,\n  fillShape?: boolean,\n  strokeShape?: boolean,\n  strokeColor?: string,\n) => {\n  ctx.beginPath();\n  switch (point.shape) {\n    case 'circle':\n      createPathCircle(ctx, point, radius);\n      break;\n    case 'square': {\n      createPathSquare(radius, ctx, point);\n      break;\n    }\n    case 'triangle': {\n      createPathTriangle(radius, ctx, point);\n      break;\n    }\n    case 'diamond': {\n      createPathDiamond(radius, ctx, point);\n      break;\n    }\n    default:\n      createPathCircle(ctx, point, radius);\n  }\n  if (fillShape) {\n    ctx.fillStyle = getCanvasColor(point.color.Default);\n    ctx.fill();\n  }\n  if (strokeShape) {\n    ctx.globalAlpha = 0.7;\n    ctx.fillStyle = getCanvasColor(Colors.Background.Base.Default);\n    ctx.fill();\n\n    ctx.globalAlpha = 1;\n    ctx.lineWidth = 1;\n    ctx.strokeStyle = getCanvasColor(strokeColor);\n    ctx.stroke();\n  }\n  ctx.closePath();\n};\n"],
+  "mappings": "AAAA,OAAO,YAAY;AAEnB,SAAS,sBAAsB;AAC/B,SAAS,qBAAqB;AAC9B,SAAS,0BAA0B;AAEnC,SAAS,mCAAmC;AAG5C,MAAM,6BAA6B;AACnC,MAAM,qBAAqB;AAC3B,MAAM,oBAAoB;AAEnB,MAAM,WAAW,CACtB,KACA,QACA,gBACG;AACH,QAAM,EAAE,GAAG,GAAG,OAAO,OAAO,IAAI,mBAAmB,QAAQ,GAAG;AAC9D,MAAI,UAAU;AACd,gBAAc,KAAK,GAAG,GAAG,OAAO,QAAQ,kBAAkB;AAC1D,MAAI,cAAc;AAClB,MAAI,YAAY,eAAe,OAAO,WAAW,KAAK,OAAO;AAC7D,MAAI,KAAK;AACT,MAAI,cAAc;AAClB,MAAI,YAAY;AAChB,MAAI,cAAc,eAAe,WAAW;AAC5C,MAAI,OAAO;AACX,MAAI,UAAU;AAChB;AAEO,MAAM,gBAAgB,CAC3B,KACA,OACA,WACG;AACH,YAAU,KAAK,OAAO,QAAQ,MAAM,KAAK;AAC3C;AAEO,MAAM,kBAAkB,CAC7B,KACA,OACA,QACA,gBACG;AACH,YAAU,KAAK,OAAO,QAAQ,OAAO,MAAM,WAAW;AACxD;AAEA,MAAM,mBAAmB,CACvB,KACA,OACA,WACG;AACH,MAAI,IAAI,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,IAAI,KAAK,EAAE;AAClD;AAEA,MAAM,mBAAmB,CACvB,QACA,KACA,UACG;AACH,QAAM,IAAI;AACV,MAAI,KAAK,MAAM,IAAI,GAAG,MAAM,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACjD;AAEA,MAAM,qBAAqB,CACzB,QACA,KACA,UACG;AACH,QAAM,IAAI,SAAS;AACnB,QAAM,IAAI,IAAI;AACd,QAAM,OAAO,IAAI,IAAI,KAAK,KAAK,CAAC;AAEhC,MAAI,UAAU;AACd,MAAI,OAAO,MAAM,GAAG,MAAM,IAAI,CAAC;AAC/B,MAAI,OAAO,MAAM,IAAI,OAAO,GAAG,MAAM,IAAI,CAAC;AAC1C,MAAI,OAAO,MAAM,IAAI,OAAO,GAAG,MAAM,IAAI,CAAC;AAC1C,MAAI,UAAU;AAChB;AAEA,MAAM,oBAAoB,CACxB,QACA,KACA,UACG;AACH,QAAM,IAAI,SAAS,KAAK,KAAK,CAAC;AAC9B,MAAI,UAAU;AACd,MAAI,OAAO,MAAM,GAAG,MAAM,IAAI,CAAC;AAC/B,MAAI,OAAO,MAAM,IAAI,GAAG,MAAM,CAAC;AAC/B,MAAI,OAAO,MAAM,GAAG,MAAM,IAAI,CAAC;AAC/B,MAAI,OAAO,MAAM,IAAI,GAAG,MAAM,CAAC;AAC/B,MAAI,UAAU;AAChB;AAEA,MAAM,YAAY,CAChB,KACA,OACA,QACA,WACA,aACA,gBACG;AACH,MAAI,UAAU;AACd,UAAQ,MAAM,OAAO;AAAA,IACnB,KAAK;AACH,uBAAiB,KAAK,OAAO,MAAM;AACnC;AAAA,IACF,KAAK,UAAU;AACb,uBAAiB,QAAQ,KAAK,KAAK;AACnC;AAAA,IACF;AAAA,IACA,KAAK,YAAY;AACf,yBAAmB,QAAQ,KAAK,KAAK;AACrC;AAAA,IACF;AAAA,IACA,KAAK,WAAW;AACd,wBAAkB,QAAQ,KAAK,KAAK;AACpC;AAAA,IACF;AAAA,IACA;AACE,uBAAiB,KAAK,OAAO,MAAM;AAAA,EACvC;AACA,MAAI,WAAW;AACb,QAAI,YAAY,eAAe,MAAM,MAAM,OAAO;AAClD,QAAI,KAAK;AAAA,EACX;AACA,MAAI,aAAa;AACf,QAAI,cAAc;AAClB,QAAI,YAAY,eAAe,OAAO,WAAW,KAAK,OAAO;AAC7D,QAAI,KAAK;AAET,QAAI,cAAc;AAClB,QAAI,YAAY;AAChB,QAAI,cAAc,eAAe,WAAW;AAC5C,QAAI,OAAO;AAAA,EACb;AACA,MAAI,UAAU;AAChB;",
   "names": []
 }

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

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

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

@@ -1,6 +1,6 @@
 import "../../../core/components/chart-grid/ChartGrid.css";
 import "./XYChartThresholdIndicators.css";
-var thresholdPlot = "_1mfu0sw0-3-7-1 _13lzg4k0-3-7-1";
+var thresholdPlot = "_1mfu0sw0-3-9-0 _13lzg4k0-3-9-0";
 export {
   thresholdPlot
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/xy-chart/components/thresholds/XYChartThresholdIndicators.css.ts"],
-  "sourcesContent": ["import '../../../core/components/chart-grid/ChartGrid.css';\nimport './XYChartThresholdIndicators.css';\nexport var thresholdPlot = '_1mfu0sw0-3-7-1 _13lzg4k0-3-7-1';"],
+  "sourcesContent": ["import '../../../core/components/chart-grid/ChartGrid.css';\nimport './XYChartThresholdIndicators.css';\nexport var thresholdPlot = '_1mfu0sw0-3-9-0 _13lzg4k0-3-9-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,gBAAgB;",
   "names": []
 }

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

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/xy-chart/components/toolbar/XYChartToolbar.tsx"],
-  "sourcesContent": ["import type { MouseEvent as ReactMouseEvent } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { DownloadDataButton } from './DownloadDataButton.js';\nimport { ExploreButton } from './ExploreButton.js';\nimport { PanButton } from './PanButton.js';\nimport { ResetButton } from './ResetButton.js';\nimport { ZoomInOutButtons } from './ZoomInOutButtons.js';\nimport { ZoomModeButton } from './ZoomModeButton.js';\nimport { useBehavioralTrackingProps as _useBehavioralTrackingProps } from '../../../../core/hooks/useBehavioralTrackingProps.js';\nimport { ChartToolbarRenderer } from '../../../core/components/toolbar/ChartToolbarRenderer.js';\nimport type { ChartToolbarRendererProps } from '../../../core/components/toolbar/types.js';\nimport { getMenuTriggerDisplayMode } from '../../../core/components/toolbar/utils/get-menu-trigger-display-mode.js';\nimport { getMenuTriggerIcon } from '../../../core/components/toolbar/utils/get-menu-trigger-icon.js';\nimport { ChartOverlaysElevation } from '../../../core/constants.js';\nimport type { ToolbarPlacement } from '../../../core/types/toolbar.js';\nimport { getA11yToolbarConfig } from '../../../core/utils/zoom.js';\nimport { defaultToolbar } from '../../constants/defaults.js';\nimport { useDownload } from '../../hooks/useDownload.js';\nimport { useToolbar } from '../../hooks/useToolbar.js';\nimport { useXYChartData } from '../../hooks/useXYChartData.js';\nimport { useXYChartSelectionAreaRef } from '../../hooks/useXYChartSelectionAreaRef.js';\nimport { XYCHART_MESSAGES } from '../../messages/messages.js';\nimport { useInteractionModeState } from '../../store/selectors.js';\nimport { buildAndDownloadCsv } from '../../utils/build-and-download-csv.js';\n\ntype XYChartToolbarProps = {\n  onMouseEnter?: (event?: ReactMouseEvent<HTMLDivElement, MouseEvent>) => void;\n  onMouseLeave?: (react?: ReactMouseEvent<HTMLDivElement, MouseEvent>) => void;\n  handlerRef?: ChartToolbarRendererProps['handlerRef'];\n};\n\nexport const XYChartToolbar = ({\n  onMouseEnter,\n  onMouseLeave,\n  handlerRef,\n}: XYChartToolbarProps) => {\n  const toolbarContext = useToolbar();\n  const { collapsed, placement, hidden, intents } = toolbarContext;\n  const { downloadDataCallback } = useDownload();\n  const interactionMode = useInteractionModeState();\n  const { axesMetadata } = useXYChartData();\n  const intl = useIntl();\n  const selectionAreaRef = useXYChartSelectionAreaRef();\n\n  const isZoomEnabled = axesMetadata.isZoomEnabled;\n  const isPanEnabled = axesMetadata.isPanEnabled;\n  const exploreBtnPlace = isZoomEnabled || isPanEnabled ? 'menu' : 'auto';\n  const isDownloadEnabled = true;\n\n  const initialA11yState = getA11yToolbarConfig({\n    zoom: { enabled: isZoomEnabled },\n    pan: { enabled: isPanEnabled },\n    download: { enabled: isDownloadEnabled },\n    intent: !!intents,\n  });\n\n  const menuIcon = getMenuTriggerIcon(interactionMode, isZoomEnabled);\n\n  const menuLabel =\n    !isPanEnabled && !isZoomEnabled\n      ? intl.formatMessage(XYCHART_MESSAGES.zoomModeExplore)\n      : undefined;\n\n  const menuDisplayMode = getMenuTriggerDisplayMode({\n    isPanEnabled,\n    isZoomEnabled,\n    isDownloadEnabled,\n  });\n\n  const { seriesWithDatapoints, datapointMetadataMap, seriesToMetadata } =\n    useXYChartData();\n\n  const handleDownloadDataToolbar = () => {\n    buildAndDownloadCsv(\n      seriesWithDatapoints,\n      seriesToMetadata,\n      datapointMetadataMap,\n      downloadDataCallback,\n    );\n  };\n\n  const showDefaultToolbarDownloadButton = isDownloadEnabled && !intents;\n  const showMenuToolbarButton = isDownloadEnabled && !!intents?.length;\n\n  const onClose = () =>\n    selectionAreaRef ? selectionAreaRef.current?.focus() : undefined;\n\n  const behaviorTrackingProps = _useBehavioralTrackingProps(toolbarContext)[0];\n\n  return !hidden ? (\n    <ChartToolbarRenderer\n      visible={false}\n      visibleWhenMouseInBounds\n      handlerRef={handlerRef}\n      placement={placement ?? (defaultToolbar.placement as ToolbarPlacement)}\n      draggable={true}\n      collapsed={collapsed}\n      initialA11yState={initialA11yState}\n      zIndex={ChartOverlaysElevation.toolbar}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      menuIcon={menuIcon}\n      menuTriggerLabel={menuLabel}\n      menuDisplayMode={menuDisplayMode}\n      isDownloadEnabled={showMenuToolbarButton}\n      intents={intents}\n      handleDownloadDataToolbar={handleDownloadDataToolbar}\n      onClose={onClose}\n      {...behaviorTrackingProps}\n    >\n      <>\n        <ExploreButton placement={exploreBtnPlace} />\n        {isZoomEnabled && <ZoomModeButton />}\n        {isPanEnabled && <PanButton />}\n      </>\n      {isZoomEnabled && <ZoomInOutButtons />}\n      {isZoomEnabled && <ResetButton />}\n      {showDefaultToolbarDownloadButton && <DownloadDataButton />}\n    </ChartToolbarRenderer>\n  ) : null;\n};\n\nXYChartToolbar['displayName'] = 'XYChartToolbar';\n"],
-  "mappings": "AA+GM,mBACE,KADF;AA9GN,SAAS,eAAe;AAExB,SAAS,0BAA0B;AACnC,SAAS,qBAAqB;AAC9B,SAAS,iBAAiB;AAC1B,SAAS,mBAAmB;AAC5B,SAAS,wBAAwB;AACjC,SAAS,sBAAsB;AAC/B,SAAS,8BAA8B,mCAAmC;AAC1E,SAAS,4BAA4B;AAErC,SAAS,iCAAiC;AAC1C,SAAS,0BAA0B;AACnC,SAAS,8BAA8B;AAEvC,SAAS,4BAA4B;AACrC,SAAS,sBAAsB;AAC/B,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,sBAAsB;AAC/B,SAAS,kCAAkC;AAC3C,SAAS,wBAAwB;AACjC,SAAS,+BAA+B;AACxC,SAAS,2BAA2B;AAQ7B,MAAM,iBAAiB,CAAC;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AACF,MAA2B;AACzB,QAAM,iBAAiB,WAAW;AAClC,QAAM,EAAE,WAAW,WAAW,QAAQ,QAAQ,IAAI;AAClD,QAAM,EAAE,qBAAqB,IAAI,YAAY;AAC7C,QAAM,kBAAkB,wBAAwB;AAChD,QAAM,EAAE,aAAa,IAAI,eAAe;AACxC,QAAM,OAAO,QAAQ;AACrB,QAAM,mBAAmB,2BAA2B;AAEpD,QAAM,gBAAgB,aAAa;AACnC,QAAM,eAAe,aAAa;AAClC,QAAM,kBAAkB,iBAAiB,eAAe,SAAS;AACjE,QAAM,oBAAoB;AAE1B,QAAM,mBAAmB,qBAAqB;AAAA,IAC5C,MAAM,EAAE,SAAS,cAAc;AAAA,IAC/B,KAAK,EAAE,SAAS,aAAa;AAAA,IAC7B,UAAU,EAAE,SAAS,kBAAkB;AAAA,IACvC,QAAQ,CAAC,CAAC;AAAA,EACZ,CAAC;AAED,QAAM,WAAW,mBAAmB,iBAAiB,aAAa;AAElE,QAAM,YACJ,CAAC,gBAAgB,CAAC,gBACd,KAAK,cAAc,iBAAiB,eAAe,IACnD;AAEN,QAAM,kBAAkB,0BAA0B;AAAA,IAChD;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,EAAE,sBAAsB,sBAAsB,iBAAiB,IACnE,eAAe;AAEjB,QAAM,4BAA4B,MAAM;AACtC;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,QAAM,mCAAmC,qBAAqB,CAAC;AAC/D,QAAM,wBAAwB,qBAAqB,CAAC,CAAC,SAAS;AAE9D,QAAM,UAAU,MACd,mBAAmB,iBAAiB,SAAS,MAAM,IAAI;AAEzD,QAAM,wBAAwB,4BAA4B,cAAc,EAAE,CAAC;AAE3E,SAAO,CAAC,SACN;AAAA,IAAC;AAAA;AAAA,MACC,SAAS;AAAA,MACT,0BAAwB;AAAA,MACxB;AAAA,MACA,WAAW,aAAc,eAAe;AAAA,MACxC,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA,QAAQ,uBAAuB;AAAA,MAC/B;AAAA,MACA;AAAA,MACA;AAAA,MACA,kBAAkB;AAAA,MAClB;AAAA,MACA,mBAAmB;AAAA,MACnB;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA,yCACE;AAAA,8BAAC,iBAAc,WAAW,iBAAiB;AAAA,UAC1C,iBAAiB,oBAAC,kBAAe;AAAA,UACjC,gBAAgB,oBAAC,aAAU;AAAA,WAC9B;AAAA,QACC,iBAAiB,oBAAC,oBAAiB;AAAA,QACnC,iBAAiB,oBAAC,eAAY;AAAA,QAC9B,oCAAoC,oBAAC,sBAAmB;AAAA;AAAA;AAAA,EAC3D,IACE;AACN;AAEA,eAAe,aAAa,IAAI;",
+  "sourcesContent": ["import type { MouseEvent as ReactMouseEvent } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { DownloadDataButton } from './DownloadDataButton.js';\nimport { ExploreButton } from './ExploreButton.js';\nimport { PanButton } from './PanButton.js';\nimport { ResetButton } from './ResetButton.js';\nimport { ZoomInOutButtons } from './ZoomInOutButtons.js';\nimport { ZoomModeButton } from './ZoomModeButton.js';\nimport { useBehavioralTrackingProps as _useBehavioralTrackingProps } from '../../../../core/hooks/useBehavioralTrackingProps.js';\nimport { ChartToolbarRenderer } from '../../../core/components/toolbar/ChartToolbarRenderer.js';\nimport type { ChartToolbarRendererProps } from '../../../core/components/toolbar/types.js';\nimport { getMenuTriggerDisplayMode } from '../../../core/components/toolbar/utils/get-menu-trigger-display-mode.js';\nimport { getMenuTriggerIcon } from '../../../core/components/toolbar/utils/get-menu-trigger-icon.js';\nimport { ChartOverlaysElevation } from '../../../core/constants.js';\nimport type { ToolbarPlacement } from '../../../core/types/toolbar.js';\nimport { getA11yToolbarConfig } from '../../../core/utils/zoom.js';\nimport { defaultToolbar } from '../../constants/defaults.js';\nimport { useDownload } from '../../hooks/useDownload.js';\nimport { useToolbar } from '../../hooks/useToolbar.js';\nimport { useXYChartData } from '../../hooks/useXYChartData.js';\nimport { useXYChartSelectionAreaRef } from '../../hooks/useXYChartSelectionAreaRef.js';\nimport { XYCHART_MESSAGES } from '../../messages/messages.js';\nimport { useInteractionModeState } from '../../store/selectors.js';\nimport { buildAndDownloadCsv } from '../../utils/build-and-download-csv.js';\n\ntype XYChartToolbarProps = {\n  onMouseEnter?: (event?: ReactMouseEvent<HTMLDivElement, MouseEvent>) => void;\n  onMouseLeave?: (react?: ReactMouseEvent<HTMLDivElement, MouseEvent>) => void;\n  handlerRef?: ChartToolbarRendererProps['handlerRef'];\n};\n\nexport const XYChartToolbar = ({\n  onMouseEnter,\n  onMouseLeave,\n  handlerRef,\n}: XYChartToolbarProps) => {\n  const toolbarContext = useToolbar();\n  const { collapsed, placement, hidden, intents } = toolbarContext;\n  const { downloadDataCallback } = useDownload();\n  const interactionMode = useInteractionModeState();\n  const { axesMetadata } = useXYChartData();\n  const intl = useIntl();\n  const selectionAreaRef = useXYChartSelectionAreaRef();\n\n  const isZoomEnabled = axesMetadata.isZoomEnabled;\n  const isPanEnabled = axesMetadata.isPanEnabled;\n  const exploreBtnPlace = isZoomEnabled || isPanEnabled ? 'menu' : 'auto';\n  const isDownloadEnabled = true;\n\n  const initialA11yState = getA11yToolbarConfig({\n    zoom: { enabled: isZoomEnabled },\n    pan: { enabled: isPanEnabled },\n    download: { enabled: isDownloadEnabled },\n    intent: !!intents,\n  });\n\n  const menuIcon = getMenuTriggerIcon(interactionMode, isZoomEnabled);\n\n  const menuLabel =\n    !isPanEnabled && !isZoomEnabled\n      ? intl.formatMessage(XYCHART_MESSAGES.zoomModeExplore)\n      : undefined;\n\n  const menuDisplayMode = getMenuTriggerDisplayMode({\n    isPanEnabled,\n    isZoomEnabled,\n    isDownloadEnabled,\n  });\n\n  const { seriesWithDatapoints, datapointMetadataMap, seriesToMetadata } =\n    useXYChartData();\n\n  const handleDownloadDataToolbar = () => {\n    buildAndDownloadCsv(\n      seriesWithDatapoints,\n      seriesToMetadata,\n      datapointMetadataMap,\n      downloadDataCallback,\n    );\n  };\n\n  const showDefaultToolbarDownloadButton = isDownloadEnabled && !intents;\n  const showMenuToolbarButton = isDownloadEnabled && !!intents?.length;\n\n  const onClose = () =>\n    selectionAreaRef ? selectionAreaRef.current?.focus() : undefined;\n\n  const behaviorTrackingProps = _useBehavioralTrackingProps(toolbarContext)[0];\n\n  return !hidden ? (\n    <ChartToolbarRenderer\n      visibleWhenMouseInBounds\n      handlerRef={handlerRef}\n      placement={placement ?? (defaultToolbar.placement as ToolbarPlacement)}\n      draggable={true}\n      collapsed={collapsed}\n      initialA11yState={initialA11yState}\n      zIndex={ChartOverlaysElevation.toolbar}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      menuIcon={menuIcon}\n      menuTriggerLabel={menuLabel}\n      menuDisplayMode={menuDisplayMode}\n      isDownloadEnabled={showMenuToolbarButton}\n      intents={intents}\n      handleDownloadDataToolbar={handleDownloadDataToolbar}\n      onClose={onClose}\n      {...behaviorTrackingProps}\n    >\n      <>\n        <ExploreButton placement={exploreBtnPlace} />\n        {isZoomEnabled && <ZoomModeButton />}\n        {isPanEnabled && <PanButton />}\n      </>\n      {isZoomEnabled && <ZoomInOutButtons />}\n      {isZoomEnabled && <ResetButton />}\n      {showDefaultToolbarDownloadButton && <DownloadDataButton />}\n    </ChartToolbarRenderer>\n  ) : null;\n};\n\nXYChartToolbar['displayName'] = 'XYChartToolbar';\n"],
+  "mappings": "AA8GM,mBACE,KADF;AA7GN,SAAS,eAAe;AAExB,SAAS,0BAA0B;AACnC,SAAS,qBAAqB;AAC9B,SAAS,iBAAiB;AAC1B,SAAS,mBAAmB;AAC5B,SAAS,wBAAwB;AACjC,SAAS,sBAAsB;AAC/B,SAAS,8BAA8B,mCAAmC;AAC1E,SAAS,4BAA4B;AAErC,SAAS,iCAAiC;AAC1C,SAAS,0BAA0B;AACnC,SAAS,8BAA8B;AAEvC,SAAS,4BAA4B;AACrC,SAAS,sBAAsB;AAC/B,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,sBAAsB;AAC/B,SAAS,kCAAkC;AAC3C,SAAS,wBAAwB;AACjC,SAAS,+BAA+B;AACxC,SAAS,2BAA2B;AAQ7B,MAAM,iBAAiB,CAAC;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AACF,MAA2B;AACzB,QAAM,iBAAiB,WAAW;AAClC,QAAM,EAAE,WAAW,WAAW,QAAQ,QAAQ,IAAI;AAClD,QAAM,EAAE,qBAAqB,IAAI,YAAY;AAC7C,QAAM,kBAAkB,wBAAwB;AAChD,QAAM,EAAE,aAAa,IAAI,eAAe;AACxC,QAAM,OAAO,QAAQ;AACrB,QAAM,mBAAmB,2BAA2B;AAEpD,QAAM,gBAAgB,aAAa;AACnC,QAAM,eAAe,aAAa;AAClC,QAAM,kBAAkB,iBAAiB,eAAe,SAAS;AACjE,QAAM,oBAAoB;AAE1B,QAAM,mBAAmB,qBAAqB;AAAA,IAC5C,MAAM,EAAE,SAAS,cAAc;AAAA,IAC/B,KAAK,EAAE,SAAS,aAAa;AAAA,IAC7B,UAAU,EAAE,SAAS,kBAAkB;AAAA,IACvC,QAAQ,CAAC,CAAC;AAAA,EACZ,CAAC;AAED,QAAM,WAAW,mBAAmB,iBAAiB,aAAa;AAElE,QAAM,YACJ,CAAC,gBAAgB,CAAC,gBACd,KAAK,cAAc,iBAAiB,eAAe,IACnD;AAEN,QAAM,kBAAkB,0BAA0B;AAAA,IAChD;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,EAAE,sBAAsB,sBAAsB,iBAAiB,IACnE,eAAe;AAEjB,QAAM,4BAA4B,MAAM;AACtC;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,QAAM,mCAAmC,qBAAqB,CAAC;AAC/D,QAAM,wBAAwB,qBAAqB,CAAC,CAAC,SAAS;AAE9D,QAAM,UAAU,MACd,mBAAmB,iBAAiB,SAAS,MAAM,IAAI;AAEzD,QAAM,wBAAwB,4BAA4B,cAAc,EAAE,CAAC;AAE3E,SAAO,CAAC,SACN;AAAA,IAAC;AAAA;AAAA,MACC,0BAAwB;AAAA,MACxB;AAAA,MACA,WAAW,aAAc,eAAe;AAAA,MACxC,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA,QAAQ,uBAAuB;AAAA,MAC/B;AAAA,MACA;AAAA,MACA;AAAA,MACA,kBAAkB;AAAA,MAClB;AAAA,MACA,mBAAmB;AAAA,MACnB;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA,yCACE;AAAA,8BAAC,iBAAc,WAAW,iBAAiB;AAAA,UAC1C,iBAAiB,oBAAC,kBAAe;AAAA,UACjC,gBAAgB,oBAAC,aAAU;AAAA,WAC9B;AAAA,QACC,iBAAiB,oBAAC,oBAAiB;AAAA,QACnC,iBAAiB,oBAAC,eAAY;AAAA,QAC9B,oCAAoC,oBAAC,sBAAmB;AAAA;AAAA;AAAA,EAC3D,IACE;AACN;AAEA,eAAe,aAAa,IAAI;",
   "names": []
 }

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

@@ -6,6 +6,7 @@ import { OverlayTooltip } from "../../../../core/components/overlay-tooltip/Over
 import { useAreaData } from "../../../hooks/useAreaData.js";
 import { useAxesFormatter } from "../../../hooks/useAxesFormatter.js";
 import { useXYChartData } from "../../../hooks/useXYChartData.js";
+import { useXYChartTooltip } from "../../../hooks/useXYChartTooltip.js";
 import { useXYChartTruncationMode } from "../../../hooks/useXYChartTruncationMode.js";
 function ClosestPointTooltip({
   datapoint,
@@ -17,7 +18,8 @@ function ClosestPointTooltip({
   const intl = useIntl();
   const { filteredSeriesWithDatapoints } = useAreaData();
   const { truncationMode } = useXYChartTruncationMode();
-  const { name, color, actions, shape } = buildClosestPointTooltipHeaderProps({
+  const { seriesDisplayMode } = useXYChartTooltip();
+  const { name, nameSegments, color, actions, shape } = buildClosestPointTooltipHeaderProps({
     datapoint,
     series,
     seriesToMetadata,
@@ -33,12 +35,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/esm/charts/xy-chart/components/tooltip/ClosestPointTooltip/ClosestPointTooltip.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/xy-chart/components/tooltip/ClosestPointTooltip/ClosestPointTooltip.tsx"],
-  "sourcesContent": ["import { useIntl } from 'react-intl';\n\nimport { buildClosestPointTooltipBodyProps } from './closestPointTooltipBodyUtils.js';\nimport { buildClosestPointTooltipHeaderProps } from './closestPointTooltipHeaderUtils.js';\nimport { OverlayTooltip } from '../../../../core/components/overlay-tooltip/OverlayTooltip.js';\nimport type { SeriesItemProps } from '../../../../core/components/overlay-tooltip/types/series.js';\nimport { useAreaData } from '../../../hooks/useAreaData.js';\nimport { useAxesFormatter } from '../../../hooks/useAxesFormatter.js';\nimport { useXYChartData } from '../../../hooks/useXYChartData.js';\nimport { useXYChartTruncationMode } from '../../../hooks/useXYChartTruncationMode.js';\nimport type {\n  ClosestDatapoint,\n  ClosestSeries,\n  ClosestSeriesToMetadata,\n} from '../../../utils/type-guards.js';\n\nexport function ClosestPointTooltip<T extends ClosestSeries>({\n  datapoint,\n  series,\n  seriesToMetadata,\n}: Readonly<{\n  datapoint: ClosestDatapoint<T>;\n  series: T;\n  seriesToMetadata: ClosestSeriesToMetadata<T>;\n}>) {\n  const axisIdToFormatter = useAxesFormatter();\n  const { axisIdToScaleDomain, datapointMetadataMap } = useXYChartData();\n  const intl = useIntl();\n  const { filteredSeriesWithDatapoints } = useAreaData();\n  const { truncationMode } = useXYChartTruncationMode();\n\n  const { name, color, actions, shape } = buildClosestPointTooltipHeaderProps({\n    datapoint,\n    series,\n    seriesToMetadata,\n    seriesWithDatapoints: filteredSeriesWithDatapoints,\n    datapointMetadataMap,\n  });\n  const { xAxisValue, yAxisValue, xAxisDuration, yAxisDuration } =\n    buildClosestPointTooltipBodyProps({\n      datapoint,\n      series,\n      seriesToMetadata,\n      axisIdToFormatter,\n      axisIdToScaleDomain,\n      datapointMetadataMap,\n      intl,\n    });\n  const data: SeriesItemProps[] = [\n    {\n      name: name,\n      value: `${yAxisValue} ${yAxisDuration ? `(${yAxisDuration})` : ''}`,\n      color,\n      shape,\n    },\n  ];\n  const label = datapoint.x0 instanceof Date ? '' : undefined;\n\n  return (\n    <OverlayTooltip truncation={truncationMode}>\n      <OverlayTooltip.Header\n        header1={xAxisValue}\n        duration1={xAxisDuration}\n        label={label}\n      />\n      <OverlayTooltip.Series\n        data={data}\n        variant=\"shared\"\n        activeItem={-1}\n        seriesItemTemplate={(item) => (\n          <OverlayTooltip.SeriesItem {...item} actions={actions} />\n        )}\n      />\n    </OverlayTooltip>\n  );\n}\n"],
-  "mappings": "AA2DI,SACE,KADF;AA3DJ,SAAS,eAAe;AAExB,SAAS,yCAAyC;AAClD,SAAS,2CAA2C;AACpD,SAAS,sBAAsB;AAE/B,SAAS,mBAAmB;AAC5B,SAAS,wBAAwB;AACjC,SAAS,sBAAsB;AAC/B,SAAS,gCAAgC;AAOlC,SAAS,oBAA6C;AAAA,EAC3D;AAAA,EACA;AAAA,EACA;AACF,GAII;AACF,QAAM,oBAAoB,iBAAiB;AAC3C,QAAM,EAAE,qBAAqB,qBAAqB,IAAI,eAAe;AACrE,QAAM,OAAO,QAAQ;AACrB,QAAM,EAAE,6BAA6B,IAAI,YAAY;AACrD,QAAM,EAAE,eAAe,IAAI,yBAAyB;AAEpD,QAAM,EAAE,MAAM,OAAO,SAAS,MAAM,IAAI,oCAAoC;AAAA,IAC1E;AAAA,IACA;AAAA,IACA;AAAA,IACA,sBAAsB;AAAA,IACtB;AAAA,EACF,CAAC;AACD,QAAM,EAAE,YAAY,YAAY,eAAe,cAAc,IAC3D,kCAAkC;AAAA,IAChC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACH,QAAM,OAA0B;AAAA,IAC9B;AAAA,MACE;AAAA,MACA,OAAO,GAAG,UAAU,IAAI,gBAAgB,IAAI,aAAa,MAAM,EAAE;AAAA,MACjE;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACA,QAAM,QAAQ,UAAU,cAAc,OAAO,KAAK;AAElD,SACE,qBAAC,kBAAe,YAAY,gBAC1B;AAAA;AAAA,MAAC,eAAe;AAAA,MAAf;AAAA,QACC,SAAS;AAAA,QACT,WAAW;AAAA,QACX;AAAA;AAAA,IACF;AAAA,IACA;AAAA,MAAC,eAAe;AAAA,MAAf;AAAA,QACC;AAAA,QACA,SAAQ;AAAA,QACR,YAAY;AAAA,QACZ,oBAAoB,CAAC,SACnB,oBAAC,eAAe,YAAf,EAA2B,GAAG,MAAM,SAAkB;AAAA;AAAA,IAE3D;AAAA,KACF;AAEJ;",
+  "sourcesContent": ["import { useIntl } from 'react-intl';\n\nimport { buildClosestPointTooltipBodyProps } from './closestPointTooltipBodyUtils.js';\nimport { buildClosestPointTooltipHeaderProps } from './closestPointTooltipHeaderUtils.js';\nimport { OverlayTooltip } from '../../../../core/components/overlay-tooltip/OverlayTooltip.js';\nimport type { SeriesItemProps } from '../../../../core/components/overlay-tooltip/types/series.js';\nimport { useAreaData } from '../../../hooks/useAreaData.js';\nimport { useAxesFormatter } from '../../../hooks/useAxesFormatter.js';\nimport { useXYChartData } from '../../../hooks/useXYChartData.js';\nimport { useXYChartTooltip } from '../../../hooks/useXYChartTooltip.js';\nimport { useXYChartTruncationMode } from '../../../hooks/useXYChartTruncationMode.js';\nimport type {\n  ClosestDatapoint,\n  ClosestSeries,\n  ClosestSeriesToMetadata,\n} from '../../../utils/type-guards.js';\n\nexport function ClosestPointTooltip<T extends ClosestSeries>({\n  datapoint,\n  series,\n  seriesToMetadata,\n}: Readonly<{\n  datapoint: ClosestDatapoint<T>;\n  series: T;\n  seriesToMetadata: ClosestSeriesToMetadata<T>;\n}>) {\n  const axisIdToFormatter = useAxesFormatter();\n  const { axisIdToScaleDomain, datapointMetadataMap } = useXYChartData();\n  const intl = useIntl();\n  const { filteredSeriesWithDatapoints } = useAreaData();\n  const { truncationMode } = useXYChartTruncationMode();\n  const { seriesDisplayMode } = useXYChartTooltip();\n\n  const { name, nameSegments, color, actions, shape } =\n    buildClosestPointTooltipHeaderProps({\n      datapoint,\n      series,\n      seriesToMetadata,\n      seriesWithDatapoints: filteredSeriesWithDatapoints,\n      datapointMetadataMap,\n    });\n  const { xAxisValue, yAxisValue, xAxisDuration, yAxisDuration } =\n    buildClosestPointTooltipBodyProps({\n      datapoint,\n      series,\n      seriesToMetadata,\n      axisIdToFormatter,\n      axisIdToScaleDomain,\n      datapointMetadataMap,\n      intl,\n    });\n\n  const isMultiLine =\n    nameSegments !== undefined && seriesDisplayMode === 'multi-line';\n  const displayName: string | string[] = isMultiLine ? nameSegments : name;\n\n  const data: SeriesItemProps[] = [\n    {\n      name: displayName,\n      value: `${yAxisValue} ${yAxisDuration ? `(${yAxisDuration})` : ''}`,\n      color,\n      shape,\n      multiLine: isMultiLine,\n    },\n  ];\n  const label = datapoint.x0 instanceof Date ? '' : undefined;\n\n  return (\n    <OverlayTooltip truncation={truncationMode}>\n      <OverlayTooltip.Header\n        header1={xAxisValue}\n        duration1={xAxisDuration}\n        label={label}\n      />\n      <OverlayTooltip.Series\n        data={data}\n        variant=\"shared\"\n        activeItem={-1}\n        seriesItemTemplate={(item) => (\n          <OverlayTooltip.SeriesItem {...item} actions={actions} />\n        )}\n      />\n    </OverlayTooltip>\n  );\n}\n"],
+  "mappings": "AAoEI,SACE,KADF;AApEJ,SAAS,eAAe;AAExB,SAAS,yCAAyC;AAClD,SAAS,2CAA2C;AACpD,SAAS,sBAAsB;AAE/B,SAAS,mBAAmB;AAC5B,SAAS,wBAAwB;AACjC,SAAS,sBAAsB;AAC/B,SAAS,yBAAyB;AAClC,SAAS,gCAAgC;AAOlC,SAAS,oBAA6C;AAAA,EAC3D;AAAA,EACA;AAAA,EACA;AACF,GAII;AACF,QAAM,oBAAoB,iBAAiB;AAC3C,QAAM,EAAE,qBAAqB,qBAAqB,IAAI,eAAe;AACrE,QAAM,OAAO,QAAQ;AACrB,QAAM,EAAE,6BAA6B,IAAI,YAAY;AACrD,QAAM,EAAE,eAAe,IAAI,yBAAyB;AACpD,QAAM,EAAE,kBAAkB,IAAI,kBAAkB;AAEhD,QAAM,EAAE,MAAM,cAAc,OAAO,SAAS,MAAM,IAChD,oCAAoC;AAAA,IAClC;AAAA,IACA;AAAA,IACA;AAAA,IACA,sBAAsB;AAAA,IACtB;AAAA,EACF,CAAC;AACH,QAAM,EAAE,YAAY,YAAY,eAAe,cAAc,IAC3D,kCAAkC;AAAA,IAChC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAEH,QAAM,cACJ,iBAAiB,UAAa,sBAAsB;AACtD,QAAM,cAAiC,cAAc,eAAe;AAEpE,QAAM,OAA0B;AAAA,IAC9B;AAAA,MACE,MAAM;AAAA,MACN,OAAO,GAAG,UAAU,IAAI,gBAAgB,IAAI,aAAa,MAAM,EAAE;AAAA,MACjE;AAAA,MACA;AAAA,MACA,WAAW;AAAA,IACb;AAAA,EACF;AACA,QAAM,QAAQ,UAAU,cAAc,OAAO,KAAK;AAElD,SACE,qBAAC,kBAAe,YAAY,gBAC1B;AAAA;AAAA,MAAC,eAAe;AAAA,MAAf;AAAA,QACC,SAAS;AAAA,QACT,WAAW;AAAA,QACX;AAAA;AAAA,IACF;AAAA,IACA;AAAA,MAAC,eAAe;AAAA,MAAf;AAAA,QACC;AAAA,QACA,SAAQ;AAAA,QACR,YAAY;AAAA,QACZ,oBAAoB,CAAC,SACnB,oBAAC,eAAe,YAAf,EAA2B,GAAG,MAAM,SAAkB;AAAA;AAAA,IAE3D;AAAA,KACF;AAEJ;",
   "names": []
 }

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

@@ -16,7 +16,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 (isAreaTooltipContext(enrichedDatapoint)) {
@@ -41,6 +41,7 @@ const buildClosestPointTooltipHeaderProps = ({
   return {
     color: color.Default,
     name,
+    nameSegments,
     actions,
     shape
   };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/xy-chart/components/tooltip/ClosestPointTooltip/closestPointTooltipHeaderUtils.ts"],
-  "sourcesContent": ["import type { SeriesActionsTemplate } from '../../../../core/types/series-actions-template.js';\nimport { safeGet } from '../../../../core/utils/safe-get.js';\nimport type {\n  AreaSeriesToMetadata,\n  AreaSeriesWithDatapoints,\n  MapDatapoints,\n} from '../../../types/xy-chart-internals.js';\nimport { buildAreaSeriesActionItem } from '../../../utils/build-series-action-item.js';\nimport {\n  isAreaTooltipContext,\n  type ClosestDatapoint,\n  type ClosestSeries,\n  type ClosestSeriesToMetadata,\n  type TooltipContextClosestPoints,\n} from '../../../utils/type-guards.js';\n\nexport interface BuildClosestPointTooltipHeaderPropsArgs<\n  T extends ClosestSeries,\n  K extends ClosestDatapoint<T>,\n> {\n  datapoint: K;\n  series: T;\n  seriesToMetadata: ClosestSeriesToMetadata<T>;\n  seriesWithDatapoints: AreaSeriesWithDatapoints[];\n  datapointMetadataMap: MapDatapoints;\n}\n\nexport const buildClosestPointTooltipHeaderProps = <\n  T extends ClosestSeries,\n  K extends ClosestDatapoint<T>,\n>({\n  datapoint,\n  series,\n  seriesToMetadata,\n  seriesWithDatapoints,\n  datapointMetadataMap,\n}: BuildClosestPointTooltipHeaderPropsArgs<T, K>) => {\n  const metadata = safeGet(seriesToMetadata, series);\n\n  const enrichedDatapoint: TooltipContextClosestPoints = {\n    series,\n    datapoint,\n    metadata,\n  };\n\n  const { name = '', color = { Default: 'blue' } } = metadata;\n\n  const shape = 'shape' in metadata ? metadata.shape : undefined;\n\n  let actions: (() => SeriesActionsTemplate) | undefined = undefined;\n\n  if (isAreaTooltipContext(enrichedDatapoint)) {\n    const { actions: seriesActions } = enrichedDatapoint.metadata;\n    actions = seriesActions\n      ? () => {\n          const actionItem = buildAreaSeriesActionItem({\n            datapoint: enrichedDatapoint.datapoint,\n            allSeries: seriesWithDatapoints,\n            seriesToMetadata:\n              seriesToMetadata as unknown as AreaSeriesToMetadata,\n            datapointMetadataMap,\n            currentSeries: enrichedDatapoint.series,\n          });\n          return seriesActions(actionItem);\n        }\n      : undefined;\n  } else {\n    const { actions: seriesActions } = enrichedDatapoint.metadata;\n    actions = () =>\n      (\n        seriesActions as (\n          datapoint: K & { name: string },\n        ) => SeriesActionsTemplate\n      )?.({\n        ...datapoint,\n        name,\n      });\n  }\n\n  return {\n    color: color.Default,\n    name,\n    actions,\n    shape,\n  };\n};\n"],
-  "mappings": "AACA,SAAS,eAAe;AAMxB,SAAS,iCAAiC;AAC1C;AAAA,EACE;AAAA,OAKK;AAaA,MAAM,sCAAsC,CAGjD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAqD;AACnD,QAAM,WAAW,QAAQ,kBAAkB,MAAM;AAEjD,QAAM,oBAAiD;AAAA,IACrD;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,EAAE,OAAO,IAAI,QAAQ,EAAE,SAAS,OAAO,EAAE,IAAI;AAEnD,QAAM,QAAQ,WAAW,WAAW,SAAS,QAAQ;AAErD,MAAI,UAAqD;AAEzD,MAAI,qBAAqB,iBAAiB,GAAG;AAC3C,UAAM,EAAE,SAAS,cAAc,IAAI,kBAAkB;AACrD,cAAU,gBACN,MAAM;AACJ,YAAM,aAAa,0BAA0B;AAAA,QAC3C,WAAW,kBAAkB;AAAA,QAC7B,WAAW;AAAA,QACX;AAAA,QAEA;AAAA,QACA,eAAe,kBAAkB;AAAA,MACnC,CAAC;AACD,aAAO,cAAc,UAAU;AAAA,IACjC,IACA;AAAA,EACN,OAAO;AACL,UAAM,EAAE,SAAS,cAAc,IAAI,kBAAkB;AACrD,cAAU,MAEN,gBAGE;AAAA,MACF,GAAG;AAAA,MACH;AAAA,IACF,CAAC;AAAA,EACL;AAEA,SAAO;AAAA,IACL,OAAO,MAAM;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
+  "sourcesContent": ["import type { SeriesActionsTemplate } from '../../../../core/types/series-actions-template.js';\nimport { safeGet } from '../../../../core/utils/safe-get.js';\nimport type {\n  AreaSeriesToMetadata,\n  AreaSeriesWithDatapoints,\n  MapDatapoints,\n} from '../../../types/xy-chart-internals.js';\nimport { buildAreaSeriesActionItem } from '../../../utils/build-series-action-item.js';\nimport {\n  isAreaTooltipContext,\n  type ClosestDatapoint,\n  type ClosestSeries,\n  type ClosestSeriesToMetadata,\n  type TooltipContextClosestPoints,\n} from '../../../utils/type-guards.js';\n\nexport interface BuildClosestPointTooltipHeaderPropsArgs<\n  T extends ClosestSeries,\n  K extends ClosestDatapoint<T>,\n> {\n  datapoint: K;\n  series: T;\n  seriesToMetadata: ClosestSeriesToMetadata<T>;\n  seriesWithDatapoints: AreaSeriesWithDatapoints[];\n  datapointMetadataMap: MapDatapoints;\n}\n\nexport const buildClosestPointTooltipHeaderProps = <\n  T extends ClosestSeries,\n  K extends ClosestDatapoint<T>,\n>({\n  datapoint,\n  series,\n  seriesToMetadata,\n  seriesWithDatapoints,\n  datapointMetadataMap,\n}: BuildClosestPointTooltipHeaderPropsArgs<T, K>) => {\n  const metadata = safeGet(seriesToMetadata, series);\n\n  const enrichedDatapoint: TooltipContextClosestPoints = {\n    series,\n    datapoint,\n    metadata,\n  };\n\n  const { name = '', color = { Default: 'blue' }, nameSegments } = metadata;\n\n  const shape = 'shape' in metadata ? metadata.shape : undefined;\n\n  let actions: (() => SeriesActionsTemplate) | undefined = undefined;\n\n  if (isAreaTooltipContext(enrichedDatapoint)) {\n    const { actions: seriesActions } = enrichedDatapoint.metadata;\n    actions = seriesActions\n      ? () => {\n          const actionItem = buildAreaSeriesActionItem({\n            datapoint: enrichedDatapoint.datapoint,\n            allSeries: seriesWithDatapoints,\n            seriesToMetadata:\n              seriesToMetadata as unknown as AreaSeriesToMetadata,\n            datapointMetadataMap,\n            currentSeries: enrichedDatapoint.series,\n          });\n          return seriesActions(actionItem);\n        }\n      : undefined;\n  } else {\n    const { actions: seriesActions } = enrichedDatapoint.metadata;\n    actions = () =>\n      (\n        seriesActions as (\n          datapoint: K & { name: string },\n        ) => SeriesActionsTemplate\n      )?.({\n        ...datapoint,\n        name,\n      });\n  }\n\n  return {\n    color: color.Default,\n    name,\n    nameSegments,\n    actions,\n    shape,\n  };\n};\n"],
+  "mappings": "AACA,SAAS,eAAe;AAMxB,SAAS,iCAAiC;AAC1C;AAAA,EACE;AAAA,OAKK;AAaA,MAAM,sCAAsC,CAGjD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAqD;AACnD,QAAM,WAAW,QAAQ,kBAAkB,MAAM;AAEjD,QAAM,oBAAiD;AAAA,IACrD;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,EAAE,OAAO,IAAI,QAAQ,EAAE,SAAS,OAAO,GAAG,aAAa,IAAI;AAEjE,QAAM,QAAQ,WAAW,WAAW,SAAS,QAAQ;AAErD,MAAI,UAAqD;AAEzD,MAAI,qBAAqB,iBAAiB,GAAG;AAC3C,UAAM,EAAE,SAAS,cAAc,IAAI,kBAAkB;AACrD,cAAU,gBACN,MAAM;AACJ,YAAM,aAAa,0BAA0B;AAAA,QAC3C,WAAW,kBAAkB;AAAA,QAC7B,WAAW;AAAA,QACX;AAAA,QAEA;AAAA,QACA,eAAe,kBAAkB;AAAA,MACnC,CAAC;AACD,aAAO,cAAc,UAAU;AAAA,IACjC,IACA;AAAA,EACN,OAAO;AACL,UAAM,EAAE,SAAS,cAAc,IAAI,kBAAkB;AACrD,cAAU,MAEN,gBAGE;AAAA,MACF,GAAG;AAAA,MACH;AAAA,IACF,CAAC;AAAA,EACL;AAEA,SAAO;AAAA,IACL,OAAO,MAAM;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }

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

@@ -8,6 +8,7 @@ import { useBarData } from "../../../hooks/useBarData.js";
 import { useFormatCategory } from "../../../hooks/useFormatCategory.js";
 import { useXYChartColorScales } from "../../../hooks/useXYChartColorScales.js";
 import { useXYChartData } from "../../../hooks/useXYChartData.js";
+import { useXYChartTooltip } from "../../../hooks/useXYChartTooltip.js";
 import { useXYChartTruncationMode } from "../../../hooks/useXYChartTruncationMode.js";
 function HoveredPointTooltip({
   datapoint,
@@ -21,7 +22,8 @@ function HoveredPointTooltip({
   const axisIdToFormatter = useAxesFormatter();
   const formatCategory = useFormatCategory();
   const intl = useIntl();
-  const { name, value, color, actions } = buildHoveredPointTooltipHeaderProps({
+  const { seriesDisplayMode } = useXYChartTooltip();
+  const { name, nameSegments, value, color, actions } = buildHoveredPointTooltipHeaderProps({
     datapoint,
     series,
     seriesToMetadata,
@@ -40,12 +42,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/esm/charts/xy-chart/components/tooltip/HoveredPointTooltip/HoveredPointTooltip.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/xy-chart/components/tooltip/HoveredPointTooltip/HoveredPointTooltip.tsx"],
-  "sourcesContent": ["import { useIntl } from 'react-intl';\n\nimport { buildHoveredPointTooltipBodyProps } from './hoveredPointTooltipBodyUtils.js';\nimport { buildHoveredPointTooltipHeaderProps } from './hoveredPointTooltipHeaderUtils.js';\nimport { OverlayTooltip } from '../../../../core/components/overlay-tooltip/OverlayTooltip.js';\nimport type { SeriesItemProps } from '../../../../core/components/overlay-tooltip/types/series.js';\nimport { useAxesFormatter } from '../../../hooks/useAxesFormatter.js';\nimport { useBarData } from '../../../hooks/useBarData.js';\nimport { useFormatCategory } from '../../../hooks/useFormatCategory.js';\nimport { useXYChartColorScales } from '../../../hooks/useXYChartColorScales.js';\nimport { useXYChartData } from '../../../hooks/useXYChartData.js';\nimport { useXYChartTruncationMode } from '../../../hooks/useXYChartTruncationMode.js';\nimport type {\n  HoveredDatapoint,\n  HoveredSeries,\n  HoveredSeriesToMetadata,\n} from '../../../utils/type-guards.js';\n\nexport function HoveredPointTooltip<T extends HoveredSeries>({\n  datapoint,\n  series,\n  seriesToMetadata,\n}: Readonly<{\n  datapoint: HoveredDatapoint<T>;\n  series: T;\n  seriesToMetadata: HoveredSeriesToMetadata<T>;\n}>) {\n  const { filteredSeriesWithDatapoints } = useBarData();\n  const { axisIdToScaleDomain, datapointMetadataMap } = useXYChartData();\n  const colorScaleMap = useXYChartColorScales();\n  const { truncationMode } = useXYChartTruncationMode();\n  const axisIdToFormatter = useAxesFormatter();\n  const formatCategory = useFormatCategory();\n  const intl = useIntl();\n\n  const { name, value, color, actions } = buildHoveredPointTooltipHeaderProps({\n    datapoint,\n    series,\n    seriesToMetadata,\n    seriesWithDatapoints: filteredSeriesWithDatapoints,\n    datapointMetadataMap,\n    colorScaleMap,\n  });\n\n  const { yAxisValue, xAxisValue, xAxisDuration, yAxisDuration } =\n    buildHoveredPointTooltipBodyProps({\n      datapoint,\n      series,\n      seriesToMetadata,\n      axisIdToFormatter,\n      axisIdToScaleDomain,\n      datapointMetadataMap,\n      formatCategory,\n      intl,\n    });\n  const isRect = series.type === 'rect';\n\n  const yText = `${yAxisValue} ${yAxisDuration ? `(${yAxisDuration})` : ''}`;\n  const data: SeriesItemProps[] = [\n    {\n      name: isRect ? yText : name,\n      value: isRect ? (value as string) : yText,\n      color,\n    },\n  ];\n  const label = datapoint.x0 instanceof Date ? '' : undefined;\n\n  return (\n    <OverlayTooltip truncation={truncationMode}>\n      <OverlayTooltip.Header\n        header1={xAxisValue}\n        duration1={xAxisDuration}\n        label={label}\n      />\n      <OverlayTooltip.Series\n        data={data}\n        variant=\"shared\"\n        activeItem={-1}\n        seriesItemTemplate={(item) => (\n          <OverlayTooltip.SeriesItem {...item} actions={actions} />\n        )}\n      />\n    </OverlayTooltip>\n  );\n}\n"],
-  "mappings": "AAoEI,SACE,KADF;AApEJ,SAAS,eAAe;AAExB,SAAS,yCAAyC;AAClD,SAAS,2CAA2C;AACpD,SAAS,sBAAsB;AAE/B,SAAS,wBAAwB;AACjC,SAAS,kBAAkB;AAC3B,SAAS,yBAAyB;AAClC,SAAS,6BAA6B;AACtC,SAAS,sBAAsB;AAC/B,SAAS,gCAAgC;AAOlC,SAAS,oBAA6C;AAAA,EAC3D;AAAA,EACA;AAAA,EACA;AACF,GAII;AACF,QAAM,EAAE,6BAA6B,IAAI,WAAW;AACpD,QAAM,EAAE,qBAAqB,qBAAqB,IAAI,eAAe;AACrE,QAAM,gBAAgB,sBAAsB;AAC5C,QAAM,EAAE,eAAe,IAAI,yBAAyB;AACpD,QAAM,oBAAoB,iBAAiB;AAC3C,QAAM,iBAAiB,kBAAkB;AACzC,QAAM,OAAO,QAAQ;AAErB,QAAM,EAAE,MAAM,OAAO,OAAO,QAAQ,IAAI,oCAAoC;AAAA,IAC1E;AAAA,IACA;AAAA,IACA;AAAA,IACA,sBAAsB;AAAA,IACtB;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,EAAE,YAAY,YAAY,eAAe,cAAc,IAC3D,kCAAkC;AAAA,IAChC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACH,QAAM,SAAS,OAAO,SAAS;AAE/B,QAAM,QAAQ,GAAG,UAAU,IAAI,gBAAgB,IAAI,aAAa,MAAM,EAAE;AACxE,QAAM,OAA0B;AAAA,IAC9B;AAAA,MACE,MAAM,SAAS,QAAQ;AAAA,MACvB,OAAO,SAAU,QAAmB;AAAA,MACpC;AAAA,IACF;AAAA,EACF;AACA,QAAM,QAAQ,UAAU,cAAc,OAAO,KAAK;AAElD,SACE,qBAAC,kBAAe,YAAY,gBAC1B;AAAA;AAAA,MAAC,eAAe;AAAA,MAAf;AAAA,QACC,SAAS;AAAA,QACT,WAAW;AAAA,QACX;AAAA;AAAA,IACF;AAAA,IACA;AAAA,MAAC,eAAe;AAAA,MAAf;AAAA,QACC;AAAA,QACA,SAAQ;AAAA,QACR,YAAY;AAAA,QACZ,oBAAoB,CAAC,SACnB,oBAAC,eAAe,YAAf,EAA2B,GAAG,MAAM,SAAkB;AAAA;AAAA,IAE3D;AAAA,KACF;AAEJ;",
+  "sourcesContent": ["import { useIntl } from 'react-intl';\n\nimport { buildHoveredPointTooltipBodyProps } from './hoveredPointTooltipBodyUtils.js';\nimport { buildHoveredPointTooltipHeaderProps } from './hoveredPointTooltipHeaderUtils.js';\nimport { OverlayTooltip } from '../../../../core/components/overlay-tooltip/OverlayTooltip.js';\nimport type { SeriesItemProps } from '../../../../core/components/overlay-tooltip/types/series.js';\nimport { useAxesFormatter } from '../../../hooks/useAxesFormatter.js';\nimport { useBarData } from '../../../hooks/useBarData.js';\nimport { useFormatCategory } from '../../../hooks/useFormatCategory.js';\nimport { useXYChartColorScales } from '../../../hooks/useXYChartColorScales.js';\nimport { useXYChartData } from '../../../hooks/useXYChartData.js';\nimport { useXYChartTooltip } from '../../../hooks/useXYChartTooltip.js';\nimport { useXYChartTruncationMode } from '../../../hooks/useXYChartTruncationMode.js';\nimport type {\n  HoveredDatapoint,\n  HoveredSeries,\n  HoveredSeriesToMetadata,\n} from '../../../utils/type-guards.js';\n\nexport function HoveredPointTooltip<T extends HoveredSeries>({\n  datapoint,\n  series,\n  seriesToMetadata,\n}: Readonly<{\n  datapoint: HoveredDatapoint<T>;\n  series: T;\n  seriesToMetadata: HoveredSeriesToMetadata<T>;\n}>) {\n  const { filteredSeriesWithDatapoints } = useBarData();\n  const { axisIdToScaleDomain, datapointMetadataMap } = useXYChartData();\n  const colorScaleMap = useXYChartColorScales();\n  const { truncationMode } = useXYChartTruncationMode();\n  const axisIdToFormatter = useAxesFormatter();\n  const formatCategory = useFormatCategory();\n  const intl = useIntl();\n  const { seriesDisplayMode } = useXYChartTooltip();\n\n  const { name, nameSegments, value, color, actions } =\n    buildHoveredPointTooltipHeaderProps({\n      datapoint,\n      series,\n      seriesToMetadata,\n      seriesWithDatapoints: filteredSeriesWithDatapoints,\n      datapointMetadataMap,\n      colorScaleMap,\n    });\n\n  const { yAxisValue, xAxisValue, xAxisDuration, yAxisDuration } =\n    buildHoveredPointTooltipBodyProps({\n      datapoint,\n      series,\n      seriesToMetadata,\n      axisIdToFormatter,\n      axisIdToScaleDomain,\n      datapointMetadataMap,\n      formatCategory,\n      intl,\n    });\n  const isRect = series.type === 'rect';\n  const isMultiLine =\n    !isRect && nameSegments !== undefined && seriesDisplayMode === 'multi-line';\n  const displayName: string | string[] = isMultiLine ? nameSegments : name;\n\n  const yText = `${yAxisValue} ${yAxisDuration ? `(${yAxisDuration})` : ''}`;\n  const data: SeriesItemProps[] = [\n    {\n      name: isRect ? yText : displayName,\n      value: isRect ? (value as string) : yText,\n      color,\n      multiLine: isMultiLine,\n    },\n  ];\n  const label = datapoint.x0 instanceof Date ? '' : undefined;\n\n  return (\n    <OverlayTooltip truncation={truncationMode}>\n      <OverlayTooltip.Header\n        header1={xAxisValue}\n        duration1={xAxisDuration}\n        label={label}\n      />\n      <OverlayTooltip.Series\n        data={data}\n        variant=\"shared\"\n        activeItem={-1}\n        seriesItemTemplate={(item) => (\n          <OverlayTooltip.SeriesItem {...item} actions={actions} />\n        )}\n      />\n    </OverlayTooltip>\n  );\n}\n"],
+  "mappings": "AA2EI,SACE,KADF;AA3EJ,SAAS,eAAe;AAExB,SAAS,yCAAyC;AAClD,SAAS,2CAA2C;AACpD,SAAS,sBAAsB;AAE/B,SAAS,wBAAwB;AACjC,SAAS,kBAAkB;AAC3B,SAAS,yBAAyB;AAClC,SAAS,6BAA6B;AACtC,SAAS,sBAAsB;AAC/B,SAAS,yBAAyB;AAClC,SAAS,gCAAgC;AAOlC,SAAS,oBAA6C;AAAA,EAC3D;AAAA,EACA;AAAA,EACA;AACF,GAII;AACF,QAAM,EAAE,6BAA6B,IAAI,WAAW;AACpD,QAAM,EAAE,qBAAqB,qBAAqB,IAAI,eAAe;AACrE,QAAM,gBAAgB,sBAAsB;AAC5C,QAAM,EAAE,eAAe,IAAI,yBAAyB;AACpD,QAAM,oBAAoB,iBAAiB;AAC3C,QAAM,iBAAiB,kBAAkB;AACzC,QAAM,OAAO,QAAQ;AACrB,QAAM,EAAE,kBAAkB,IAAI,kBAAkB;AAEhD,QAAM,EAAE,MAAM,cAAc,OAAO,OAAO,QAAQ,IAChD,oCAAoC;AAAA,IAClC;AAAA,IACA;AAAA,IACA;AAAA,IACA,sBAAsB;AAAA,IACtB;AAAA,IACA;AAAA,EACF,CAAC;AAEH,QAAM,EAAE,YAAY,YAAY,eAAe,cAAc,IAC3D,kCAAkC;AAAA,IAChC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACH,QAAM,SAAS,OAAO,SAAS;AAC/B,QAAM,cACJ,CAAC,UAAU,iBAAiB,UAAa,sBAAsB;AACjE,QAAM,cAAiC,cAAc,eAAe;AAEpE,QAAM,QAAQ,GAAG,UAAU,IAAI,gBAAgB,IAAI,aAAa,MAAM,EAAE;AACxE,QAAM,OAA0B;AAAA,IAC9B;AAAA,MACE,MAAM,SAAS,QAAQ;AAAA,MACvB,OAAO,SAAU,QAAmB;AAAA,MACpC;AAAA,MACA,WAAW;AAAA,IACb;AAAA,EACF;AACA,QAAM,QAAQ,UAAU,cAAc,OAAO,KAAK;AAElD,SACE,qBAAC,kBAAe,YAAY,gBAC1B;AAAA;AAAA,MAAC,eAAe;AAAA,MAAf;AAAA,QACC,SAAS;AAAA,QACT,WAAW;AAAA,QACX;AAAA;AAAA,IACF;AAAA,IACA;AAAA,MAAC,eAAe;AAAA,MAAf;AAAA,QACC;AAAA,QACA,SAAQ;AAAA,QACR,YAAY;AAAA,QACZ,oBAAoB,CAAC,SACnB,oBAAC,eAAe,YAAf,EAA2B,GAAG,MAAM,SAAkB;AAAA;AAAA,IAE3D;AAAA,KACF;AAEJ;",
   "names": []
 }

package/esm/charts/xy-chart/components/tooltip/HoveredPointTooltip/hooks/getHoveredPointTooltipBodyContent.js

@@ -1,12 +1,12 @@
 import { formatResolution } from "../../../../../core/components/tooltip/utils/resolution-formatter.js";
-import { XYCHART_MESSAGES } from "../../../../messages/messages.js";
 import {
   isCategoricalTooltip,
   isNumericalToolTip,
   isTimeTooltip
 } from "../../../../utils/type-guards.js";
+import { getCachedSeparator } from "../../utils/get-cached-separator.js";
 function getHoveredPointTooltipBodyContent(intl, v0, v1, formatter, toPercentage) {
-  const separator = intl.formatMessage(XYCHART_MESSAGES.separatorDash);
+  const separator = getCachedSeparator(intl);
   let duration;
   let text = "";
   const primaryValue = v0 ?? v1;

package/esm/charts/xy-chart/components/tooltip/HoveredPointTooltip/hooks/getHoveredPointTooltipBodyContent.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/charts/xy-chart/components/tooltip/HoveredPointTooltip/hooks/getHoveredPointTooltipBodyContent.ts"],
-  "sourcesContent": ["import type { IntlShape } from 'react-intl';\n\nimport { formatResolution } from '../../../../../core/components/tooltip/utils/resolution-formatter.js';\nimport type {\n  FormatterWithPrecision,\n  StringFormatter,\n  TimeFrameFormatter,\n} from '../../../../../core/types/formatter.js';\nimport { XYCHART_MESSAGES } from '../../../../messages/messages.js';\nimport type { XYAccessorDataTypes } from '../../../../types/xy-chart.js';\nimport {\n  isCategoricalTooltip,\n  isNumericalToolTip,\n  isTimeTooltip,\n} from '../../../../utils/type-guards.js';\n\n/**\n * Pure function that formats tooltip body content.\n * This can be called from non-React contexts (like utility functions).\n *\n * `formatter` is discriminated by the value type: a `StringFormatter` for\n * categorical axes, a `FormatterWithPrecision` for numerical axes, and a\n * `TimeFrameFormatter` for time axes.\n */\nexport function getHoveredPointTooltipBodyContent(\n  intl: IntlShape,\n  v0?: XYAccessorDataTypes | undefined,\n  v1?: XYAccessorDataTypes | undefined,\n  formatter?: FormatterWithPrecision | TimeFrameFormatter | StringFormatter,\n  toPercentage?: (value: number) => number,\n) {\n  const separator = intl.formatMessage(XYCHART_MESSAGES.separatorDash);\n\n  let duration: string | undefined;\n  let text = '';\n\n  const primaryValue = v0 ?? v1;\n  const secondaryValue = v0 !== undefined && v1 !== undefined ? v1 : undefined;\n\n  if (primaryValue === undefined) {\n    return { duration, text };\n  }\n\n  const args = {\n    formatter,\n    v0: primaryValue,\n    v1: secondaryValue,\n  };\n\n  if (isCategoricalTooltip(args)) {\n    const format = formatter as StringFormatter | undefined;\n    const formatValue = (v: string) => (format ? format(v) : v);\n    const startText = formatValue(String(args.v0));\n    const endText =\n      args.v1 === undefined ? startText : formatValue(String(args.v1));\n\n    text =\n      args.v1 === undefined\n        ? startText\n        : `${startText} ${separator} ${endText}`;\n\n    return { duration, text };\n  }\n\n  if (isNumericalToolTip(args) && formatter) {\n    const format = formatter as FormatterWithPrecision;\n    const percentageSuffix = (v: number) =>\n      toPercentage ? ` (${toPercentage(v)}%)` : '';\n    const formattedStart = `${format(args.v0 as number)}${percentageSuffix(\n      args.v0,\n    )}`;\n    const formattedEnd =\n      args.v1 === undefined\n        ? formattedStart\n        : `${format(args.v1 as number)}${percentageSuffix(args.v1)}`;\n\n    text =\n      args.v1 === undefined\n        ? formattedStart\n        : `${formattedStart} ${separator} ${formattedEnd}`;\n\n    if (args.v1 !== undefined) {\n      duration = format(Math.abs((args.v1 as number) - (args.v0 as number)));\n    }\n\n    return { duration, text };\n  }\n\n  if (isTimeTooltip(args) && formatter) {\n    const format = formatter as TimeFrameFormatter;\n\n    if (args.v0 instanceof Date) {\n      text = format(args.v0, args.v1 instanceof Date ? args.v1 : undefined);\n\n      if (args.v1 instanceof Date) {\n        duration = formatResolution(args.v0, args.v1);\n      }\n    }\n  }\n\n  return { duration, text };\n}\n"],
-  "mappings": "AAEA,SAAS,wBAAwB;AAMjC,SAAS,wBAAwB;AAEjC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAUA,SAAS,kCACd,MACA,IACA,IACA,WACA,cACA;AACA,QAAM,YAAY,KAAK,cAAc,iBAAiB,aAAa;AAEnE,MAAI;AACJ,MAAI,OAAO;AAEX,QAAM,eAAe,MAAM;AAC3B,QAAM,iBAAiB,OAAO,UAAa,OAAO,SAAY,KAAK;AAEnE,MAAI,iBAAiB,QAAW;AAC9B,WAAO,EAAE,UAAU,KAAK;AAAA,EAC1B;AAEA,QAAM,OAAO;AAAA,IACX;AAAA,IACA,IAAI;AAAA,IACJ,IAAI;AAAA,EACN;AAEA,MAAI,qBAAqB,IAAI,GAAG;AAC9B,UAAM,SAAS;AACf,UAAM,cAAc,CAAC,MAAe,SAAS,OAAO,CAAC,IAAI;AACzD,UAAM,YAAY,YAAY,OAAO,KAAK,EAAE,CAAC;AAC7C,UAAM,UACJ,KAAK,OAAO,SAAY,YAAY,YAAY,OAAO,KAAK,EAAE,CAAC;AAEjE,WACE,KAAK,OAAO,SACR,YACA,GAAG,SAAS,IAAI,SAAS,IAAI,OAAO;AAE1C,WAAO,EAAE,UAAU,KAAK;AAAA,EAC1B;AAEA,MAAI,mBAAmB,IAAI,KAAK,WAAW;AACzC,UAAM,SAAS;AACf,UAAM,mBAAmB,CAAC,MACxB,eAAe,KAAK,aAAa,CAAC,CAAC,OAAO;AAC5C,UAAM,iBAAiB,GAAG,OAAO,KAAK,EAAY,CAAC,GAAG;AAAA,MACpD,KAAK;AAAA,IACP,CAAC;AACD,UAAM,eACJ,KAAK,OAAO,SACR,iBACA,GAAG,OAAO,KAAK,EAAY,CAAC,GAAG,iBAAiB,KAAK,EAAE,CAAC;AAE9D,WACE,KAAK,OAAO,SACR,iBACA,GAAG,cAAc,IAAI,SAAS,IAAI,YAAY;AAEpD,QAAI,KAAK,OAAO,QAAW;AACzB,iBAAW,OAAO,KAAK,IAAK,KAAK,KAAiB,KAAK,EAAa,CAAC;AAAA,IACvE;AAEA,WAAO,EAAE,UAAU,KAAK;AAAA,EAC1B;AAEA,MAAI,cAAc,IAAI,KAAK,WAAW;AACpC,UAAM,SAAS;AAEf,QAAI,KAAK,cAAc,MAAM;AAC3B,aAAO,OAAO,KAAK,IAAI,KAAK,cAAc,OAAO,KAAK,KAAK,MAAS;AAEpE,UAAI,KAAK,cAAc,MAAM;AAC3B,mBAAW,iBAAiB,KAAK,IAAI,KAAK,EAAE;AAAA,MAC9C;AAAA,IACF;AAAA,EACF;AAEA,SAAO,EAAE,UAAU,KAAK;AAC1B;",
+  "sourcesContent": ["import type { IntlShape } from 'react-intl';\n\nimport { formatResolution } from '../../../../../core/components/tooltip/utils/resolution-formatter.js';\nimport type {\n  FormatterWithPrecision,\n  StringFormatter,\n  TimeFrameFormatter,\n} from '../../../../../core/types/formatter.js';\nimport type { XYAccessorDataTypes } from '../../../../types/xy-chart.js';\nimport {\n  isCategoricalTooltip,\n  isNumericalToolTip,\n  isTimeTooltip,\n} from '../../../../utils/type-guards.js';\nimport { getCachedSeparator } from '../../utils/get-cached-separator.js';\n\n/**\n * Pure function that formats tooltip body content.\n * This can be called from non-React contexts (like utility functions).\n *\n * `formatter` is discriminated by the value type: a `StringFormatter` for\n * categorical axes, a `FormatterWithPrecision` for numerical axes, and a\n * `TimeFrameFormatter` for time axes.\n */\nexport function getHoveredPointTooltipBodyContent(\n  intl: IntlShape,\n  v0?: XYAccessorDataTypes | undefined,\n  v1?: XYAccessorDataTypes | undefined,\n  formatter?: FormatterWithPrecision | TimeFrameFormatter | StringFormatter,\n  toPercentage?: (value: number) => number,\n) {\n  const separator = getCachedSeparator(intl);\n\n  let duration: string | undefined;\n  let text = '';\n\n  const primaryValue = v0 ?? v1;\n  const secondaryValue = v0 !== undefined && v1 !== undefined ? v1 : undefined;\n\n  if (primaryValue === undefined) {\n    return { duration, text };\n  }\n\n  const args = {\n    formatter,\n    v0: primaryValue,\n    v1: secondaryValue,\n  };\n\n  if (isCategoricalTooltip(args)) {\n    const format = formatter as StringFormatter | undefined;\n    const formatValue = (v: string) => (format ? format(v) : v);\n    const startText = formatValue(String(args.v0));\n    const endText =\n      args.v1 === undefined ? startText : formatValue(String(args.v1));\n\n    text =\n      args.v1 === undefined\n        ? startText\n        : `${startText} ${separator} ${endText}`;\n\n    return { duration, text };\n  }\n\n  if (isNumericalToolTip(args) && formatter) {\n    const format = formatter as FormatterWithPrecision;\n    const percentageSuffix = (v: number) =>\n      toPercentage ? ` (${toPercentage(v)}%)` : '';\n    const formattedStart = `${format(args.v0 as number)}${percentageSuffix(\n      args.v0,\n    )}`;\n    const formattedEnd =\n      args.v1 === undefined\n        ? formattedStart\n        : `${format(args.v1 as number)}${percentageSuffix(args.v1)}`;\n\n    text =\n      args.v1 === undefined\n        ? formattedStart\n        : `${formattedStart} ${separator} ${formattedEnd}`;\n\n    if (args.v1 !== undefined) {\n      duration = format(Math.abs((args.v1 as number) - (args.v0 as number)));\n    }\n\n    return { duration, text };\n  }\n\n  if (isTimeTooltip(args) && formatter) {\n    const format = formatter as TimeFrameFormatter;\n\n    if (args.v0 instanceof Date) {\n      text = format(args.v0, args.v1 instanceof Date ? args.v1 : undefined);\n\n      if (args.v1 instanceof Date) {\n        duration = formatResolution(args.v0, args.v1);\n      }\n    }\n  }\n\n  return { duration, text };\n}\n"],
+  "mappings": "AAEA,SAAS,wBAAwB;AAOjC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,0BAA0B;AAU5B,SAAS,kCACd,MACA,IACA,IACA,WACA,cACA;AACA,QAAM,YAAY,mBAAmB,IAAI;AAEzC,MAAI;AACJ,MAAI,OAAO;AAEX,QAAM,eAAe,MAAM;AAC3B,QAAM,iBAAiB,OAAO,UAAa,OAAO,SAAY,KAAK;AAEnE,MAAI,iBAAiB,QAAW;AAC9B,WAAO,EAAE,UAAU,KAAK;AAAA,EAC1B;AAEA,QAAM,OAAO;AAAA,IACX;AAAA,IACA,IAAI;AAAA,IACJ,IAAI;AAAA,EACN;AAEA,MAAI,qBAAqB,IAAI,GAAG;AAC9B,UAAM,SAAS;AACf,UAAM,cAAc,CAAC,MAAe,SAAS,OAAO,CAAC,IAAI;AACzD,UAAM,YAAY,YAAY,OAAO,KAAK,EAAE,CAAC;AAC7C,UAAM,UACJ,KAAK,OAAO,SAAY,YAAY,YAAY,OAAO,KAAK,EAAE,CAAC;AAEjE,WACE,KAAK,OAAO,SACR,YACA,GAAG,SAAS,IAAI,SAAS,IAAI,OAAO;AAE1C,WAAO,EAAE,UAAU,KAAK;AAAA,EAC1B;AAEA,MAAI,mBAAmB,IAAI,KAAK,WAAW;AACzC,UAAM,SAAS;AACf,UAAM,mBAAmB,CAAC,MACxB,eAAe,KAAK,aAAa,CAAC,CAAC,OAAO;AAC5C,UAAM,iBAAiB,GAAG,OAAO,KAAK,EAAY,CAAC,GAAG;AAAA,MACpD,KAAK;AAAA,IACP,CAAC;AACD,UAAM,eACJ,KAAK,OAAO,SACR,iBACA,GAAG,OAAO,KAAK,EAAY,CAAC,GAAG,iBAAiB,KAAK,EAAE,CAAC;AAE9D,WACE,KAAK,OAAO,SACR,iBACA,GAAG,cAAc,IAAI,SAAS,IAAI,YAAY;AAEpD,QAAI,KAAK,OAAO,QAAW;AACzB,iBAAW,OAAO,KAAK,IAAK,KAAK,KAAiB,KAAK,EAAa,CAAC;AAAA,IACvE;AAEA,WAAO,EAAE,UAAU,KAAK;AAAA,EAC1B;AAEA,MAAI,cAAc,IAAI,KAAK,WAAW;AACpC,UAAM,SAAS;AAEf,QAAI,KAAK,cAAc,MAAM;AAC3B,aAAO,OAAO,KAAK,IAAI,KAAK,cAAc,OAAO,KAAK,KAAK,MAAS;AAEpE,UAAI,KAAK,cAAc,MAAM;AAC3B,mBAAW,iBAAiB,KAAK,IAAI,KAAK,EAAE;AAAA,MAC9C;AAAA,IACF;AAAA,EACF;AAEA,SAAO,EAAE,UAAU,KAAK;AAC1B;",
   "names": []
 }

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

@@ -39,9 +39,14 @@ const buildHoveredPointTooltipHeaderProps = ({
     const metadataActions = enrichedDatapoint.metadata.actions;
     actions = metadataActions ? () => metadataActions(enrichedDatapoint.datapoint) : void 0;
   } else if (isBarTooltipContext(enrichedDatapoint)) {
-    const { color, name: barName } = metadata;
+    const {
+      color,
+      name: barName,
+      nameSegments: barNameSegments
+    } = metadata;
+    const datapointMetadata = safeGet(datapointMetadataMap, datapoint);
     name = barName ?? "";
-    colorToDisplay = color?.Default ?? "";
+    colorToDisplay = datapointMetadata.colorOverride ?? color?.Default ?? "";
     const metadataActions = enrichedDatapoint.metadata.actions;
     actions = metadataActions ? () => {
       const actionItem = buildBarSeriesActionItem({
@@ -53,6 +58,13 @@ const buildHoveredPointTooltipHeaderProps = ({
       });
       return metadataActions(actionItem);
     } : void 0;
+    return {
+      color: colorToDisplay,
+      name,
+      nameSegments: barNameSegments,
+      value: valueToDisplay,
+      actions
+    };
   }
   return {
     color: colorToDisplay,

package/esm/charts/xy-chart/components/tooltip/HoveredPointTooltip/hoveredPointTooltipHeaderUtils.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/xy-chart/components/tooltip/HoveredPointTooltip/hoveredPointTooltipHeaderUtils.ts"],
-  "sourcesContent": ["import type { SeriesActionsTemplate } from '../../../../core/types/series-actions-template.js';\nimport { getFormatter } from '../../../../core/utils/get-formatter.js';\nimport { safeGet } from '../../../../core/utils/safe-get.js';\nimport type { SeriesIdToColorScale } from '../../../context/XYChartColorScales.context.js';\nimport type {\n  BarMetadata,\n  BarSeriesToMetadata,\n  BarSeriesWithDatapoints,\n  RectDatapointInternal,\n  MapDatapoints,\n} from '../../../types/xy-chart-internals.js';\nimport type { BarDatapoint } from '../../../types/xy-chart.js';\nimport { buildBarSeriesActionItem } from '../../../utils/build-series-action-item.js';\nimport { getColorFromScaleAndData } from '../../../utils/coloring/get-color-from-scale-and-data.js';\nimport {\n  type HoveredDatapoint,\n  type HoveredSeries,\n  isBarTooltipContext,\n  isRectTooltipContext,\n  type HoveredSeriesToMetadata,\n  type TooltipContextHoveredPoints,\n} from '../../../utils/type-guards.js';\n\nexport interface BuildHoveredPointTooltipHeaderPropsArgs<\n  T extends HoveredSeries,\n  K extends HoveredDatapoint<T>,\n> {\n  datapoint: K;\n  series: T;\n  seriesToMetadata: HoveredSeriesToMetadata<T>;\n  seriesWithDatapoints: BarSeriesWithDatapoints[];\n  datapointMetadataMap: MapDatapoints;\n  colorScaleMap: SeriesIdToColorScale;\n}\n\nexport const buildHoveredPointTooltipHeaderProps = <\n  T extends HoveredSeries,\n  K extends T extends BarSeriesWithDatapoints\n    ? BarDatapoint\n    : RectDatapointInternal,\n>({\n  datapoint,\n  series,\n  seriesToMetadata,\n  seriesWithDatapoints,\n  datapointMetadataMap,\n  colorScaleMap,\n}: BuildHoveredPointTooltipHeaderPropsArgs<T, K>) => {\n  let name = '';\n  let valueToDisplay = '';\n  let colorToDisplay = '';\n  let actions: (() => SeriesActionsTemplate) | undefined;\n\n  const metadata = safeGet(seriesToMetadata, series);\n\n  const enrichedDatapoint: TooltipContextHoveredPoints = {\n    series,\n    datapoint,\n    metadata: metadata,\n  };\n\n  if (isRectTooltipContext(enrichedDatapoint)) {\n    const colorScale = safeGet(colorScaleMap, series.id);\n    const datapointMetadata = safeGet(datapointMetadataMap, datapoint);\n    const rawValue = enrichedDatapoint.datapoint.value;\n    const { valueAccessorLabel, valueAccessor, valueFormatter, valueUnit } =\n      enrichedDatapoint.metadata;\n\n    name = valueAccessorLabel ?? valueAccessor ?? '';\n\n    valueToDisplay =\n      typeof rawValue === 'number'\n        ? getFormatter(valueFormatter)(rawValue, valueUnit)\n        : rawValue?.toString() ?? '';\n\n    colorToDisplay =\n      rawValue !== undefined\n        ? getColorFromScaleAndData(\n            colorScale,\n            enrichedDatapoint.datapoint.value,\n            datapointMetadata.colorOverride,\n          ) ?? ''\n        : '';\n\n    const metadataActions = enrichedDatapoint.metadata.actions;\n\n    actions = metadataActions\n      ? () => metadataActions(enrichedDatapoint.datapoint)\n      : undefined;\n  } else if (isBarTooltipContext(enrichedDatapoint)) {\n    const { color, name: barName } = metadata as BarMetadata;\n\n    name = barName ?? '';\n    colorToDisplay = color?.Default ?? '';\n\n    const metadataActions = enrichedDatapoint.metadata.actions;\n    actions = metadataActions\n      ? () => {\n          const actionItem = buildBarSeriesActionItem({\n            datapoint: enrichedDatapoint.datapoint,\n            allSeries: seriesWithDatapoints,\n            seriesToMetadata:\n              seriesToMetadata as unknown as BarSeriesToMetadata,\n            datapointMetadataMap,\n            currentSeries: enrichedDatapoint.series,\n          });\n          return metadataActions(actionItem);\n        }\n      : undefined;\n  }\n\n  return {\n    color: colorToDisplay,\n    name,\n    value: valueToDisplay,\n    actions,\n  };\n};\n"],
-  "mappings": "AACA,SAAS,oBAAoB;AAC7B,SAAS,eAAe;AAUxB,SAAS,gCAAgC;AACzC,SAAS,gCAAgC;AACzC;AAAA,EAGE;AAAA,EACA;AAAA,OAGK;AAcA,MAAM,sCAAsC,CAKjD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAqD;AACnD,MAAI,OAAO;AACX,MAAI,iBAAiB;AACrB,MAAI,iBAAiB;AACrB,MAAI;AAEJ,QAAM,WAAW,QAAQ,kBAAkB,MAAM;AAEjD,QAAM,oBAAiD;AAAA,IACrD;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,MAAI,qBAAqB,iBAAiB,GAAG;AAC3C,UAAM,aAAa,QAAQ,eAAe,OAAO,EAAE;AACnD,UAAM,oBAAoB,QAAQ,sBAAsB,SAAS;AACjE,UAAM,WAAW,kBAAkB,UAAU;AAC7C,UAAM,EAAE,oBAAoB,eAAe,gBAAgB,UAAU,IACnE,kBAAkB;AAEpB,WAAO,sBAAsB,iBAAiB;AAE9C,qBACE,OAAO,aAAa,WAChB,aAAa,cAAc,EAAE,UAAU,SAAS,IAChD,UAAU,SAAS,KAAK;AAE9B,qBACE,aAAa,SACT;AAAA,MACE;AAAA,MACA,kBAAkB,UAAU;AAAA,MAC5B,kBAAkB;AAAA,IACpB,KAAK,KACL;AAEN,UAAM,kBAAkB,kBAAkB,SAAS;AAEnD,cAAU,kBACN,MAAM,gBAAgB,kBAAkB,SAAS,IACjD;AAAA,EACN,WAAW,oBAAoB,iBAAiB,GAAG;AACjD,UAAM,EAAE,OAAO,MAAM,QAAQ,IAAI;AAEjC,WAAO,WAAW;AAClB,qBAAiB,OAAO,WAAW;AAEnC,UAAM,kBAAkB,kBAAkB,SAAS;AACnD,cAAU,kBACN,MAAM;AACJ,YAAM,aAAa,yBAAyB;AAAA,QAC1C,WAAW,kBAAkB;AAAA,QAC7B,WAAW;AAAA,QACX;AAAA,QAEA;AAAA,QACA,eAAe,kBAAkB;AAAA,MACnC,CAAC;AACD,aAAO,gBAAgB,UAAU;AAAA,IACnC,IACA;AAAA,EACN;AAEA,SAAO;AAAA,IACL,OAAO;AAAA,IACP;AAAA,IACA,OAAO;AAAA,IACP;AAAA,EACF;AACF;",
+  "sourcesContent": ["import type { SeriesActionsTemplate } from '../../../../core/types/series-actions-template.js';\nimport { getFormatter } from '../../../../core/utils/get-formatter.js';\nimport { safeGet } from '../../../../core/utils/safe-get.js';\nimport type { SeriesIdToColorScale } from '../../../context/XYChartColorScales.context.js';\nimport type {\n  BarMetadata,\n  BarSeriesToMetadata,\n  BarSeriesWithDatapoints,\n  RectDatapointInternal,\n  MapDatapoints,\n} from '../../../types/xy-chart-internals.js';\nimport type { BarDatapoint } from '../../../types/xy-chart.js';\nimport { buildBarSeriesActionItem } from '../../../utils/build-series-action-item.js';\nimport { getColorFromScaleAndData } from '../../../utils/coloring/get-color-from-scale-and-data.js';\nimport {\n  type HoveredDatapoint,\n  type HoveredSeries,\n  isBarTooltipContext,\n  isRectTooltipContext,\n  type HoveredSeriesToMetadata,\n  type TooltipContextHoveredPoints,\n} from '../../../utils/type-guards.js';\n\nexport interface BuildHoveredPointTooltipHeaderPropsArgs<\n  T extends HoveredSeries,\n  K extends HoveredDatapoint<T>,\n> {\n  datapoint: K;\n  series: T;\n  seriesToMetadata: HoveredSeriesToMetadata<T>;\n  seriesWithDatapoints: BarSeriesWithDatapoints[];\n  datapointMetadataMap: MapDatapoints;\n  colorScaleMap: SeriesIdToColorScale;\n}\n\nexport const buildHoveredPointTooltipHeaderProps = <\n  T extends HoveredSeries,\n  K extends T extends BarSeriesWithDatapoints\n    ? BarDatapoint\n    : RectDatapointInternal,\n>({\n  datapoint,\n  series,\n  seriesToMetadata,\n  seriesWithDatapoints,\n  datapointMetadataMap,\n  colorScaleMap,\n}: BuildHoveredPointTooltipHeaderPropsArgs<T, K>) => {\n  let name = '';\n  let valueToDisplay = '';\n  let colorToDisplay = '';\n  let actions: (() => SeriesActionsTemplate) | undefined;\n\n  const metadata = safeGet(seriesToMetadata, series);\n\n  const enrichedDatapoint: TooltipContextHoveredPoints = {\n    series,\n    datapoint,\n    metadata: metadata,\n  };\n\n  if (isRectTooltipContext(enrichedDatapoint)) {\n    const colorScale = safeGet(colorScaleMap, series.id);\n    const datapointMetadata = safeGet(datapointMetadataMap, datapoint);\n    const rawValue = enrichedDatapoint.datapoint.value;\n    const { valueAccessorLabel, valueAccessor, valueFormatter, valueUnit } =\n      enrichedDatapoint.metadata;\n\n    name = valueAccessorLabel ?? valueAccessor ?? '';\n\n    valueToDisplay =\n      typeof rawValue === 'number'\n        ? getFormatter(valueFormatter)(rawValue, valueUnit)\n        : rawValue?.toString() ?? '';\n\n    colorToDisplay =\n      rawValue !== undefined\n        ? getColorFromScaleAndData(\n            colorScale,\n            enrichedDatapoint.datapoint.value,\n            datapointMetadata.colorOverride,\n          ) ?? ''\n        : '';\n\n    const metadataActions = enrichedDatapoint.metadata.actions;\n\n    actions = metadataActions\n      ? () => metadataActions(enrichedDatapoint.datapoint)\n      : undefined;\n  } else if (isBarTooltipContext(enrichedDatapoint)) {\n    const {\n      color,\n      name: barName,\n      nameSegments: barNameSegments,\n    } = metadata as BarMetadata;\n    const datapointMetadata = safeGet(datapointMetadataMap, datapoint);\n\n    name = barName ?? '';\n    colorToDisplay = datapointMetadata.colorOverride ?? color?.Default ?? '';\n\n    const metadataActions = enrichedDatapoint.metadata.actions;\n    actions = metadataActions\n      ? () => {\n          const actionItem = buildBarSeriesActionItem({\n            datapoint: enrichedDatapoint.datapoint,\n            allSeries: seriesWithDatapoints,\n            seriesToMetadata:\n              seriesToMetadata as unknown as BarSeriesToMetadata,\n            datapointMetadataMap,\n            currentSeries: enrichedDatapoint.series,\n          });\n          return metadataActions(actionItem);\n        }\n      : undefined;\n\n    return {\n      color: colorToDisplay,\n      name,\n      nameSegments: barNameSegments,\n      value: valueToDisplay,\n      actions,\n    };\n  }\n\n  return {\n    color: colorToDisplay,\n    name,\n    value: valueToDisplay,\n    actions,\n  };\n};\n"],
+  "mappings": "AACA,SAAS,oBAAoB;AAC7B,SAAS,eAAe;AAUxB,SAAS,gCAAgC;AACzC,SAAS,gCAAgC;AACzC;AAAA,EAGE;AAAA,EACA;AAAA,OAGK;AAcA,MAAM,sCAAsC,CAKjD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAqD;AACnD,MAAI,OAAO;AACX,MAAI,iBAAiB;AACrB,MAAI,iBAAiB;AACrB,MAAI;AAEJ,QAAM,WAAW,QAAQ,kBAAkB,MAAM;AAEjD,QAAM,oBAAiD;AAAA,IACrD;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,MAAI,qBAAqB,iBAAiB,GAAG;AAC3C,UAAM,aAAa,QAAQ,eAAe,OAAO,EAAE;AACnD,UAAM,oBAAoB,QAAQ,sBAAsB,SAAS;AACjE,UAAM,WAAW,kBAAkB,UAAU;AAC7C,UAAM,EAAE,oBAAoB,eAAe,gBAAgB,UAAU,IACnE,kBAAkB;AAEpB,WAAO,sBAAsB,iBAAiB;AAE9C,qBACE,OAAO,aAAa,WAChB,aAAa,cAAc,EAAE,UAAU,SAAS,IAChD,UAAU,SAAS,KAAK;AAE9B,qBACE,aAAa,SACT;AAAA,MACE;AAAA,MACA,kBAAkB,UAAU;AAAA,MAC5B,kBAAkB;AAAA,IACpB,KAAK,KACL;AAEN,UAAM,kBAAkB,kBAAkB,SAAS;AAEnD,cAAU,kBACN,MAAM,gBAAgB,kBAAkB,SAAS,IACjD;AAAA,EACN,WAAW,oBAAoB,iBAAiB,GAAG;AACjD,UAAM;AAAA,MACJ;AAAA,MACA,MAAM;AAAA,MACN,cAAc;AAAA,IAChB,IAAI;AACJ,UAAM,oBAAoB,QAAQ,sBAAsB,SAAS;AAEjE,WAAO,WAAW;AAClB,qBAAiB,kBAAkB,iBAAiB,OAAO,WAAW;AAEtE,UAAM,kBAAkB,kBAAkB,SAAS;AACnD,cAAU,kBACN,MAAM;AACJ,YAAM,aAAa,yBAAyB;AAAA,QAC1C,WAAW,kBAAkB;AAAA,QAC7B,WAAW;AAAA,QACX;AAAA,QAEA;AAAA,QACA,eAAe,kBAAkB;AAAA,MACnC,CAAC;AACD,aAAO,gBAAgB,UAAU;AAAA,IACnC,IACA;AAEJ,WAAO;AAAA,MACL,OAAO;AAAA,MACP;AAAA,MACA,cAAc;AAAA,MACd,OAAO;AAAA,MACP;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AAAA,IACL,OAAO;AAAA,IACP;AAAA,IACA,OAAO;AAAA,IACP;AAAA,EACF;AACF;",
   "names": []
 }

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

@@ -1,17 +1,38 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useRef } from "react";
 import { useIntl } from "react-intl";
 import {
   buildSharedTooltipHeader,
   buildSharedTooltipRow
 } from "./sharedXYChartTooltipUtils.js";
 import { OverlayTooltip } from "../../../../core/components/overlay-tooltip/OverlayTooltip.js";
+import { safeGet } from "../../../../core/utils/safe-get.js";
 import { useAxesFormatter } from "../../../hooks/useAxesFormatter.js";
 import { useBarData } from "../../../hooks/useBarData.js";
 import { useFormatCategory } from "../../../hooks/useFormatCategory.js";
 import { useXYChartColorScales } from "../../../hooks/useXYChartColorScales.js";
 import { useXYChartData } from "../../../hooks/useXYChartData.js";
+import { useXYChartTooltip } from "../../../hooks/useXYChartTooltip.js";
 import { useXYChartTruncationMode } from "../../../hooks/useXYChartTruncationMode.js";
+function LazySharedTooltipRow({
+  raw,
+  ctx,
+  seriesDisplayMode
+}) {
+  const row = buildSharedTooltipRow(raw.result, ctx);
+  const value = row.yAxisDuration ? `${row.yAxisValue} (${row.yAxisDuration})` : row.yAxisValue;
+  const isMultiLine = row.nameSegments !== void 0 && seriesDisplayMode === "multi-line";
+  const displayName = isMultiLine ? row.nameSegments : row.name;
+  return /* @__PURE__ */ jsx(
+    OverlayTooltip.SeriesItem,
+    {
+      name: displayName,
+      multiLine: isMultiLine,
+      value,
+      color: row.color,
+      actions: row.actions
+    }
+  );
+}
 function SharedXYChartTooltip({
   preferred,
   datapoints
@@ -23,6 +44,7 @@ function SharedXYChartTooltip({
   const { truncationMode } = useXYChartTruncationMode();
   const formatCategory = useFormatCategory();
   const { filteredSeriesWithDatapoints } = useBarData();
+  const { seriesDisplayMode } = useXYChartTooltip();
   const ctx = {
     seriesToMetadata,
     axisIdToFormatter,
@@ -37,25 +59,16 @@ function SharedXYChartTooltip({
     preferred,
     ctx
   );
-  const ctxRef = useRef(ctx);
-  ctxRef.current = ctx;
-  const prevDatapointsRef = useRef([]);
-  const seriesItemsRef = useRef([]);
-  if (datapoints.length !== prevDatapointsRef.current.length || datapoints.some((d, i) => d !== prevDatapointsRef.current[i])) {
-    prevDatapointsRef.current = datapoints;
-    seriesItemsRef.current = datapoints.map((result) => {
-      const row = buildSharedTooltipRow(
-        result,
-        ctxRef.current
-      );
-      return {
-        name: row.name,
-        value: row.yAxisDuration ? `${row.yAxisValue} (${row.yAxisDuration})` : row.yAxisValue,
-        color: row.color,
-        actions: row.actions
-      };
-    });
-  }
+  const rows = datapoints.map((result) => {
+    const metadata = safeGet(seriesToMetadata, result.series);
+    const row = buildSharedTooltipRow(result, ctx);
+    const isMultiLine = row.nameSegments !== void 0 && seriesDisplayMode === "multi-line";
+    return {
+      name: isMultiLine ? row.nameSegments : metadata.name,
+      nameSegments: row.nameSegments,
+      result
+    };
+  });
   return /* @__PURE__ */ jsxs(OverlayTooltip, { truncation: truncationMode, children: [
     /* @__PURE__ */ jsx(
       OverlayTooltip.Header,
@@ -68,10 +81,17 @@ function SharedXYChartTooltip({
     /* @__PURE__ */ jsx(
       OverlayTooltip.Series,
       {
-        data: seriesItemsRef.current,
+        data: rows,
         variant: "shared",
         activeItem: -1,
-        seriesItemTemplate: (item) => /* @__PURE__ */ jsx(OverlayTooltip.SeriesItem, { ...item })
+        seriesItemTemplate: (item) => /* @__PURE__ */ jsx(
+          LazySharedTooltipRow,
+          {
+            raw: item,
+            ctx,
+            seriesDisplayMode
+          }
+        )
       }
     )
   ] });