@dynatrace/strato-components 3.4.0 → 3.5.0

package/esm/charts/xy-chart/components/selection/get-header-props.js

@@ -0,0 +1,55 @@
+import { getDurationContent } from "../../../core/components/overlay-tooltip/components/header/utils/get-duration-content.js";
+import { scaleBandInvert } from "../../../core/utils/scale.js";
+import {
+  isAnyNumericalScale,
+  isCategoricalScale,
+  isTimeScale
+} from "../../types/guards.js";
+import { getTimeframe } from "../overlay/utils/get-timeframe.js";
+const getHeaderProps = ({
+  axisConfig,
+  scale,
+  formatter,
+  startPixels,
+  endPixels,
+  suffix
+}) => {
+  const config = {
+    axisType: axisConfig.type,
+    axisScale: scale
+  };
+  const timeframe = getTimeframe(
+    startPixels,
+    endPixels,
+    !axisConfig?.reversed,
+    scale
+  );
+  if (isAnyNumericalScale(config) && !isTimeScale(config)) {
+    const from = config.axisScale.invert(startPixels);
+    const to = config.axisScale.invert(endPixels);
+    return {
+      [`header${suffix}`]: [formatter(from), formatter(to)],
+      [`duration${suffix}`]: formatter(
+        getDurationContent(true, [from, to])
+      )
+    };
+  }
+  if (isTimeScale(config)) {
+    return {
+      [`header${suffix}`]: [timeframe.start, timeframe.end],
+      [`showRangeDuration${suffix}`]: true
+    };
+  }
+  if (isCategoricalScale(config)) {
+    return {
+      [`header${suffix}`]: [
+        scaleBandInvert(config.axisScale)(startPixels),
+        scaleBandInvert(config.axisScale)(endPixels)
+      ]
+    };
+  }
+};
+export {
+  getHeaderProps
+};
+//# sourceMappingURL=get-header-props.js.map

package/esm/charts/xy-chart/components/selection/get-header-props.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/charts/xy-chart/components/selection/get-header-props.tsx"],
+  "sourcesContent": ["import { getDurationContent } from '../../../core/components/overlay-tooltip/components/header/utils/get-duration-content.js';\nimport type {\n  DateTimeFormatter,\n  FormatterWithPrecision,\n} from '../../../core/types/formatter.js';\nimport { scaleBandInvert } from '../../../core/utils/scale.js';\nimport {\n  isAnyNumericalScale,\n  isCategoricalScale,\n  isTimeScale,\n} from '../../types/guards.js';\nimport {\n  type AnyXYChartScale,\n  type XYChartAxisInternal,\n} from '../../types/xy-chart-internals.js';\nimport { getTimeframe } from '../overlay/utils/get-timeframe.js';\n\nexport const getHeaderProps = ({\n  axisConfig,\n  scale,\n  formatter,\n  startPixels,\n  endPixels,\n  suffix,\n}: {\n  axisConfig: XYChartAxisInternal;\n  scale: AnyXYChartScale;\n  formatter: FormatterWithPrecision | DateTimeFormatter;\n  startPixels: number;\n  endPixels: number;\n  suffix: '1' | '2';\n}) => {\n  const config = {\n    axisType: axisConfig.type,\n    axisScale: scale,\n  };\n\n  const timeframe = getTimeframe(\n    startPixels,\n    endPixels,\n    !axisConfig?.reversed,\n    scale,\n  );\n  if (isAnyNumericalScale(config) && !isTimeScale(config)) {\n    const from = config.axisScale.invert(startPixels) as number;\n    const to = config.axisScale.invert(endPixels) as number;\n    return {\n      [`header${suffix}`]: [formatter(from), formatter(to)],\n      [`duration${suffix}`]: formatter(\n        getDurationContent(true, [from, to]) as number,\n      ),\n    };\n  }\n  if (isTimeScale(config)) {\n    return {\n      [`header${suffix}`]: [timeframe.start, timeframe.end],\n      [`showRangeDuration${suffix}`]: true,\n    };\n  }\n  if (isCategoricalScale(config)) {\n    return {\n      [`header${suffix}`]: [\n        scaleBandInvert(config.axisScale)(startPixels),\n        scaleBandInvert(config.axisScale)(endPixels),\n      ],\n    };\n  }\n};\n"],
+  "mappings": "AAAA,SAAS,0BAA0B;AAKnC,SAAS,uBAAuB;AAChC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAKP,SAAS,oBAAoB;AAEtB,MAAM,iBAAiB,CAAC;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAOM;AACJ,QAAM,SAAS;AAAA,IACb,UAAU,WAAW;AAAA,IACrB,WAAW;AAAA,EACb;AAEA,QAAM,YAAY;AAAA,IAChB;AAAA,IACA;AAAA,IACA,CAAC,YAAY;AAAA,IACb;AAAA,EACF;AACA,MAAI,oBAAoB,MAAM,KAAK,CAAC,YAAY,MAAM,GAAG;AACvD,UAAM,OAAO,OAAO,UAAU,OAAO,WAAW;AAChD,UAAM,KAAK,OAAO,UAAU,OAAO,SAAS;AAC5C,WAAO;AAAA,MACL,CAAC,SAAS,MAAM,EAAE,GAAG,CAAC,UAAU,IAAI,GAAG,UAAU,EAAE,CAAC;AAAA,MACpD,CAAC,WAAW,MAAM,EAAE,GAAG;AAAA,QACrB,mBAAmB,MAAM,CAAC,MAAM,EAAE,CAAC;AAAA,MACrC;AAAA,IACF;AAAA,EACF;AACA,MAAI,YAAY,MAAM,GAAG;AACvB,WAAO;AAAA,MACL,CAAC,SAAS,MAAM,EAAE,GAAG,CAAC,UAAU,OAAO,UAAU,GAAG;AAAA,MACpD,CAAC,oBAAoB,MAAM,EAAE,GAAG;AAAA,IAClC;AAAA,EACF;AACA,MAAI,mBAAmB,MAAM,GAAG;AAC9B,WAAO;AAAA,MACL,CAAC,SAAS,MAAM,EAAE,GAAG;AAAA,QACnB,gBAAgB,OAAO,SAAS,EAAE,WAAW;AAAA,QAC7C,gBAAgB,OAAO,SAAS,EAAE,SAAS;AAAA,MAC7C;AAAA,IACF;AAAA,EACF;AACF;",
+  "names": []
+}

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

@@ -1,3 +1,3 @@
-._1mfu0sw0-3-4-0 {
+._1mfu0sw0-3-5-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-4-0 _13lzg4k0-3-4-0";
+var thresholdPlot = "_1mfu0sw0-3-5-0 _13lzg4k0-3-5-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-4-0 _13lzg4k0-3-4-0';"],
+  "sourcesContent": ["import '../../../core/components/chart-grid/ChartGrid.css';\nimport './XYChartThresholdIndicators.css';\nexport var thresholdPlot = '_1mfu0sw0-3-5-0 _13lzg4k0-3-5-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,gBAAgB;",
   "names": []
 }

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

@@ -47,7 +47,7 @@ function ClosestPointTooltip({
       OverlayTooltip.Header,
       {
         header1: xAxisValue,
-        duration: xAxisDuration,
+        duration1: xAxisDuration,
         label
       }
     ),

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        duration={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,UAAU;AAAA,QACV;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 { 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;",
   "names": []
 }

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

@@ -5,6 +5,7 @@ import { buildHoveredPointTooltipHeaderProps } from "./hoveredPointTooltipHeader
 import { OverlayTooltip } from "../../../../core/components/overlay-tooltip/OverlayTooltip.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 { useXYChartTruncationMode } from "../../../hooks/useXYChartTruncationMode.js";
@@ -18,6 +19,7 @@ function HoveredPointTooltip({
   const colorScaleMap = useXYChartColorScales();
   const { truncationMode } = useXYChartTruncationMode();
   const axisIdToFormatter = useAxesFormatter();
+  const formatCategory = useFormatCategory();
   const intl = useIntl();
   const { name, value, color, actions } = buildHoveredPointTooltipHeaderProps({
     datapoint,
@@ -34,6 +36,7 @@ function HoveredPointTooltip({
     axisIdToFormatter,
     axisIdToScaleDomain,
     datapointMetadataMap,
+    formatCategory,
     intl
   });
   const isRect = series.type === "rect";
@@ -51,7 +54,7 @@ function HoveredPointTooltip({
       OverlayTooltip.Header,
       {
         header1: xAxisValue,
-        duration: xAxisDuration,
+        duration1: xAxisDuration,
         label
       }
     ),

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 { 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 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      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        duration={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": "AAiEI,SACE,KADF;AAjEJ,SAAS,eAAe;AAExB,SAAS,yCAAyC;AAClD,SAAS,2CAA2C;AACpD,SAAS,sBAAsB;AAE/B,SAAS,wBAAwB;AACjC,SAAS,kBAAkB;AAC3B,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,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,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,UAAU;AAAA,QACV;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 { 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;",
   "names": []
 }

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

@@ -20,16 +20,21 @@ function getHoveredPointTooltipBodyContent(intl, v0, v1, formatter, toPercentage
     v1: secondaryValue
   };
   if (isCategoricalTooltip(args)) {
-    const startText = String(args.v0);
-    const endText = args.v1 !== void 0 ? String(args.v1) : startText;
-    text = args.v1 !== void 0 ? `${startText} ${separator} ${endText}` : startText;
+    const format = formatter;
+    const formatValue = (v) => format ? format(v) : v;
+    const startText = formatValue(String(args.v0));
+    const endText = args.v1 === void 0 ? startText : formatValue(String(args.v1));
+    text = args.v1 === void 0 ? startText : `${startText} ${separator} ${endText}`;
     return { duration, text };
   }
   if (isNumericalToolTip(args) && formatter) {
     const format = formatter;
-    const formattedStart = `${format(args.v0)}${toPercentage ? " (" + toPercentage(args.v0) + "%)" : ""}`;
-    const formattedEnd = args.v1 !== void 0 ? `${format(args.v1)}${toPercentage ? " (" + toPercentage(args.v1) + "%)" : ""}` : formattedStart;
-    text = args.v1 !== void 0 ? `${formattedStart} ${separator} ${formattedEnd}` : formattedStart;
+    const percentageSuffix = (v) => toPercentage ? ` (${toPercentage(v)}%)` : "";
+    const formattedStart = `${format(args.v0)}${percentageSuffix(
+      args.v0
+    )}`;
+    const formattedEnd = args.v1 === void 0 ? formattedStart : `${format(args.v1)}${percentageSuffix(args.v1)}`;
+    text = args.v1 === void 0 ? formattedStart : `${formattedStart} ${separator} ${formattedEnd}`;
     return { duration, text };
   }
   if (isTimeTooltip(args) && formatter) {

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  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 header content.\n * This can be called from non-React contexts (like utility functions).\n */\nexport function getHoveredPointTooltipBodyContent(\n  intl: IntlShape,\n  v0?: XYAccessorDataTypes | undefined,\n  v1?: XYAccessorDataTypes | undefined,\n  formatter?: FormatterWithPrecision | TimeFrameFormatter,\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 startText = String(args.v0);\n    const endText = args.v1 !== undefined ? String(args.v1) : startText;\n\n    text =\n      args.v1 !== undefined\n        ? `${startText} ${separator} ${endText}`\n        : startText;\n\n    return { duration, text };\n  }\n\n  if (isNumericalToolTip(args) && formatter) {\n    const format = formatter as FormatterWithPrecision;\n    const formattedStart = `${format(args.v0 as number)}${\n      toPercentage ? ' (' + toPercentage(args.v0) + '%)' : ''\n    }`;\n    const formattedEnd =\n      args.v1 !== undefined\n        ? `${format(args.v1 as number)}${\n            toPercentage ? ' (' + toPercentage(args.v1) + '%)' : ''\n          }`\n        : formattedStart;\n\n    text =\n      args.v1 !== undefined\n        ? `${formattedStart} ${separator} ${formattedEnd}`\n        : formattedStart;\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;AAKjC,SAAS,wBAAwB;AAEjC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAMA,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,YAAY,OAAO,KAAK,EAAE;AAChC,UAAM,UAAU,KAAK,OAAO,SAAY,OAAO,KAAK,EAAE,IAAI;AAE1D,WACE,KAAK,OAAO,SACR,GAAG,SAAS,IAAI,SAAS,IAAI,OAAO,KACpC;AAEN,WAAO,EAAE,UAAU,KAAK;AAAA,EAC1B;AAEA,MAAI,mBAAmB,IAAI,KAAK,WAAW;AACzC,UAAM,SAAS;AACf,UAAM,iBAAiB,GAAG,OAAO,KAAK,EAAY,CAAC,GACjD,eAAe,OAAO,aAAa,KAAK,EAAE,IAAI,OAAO,EACvD;AACA,UAAM,eACJ,KAAK,OAAO,SACR,GAAG,OAAO,KAAK,EAAY,CAAC,GAC1B,eAAe,OAAO,aAAa,KAAK,EAAE,IAAI,OAAO,EACvD,KACA;AAEN,WACE,KAAK,OAAO,SACR,GAAG,cAAc,IAAI,SAAS,IAAI,YAAY,KAC9C;AAEN,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 { 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    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,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/hoveredPointTooltipBodyUtils.js

@@ -1,4 +1,5 @@
 import { safeGet } from "../../../../core/utils/safe-get.js";
+import { isCategorical } from "../../../types/guards.js";
 import { getRelativeAccessor } from "../../../utils/value-representation.js";
 import { getTooltipFormatter } from "../utils/get-tooltip-formatter.js";
 import { getHoveredPointTooltipBodyContent } from "./hooks/getHoveredPointTooltipBodyContent.js";
@@ -9,6 +10,7 @@ const buildHoveredPointTooltipBodyProps = ({
   axisIdToFormatter,
   axisIdToScaleDomain,
   datapointMetadataMap,
+  formatCategory,
   intl
 }) => {
   const { xAxis, yAxis } = safeGet(seriesToMetadata, series);
@@ -26,18 +28,21 @@ const buildHoveredPointTooltipBodyProps = ({
     max: binDomain
   } : safeGet(axisIdToScaleDomain, yAxis.id);
   const { x0, x1, y0, y1 } = datapoint;
+  const buildCategoricalStringFormatter = (axis) => isCategorical(axis.type) ? (value) => formatCategory(axis, value) ?? value : void 0;
+  const xResolvedFormatter = buildCategoricalStringFormatter(xAxis) ?? xFormatter;
+  const yResolvedFormatter = buildCategoricalStringFormatter(yAxis) ?? yFormatter;
   const { text: textX, duration: durationX } = getHoveredPointTooltipBodyContent(
     intl,
     x0,
     x1,
-    xFormatter,
+    xResolvedFormatter,
     getRelativeAccessor(xAxis, yDomain)
   );
   const { text: textY, duration: durationY } = getHoveredPointTooltipBodyContent(
     intl,
     y0,
     y1,
-    yFormatter,
+    yResolvedFormatter,
     getRelativeAccessor(yAxis, xDomain)
   );
   return {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/xy-chart/components/tooltip/HoveredPointTooltip/hoveredPointTooltipBodyUtils.ts"],
-  "sourcesContent": ["import type { IntlShape } from 'react-intl';\n\nimport type { MinMax } from '../../../../core/types/min-max.js';\nimport { safeGet } from '../../../../core/utils/safe-get.js';\nimport type {\n  AxisIdToFormatter,\n  AxisIdToScaleDomain,\n  MapDatapoints,\n} from '../../../types/xy-chart-internals.js';\nimport type {\n  HoveredDatapoint,\n  HoveredSeries,\n  HoveredSeriesToMetadata,\n} from '../../../utils/type-guards.js';\nimport { getRelativeAccessor } from '../../../utils/value-representation.js';\nimport { getTooltipFormatter } from '../utils/get-tooltip-formatter.js';\nimport type { XYChartTooltipBodyProps } from '../XYChartTooltipBody/XYChartTooltipBody.js';\nimport { getHoveredPointTooltipBodyContent } from './hooks/getHoveredPointTooltipBodyContent.js';\n\nexport interface BuildHoveredPointTooltipBodyPropsArgs<\n  T extends HoveredSeries,\n  K extends HoveredDatapoint<T>,\n> {\n  datapoint: K;\n  series: T;\n  seriesToMetadata: HoveredSeriesToMetadata<T>;\n  axisIdToFormatter: AxisIdToFormatter;\n  axisIdToScaleDomain: AxisIdToScaleDomain;\n  datapointMetadataMap: MapDatapoints;\n  intl: IntlShape;\n}\n\nexport const buildHoveredPointTooltipBodyProps = <\n  T extends HoveredSeries,\n  K extends HoveredDatapoint<T>,\n>({\n  datapoint,\n  series,\n  seriesToMetadata,\n  axisIdToFormatter,\n  axisIdToScaleDomain,\n  datapointMetadataMap,\n  intl,\n}: BuildHoveredPointTooltipBodyPropsArgs<T, K>): XYChartTooltipBodyProps => {\n  const { xAxis, yAxis } = safeGet(seriesToMetadata, series);\n\n  const xFormatter = getTooltipFormatter(xAxis, axisIdToFormatter, intl);\n  const yFormatter = getTooltipFormatter(yAxis, axisIdToFormatter, intl);\n  const datapointMetadata = datapointMetadataMap.get(datapoint);\n  const binDomain = datapointMetadata?.binDomain;\n\n  const isRelative = typeof binDomain === 'number' && binDomain;\n\n  const yDomain =\n    isRelative && datapointMetadata?.baseline === 'y'\n      ? {\n          min: binDomain * -1,\n          max: binDomain,\n        }\n      : (safeGet(axisIdToScaleDomain, xAxis.id) as MinMax);\n\n  const xDomain =\n    isRelative && datapointMetadata?.baseline === 'x'\n      ? {\n          min: binDomain * -1,\n          max: binDomain,\n        }\n      : (safeGet(axisIdToScaleDomain, yAxis.id) as MinMax);\n\n  const { x0, x1, y0, y1 } = datapoint;\n  const { text: textX, duration: durationX } =\n    getHoveredPointTooltipBodyContent(\n      intl,\n      x0,\n      x1,\n      xFormatter,\n      getRelativeAccessor(xAxis, yDomain),\n    );\n\n  const { text: textY, duration: durationY } =\n    getHoveredPointTooltipBodyContent(\n      intl,\n      y0,\n      y1,\n      yFormatter,\n      getRelativeAccessor(yAxis, xDomain),\n    );\n\n  return {\n    xAxisLabel: xAxis.label,\n    yAxisLabel: yAxis.label,\n    xAxisValue: textX,\n    yAxisValue: textY,\n    xAxisDuration: durationX,\n    yAxisDuration: durationY,\n  };\n};\n"],
-  "mappings": "AAGA,SAAS,eAAe;AAWxB,SAAS,2BAA2B;AACpC,SAAS,2BAA2B;AAEpC,SAAS,yCAAyC;AAe3C,MAAM,oCAAoC,CAG/C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA4E;AAC1E,QAAM,EAAE,OAAO,MAAM,IAAI,QAAQ,kBAAkB,MAAM;AAEzD,QAAM,aAAa,oBAAoB,OAAO,mBAAmB,IAAI;AACrE,QAAM,aAAa,oBAAoB,OAAO,mBAAmB,IAAI;AACrE,QAAM,oBAAoB,qBAAqB,IAAI,SAAS;AAC5D,QAAM,YAAY,mBAAmB;AAErC,QAAM,aAAa,OAAO,cAAc,YAAY;AAEpD,QAAM,UACJ,cAAc,mBAAmB,aAAa,MAC1C;AAAA,IACE,KAAK,YAAY;AAAA,IACjB,KAAK;AAAA,EACP,IACC,QAAQ,qBAAqB,MAAM,EAAE;AAE5C,QAAM,UACJ,cAAc,mBAAmB,aAAa,MAC1C;AAAA,IACE,KAAK,YAAY;AAAA,IACjB,KAAK;AAAA,EACP,IACC,QAAQ,qBAAqB,MAAM,EAAE;AAE5C,QAAM,EAAE,IAAI,IAAI,IAAI,GAAG,IAAI;AAC3B,QAAM,EAAE,MAAM,OAAO,UAAU,UAAU,IACvC;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,oBAAoB,OAAO,OAAO;AAAA,EACpC;AAEF,QAAM,EAAE,MAAM,OAAO,UAAU,UAAU,IACvC;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,oBAAoB,OAAO,OAAO;AAAA,EACpC;AAEF,SAAO;AAAA,IACL,YAAY,MAAM;AAAA,IAClB,YAAY,MAAM;AAAA,IAClB,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,eAAe;AAAA,IACf,eAAe;AAAA,EACjB;AACF;",
+  "sourcesContent": ["import type { IntlShape } from 'react-intl';\n\nimport type { MinMax } from '../../../../core/types/min-max.js';\nimport { safeGet } from '../../../../core/utils/safe-get.js';\nimport type { FormatCategory } from '../../../hooks/useFormatCategory.js';\nimport { isCategorical } from '../../../types/guards.js';\nimport type {\n  AxisIdToFormatter,\n  AxisIdToScaleDomain,\n  MapDatapoints,\n  XYChartAxisInternal,\n} from '../../../types/xy-chart-internals.js';\nimport type {\n  HoveredDatapoint,\n  HoveredSeries,\n  HoveredSeriesToMetadata,\n} from '../../../utils/type-guards.js';\nimport { getRelativeAccessor } from '../../../utils/value-representation.js';\nimport { getTooltipFormatter } from '../utils/get-tooltip-formatter.js';\nimport type { XYChartTooltipBodyProps } from '../XYChartTooltipBody/XYChartTooltipBody.js';\nimport { getHoveredPointTooltipBodyContent } from './hooks/getHoveredPointTooltipBodyContent.js';\n\nexport interface BuildHoveredPointTooltipBodyPropsArgs<\n  T extends HoveredSeries,\n  K extends HoveredDatapoint<T>,\n> {\n  datapoint: K;\n  series: T;\n  seriesToMetadata: HoveredSeriesToMetadata<T>;\n  axisIdToFormatter: AxisIdToFormatter;\n  axisIdToScaleDomain: AxisIdToScaleDomain;\n  datapointMetadataMap: MapDatapoints;\n  formatCategory: FormatCategory;\n  intl: IntlShape;\n}\n\nexport const buildHoveredPointTooltipBodyProps = <\n  T extends HoveredSeries,\n  K extends HoveredDatapoint<T>,\n>({\n  datapoint,\n  series,\n  seriesToMetadata,\n  axisIdToFormatter,\n  axisIdToScaleDomain,\n  datapointMetadataMap,\n  formatCategory,\n  intl,\n}: BuildHoveredPointTooltipBodyPropsArgs<T, K>): XYChartTooltipBodyProps => {\n  const { xAxis, yAxis } = safeGet(seriesToMetadata, series);\n\n  const xFormatter = getTooltipFormatter(xAxis, axisIdToFormatter, intl);\n  const yFormatter = getTooltipFormatter(yAxis, axisIdToFormatter, intl);\n  const datapointMetadata = datapointMetadataMap.get(datapoint);\n  const binDomain = datapointMetadata?.binDomain;\n\n  const isRelative = typeof binDomain === 'number' && binDomain;\n\n  const yDomain =\n    isRelative && datapointMetadata?.baseline === 'y'\n      ? {\n          min: binDomain * -1,\n          max: binDomain,\n        }\n      : (safeGet(axisIdToScaleDomain, xAxis.id) as MinMax);\n\n  const xDomain =\n    isRelative && datapointMetadata?.baseline === 'x'\n      ? {\n          min: binDomain * -1,\n          max: binDomain,\n        }\n      : (safeGet(axisIdToScaleDomain, yAxis.id) as MinMax);\n\n  const { x0, x1, y0, y1 } = datapoint;\n\n  const buildCategoricalStringFormatter = (axis: XYChartAxisInternal) =>\n    isCategorical(axis.type)\n      ? (value: string) => formatCategory(axis, value) ?? value\n      : undefined;\n\n  const xResolvedFormatter =\n    buildCategoricalStringFormatter(xAxis) ?? xFormatter;\n  const yResolvedFormatter =\n    buildCategoricalStringFormatter(yAxis) ?? yFormatter;\n\n  const { text: textX, duration: durationX } =\n    getHoveredPointTooltipBodyContent(\n      intl,\n      x0,\n      x1,\n      xResolvedFormatter,\n      getRelativeAccessor(xAxis, yDomain),\n    );\n\n  const { text: textY, duration: durationY } =\n    getHoveredPointTooltipBodyContent(\n      intl,\n      y0,\n      y1,\n      yResolvedFormatter,\n      getRelativeAccessor(yAxis, xDomain),\n    );\n\n  return {\n    xAxisLabel: xAxis.label,\n    yAxisLabel: yAxis.label,\n    xAxisValue: textX,\n    yAxisValue: textY,\n    xAxisDuration: durationX,\n    yAxisDuration: durationY,\n  };\n};\n"],
+  "mappings": "AAGA,SAAS,eAAe;AAExB,SAAS,qBAAqB;AAY9B,SAAS,2BAA2B;AACpC,SAAS,2BAA2B;AAEpC,SAAS,yCAAyC;AAgB3C,MAAM,oCAAoC,CAG/C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA4E;AAC1E,QAAM,EAAE,OAAO,MAAM,IAAI,QAAQ,kBAAkB,MAAM;AAEzD,QAAM,aAAa,oBAAoB,OAAO,mBAAmB,IAAI;AACrE,QAAM,aAAa,oBAAoB,OAAO,mBAAmB,IAAI;AACrE,QAAM,oBAAoB,qBAAqB,IAAI,SAAS;AAC5D,QAAM,YAAY,mBAAmB;AAErC,QAAM,aAAa,OAAO,cAAc,YAAY;AAEpD,QAAM,UACJ,cAAc,mBAAmB,aAAa,MAC1C;AAAA,IACE,KAAK,YAAY;AAAA,IACjB,KAAK;AAAA,EACP,IACC,QAAQ,qBAAqB,MAAM,EAAE;AAE5C,QAAM,UACJ,cAAc,mBAAmB,aAAa,MAC1C;AAAA,IACE,KAAK,YAAY;AAAA,IACjB,KAAK;AAAA,EACP,IACC,QAAQ,qBAAqB,MAAM,EAAE;AAE5C,QAAM,EAAE,IAAI,IAAI,IAAI,GAAG,IAAI;AAE3B,QAAM,kCAAkC,CAAC,SACvC,cAAc,KAAK,IAAI,IACnB,CAAC,UAAkB,eAAe,MAAM,KAAK,KAAK,QAClD;AAEN,QAAM,qBACJ,gCAAgC,KAAK,KAAK;AAC5C,QAAM,qBACJ,gCAAgC,KAAK,KAAK;AAE5C,QAAM,EAAE,MAAM,OAAO,UAAU,UAAU,IACvC;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,oBAAoB,OAAO,OAAO;AAAA,EACpC;AAEF,QAAM,EAAE,MAAM,OAAO,UAAU,UAAU,IACvC;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,oBAAoB,OAAO,OAAO;AAAA,EACpC;AAEF,SAAO;AAAA,IACL,YAAY,MAAM;AAAA,IAClB,YAAY,MAAM;AAAA,IAClB,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,eAAe;AAAA,IACf,eAAe;AAAA,EACjB;AACF;",
   "names": []
 }

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

@@ -28,7 +28,10 @@ const XYChartTooltipContent = ({
   const colorScaleMap = useXYChartColorScales();
   const { seriesToMetadata } = useXYChartData();
   const { datapointMetadataMap } = useXYChartData();
-  if (customTooltip?.children) {
+  if (customTooltip?.hidden) {
+    return null;
+  }
+  if (customTooltip?.template) {
     const customTooltipPayload = getCustomTooltipPayload(
       content,
       safeGet(seriesToMetadata, content.series),
@@ -37,7 +40,7 @@ const XYChartTooltipContent = ({
       colorScaleMap,
       safeGet(datapointMetadataMap, content.datapoint).colorOverride
     );
-    const customTooltipContent = customTooltip.children?.(customTooltipPayload);
+    const customTooltipContent = customTooltip.template?.(customTooltipPayload);
     if (customTooltipContent === null) {
       return null;
     }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/xy-chart/components/tooltip/XYChartTooltipContent.tsx"],
-  "sourcesContent": ["import { useIntl } from 'react-intl';\n\nimport { AreaSeriesTooltip } from './AreaSeriesTooltip.js';\nimport { BarSeriesTooltip } from './BarSeriesTooltip.js';\nimport { DotSeriesTooltip } from './DotSeriesTooltip.js';\nimport { LineSeriesTooltip } from './LineSeriesTooltip.js';\nimport { RectSeriesTooltip } from './RectSeriesTooltip.js';\nimport { getCustomTooltipPayload } from './utils/get-custom-tooltip-payload.js';\nimport { OverlayTooltip } from '../../../core/components/overlay-tooltip/OverlayTooltip.js';\nimport { safeGet } from '../../../core/utils/safe-get.js';\nimport { useAxesFormatter } from '../../hooks/useAxesFormatter.js';\nimport { useXYChartColorScales } from '../../hooks/useXYChartColorScales.js';\nimport { useXYChartCustomTooltip } from '../../hooks/useXYChartCustomTooltip.js';\nimport { useXYChartData } from '../../hooks/useXYChartData.js';\nimport type { TooltipContent } from '../../types/state.js';\nimport {\n  AREA_VARIANT,\n  BAR_VARIANT,\n  DOT_VARIANT,\n  LINE_VARIANT,\n  RECT_VARIANT,\n} from '../../types/xy-chart-internals.js';\n\nexport const XYChartTooltipContent = ({\n  content,\n}: {\n  content: TooltipContent;\n}) => {\n  const customTooltip = useXYChartCustomTooltip();\n  const axisIdToFormatter = useAxesFormatter();\n  const intl = useIntl();\n  const colorScaleMap = useXYChartColorScales();\n  const { seriesToMetadata } = useXYChartData();\n  const { datapointMetadataMap } = useXYChartData();\n\n  if (customTooltip?.children) {\n    const customTooltipPayload = getCustomTooltipPayload(\n      content,\n      safeGet(seriesToMetadata, content.series),\n      axisIdToFormatter,\n      intl,\n      colorScaleMap,\n      safeGet(datapointMetadataMap, content.datapoint).colorOverride,\n    );\n\n    const customTooltipContent = customTooltip.children?.(customTooltipPayload);\n\n    if (customTooltipContent === null) {\n      return null;\n    }\n\n    if (customTooltipContent) {\n      return (\n        <OverlayTooltip legacyTemplate={customTooltipContent}></OverlayTooltip>\n      );\n    }\n  }\n\n  switch (content.type) {\n    case RECT_VARIANT:\n      return (\n        <RectSeriesTooltip\n          datapoint={content.datapoint}\n          series={content.series}\n        />\n      );\n    case BAR_VARIANT:\n      return (\n        <BarSeriesTooltip\n          datapoint={content.datapoint}\n          series={content.series}\n        />\n      );\n    case DOT_VARIANT:\n      return (\n        <DotSeriesTooltip\n          datapoint={content.datapoint}\n          series={content.series}\n        />\n      );\n    case LINE_VARIANT:\n      return (\n        <LineSeriesTooltip\n          datapoint={content.datapoint}\n          series={content.series}\n        />\n      );\n    case AREA_VARIANT:\n      return (\n        <AreaSeriesTooltip\n          datapoint={content.datapoint}\n          series={content.series}\n        />\n      );\n\n    default:\n      return null;\n  }\n};\n"],
-  "mappings": "AAqDQ;AArDR,SAAS,eAAe;AAExB,SAAS,yBAAyB;AAClC,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AACjC,SAAS,yBAAyB;AAClC,SAAS,yBAAyB;AAClC,SAAS,+BAA+B;AACxC,SAAS,sBAAsB;AAC/B,SAAS,eAAe;AACxB,SAAS,wBAAwB;AACjC,SAAS,6BAA6B;AACtC,SAAS,+BAA+B;AACxC,SAAS,sBAAsB;AAE/B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEA,MAAM,wBAAwB,CAAC;AAAA,EACpC;AACF,MAEM;AACJ,QAAM,gBAAgB,wBAAwB;AAC9C,QAAM,oBAAoB,iBAAiB;AAC3C,QAAM,OAAO,QAAQ;AACrB,QAAM,gBAAgB,sBAAsB;AAC5C,QAAM,EAAE,iBAAiB,IAAI,eAAe;AAC5C,QAAM,EAAE,qBAAqB,IAAI,eAAe;AAEhD,MAAI,eAAe,UAAU;AAC3B,UAAM,uBAAuB;AAAA,MAC3B;AAAA,MACA,QAAQ,kBAAkB,QAAQ,MAAM;AAAA,MACxC;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ,sBAAsB,QAAQ,SAAS,EAAE;AAAA,IACnD;AAEA,UAAM,uBAAuB,cAAc,WAAW,oBAAoB;AAE1E,QAAI,yBAAyB,MAAM;AACjC,aAAO;AAAA,IACT;AAEA,QAAI,sBAAsB;AACxB,aACE,oBAAC,kBAAe,gBAAgB,sBAAsB;AAAA,IAE1D;AAAA,EACF;AAEA,UAAQ,QAAQ,MAAM;AAAA,IACpB,KAAK;AACH,aACE;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,QAAQ;AAAA,UACnB,QAAQ,QAAQ;AAAA;AAAA,MAClB;AAAA,IAEJ,KAAK;AACH,aACE;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,QAAQ;AAAA,UACnB,QAAQ,QAAQ;AAAA;AAAA,MAClB;AAAA,IAEJ,KAAK;AACH,aACE;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,QAAQ;AAAA,UACnB,QAAQ,QAAQ;AAAA;AAAA,MAClB;AAAA,IAEJ,KAAK;AACH,aACE;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,QAAQ;AAAA,UACnB,QAAQ,QAAQ;AAAA;AAAA,MAClB;AAAA,IAEJ,KAAK;AACH,aACE;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,QAAQ;AAAA,UACnB,QAAQ,QAAQ;AAAA;AAAA,MAClB;AAAA,IAGJ;AACE,aAAO;AAAA,EACX;AACF;",
+  "sourcesContent": ["import { useIntl } from 'react-intl';\n\nimport { AreaSeriesTooltip } from './AreaSeriesTooltip.js';\nimport { BarSeriesTooltip } from './BarSeriesTooltip.js';\nimport { DotSeriesTooltip } from './DotSeriesTooltip.js';\nimport { LineSeriesTooltip } from './LineSeriesTooltip.js';\nimport { RectSeriesTooltip } from './RectSeriesTooltip.js';\nimport { getCustomTooltipPayload } from './utils/get-custom-tooltip-payload.js';\nimport { OverlayTooltip } from '../../../core/components/overlay-tooltip/OverlayTooltip.js';\nimport { safeGet } from '../../../core/utils/safe-get.js';\nimport { useAxesFormatter } from '../../hooks/useAxesFormatter.js';\nimport { useXYChartColorScales } from '../../hooks/useXYChartColorScales.js';\nimport { useXYChartCustomTooltip } from '../../hooks/useXYChartCustomTooltip.js';\nimport { useXYChartData } from '../../hooks/useXYChartData.js';\nimport type { TooltipContent } from '../../types/state.js';\nimport {\n  AREA_VARIANT,\n  BAR_VARIANT,\n  DOT_VARIANT,\n  LINE_VARIANT,\n  RECT_VARIANT,\n} from '../../types/xy-chart-internals.js';\n\nexport const XYChartTooltipContent = ({\n  content,\n}: {\n  content: TooltipContent;\n}) => {\n  const customTooltip = useXYChartCustomTooltip();\n  const axisIdToFormatter = useAxesFormatter();\n  const intl = useIntl();\n  const colorScaleMap = useXYChartColorScales();\n  const { seriesToMetadata } = useXYChartData();\n  const { datapointMetadataMap } = useXYChartData();\n\n  if (customTooltip?.hidden) {\n    return null;\n  }\n\n  if (customTooltip?.template) {\n    const customTooltipPayload = getCustomTooltipPayload(\n      content,\n      safeGet(seriesToMetadata, content.series),\n      axisIdToFormatter,\n      intl,\n      colorScaleMap,\n      safeGet(datapointMetadataMap, content.datapoint).colorOverride,\n    );\n\n    const customTooltipContent = customTooltip.template?.(customTooltipPayload);\n\n    if (customTooltipContent === null) {\n      return null;\n    }\n\n    if (customTooltipContent) {\n      return (\n        <OverlayTooltip legacyTemplate={customTooltipContent}></OverlayTooltip>\n      );\n    }\n  }\n\n  switch (content.type) {\n    case RECT_VARIANT:\n      return (\n        <RectSeriesTooltip\n          datapoint={content.datapoint}\n          series={content.series}\n        />\n      );\n    case BAR_VARIANT:\n      return (\n        <BarSeriesTooltip\n          datapoint={content.datapoint}\n          series={content.series}\n        />\n      );\n    case DOT_VARIANT:\n      return (\n        <DotSeriesTooltip\n          datapoint={content.datapoint}\n          series={content.series}\n        />\n      );\n    case LINE_VARIANT:\n      return (\n        <LineSeriesTooltip\n          datapoint={content.datapoint}\n          series={content.series}\n        />\n      );\n    case AREA_VARIANT:\n      return (\n        <AreaSeriesTooltip\n          datapoint={content.datapoint}\n          series={content.series}\n        />\n      );\n\n    default:\n      return null;\n  }\n};\n"],
+  "mappings": "AAyDQ;AAzDR,SAAS,eAAe;AAExB,SAAS,yBAAyB;AAClC,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AACjC,SAAS,yBAAyB;AAClC,SAAS,yBAAyB;AAClC,SAAS,+BAA+B;AACxC,SAAS,sBAAsB;AAC/B,SAAS,eAAe;AACxB,SAAS,wBAAwB;AACjC,SAAS,6BAA6B;AACtC,SAAS,+BAA+B;AACxC,SAAS,sBAAsB;AAE/B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEA,MAAM,wBAAwB,CAAC;AAAA,EACpC;AACF,MAEM;AACJ,QAAM,gBAAgB,wBAAwB;AAC9C,QAAM,oBAAoB,iBAAiB;AAC3C,QAAM,OAAO,QAAQ;AACrB,QAAM,gBAAgB,sBAAsB;AAC5C,QAAM,EAAE,iBAAiB,IAAI,eAAe;AAC5C,QAAM,EAAE,qBAAqB,IAAI,eAAe;AAEhD,MAAI,eAAe,QAAQ;AACzB,WAAO;AAAA,EACT;AAEA,MAAI,eAAe,UAAU;AAC3B,UAAM,uBAAuB;AAAA,MAC3B;AAAA,MACA,QAAQ,kBAAkB,QAAQ,MAAM;AAAA,MACxC;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ,sBAAsB,QAAQ,SAAS,EAAE;AAAA,IACnD;AAEA,UAAM,uBAAuB,cAAc,WAAW,oBAAoB;AAE1E,QAAI,yBAAyB,MAAM;AACjC,aAAO;AAAA,IACT;AAEA,QAAI,sBAAsB;AACxB,aACE,oBAAC,kBAAe,gBAAgB,sBAAsB;AAAA,IAE1D;AAAA,EACF;AAEA,UAAQ,QAAQ,MAAM;AAAA,IACpB,KAAK;AACH,aACE;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,QAAQ;AAAA,UACnB,QAAQ,QAAQ;AAAA;AAAA,MAClB;AAAA,IAEJ,KAAK;AACH,aACE;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,QAAQ;AAAA,UACnB,QAAQ,QAAQ;AAAA;AAAA,MAClB;AAAA,IAEJ,KAAK;AACH,aACE;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,QAAQ;AAAA,UACnB,QAAQ,QAAQ;AAAA;AAAA,MAClB;AAAA,IAEJ,KAAK;AACH,aACE;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,QAAQ;AAAA,UACnB,QAAQ,QAAQ;AAAA;AAAA,MAClB;AAAA,IAEJ,KAAK;AACH,aACE;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,QAAQ;AAAA,UACnB,QAAQ,QAAQ;AAAA;AAAA,MAClB;AAAA,IAGJ;AACE,aAAO;AAAA,EACX;AACF;",
   "names": []
 }

package/esm/charts/xy-chart/components/tooltip/XYChartTooltipTemplate/XYChartTooltipTemplate.css

@@ -1,4 +1,4 @@
-._fnoz5j0-3-4-0 {
+._fnoz5j0-3-5-0 {
   min-width: 225px;
   max-width: 300px;
 }

package/esm/charts/xy-chart/components/tooltip/XYChartTooltipTemplate/XYChartTooltipTemplate.sty.js

@@ -1,5 +1,5 @@
 import "./XYChartTooltipTemplate.css";
-var body = "_fnoz5j0-3-4-0";
+var body = "_fnoz5j0-3-5-0";
 export {
   body
 };

package/esm/charts/xy-chart/components/tooltip/XYChartTooltipTemplate/XYChartTooltipTemplate.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/xy-chart/components/tooltip/XYChartTooltipTemplate/XYChartTooltipTemplate.css.ts"],
-  "sourcesContent": ["import './XYChartTooltipTemplate.css';\nexport var body = '_fnoz5j0-3-4-0';"],
+  "sourcesContent": ["import './XYChartTooltipTemplate.css';\nexport var body = '_fnoz5j0-3-5-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,OAAO;",
   "names": []
 }

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

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

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

@@ -1,8 +1,8 @@
 import "./tooltip-styles.css";
-var axisName = "_1u58xor1-3-4-0";
-var axisValue = "_1u58xor2-3-4-0";
-var duration = "_1u58xor3-3-4-0";
-var wrapper = "_1u58xor0-3-4-0";
+var axisName = "_1u58xor1-3-5-0";
+var axisValue = "_1u58xor2-3-5-0";
+var duration = "_1u58xor3-3-5-0";
+var wrapper = "_1u58xor0-3-5-0";
 export {
   axisName,
   axisValue,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/xy-chart/components/tooltip/utils/tooltip-styles.css.ts"],
-  "sourcesContent": ["import './tooltip-styles.css';\nexport var axisName = '_1u58xor1-3-4-0';\nexport var axisValue = '_1u58xor2-3-4-0';\nexport var duration = '_1u58xor3-3-4-0';\nexport var wrapper = '_1u58xor0-3-4-0';"],
+  "sourcesContent": ["import './tooltip-styles.css';\nexport var axisName = '_1u58xor1-3-5-0';\nexport var axisValue = '_1u58xor2-3-5-0';\nexport var duration = '_1u58xor3-3-5-0';\nexport var wrapper = '_1u58xor0-3-5-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,WAAW;AACf,IAAI,YAAY;AAChB,IAAI,WAAW;AACf,IAAI,UAAU;",
   "names": []
 }

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

@@ -55,6 +55,7 @@ const DEFAULT_POINTS_DISPLAY = "auto";
 const RECT_STROKE_WIDTH = 1;
 const XY_CHART_BOTTOM_AXIS_LABEL = "Bottom axis";
 const XY_CHART_TOP_AXIS_LABEL = "Top axis";
+const DISPLAY_NAME = "XYChart";
 export {
   ANNOTATIONS_PADDING_BOTTOM,
   DEFAULT_AXIS_CONFIG,
@@ -64,6 +65,7 @@ export {
   DEFAULT_LEGEND_RANGE_FORMATTER,
   DEFAULT_LOADING_STATE,
   DEFAULT_POINTS_DISPLAY,
+  DISPLAY_NAME,
   DISPLAY_UNITS_LIMIT,
   RECT_STROKE_WIDTH,
   XY_CHART_ARIA_LABEL,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/xy-chart/constants/defaults.ts"],
-  "sourcesContent": ["import { initialSelectionState } from '../../core/components/annotations/providers/AnnotationsDataInitialState.js';\nimport type { PointsDisplay } from '../../core/components/canvas/types/canvas-shape.js';\nimport { TRUNCATION_MODE } from '../../core/components/legend/range/constants.js';\nimport { defaultRatio } from '../../core/constants.js';\nimport type { XYChartState } from '../types/state.js';\nimport {\n  XYChartAxisProps,\n  XYChartChartLegendProps,\n  XYChartConfigProperties,\n  XYChartNumericalAxisProps,\n  XYChartToolbarConfigProps,\n} from '../types/xy-chart-props.js';\n\nexport const DEFAULT_CHART_HEIGHT = 300;\n\nexport const DEFAULT_COLOR_PALETTE = 'categorical';\nexport const DEFAULT_COLOR_PALETTE_RECT = 'blue';\n\nexport const DEFAULT_LOADING_STATE = false;\n\ntype XYChartAxisDefaults = Pick<XYChartAxisProps, 'hidden' | 'reversed'> &\n  Pick<XYChartNumericalAxisProps, 'min' | 'max'>;\n\nexport const DEFAULT_AXIS_CONFIG: XYChartAxisDefaults = {\n  hidden: false,\n  min: 'auto',\n  max: 'auto',\n  reversed: false,\n};\n\nexport const DEFAULT_LEGEND_RANGE_FORMATTER = {\n  maximumFractionDigits: 1,\n};\n\nexport const initialState: XYChartState = {\n  zoom: {\n    zoomInEnabled: true,\n    zoomOutEnabled: false,\n  },\n  currentDomain: undefined,\n  select: undefined,\n  interactionMode: 'explore',\n  thresholds: { hoveredThresholdId: undefined },\n  highlightedSeriesId: undefined,\n  filteredSeriesIds: undefined,\n  annotations: initialSelectionState,\n};\n\nexport const defaultLegend: XYChartChartLegendProps = {\n  hidden: false,\n  position: 'auto',\n  ratio: defaultRatio,\n} as const;\n\nexport const defaultToolbar: XYChartToolbarConfigProps = {\n  hidden: false,\n  placement: 'top-right',\n  collapsed: false,\n  draggable: true,\n} as const;\n\nexport const defaultConfig: XYChartConfigProperties = {\n  legend: defaultLegend,\n  toolbar: defaultToolbar,\n  colorPalette: undefined,\n  truncationMode: TRUNCATION_MODE.Middle,\n  thresholdIndicators: [],\n  yAxes: [],\n  xAxes: [],\n  colorRules: [],\n};\n\nexport const XY_CHART_ARIA_LABEL = 'XY Chart';\n/** Annotations bottom padding in pixels */\nexport const ANNOTATIONS_PADDING_BOTTOM = 6;\n\nexport const DISPLAY_UNITS_LIMIT = 3;\n\nexport const DEFAULT_POINTS_DISPLAY = 'auto' as PointsDisplay;\n\nexport const RECT_STROKE_WIDTH = 1;\n\nexport const XY_CHART_BOTTOM_AXIS_LABEL = 'Bottom axis';\n\nexport const XY_CHART_TOP_AXIS_LABEL = 'Top axis';\n"],
-  "mappings": "AAAA,SAAS,6BAA6B;AAEtC,SAAS,uBAAuB;AAChC,SAAS,oBAAoB;AAUtB,MAAM,uBAAuB;AAE7B,MAAM,wBAAwB;AAC9B,MAAM,6BAA6B;AAEnC,MAAM,wBAAwB;AAK9B,MAAM,sBAA2C;AAAA,EACtD,QAAQ;AAAA,EACR,KAAK;AAAA,EACL,KAAK;AAAA,EACL,UAAU;AACZ;AAEO,MAAM,iCAAiC;AAAA,EAC5C,uBAAuB;AACzB;AAEO,MAAM,eAA6B;AAAA,EACxC,MAAM;AAAA,IACJ,eAAe;AAAA,IACf,gBAAgB;AAAA,EAClB;AAAA,EACA,eAAe;AAAA,EACf,QAAQ;AAAA,EACR,iBAAiB;AAAA,EACjB,YAAY,EAAE,oBAAoB,OAAU;AAAA,EAC5C,qBAAqB;AAAA,EACrB,mBAAmB;AAAA,EACnB,aAAa;AACf;AAEO,MAAM,gBAAyC;AAAA,EACpD,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,OAAO;AACT;AAEO,MAAM,iBAA4C;AAAA,EACvD,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,WAAW;AAAA,EACX,WAAW;AACb;AAEO,MAAM,gBAAyC;AAAA,EACpD,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,cAAc;AAAA,EACd,gBAAgB,gBAAgB;AAAA,EAChC,qBAAqB,CAAC;AAAA,EACtB,OAAO,CAAC;AAAA,EACR,OAAO,CAAC;AAAA,EACR,YAAY,CAAC;AACf;AAEO,MAAM,sBAAsB;AAE5B,MAAM,6BAA6B;AAEnC,MAAM,sBAAsB;AAE5B,MAAM,yBAAyB;AAE/B,MAAM,oBAAoB;AAE1B,MAAM,6BAA6B;AAEnC,MAAM,0BAA0B;",
+  "sourcesContent": ["import { initialSelectionState } from '../../core/components/annotations/providers/AnnotationsDataInitialState.js';\nimport type { PointsDisplay } from '../../core/components/canvas/types/canvas-shape.js';\nimport { TRUNCATION_MODE } from '../../core/components/legend/range/constants.js';\nimport { defaultRatio } from '../../core/constants.js';\nimport type { XYChartState } from '../types/state.js';\nimport {\n  XYChartAxisProps,\n  XYChartChartLegendProps,\n  XYChartConfigProperties,\n  XYChartNumericalAxisProps,\n  XYChartToolbarConfigProps,\n} from '../types/xy-chart-props.js';\n\nexport const DEFAULT_CHART_HEIGHT = 300;\n\nexport const DEFAULT_COLOR_PALETTE = 'categorical';\nexport const DEFAULT_COLOR_PALETTE_RECT = 'blue';\n\nexport const DEFAULT_LOADING_STATE = false;\n\ntype XYChartAxisDefaults = Pick<XYChartAxisProps, 'hidden' | 'reversed'> &\n  Pick<XYChartNumericalAxisProps, 'min' | 'max'>;\n\nexport const DEFAULT_AXIS_CONFIG: XYChartAxisDefaults = {\n  hidden: false,\n  min: 'auto',\n  max: 'auto',\n  reversed: false,\n};\n\nexport const DEFAULT_LEGEND_RANGE_FORMATTER = {\n  maximumFractionDigits: 1,\n};\n\nexport const initialState: XYChartState = {\n  zoom: {\n    zoomInEnabled: true,\n    zoomOutEnabled: false,\n  },\n  currentDomain: undefined,\n  select: undefined,\n  interactionMode: 'explore',\n  thresholds: { hoveredThresholdId: undefined },\n  highlightedSeriesId: undefined,\n  filteredSeriesIds: undefined,\n  annotations: initialSelectionState,\n};\n\nexport const defaultLegend: XYChartChartLegendProps = {\n  hidden: false,\n  position: 'auto',\n  ratio: defaultRatio,\n} as const;\n\nexport const defaultToolbar: XYChartToolbarConfigProps = {\n  hidden: false,\n  placement: 'top-right',\n  collapsed: false,\n  draggable: true,\n} as const;\n\nexport const defaultConfig: XYChartConfigProperties = {\n  legend: defaultLegend,\n  toolbar: defaultToolbar,\n  colorPalette: undefined,\n  truncationMode: TRUNCATION_MODE.Middle,\n  thresholdIndicators: [],\n  yAxes: [],\n  xAxes: [],\n  colorRules: [],\n};\n\nexport const XY_CHART_ARIA_LABEL = 'XY Chart';\n/** Annotations bottom padding in pixels */\nexport const ANNOTATIONS_PADDING_BOTTOM = 6;\n\nexport const DISPLAY_UNITS_LIMIT = 3;\n\nexport const DEFAULT_POINTS_DISPLAY = 'auto' as PointsDisplay;\n\nexport const RECT_STROKE_WIDTH = 1;\n\nexport const XY_CHART_BOTTOM_AXIS_LABEL = 'Bottom axis';\n\nexport const XY_CHART_TOP_AXIS_LABEL = 'Top axis';\n\nexport const DISPLAY_NAME = 'XYChart';\n"],
+  "mappings": "AAAA,SAAS,6BAA6B;AAEtC,SAAS,uBAAuB;AAChC,SAAS,oBAAoB;AAUtB,MAAM,uBAAuB;AAE7B,MAAM,wBAAwB;AAC9B,MAAM,6BAA6B;AAEnC,MAAM,wBAAwB;AAK9B,MAAM,sBAA2C;AAAA,EACtD,QAAQ;AAAA,EACR,KAAK;AAAA,EACL,KAAK;AAAA,EACL,UAAU;AACZ;AAEO,MAAM,iCAAiC;AAAA,EAC5C,uBAAuB;AACzB;AAEO,MAAM,eAA6B;AAAA,EACxC,MAAM;AAAA,IACJ,eAAe;AAAA,IACf,gBAAgB;AAAA,EAClB;AAAA,EACA,eAAe;AAAA,EACf,QAAQ;AAAA,EACR,iBAAiB;AAAA,EACjB,YAAY,EAAE,oBAAoB,OAAU;AAAA,EAC5C,qBAAqB;AAAA,EACrB,mBAAmB;AAAA,EACnB,aAAa;AACf;AAEO,MAAM,gBAAyC;AAAA,EACpD,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,OAAO;AACT;AAEO,MAAM,iBAA4C;AAAA,EACvD,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,WAAW;AAAA,EACX,WAAW;AACb;AAEO,MAAM,gBAAyC;AAAA,EACpD,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,cAAc;AAAA,EACd,gBAAgB,gBAAgB;AAAA,EAChC,qBAAqB,CAAC;AAAA,EACtB,OAAO,CAAC;AAAA,EACR,OAAO,CAAC;AAAA,EACR,YAAY,CAAC;AACf;AAEO,MAAM,sBAAsB;AAE5B,MAAM,6BAA6B;AAEnC,MAAM,sBAAsB;AAE5B,MAAM,yBAAyB;AAE/B,MAAM,oBAAoB;AAE1B,MAAM,6BAA6B;AAEnC,MAAM,0BAA0B;AAEhC,MAAM,eAAe;",
   "names": []
 }

package/esm/charts/xy-chart/context/XYChartCustomTooltip.context.js

@@ -1,6 +1,8 @@
 import { createContext } from "react";
-const XYChartCustomTooltipContext = createContext(void 0);
+import { DEFAULT_CUSTOM_TOOLTIP_CONFIG } from "../../core/constants.js";
+const XYChartCustomTooltipContext = createContext(DEFAULT_CUSTOM_TOOLTIP_CONFIG);
 export {
+  DEFAULT_CUSTOM_TOOLTIP_CONFIG,
   XYChartCustomTooltipContext
 };
 //# sourceMappingURL=XYChartCustomTooltip.context.js.map

package/esm/charts/xy-chart/context/XYChartCustomTooltip.context.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/xy-chart/context/XYChartCustomTooltip.context.ts"],
-  "sourcesContent": ["import { createContext } from 'react';\n\nimport type { XYChartCustomTooltipProps } from '../types/xy-chart-props.js';\n\nexport const XYChartCustomTooltipContext = createContext<\n  XYChartCustomTooltipProps | undefined\n>(undefined);\n"],
-  "mappings": "AAAA,SAAS,qBAAqB;AAIvB,MAAM,8BAA8B,cAEzC,MAAS;",
+  "sourcesContent": ["import { createContext, type ReactNode } from 'react';\n\nimport { DEFAULT_CUSTOM_TOOLTIP_CONFIG } from '../../core/constants.js';\nimport type { ChartTooltipConfig } from '../../core/types/tooltip.js';\nimport { XYChartTooltipPayload } from '../types/xy-chart.js';\n\nexport interface XYChartCustomTooltipConfig extends ChartTooltipConfig {\n  template?: (tooltipPayload: XYChartTooltipPayload) => ReactNode;\n}\n\nexport { DEFAULT_CUSTOM_TOOLTIP_CONFIG };\n\nexport const XYChartCustomTooltipContext =\n  createContext<XYChartCustomTooltipConfig>(DEFAULT_CUSTOM_TOOLTIP_CONFIG);\n"],
+  "mappings": "AAAA,SAAS,qBAAqC;AAE9C,SAAS,qCAAqC;AAUvC,MAAM,8BACX,cAA0C,6BAA6B;",
   "names": []
 }

package/esm/charts/xy-chart/context/XYChartData.context.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/xy-chart/context/XYChartData.context.ts"],
-  "sourcesContent": ["import { createContext } from 'react';\n\nimport type {\n  AxisIdToScaleDomain,\n  XYChartAxisInternal,\n  XYChartSeriesWithDatapoints,\n  MapDatapoints,\n  SeriesToMetadata,\n  AxisIdToDimension,\n} from '../types/xy-chart-internals.js';\n\nexport type XYChartDataContext = {\n  axesMetadata: {\n    isZoomEnabled: boolean;\n    isPanEnabled: boolean;\n    isInfinite: boolean;\n  };\n  axes: XYChartAxisInternal[];\n  seriesWithDatapoints: XYChartSeriesWithDatapoints[];\n  filteredSeriesWithDatapoints: XYChartSeriesWithDatapoints[];\n  axisIdToScaleDomain: AxisIdToScaleDomain;\n  datapointMetadataMap: MapDatapoints;\n  seriesToMetadata: SeriesToMetadata;\n  axisIdToDimension: AxisIdToDimension;\n};\n\nexport const XYChartDataContext = createContext<XYChartDataContext | undefined>(\n  undefined,\n);\n\nXYChartDataContext['displayName'] = 'XYChartDataContext';\n"],
-  "mappings": "AAAA,SAAS,qBAAqB;AA0BvB,MAAM,qBAAqB;AAAA,EAChC;AACF;AAEA,mBAAmB,aAAa,IAAI;",
+  "sourcesContent": ["import { createContext } from 'react';\n\nimport type {\n  AxisIdToScaleDomain,\n  XYChartAxisInternal,\n  XYChartSeriesWithDatapoints,\n  MapDatapoints,\n  SeriesToMetadata,\n  AxisIdToDimension,\n} from '../types/xy-chart-internals.js';\nimport type { XYChartData } from '../types/xy-chart.js';\n\nexport type XYChartDataContext = {\n  axesMetadata: {\n    isZoomEnabled: boolean;\n    isPanEnabled: boolean;\n    isInfinite: boolean;\n  };\n  axes: XYChartAxisInternal[];\n  seriesWithDatapoints: XYChartSeriesWithDatapoints[];\n  filteredSeriesWithDatapoints: XYChartSeriesWithDatapoints[];\n  axisIdToScaleDomain: AxisIdToScaleDomain;\n  axisIdToCategoryDatum: Map<string, Map<string, XYChartData>>;\n  datapointMetadataMap: MapDatapoints;\n  seriesToMetadata: SeriesToMetadata;\n  axisIdToDimension: AxisIdToDimension;\n};\n\nexport const XYChartDataContext = createContext<XYChartDataContext | undefined>(\n  undefined,\n);\n\nXYChartDataContext['displayName'] = 'XYChartDataContext';\n"],
+  "mappings": "AAAA,SAAS,qBAAqB;AA4BvB,MAAM,qBAAqB;AAAA,EAChC;AACF;AAEA,mBAAmB,aAAa,IAAI;",
   "names": []
 }

package/esm/charts/xy-chart/hooks/useFormatCategory.js

@@ -0,0 +1,42 @@
+import { useCallback, useContext } from "react";
+import { format } from "@dynatrace-sdk/units";
+import { useVisibleAxesConfig } from "./useVisibleAxesConfig.js";
+import { isFormatterOptions } from "../../core/types/formatter.js";
+import { XYChartDataContext } from "../context/XYChartData.context.js";
+import { isCategorical } from "../types/guards.js";
+const useFormatCategory = () => {
+  const config = useVisibleAxesConfig();
+  const context = useContext(XYChartDataContext);
+  if (context === void 0) {
+    throw new Error(
+      "useFormatCategory must be used within a XYChartDataContext"
+    );
+  }
+  const { axisIdToCategoryDatum } = context;
+  return useCallback(
+    (axisOrPosition, raw) => {
+      if (typeof raw !== "string") {
+        return raw;
+      }
+      const axis = typeof axisOrPosition === "string" ? config[axisOrPosition] : axisOrPosition;
+      if (!axis || !isCategorical(axis.type)) {
+        return raw;
+      }
+      const formatter = axis.formatter;
+      if (!formatter) {
+        return raw;
+      }
+      const numericFormatter = formatter;
+      if (isFormatterOptions(numericFormatter)) {
+        return format(Number(raw), numericFormatter);
+      }
+      const datum = axisIdToCategoryDatum.get(axis.id)?.get(raw) ?? {};
+      return formatter(raw, datum);
+    },
+    [config, axisIdToCategoryDatum]
+  );
+};
+export {
+  useFormatCategory
+};
+//# sourceMappingURL=useFormatCategory.js.map

package/esm/charts/xy-chart/hooks/useFormatCategory.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/charts/xy-chart/hooks/useFormatCategory.ts"],
+  "sourcesContent": ["import { useCallback, useContext } from 'react';\n\nimport { format } from '@dynatrace-sdk/units';\n\nimport { useVisibleAxesConfig } from './useVisibleAxesConfig.js';\nimport type {\n  AnyNumericFormatter,\n  CategoricalFormatter,\n} from '../../core/types/formatter.js';\nimport { isFormatterOptions } from '../../core/types/formatter.js';\nimport { XYChartDataContext } from '../context/XYChartData.context.js';\nimport { isCategorical } from '../types/guards.js';\nimport type { XYChartAxisInternal } from '../types/xy-chart-internals.js';\nimport type {\n  XYChartXAxisPosition,\n  XYChartYAxisPosition,\n} from '../types/xy-chart.js';\n\nexport type XYChartAxisPosition =\n  | XYChartXAxisPosition\n  | XYChartYAxisPosition\n  | 'top'\n  | 'bottom'\n  | 'left'\n  | 'right';\n\nexport type FormatCategory = (\n  axis: XYChartAxisInternal | XYChartAxisPosition | undefined,\n  raw: string | undefined,\n) => string | undefined;\n\n/**\n * Returns a stable function that formats a raw category string using the\n * categorical axis formatter. The axis can be addressed by position (`'top'`)\n * or by passing the internal axis config directly. Falls back to the raw value\n * when the axis isn't categorical, has no formatter, or the value is missing.\n *\n * @internal\n */\nexport const useFormatCategory = (): FormatCategory => {\n  const config = useVisibleAxesConfig();\n  const context = useContext(XYChartDataContext);\n\n  if (context === undefined) {\n    throw new Error(\n      'useFormatCategory must be used within a XYChartDataContext',\n    );\n  }\n\n  const { axisIdToCategoryDatum } = context;\n\n  return useCallback<FormatCategory>(\n    (axisOrPosition, raw) => {\n      if (typeof raw !== 'string') {\n        return raw;\n      }\n\n      const axis =\n        typeof axisOrPosition === 'string'\n          ? config[axisOrPosition as keyof typeof config]\n          : axisOrPosition;\n\n      if (!axis || !isCategorical(axis.type)) {\n        return raw;\n      }\n\n      const formatter = axis.formatter;\n      if (!formatter) {\n        return raw;\n      }\n\n      const numericFormatter = formatter as AnyNumericFormatter;\n      if (isFormatterOptions(numericFormatter)) {\n        return format(Number(raw), numericFormatter);\n      }\n\n      const datum = axisIdToCategoryDatum.get(axis.id)?.get(raw) ?? {};\n      return (formatter as CategoricalFormatter)(raw, datum);\n    },\n    [config, axisIdToCategoryDatum],\n  );\n};\n"],
+  "mappings": "AAAA,SAAS,aAAa,kBAAkB;AAExC,SAAS,cAAc;AAEvB,SAAS,4BAA4B;AAKrC,SAAS,0BAA0B;AACnC,SAAS,0BAA0B;AACnC,SAAS,qBAAqB;AA4BvB,MAAM,oBAAoB,MAAsB;AACrD,QAAM,SAAS,qBAAqB;AACpC,QAAM,UAAU,WAAW,kBAAkB;AAE7C,MAAI,YAAY,QAAW;AACzB,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EACF;AAEA,QAAM,EAAE,sBAAsB,IAAI;AAElC,SAAO;AAAA,IACL,CAAC,gBAAgB,QAAQ;AACvB,UAAI,OAAO,QAAQ,UAAU;AAC3B,eAAO;AAAA,MACT;AAEA,YAAM,OACJ,OAAO,mBAAmB,WACtB,OAAO,cAAqC,IAC5C;AAEN,UAAI,CAAC,QAAQ,CAAC,cAAc,KAAK,IAAI,GAAG;AACtC,eAAO;AAAA,MACT;AAEA,YAAM,YAAY,KAAK;AACvB,UAAI,CAAC,WAAW;AACd,eAAO;AAAA,MACT;AAEA,YAAM,mBAAmB;AACzB,UAAI,mBAAmB,gBAAgB,GAAG;AACxC,eAAO,OAAO,OAAO,GAAG,GAAG,gBAAgB;AAAA,MAC7C;AAEA,YAAM,QAAQ,sBAAsB,IAAI,KAAK,EAAE,GAAG,IAAI,GAAG,KAAK,CAAC;AAC/D,aAAQ,UAAmC,KAAK,KAAK;AAAA,IACvD;AAAA,IACA,CAAC,QAAQ,qBAAqB;AAAA,EAChC;AACF;",
+  "names": []
+}