@dynatrace/strato-components 3.5.0 → 3.6.0

package/esm/charts/timeseries/components/axes/TimeseriesTimeBottomAxisArea/TimeseriesTimeBottomAxisArea.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/timeseries/components/axes/TimeseriesTimeBottomAxisArea/TimeseriesTimeBottomAxisArea.tsx"],
-  "sourcesContent": ["import { useGesture } from '@use-gesture/react';\nimport clsx from 'clsx';\nimport { type CSSProperties, useRef } from 'react';\n\nimport { timeBottomAxisContainer } from './TimeseriesTimeBottomAxisArea.sty.js';\nimport { TimeBottomAxis } from '../../../../core/components/axes/components/TimeBottomAxis.js';\nimport { ChartGrid } from '../../../../core/components/chart-grid/ChartGridRoot.js';\nimport { KEYBOARD_HANDLERS } from '../../../../core/components/zoom/constants.js';\nimport { cursorStyle } from '../../../../core/components/zoom/ZoomCursors.sty.js';\nimport { isTouchableDevice } from '../../../../core/utils/is-touchable-device.js';\nimport { TIMESERIES_TIME_AXIS_ARIA_LABEL } from '../../../constants.js';\nimport { useZoomState } from '../../../hooks/store/selectors.js';\nimport { useChartInteractions } from '../../../hooks/useChartInteractions.js';\nimport { useTimeseriesTickAxis } from '../../../hooks/useTimeseriesTickAxis.js';\nimport { useXAxisConfig } from '../../../hooks/useXAxisConfig.js';\nimport { useXScales } from '../../../hooks/useXScale.js';\nimport { AREAS } from '../../../types/timeseries-grid-area-rules.js';\nimport { useApplyPanDelta } from '../../overlays/hooks/useApplyPanDelta.js';\nimport { TimeseriesPanningControls } from '../TimeseriesPanningControls.js';\n\n/**\n * The bottom axis component with default values already set\n */\nexport function TimeseriesTimeBottomAxisArea() {\n  const xAxisConfig = useXAxisConfig();\n  const { currentScale: xScale } = useXScales();\n  const { pan } = useChartInteractions();\n  const { zoomOutEnabled } = useZoomState();\n  const isPanEnabled = pan?.enabled && zoomOutEnabled;\n  const tickAxis = useTimeseriesTickAxis();\n  const bottomTickAxis = tickAxis?.bottom || { ticks: [], formattedTicks: [] };\n  const applyPan = useApplyPanDelta();\n\n  const axisRef = useRef<HTMLDivElement>(null);\n\n  useGesture(\n    {\n      onDrag: (e) =>\n        !KEYBOARD_HANDLERS.includes(e.type) && applyPan(-e.delta[0]),\n    },\n    {\n      target: axisRef,\n      eventOptions: { passive: false },\n      drag: {\n        filterTaps: !isTouchableDevice(),\n        pointer: { buttons: [1, 4] },\n        enabled: isPanEnabled,\n      },\n    },\n  );\n\n  const style: CSSProperties = isTouchableDevice()\n    ? { touchAction: 'none' }\n    : {};\n\n  if (!bottomTickAxis.ticks.length || !xScale) {\n    return null;\n  }\n\n  return (\n    <ChartGrid.GridArea gridArea={AREAS.bottomAxis} style={style}>\n      {({ availableWidth, availableHeight }) => (\n        <div\n          ref={axisRef}\n          className={clsx(\n            cursorStyle({ isPanEnabled }),\n            timeBottomAxisContainer({ isTouchableDevice: isTouchableDevice() }),\n          )}\n          role=\"group\"\n          aria-label={TIMESERIES_TIME_AXIS_ARIA_LABEL}\n        >\n          {isPanEnabled && (\n            <TimeseriesPanningControls onClickPan={(d) => applyPan(-d)} />\n          )}\n          <TimeBottomAxis\n            ticks={bottomTickAxis.ticks}\n            formattedTicks={bottomTickAxis.formattedTicks}\n            scale={xScale}\n            containerHeight={availableHeight}\n            containerWidth={availableWidth}\n            label={xAxisConfig?.label}\n            shrinkTickEdges={isPanEnabled}\n          />\n        </div>\n      )}\n    </ChartGrid.GridArea>\n  );\n}\n\nTimeseriesTimeBottomAxisArea['displayName'] = 'TimeseriesValueBottomAxisArea';\n"],
-  "mappings": "AA8DQ,SAUI,KAVJ;AA9DR,SAAS,kBAAkB;AAC3B,OAAO,UAAU;AACjB,SAA6B,cAAc;AAE3C,SAAS,+BAA+B;AACxC,SAAS,sBAAsB;AAC/B,SAAS,iBAAiB;AAC1B,SAAS,yBAAyB;AAClC,SAAS,mBAAmB;AAC5B,SAAS,yBAAyB;AAClC,SAAS,uCAAuC;AAChD,SAAS,oBAAoB;AAC7B,SAAS,4BAA4B;AACrC,SAAS,6BAA6B;AACtC,SAAS,sBAAsB;AAC/B,SAAS,kBAAkB;AAC3B,SAAS,aAAa;AACtB,SAAS,wBAAwB;AACjC,SAAS,iCAAiC;AAKnC,SAAS,+BAA+B;AAC7C,QAAM,cAAc,eAAe;AACnC,QAAM,EAAE,cAAc,OAAO,IAAI,WAAW;AAC5C,QAAM,EAAE,IAAI,IAAI,qBAAqB;AACrC,QAAM,EAAE,eAAe,IAAI,aAAa;AACxC,QAAM,eAAe,KAAK,WAAW;AACrC,QAAM,WAAW,sBAAsB;AACvC,QAAM,iBAAiB,UAAU,UAAU,EAAE,OAAO,CAAC,GAAG,gBAAgB,CAAC,EAAE;AAC3E,QAAM,WAAW,iBAAiB;AAElC,QAAM,UAAU,OAAuB,IAAI;AAE3C;AAAA,IACE;AAAA,MACE,QAAQ,CAAC,MACP,CAAC,kBAAkB,SAAS,EAAE,IAAI,KAAK,SAAS,CAAC,EAAE,MAAM,CAAC,CAAC;AAAA,IAC/D;AAAA,IACA;AAAA,MACE,QAAQ;AAAA,MACR,cAAc,EAAE,SAAS,MAAM;AAAA,MAC/B,MAAM;AAAA,QACJ,YAAY,CAAC,kBAAkB;AAAA,QAC/B,SAAS,EAAE,SAAS,CAAC,GAAG,CAAC,EAAE;AAAA,QAC3B,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAEA,QAAM,QAAuB,kBAAkB,IAC3C,EAAE,aAAa,OAAO,IACtB,CAAC;AAEL,MAAI,CAAC,eAAe,MAAM,UAAU,CAAC,QAAQ;AAC3C,WAAO;AAAA,EACT;AAEA,SACE,oBAAC,UAAU,UAAV,EAAmB,UAAU,MAAM,YAAY,OAC7C,WAAC,EAAE,gBAAgB,gBAAgB,MAClC;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW;AAAA,QACT,YAAY,EAAE,aAAa,CAAC;AAAA,QAC5B,wBAAwB,EAAE,mBAAmB,kBAAkB,EAAE,CAAC;AAAA,MACpE;AAAA,MACA,MAAK;AAAA,MACL,cAAY;AAAA,MAEX;AAAA,wBACC,oBAAC,6BAA0B,YAAY,CAAC,MAAM,SAAS,CAAC,CAAC,GAAG;AAAA,QAE9D;AAAA,UAAC;AAAA;AAAA,YACC,OAAO,eAAe;AAAA,YACtB,gBAAgB,eAAe;AAAA,YAC/B,OAAO;AAAA,YACP,iBAAiB;AAAA,YACjB,gBAAgB;AAAA,YAChB,OAAO,aAAa;AAAA,YACpB,iBAAiB;AAAA;AAAA,QACnB;AAAA;AAAA;AAAA,EACF,GAEJ;AAEJ;AAEA,6BAA6B,aAAa,IAAI;",
+  "sourcesContent": ["import { useGesture } from '@use-gesture/react';\nimport clsx from 'clsx';\nimport { type CSSProperties, useRef } from 'react';\n\nimport { timeBottomAxisContainer } from './TimeseriesTimeBottomAxisArea.sty.js';\nimport { TimeBottomAxis } from '../../../../core/components/axes/components/TimeBottomAxis.js';\nimport { ChartGrid } from '../../../../core/components/chart-grid/ChartGridRoot.js';\nimport { KEYBOARD_HANDLERS } from '../../../../core/components/zoom/constants.js';\nimport { cursorStyle } from '../../../../core/components/zoom/ZoomCursors.sty.js';\nimport { isTouchableDevice } from '../../../../core/utils/is-touchable-device.js';\nimport { TIMESERIES_TIME_AXIS_ARIA_LABEL } from '../../../constants.js';\nimport { useZoomState } from '../../../hooks/store/selectors.js';\nimport { useChartInteractions } from '../../../hooks/useChartInteractions.js';\nimport { useTimeseriesTickAxis } from '../../../hooks/useTimeseriesTickAxis.js';\nimport { useXAxisConfig } from '../../../hooks/useXAxisConfig.js';\nimport { useXScales } from '../../../hooks/useXScale.js';\nimport { AREAS } from '../../../types/timeseries-grid-area-rules.js';\nimport { useApplyPanDelta } from '../../overlays/hooks/useApplyPanDelta.js';\nimport { TimeseriesPanningControls } from '../TimeseriesPanningControls.js';\n\n/**\n * The bottom axis component with default values already set\n */\nexport function TimeseriesTimeBottomAxisArea() {\n  const xAxisConfig = useXAxisConfig();\n  const { currentScale: xScale } = useXScales();\n  const { pan } = useChartInteractions();\n  const { zoomOutEnabled } = useZoomState();\n  const isPanEnabled = pan?.enabled && zoomOutEnabled;\n  const tickAxis = useTimeseriesTickAxis();\n  const bottomTickAxis = tickAxis?.bottom || { ticks: [], formattedTicks: [] };\n  const applyPan = useApplyPanDelta();\n\n  const axisRef = useRef<HTMLDivElement>(null);\n\n  useGesture(\n    {\n      onDrag: (e) =>\n        !KEYBOARD_HANDLERS.includes(e.type) && applyPan(-e.delta[0]),\n    },\n    {\n      target: axisRef,\n      eventOptions: { passive: false },\n      enabled: isPanEnabled,\n      drag: {\n        filterTaps: !isTouchableDevice(),\n        // Without capture:false, tick DOM replacement during panning fires lostpointercapture\n        // on the removed element (non-bubbling), leaving useGesture stuck in active drag state.\n        pointer: { buttons: [1, 4], capture: false },\n      },\n    },\n  );\n\n  const style: CSSProperties = isTouchableDevice()\n    ? { touchAction: 'none' }\n    : {};\n\n  if (!bottomTickAxis.ticks.length || !xScale) {\n    return null;\n  }\n\n  return (\n    <ChartGrid.GridArea gridArea={AREAS.bottomAxis} style={style}>\n      {({ availableWidth, availableHeight }) => (\n        <div\n          ref={axisRef}\n          className={clsx(\n            cursorStyle({ isPanEnabled }),\n            timeBottomAxisContainer({ isTouchableDevice: isTouchableDevice() }),\n          )}\n          role=\"group\"\n          aria-label={TIMESERIES_TIME_AXIS_ARIA_LABEL}\n        >\n          {isPanEnabled && (\n            <TimeseriesPanningControls onClickPan={(d) => applyPan(-d)} />\n          )}\n          <TimeBottomAxis\n            ticks={bottomTickAxis.ticks}\n            formattedTicks={bottomTickAxis.formattedTicks}\n            scale={xScale}\n            containerHeight={availableHeight}\n            containerWidth={availableWidth}\n            label={xAxisConfig?.label}\n            shrinkTickEdges={isPanEnabled}\n          />\n        </div>\n      )}\n    </ChartGrid.GridArea>\n  );\n}\n\nTimeseriesTimeBottomAxisArea['displayName'] = 'TimeseriesValueBottomAxisArea';\n"],
+  "mappings": "AAgEQ,SAUI,KAVJ;AAhER,SAAS,kBAAkB;AAC3B,OAAO,UAAU;AACjB,SAA6B,cAAc;AAE3C,SAAS,+BAA+B;AACxC,SAAS,sBAAsB;AAC/B,SAAS,iBAAiB;AAC1B,SAAS,yBAAyB;AAClC,SAAS,mBAAmB;AAC5B,SAAS,yBAAyB;AAClC,SAAS,uCAAuC;AAChD,SAAS,oBAAoB;AAC7B,SAAS,4BAA4B;AACrC,SAAS,6BAA6B;AACtC,SAAS,sBAAsB;AAC/B,SAAS,kBAAkB;AAC3B,SAAS,aAAa;AACtB,SAAS,wBAAwB;AACjC,SAAS,iCAAiC;AAKnC,SAAS,+BAA+B;AAC7C,QAAM,cAAc,eAAe;AACnC,QAAM,EAAE,cAAc,OAAO,IAAI,WAAW;AAC5C,QAAM,EAAE,IAAI,IAAI,qBAAqB;AACrC,QAAM,EAAE,eAAe,IAAI,aAAa;AACxC,QAAM,eAAe,KAAK,WAAW;AACrC,QAAM,WAAW,sBAAsB;AACvC,QAAM,iBAAiB,UAAU,UAAU,EAAE,OAAO,CAAC,GAAG,gBAAgB,CAAC,EAAE;AAC3E,QAAM,WAAW,iBAAiB;AAElC,QAAM,UAAU,OAAuB,IAAI;AAE3C;AAAA,IACE;AAAA,MACE,QAAQ,CAAC,MACP,CAAC,kBAAkB,SAAS,EAAE,IAAI,KAAK,SAAS,CAAC,EAAE,MAAM,CAAC,CAAC;AAAA,IAC/D;AAAA,IACA;AAAA,MACE,QAAQ;AAAA,MACR,cAAc,EAAE,SAAS,MAAM;AAAA,MAC/B,SAAS;AAAA,MACT,MAAM;AAAA,QACJ,YAAY,CAAC,kBAAkB;AAAA;AAAA;AAAA,QAG/B,SAAS,EAAE,SAAS,CAAC,GAAG,CAAC,GAAG,SAAS,MAAM;AAAA,MAC7C;AAAA,IACF;AAAA,EACF;AAEA,QAAM,QAAuB,kBAAkB,IAC3C,EAAE,aAAa,OAAO,IACtB,CAAC;AAEL,MAAI,CAAC,eAAe,MAAM,UAAU,CAAC,QAAQ;AAC3C,WAAO;AAAA,EACT;AAEA,SACE,oBAAC,UAAU,UAAV,EAAmB,UAAU,MAAM,YAAY,OAC7C,WAAC,EAAE,gBAAgB,gBAAgB,MAClC;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW;AAAA,QACT,YAAY,EAAE,aAAa,CAAC;AAAA,QAC5B,wBAAwB,EAAE,mBAAmB,kBAAkB,EAAE,CAAC;AAAA,MACpE;AAAA,MACA,MAAK;AAAA,MACL,cAAY;AAAA,MAEX;AAAA,wBACC,oBAAC,6BAA0B,YAAY,CAAC,MAAM,SAAS,CAAC,CAAC,GAAG;AAAA,QAE9D;AAAA,UAAC;AAAA;AAAA,YACC,OAAO,eAAe;AAAA,YACtB,gBAAgB,eAAe;AAAA,YAC/B,OAAO;AAAA,YACP,iBAAiB;AAAA,YACjB,gBAAgB;AAAA,YAChB,OAAO,aAAa;AAAA,YACpB,iBAAiB;AAAA;AAAA,QACnB;AAAA;AAAA;AAAA,EACF,GAEJ;AAEJ;AAEA,6BAA6B,aAAa,IAAI;",
   "names": []
 }

package/esm/charts/timeseries/components/axes/TimeseriesTimeBottomAxisArea/TimeseriesTimeBottomAxisArea.sty.js

@@ -1,6 +1,6 @@
 import "./TimeseriesTimeBottomAxisArea.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var timeBottomAxisContainer = _7a468({ defaultClassName: "_19z0vdp0-3-5-0", variantClassNames: { isTouchableDevice: { true: "_19z0vdp1-3-5-0" } }, defaultVariants: {}, compoundVariants: [] });
+var timeBottomAxisContainer = _7a468({ defaultClassName: "_19z0vdp0-3-6-0", variantClassNames: { isTouchableDevice: { true: "_19z0vdp1-3-6-0" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   timeBottomAxisContainer
 };

package/esm/charts/timeseries/components/axes/TimeseriesTimeBottomAxisArea/TimeseriesTimeBottomAxisArea.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/timeseries/components/axes/TimeseriesTimeBottomAxisArea/TimeseriesTimeBottomAxisArea.css.ts"],
-  "sourcesContent": ["import './TimeseriesTimeBottomAxisArea.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var timeBottomAxisContainer = _7a468({defaultClassName:'_19z0vdp0-3-5-0',variantClassNames:{isTouchableDevice:{true:'_19z0vdp1-3-5-0'}},defaultVariants:{},compoundVariants:[]});"],
+  "sourcesContent": ["import './TimeseriesTimeBottomAxisArea.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var timeBottomAxisContainer = _7a468({defaultClassName:'_19z0vdp0-3-6-0',variantClassNames:{isTouchableDevice:{true:'_19z0vdp1-3-6-0'}},defaultVariants:{},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,0BAA0B,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,mBAAkB,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/charts/timeseries/components/overlays/TimeseriesOverlays.css

@@ -1,8 +1,8 @@
-._17fdb110-3-5-0 {
+._17fdb110-3-6-0 {
   z-index: 1;
   pointer-events: none;
 }
-._17fdb111-3-5-0 {
+._17fdb111-3-6-0 {
   top: -3.5px;
   left: -3.5px;
   width: calc(100% + 7px);
@@ -10,7 +10,7 @@
   z-index: 1;
   pointer-events: none;
 }
-._17fdb112-3-5-0 {
+._17fdb112-3-6-0 {
   top: -7px;
   left: -7px;
   width: calc(100% + 14px);
@@ -18,7 +18,7 @@
   z-index: 2;
   pointer-events: none;
 }
-._17fdb113-3-5-0 {
+._17fdb113-3-6-0 {
   cursor: crosshair;
   overflow: visible;
   pointer-events: none;

package/esm/charts/timeseries/components/overlays/TimeseriesOverlays.sty.js

@@ -1,9 +1,9 @@
 import "../../../core/components/chart-grid/ChartGrid.css";
 import "./TimeseriesOverlays.css";
-var canvasPlot = "_17fdb110-3-5-0 _13lzg4k0-3-5-0";
-var crosshairLayout = "_17fdb113-3-5-0 _13lzg4k0-3-5-0";
-var datapointCanvasPlot = "_17fdb111-3-5-0 _13lzg4k0-3-5-0";
-var datapointIndicatorLayout = "_17fdb112-3-5-0 _13lzg4k0-3-5-0";
+var canvasPlot = "_17fdb110-3-6-0 _13lzg4k0-3-6-0";
+var crosshairLayout = "_17fdb113-3-6-0 _13lzg4k0-3-6-0";
+var datapointCanvasPlot = "_17fdb111-3-6-0 _13lzg4k0-3-6-0";
+var datapointIndicatorLayout = "_17fdb112-3-6-0 _13lzg4k0-3-6-0";
 export {
   canvasPlot,
   crosshairLayout,

package/esm/charts/timeseries/components/overlays/TimeseriesOverlays.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/timeseries/components/overlays/TimeseriesOverlays.css.ts"],
-  "sourcesContent": ["import '../../../core/components/chart-grid/ChartGrid.css';\nimport './TimeseriesOverlays.css';\nexport var canvasPlot = '_17fdb110-3-5-0 _13lzg4k0-3-5-0';\nexport var crosshairLayout = '_17fdb113-3-5-0 _13lzg4k0-3-5-0';\nexport var datapointCanvasPlot = '_17fdb111-3-5-0 _13lzg4k0-3-5-0';\nexport var datapointIndicatorLayout = '_17fdb112-3-5-0 _13lzg4k0-3-5-0';"],
+  "sourcesContent": ["import '../../../core/components/chart-grid/ChartGrid.css';\nimport './TimeseriesOverlays.css';\nexport var canvasPlot = '_17fdb110-3-6-0 _13lzg4k0-3-6-0';\nexport var crosshairLayout = '_17fdb113-3-6-0 _13lzg4k0-3-6-0';\nexport var datapointCanvasPlot = '_17fdb111-3-6-0 _13lzg4k0-3-6-0';\nexport var datapointIndicatorLayout = '_17fdb112-3-6-0 _13lzg4k0-3-6-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,aAAa;AACjB,IAAI,kBAAkB;AACtB,IAAI,sBAAsB;AAC1B,IAAI,2BAA2B;",
   "names": []
 }

package/esm/charts/timeseries/components/thresholds/ThresholdIndicators.css

@@ -1,6 +1,6 @@
-._9p8qi20-3-5-0 {
+._9p8qi20-3-6-0 {
   z-index: 2;
 }
-._9p8qi21-3-5-0 {
+._9p8qi21-3-6-0 {
   z-index: 0;
 }

package/esm/charts/timeseries/components/thresholds/ThresholdIndicators.sty.js

@@ -1,7 +1,7 @@
 import "../../../core/components/chart-grid/ChartGrid.css";
 import "./ThresholdIndicators.css";
-var thresholdPlotLine = "_9p8qi20-3-5-0 _13lzg4k0-3-5-0";
-var thresholdPlotRange = "_9p8qi21-3-5-0 _13lzg4k0-3-5-0";
+var thresholdPlotLine = "_9p8qi20-3-6-0 _13lzg4k0-3-6-0";
+var thresholdPlotRange = "_9p8qi21-3-6-0 _13lzg4k0-3-6-0";
 export {
   thresholdPlotLine,
   thresholdPlotRange

package/esm/charts/timeseries/components/thresholds/ThresholdIndicators.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/timeseries/components/thresholds/ThresholdIndicators.css.ts"],
-  "sourcesContent": ["import '../../../core/components/chart-grid/ChartGrid.css';\nimport './ThresholdIndicators.css';\nexport var thresholdPlotLine = '_9p8qi20-3-5-0 _13lzg4k0-3-5-0';\nexport var thresholdPlotRange = '_9p8qi21-3-5-0 _13lzg4k0-3-5-0';"],
+  "sourcesContent": ["import '../../../core/components/chart-grid/ChartGrid.css';\nimport './ThresholdIndicators.css';\nexport var thresholdPlotLine = '_9p8qi20-3-6-0 _13lzg4k0-3-6-0';\nexport var thresholdPlotRange = '_9p8qi21-3-6-0 _13lzg4k0-3-6-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,oBAAoB;AACxB,IAAI,qBAAqB;",
   "names": []
 }

package/esm/charts/tree-map/components/TreeMapOverlay/TreeMapOverlay.css

@@ -1,4 +1,4 @@
-._1iqz50a0-3-5-0 {
+._1iqz50a0-3-6-0 {
   position: absolute;
   top: 0;
   left: 0;

package/esm/charts/tree-map/components/TreeMapOverlay/TreeMapOverlay.sty.js

@@ -1,5 +1,5 @@
 import "./TreeMapOverlay.css";
-var container = "_1iqz50a0-3-5-0";
+var container = "_1iqz50a0-3-6-0";
 export {
   container
 };

package/esm/charts/tree-map/components/TreeMapOverlay/TreeMapOverlay.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/tree-map/components/TreeMapOverlay/TreeMapOverlay.css.ts"],
-  "sourcesContent": ["import './TreeMapOverlay.css';\nexport var container = '_1iqz50a0-3-5-0';"],
+  "sourcesContent": ["import './TreeMapOverlay.css';\nexport var container = '_1iqz50a0-3-6-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,YAAY;",
   "names": []
 }

package/esm/charts/tree-map/components/TreeMapTooltip/TreeMapOverlayTooltip.js

@@ -2,14 +2,25 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useTooltipData } from "../../../core/components/overlay-tooltip/_to-be-removed/utils.js";
 import { OverlayTooltip } from "../../../core/components/overlay-tooltip/OverlayTooltip.js";
 import { isTooltipDataEmpty } from "../../../core/components/overlay-tooltip/utils.js";
+import { useTreeMapCustomTooltip } from "../../hooks/useTreeMapCustomTooltip.js";
 import { useTruncationMode } from "../../hooks/useTruncationMode.js";
 const TreeMapOverlayTooltip = (props) => {
   const data = useTooltipData().data;
   const truncationMode = useTruncationMode();
-  if (isTooltipDataEmpty(data)) {
+  const customTooltip = useTreeMapCustomTooltip();
+  if (customTooltip?.hidden || isTooltipDataEmpty(data)) {
     return null;
   }
   const series = data.series[0];
+  const meta = data.metadata;
+  if (customTooltip?.template) {
+    const payload = {
+      hierarchyPath: meta.path ?? [series.name],
+      value: meta.value,
+      childrenCount: meta.children
+    };
+    return /* @__PURE__ */ jsx(OverlayTooltip, { legacyTemplate: customTooltip.template(payload) });
+  }
   return /* @__PURE__ */ jsxs(OverlayTooltip, { truncation: truncationMode, children: [
     /* @__PURE__ */ jsx(OverlayTooltip.Header, { header1: data.header1 }),
     /* @__PURE__ */ jsx(

package/esm/charts/tree-map/components/TreeMapTooltip/TreeMapOverlayTooltip.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/tree-map/components/TreeMapTooltip/TreeMapOverlayTooltip.tsx"],
-  "sourcesContent": ["import { useTooltipData } from '../../../core/components/overlay-tooltip/_to-be-removed/utils.js';\nimport { OverlayTooltip } from '../../../core/components/overlay-tooltip/OverlayTooltip.js';\nimport type { Data } from '../../../core/components/overlay-tooltip/types.js';\nimport { isTooltipDataEmpty } from '../../../core/components/overlay-tooltip/utils.js';\nimport type { SeriesActionsTemplate } from '../../../core/types/series-actions-template.js';\nimport { useTruncationMode } from '../../hooks/useTruncationMode.js';\n\ntype SeriesData = Data['series'][number];\n\ninterface TreeMapOverlayTooltipProps {\n  actionsForItem?: (\n    item: SeriesData,\n  ) => (() => SeriesActionsTemplate) | undefined;\n}\n\nexport const TreeMapOverlayTooltip = (props: TreeMapOverlayTooltipProps) => {\n  const data = useTooltipData().data;\n  const truncationMode = useTruncationMode();\n\n  if (isTooltipDataEmpty(data)) {\n    return null;\n  }\n\n  const series = data.series[0];\n\n  return (\n    <OverlayTooltip truncation={truncationMode}>\n      <OverlayTooltip.Header header1={data.header1} />\n      <OverlayTooltip.SeriesItem\n        name={series.name}\n        value={series.value}\n        color={series.color}\n        actions={props.actionsForItem?.(series)}\n      />\n    </OverlayTooltip>\n  );\n};\n\nTreeMapOverlayTooltip['displayName'] = 'TreeMapOverlayTooltip';\n"],
-  "mappings": "AA0BI,SACE,KADF;AA1BJ,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAE/B,SAAS,0BAA0B;AAEnC,SAAS,yBAAyB;AAU3B,MAAM,wBAAwB,CAAC,UAAsC;AAC1E,QAAM,OAAO,eAAe,EAAE;AAC9B,QAAM,iBAAiB,kBAAkB;AAEzC,MAAI,mBAAmB,IAAI,GAAG;AAC5B,WAAO;AAAA,EACT;AAEA,QAAM,SAAS,KAAK,OAAO,CAAC;AAE5B,SACE,qBAAC,kBAAe,YAAY,gBAC1B;AAAA,wBAAC,eAAe,QAAf,EAAsB,SAAS,KAAK,SAAS;AAAA,IAC9C;AAAA,MAAC,eAAe;AAAA,MAAf;AAAA,QACC,MAAM,OAAO;AAAA,QACb,OAAO,OAAO;AAAA,QACd,OAAO,OAAO;AAAA,QACd,SAAS,MAAM,iBAAiB,MAAM;AAAA;AAAA,IACxC;AAAA,KACF;AAEJ;AAEA,sBAAsB,aAAa,IAAI;",
+  "sourcesContent": ["import { useTooltipData } from '../../../core/components/overlay-tooltip/_to-be-removed/utils.js';\nimport { OverlayTooltip } from '../../../core/components/overlay-tooltip/OverlayTooltip.js';\nimport type { Data } from '../../../core/components/overlay-tooltip/types.js';\nimport { isTooltipDataEmpty } from '../../../core/components/overlay-tooltip/utils.js';\nimport type { SeriesActionsTemplate } from '../../../core/types/series-actions-template.js';\nimport { useTreeMapCustomTooltip } from '../../hooks/useTreeMapCustomTooltip.js';\nimport { useTruncationMode } from '../../hooks/useTruncationMode.js';\nimport { TreeMapTooltipPayload } from '../../types/treemap-chart.config.js';\n\ntype SeriesData = Data['series'][number];\n\ntype TreeMapMetadata = {\n  id: string;\n  value: number;\n  path?: string[];\n  children?: string[];\n};\n\ninterface TreeMapOverlayTooltipProps {\n  actionsForItem?: (\n    item: SeriesData,\n  ) => (() => SeriesActionsTemplate) | undefined;\n}\n\nexport const TreeMapOverlayTooltip = (props: TreeMapOverlayTooltipProps) => {\n  const data = useTooltipData().data;\n  const truncationMode = useTruncationMode();\n  const customTooltip = useTreeMapCustomTooltip();\n\n  if (customTooltip?.hidden || isTooltipDataEmpty(data)) {\n    return null;\n  }\n\n  const series = data.series[0];\n  const meta = data.metadata as TreeMapMetadata;\n  if (customTooltip?.template) {\n    const payload: TreeMapTooltipPayload = {\n      hierarchyPath: meta.path ?? [series.name as string],\n      value: meta.value,\n      childrenCount: meta.children,\n    };\n    return <OverlayTooltip legacyTemplate={customTooltip.template(payload)} />;\n  }\n\n  return (\n    <OverlayTooltip truncation={truncationMode}>\n      <OverlayTooltip.Header header1={data.header1} />\n      <OverlayTooltip.SeriesItem\n        name={series.name}\n        value={series.value}\n        color={series.color}\n        actions={props.actionsForItem?.(series)}\n      />\n    </OverlayTooltip>\n  );\n};\n\nTreeMapOverlayTooltip['displayName'] = 'TreeMapOverlayTooltip';\n"],
+  "mappings": "AAyCW,cAIP,YAJO;AAzCX,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAE/B,SAAS,0BAA0B;AAEnC,SAAS,+BAA+B;AACxC,SAAS,yBAAyB;AAkB3B,MAAM,wBAAwB,CAAC,UAAsC;AAC1E,QAAM,OAAO,eAAe,EAAE;AAC9B,QAAM,iBAAiB,kBAAkB;AACzC,QAAM,gBAAgB,wBAAwB;AAE9C,MAAI,eAAe,UAAU,mBAAmB,IAAI,GAAG;AACrD,WAAO;AAAA,EACT;AAEA,QAAM,SAAS,KAAK,OAAO,CAAC;AAC5B,QAAM,OAAO,KAAK;AAClB,MAAI,eAAe,UAAU;AAC3B,UAAM,UAAiC;AAAA,MACrC,eAAe,KAAK,QAAQ,CAAC,OAAO,IAAc;AAAA,MAClD,OAAO,KAAK;AAAA,MACZ,eAAe,KAAK;AAAA,IACtB;AACA,WAAO,oBAAC,kBAAe,gBAAgB,cAAc,SAAS,OAAO,GAAG;AAAA,EAC1E;AAEA,SACE,qBAAC,kBAAe,YAAY,gBAC1B;AAAA,wBAAC,eAAe,QAAf,EAAsB,SAAS,KAAK,SAAS;AAAA,IAC9C;AAAA,MAAC,eAAe;AAAA,MAAf;AAAA,QACC,MAAM,OAAO;AAAA,QACb,OAAO,OAAO;AAAA,QACd,OAAO,OAAO;AAAA,QACd,SAAS,MAAM,iBAAiB,MAAM;AAAA;AAAA,IACxC;AAAA,KACF;AAEJ;AAEA,sBAAsB,aAAa,IAAI;",
   "names": []
 }

package/esm/charts/tree-map/components/canvas/TreeMapSquareRenderer.js

@@ -117,7 +117,7 @@ function TreeMapSquareRenderer(props) {
           padding,
           labelWidth
         );
-        const withEllipsis = labelFit === LABEL_OPTIONS.Ellipsis;
+        const withEllipsis = labelFit === LABEL_OPTIONS.Ellipsis || LABEL_OPTIONS.EllipsisWithValue;
         const maxWidth = width - padding;
         const truncatedName = withEllipsis ? truncateString(
           name,
@@ -130,7 +130,8 @@ function TreeMapSquareRenderer(props) {
         const labels = getAppliedLabels(labelFit, displayedName, value);
         const { centerX, centerY } = getRectCenter(width, height);
         labels.forEach((label, i, array) => {
-          if (i === 1) {
+          const isValueLabel = i === 1;
+          if (isValueLabel) {
             ctx.font = getFontDetails(
               boldFontWeight,
               clusterFontSize,

package/esm/charts/tree-map/components/canvas/TreeMapSquareRenderer.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/tree-map/components/canvas/TreeMapSquareRenderer.tsx"],
-  "sourcesContent": ["import { useCallback } from 'react';\n\nimport {\n  getAppliedLabels,\n  getLabelFit,\n  getLabelWidth,\n  getOffsetY,\n  getRectCenter,\n} from './utils/canvas-label-utils.js';\nimport { ELLIPSIS_CHARACTER } from '../../../../typography/utils.js';\nimport { useCanvas } from '../../../core/components/canvas/hooks/useCanvas.js';\nimport { getCanvasColor } from '../../../core/components/canvas/utils/canvas-color.js';\nimport {\n  charsFontWidth12pixelsSize400Map,\n  charsFontWidth12pixelsSize500Map,\n} from '../../../core/components/text-ellipsis/chars-font-width-map.js';\nimport {\n  calculateWidth,\n  truncateString,\n} from '../../../core/components/text-ellipsis/truncate-string.js';\nimport { getColorByContrast } from '../../../core/utils/color-contrast.js';\nimport { getFontDetails } from '../../../core/utils/get-font-details.js';\nimport {\n  DEFAULT_CLUSTER_LABEL_FONTSIZE,\n  DEFAULT_CLUSTER_LABEL_LINE_HEIGHT,\n  DEFAULT_FONT_WEIGHT,\n  DEFAULT_LABEL_ALIGN,\n  DEFAULT_LABEL_BASELINE,\n  DEFAULT_LABEL_FONTSIZE,\n  DEFAULT_LABEL_LINE_HEIGHT,\n  DEFAULT_LABEL_PADDING,\n  INCREASED_FONT_WEIGHT,\n  LABEL_OPTIONS,\n  RECT_BORDER_RADIUS,\n} from '../../constants.js';\nimport { useTruncationMode } from '../../hooks/useTruncationMode.js';\n\ninterface TreeMapSquareRendererProps {\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n  color: string;\n  opacity: number;\n  name: string;\n  value: string;\n  skipDrawing?: boolean;\n  withLabel?: boolean;\n  withValueOnly?: boolean;\n}\n\nconst textAlign = DEFAULT_LABEL_ALIGN;\nconst textBaseline = DEFAULT_LABEL_BASELINE;\nconst fontSize = DEFAULT_LABEL_FONTSIZE;\nconst fontWeight = DEFAULT_FONT_WEIGHT;\nconst padding = DEFAULT_LABEL_PADDING;\nconst lineHeight = DEFAULT_LABEL_LINE_HEIGHT;\nconst boldFontWeight = INCREASED_FONT_WEIGHT;\nconst clusterFontSize = DEFAULT_CLUSTER_LABEL_FONTSIZE;\nconst clusterLineHeight = DEFAULT_CLUSTER_LABEL_LINE_HEIGHT;\n\nexport function TreeMapSquareRenderer(props: TreeMapSquareRendererProps) {\n  const {\n    x,\n    y,\n    width,\n    height,\n    color,\n    opacity,\n    name,\n    value,\n    skipDrawing = false,\n    withLabel = false,\n    withValueOnly = false,\n  } = props;\n\n  const truncationMode = useTruncationMode();\n\n  const draw = useCallback(\n    (ctx: CanvasRenderingContext2D) => {\n      if (skipDrawing) {\n        return false;\n      }\n      if (withLabel) {\n        ctx.textAlign = textAlign;\n        ctx.textBaseline = textBaseline;\n      }\n      ctx.moveTo(x, y);\n      ctx.beginPath();\n      ctx.globalAlpha = opacity;\n\n      ctx.fillStyle = getCanvasColor(color);\n      ctx.filter = 'none';\n      ctx.roundRect(x, y, width, height, RECT_BORDER_RADIUS);\n      ctx.fill();\n\n      if (withLabel && withValueOnly) {\n        ctx.fillStyle = getColorByContrast(ctx.fillStyle);\n        ctx.font = getFontDetails(\n          boldFontWeight,\n          clusterFontSize,\n          clusterLineHeight,\n        );\n\n        const maxWidth = width - padding * 2;\n        const minHeight = padding * 2 + clusterFontSize;\n        const { centerX, centerY } = getRectCenter(width, height);\n\n        if (height >= minHeight && maxWidth > 0) {\n          const truncatedValue = truncateString(\n            value,\n            maxWidth,\n            charsFontWidth12pixelsSize500Map,\n            truncationMode,\n          );\n          ctx.fillText(truncatedValue, x + centerX, y + centerY);\n        }\n      }\n\n      if (withLabel && !withValueOnly) {\n        ctx.fillStyle = getColorByContrast(ctx.fillStyle);\n\n        ctx.font = getFontDetails(fontWeight, fontSize, lineHeight);\n        const nameWidth = calculateWidth(\n          name,\n          charsFontWidth12pixelsSize400Map,\n        );\n\n        ctx.font = getFontDetails(\n          boldFontWeight,\n          clusterFontSize,\n          clusterLineHeight,\n        );\n\n        const labelWidth = getLabelWidth(\n          nameWidth,\n          value,\n          charsFontWidth12pixelsSize500Map,\n        );\n        const labelFit = getLabelFit(\n          height,\n          width,\n          fontSize,\n          padding,\n          labelWidth,\n        );\n\n        const withEllipsis = labelFit === LABEL_OPTIONS.Ellipsis;\n        const maxWidth = width - padding;\n\n        const truncatedName = withEllipsis\n          ? truncateString(\n              name,\n              maxWidth,\n              charsFontWidth12pixelsSize400Map,\n              truncationMode,\n              'start',\n            )\n          : name;\n\n        const displayedName =\n          truncatedName === ELLIPSIS_CHARACTER ? '' : truncatedName;\n\n        const labels = getAppliedLabels(labelFit, displayedName, value);\n\n        const { centerX, centerY } = getRectCenter(width, height);\n\n        labels.forEach((label: string, i: number, array) => {\n          // increaded - bold text for the 'value'\n          if (i === 1) {\n            ctx.font = getFontDetails(\n              boldFontWeight,\n              clusterFontSize,\n              clusterLineHeight,\n            );\n          } else {\n            // regular text for the 'name'\n            ctx.font = getFontDetails(fontWeight, fontSize, lineHeight);\n          }\n          const offsetY = getOffsetY(array, i, fontSize);\n          ctx.fillText(label, x + centerX, y + centerY + offsetY);\n        });\n      }\n\n      return false;\n    },\n    [\n      color,\n      height,\n      name,\n      opacity,\n      skipDrawing,\n      truncationMode,\n      value,\n      width,\n      withLabel,\n      withValueOnly,\n      x,\n      y,\n    ],\n  );\n\n  useCanvas('treemap-square', draw);\n\n  return null;\n}\n\nTreeMapSquareRenderer['displayName'] = 'TreeMapSquareRenderer';\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useCallback } from 'react';\n\nimport {\n  getAppliedLabels,\n  getLabelFit,\n  getLabelWidth,\n  getOffsetY,\n  getRectCenter,\n} from './utils/canvas-label-utils.js';\nimport { ELLIPSIS_CHARACTER } from '../../../../typography/utils.js';\nimport { useCanvas } from '../../../core/components/canvas/hooks/useCanvas.js';\nimport { getCanvasColor } from '../../../core/components/canvas/utils/canvas-color.js';\nimport {\n  charsFontWidth12pixelsSize400Map,\n  charsFontWidth12pixelsSize500Map,\n} from '../../../core/components/text-ellipsis/chars-font-width-map.js';\nimport {\n  calculateWidth,\n  truncateString,\n} from '../../../core/components/text-ellipsis/truncate-string.js';\nimport { getColorByContrast } from '../../../core/utils/color-contrast.js';\nimport { getFontDetails } from '../../../core/utils/get-font-details.js';\nimport {\n  DEFAULT_CLUSTER_LABEL_FONTSIZE,\n  DEFAULT_CLUSTER_LABEL_LINE_HEIGHT,\n  DEFAULT_FONT_WEIGHT,\n  DEFAULT_LABEL_ALIGN,\n  DEFAULT_LABEL_BASELINE,\n  DEFAULT_LABEL_FONTSIZE,\n  DEFAULT_LABEL_LINE_HEIGHT,\n  DEFAULT_LABEL_PADDING,\n  INCREASED_FONT_WEIGHT,\n  LABEL_OPTIONS,\n  RECT_BORDER_RADIUS,\n} from '../../constants.js';\nimport { useTruncationMode } from '../../hooks/useTruncationMode.js';\n\ninterface TreeMapSquareRendererProps {\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n  color: string;\n  opacity: number;\n  name: string;\n  value: string;\n  skipDrawing?: boolean;\n  withLabel?: boolean;\n  withValueOnly?: boolean;\n}\n\nconst textAlign = DEFAULT_LABEL_ALIGN;\nconst textBaseline = DEFAULT_LABEL_BASELINE;\nconst fontSize = DEFAULT_LABEL_FONTSIZE;\nconst fontWeight = DEFAULT_FONT_WEIGHT;\nconst padding = DEFAULT_LABEL_PADDING;\nconst lineHeight = DEFAULT_LABEL_LINE_HEIGHT;\nconst boldFontWeight = INCREASED_FONT_WEIGHT;\nconst clusterFontSize = DEFAULT_CLUSTER_LABEL_FONTSIZE;\nconst clusterLineHeight = DEFAULT_CLUSTER_LABEL_LINE_HEIGHT;\n\nexport function TreeMapSquareRenderer(props: TreeMapSquareRendererProps) {\n  const {\n    x,\n    y,\n    width,\n    height,\n    color,\n    opacity,\n    name,\n    value,\n    skipDrawing = false,\n    withLabel = false,\n    withValueOnly = false,\n  } = props;\n\n  const truncationMode = useTruncationMode();\n\n  const draw = useCallback(\n    (ctx: CanvasRenderingContext2D) => {\n      if (skipDrawing) {\n        return false;\n      }\n      if (withLabel) {\n        ctx.textAlign = textAlign;\n        ctx.textBaseline = textBaseline;\n      }\n      ctx.moveTo(x, y);\n      ctx.beginPath();\n      ctx.globalAlpha = opacity;\n\n      ctx.fillStyle = getCanvasColor(color);\n      ctx.filter = 'none';\n      ctx.roundRect(x, y, width, height, RECT_BORDER_RADIUS);\n      ctx.fill();\n\n      if (withLabel && withValueOnly) {\n        ctx.fillStyle = getColorByContrast(ctx.fillStyle);\n        ctx.font = getFontDetails(\n          boldFontWeight,\n          clusterFontSize,\n          clusterLineHeight,\n        );\n\n        const maxWidth = width - padding * 2;\n        const minHeight = padding * 2 + clusterFontSize;\n        const { centerX, centerY } = getRectCenter(width, height);\n\n        if (height >= minHeight && maxWidth > 0) {\n          const truncatedValue = truncateString(\n            value,\n            maxWidth,\n            charsFontWidth12pixelsSize500Map,\n            truncationMode,\n          );\n          ctx.fillText(truncatedValue, x + centerX, y + centerY);\n        }\n      }\n\n      if (withLabel && !withValueOnly) {\n        ctx.fillStyle = getColorByContrast(ctx.fillStyle);\n\n        ctx.font = getFontDetails(fontWeight, fontSize, lineHeight);\n        const nameWidth = calculateWidth(\n          name,\n          charsFontWidth12pixelsSize400Map,\n        );\n\n        ctx.font = getFontDetails(\n          boldFontWeight,\n          clusterFontSize,\n          clusterLineHeight,\n        );\n\n        const labelWidth = getLabelWidth(\n          nameWidth,\n          value,\n          charsFontWidth12pixelsSize500Map,\n        );\n        const labelFit = getLabelFit(\n          height,\n          width,\n          fontSize,\n          padding,\n          labelWidth,\n        );\n\n        const withEllipsis =\n          labelFit === LABEL_OPTIONS.Ellipsis ||\n          LABEL_OPTIONS.EllipsisWithValue;\n        const maxWidth = width - padding;\n\n        const truncatedName = withEllipsis\n          ? truncateString(\n              name,\n              maxWidth,\n              charsFontWidth12pixelsSize400Map,\n              truncationMode,\n              'start',\n            )\n          : name;\n\n        const displayedName =\n          truncatedName === ELLIPSIS_CHARACTER ? '' : truncatedName;\n\n        const labels = getAppliedLabels(labelFit, displayedName, value);\n\n        const { centerX, centerY } = getRectCenter(width, height);\n\n        labels.forEach((label: string, i: number, array) => {\n          const isValueLabel = i === 1;\n\n          // increased - bold text for the 'value'\n          if (isValueLabel) {\n            ctx.font = getFontDetails(\n              boldFontWeight,\n              clusterFontSize,\n              clusterLineHeight,\n            );\n          } else {\n            // regular text for the 'name'\n            ctx.font = getFontDetails(fontWeight, fontSize, lineHeight);\n          }\n          const offsetY = getOffsetY(array, i, fontSize);\n          ctx.fillText(label, x + centerX, y + centerY + offsetY);\n        });\n      }\n\n      return false;\n    },\n    [\n      color,\n      height,\n      name,\n      opacity,\n      skipDrawing,\n      truncationMode,\n      value,\n      width,\n      withLabel,\n      withValueOnly,\n      x,\n      y,\n    ],\n  );\n\n  useCanvas('treemap-square', draw);\n\n  return null;\n}\n\nTreeMapSquareRenderer['displayName'] = 'TreeMapSquareRenderer';\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/charts/tree-map/components/canvas/utils/canvas-label-utils.js

@@ -3,7 +3,7 @@ import { LABEL_OPTIONS } from "../../../constants.js";
 const LINE_SPACING = 2;
 const FONT_SIZE_DIFFERENCE = 1;
 const getLabelFit = (height, width, fontSize, padding, labelWidth) => {
-  const { nameWidth, nameValueWidth, multiLineWidth } = labelWidth;
+  const { nameWidth, nameValueWidth, valueWidth, multiLineWidth } = labelWidth;
   const lineSpacing = 2;
   const paddingSum = 2 * padding;
   const availableWidth = width - paddingSum;
@@ -23,7 +23,8 @@ const getLabelFit = (height, width, fontSize, padding, labelWidth) => {
   }
   const fitEllipsis = height >= minInlineHeight && availableWidth < nameWidth;
   if (fitEllipsis) {
-    return LABEL_OPTIONS.Ellipsis;
+    const fitAtLeastValue = height >= minMultiLineHeight && availableWidth >= valueWidth;
+    return fitAtLeastValue ? LABEL_OPTIONS.EllipsisWithValue : LABEL_OPTIONS.Ellipsis;
   }
   return LABEL_OPTIONS.Fallback;
 };
@@ -32,12 +33,10 @@ const getRectCenter = (width, height) => ({
   centerY: height / 2
 });
 const getLabelWidth = (nameWidth, value, charWidthMap) => {
+  const valueWidth = calculateWidth(value, charWidthMap);
   const nameValueWidth = nameWidth + calculateWidth(` ${value}`, charWidthMap);
-  const multiLineWidth = Math.max(
-    nameWidth,
-    calculateWidth(value, charWidthMap)
-  );
-  return { nameWidth, nameValueWidth, multiLineWidth };
+  const multiLineWidth = Math.max(nameWidth, valueWidth);
+  return { nameWidth, valueWidth, nameValueWidth, multiLineWidth };
 };
 const getAppliedLabels = (labelFit, name, value) => {
   const labelMap = {
@@ -45,6 +44,7 @@ const getAppliedLabels = (labelFit, name, value) => {
     inline: [`${name} ${value}`],
     name: [name],
     ellipsis: [name],
+    "ellipsis-with-value": [name, value],
     fallback: []
   };
   return labelMap[labelFit];

package/esm/charts/tree-map/components/canvas/utils/canvas-label-utils.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/tree-map/components/canvas/utils/canvas-label-utils.ts"],
-  "sourcesContent": ["import type { FontWidthMap } from '../../../../core/components/text-ellipsis/chars-font-width-map.js';\nimport { calculateWidth } from '../../../../core/components/text-ellipsis/truncate-string.js';\nimport { LABEL_OPTIONS } from '../../../constants.js';\nimport type { LabelOptions } from '../../../types/canvas.js';\n\ntype LabelWidthOptions = {\n  nameWidth: number;\n  nameValueWidth: number;\n  multiLineWidth: number;\n};\n\nexport const LINE_SPACING = 2;\nexport const FONT_SIZE_DIFFERENCE = 1;\n\n/**\n * Returns the labelOption that fits the current node\n * @internal\n * @param height - height of the node.\n * @param width - width of the node.\n * @param fontSize - font size of the label.\n * @param padding - padding around the label\n * @param labelWidth - object containing width for each labelFit scenario,\n */\nexport const getLabelFit = (\n  height: number,\n  width: number,\n  fontSize: number,\n  padding: number,\n  labelWidth: LabelWidthOptions,\n) => {\n  const { nameWidth, nameValueWidth, multiLineWidth } = labelWidth;\n  const lineSpacing = 2;\n  const paddingSum = 2 * padding;\n  const availableWidth = width - paddingSum;\n  const minInlineHeight = paddingSum + fontSize;\n  const minMultiLineHeight = paddingSum + fontSize * 2 + lineSpacing;\n\n  const fitMultiLine =\n    height >= minMultiLineHeight && availableWidth >= multiLineWidth;\n  if (fitMultiLine) {\n    return LABEL_OPTIONS.Multi;\n  }\n\n  const fitInline =\n    height >= minInlineHeight && availableWidth >= nameValueWidth;\n  if (fitInline) {\n    return LABEL_OPTIONS.Inline;\n  }\n\n  const fitName = height >= minInlineHeight && availableWidth >= nameWidth;\n  if (fitName) {\n    return LABEL_OPTIONS.Name;\n  }\n\n  const fitEllipsis = height >= minInlineHeight && availableWidth < nameWidth;\n  if (fitEllipsis) {\n    return LABEL_OPTIONS.Ellipsis;\n  }\n\n  return LABEL_OPTIONS.Fallback;\n};\n\n/**\n * Returns the center of the node.\n * @internal\n * @param height - height of the node.\n * @param width - width of the node.\n */\nexport const getRectCenter = (width: number, height: number) => ({\n  centerX: width / 2,\n  centerY: height / 2,\n});\n\n/**\n * Returns the object containing width for each labelFit scenario,\n * using the character width map for estimated measurements.\n * @internal\n * @param nameWidth - pre-calculated name width.\n * @param value - current node value.\n * @param charWidthMap - character width map for width estimation.\n */\nexport const getLabelWidth = (\n  nameWidth: number,\n  value: string,\n  charWidthMap: FontWidthMap,\n) => {\n  const nameValueWidth = nameWidth + calculateWidth(` ${value}`, charWidthMap);\n  const multiLineWidth = Math.max(\n    nameWidth,\n    calculateWidth(value, charWidthMap),\n  );\n\n  return { nameWidth, nameValueWidth, multiLineWidth };\n};\n\n/**\n * Returns the array containing the label items for a given node.\n * Depending on the available space labels are shown in 2 lines or in 1 line or with name only.\n * @internal\n * @param labelFit - current labelFit scenario\n * @param name - current node name.\n * @param value - current node value.\n */\nexport const getAppliedLabels = (\n  labelFit: LabelOptions,\n  name: string,\n  value: string,\n) => {\n  const labelMap = {\n    multi: [name, value],\n    inline: [`${name} ${value}`],\n    name: [name],\n    ellipsis: [name],\n    fallback: [],\n  };\n\n  return labelMap[labelFit];\n};\n\n/**\n * Returns the vertical offset of the labels.\n * @internal\n * @param labels - array of label for the given node.\n * @param labelIndex - current index of the labels array item.\n * @param fontSize - font size value.\n */\nexport const getOffsetY = (\n  labels: string[],\n  labelIndex: number,\n  fontSize: number,\n) => {\n  const downOffsetY = Math.round(fontSize / 2) + LINE_SPACING;\n  const upOffsetY = -1 * downOffsetY - FONT_SIZE_DIFFERENCE;\n  const isMultiLine = labels.length > 1;\n  return isMultiLine ? (labelIndex === 0 ? upOffsetY : downOffsetY) : 0;\n};\n"],
-  "mappings": "AACA,SAAS,sBAAsB;AAC/B,SAAS,qBAAqB;AASvB,MAAM,eAAe;AACrB,MAAM,uBAAuB;AAW7B,MAAM,cAAc,CACzB,QACA,OACA,UACA,SACA,eACG;AACH,QAAM,EAAE,WAAW,gBAAgB,eAAe,IAAI;AACtD,QAAM,cAAc;AACpB,QAAM,aAAa,IAAI;AACvB,QAAM,iBAAiB,QAAQ;AAC/B,QAAM,kBAAkB,aAAa;AACrC,QAAM,qBAAqB,aAAa,WAAW,IAAI;AAEvD,QAAM,eACJ,UAAU,sBAAsB,kBAAkB;AACpD,MAAI,cAAc;AAChB,WAAO,cAAc;AAAA,EACvB;AAEA,QAAM,YACJ,UAAU,mBAAmB,kBAAkB;AACjD,MAAI,WAAW;AACb,WAAO,cAAc;AAAA,EACvB;AAEA,QAAM,UAAU,UAAU,mBAAmB,kBAAkB;AAC/D,MAAI,SAAS;AACX,WAAO,cAAc;AAAA,EACvB;AAEA,QAAM,cAAc,UAAU,mBAAmB,iBAAiB;AAClE,MAAI,aAAa;AACf,WAAO,cAAc;AAAA,EACvB;AAEA,SAAO,cAAc;AACvB;AAQO,MAAM,gBAAgB,CAAC,OAAe,YAAoB;AAAA,EAC/D,SAAS,QAAQ;AAAA,EACjB,SAAS,SAAS;AACpB;AAUO,MAAM,gBAAgB,CAC3B,WACA,OACA,iBACG;AACH,QAAM,iBAAiB,YAAY,eAAe,IAAI,KAAK,IAAI,YAAY;AAC3E,QAAM,iBAAiB,KAAK;AAAA,IAC1B;AAAA,IACA,eAAe,OAAO,YAAY;AAAA,EACpC;AAEA,SAAO,EAAE,WAAW,gBAAgB,eAAe;AACrD;AAUO,MAAM,mBAAmB,CAC9B,UACA,MACA,UACG;AACH,QAAM,WAAW;AAAA,IACf,OAAO,CAAC,MAAM,KAAK;AAAA,IACnB,QAAQ,CAAC,GAAG,IAAI,IAAI,KAAK,EAAE;AAAA,IAC3B,MAAM,CAAC,IAAI;AAAA,IACX,UAAU,CAAC,IAAI;AAAA,IACf,UAAU,CAAC;AAAA,EACb;AAEA,SAAO,SAAS,QAAQ;AAC1B;AASO,MAAM,aAAa,CACxB,QACA,YACA,aACG;AACH,QAAM,cAAc,KAAK,MAAM,WAAW,CAAC,IAAI;AAC/C,QAAM,YAAY,KAAK,cAAc;AACrC,QAAM,cAAc,OAAO,SAAS;AACpC,SAAO,cAAe,eAAe,IAAI,YAAY,cAAe;AACtE;",
+  "sourcesContent": ["import type { FontWidthMap } from '../../../../core/components/text-ellipsis/chars-font-width-map.js';\nimport { calculateWidth } from '../../../../core/components/text-ellipsis/truncate-string.js';\nimport { LABEL_OPTIONS } from '../../../constants.js';\nimport type { LabelOptions } from '../../../types/canvas.js';\n\ntype LabelWidthOptions = {\n  nameWidth: number;\n  valueWidth: number;\n  nameValueWidth: number;\n  multiLineWidth: number;\n};\n\nexport const LINE_SPACING = 2;\nexport const FONT_SIZE_DIFFERENCE = 1;\n\n/**\n * Returns the labelOption that fits the current node\n * @internal\n * @param height - height of the node.\n * @param width - width of the node.\n * @param fontSize - font size of the label.\n * @param padding - padding around the label\n * @param labelWidth - object containing width for each labelFit scenario,\n */\nexport const getLabelFit = (\n  height: number,\n  width: number,\n  fontSize: number,\n  padding: number,\n  labelWidth: LabelWidthOptions,\n) => {\n  const { nameWidth, nameValueWidth, valueWidth, multiLineWidth } = labelWidth;\n  const lineSpacing = 2;\n  const paddingSum = 2 * padding;\n  const availableWidth = width - paddingSum;\n  const minInlineHeight = paddingSum + fontSize;\n  const minMultiLineHeight = paddingSum + fontSize * 2 + lineSpacing;\n\n  const fitMultiLine =\n    height >= minMultiLineHeight && availableWidth >= multiLineWidth;\n  if (fitMultiLine) {\n    return LABEL_OPTIONS.Multi;\n  }\n\n  const fitInline =\n    height >= minInlineHeight && availableWidth >= nameValueWidth;\n  if (fitInline) {\n    return LABEL_OPTIONS.Inline;\n  }\n\n  const fitName = height >= minInlineHeight && availableWidth >= nameWidth;\n  if (fitName) {\n    return LABEL_OPTIONS.Name;\n  }\n\n  const fitEllipsis = height >= minInlineHeight && availableWidth < nameWidth;\n  if (fitEllipsis) {\n    const fitAtLeastValue =\n      height >= minMultiLineHeight && availableWidth >= valueWidth;\n\n    return fitAtLeastValue\n      ? LABEL_OPTIONS.EllipsisWithValue\n      : LABEL_OPTIONS.Ellipsis;\n  }\n\n  return LABEL_OPTIONS.Fallback;\n};\n\n/**\n * Returns the center of the node.\n * @internal\n * @param height - height of the node.\n * @param width - width of the node.\n */\nexport const getRectCenter = (width: number, height: number) => ({\n  centerX: width / 2,\n  centerY: height / 2,\n});\n\n/**\n * Returns the object containing width for each labelFit scenario,\n * using the character width map for estimated measurements.\n * @internal\n * @param nameWidth - pre-calculated name width.\n * @param value - current node value.\n * @param charWidthMap - character width map for width estimation.\n */\nexport const getLabelWidth = (\n  nameWidth: number,\n  value: string,\n  charWidthMap: FontWidthMap,\n) => {\n  const valueWidth = calculateWidth(value, charWidthMap);\n  const nameValueWidth = nameWidth + calculateWidth(` ${value}`, charWidthMap);\n  const multiLineWidth = Math.max(nameWidth, valueWidth);\n\n  return { nameWidth, valueWidth, nameValueWidth, multiLineWidth };\n};\n\n/**\n * Returns the array containing the label items for a given node.\n * Depending on the available space labels are shown in 2 lines or in 1 line or with name only.\n * @internal\n * @param labelFit - current labelFit scenario\n * @param name - current node name.\n * @param value - current node value.\n */\nexport const getAppliedLabels = (\n  labelFit: LabelOptions,\n  name: string,\n  value: string,\n) => {\n  const labelMap = {\n    multi: [name, value],\n    inline: [`${name} ${value}`],\n    name: [name],\n    ellipsis: [name],\n    'ellipsis-with-value': [name, value],\n    fallback: [],\n  };\n\n  return labelMap[labelFit];\n};\n\n/**\n * Returns the vertical offset of the labels.\n * @internal\n * @param labels - array of label for the given node.\n * @param labelIndex - current index of the labels array item.\n * @param fontSize - font size value.\n */\nexport const getOffsetY = (\n  labels: string[],\n  labelIndex: number,\n  fontSize: number,\n) => {\n  const downOffsetY = Math.round(fontSize / 2) + LINE_SPACING;\n  const upOffsetY = -1 * downOffsetY - FONT_SIZE_DIFFERENCE;\n  const isMultiLine = labels.length > 1;\n  return isMultiLine ? (labelIndex === 0 ? upOffsetY : downOffsetY) : 0;\n};\n"],
+  "mappings": "AACA,SAAS,sBAAsB;AAC/B,SAAS,qBAAqB;AAUvB,MAAM,eAAe;AACrB,MAAM,uBAAuB;AAW7B,MAAM,cAAc,CACzB,QACA,OACA,UACA,SACA,eACG;AACH,QAAM,EAAE,WAAW,gBAAgB,YAAY,eAAe,IAAI;AAClE,QAAM,cAAc;AACpB,QAAM,aAAa,IAAI;AACvB,QAAM,iBAAiB,QAAQ;AAC/B,QAAM,kBAAkB,aAAa;AACrC,QAAM,qBAAqB,aAAa,WAAW,IAAI;AAEvD,QAAM,eACJ,UAAU,sBAAsB,kBAAkB;AACpD,MAAI,cAAc;AAChB,WAAO,cAAc;AAAA,EACvB;AAEA,QAAM,YACJ,UAAU,mBAAmB,kBAAkB;AACjD,MAAI,WAAW;AACb,WAAO,cAAc;AAAA,EACvB;AAEA,QAAM,UAAU,UAAU,mBAAmB,kBAAkB;AAC/D,MAAI,SAAS;AACX,WAAO,cAAc;AAAA,EACvB;AAEA,QAAM,cAAc,UAAU,mBAAmB,iBAAiB;AAClE,MAAI,aAAa;AACf,UAAM,kBACJ,UAAU,sBAAsB,kBAAkB;AAEpD,WAAO,kBACH,cAAc,oBACd,cAAc;AAAA,EACpB;AAEA,SAAO,cAAc;AACvB;AAQO,MAAM,gBAAgB,CAAC,OAAe,YAAoB;AAAA,EAC/D,SAAS,QAAQ;AAAA,EACjB,SAAS,SAAS;AACpB;AAUO,MAAM,gBAAgB,CAC3B,WACA,OACA,iBACG;AACH,QAAM,aAAa,eAAe,OAAO,YAAY;AACrD,QAAM,iBAAiB,YAAY,eAAe,IAAI,KAAK,IAAI,YAAY;AAC3E,QAAM,iBAAiB,KAAK,IAAI,WAAW,UAAU;AAErD,SAAO,EAAE,WAAW,YAAY,gBAAgB,eAAe;AACjE;AAUO,MAAM,mBAAmB,CAC9B,UACA,MACA,UACG;AACH,QAAM,WAAW;AAAA,IACf,OAAO,CAAC,MAAM,KAAK;AAAA,IACnB,QAAQ,CAAC,GAAG,IAAI,IAAI,KAAK,EAAE;AAAA,IAC3B,MAAM,CAAC,IAAI;AAAA,IACX,UAAU,CAAC,IAAI;AAAA,IACf,uBAAuB,CAAC,MAAM,KAAK;AAAA,IACnC,UAAU,CAAC;AAAA,EACb;AAEA,SAAO,SAAS,QAAQ;AAC1B;AASO,MAAM,aAAa,CACxB,QACA,YACA,aACG;AACH,QAAM,cAAc,KAAK,MAAM,WAAW,CAAC,IAAI;AAC/C,QAAM,YAAY,KAAK,cAAc;AACrC,QAAM,cAAc,OAAO,SAAS;AACpC,SAAO,cAAe,eAAe,IAAI,YAAY,cAAe;AACtE;",
   "names": []
 }

package/esm/charts/tree-map/constants.js

@@ -78,6 +78,7 @@ const DEFAULT_RANGE_LEGEND_COLOR = SCALE_FALLBACK_COLOR;
 const DEFAULT_BORDER_COLOR = Colors.Border.Neutral.Accent;
 const LABEL_OPTIONS = {
   Ellipsis: "ellipsis",
+  EllipsisWithValue: "ellipsis-with-value",
   Fallback: "fallback",
   Inline: "inline",
   Multi: "multi",

package/esm/charts/tree-map/constants.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/charts/tree-map/constants.ts"],
-  "sourcesContent": ["import Colors from '@dynatrace/strato-design-tokens/colors';\n\nimport type { LabelOptions, TextAlign, TextBaseline } from './types/canvas.js';\nimport type { LabelsDisplay, NameAccessor } from './types/treemap.js';\nimport { SCALE_FALLBACK_COLOR } from '../core/constants.js';\nimport type { MappedObject } from '../core/types/helpers/mapped-object.js';\n\nexport const DISPLAY_NAME = 'TreeMap';\n\nexport const LABELS_DISPLAY = Object.freeze<MappedObject<LabelsDisplay>>({\n  All: 'all',\n  Clusters: 'clusters',\n  ClustersAndValues: 'clusters-and-values',\n  Nodes: 'nodes',\n  None: 'none',\n});\n\nexport const TEXT_ALIGN = Object.freeze<MappedObject<TextAlign>>({\n  Center: 'center',\n  End: 'end',\n  Left: 'left',\n  Right: 'right',\n  Start: 'start',\n});\n\nexport const TEXT_BASELINE = Object.freeze<MappedObject<TextBaseline>>({\n  Alphabetic: 'alphabetic',\n  Bottom: 'bottom',\n  Hanging: 'hanging',\n  Ideographic: 'ideographic',\n  Middle: 'middle',\n  Top: 'top',\n});\n\nexport const NAME_ACCESSOR = Object.freeze<MappedObject<NameAccessor>>({\n  Name: 'name',\n  Value: 'value',\n});\n\nexport const CLUSTER_OTHER_ID = 'other-cluster';\nexport const DEFAULT_AGGREGATED_LABEL = 'Other';\nexport const DEFAULT_ROOT_NODE_NAME = 'root node';\nexport const DEFAULT_WIDTH = '100%';\nexport const DEFAULT_HEIGHT = 300;\nexport const DEFAULT_LOADING_STATE = false;\nexport const DEFAULT_CATEGORICAL_COLOR_PALETTE = 'categorical';\nexport const DEFAULT_RANGE_COLOR_PALETTE = 'moss';\nexport const DEFAULT_MIN_NODE_SIZE = 250;\nexport const DEFAULT_MIN_NODE_SIZE_PARENT = 1000;\nexport const DEFAULT_MIN_NODE_SIZE_PARENT_AND_LABELS = 2000;\nexport const DEFAULT_TOOLBAR_PLACEMENT = 'top-right';\n\nexport const DEFAULT_LABELS_DISPLAY: LabelsDisplay = LABELS_DISPLAY.None;\nexport const DEFAULT_LABEL_ALIGN: TextAlign = TEXT_ALIGN.Center;\nexport const DEFAULT_LABEL_BASELINE: TextBaseline = TEXT_BASELINE.Middle;\nexport const DEFAULT_LABEL_FONTSIZE = 12;\nexport const DEFAULT_LABEL_LINE_HEIGHT = 16;\nexport const DEFAULT_CLUSTER_LABEL_FONTSIZE = 12;\nexport const DEFAULT_CLUSTER_LABEL_LINE_HEIGHT = 20;\nexport const CLUSTER_LABEL_OFFSET_Y = DEFAULT_LABEL_FONTSIZE + 2;\nexport const CLUSTER_LABEL_OFFSET_X = 10;\n\nconst CLUSTER_LABEL_PADDING = 4;\nconst CLUSTER_LABEL_PADDING_SUM = CLUSTER_LABEL_PADDING * 2;\nexport const MIN_CLUSTER_HEIGHT =\n  DEFAULT_CLUSTER_LABEL_FONTSIZE + CLUSTER_LABEL_PADDING_SUM;\nexport const DEFAULT_LABEL_PADDING = 4;\n\nexport const LABEL_FONT_FAMILY = 'DT Flow';\nexport const DEFAULT_FONT_WEIGHT = 400;\nexport const INCREASED_FONT_WEIGHT = 500;\nexport const DEFAULT_NAME_ACCESSOR = undefined;\n\nexport const DARK_LABEL_TEXT = '#000000';\nexport const LIGHT_LABEL_TEXT = '#ffffff';\n\nexport const RECT_BORDER_RADIUS = 2;\nexport const RECT_STROKE_WIDTH = 1;\nexport const RECT_CLUSTER_OPACITY = 0.15;\n\nexport const NODE_LEAF_PADDING = 1; // sets leaf node padding to 2px\nexport const NODE_CLUSTER_PADDING = 2; // sets parent node padding to 6px\nexport const NODE_WITH_RECT_CLUSTER_PADDING = 7;\nexport const NODE_WITH_RECT_PADDING_TOP =\n  DEFAULT_CLUSTER_LABEL_FONTSIZE + CLUSTER_LABEL_PADDING_SUM;\nexport const ROOT_NODE_WITH_LABELS_OUTER_PADDING = 3;\nexport const NODE_WITH_RECT_OUTER_PADDING = 3;\n\nconst MIN_VISIBLE_NODE_HEIGHT_AND_WIDTH = 1;\n\nconst ADDITIONAL_CLUSTER_HEIGHT_SPACING = 2;\nconst ADDITIONAL_CLUSTER_WIDTH_SPACING = 4;\n\nexport const MIN_CLUSTER_HEIGHT_WITH_VISIBLE_CHILDREN =\n  DEFAULT_CLUSTER_LABEL_FONTSIZE +\n  MIN_VISIBLE_NODE_HEIGHT_AND_WIDTH +\n  2 * RECT_STROKE_WIDTH +\n  CLUSTER_LABEL_PADDING_SUM +\n  ADDITIONAL_CLUSTER_HEIGHT_SPACING;\n\nexport const MIN_CLUSTER_WIDTH_WITH_VISIBLE_CHILDREN =\n  MIN_VISIBLE_NODE_HEIGHT_AND_WIDTH +\n  2 * RECT_STROKE_WIDTH +\n  ADDITIONAL_CLUSTER_WIDTH_SPACING;\n\nexport const AGGREGATED_NODE_COLOR = Colors.Background.Container.Neutral.Accent;\n\nexport const OUT_OF_RANGE_NODE_COLOR =\n  Colors.Background.Container.Neutral.Accent;\n\nexport const DEFAULT_RANGE_LEGEND_COLOR = SCALE_FALLBACK_COLOR;\n\nexport const DEFAULT_BORDER_COLOR = Colors.Border.Neutral.Accent;\n\nexport const LABEL_OPTIONS: MappedObject<LabelOptions> = {\n  Ellipsis: 'ellipsis',\n  Fallback: 'fallback',\n  Inline: 'inline',\n  Multi: 'multi',\n  Name: 'name',\n};\n\nexport const TREEMAP_CHART_ARIA_LABEL = 'Tree Map Chart';\n"],
-  "mappings": "AAAA,OAAO,YAAY;AAInB,SAAS,4BAA4B;AAG9B,MAAM,eAAe;AAErB,MAAM,iBAAiB,OAAO,OAAoC;AAAA,EACvE,KAAK;AAAA,EACL,UAAU;AAAA,EACV,mBAAmB;AAAA,EACnB,OAAO;AAAA,EACP,MAAM;AACR,CAAC;AAEM,MAAM,aAAa,OAAO,OAAgC;AAAA,EAC/D,QAAQ;AAAA,EACR,KAAK;AAAA,EACL,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO;AACT,CAAC;AAEM,MAAM,gBAAgB,OAAO,OAAmC;AAAA,EACrE,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,aAAa;AAAA,EACb,QAAQ;AAAA,EACR,KAAK;AACP,CAAC;AAEM,MAAM,gBAAgB,OAAO,OAAmC;AAAA,EACrE,MAAM;AAAA,EACN,OAAO;AACT,CAAC;AAEM,MAAM,mBAAmB;AACzB,MAAM,2BAA2B;AACjC,MAAM,yBAAyB;AAC/B,MAAM,gBAAgB;AACtB,MAAM,iBAAiB;AACvB,MAAM,wBAAwB;AAC9B,MAAM,oCAAoC;AAC1C,MAAM,8BAA8B;AACpC,MAAM,wBAAwB;AAC9B,MAAM,+BAA+B;AACrC,MAAM,0CAA0C;AAChD,MAAM,4BAA4B;AAElC,MAAM,yBAAwC,eAAe;AAC7D,MAAM,sBAAiC,WAAW;AAClD,MAAM,yBAAuC,cAAc;AAC3D,MAAM,yBAAyB;AAC/B,MAAM,4BAA4B;AAClC,MAAM,iCAAiC;AACvC,MAAM,oCAAoC;AAC1C,MAAM,yBAAyB,yBAAyB;AACxD,MAAM,yBAAyB;AAEtC,MAAM,wBAAwB;AAC9B,MAAM,4BAA4B,wBAAwB;AACnD,MAAM,qBACX,iCAAiC;AAC5B,MAAM,wBAAwB;AAE9B,MAAM,oBAAoB;AAC1B,MAAM,sBAAsB;AAC5B,MAAM,wBAAwB;AAC9B,MAAM,wBAAwB;AAE9B,MAAM,kBAAkB;AACxB,MAAM,mBAAmB;AAEzB,MAAM,qBAAqB;AAC3B,MAAM,oBAAoB;AAC1B,MAAM,uBAAuB;AAE7B,MAAM,oBAAoB;AAC1B,MAAM,uBAAuB;AAC7B,MAAM,iCAAiC;AACvC,MAAM,6BACX,iCAAiC;AAC5B,MAAM,sCAAsC;AAC5C,MAAM,+BAA+B;AAE5C,MAAM,oCAAoC;AAE1C,MAAM,oCAAoC;AAC1C,MAAM,mCAAmC;AAElC,MAAM,2CACX,iCACA,oCACA,IAAI,oBACJ,4BACA;AAEK,MAAM,0CACX,oCACA,IAAI,oBACJ;AAEK,MAAM,wBAAwB,OAAO,WAAW,UAAU,QAAQ;AAElE,MAAM,0BACX,OAAO,WAAW,UAAU,QAAQ;AAE/B,MAAM,6BAA6B;AAEnC,MAAM,uBAAuB,OAAO,OAAO,QAAQ;AAEnD,MAAM,gBAA4C;AAAA,EACvD,UAAU;AAAA,EACV,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,MAAM;AACR;AAEO,MAAM,2BAA2B;",
+  "sourcesContent": ["import Colors from '@dynatrace/strato-design-tokens/colors';\n\nimport type { LabelOptions, TextAlign, TextBaseline } from './types/canvas.js';\nimport type { LabelsDisplay, NameAccessor } from './types/treemap.js';\nimport { SCALE_FALLBACK_COLOR } from '../core/constants.js';\nimport type { MappedObject } from '../core/types/helpers/mapped-object.js';\n\nexport const DISPLAY_NAME = 'TreeMap';\n\nexport const LABELS_DISPLAY = Object.freeze<MappedObject<LabelsDisplay>>({\n  All: 'all',\n  Clusters: 'clusters',\n  ClustersAndValues: 'clusters-and-values',\n  Nodes: 'nodes',\n  None: 'none',\n});\n\nexport const TEXT_ALIGN = Object.freeze<MappedObject<TextAlign>>({\n  Center: 'center',\n  End: 'end',\n  Left: 'left',\n  Right: 'right',\n  Start: 'start',\n});\n\nexport const TEXT_BASELINE = Object.freeze<MappedObject<TextBaseline>>({\n  Alphabetic: 'alphabetic',\n  Bottom: 'bottom',\n  Hanging: 'hanging',\n  Ideographic: 'ideographic',\n  Middle: 'middle',\n  Top: 'top',\n});\n\nexport const NAME_ACCESSOR = Object.freeze<MappedObject<NameAccessor>>({\n  Name: 'name',\n  Value: 'value',\n});\n\nexport const CLUSTER_OTHER_ID = 'other-cluster';\nexport const DEFAULT_AGGREGATED_LABEL = 'Other';\nexport const DEFAULT_ROOT_NODE_NAME = 'root node';\nexport const DEFAULT_WIDTH = '100%';\nexport const DEFAULT_HEIGHT = 300;\nexport const DEFAULT_LOADING_STATE = false;\nexport const DEFAULT_CATEGORICAL_COLOR_PALETTE = 'categorical';\nexport const DEFAULT_RANGE_COLOR_PALETTE = 'moss';\nexport const DEFAULT_MIN_NODE_SIZE = 250;\nexport const DEFAULT_MIN_NODE_SIZE_PARENT = 1000;\nexport const DEFAULT_MIN_NODE_SIZE_PARENT_AND_LABELS = 2000;\nexport const DEFAULT_TOOLBAR_PLACEMENT = 'top-right';\n\nexport const DEFAULT_LABELS_DISPLAY: LabelsDisplay = LABELS_DISPLAY.None;\nexport const DEFAULT_LABEL_ALIGN: TextAlign = TEXT_ALIGN.Center;\nexport const DEFAULT_LABEL_BASELINE: TextBaseline = TEXT_BASELINE.Middle;\nexport const DEFAULT_LABEL_FONTSIZE = 12;\nexport const DEFAULT_LABEL_LINE_HEIGHT = 16;\nexport const DEFAULT_CLUSTER_LABEL_FONTSIZE = 12;\nexport const DEFAULT_CLUSTER_LABEL_LINE_HEIGHT = 20;\nexport const CLUSTER_LABEL_OFFSET_Y = DEFAULT_LABEL_FONTSIZE + 2;\nexport const CLUSTER_LABEL_OFFSET_X = 10;\n\nconst CLUSTER_LABEL_PADDING = 4;\nconst CLUSTER_LABEL_PADDING_SUM = CLUSTER_LABEL_PADDING * 2;\nexport const MIN_CLUSTER_HEIGHT =\n  DEFAULT_CLUSTER_LABEL_FONTSIZE + CLUSTER_LABEL_PADDING_SUM;\nexport const DEFAULT_LABEL_PADDING = 4;\n\nexport const LABEL_FONT_FAMILY = 'DT Flow';\nexport const DEFAULT_FONT_WEIGHT = 400;\nexport const INCREASED_FONT_WEIGHT = 500;\nexport const DEFAULT_NAME_ACCESSOR = undefined;\n\nexport const DARK_LABEL_TEXT = '#000000';\nexport const LIGHT_LABEL_TEXT = '#ffffff';\n\nexport const RECT_BORDER_RADIUS = 2;\nexport const RECT_STROKE_WIDTH = 1;\nexport const RECT_CLUSTER_OPACITY = 0.15;\n\nexport const NODE_LEAF_PADDING = 1; // sets leaf node padding to 2px\nexport const NODE_CLUSTER_PADDING = 2; // sets parent node padding to 6px\nexport const NODE_WITH_RECT_CLUSTER_PADDING = 7;\nexport const NODE_WITH_RECT_PADDING_TOP =\n  DEFAULT_CLUSTER_LABEL_FONTSIZE + CLUSTER_LABEL_PADDING_SUM;\nexport const ROOT_NODE_WITH_LABELS_OUTER_PADDING = 3;\nexport const NODE_WITH_RECT_OUTER_PADDING = 3;\n\nconst MIN_VISIBLE_NODE_HEIGHT_AND_WIDTH = 1;\n\nconst ADDITIONAL_CLUSTER_HEIGHT_SPACING = 2;\nconst ADDITIONAL_CLUSTER_WIDTH_SPACING = 4;\n\nexport const MIN_CLUSTER_HEIGHT_WITH_VISIBLE_CHILDREN =\n  DEFAULT_CLUSTER_LABEL_FONTSIZE +\n  MIN_VISIBLE_NODE_HEIGHT_AND_WIDTH +\n  2 * RECT_STROKE_WIDTH +\n  CLUSTER_LABEL_PADDING_SUM +\n  ADDITIONAL_CLUSTER_HEIGHT_SPACING;\n\nexport const MIN_CLUSTER_WIDTH_WITH_VISIBLE_CHILDREN =\n  MIN_VISIBLE_NODE_HEIGHT_AND_WIDTH +\n  2 * RECT_STROKE_WIDTH +\n  ADDITIONAL_CLUSTER_WIDTH_SPACING;\n\nexport const AGGREGATED_NODE_COLOR = Colors.Background.Container.Neutral.Accent;\n\nexport const OUT_OF_RANGE_NODE_COLOR =\n  Colors.Background.Container.Neutral.Accent;\n\nexport const DEFAULT_RANGE_LEGEND_COLOR = SCALE_FALLBACK_COLOR;\n\nexport const DEFAULT_BORDER_COLOR = Colors.Border.Neutral.Accent;\n\nexport const LABEL_OPTIONS: MappedObject<LabelOptions> = {\n  Ellipsis: 'ellipsis',\n  EllipsisWithValue: 'ellipsis-with-value',\n  Fallback: 'fallback',\n  Inline: 'inline',\n  Multi: 'multi',\n  Name: 'name',\n};\n\nexport const TREEMAP_CHART_ARIA_LABEL = 'Tree Map Chart';\n"],
+  "mappings": "AAAA,OAAO,YAAY;AAInB,SAAS,4BAA4B;AAG9B,MAAM,eAAe;AAErB,MAAM,iBAAiB,OAAO,OAAoC;AAAA,EACvE,KAAK;AAAA,EACL,UAAU;AAAA,EACV,mBAAmB;AAAA,EACnB,OAAO;AAAA,EACP,MAAM;AACR,CAAC;AAEM,MAAM,aAAa,OAAO,OAAgC;AAAA,EAC/D,QAAQ;AAAA,EACR,KAAK;AAAA,EACL,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO;AACT,CAAC;AAEM,MAAM,gBAAgB,OAAO,OAAmC;AAAA,EACrE,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,aAAa;AAAA,EACb,QAAQ;AAAA,EACR,KAAK;AACP,CAAC;AAEM,MAAM,gBAAgB,OAAO,OAAmC;AAAA,EACrE,MAAM;AAAA,EACN,OAAO;AACT,CAAC;AAEM,MAAM,mBAAmB;AACzB,MAAM,2BAA2B;AACjC,MAAM,yBAAyB;AAC/B,MAAM,gBAAgB;AACtB,MAAM,iBAAiB;AACvB,MAAM,wBAAwB;AAC9B,MAAM,oCAAoC;AAC1C,MAAM,8BAA8B;AACpC,MAAM,wBAAwB;AAC9B,MAAM,+BAA+B;AACrC,MAAM,0CAA0C;AAChD,MAAM,4BAA4B;AAElC,MAAM,yBAAwC,eAAe;AAC7D,MAAM,sBAAiC,WAAW;AAClD,MAAM,yBAAuC,cAAc;AAC3D,MAAM,yBAAyB;AAC/B,MAAM,4BAA4B;AAClC,MAAM,iCAAiC;AACvC,MAAM,oCAAoC;AAC1C,MAAM,yBAAyB,yBAAyB;AACxD,MAAM,yBAAyB;AAEtC,MAAM,wBAAwB;AAC9B,MAAM,4BAA4B,wBAAwB;AACnD,MAAM,qBACX,iCAAiC;AAC5B,MAAM,wBAAwB;AAE9B,MAAM,oBAAoB;AAC1B,MAAM,sBAAsB;AAC5B,MAAM,wBAAwB;AAC9B,MAAM,wBAAwB;AAE9B,MAAM,kBAAkB;AACxB,MAAM,mBAAmB;AAEzB,MAAM,qBAAqB;AAC3B,MAAM,oBAAoB;AAC1B,MAAM,uBAAuB;AAE7B,MAAM,oBAAoB;AAC1B,MAAM,uBAAuB;AAC7B,MAAM,iCAAiC;AACvC,MAAM,6BACX,iCAAiC;AAC5B,MAAM,sCAAsC;AAC5C,MAAM,+BAA+B;AAE5C,MAAM,oCAAoC;AAE1C,MAAM,oCAAoC;AAC1C,MAAM,mCAAmC;AAElC,MAAM,2CACX,iCACA,oCACA,IAAI,oBACJ,4BACA;AAEK,MAAM,0CACX,oCACA,IAAI,oBACJ;AAEK,MAAM,wBAAwB,OAAO,WAAW,UAAU,QAAQ;AAElE,MAAM,0BACX,OAAO,WAAW,UAAU,QAAQ;AAE/B,MAAM,6BAA6B;AAEnC,MAAM,uBAAuB,OAAO,OAAO,QAAQ;AAEnD,MAAM,gBAA4C;AAAA,EACvD,UAAU;AAAA,EACV,mBAAmB;AAAA,EACnB,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,MAAM;AACR;AAEO,MAAM,2BAA2B;",
   "names": []
 }

package/esm/charts/tree-map/contexts/TreeMapCustomTooltipContext.js

@@ -0,0 +1,10 @@
+import { createContext } from "react";
+const DEFAULT_CUSTOM_TOOLTIP_CONFIG = {
+  hidden: false
+};
+const TreeMapCustomTooltipContext = createContext(DEFAULT_CUSTOM_TOOLTIP_CONFIG);
+export {
+  DEFAULT_CUSTOM_TOOLTIP_CONFIG,
+  TreeMapCustomTooltipContext
+};
+//# sourceMappingURL=TreeMapCustomTooltipContext.js.map

package/esm/charts/tree-map/contexts/TreeMapCustomTooltipContext.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/charts/tree-map/contexts/TreeMapCustomTooltipContext.ts"],
+  "sourcesContent": ["import { createContext } from 'react';\n\nimport { TreeMapCustomTooltipConfig } from '../types/treemap-chart.config.js';\n\nexport const DEFAULT_CUSTOM_TOOLTIP_CONFIG: TreeMapCustomTooltipConfig = {\n  hidden: false,\n};\n\nexport const TreeMapCustomTooltipContext =\n  createContext<TreeMapCustomTooltipConfig>(DEFAULT_CUSTOM_TOOLTIP_CONFIG);\n"],
+  "mappings": "AAAA,SAAS,qBAAqB;AAIvB,MAAM,gCAA4D;AAAA,EACvE,QAAQ;AACV;AAEO,MAAM,8BACX,cAA0C,6BAA6B;",
+  "names": []
+}

package/esm/charts/tree-map/hooks/useTreeMapCustomTooltip.js

@@ -0,0 +1,7 @@
+import { useContext } from "react";
+import { TreeMapCustomTooltipContext } from "../contexts/TreeMapCustomTooltipContext.js";
+const useTreeMapCustomTooltip = () => useContext(TreeMapCustomTooltipContext);
+export {
+  useTreeMapCustomTooltip
+};
+//# sourceMappingURL=useTreeMapCustomTooltip.js.map

package/esm/charts/tree-map/hooks/useTreeMapCustomTooltip.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/charts/tree-map/hooks/useTreeMapCustomTooltip.tsx"],
+  "sourcesContent": ["import { useContext } from 'react';\n\nimport { TreeMapCustomTooltipContext } from '../contexts/TreeMapCustomTooltipContext.js';\n\nexport const useTreeMapCustomTooltip = () =>\n  useContext(TreeMapCustomTooltipContext);\n"],
+  "mappings": "AAAA,SAAS,kBAAkB;AAE3B,SAAS,mCAAmC;AAErC,MAAM,0BAA0B,MACrC,WAAW,2BAA2B;",
+  "names": []
+}

package/esm/charts/tree-map/providers/TreeMapChartProviders.js

@@ -11,6 +11,10 @@ import { MinMaxConfigContext } from "../context/MinMaxConfigContext.js";
 import { NameAccessorContext } from "../context/NameAccessorContext.js";
 import { ToolbarContext } from "../context/ToolbarContext.js";
 import { TreeMapRawDataContext } from "../context/TreeMapRawDataContext.js";
+import {
+  DEFAULT_CUSTOM_TOOLTIP_CONFIG,
+  TreeMapCustomTooltipContext
+} from "../contexts/TreeMapCustomTooltipContext.js";
 const TreeMapChartProviders = (props) => {
   const {
     data,
@@ -26,7 +30,8 @@ const TreeMapChartProviders = (props) => {
     max: configMax,
     children,
     colorRules = [],
-    unit
+    unit,
+    tooltip
   } = props;
   const min = configMin === "data-min" ? void 0 : configMin;
   const max = configMax === "data-max" ? void 0 : configMax;
@@ -49,7 +54,13 @@ const TreeMapChartProviders = (props) => {
             formatter,
             truncationMode
           },
-          children: /* @__PURE__ */ jsx(ColorPaletteContext.Provider, { value: colorPalette, children: /* @__PURE__ */ jsx(ChartLegendContext.Provider, { value: legend, children: /* @__PURE__ */ jsx(NameAccessorContext.Provider, { value: nameAccessor, children: /* @__PURE__ */ jsx(ToolbarContext.Provider, { value: toolbar, children: /* @__PURE__ */ jsx(LabelsDisplayContext.Provider, { value: labelsDisplay, children: /* @__PURE__ */ jsx(MinMaxConfigContext.Provider, { value: { min, max }, children: /* @__PURE__ */ jsx(StoreProvider, { children }) }) }) }) }) }) })
+          children: /* @__PURE__ */ jsx(ColorPaletteContext.Provider, { value: colorPalette, children: /* @__PURE__ */ jsx(ChartLegendContext.Provider, { value: legend, children: /* @__PURE__ */ jsx(NameAccessorContext.Provider, { value: nameAccessor, children: /* @__PURE__ */ jsx(ToolbarContext.Provider, { value: toolbar, children: /* @__PURE__ */ jsx(LabelsDisplayContext.Provider, { value: labelsDisplay, children: /* @__PURE__ */ jsx(MinMaxConfigContext.Provider, { value: { min, max }, children: /* @__PURE__ */ jsx(
+            TreeMapCustomTooltipContext.Provider,
+            {
+              value: tooltip ?? DEFAULT_CUSTOM_TOOLTIP_CONFIG,
+              children: /* @__PURE__ */ jsx(StoreProvider, { children })
+            }
+          ) }) }) }) }) }) })
         }
       )
     }

package/esm/charts/tree-map/providers/TreeMapChartProviders.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/tree-map/providers/TreeMapChartProviders.tsx"],
-  "sourcesContent": ["import { useMemo, type PropsWithChildren } from 'react';\n\nimport type { Unit } from '@dynatrace-sdk/units';\n\nimport { StoreProvider } from './StoreProvider.js';\nimport type { TruncationMode } from '../../../typography/text-ellipsis/TextEllipsis.js';\nimport { ChartSeriesActionContext } from '../../core/components/series-action/ChartSeriesActionContext.js';\nimport { ColorRuleContext } from '../../core/context/ColorRuleContext.js';\nimport type {\n  ColorPalette,\n  CustomColorPalette,\n} from '../../core/types/color-palette.js';\nimport { ColorRuleProps } from '../../core/types/color-rule.js';\nimport type { ColoredRange } from '../../core/types/colored-range.js';\nimport type { LegendProps } from '../../core/types/legend.js';\nimport type { SeriesActionsTemplate } from '../../core/types/series-actions-template.js';\nimport type { ChartToolbarConfig } from '../../core/types/toolbar.js';\nimport { ChartLegendContext } from '../context/ChartLegendContext.js';\nimport { ColorPaletteContext } from '../context/ColorPaletteContext.js';\nimport { FormatterContext } from '../context/FormatterContext.js';\nimport { LabelsDisplayContext } from '../context/LabelsDisplayContext.js';\nimport { MinMaxConfigContext } from '../context/MinMaxConfigContext.js';\nimport { NameAccessorContext } from '../context/NameAccessorContext.js';\nimport { ToolbarContext } from '../context/ToolbarContext.js';\nimport { TreeMapRawDataContext } from '../context/TreeMapRawDataContext.js';\nimport type { TreeMapFormatter } from '../types/internal.js';\nimport type {\n  LabelsDisplay,\n  NameAccessor,\n  TreeMapData,\n  TreeMapLeafNode,\n} from '../types/treemap.js';\n\ninterface TreeMapChartProvidersProps extends PropsWithChildren {\n  data: TreeMapData;\n  seriesActions?: (node: TreeMapLeafNode) => SeriesActionsTemplate;\n  formatter: TreeMapFormatter;\n  truncationMode: TruncationMode;\n  legend: LegendProps;\n  toolbar?: ChartToolbarConfig;\n  labelsDisplay: LabelsDisplay;\n  nameAccessor?: NameAccessor;\n  colorPalette: ColorPalette | CustomColorPalette | ColoredRange[];\n  min?: 'data-min' | number;\n  max?: 'data-max' | number;\n  colorRules?: ColorRuleProps[];\n  unit?: string | Unit;\n}\n\nexport const TreeMapChartProviders = (props: TreeMapChartProvidersProps) => {\n  const {\n    data,\n    seriesActions,\n    formatter,\n    truncationMode,\n    legend,\n    toolbar,\n    labelsDisplay,\n    nameAccessor,\n    colorPalette,\n    min: configMin,\n    max: configMax,\n    children,\n    colorRules = [],\n    unit,\n  } = props;\n\n  const min = configMin === 'data-min' ? undefined : configMin;\n  const max = configMax === 'data-max' ? undefined : configMax;\n\n  const memoizedRawData = useMemo(\n    () => ({ ...data, unit: unit ?? data.unit }),\n    [data, unit],\n  );\n\n  return (\n    <ColorRuleContext.Provider value={colorRules}>\n      <TreeMapRawDataContext.Provider value={memoizedRawData}>\n        <ChartSeriesActionContext.Provider\n          value={{\n            // eslint-disable-next-line @typescript-eslint/prefer-ts-expect-error, @typescript-eslint/ban-ts-comment\n            // @ts-ignore Strict mode transition - needs to be investigated\n            chartSeriesActions: seriesActions,\n          }}\n        >\n          <FormatterContext.Provider\n            value={{\n              formatter,\n              truncationMode,\n            }}\n          >\n            <ColorPaletteContext.Provider value={colorPalette}>\n              <ChartLegendContext.Provider value={legend}>\n                <NameAccessorContext.Provider value={nameAccessor}>\n                  <ToolbarContext.Provider value={toolbar}>\n                    <LabelsDisplayContext.Provider value={labelsDisplay}>\n                      <MinMaxConfigContext.Provider value={{ min, max }}>\n                        <StoreProvider>{children}</StoreProvider>\n                      </MinMaxConfigContext.Provider>\n                    </LabelsDisplayContext.Provider>\n                  </ToolbarContext.Provider>\n                </NameAccessorContext.Provider>\n              </ChartLegendContext.Provider>\n            </ColorPaletteContext.Provider>\n          </FormatterContext.Provider>\n        </ChartSeriesActionContext.Provider>\n      </TreeMapRawDataContext.Provider>\n    </ColorRuleContext.Provider>\n  );\n};\n\nTreeMapChartProviders['displayName'] = 'TreeMapChartProviders';\n"],
-  "mappings": "AAiGwB;AAjGxB,SAAS,eAAuC;AAIhD,SAAS,qBAAqB;AAE9B,SAAS,gCAAgC;AACzC,SAAS,wBAAwB;AAUjC,SAAS,0BAA0B;AACnC,SAAS,2BAA2B;AACpC,SAAS,wBAAwB;AACjC,SAAS,4BAA4B;AACrC,SAAS,2BAA2B;AACpC,SAAS,2BAA2B;AACpC,SAAS,sBAAsB;AAC/B,SAAS,6BAA6B;AAyB/B,MAAM,wBAAwB,CAAC,UAAsC;AAC1E,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,KAAK;AAAA,IACL,KAAK;AAAA,IACL;AAAA,IACA,aAAa,CAAC;AAAA,IACd;AAAA,EACF,IAAI;AAEJ,QAAM,MAAM,cAAc,aAAa,SAAY;AACnD,QAAM,MAAM,cAAc,aAAa,SAAY;AAEnD,QAAM,kBAAkB;AAAA,IACtB,OAAO,EAAE,GAAG,MAAM,MAAM,QAAQ,KAAK,KAAK;AAAA,IAC1C,CAAC,MAAM,IAAI;AAAA,EACb;AAEA,SACE,oBAAC,iBAAiB,UAAjB,EAA0B,OAAO,YAChC,8BAAC,sBAAsB,UAAtB,EAA+B,OAAO,iBACrC;AAAA,IAAC,yBAAyB;AAAA,IAAzB;AAAA,MACC,OAAO;AAAA;AAAA;AAAA,QAGL,oBAAoB;AAAA,MACtB;AAAA,MAEA;AAAA,QAAC,iBAAiB;AAAA,QAAjB;AAAA,UACC,OAAO;AAAA,YACL;AAAA,YACA;AAAA,UACF;AAAA,UAEA,8BAAC,oBAAoB,UAApB,EAA6B,OAAO,cACnC,8BAAC,mBAAmB,UAAnB,EAA4B,OAAO,QAClC,8BAAC,oBAAoB,UAApB,EAA6B,OAAO,cACnC,8BAAC,eAAe,UAAf,EAAwB,OAAO,SAC9B,8BAAC,qBAAqB,UAArB,EAA8B,OAAO,eACpC,8BAAC,oBAAoB,UAApB,EAA6B,OAAO,EAAE,KAAK,IAAI,GAC9C,8BAAC,iBAAe,UAAS,GAC3B,GACF,GACF,GACF,GACF,GACF;AAAA;AAAA,MACF;AAAA;AAAA,EACF,GACF,GACF;AAEJ;AAEA,sBAAsB,aAAa,IAAI;",
+  "sourcesContent": ["import { useMemo, type PropsWithChildren } from 'react';\n\nimport type { Unit } from '@dynatrace-sdk/units';\n\nimport { StoreProvider } from './StoreProvider.js';\nimport type { TruncationMode } from '../../../typography/text-ellipsis/TextEllipsis.js';\nimport { ChartSeriesActionContext } from '../../core/components/series-action/ChartSeriesActionContext.js';\nimport { ColorRuleContext } from '../../core/context/ColorRuleContext.js';\nimport type {\n  ColorPalette,\n  CustomColorPalette,\n} from '../../core/types/color-palette.js';\nimport { ColorRuleProps } from '../../core/types/color-rule.js';\nimport type { ColoredRange } from '../../core/types/colored-range.js';\nimport type { LegendProps } from '../../core/types/legend.js';\nimport type { SeriesActionsTemplate } from '../../core/types/series-actions-template.js';\nimport type { ChartToolbarConfig } from '../../core/types/toolbar.js';\nimport { ChartLegendContext } from '../context/ChartLegendContext.js';\nimport { ColorPaletteContext } from '../context/ColorPaletteContext.js';\nimport { FormatterContext } from '../context/FormatterContext.js';\nimport { LabelsDisplayContext } from '../context/LabelsDisplayContext.js';\nimport { MinMaxConfigContext } from '../context/MinMaxConfigContext.js';\nimport { NameAccessorContext } from '../context/NameAccessorContext.js';\nimport { ToolbarContext } from '../context/ToolbarContext.js';\nimport { TreeMapRawDataContext } from '../context/TreeMapRawDataContext.js';\nimport {\n  DEFAULT_CUSTOM_TOOLTIP_CONFIG,\n  TreeMapCustomTooltipContext,\n} from '../contexts/TreeMapCustomTooltipContext.js';\nimport type { TreeMapFormatter } from '../types/internal.js';\nimport type { TreeMapCustomTooltipConfig } from '../types/treemap-chart.config.js';\nimport type {\n  LabelsDisplay,\n  NameAccessor,\n  TreeMapData,\n  TreeMapLeafNode,\n} from '../types/treemap.js';\n\ninterface TreeMapChartProvidersProps extends PropsWithChildren {\n  data: TreeMapData;\n  seriesActions?: (node: TreeMapLeafNode) => SeriesActionsTemplate;\n  formatter: TreeMapFormatter;\n  truncationMode: TruncationMode;\n  legend: LegendProps;\n  toolbar?: ChartToolbarConfig;\n  labelsDisplay: LabelsDisplay;\n  nameAccessor?: NameAccessor;\n  colorPalette: ColorPalette | CustomColorPalette | ColoredRange[];\n  min?: 'data-min' | number;\n  max?: 'data-max' | number;\n  colorRules?: ColorRuleProps[];\n  unit?: string | Unit;\n  tooltip?: TreeMapCustomTooltipConfig;\n}\n\nexport const TreeMapChartProviders = (props: TreeMapChartProvidersProps) => {\n  const {\n    data,\n    seriesActions,\n    formatter,\n    truncationMode,\n    legend,\n    toolbar,\n    labelsDisplay,\n    nameAccessor,\n    colorPalette,\n    min: configMin,\n    max: configMax,\n    children,\n    colorRules = [],\n    unit,\n    tooltip,\n  } = props;\n\n  const min = configMin === 'data-min' ? undefined : configMin;\n  const max = configMax === 'data-max' ? undefined : configMax;\n\n  const memoizedRawData = useMemo(\n    () => ({ ...data, unit: unit ?? data.unit }),\n    [data, unit],\n  );\n\n  return (\n    <ColorRuleContext.Provider value={colorRules}>\n      <TreeMapRawDataContext.Provider value={memoizedRawData}>\n        <ChartSeriesActionContext.Provider\n          value={{\n            // eslint-disable-next-line @typescript-eslint/prefer-ts-expect-error, @typescript-eslint/ban-ts-comment\n            // @ts-ignore Strict mode transition - needs to be investigated\n            chartSeriesActions: seriesActions,\n          }}\n        >\n          <FormatterContext.Provider\n            value={{\n              formatter,\n              truncationMode,\n            }}\n          >\n            <ColorPaletteContext.Provider value={colorPalette}>\n              <ChartLegendContext.Provider value={legend}>\n                <NameAccessorContext.Provider value={nameAccessor}>\n                  <ToolbarContext.Provider value={toolbar}>\n                    <LabelsDisplayContext.Provider value={labelsDisplay}>\n                      <MinMaxConfigContext.Provider value={{ min, max }}>\n                        <TreeMapCustomTooltipContext.Provider\n                          value={tooltip ?? DEFAULT_CUSTOM_TOOLTIP_CONFIG}\n                        >\n                          <StoreProvider>{children}</StoreProvider>\n                        </TreeMapCustomTooltipContext.Provider>\n                      </MinMaxConfigContext.Provider>\n                    </LabelsDisplayContext.Provider>\n                  </ToolbarContext.Provider>\n                </NameAccessorContext.Provider>\n              </ChartLegendContext.Provider>\n            </ColorPaletteContext.Provider>\n          </FormatterContext.Provider>\n        </ChartSeriesActionContext.Provider>\n      </TreeMapRawDataContext.Provider>\n    </ColorRuleContext.Provider>\n  );\n};\n\nTreeMapChartProviders['displayName'] = 'TreeMapChartProviders';\n"],
+  "mappings": "AA2G0B;AA3G1B,SAAS,eAAuC;AAIhD,SAAS,qBAAqB;AAE9B,SAAS,gCAAgC;AACzC,SAAS,wBAAwB;AAUjC,SAAS,0BAA0B;AACnC,SAAS,2BAA2B;AACpC,SAAS,wBAAwB;AACjC,SAAS,4BAA4B;AACrC,SAAS,2BAA2B;AACpC,SAAS,2BAA2B;AACpC,SAAS,sBAAsB;AAC/B,SAAS,6BAA6B;AACtC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AA2BA,MAAM,wBAAwB,CAAC,UAAsC;AAC1E,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,KAAK;AAAA,IACL,KAAK;AAAA,IACL;AAAA,IACA,aAAa,CAAC;AAAA,IACd;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,MAAM,cAAc,aAAa,SAAY;AACnD,QAAM,MAAM,cAAc,aAAa,SAAY;AAEnD,QAAM,kBAAkB;AAAA,IACtB,OAAO,EAAE,GAAG,MAAM,MAAM,QAAQ,KAAK,KAAK;AAAA,IAC1C,CAAC,MAAM,IAAI;AAAA,EACb;AAEA,SACE,oBAAC,iBAAiB,UAAjB,EAA0B,OAAO,YAChC,8BAAC,sBAAsB,UAAtB,EAA+B,OAAO,iBACrC;AAAA,IAAC,yBAAyB;AAAA,IAAzB;AAAA,MACC,OAAO;AAAA;AAAA;AAAA,QAGL,oBAAoB;AAAA,MACtB;AAAA,MAEA;AAAA,QAAC,iBAAiB;AAAA,QAAjB;AAAA,UACC,OAAO;AAAA,YACL;AAAA,YACA;AAAA,UACF;AAAA,UAEA,8BAAC,oBAAoB,UAApB,EAA6B,OAAO,cACnC,8BAAC,mBAAmB,UAAnB,EAA4B,OAAO,QAClC,8BAAC,oBAAoB,UAApB,EAA6B,OAAO,cACnC,8BAAC,eAAe,UAAf,EAAwB,OAAO,SAC9B,8BAAC,qBAAqB,UAArB,EAA8B,OAAO,eACpC,8BAAC,oBAAoB,UAApB,EAA6B,OAAO,EAAE,KAAK,IAAI,GAC9C;AAAA,YAAC,4BAA4B;AAAA,YAA5B;AAAA,cACC,OAAO,WAAW;AAAA,cAElB,8BAAC,iBAAe,UAAS;AAAA;AAAA,UAC3B,GACF,GACF,GACF,GACF,GACF,GACF;AAAA;AAAA,MACF;AAAA;AAAA,EACF,GACF,GACF;AAEJ;AAEA,sBAAsB,aAAa,IAAI;",
   "names": []
 }

package/esm/charts/tree-map/slots/Tooltip.js

@@ -1,4 +1,4 @@
-const Tooltip = () => null;
+const Tooltip = (props) => null;
 Tooltip["displayName"] = "TreeMap.Tooltip";
 export {
   Tooltip

package/esm/charts/tree-map/slots/Tooltip.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/tree-map/slots/Tooltip.tsx"],
-  "sourcesContent": ["export const Tooltip = () => null;\n\nTooltip['displayName'] = 'TreeMap.Tooltip';\n"],
-  "mappings": "AAAO,MAAM,UAAU,MAAM;AAE7B,QAAQ,aAAa,IAAI;",
+  "sourcesContent": ["import type { TreeMapCustomTooltipProps } from '../types/treemap-chart.config.js';\n\nexport const Tooltip = (props: TreeMapCustomTooltipProps) => null;\n\nTooltip['displayName'] = 'TreeMap.Tooltip';\n"],
+  "mappings": "AAEO,MAAM,UAAU,CAAC,UAAqC;AAE7D,QAAQ,aAAa,IAAI;",
   "names": []
 }

package/esm/charts/tree-map/utils/build-overlay-tooltip-data.js

@@ -3,10 +3,12 @@ const buildOverlayTooltipData = (node, formatter, unit) => {
   const item = getTooltipItem(formatter, node, unit);
   const parentName = node.parent?.data.name;
   const nodeColor = node.parent?.data.color?.Default ?? node.data?.color?.Default ?? "";
+  const path = [...node.ancestors()].reverse().slice(1).map((n) => n.data.name);
+  const children = node.children?.map((c) => c.data.name);
   return {
     geometry: "treemap",
     header1: parentName ? [parentName] : [],
-    metadata: { id: item.id, value: node.data.value },
+    metadata: { id: item.id, value: node.data.value, path, children },
     series: [
       {
         name: item.name,

package/esm/charts/tree-map/utils/build-overlay-tooltip-data.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/tree-map/utils/build-overlay-tooltip-data.ts"],
-  "sourcesContent": ["import type { HierarchyRectangularNode } from '@visx/hierarchy/lib/types.js';\n\nimport type { Unit } from '@dynatrace-sdk/units';\n\nimport { getTooltipItem } from './get-tooltip-item.js';\nimport type { Data } from '../../core/components/overlay-tooltip/types.js';\nimport type { Formatter } from '../../core/types/formatter.js';\nimport type { InternalTreeMapNode } from '../types/internal.js';\n\nexport const buildOverlayTooltipData = (\n  node: HierarchyRectangularNode<InternalTreeMapNode>,\n  formatter: Formatter,\n  unit?: string | Unit,\n): Data => {\n  const item = getTooltipItem(formatter, node, unit);\n  const parentName = node.parent?.data.name;\n  const nodeColor =\n    node.parent?.data.color?.Default ?? node.data?.color?.Default ?? '';\n\n  return {\n    geometry: 'treemap',\n    header1: parentName ? [parentName] : [],\n    metadata: { id: item.id, value: node.data.value },\n    series: [\n      {\n        name: item.name,\n        color: nodeColor,\n        value: item.values[0],\n      },\n    ],\n  };\n};\n"],
-  "mappings": "AAIA,SAAS,sBAAsB;AAKxB,MAAM,0BAA0B,CACrC,MACA,WACA,SACS;AACT,QAAM,OAAO,eAAe,WAAW,MAAM,IAAI;AACjD,QAAM,aAAa,KAAK,QAAQ,KAAK;AACrC,QAAM,YACJ,KAAK,QAAQ,KAAK,OAAO,WAAW,KAAK,MAAM,OAAO,WAAW;AAEnE,SAAO;AAAA,IACL,UAAU;AAAA,IACV,SAAS,aAAa,CAAC,UAAU,IAAI,CAAC;AAAA,IACtC,UAAU,EAAE,IAAI,KAAK,IAAI,OAAO,KAAK,KAAK,MAAM;AAAA,IAChD,QAAQ;AAAA,MACN;AAAA,QACE,MAAM,KAAK;AAAA,QACX,OAAO;AAAA,QACP,OAAO,KAAK,OAAO,CAAC;AAAA,MACtB;AAAA,IACF;AAAA,EACF;AACF;",
+  "sourcesContent": ["import type { HierarchyRectangularNode } from '@visx/hierarchy/lib/types.js';\n\nimport type { Unit } from '@dynatrace-sdk/units';\n\nimport { getTooltipItem } from './get-tooltip-item.js';\nimport type { Data } from '../../core/components/overlay-tooltip/types.js';\nimport type { Formatter } from '../../core/types/formatter.js';\nimport type { InternalTreeMapNode } from '../types/internal.js';\n\nexport const buildOverlayTooltipData = (\n  node: HierarchyRectangularNode<InternalTreeMapNode>,\n  formatter: Formatter,\n  unit?: string | Unit,\n): Data => {\n  const item = getTooltipItem(formatter, node, unit);\n  const parentName = node.parent?.data.name;\n  const nodeColor =\n    node.parent?.data.color?.Default ?? node.data?.color?.Default ?? '';\n\n  const path = [...node.ancestors()]\n    .reverse()\n    .slice(1)\n    .map((n) => n.data.name);\n  const children = node.children?.map((c) => c.data.name);\n\n  return {\n    geometry: 'treemap',\n    header1: parentName ? [parentName] : [],\n    metadata: { id: item.id, value: node.data.value, path, children },\n    series: [\n      {\n        name: item.name,\n        color: nodeColor,\n        value: item.values[0],\n      },\n    ],\n  };\n};\n"],
+  "mappings": "AAIA,SAAS,sBAAsB;AAKxB,MAAM,0BAA0B,CACrC,MACA,WACA,SACS;AACT,QAAM,OAAO,eAAe,WAAW,MAAM,IAAI;AACjD,QAAM,aAAa,KAAK,QAAQ,KAAK;AACrC,QAAM,YACJ,KAAK,QAAQ,KAAK,OAAO,WAAW,KAAK,MAAM,OAAO,WAAW;AAEnE,QAAM,OAAO,CAAC,GAAG,KAAK,UAAU,CAAC,EAC9B,QAAQ,EACR,MAAM,CAAC,EACP,IAAI,CAAC,MAAM,EAAE,KAAK,IAAI;AACzB,QAAM,WAAW,KAAK,UAAU,IAAI,CAAC,MAAM,EAAE,KAAK,IAAI;AAEtD,SAAO;AAAA,IACL,UAAU;AAAA,IACV,SAAS,aAAa,CAAC,UAAU,IAAI,CAAC;AAAA,IACtC,UAAU,EAAE,IAAI,KAAK,IAAI,OAAO,KAAK,KAAK,OAAO,MAAM,SAAS;AAAA,IAChE,QAAQ;AAAA,MACN;AAAA,QACE,MAAM,KAAK;AAAA,QACX,OAAO;AAAA,QACP,OAAO,KAAK,OAAO,CAAC;AAAA,MACtB;AAAA,IACF;AAAA,EACF;AACF;",
   "names": []
 }

package/esm/charts/tree-map/utils/build-tree-map-chart-config.js

@@ -45,7 +45,8 @@ const buildTreeMapChartConfig = (props, config, slots) => {
     nameAccessor,
     min,
     max,
-    colorRules
+    colorRules,
+    tooltip: slots.tooltip ?? config.tooltip
   };
 };
 export {