@dynatrace/strato-components 3.3.2 → 3.4.0

package/esm/charts/timeseries/components/legend/TimeseriesChartLegend.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/timeseries/components/legend/TimeseriesChartLegend.tsx"],
-  "sourcesContent": ["import { memo, useMemo } from 'react';\n\nimport Colors from '@dynatrace/strato-design-tokens/colors';\nimport {\n  BandChartIcon,\n  BarChartIcon,\n  LineChartIcon,\n  StackedAreaChartIcon,\n} from '@dynatrace/strato-icons';\n\nimport { useChartLayoutOrientation } from '../../../core/components/chart-layout/hooks/useChartLayoutOrientation.js';\nimport { getLegendOrientation } from '../../../core/components/chart-layout/utils/orientation.js';\nimport { reduceExploreCancelTooltip } from '../../../core/components/interactions-state-helpers/reducers/explore-reducers.js';\nimport { ChartLegend } from '../../../core/components/legend/categorical/ChartLegend.js';\nimport { useLegendSeriesActions } from '../../../core/components/legend/categorical/hooks/useLegendSeriesActions.js';\nimport {\n  ChartIcon,\n  LegendItem,\n} from '../../../core/components/legend/categorical/types/legend.js';\nimport { safeGet } from '../../../core/utils/safe-get.js';\nimport { singleLineName } from '../../../core/utils/single-line-name.js';\nimport { useSetState } from '../../hooks/store/selectors.js';\nimport { useTimeseriesData } from '../../hooks/useTimeseriesData.js';\nimport { useTruncationMode } from '../../hooks/useTruncationMode.js';\nimport {\n  SeriesMetadata,\n  TimeseriesPerVariant,\n  TimeseriesSlotProps,\n} from '../../types/timeseries.js';\nimport { hasMultiGeometries } from '../../utils/timeseries.js';\n\nexport const renderIcon = (variant?: ChartIcon) => {\n  switch (variant) {\n    case 'bar':\n      return <BarChartIcon size=\"small\" />;\n    case 'area':\n      return <StackedAreaChartIcon size=\"small\" />;\n    case 'band':\n      return <BandChartIcon size=\"small\" />;\n    case 'line':\n    default:\n      return <LineChartIcon size=\"small\" />;\n  }\n};\n\nconst createItemData = (\n  series: TimeseriesPerVariant,\n  seriesMap: WeakMap<object, SeriesMetadata>,\n): LegendItem[] => {\n  const isMultiGeometries = hasMultiGeometries(series);\n  const result: LegendItem[] = [];\n\n  for (const variant of series.shapePriority) {\n    const variantSeries = series[variant];\n\n    for (let index = 0; index < variantSeries.length; index++) {\n      const singleSeries = variantSeries[index];\n      const seriesMetadata = safeGet(seriesMap, singleSeries);\n\n      result.push({\n        id: seriesMetadata.id ?? `item-${index}`,\n        color: seriesMetadata.color ?? Colors.Text.Neutral.Default,\n        icon: isMultiGeometries ? renderIcon(variant) : undefined,\n        name: singleLineName(singleSeries.name) ?? seriesMetadata.id,\n      });\n    }\n  }\n\n  return result;\n};\n\n/**\n * ChartLegend component.\n */\nexport const TimeseriesChartLegend = memo(() => {\n  const { dataPerVariant, data, seriesMap } = useTimeseriesData();\n  const truncationMode = useTruncationMode();\n  const setState = useSetState();\n  const { orientation: layoutOrientation } = useChartLayoutOrientation();\n  const legendOrientation = getLegendOrientation(layoutOrientation);\n\n  const legendActions = useLegendSeriesActions<TimeseriesSlotProps>(\n    data,\n    (s) => safeGet(seriesMap, s).id,\n  );\n  const legendItems = useMemo(\n    () => createItemData(dataPerVariant, seriesMap),\n    [dataPerVariant, seriesMap],\n  );\n\n  const updateHighlightedSeries = (item?: LegendItem) => {\n    setState((prev) => ({\n      ...prev,\n      highlightedSeriesId: item?.id,\n    }));\n  };\n\n  const updateVisibleSeries = (visibleSeries: LegendItem[]) => {\n    const visibleSeriesSet = new Set(visibleSeries.map((s) => s.id));\n\n    setState((prev) =>\n      reduceExploreCancelTooltip({\n        ...prev,\n        filteredSeriesIds: visibleSeriesSet,\n      }),\n    );\n  };\n\n  return (\n    <ChartLegend\n      items={legendItems}\n      orientation={legendOrientation}\n      interactionsDisabled={false}\n      onHover={updateHighlightedSeries}\n      onClick={updateVisibleSeries}\n      onSeriesAction={legendActions}\n      truncationMode={truncationMode}\n    />\n  );\n});\n\nTimeseriesChartLegend['displayName'] = 'TimeseriesChartLegend';\n"],
-  "mappings": "AAkCa;AAlCb,SAAS,MAAM,eAAe;AAE9B,OAAO,YAAY;AACnB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,iCAAiC;AAC1C,SAAS,4BAA4B;AACrC,SAAS,kCAAkC;AAC3C,SAAS,mBAAmB;AAC5B,SAAS,8BAA8B;AAKvC,SAAS,eAAe;AACxB,SAAS,sBAAsB;AAC/B,SAAS,mBAAmB;AAC5B,SAAS,yBAAyB;AAClC,SAAS,yBAAyB;AAMlC,SAAS,0BAA0B;AAE5B,MAAM,aAAa,CAAC,YAAwB;AACjD,UAAQ,SAAS;AAAA,IACf,KAAK;AACH,aAAO,oBAAC,gBAAa,MAAK,SAAQ;AAAA,IACpC,KAAK;AACH,aAAO,oBAAC,wBAAqB,MAAK,SAAQ;AAAA,IAC5C,KAAK;AACH,aAAO,oBAAC,iBAAc,MAAK,SAAQ;AAAA,IACrC,KAAK;AAAA,IACL;AACE,aAAO,oBAAC,iBAAc,MAAK,SAAQ;AAAA,EACvC;AACF;AAEA,MAAM,iBAAiB,CACrB,QACA,cACiB;AACjB,QAAM,oBAAoB,mBAAmB,MAAM;AACnD,QAAM,SAAuB,CAAC;AAE9B,aAAW,WAAW,OAAO,eAAe;AAC1C,UAAM,gBAAgB,OAAO,OAAO;AAEpC,aAAS,QAAQ,GAAG,QAAQ,cAAc,QAAQ,SAAS;AACzD,YAAM,eAAe,cAAc,KAAK;AACxC,YAAM,iBAAiB,QAAQ,WAAW,YAAY;AAEtD,aAAO,KAAK;AAAA,QACV,IAAI,eAAe,MAAM,QAAQ,KAAK;AAAA,QACtC,OAAO,eAAe,SAAS,OAAO,KAAK,QAAQ;AAAA,QACnD,MAAM,oBAAoB,WAAW,OAAO,IAAI;AAAA,QAChD,MAAM,eAAe,aAAa,IAAI,KAAK,eAAe;AAAA,MAC5D,CAAC;AAAA,IACH;AAAA,EACF;AAEA,SAAO;AACT;AAKO,MAAM,wBAAwB,KAAK,MAAM;AAC9C,QAAM,EAAE,gBAAgB,MAAM,UAAU,IAAI,kBAAkB;AAC9D,QAAM,iBAAiB,kBAAkB;AACzC,QAAM,WAAW,YAAY;AAC7B,QAAM,EAAE,aAAa,kBAAkB,IAAI,0BAA0B;AACrE,QAAM,oBAAoB,qBAAqB,iBAAiB;AAEhE,QAAM,gBAAgB;AAAA,IACpB;AAAA,IACA,CAAC,MAAM,QAAQ,WAAW,CAAC,EAAE;AAAA,EAC/B;AACA,QAAM,cAAc;AAAA,IAClB,MAAM,eAAe,gBAAgB,SAAS;AAAA,IAC9C,CAAC,gBAAgB,SAAS;AAAA,EAC5B;AAEA,QAAM,0BAA0B,CAAC,SAAsB;AACrD,aAAS,CAAC,UAAU;AAAA,MAClB,GAAG;AAAA,MACH,qBAAqB,MAAM;AAAA,IAC7B,EAAE;AAAA,EACJ;AAEA,QAAM,sBAAsB,CAAC,kBAAgC;AAC3D,UAAM,mBAAmB,IAAI,IAAI,cAAc,IAAI,CAAC,MAAM,EAAE,EAAE,CAAC;AAE/D;AAAA,MAAS,CAAC,SACR,2BAA2B;AAAA,QACzB,GAAG;AAAA,QACH,mBAAmB;AAAA,MACrB,CAAC;AAAA,IACH;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP,aAAa;AAAA,MACb,sBAAsB;AAAA,MACtB,SAAS;AAAA,MACT,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB;AAAA;AAAA,EACF;AAEJ,CAAC;AAED,sBAAsB,aAAa,IAAI;",
+  "sourcesContent": ["import { memo, useMemo } from 'react';\n\nimport Colors from '@dynatrace/strato-design-tokens/colors';\nimport {\n  BandChartIcon,\n  BarChartIcon,\n  LineChartIcon,\n  StackedAreaChartIcon,\n} from '@dynatrace/strato-icons';\n\nimport { useChartLayoutLoading } from '../../../core/components/chart-layout/hooks/useChartLayoutLoading.js';\nimport { useChartLayoutOrientation } from '../../../core/components/chart-layout/hooks/useChartLayoutOrientation.js';\nimport { getLegendOrientation } from '../../../core/components/chart-layout/utils/orientation.js';\nimport { reduceExploreCancelTooltip } from '../../../core/components/interactions-state-helpers/reducers/explore-reducers.js';\nimport { ChartLegend } from '../../../core/components/legend/categorical/ChartLegend.js';\nimport { useLegendSeriesActions } from '../../../core/components/legend/categorical/hooks/useLegendSeriesActions.js';\nimport {\n  ChartIcon,\n  LegendItem,\n} from '../../../core/components/legend/categorical/types/legend.js';\nimport { safeGet } from '../../../core/utils/safe-get.js';\nimport { singleLineName } from '../../../core/utils/single-line-name.js';\nimport { useSetState } from '../../hooks/store/selectors.js';\nimport { useTimeseriesData } from '../../hooks/useTimeseriesData.js';\nimport { useTruncationMode } from '../../hooks/useTruncationMode.js';\nimport {\n  SeriesMetadata,\n  TimeseriesPerVariant,\n  TimeseriesSlotProps,\n} from '../../types/timeseries.js';\nimport { hasMultiGeometries } from '../../utils/timeseries.js';\n\nexport const renderIcon = (variant?: ChartIcon) => {\n  switch (variant) {\n    case 'bar':\n      return <BarChartIcon size=\"small\" />;\n    case 'area':\n      return <StackedAreaChartIcon size=\"small\" />;\n    case 'band':\n      return <BandChartIcon size=\"small\" />;\n    case 'line':\n    default:\n      return <LineChartIcon size=\"small\" />;\n  }\n};\n\nconst createItemData = (\n  series: TimeseriesPerVariant,\n  seriesMap: WeakMap<object, SeriesMetadata>,\n): LegendItem[] => {\n  const isMultiGeometries = hasMultiGeometries(series);\n  const result: LegendItem[] = [];\n\n  for (const variant of series.shapePriority) {\n    const variantSeries = series[variant];\n\n    for (let index = 0; index < variantSeries.length; index++) {\n      const singleSeries = variantSeries[index];\n      const seriesMetadata = safeGet(seriesMap, singleSeries);\n\n      result.push({\n        id: seriesMetadata.id ?? `item-${index}`,\n        color: seriesMetadata.color ?? Colors.Text.Neutral.Default,\n        icon: isMultiGeometries ? renderIcon(variant) : undefined,\n        name: singleLineName(singleSeries.name) ?? seriesMetadata.id,\n      });\n    }\n  }\n\n  return result;\n};\n\n/**\n * ChartLegend component.\n */\nexport const TimeseriesChartLegend = memo(() => {\n  const { dataPerVariant, data, seriesMap } = useTimeseriesData();\n  const truncationMode = useTruncationMode();\n  const setState = useSetState();\n  const { orientation: layoutOrientation } = useChartLayoutOrientation();\n  const isLoading = useChartLayoutLoading();\n  const legendOrientation = getLegendOrientation(layoutOrientation);\n\n  const legendActions = useLegendSeriesActions<TimeseriesSlotProps>(\n    data,\n    (s) => safeGet(seriesMap, s).id,\n  );\n  const legendItems = useMemo(\n    () => createItemData(dataPerVariant, seriesMap),\n    [dataPerVariant, seriesMap],\n  );\n\n  const updateHighlightedSeries = (item?: LegendItem) => {\n    setState((prev) => ({\n      ...prev,\n      highlightedSeriesId: item?.id,\n    }));\n  };\n\n  const updateVisibleSeries = (visibleSeries: LegendItem[]) => {\n    const visibleSeriesSet = new Set(visibleSeries.map((s) => s.id));\n\n    setState((prev) =>\n      reduceExploreCancelTooltip({\n        ...prev,\n        filteredSeriesIds: visibleSeriesSet,\n      }),\n    );\n  };\n\n  return (\n    <ChartLegend\n      items={legendItems}\n      orientation={legendOrientation}\n      interactionsDisabled={isLoading}\n      onHover={updateHighlightedSeries}\n      onClick={updateVisibleSeries}\n      onSeriesAction={legendActions}\n      truncationMode={truncationMode}\n    />\n  );\n});\n\nTimeseriesChartLegend['displayName'] = 'TimeseriesChartLegend';\n"],
+  "mappings": "AAmCa;AAnCb,SAAS,MAAM,eAAe;AAE9B,OAAO,YAAY;AACnB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,6BAA6B;AACtC,SAAS,iCAAiC;AAC1C,SAAS,4BAA4B;AACrC,SAAS,kCAAkC;AAC3C,SAAS,mBAAmB;AAC5B,SAAS,8BAA8B;AAKvC,SAAS,eAAe;AACxB,SAAS,sBAAsB;AAC/B,SAAS,mBAAmB;AAC5B,SAAS,yBAAyB;AAClC,SAAS,yBAAyB;AAMlC,SAAS,0BAA0B;AAE5B,MAAM,aAAa,CAAC,YAAwB;AACjD,UAAQ,SAAS;AAAA,IACf,KAAK;AACH,aAAO,oBAAC,gBAAa,MAAK,SAAQ;AAAA,IACpC,KAAK;AACH,aAAO,oBAAC,wBAAqB,MAAK,SAAQ;AAAA,IAC5C,KAAK;AACH,aAAO,oBAAC,iBAAc,MAAK,SAAQ;AAAA,IACrC,KAAK;AAAA,IACL;AACE,aAAO,oBAAC,iBAAc,MAAK,SAAQ;AAAA,EACvC;AACF;AAEA,MAAM,iBAAiB,CACrB,QACA,cACiB;AACjB,QAAM,oBAAoB,mBAAmB,MAAM;AACnD,QAAM,SAAuB,CAAC;AAE9B,aAAW,WAAW,OAAO,eAAe;AAC1C,UAAM,gBAAgB,OAAO,OAAO;AAEpC,aAAS,QAAQ,GAAG,QAAQ,cAAc,QAAQ,SAAS;AACzD,YAAM,eAAe,cAAc,KAAK;AACxC,YAAM,iBAAiB,QAAQ,WAAW,YAAY;AAEtD,aAAO,KAAK;AAAA,QACV,IAAI,eAAe,MAAM,QAAQ,KAAK;AAAA,QACtC,OAAO,eAAe,SAAS,OAAO,KAAK,QAAQ;AAAA,QACnD,MAAM,oBAAoB,WAAW,OAAO,IAAI;AAAA,QAChD,MAAM,eAAe,aAAa,IAAI,KAAK,eAAe;AAAA,MAC5D,CAAC;AAAA,IACH;AAAA,EACF;AAEA,SAAO;AACT;AAKO,MAAM,wBAAwB,KAAK,MAAM;AAC9C,QAAM,EAAE,gBAAgB,MAAM,UAAU,IAAI,kBAAkB;AAC9D,QAAM,iBAAiB,kBAAkB;AACzC,QAAM,WAAW,YAAY;AAC7B,QAAM,EAAE,aAAa,kBAAkB,IAAI,0BAA0B;AACrE,QAAM,YAAY,sBAAsB;AACxC,QAAM,oBAAoB,qBAAqB,iBAAiB;AAEhE,QAAM,gBAAgB;AAAA,IACpB;AAAA,IACA,CAAC,MAAM,QAAQ,WAAW,CAAC,EAAE;AAAA,EAC/B;AACA,QAAM,cAAc;AAAA,IAClB,MAAM,eAAe,gBAAgB,SAAS;AAAA,IAC9C,CAAC,gBAAgB,SAAS;AAAA,EAC5B;AAEA,QAAM,0BAA0B,CAAC,SAAsB;AACrD,aAAS,CAAC,UAAU;AAAA,MAClB,GAAG;AAAA,MACH,qBAAqB,MAAM;AAAA,IAC7B,EAAE;AAAA,EACJ;AAEA,QAAM,sBAAsB,CAAC,kBAAgC;AAC3D,UAAM,mBAAmB,IAAI,IAAI,cAAc,IAAI,CAAC,MAAM,EAAE,EAAE,CAAC;AAE/D;AAAA,MAAS,CAAC,SACR,2BAA2B;AAAA,QACzB,GAAG;AAAA,QACH,mBAAmB;AAAA,MACrB,CAAC;AAAA,IACH;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP,aAAa;AAAA,MACb,sBAAsB;AAAA,MACtB,SAAS;AAAA,MACT,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB;AAAA;AAAA,EACF;AAEJ,CAAC;AAED,sBAAsB,aAAa,IAAI;",
   "names": []
 }

package/esm/charts/timeseries/components/overlays/TimeseriesChartOverlays.js

@@ -35,7 +35,10 @@ import { useSynchronizedCrosshair } from "../../../core/components/shared-chart-
 import { useSynchronizedSelection } from "../../../core/components/shared-chart-interactions/hooks/useSynchronizedSelection.js";
 import { useToolbarHandlerRef } from "../../../core/components/toolbar/hooks/useToolbarHandlerRef.js";
 import { getPercentageFromPixel } from "../../../core/utils/get-percentage-from-pixel.js";
-import { zIndicesTimeseriesAreas } from "../../constants.js";
+import {
+  TIMESERIES_INTERACTIONS_ARIA_LABEL,
+  zIndicesTimeseriesAreas
+} from "../../constants.js";
 import { TimeseriesChartOverlayRefContext } from "../../context/TimeseriesChartOverlayRefContext.js";
 import { TimeseriesChartSelectionAreaRef } from "../../context/TimeseriesChartSelectionAreaRef.context.js";
 import {
@@ -237,6 +240,7 @@ const TimeseriesChartOverlays = () => {
   return /* @__PURE__ */ jsx(
     InteractionsOverlay,
     {
+      "aria-label": TIMESERIES_INTERACTIONS_ARIA_LABEL,
       style: {
         zIndex: zIndicesTimeseriesAreas.overlays,
         userSelect: selectState?.finished === false ? "none" : "auto"

package/esm/charts/timeseries/components/overlays/TimeseriesChartOverlays.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/timeseries/components/overlays/TimeseriesChartOverlays.tsx"],
-  "sourcesContent": ["import { every } from 'lodash-es';\nimport { useEffect, useRef, type FocusEvent } from 'react';\n\nimport { useApplyPanDelta } from './hooks/useApplyPanDelta.js';\nimport { useApplyZoomDelta } from './hooks/useApplyZoomDelta.js';\nimport { useResetInteractions } from './hooks/useResetInteractions.js';\nimport { useResetOnResize } from './hooks/useResetOnResize.js';\nimport { TimeseriesCrosshair } from './TimeseriesExplore/TimeseriesCrosshair.js';\nimport { TimeseriesInspect } from './TimeseriesExplore/TimeseriesInspect.js';\nimport { TimeseriesSelectionArea } from './TimeseriesSelection/TimeseriesSelectionArea.js';\nimport { getPointsParsed } from './utils/get-points-parsed.js';\nimport { EMPTY_DATAPOINT } from './utils/tooltip/constants.js';\nimport { useGridPlotSize } from '../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { InteractionsOverlay } from '../../../core/components/interactions-overlay/InteractionsOverlay.js';\nimport {\n  INTERACTION_MODE,\n  type InteractionMode,\n  type InteractionTriggers,\n  isSelectCancelled,\n  type ZoomBehavior,\n} from '../../../core/components/interactions-overlay/types.js';\nimport { isOwnEvent } from '../../../core/components/interactions-overlay/utils/is-own-event.js';\nimport {\n  reduceExploreCancelAll,\n  reduceExploreCancelSelect,\n  reduceExploreCancelTooltip,\n  reduceExploreEnd,\n  reduceExplorePin,\n  reduceExplorePosition,\n  reduceExploreReset,\n  reduceExploreSelect,\n  reduceExploreUnPin,\n} from '../../../core/components/interactions-state-helpers/reducers/explore-reducers.js';\nimport { reduceInteractionMode } from '../../../core/components/interactions-state-helpers/reducers/mode-reducers.js';\nimport type {\n  _SelectionRef,\n  SelectionAreaVariant,\n} from '../../../core/components/selection-area/types.js';\nimport { SynchronizedSelectionArea } from '../../../core/components/shared-chart-interactions/components/SynchronizedSelectionArea.js';\nimport { VerticalSynchronizedCrosshair } from '../../../core/components/shared-chart-interactions/components/VerticalSynchronizedCrosshair.js';\nimport { useSynchronizedCrosshair } from '../../../core/components/shared-chart-interactions/hooks/useSynchronizedCrosshair.js';\nimport { useSynchronizedSelection } from '../../../core/components/shared-chart-interactions/hooks/useSynchronizedSelection.js';\nimport { useToolbarHandlerRef } from '../../../core/components/toolbar/hooks/useToolbarHandlerRef.js';\nimport type { RelativeAbsolutePosition } from '../../../core/types/pointer-events.js';\nimport { getPercentageFromPixel } from '../../../core/utils/get-percentage-from-pixel.js';\nimport { zIndicesTimeseriesAreas } from '../../constants.js';\nimport { TimeseriesChartOverlayRefContext } from '../../context/TimeseriesChartOverlayRefContext.js';\nimport { TimeseriesChartSelectionAreaRef } from '../../context/TimeseriesChartSelectionAreaRef.context.js';\nimport {\n  useExploreState,\n  useInteractionModeState,\n  useSelectState,\n  useSetState,\n  useZoomState,\n} from '../../hooks/store/selectors.js';\nimport { useZoomToSelection } from '../../hooks/store/state-setters.js';\nimport { useChartInteractions } from '../../hooks/useChartInteractions.js';\nimport { useChartToolbar } from '../../hooks/useChartToolbar.js';\nimport { useTimeseriesChartId } from '../../hooks/useTimeseriesChartId.js';\nimport { useTimeseriesFilteredData } from '../../hooks/useTimeseriesFilteredData.js';\nimport { useXScales } from '../../hooks/useXScale.js';\nimport { useYScales } from '../../hooks/useYScales.js';\nimport { TimeseriesChartToolbar } from '../toolbar/TimeseriesChartToolbar.js';\n\nexport const TimeseriesChartOverlays = () => {\n  const handlerRef = useToolbarHandlerRef();\n  /* eslint-disable-next-line @typescript-eslint/no-deprecated */\n  const { zoomX, pan, zoom } = useChartInteractions();\n  const selectionRef = useRef<_SelectionRef>(null);\n\n  const { width, height } = useGridPlotSize();\n\n  const toolbar = useChartToolbar();\n\n  const exploreState = useExploreState();\n  const selectState = useSelectState();\n  const mode = useInteractionModeState();\n  const zoomState = useZoomState();\n\n  const setState = useSetState();\n  const applyPanDelta = useApplyPanDelta();\n  const applyZoomDelta = useApplyZoomDelta();\n  const resetInteractions = useResetInteractions();\n\n  useResetOnResize();\n\n  const synchronizedCrosshair = useSynchronizedCrosshair();\n  const synchronizedSelection = useSynchronizedSelection();\n  const chartId = useTimeseriesChartId();\n\n  const overlayRef = useRef<HTMLDivElement>(null);\n\n  const {\n    updateHoverState: updateSynchronizedCrosshair,\n    hoveredChartId,\n    disabled: synchronizedCrosshairDisabled,\n    setDisabled: disableSynchronizedCrosshair,\n  } = synchronizedCrosshair ?? {};\n\n  const {\n    updateSelectionState: updateSynchronizedSelection,\n    resetSelectionState: resetSynchronizedSelection,\n    selectedChartId,\n    disabled: synchronizedSelectionDisabled,\n  } = 'selectedChartId' in synchronizedSelection\n    ? synchronizedSelection\n    : { disabled: true };\n\n  useEffect(() => {\n    if (\n      every([\n        selectState,\n        !synchronizedSelection.selectedChartId,\n        !synchronizedSelectionDisabled,\n      ])\n    ) {\n      // clear current chart selection if the shared selection was removed\n      setState((s) => ({ ...s, select: undefined }));\n    }\n  }, [synchronizedSelection.selectedChartId]);\n\n  useEffect(() => {\n    if (synchronizedSelection.selectedChartId === chartId && !selectState) {\n      // clear shared chart selection if the current selection was removed\n      synchronizedSelection.resetSelectionState?.();\n    }\n  }, [!!selectState]);\n\n  const showVerticalCrosshair =\n    hoveredChartId !== chartId && !synchronizedCrosshairDisabled;\n  const showSynchronizedSelection =\n    selectedChartId !== chartId && !synchronizedSelectionDisabled;\n\n  const { currentScale: xScale } = useXScales();\n  const { datapointsMap, allDatapoints } = useTimeseriesFilteredData();\n  const yScale = useYScales();\n  const { position } = useExploreState();\n  const zoomToSelection = useZoomToSelection();\n\n  const { closestPoint, filteredPoints, groupedPoints } = getPointsParsed(\n    position?.relative,\n    allDatapoints,\n    xScale,\n    yScale,\n    datapointsMap,\n    width,\n    height,\n  );\n\n  const handleModeChange = (event: {\n    mode: InteractionMode;\n    keyboard: boolean;\n  }) => {\n    const canPan = zoomState.zoomOutEnabled;\n    const shouldSwitchToPanMode =\n      event.mode === 'pan' && pan?.enabled && canPan;\n    const shouldSwitchToZoomMode =\n      event.mode === 'zoom' && (zoomX?.enabled || zoom?.enabled);\n\n    if (shouldSwitchToPanMode || shouldSwitchToZoomMode) {\n      setState(reduceInteractionMode(event.mode));\n      setState(reduceExploreReset);\n      resetSynchronizedSelection?.();\n    } else if (event.mode === 'explore') {\n      setState(reduceInteractionMode(INTERACTION_MODE.Explore));\n    }\n  };\n\n  const handleHover = (payload: {\n    triggeredBy: InteractionTriggers;\n    position: RelativeAbsolutePosition;\n  }) => {\n    if (mode === 'explore') {\n      setState(reduceExplorePosition(payload.position));\n    }\n\n    const hoveredDate = xScale.invert(payload.position.relative.x);\n    disableSynchronizedCrosshair?.(false);\n    updateSynchronizedCrosshair?.(chartId, hoveredDate.valueOf());\n  };\n\n  const handleLeave = (_: { triggeredBy: InteractionTriggers }) => {\n    if (mode === 'explore') {\n      setState(reduceExploreEnd);\n    }\n\n    updateSynchronizedCrosshair?.(undefined);\n  };\n\n  const handlePanChange = (event: {\n    triggeredBy: InteractionTriggers;\n    delta: number;\n  }) => {\n    if (pan?.enabled) {\n      applyPanDelta(event.delta);\n    }\n  };\n\n  const handleTogglePin = (event: {\n    triggeredBy: InteractionTriggers;\n    position: RelativeAbsolutePosition | undefined;\n    pin: boolean;\n  }) => {\n    const highlightedSeriesId =\n      closestPoint?.id && closestPoint.id !== EMPTY_DATAPOINT.id\n        ? closestPoint?.id\n        : undefined;\n\n    setState(\n      event.pin\n        ? reduceExplorePin(event.position, highlightedSeriesId)\n        : reduceExploreUnPin(event.position),\n    );\n\n    updateSynchronizedCrosshair?.(undefined);\n  };\n\n  const handleReset = (event: {\n    triggeredBy: InteractionTriggers;\n    mousePosition?: RelativeAbsolutePosition;\n  }) => {\n    disableSynchronizedCrosshair?.(false);\n    resetSynchronizedSelection?.();\n    resetInteractions(event.mousePosition);\n  };\n\n  const handleSelectStart = (event: {\n    triggeredBy: InteractionTriggers;\n    position: RelativeAbsolutePosition;\n  }) => {\n    if (mode === 'explore') {\n      updateSynchronizedSelection?.();\n    } else if (!zoomX?.enabled) {\n      handleTogglePin({\n        triggeredBy: event.triggeredBy,\n        position: event.position,\n        pin: !exploreState.pinned,\n      });\n    }\n\n    disableSynchronizedCrosshair?.(true);\n  };\n\n  const handleSelectChange = (event: {\n    triggeredBy: InteractionTriggers;\n    start: RelativeAbsolutePosition;\n    end: RelativeAbsolutePosition;\n    mode: 'zoom' | 'explore';\n  }): void => {\n    if (zoomX?.enabled || mode === 'explore') {\n      const variant: SelectionAreaVariant =\n        event.mode === 'explore' ? 'select' : 'zoom';\n\n      setState(\n        reduceExploreSelect({\n          start: event.start,\n          end: event.end,\n          finished: false,\n          accessible: false,\n          variant,\n          selectionPercentage: getPercentageFromPixel(\n            [event.start, event.end],\n            width,\n          ),\n        }),\n      );\n\n      updateSynchronizedSelection?.({\n        selection: [event.start, event.end],\n        chartId,\n        scale: xScale,\n      });\n    }\n  };\n\n  const handleSelectEnd = (\n    event:\n      | {\n          triggeredBy: InteractionTriggers;\n          start: RelativeAbsolutePosition;\n          end: RelativeAbsolutePosition;\n        }\n      | { cancelled: true },\n  ): void => {\n    if (isSelectCancelled(event)) {\n      setState(reduceExploreCancelSelect);\n      resetSynchronizedSelection?.();\n    } else if (mode === 'explore') {\n      setState(\n        reduceExploreSelect({\n          start: event.start,\n          end: event.end,\n          finished: true,\n          accessible: false,\n          selectionPercentage: getPercentageFromPixel(\n            [event.start, event.end],\n            width,\n          ),\n        }),\n      );\n      selectionRef.current?.focus();\n\n      updateSynchronizedSelection?.({\n        selection: [event.start, event.end],\n        chartId,\n        scale: xScale,\n      });\n    } else if (zoomX?.enabled) {\n      // in case select is disabled and zoomX is enabled, only zoom to selection interaction is possible\n      zoomToSelection();\n    }\n  };\n\n  const handleZoomChange = (event: {\n    triggeredBy: InteractionTriggers;\n    deltaStart: number;\n    deltaEnd: number;\n    behavior: ZoomBehavior;\n  }) => {\n    setState(reduceExploreCancelAll);\n\n    applyZoomDelta(event.deltaStart, event.deltaEnd, event.behavior);\n  };\n\n  const handleToolbarMouseEnter = () => {\n    setState(reduceExploreCancelTooltip);\n  };\n\n  const handleFocus = (event?: FocusEvent) => {\n    if (!event || event.cancelable) {\n      return;\n    }\n    if (isOwnEvent(event)) {\n      handlerRef.current.handleFocus();\n    }\n  };\n\n  return (\n    <InteractionsOverlay\n      style={{\n        zIndex: zIndicesTimeseriesAreas.overlays,\n        userSelect: selectState?.finished === false ? 'none' : 'auto',\n      }}\n      ref={overlayRef}\n      mode={mode}\n      pinned={exploreState.pinned}\n      selectionArea={\n        selectState ? [selectState?.start, selectState?.end] : undefined\n      }\n      width={width}\n      height={height}\n      isZoomDisabled={!zoom?.enabled}\n      isZoomXDisabled={!zoomX?.enabled}\n      isPanDisabled={!(pan?.enabled && zoomState.zoomOutEnabled)}\n      onModeChange={handleModeChange}\n      onFocus={handleFocus}\n      onHover={handleHover}\n      onLeave={handleLeave}\n      onPanChange={handlePanChange}\n      onTogglePin={handleTogglePin}\n      onReset={handleReset}\n      onSelectStart={handleSelectStart}\n      onZoomChange={handleZoomChange}\n      onSelectEnd={handleSelectEnd}\n      onSelectChange={handleSelectChange}\n    >\n      <TimeseriesChartOverlayRefContext.Provider value={overlayRef}>\n        {exploreState.visible ? (\n          <>\n            <TimeseriesInspect\n              filteredPoints={filteredPoints}\n              closestPoint={closestPoint}\n              groupedPoints={groupedPoints}\n            />\n            <TimeseriesCrosshair closestPoint={closestPoint} />\n          </>\n        ) : null}\n        {showVerticalCrosshair && (\n          <VerticalSynchronizedCrosshair scale={xScale} />\n        )}\n\n        <TimeseriesChartSelectionAreaRef.Provider value={selectionRef}>\n          {toolbar?.enabled ? (\n            <TimeseriesChartToolbar\n              onMouseEnter={handleToolbarMouseEnter}\n              handlerRef={handlerRef}\n            />\n          ) : null}\n          <TimeseriesSelectionArea />\n        </TimeseriesChartSelectionAreaRef.Provider>\n        {showSynchronizedSelection && (\n          <SynchronizedSelectionArea scale={xScale} />\n        )}\n      </TimeseriesChartOverlayRefContext.Provider>\n    </InteractionsOverlay>\n  );\n};\n\nTimeseriesChartOverlays['displayName'] = 'TimeseriesChartOverlays';\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { every } from 'lodash-es';\nimport { useEffect, useRef, type FocusEvent } from 'react';\n\nimport { useApplyPanDelta } from './hooks/useApplyPanDelta.js';\nimport { useApplyZoomDelta } from './hooks/useApplyZoomDelta.js';\nimport { useResetInteractions } from './hooks/useResetInteractions.js';\nimport { useResetOnResize } from './hooks/useResetOnResize.js';\nimport { TimeseriesCrosshair } from './TimeseriesExplore/TimeseriesCrosshair.js';\nimport { TimeseriesInspect } from './TimeseriesExplore/TimeseriesInspect.js';\nimport { TimeseriesSelectionArea } from './TimeseriesSelection/TimeseriesSelectionArea.js';\nimport { getPointsParsed } from './utils/get-points-parsed.js';\nimport { EMPTY_DATAPOINT } from './utils/tooltip/constants.js';\nimport { useGridPlotSize } from '../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { InteractionsOverlay } from '../../../core/components/interactions-overlay/InteractionsOverlay.js';\nimport {\n  INTERACTION_MODE,\n  type InteractionMode,\n  type InteractionTriggers,\n  isSelectCancelled,\n  type ZoomBehavior,\n} from '../../../core/components/interactions-overlay/types.js';\nimport { isOwnEvent } from '../../../core/components/interactions-overlay/utils/is-own-event.js';\nimport {\n  reduceExploreCancelAll,\n  reduceExploreCancelSelect,\n  reduceExploreCancelTooltip,\n  reduceExploreEnd,\n  reduceExplorePin,\n  reduceExplorePosition,\n  reduceExploreReset,\n  reduceExploreSelect,\n  reduceExploreUnPin,\n} from '../../../core/components/interactions-state-helpers/reducers/explore-reducers.js';\nimport { reduceInteractionMode } from '../../../core/components/interactions-state-helpers/reducers/mode-reducers.js';\nimport type {\n  _SelectionRef,\n  SelectionAreaVariant,\n} from '../../../core/components/selection-area/types.js';\nimport { SynchronizedSelectionArea } from '../../../core/components/shared-chart-interactions/components/SynchronizedSelectionArea.js';\nimport { VerticalSynchronizedCrosshair } from '../../../core/components/shared-chart-interactions/components/VerticalSynchronizedCrosshair.js';\nimport { useSynchronizedCrosshair } from '../../../core/components/shared-chart-interactions/hooks/useSynchronizedCrosshair.js';\nimport { useSynchronizedSelection } from '../../../core/components/shared-chart-interactions/hooks/useSynchronizedSelection.js';\nimport { useToolbarHandlerRef } from '../../../core/components/toolbar/hooks/useToolbarHandlerRef.js';\nimport type { RelativeAbsolutePosition } from '../../../core/types/pointer-events.js';\nimport { getPercentageFromPixel } from '../../../core/utils/get-percentage-from-pixel.js';\nimport {\n  TIMESERIES_INTERACTIONS_ARIA_LABEL,\n  zIndicesTimeseriesAreas,\n} from '../../constants.js';\nimport { TimeseriesChartOverlayRefContext } from '../../context/TimeseriesChartOverlayRefContext.js';\nimport { TimeseriesChartSelectionAreaRef } from '../../context/TimeseriesChartSelectionAreaRef.context.js';\nimport {\n  useExploreState,\n  useInteractionModeState,\n  useSelectState,\n  useSetState,\n  useZoomState,\n} from '../../hooks/store/selectors.js';\nimport { useZoomToSelection } from '../../hooks/store/state-setters.js';\nimport { useChartInteractions } from '../../hooks/useChartInteractions.js';\nimport { useChartToolbar } from '../../hooks/useChartToolbar.js';\nimport { useTimeseriesChartId } from '../../hooks/useTimeseriesChartId.js';\nimport { useTimeseriesFilteredData } from '../../hooks/useTimeseriesFilteredData.js';\nimport { useXScales } from '../../hooks/useXScale.js';\nimport { useYScales } from '../../hooks/useYScales.js';\nimport { TimeseriesChartToolbar } from '../toolbar/TimeseriesChartToolbar.js';\n\nexport const TimeseriesChartOverlays = () => {\n  const handlerRef = useToolbarHandlerRef();\n  /* eslint-disable-next-line @typescript-eslint/no-deprecated */\n  const { zoomX, pan, zoom } = useChartInteractions();\n  const selectionRef = useRef<_SelectionRef>(null);\n\n  const { width, height } = useGridPlotSize();\n\n  const toolbar = useChartToolbar();\n\n  const exploreState = useExploreState();\n  const selectState = useSelectState();\n  const mode = useInteractionModeState();\n  const zoomState = useZoomState();\n\n  const setState = useSetState();\n  const applyPanDelta = useApplyPanDelta();\n  const applyZoomDelta = useApplyZoomDelta();\n  const resetInteractions = useResetInteractions();\n\n  useResetOnResize();\n\n  const synchronizedCrosshair = useSynchronizedCrosshair();\n  const synchronizedSelection = useSynchronizedSelection();\n  const chartId = useTimeseriesChartId();\n\n  const overlayRef = useRef<HTMLDivElement>(null);\n\n  const {\n    updateHoverState: updateSynchronizedCrosshair,\n    hoveredChartId,\n    disabled: synchronizedCrosshairDisabled,\n    setDisabled: disableSynchronizedCrosshair,\n  } = synchronizedCrosshair ?? {};\n\n  const {\n    updateSelectionState: updateSynchronizedSelection,\n    resetSelectionState: resetSynchronizedSelection,\n    selectedChartId,\n    disabled: synchronizedSelectionDisabled,\n  } = 'selectedChartId' in synchronizedSelection\n    ? synchronizedSelection\n    : { disabled: true };\n\n  useEffect(() => {\n    if (\n      every([\n        selectState,\n        !synchronizedSelection.selectedChartId,\n        !synchronizedSelectionDisabled,\n      ])\n    ) {\n      // clear current chart selection if the shared selection was removed\n      setState((s) => ({ ...s, select: undefined }));\n    }\n  }, [synchronizedSelection.selectedChartId]);\n\n  useEffect(() => {\n    if (synchronizedSelection.selectedChartId === chartId && !selectState) {\n      // clear shared chart selection if the current selection was removed\n      synchronizedSelection.resetSelectionState?.();\n    }\n  }, [!!selectState]);\n\n  const showVerticalCrosshair =\n    hoveredChartId !== chartId && !synchronizedCrosshairDisabled;\n  const showSynchronizedSelection =\n    selectedChartId !== chartId && !synchronizedSelectionDisabled;\n\n  const { currentScale: xScale } = useXScales();\n  const { datapointsMap, allDatapoints } = useTimeseriesFilteredData();\n  const yScale = useYScales();\n  const { position } = useExploreState();\n  const zoomToSelection = useZoomToSelection();\n\n  const { closestPoint, filteredPoints, groupedPoints } = getPointsParsed(\n    position?.relative,\n    allDatapoints,\n    xScale,\n    yScale,\n    datapointsMap,\n    width,\n    height,\n  );\n\n  const handleModeChange = (event: {\n    mode: InteractionMode;\n    keyboard: boolean;\n  }) => {\n    const canPan = zoomState.zoomOutEnabled;\n    const shouldSwitchToPanMode =\n      event.mode === 'pan' && pan?.enabled && canPan;\n    const shouldSwitchToZoomMode =\n      event.mode === 'zoom' && (zoomX?.enabled || zoom?.enabled);\n\n    if (shouldSwitchToPanMode || shouldSwitchToZoomMode) {\n      setState(reduceInteractionMode(event.mode));\n      setState(reduceExploreReset);\n      resetSynchronizedSelection?.();\n    } else if (event.mode === 'explore') {\n      setState(reduceInteractionMode(INTERACTION_MODE.Explore));\n    }\n  };\n\n  const handleHover = (payload: {\n    triggeredBy: InteractionTriggers;\n    position: RelativeAbsolutePosition;\n  }) => {\n    if (mode === 'explore') {\n      setState(reduceExplorePosition(payload.position));\n    }\n\n    const hoveredDate = xScale.invert(payload.position.relative.x);\n    disableSynchronizedCrosshair?.(false);\n    updateSynchronizedCrosshair?.(chartId, hoveredDate.valueOf());\n  };\n\n  const handleLeave = (_: { triggeredBy: InteractionTriggers }) => {\n    if (mode === 'explore') {\n      setState(reduceExploreEnd);\n    }\n\n    updateSynchronizedCrosshair?.(undefined);\n  };\n\n  const handlePanChange = (event: {\n    triggeredBy: InteractionTriggers;\n    delta: number;\n  }) => {\n    if (pan?.enabled) {\n      applyPanDelta(event.delta);\n    }\n  };\n\n  const handleTogglePin = (event: {\n    triggeredBy: InteractionTriggers;\n    position: RelativeAbsolutePosition | undefined;\n    pin: boolean;\n  }) => {\n    const highlightedSeriesId =\n      closestPoint?.id && closestPoint.id !== EMPTY_DATAPOINT.id\n        ? closestPoint?.id\n        : undefined;\n\n    setState(\n      event.pin\n        ? reduceExplorePin(event.position, highlightedSeriesId)\n        : reduceExploreUnPin(event.position),\n    );\n\n    updateSynchronizedCrosshair?.(undefined);\n  };\n\n  const handleReset = (event: {\n    triggeredBy: InteractionTriggers;\n    mousePosition?: RelativeAbsolutePosition;\n  }) => {\n    disableSynchronizedCrosshair?.(false);\n    resetSynchronizedSelection?.();\n    resetInteractions(event.mousePosition);\n  };\n\n  const handleSelectStart = (event: {\n    triggeredBy: InteractionTriggers;\n    position: RelativeAbsolutePosition;\n  }) => {\n    if (mode === 'explore') {\n      updateSynchronizedSelection?.();\n    } else if (!zoomX?.enabled) {\n      handleTogglePin({\n        triggeredBy: event.triggeredBy,\n        position: event.position,\n        pin: !exploreState.pinned,\n      });\n    }\n\n    disableSynchronizedCrosshair?.(true);\n  };\n\n  const handleSelectChange = (event: {\n    triggeredBy: InteractionTriggers;\n    start: RelativeAbsolutePosition;\n    end: RelativeAbsolutePosition;\n    mode: 'zoom' | 'explore';\n  }): void => {\n    if (zoomX?.enabled || mode === 'explore') {\n      const variant: SelectionAreaVariant =\n        event.mode === 'explore' ? 'select' : 'zoom';\n\n      setState(\n        reduceExploreSelect({\n          start: event.start,\n          end: event.end,\n          finished: false,\n          accessible: false,\n          variant,\n          selectionPercentage: getPercentageFromPixel(\n            [event.start, event.end],\n            width,\n          ),\n        }),\n      );\n\n      updateSynchronizedSelection?.({\n        selection: [event.start, event.end],\n        chartId,\n        scale: xScale,\n      });\n    }\n  };\n\n  const handleSelectEnd = (\n    event:\n      | {\n          triggeredBy: InteractionTriggers;\n          start: RelativeAbsolutePosition;\n          end: RelativeAbsolutePosition;\n        }\n      | { cancelled: true },\n  ): void => {\n    if (isSelectCancelled(event)) {\n      setState(reduceExploreCancelSelect);\n      resetSynchronizedSelection?.();\n    } else if (mode === 'explore') {\n      setState(\n        reduceExploreSelect({\n          start: event.start,\n          end: event.end,\n          finished: true,\n          accessible: false,\n          selectionPercentage: getPercentageFromPixel(\n            [event.start, event.end],\n            width,\n          ),\n        }),\n      );\n      selectionRef.current?.focus();\n\n      updateSynchronizedSelection?.({\n        selection: [event.start, event.end],\n        chartId,\n        scale: xScale,\n      });\n    } else if (zoomX?.enabled) {\n      // in case select is disabled and zoomX is enabled, only zoom to selection interaction is possible\n      zoomToSelection();\n    }\n  };\n\n  const handleZoomChange = (event: {\n    triggeredBy: InteractionTriggers;\n    deltaStart: number;\n    deltaEnd: number;\n    behavior: ZoomBehavior;\n  }) => {\n    setState(reduceExploreCancelAll);\n\n    applyZoomDelta(event.deltaStart, event.deltaEnd, event.behavior);\n  };\n\n  const handleToolbarMouseEnter = () => {\n    setState(reduceExploreCancelTooltip);\n  };\n\n  const handleFocus = (event?: FocusEvent) => {\n    if (!event || event.cancelable) {\n      return;\n    }\n    if (isOwnEvent(event)) {\n      handlerRef.current.handleFocus();\n    }\n  };\n\n  return (\n    <InteractionsOverlay\n      aria-label={TIMESERIES_INTERACTIONS_ARIA_LABEL}\n      style={{\n        zIndex: zIndicesTimeseriesAreas.overlays,\n        userSelect: selectState?.finished === false ? 'none' : 'auto',\n      }}\n      ref={overlayRef}\n      mode={mode}\n      pinned={exploreState.pinned}\n      selectionArea={\n        selectState ? [selectState?.start, selectState?.end] : undefined\n      }\n      width={width}\n      height={height}\n      isZoomDisabled={!zoom?.enabled}\n      isZoomXDisabled={!zoomX?.enabled}\n      isPanDisabled={!(pan?.enabled && zoomState.zoomOutEnabled)}\n      onModeChange={handleModeChange}\n      onFocus={handleFocus}\n      onHover={handleHover}\n      onLeave={handleLeave}\n      onPanChange={handlePanChange}\n      onTogglePin={handleTogglePin}\n      onReset={handleReset}\n      onSelectStart={handleSelectStart}\n      onZoomChange={handleZoomChange}\n      onSelectEnd={handleSelectEnd}\n      onSelectChange={handleSelectChange}\n    >\n      <TimeseriesChartOverlayRefContext.Provider value={overlayRef}>\n        {exploreState.visible ? (\n          <>\n            <TimeseriesInspect\n              filteredPoints={filteredPoints}\n              closestPoint={closestPoint}\n              groupedPoints={groupedPoints}\n            />\n            <TimeseriesCrosshair closestPoint={closestPoint} />\n          </>\n        ) : null}\n        {showVerticalCrosshair && (\n          <VerticalSynchronizedCrosshair scale={xScale} />\n        )}\n\n        <TimeseriesChartSelectionAreaRef.Provider value={selectionRef}>\n          {toolbar?.enabled ? (\n            <TimeseriesChartToolbar\n              onMouseEnter={handleToolbarMouseEnter}\n              handlerRef={handlerRef}\n            />\n          ) : null}\n          <TimeseriesSelectionArea />\n        </TimeseriesChartSelectionAreaRef.Provider>\n        {showSynchronizedSelection && (\n          <SynchronizedSelectionArea scale={xScale} />\n        )}\n      </TimeseriesChartOverlayRefContext.Provider>\n    </InteractionsOverlay>\n  );\n};\n\nTimeseriesChartOverlays['displayName'] = 'TimeseriesChartOverlays';\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -1,8 +1,8 @@
-._17fdb110-3-3-2 {
+._17fdb110-3-4-0 {
   z-index: 1;
   pointer-events: none;
 }
-._17fdb111-3-3-2 {
+._17fdb111-3-4-0 {
   top: -3.5px;
   left: -3.5px;
   width: calc(100% + 7px);
@@ -10,7 +10,7 @@
   z-index: 1;
   pointer-events: none;
 }
-._17fdb112-3-3-2 {
+._17fdb112-3-4-0 {
   top: -7px;
   left: -7px;
   width: calc(100% + 14px);
@@ -18,7 +18,7 @@
   z-index: 2;
   pointer-events: none;
 }
-._17fdb113-3-3-2 {
+._17fdb113-3-4-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-3-2 _13lzg4k0-3-3-2";
-var crosshairLayout = "_17fdb113-3-3-2 _13lzg4k0-3-3-2";
-var datapointCanvasPlot = "_17fdb111-3-3-2 _13lzg4k0-3-3-2";
-var datapointIndicatorLayout = "_17fdb112-3-3-2 _13lzg4k0-3-3-2";
+var canvasPlot = "_17fdb110-3-4-0 _13lzg4k0-3-4-0";
+var crosshairLayout = "_17fdb113-3-4-0 _13lzg4k0-3-4-0";
+var datapointCanvasPlot = "_17fdb111-3-4-0 _13lzg4k0-3-4-0";
+var datapointIndicatorLayout = "_17fdb112-3-4-0 _13lzg4k0-3-4-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-3-2 _13lzg4k0-3-3-2';\nexport var crosshairLayout = '_17fdb113-3-3-2 _13lzg4k0-3-3-2';\nexport var datapointCanvasPlot = '_17fdb111-3-3-2 _13lzg4k0-3-3-2';\nexport var datapointIndicatorLayout = '_17fdb112-3-3-2 _13lzg4k0-3-3-2';"],
+  "sourcesContent": ["import '../../../core/components/chart-grid/ChartGrid.css';\nimport './TimeseriesOverlays.css';\nexport var canvasPlot = '_17fdb110-3-4-0 _13lzg4k0-3-4-0';\nexport var crosshairLayout = '_17fdb113-3-4-0 _13lzg4k0-3-4-0';\nexport var datapointCanvasPlot = '_17fdb111-3-4-0 _13lzg4k0-3-4-0';\nexport var datapointIndicatorLayout = '_17fdb112-3-4-0 _13lzg4k0-3-4-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-3-2 {
+._9p8qi20-3-4-0 {
   z-index: 2;
 }
-._9p8qi21-3-3-2 {
+._9p8qi21-3-4-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-3-2 _13lzg4k0-3-3-2";
-var thresholdPlotRange = "_9p8qi21-3-3-2 _13lzg4k0-3-3-2";
+var thresholdPlotLine = "_9p8qi20-3-4-0 _13lzg4k0-3-4-0";
+var thresholdPlotRange = "_9p8qi21-3-4-0 _13lzg4k0-3-4-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-3-2 _13lzg4k0-3-3-2';\nexport var thresholdPlotRange = '_9p8qi21-3-3-2 _13lzg4k0-3-3-2';"],
+  "sourcesContent": ["import '../../../core/components/chart-grid/ChartGrid.css';\nimport './ThresholdIndicators.css';\nexport var thresholdPlotLine = '_9p8qi20-3-4-0 _13lzg4k0-3-4-0';\nexport var thresholdPlotRange = '_9p8qi21-3-4-0 _13lzg4k0-3-4-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,oBAAoB;AACxB,IAAI,qBAAqB;",
   "names": []
 }

package/esm/charts/timeseries/constants.js

@@ -82,6 +82,7 @@ const initialState = {
   thresholds: { hoveredThresholdId: void 0 }
 };
 const TIMESERIES_ARIA_LABEL = "Timeseries Chart";
+const TIMESERIES_INTERACTIONS_ARIA_LABEL = "Timeseries Chart interactions";
 const TIMESERIES_TIME_AXIS_ARIA_LABEL = "timeseries-time-axis";
 const AREA_CHART_DISPLAY_ARIA_LABEL = "area-chart-display";
 const LINE_CHART_DISPLAY_ARIA_LABEL = "line-chart-display";
@@ -94,6 +95,7 @@ export {
   LINE_CHART_DISPLAY_ARIA_LABEL,
   TIMESERIES_ARIA_LABEL,
   TIMESERIES_CHART_DEFAULT_VARIANT,
+  TIMESERIES_INTERACTIONS_ARIA_LABEL,
   TIMESERIES_TIME_AXIS_ARIA_LABEL,
   defaultColorPalette,
   defaultGapPolicy,

package/esm/charts/timeseries/constants.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/charts/timeseries/constants.ts"],
-  "sourcesContent": ["import type { TimeseriesChartState } from './types/state.js';\nimport {\n  TimeseriesChartConfigProperties,\n  TimeseriesChartLegendConfig,\n  TimeseriesChartThresholdsConfig,\n  TimeseriesChartYAxisConfig,\n} from './types/timeseries-config.js';\nimport { TimeseriesToolbarInternalProps } from './types/toolbar.js';\nimport { initialSelectionState } from '../core/components/annotations/providers/AnnotationsDataInitialState.js';\nimport type { PointsDisplay } from '../core/components/canvas/types/canvas-shape.js';\nimport { defaultRatio, SCALE_FALLBACK_COLOR } from '../core/constants.js';\nimport {\n  GAP_POLICY_GAP,\n  type TimeGapPolicy,\n} from '../core/types/gap-policy.js';\nimport { ChartInteractionsConfig } from '../core/types/interactions.js';\nimport { ValueRepresentation } from '../core/types/scales.js';\nimport { SeriesCurve } from '../core/types/timeseries.js';\nimport { ToolbarPlacement } from '../core/types/toolbar.js';\nimport { TooltipVariant } from '../core/types/tooltip.js';\n\nexport const DISPLAY_NAME = 'TimeseriesChart';\n\nexport const defaultTooltipVariant: TooltipVariant = 'single';\nexport const defaultSeriesDisplayMode = 'multi-line';\n\nexport const defaultYAxis: TimeseriesChartYAxisConfig = {};\n\nexport const defaultGapPolicy: TimeGapPolicy = GAP_POLICY_GAP;\nexport const defaultSeriesCurve: SeriesCurve = 'linear';\nexport const defaultPointsDisplay: PointsDisplay = 'auto';\nexport const defaultValueRepresentation: ValueRepresentation = 'absolute';\nexport const defaultInfiniteZoom = false;\n\nexport const DEFAULT_SCALE_FALLBACK_COLOR = SCALE_FALLBACK_COLOR;\n\nexport const defaultLegend: TimeseriesChartLegendConfig = {\n  hidden: false,\n  position: 'auto',\n  ratio: defaultRatio,\n};\n\nexport const defaultToolbar: TimeseriesToolbarInternalProps = {\n  placement: 'top-right' as ToolbarPlacement,\n  enabled: true,\n};\n\nexport const defaultInteractions: ChartInteractionsConfig = {\n  onZoomChange: undefined,\n  pan: {\n    enabled: true,\n  },\n  zoom: {\n    enabled: true,\n  },\n};\n\nexport const defaultColorPalette = 'categorical';\n\nexport const defaultTimeseriesChartConfig: TimeseriesChartConfigProperties = {\n  legend: defaultLegend,\n  colorPalette: defaultColorPalette,\n  gapPolicy: defaultGapPolicy,\n  pointsDisplay: defaultPointsDisplay,\n  valueRepresentation: defaultValueRepresentation,\n  tooltip: {\n    variant: defaultTooltipVariant,\n    seriesDisplayMode: defaultSeriesDisplayMode,\n  },\n  toolbar: defaultToolbar,\n  interactions: defaultInteractions,\n};\n\nexport const defaultTimeseriesPerVariant = {\n  line: [],\n  area: [],\n  bar: [],\n  band: [],\n  shapePriority: [],\n};\n\nexport const defaultThreshold: TimeseriesChartThresholdsConfig = {\n  left: [],\n  right: [],\n};\n\nexport const TIMESERIES_CHART_DEFAULT_VARIANT = 'line';\n\nexport const zIndicesTimeseriesAreas = {\n  thresholdRange: 0,\n  plot: 1,\n  thresholdLine: 2,\n  overlays: 3,\n};\n\nexport const initialState: TimeseriesChartState = {\n  filteredSeriesIds: new Set(),\n  highlightedSeriesId: undefined,\n  annotations: initialSelectionState,\n  zoom: {\n    zoomInEnabled: true,\n    zoomOutEnabled: false,\n  },\n  currentDomain: undefined,\n  select: undefined,\n  interactionMode: 'explore',\n  explore: {\n    visible: false,\n    pinned: false,\n    position: undefined,\n  },\n  thresholds: { hoveredThresholdId: undefined },\n};\n\nexport const TIMESERIES_ARIA_LABEL = 'Timeseries Chart';\n\nexport const TIMESERIES_TIME_AXIS_ARIA_LABEL = 'timeseries-time-axis';\nexport const AREA_CHART_DISPLAY_ARIA_LABEL = 'area-chart-display';\nexport const LINE_CHART_DISPLAY_ARIA_LABEL = 'line-chart-display';\nexport const BAR_CHART_DISPLAY_ARIA_LABEL = 'bar-chart-display';\n"],
-  "mappings": "AAQA,SAAS,6BAA6B;AAEtC,SAAS,cAAc,4BAA4B;AACnD;AAAA,EACE;AAAA,OAEK;AAOA,MAAM,eAAe;AAErB,MAAM,wBAAwC;AAC9C,MAAM,2BAA2B;AAEjC,MAAM,eAA2C,CAAC;AAElD,MAAM,mBAAkC;AACxC,MAAM,qBAAkC;AACxC,MAAM,uBAAsC;AAC5C,MAAM,6BAAkD;AACxD,MAAM,sBAAsB;AAE5B,MAAM,+BAA+B;AAErC,MAAM,gBAA6C;AAAA,EACxD,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,OAAO;AACT;AAEO,MAAM,iBAAiD;AAAA,EAC5D,WAAW;AAAA,EACX,SAAS;AACX;AAEO,MAAM,sBAA+C;AAAA,EAC1D,cAAc;AAAA,EACd,KAAK;AAAA,IACH,SAAS;AAAA,EACX;AAAA,EACA,MAAM;AAAA,IACJ,SAAS;AAAA,EACX;AACF;AAEO,MAAM,sBAAsB;AAE5B,MAAM,+BAAgE;AAAA,EAC3E,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,WAAW;AAAA,EACX,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,SAAS;AAAA,IACP,SAAS;AAAA,IACT,mBAAmB;AAAA,EACrB;AAAA,EACA,SAAS;AAAA,EACT,cAAc;AAChB;AAEO,MAAM,8BAA8B;AAAA,EACzC,MAAM,CAAC;AAAA,EACP,MAAM,CAAC;AAAA,EACP,KAAK,CAAC;AAAA,EACN,MAAM,CAAC;AAAA,EACP,eAAe,CAAC;AAClB;AAEO,MAAM,mBAAoD;AAAA,EAC/D,MAAM,CAAC;AAAA,EACP,OAAO,CAAC;AACV;AAEO,MAAM,mCAAmC;AAEzC,MAAM,0BAA0B;AAAA,EACrC,gBAAgB;AAAA,EAChB,MAAM;AAAA,EACN,eAAe;AAAA,EACf,UAAU;AACZ;AAEO,MAAM,eAAqC;AAAA,EAChD,mBAAmB,oBAAI,IAAI;AAAA,EAC3B,qBAAqB;AAAA,EACrB,aAAa;AAAA,EACb,MAAM;AAAA,IACJ,eAAe;AAAA,IACf,gBAAgB;AAAA,EAClB;AAAA,EACA,eAAe;AAAA,EACf,QAAQ;AAAA,EACR,iBAAiB;AAAA,EACjB,SAAS;AAAA,IACP,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,UAAU;AAAA,EACZ;AAAA,EACA,YAAY,EAAE,oBAAoB,OAAU;AAC9C;AAEO,MAAM,wBAAwB;AAE9B,MAAM,kCAAkC;AACxC,MAAM,gCAAgC;AACtC,MAAM,gCAAgC;AACtC,MAAM,+BAA+B;",
+  "sourcesContent": ["import type { TimeseriesChartState } from './types/state.js';\nimport {\n  TimeseriesChartConfigProperties,\n  TimeseriesChartLegendConfig,\n  TimeseriesChartThresholdsConfig,\n  TimeseriesChartYAxisConfig,\n} from './types/timeseries-config.js';\nimport { TimeseriesToolbarInternalProps } from './types/toolbar.js';\nimport { initialSelectionState } from '../core/components/annotations/providers/AnnotationsDataInitialState.js';\nimport type { PointsDisplay } from '../core/components/canvas/types/canvas-shape.js';\nimport { defaultRatio, SCALE_FALLBACK_COLOR } from '../core/constants.js';\nimport {\n  GAP_POLICY_GAP,\n  type TimeGapPolicy,\n} from '../core/types/gap-policy.js';\nimport { ChartInteractionsConfig } from '../core/types/interactions.js';\nimport { ValueRepresentation } from '../core/types/scales.js';\nimport { SeriesCurve } from '../core/types/timeseries.js';\nimport { ToolbarPlacement } from '../core/types/toolbar.js';\nimport { TooltipVariant } from '../core/types/tooltip.js';\n\nexport const DISPLAY_NAME = 'TimeseriesChart';\n\nexport const defaultTooltipVariant: TooltipVariant = 'single';\nexport const defaultSeriesDisplayMode = 'multi-line';\n\nexport const defaultYAxis: TimeseriesChartYAxisConfig = {};\n\nexport const defaultGapPolicy: TimeGapPolicy = GAP_POLICY_GAP;\nexport const defaultSeriesCurve: SeriesCurve = 'linear';\nexport const defaultPointsDisplay: PointsDisplay = 'auto';\nexport const defaultValueRepresentation: ValueRepresentation = 'absolute';\nexport const defaultInfiniteZoom = false;\n\nexport const DEFAULT_SCALE_FALLBACK_COLOR = SCALE_FALLBACK_COLOR;\n\nexport const defaultLegend: TimeseriesChartLegendConfig = {\n  hidden: false,\n  position: 'auto',\n  ratio: defaultRatio,\n};\n\nexport const defaultToolbar: TimeseriesToolbarInternalProps = {\n  placement: 'top-right' as ToolbarPlacement,\n  enabled: true,\n};\n\nexport const defaultInteractions: ChartInteractionsConfig = {\n  onZoomChange: undefined,\n  pan: {\n    enabled: true,\n  },\n  zoom: {\n    enabled: true,\n  },\n};\n\nexport const defaultColorPalette = 'categorical';\n\nexport const defaultTimeseriesChartConfig: TimeseriesChartConfigProperties = {\n  legend: defaultLegend,\n  colorPalette: defaultColorPalette,\n  gapPolicy: defaultGapPolicy,\n  pointsDisplay: defaultPointsDisplay,\n  valueRepresentation: defaultValueRepresentation,\n  tooltip: {\n    variant: defaultTooltipVariant,\n    seriesDisplayMode: defaultSeriesDisplayMode,\n  },\n  toolbar: defaultToolbar,\n  interactions: defaultInteractions,\n};\n\nexport const defaultTimeseriesPerVariant = {\n  line: [],\n  area: [],\n  bar: [],\n  band: [],\n  shapePriority: [],\n};\n\nexport const defaultThreshold: TimeseriesChartThresholdsConfig = {\n  left: [],\n  right: [],\n};\n\nexport const TIMESERIES_CHART_DEFAULT_VARIANT = 'line';\n\nexport const zIndicesTimeseriesAreas = {\n  thresholdRange: 0,\n  plot: 1,\n  thresholdLine: 2,\n  overlays: 3,\n};\n\nexport const initialState: TimeseriesChartState = {\n  filteredSeriesIds: new Set(),\n  highlightedSeriesId: undefined,\n  annotations: initialSelectionState,\n  zoom: {\n    zoomInEnabled: true,\n    zoomOutEnabled: false,\n  },\n  currentDomain: undefined,\n  select: undefined,\n  interactionMode: 'explore',\n  explore: {\n    visible: false,\n    pinned: false,\n    position: undefined,\n  },\n  thresholds: { hoveredThresholdId: undefined },\n};\n\nexport const TIMESERIES_ARIA_LABEL = 'Timeseries Chart';\nexport const TIMESERIES_INTERACTIONS_ARIA_LABEL =\n  'Timeseries Chart interactions';\n\nexport const TIMESERIES_TIME_AXIS_ARIA_LABEL = 'timeseries-time-axis';\nexport const AREA_CHART_DISPLAY_ARIA_LABEL = 'area-chart-display';\nexport const LINE_CHART_DISPLAY_ARIA_LABEL = 'line-chart-display';\nexport const BAR_CHART_DISPLAY_ARIA_LABEL = 'bar-chart-display';\n"],
+  "mappings": "AAQA,SAAS,6BAA6B;AAEtC,SAAS,cAAc,4BAA4B;AACnD;AAAA,EACE;AAAA,OAEK;AAOA,MAAM,eAAe;AAErB,MAAM,wBAAwC;AAC9C,MAAM,2BAA2B;AAEjC,MAAM,eAA2C,CAAC;AAElD,MAAM,mBAAkC;AACxC,MAAM,qBAAkC;AACxC,MAAM,uBAAsC;AAC5C,MAAM,6BAAkD;AACxD,MAAM,sBAAsB;AAE5B,MAAM,+BAA+B;AAErC,MAAM,gBAA6C;AAAA,EACxD,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,OAAO;AACT;AAEO,MAAM,iBAAiD;AAAA,EAC5D,WAAW;AAAA,EACX,SAAS;AACX;AAEO,MAAM,sBAA+C;AAAA,EAC1D,cAAc;AAAA,EACd,KAAK;AAAA,IACH,SAAS;AAAA,EACX;AAAA,EACA,MAAM;AAAA,IACJ,SAAS;AAAA,EACX;AACF;AAEO,MAAM,sBAAsB;AAE5B,MAAM,+BAAgE;AAAA,EAC3E,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,WAAW;AAAA,EACX,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,SAAS;AAAA,IACP,SAAS;AAAA,IACT,mBAAmB;AAAA,EACrB;AAAA,EACA,SAAS;AAAA,EACT,cAAc;AAChB;AAEO,MAAM,8BAA8B;AAAA,EACzC,MAAM,CAAC;AAAA,EACP,MAAM,CAAC;AAAA,EACP,KAAK,CAAC;AAAA,EACN,MAAM,CAAC;AAAA,EACP,eAAe,CAAC;AAClB;AAEO,MAAM,mBAAoD;AAAA,EAC/D,MAAM,CAAC;AAAA,EACP,OAAO,CAAC;AACV;AAEO,MAAM,mCAAmC;AAEzC,MAAM,0BAA0B;AAAA,EACrC,gBAAgB;AAAA,EAChB,MAAM;AAAA,EACN,eAAe;AAAA,EACf,UAAU;AACZ;AAEO,MAAM,eAAqC;AAAA,EAChD,mBAAmB,oBAAI,IAAI;AAAA,EAC3B,qBAAqB;AAAA,EACrB,aAAa;AAAA,EACb,MAAM;AAAA,IACJ,eAAe;AAAA,IACf,gBAAgB;AAAA,EAClB;AAAA,EACA,eAAe;AAAA,EACf,QAAQ;AAAA,EACR,iBAAiB;AAAA,EACjB,SAAS;AAAA,IACP,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,UAAU;AAAA,EACZ;AAAA,EACA,YAAY,EAAE,oBAAoB,OAAU;AAC9C;AAEO,MAAM,wBAAwB;AAC9B,MAAM,qCACX;AAEK,MAAM,kCAAkC;AACxC,MAAM,gCAAgC;AACtC,MAAM,gCAAgC;AACtC,MAAM,+BAA+B;",
   "names": []
 }

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

@@ -15,8 +15,6 @@ import { Toolbar } from "./slots/Toolbar.js";
 import { Tooltip } from "./slots/Tooltip.js";
 import { Legend as TreeMapChartLegend } from "./slots/TreeMapChartLegend.js";
 import { buildAndDownloadCsv } from "./utils/build-and-download-csv.js";
-import { getSortedTree } from "./utils/get-sorted-tree.js";
-import { mapToInternalTree } from "./utils/map-to-internal-tree.js";
 import { useBehavioralTrackingProps } from "../../core/hooks/useBehavioralTrackingProps.js";
 import { Intent } from "../../core/slots/Intent/Intent.js";
 import { defaultChartSize } from "../../core/styles/defaultChartValues.sty.js";
@@ -59,12 +57,6 @@ const TreeMapRoot = forwardRef((props, forwardedRef) => {
     }
     return exposedRef;
   });
-  const internalTree = mapToInternalTree(
-    data.tree,
-    config.formatter,
-    unit ?? data.unit
-  );
-  const sortedTree = getSortedTree(internalTree);
   return /* @__PURE__ */ jsx(
     TreeMapChartProviders,
     {
@@ -78,7 +70,6 @@ const TreeMapRoot = forwardRef((props, forwardedRef) => {
           ...behavioralTrackingProps,
           chartLayoutRef,
           ref: treeMapRef,
-          data: sortedTree,
           width,
           height,
           emptyState,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/charts/tree-map/TreeMap.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { isEmpty } from 'lodash-es';\nimport {\n  forwardRef,\n  type JSX,\n  type PropsWithChildren,\n  useImperativeHandle,\n  useRef,\n} from 'react';\n\nimport { TreeMapChartLayout } from './components/TreeMapChartLayout.js';\nimport { DEFAULT_HEIGHT, DEFAULT_WIDTH } from './constants.js';\nimport { useTreeMapChartConfig } from './hooks/useTreeMapChartConfig.js';\nimport { TreeMapChartProviders } from './providers/TreeMapChartProviders.js';\nimport { TreeMapDownloadCSVSlot } from './slots/DownloadCSV.js';\nimport { Toolbar } from './slots/Toolbar.js';\nimport { Tooltip } from './slots/Tooltip.js';\nimport { Legend as TreeMapChartLegend } from './slots/TreeMapChartLegend.js';\nimport type { TreeMapElementRef, TreeMapProps } from './types/treemap.js';\nimport { buildAndDownloadCsv } from './utils/build-and-download-csv.js';\nimport { getSortedTree } from './utils/get-sorted-tree.js';\nimport { mapToInternalTree } from './utils/map-to-internal-tree.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { Intent } from '../../core/slots/Intent/Intent.js';\nimport { defaultChartSize } from '../../core/styles/defaultChartValues.sty.js';\nimport { useAutoLegendRefresh } from '../core/components/chart-layout/hooks/useAutoLegendRefresh.js';\nimport { getChartStatesTemplates } from '../core/components/chart-states/utils/get-chart-states-template.js';\nimport { EmptyStateSlot } from '../core/slots/chart-states/EmptyStateSlot.js';\nimport { ErrorStateSlot } from '../core/slots/chart-states/ErrorStateSlot.js';\nimport { ColorRule } from '../core/slots/ColorRule.js';\nimport { ChartType } from '../core/types/chart-types.js';\n\nconst COMPONENT_NAME = 'TreeMap';\nconst TreeMapRoot = forwardRef<\n  TreeMapElementRef,\n  PropsWithChildren<TreeMapProps>\n>((props, forwardedRef): JSX.Element => {\n  const {\n    data,\n    children,\n    seriesActions,\n    width = DEFAULT_WIDTH,\n    height = DEFAULT_HEIGHT,\n    className,\n    style,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'data-testid': dataTestId = 'treemap-chart-root',\n    unit,\n  } = props;\n\n  const [behavioralTrackingProps] = useBehavioralTrackingProps(props);\n\n  const config = useTreeMapChartConfig(props);\n  const { loading } = config;\n\n  const emptyData =\n    isEmpty(data) ||\n    data.tree.nodes === undefined ||\n    data.tree.nodes.length === 0;\n\n  const { emptyState, errorState } = getChartStatesTemplates(children);\n\n  const treeMapRef = useRef<HTMLDivElement>(null);\n  const chartLayoutRef = useAutoLegendRefresh(data);\n\n  useImperativeHandle(forwardedRef, () => {\n    let exposedRef = {} as TreeMapElementRef;\n\n    if (treeMapRef.current) {\n      exposedRef = {\n        element: treeMapRef.current,\n        getConfig: () => JSON.stringify({ type: ChartType.Treemap, ...config }),\n        downloadData: () => buildAndDownloadCsv(data.tree),\n      };\n    }\n\n    return exposedRef;\n  });\n\n  const internalTree = mapToInternalTree(\n    data.tree,\n    config.formatter,\n    unit ?? data.unit,\n  );\n  const sortedTree = getSortedTree(internalTree);\n\n  return (\n    <TreeMapChartProviders\n      data={data}\n      seriesActions={seriesActions}\n      unit={unit}\n      {...config}\n    >\n      <TreeMapChartLayout\n        {...behavioralTrackingProps}\n        chartLayoutRef={chartLayoutRef}\n        ref={treeMapRef}\n        data={sortedTree}\n        width={width}\n        height={height}\n        emptyState={emptyState}\n        errorState={errorState}\n        isEmpty={emptyData}\n        loading={loading}\n        className={clsx(defaultChartSize, className)}\n        style={style}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        data-testid={dataTestId}\n        data-dt-component={COMPONENT_NAME}\n      />\n    </TreeMapChartProviders>\n  );\n});\n\n/**\n * The `TreeMap` visualizes the distribution of hierarchical data.\n * It uses nested rectangles of different sizes and colors to show\n * how much each category or subcategory contributes to the whole\n * data set.\n * @public\n */\nexport const TreeMap = Object.assign(TreeMapRoot, {\n  Legend: TreeMapChartLegend,\n  Tooltip,\n  Intent,\n  Toolbar,\n  DownloadCSV: TreeMapDownloadCSVSlot,\n  EmptyState: EmptyStateSlot,\n  ErrorState: ErrorStateSlot,\n  ColorRule,\n});\n"],
-  "mappings": "AA8FM;AA9FN,OAAO,UAAU;AACjB,SAAS,eAAe;AACxB;AAAA,EACE;AAAA,EAGA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,0BAA0B;AACnC,SAAS,gBAAgB,qBAAqB;AAC9C,SAAS,6BAA6B;AACtC,SAAS,6BAA6B;AACtC,SAAS,8BAA8B;AACvC,SAAS,eAAe;AACxB,SAAS,eAAe;AACxB,SAAS,UAAU,0BAA0B;AAE7C,SAAS,2BAA2B;AACpC,SAAS,qBAAqB;AAC9B,SAAS,yBAAyB;AAClC,SAAS,kCAAkC;AAC3C,SAAS,cAAc;AACvB,SAAS,wBAAwB;AACjC,SAAS,4BAA4B;AACrC,SAAS,+BAA+B;AACxC,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAC/B,SAAS,iBAAiB;AAC1B,SAAS,iBAAiB;AAE1B,MAAM,iBAAiB;AACvB,MAAM,cAAc,WAGlB,CAAC,OAAO,iBAA8B;AACtC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,eAAe,aAAa;AAAA,IAC5B;AAAA,EACF,IAAI;AAEJ,QAAM,CAAC,uBAAuB,IAAI,2BAA2B,KAAK;AAElE,QAAM,SAAS,sBAAsB,KAAK;AAC1C,QAAM,EAAE,QAAQ,IAAI;AAEpB,QAAM,YACJ,QAAQ,IAAI,KACZ,KAAK,KAAK,UAAU,UACpB,KAAK,KAAK,MAAM,WAAW;AAE7B,QAAM,EAAE,YAAY,WAAW,IAAI,wBAAwB,QAAQ;AAEnE,QAAM,aAAa,OAAuB,IAAI;AAC9C,QAAM,iBAAiB,qBAAqB,IAAI;AAEhD,sBAAoB,cAAc,MAAM;AACtC,QAAI,aAAa,CAAC;AAElB,QAAI,WAAW,SAAS;AACtB,mBAAa;AAAA,QACX,SAAS,WAAW;AAAA,QACpB,WAAW,MAAM,KAAK,UAAU,EAAE,MAAM,UAAU,SAAS,GAAG,OAAO,CAAC;AAAA,QACtE,cAAc,MAAM,oBAAoB,KAAK,IAAI;AAAA,MACnD;AAAA,IACF;AAEA,WAAO;AAAA,EACT,CAAC;AAED,QAAM,eAAe;AAAA,IACnB,KAAK;AAAA,IACL,OAAO;AAAA,IACP,QAAQ,KAAK;AAAA,EACf;AACA,QAAM,aAAa,cAAc,YAAY;AAE7C,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACJ;AAAA,UACA,KAAK;AAAA,UACL,MAAM;AAAA,UACN;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,SAAS;AAAA,UACT;AAAA,UACA,WAAW,KAAK,kBAAkB,SAAS;AAAA,UAC3C;AAAA,UACA,mBAAiB;AAAA,UACjB,oBAAkB;AAAA,UAClB,eAAa;AAAA,UACb,qBAAmB;AAAA;AAAA,MACrB;AAAA;AAAA,EACF;AAEJ,CAAC;AASM,MAAM,UAAU,OAAO,OAAO,aAAa;AAAA,EAChD,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ;AACF,CAAC;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { isEmpty } from 'lodash-es';\nimport {\n  forwardRef,\n  type JSX,\n  type PropsWithChildren,\n  useImperativeHandle,\n  useRef,\n} from 'react';\n\nimport { TreeMapChartLayout } from './components/TreeMapChartLayout.js';\nimport { DEFAULT_HEIGHT, DEFAULT_WIDTH } from './constants.js';\nimport { useTreeMapChartConfig } from './hooks/useTreeMapChartConfig.js';\nimport { TreeMapChartProviders } from './providers/TreeMapChartProviders.js';\nimport { TreeMapDownloadCSVSlot } from './slots/DownloadCSV.js';\nimport { Toolbar } from './slots/Toolbar.js';\nimport { Tooltip } from './slots/Tooltip.js';\nimport { Legend as TreeMapChartLegend } from './slots/TreeMapChartLegend.js';\nimport type { TreeMapElementRef, TreeMapProps } from './types/treemap.js';\nimport { buildAndDownloadCsv } from './utils/build-and-download-csv.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { Intent } from '../../core/slots/Intent/Intent.js';\nimport { defaultChartSize } from '../../core/styles/defaultChartValues.sty.js';\nimport { useAutoLegendRefresh } from '../core/components/chart-layout/hooks/useAutoLegendRefresh.js';\nimport { getChartStatesTemplates } from '../core/components/chart-states/utils/get-chart-states-template.js';\nimport { EmptyStateSlot } from '../core/slots/chart-states/EmptyStateSlot.js';\nimport { ErrorStateSlot } from '../core/slots/chart-states/ErrorStateSlot.js';\nimport { ColorRule } from '../core/slots/ColorRule.js';\nimport { ChartType } from '../core/types/chart-types.js';\n\nconst COMPONENT_NAME = 'TreeMap';\nconst TreeMapRoot = forwardRef<\n  TreeMapElementRef,\n  PropsWithChildren<TreeMapProps>\n>((props, forwardedRef): JSX.Element => {\n  const {\n    data,\n    children,\n    seriesActions,\n    width = DEFAULT_WIDTH,\n    height = DEFAULT_HEIGHT,\n    className,\n    style,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'data-testid': dataTestId = 'treemap-chart-root',\n    unit,\n  } = props;\n\n  const [behavioralTrackingProps] = useBehavioralTrackingProps(props);\n\n  const config = useTreeMapChartConfig(props);\n  const { loading } = config;\n\n  const emptyData =\n    isEmpty(data) ||\n    data.tree.nodes === undefined ||\n    data.tree.nodes.length === 0;\n\n  const { emptyState, errorState } = getChartStatesTemplates(children);\n\n  const treeMapRef = useRef<HTMLDivElement>(null);\n  const chartLayoutRef = useAutoLegendRefresh(data);\n\n  useImperativeHandle(forwardedRef, () => {\n    let exposedRef = {} as TreeMapElementRef;\n\n    if (treeMapRef.current) {\n      exposedRef = {\n        element: treeMapRef.current,\n        getConfig: () => JSON.stringify({ type: ChartType.Treemap, ...config }),\n        downloadData: () => buildAndDownloadCsv(data.tree),\n      };\n    }\n\n    return exposedRef;\n  });\n\n  return (\n    <TreeMapChartProviders\n      data={data}\n      seriesActions={seriesActions}\n      unit={unit}\n      {...config}\n    >\n      <TreeMapChartLayout\n        {...behavioralTrackingProps}\n        chartLayoutRef={chartLayoutRef}\n        ref={treeMapRef}\n        width={width}\n        height={height}\n        emptyState={emptyState}\n        errorState={errorState}\n        isEmpty={emptyData}\n        loading={loading}\n        className={clsx(defaultChartSize, className)}\n        style={style}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        data-testid={dataTestId}\n        data-dt-component={COMPONENT_NAME}\n      />\n    </TreeMapChartProviders>\n  );\n});\n\n/**\n * The `TreeMap` visualizes the distribution of hierarchical data.\n * It uses nested rectangles of different sizes and colors to show\n * how much each category or subcategory contributes to the whole\n * data set.\n * @public\n */\nexport const TreeMap = Object.assign(TreeMapRoot, {\n  Legend: TreeMapChartLegend,\n  Tooltip,\n  Intent,\n  Toolbar,\n  DownloadCSV: TreeMapDownloadCSVSlot,\n  EmptyState: EmptyStateSlot,\n  ErrorState: ErrorStateSlot,\n  ColorRule,\n});\n"],
+  "mappings": "AAqFM;AArFN,OAAO,UAAU;AACjB,SAAS,eAAe;AACxB;AAAA,EACE;AAAA,EAGA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,0BAA0B;AACnC,SAAS,gBAAgB,qBAAqB;AAC9C,SAAS,6BAA6B;AACtC,SAAS,6BAA6B;AACtC,SAAS,8BAA8B;AACvC,SAAS,eAAe;AACxB,SAAS,eAAe;AACxB,SAAS,UAAU,0BAA0B;AAE7C,SAAS,2BAA2B;AACpC,SAAS,kCAAkC;AAC3C,SAAS,cAAc;AACvB,SAAS,wBAAwB;AACjC,SAAS,4BAA4B;AACrC,SAAS,+BAA+B;AACxC,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAC/B,SAAS,iBAAiB;AAC1B,SAAS,iBAAiB;AAE1B,MAAM,iBAAiB;AACvB,MAAM,cAAc,WAGlB,CAAC,OAAO,iBAA8B;AACtC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,eAAe,aAAa;AAAA,IAC5B;AAAA,EACF,IAAI;AAEJ,QAAM,CAAC,uBAAuB,IAAI,2BAA2B,KAAK;AAElE,QAAM,SAAS,sBAAsB,KAAK;AAC1C,QAAM,EAAE,QAAQ,IAAI;AAEpB,QAAM,YACJ,QAAQ,IAAI,KACZ,KAAK,KAAK,UAAU,UACpB,KAAK,KAAK,MAAM,WAAW;AAE7B,QAAM,EAAE,YAAY,WAAW,IAAI,wBAAwB,QAAQ;AAEnE,QAAM,aAAa,OAAuB,IAAI;AAC9C,QAAM,iBAAiB,qBAAqB,IAAI;AAEhD,sBAAoB,cAAc,MAAM;AACtC,QAAI,aAAa,CAAC;AAElB,QAAI,WAAW,SAAS;AACtB,mBAAa;AAAA,QACX,SAAS,WAAW;AAAA,QACpB,WAAW,MAAM,KAAK,UAAU,EAAE,MAAM,UAAU,SAAS,GAAG,OAAO,CAAC;AAAA,QACtE,cAAc,MAAM,oBAAoB,KAAK,IAAI;AAAA,MACnD;AAAA,IACF;AAEA,WAAO;AAAA,EACT,CAAC;AAED,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACJ;AAAA,UACA,KAAK;AAAA,UACL;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,SAAS;AAAA,UACT;AAAA,UACA,WAAW,KAAK,kBAAkB,SAAS;AAAA,UAC3C;AAAA,UACA,mBAAiB;AAAA,UACjB,oBAAkB;AAAA,UAClB,eAAa;AAAA,UACb,qBAAmB;AAAA;AAAA,MACrB;AAAA;AAAA,EACF;AAEJ,CAAC;AASM,MAAM,UAAU,OAAO,OAAO,aAAa;AAAA,EAChD,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ;AACF,CAAC;",
   "names": []
 }

package/esm/charts/tree-map/components/TreeMapCanvas.js

@@ -23,8 +23,13 @@ const TreeMapCanvas = ({
   );
   const { clusters, leafs } = useMemo(() => splitNodesByDepth(nodes), [nodes]);
   useSetHierarchyNodes(clusters, leafs);
-  const labelsToDisplay = [LABELS_DISPLAY.Nodes, LABELS_DISPLAY.All];
+  const labelsToDisplay = [
+    LABELS_DISPLAY.Nodes,
+    LABELS_DISPLAY.All,
+    LABELS_DISPLAY.ClustersAndValues
+  ];
   const showLabel = labelsToDisplay.includes(labelsDisplay);
+  const withValueOnly = labelsDisplay === LABELS_DISPLAY.ClustersAndValues;
   const squares = leafs.map((node) => {
     const { x, y } = getNodePosition(node);
     const { width, height } = getNodeDimension(node);
@@ -45,7 +50,8 @@ const TreeMapCanvas = ({
         name: node.data.name,
         value: node.data.formattedValue ?? "",
         skipDrawing,
-        withLabel: showLabel
+        withLabel: showLabel,
+        withValueOnly
       },
       node.data.id
     );

package/esm/charts/tree-map/components/TreeMapCanvas.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/tree-map/components/TreeMapCanvas.tsx"],
-  "sourcesContent": ["import { HierarchyRectangularNode } from '@visx/hierarchy/lib/types';\nimport { useMemo, type JSX } from 'react';\n\nimport { LABELS_DISPLAY } from '../constants.js';\nimport { TreeMapSquareRenderer } from './canvas/TreeMapSquareRenderer.js';\nimport type { LegendItem } from '../../core/components/legend/categorical/types/legend.js';\nimport { useLabelsDisplay } from '../context/LabelsDisplayContext.js';\nimport { useSetHierarchyNodes } from '../hooks/useSetHierarchyNodes.js';\nimport {\n  type HighlightingMap,\n  type InternalTreeMapNode,\n} from '../types/internal.js';\nimport { getNodeColor } from '../utils/get-node-color.js';\nimport { getNodeDimension } from '../utils/get-node-dimension.js';\nimport { getNodeOpacity } from '../utils/get-node-opacity.js';\nimport { getNodePosition } from '../utils/get-node-position.js';\nimport { shouldDrawLeafNode } from '../utils/should-draw-leaf-node.js';\nimport { splitNodesByDepth } from '../utils/split-nodes-by-depth.js';\nimport { withParentLabel } from '../utils/with-parent-label.js';\n\ninterface TreeMapCanvasProps {\n  treeMapData: HierarchyRectangularNode<InternalTreeMapNode>;\n  highlightedItem?: LegendItem;\n  highlightingMap: HighlightingMap;\n}\n\nexport const TreeMapCanvas = ({\n  treeMapData,\n  highlightedItem,\n  highlightingMap,\n}: TreeMapCanvasProps): JSX.Element => {\n  const labelsDisplay = useLabelsDisplay();\n\n  const nodes = useMemo(\n    () => treeMapData.descendants().reverse(),\n    [treeMapData],\n  );\n  const { clusters, leafs } = useMemo(() => splitNodesByDepth(nodes), [nodes]);\n\n  useSetHierarchyNodes(clusters, leafs);\n\n  const labelsToDisplay: string[] = [LABELS_DISPLAY.Nodes, LABELS_DISPLAY.All];\n  const showLabel = labelsToDisplay.includes(labelsDisplay);\n\n  const squares = leafs.map((node) => {\n    const { x, y } = getNodePosition(node);\n    const { width, height } = getNodeDimension(node);\n    const color = getNodeColor(node);\n    const opacity = getNodeOpacity(node, highlightingMap, highlightedItem);\n\n    const shouldDraw = shouldDrawLeafNode(node);\n    const hasParentLabels = withParentLabel(labelsDisplay);\n    const skipDrawing = !shouldDraw && hasParentLabels;\n\n    return (\n      <TreeMapSquareRenderer\n        x={x}\n        y={y}\n        width={width}\n        height={height}\n        color={color}\n        opacity={opacity}\n        name={node.data.name}\n        value={node.data.formattedValue ?? ''}\n        skipDrawing={skipDrawing}\n        withLabel={showLabel}\n        key={node.data.id}\n      />\n    );\n  });\n\n  // eslint-disable-next-line react/jsx-no-useless-fragment\n  return <>{squares}</>;\n};\n"],
-  "mappings": "AAuDM,SAiBG,UAjBH;AAtDN,SAAS,eAAyB;AAElC,SAAS,sBAAsB;AAC/B,SAAS,6BAA6B;AAEtC,SAAS,wBAAwB;AACjC,SAAS,4BAA4B;AAKrC,SAAS,oBAAoB;AAC7B,SAAS,wBAAwB;AACjC,SAAS,sBAAsB;AAC/B,SAAS,uBAAuB;AAChC,SAAS,0BAA0B;AACnC,SAAS,yBAAyB;AAClC,SAAS,uBAAuB;AAQzB,MAAM,gBAAgB,CAAC;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AACF,MAAuC;AACrC,QAAM,gBAAgB,iBAAiB;AAEvC,QAAM,QAAQ;AAAA,IACZ,MAAM,YAAY,YAAY,EAAE,QAAQ;AAAA,IACxC,CAAC,WAAW;AAAA,EACd;AACA,QAAM,EAAE,UAAU,MAAM,IAAI,QAAQ,MAAM,kBAAkB,KAAK,GAAG,CAAC,KAAK,CAAC;AAE3E,uBAAqB,UAAU,KAAK;AAEpC,QAAM,kBAA4B,CAAC,eAAe,OAAO,eAAe,GAAG;AAC3E,QAAM,YAAY,gBAAgB,SAAS,aAAa;AAExD,QAAM,UAAU,MAAM,IAAI,CAAC,SAAS;AAClC,UAAM,EAAE,GAAG,EAAE,IAAI,gBAAgB,IAAI;AACrC,UAAM,EAAE,OAAO,OAAO,IAAI,iBAAiB,IAAI;AAC/C,UAAM,QAAQ,aAAa,IAAI;AAC/B,UAAM,UAAU,eAAe,MAAM,iBAAiB,eAAe;AAErE,UAAM,aAAa,mBAAmB,IAAI;AAC1C,UAAM,kBAAkB,gBAAgB,aAAa;AACrD,UAAM,cAAc,CAAC,cAAc;AAEnC,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,MAAM,KAAK,KAAK;AAAA,QAChB,OAAO,KAAK,KAAK,kBAAkB;AAAA,QACnC;AAAA,QACA,WAAW;AAAA;AAAA,MACN,KAAK,KAAK;AAAA,IACjB;AAAA,EAEJ,CAAC;AAGD,SAAO,gCAAG,mBAAQ;AACpB;",
+  "sourcesContent": ["import { HierarchyRectangularNode } from '@visx/hierarchy/lib/types';\nimport { useMemo, type JSX } from 'react';\n\nimport { LABELS_DISPLAY } from '../constants.js';\nimport { TreeMapSquareRenderer } from './canvas/TreeMapSquareRenderer.js';\nimport type { LegendItem } from '../../core/components/legend/categorical/types/legend.js';\nimport { useLabelsDisplay } from '../context/LabelsDisplayContext.js';\nimport { useSetHierarchyNodes } from '../hooks/useSetHierarchyNodes.js';\nimport {\n  type HighlightingMap,\n  type InternalTreeMapNode,\n} from '../types/internal.js';\nimport { getNodeColor } from '../utils/get-node-color.js';\nimport { getNodeDimension } from '../utils/get-node-dimension.js';\nimport { getNodeOpacity } from '../utils/get-node-opacity.js';\nimport { getNodePosition } from '../utils/get-node-position.js';\nimport { shouldDrawLeafNode } from '../utils/should-draw-leaf-node.js';\nimport { splitNodesByDepth } from '../utils/split-nodes-by-depth.js';\nimport { withParentLabel } from '../utils/with-parent-label.js';\n\ninterface TreeMapCanvasProps {\n  treeMapData: HierarchyRectangularNode<InternalTreeMapNode>;\n  highlightedItem?: LegendItem;\n  highlightingMap: HighlightingMap;\n}\n\nexport const TreeMapCanvas = ({\n  treeMapData,\n  highlightedItem,\n  highlightingMap,\n}: TreeMapCanvasProps): JSX.Element => {\n  const labelsDisplay = useLabelsDisplay();\n\n  const nodes = useMemo(\n    () => treeMapData.descendants().reverse(),\n    [treeMapData],\n  );\n  const { clusters, leafs } = useMemo(() => splitNodesByDepth(nodes), [nodes]);\n\n  useSetHierarchyNodes(clusters, leafs);\n\n  const labelsToDisplay: string[] = [\n    LABELS_DISPLAY.Nodes,\n    LABELS_DISPLAY.All,\n    LABELS_DISPLAY.ClustersAndValues,\n  ];\n  const showLabel = labelsToDisplay.includes(labelsDisplay);\n  const withValueOnly = labelsDisplay === LABELS_DISPLAY.ClustersAndValues;\n\n  const squares = leafs.map((node) => {\n    const { x, y } = getNodePosition(node);\n    const { width, height } = getNodeDimension(node);\n    const color = getNodeColor(node);\n    const opacity = getNodeOpacity(node, highlightingMap, highlightedItem);\n\n    const shouldDraw = shouldDrawLeafNode(node);\n    const hasParentLabels = withParentLabel(labelsDisplay);\n    const skipDrawing = !shouldDraw && hasParentLabels;\n\n    return (\n      <TreeMapSquareRenderer\n        x={x}\n        y={y}\n        width={width}\n        height={height}\n        color={color}\n        opacity={opacity}\n        name={node.data.name}\n        value={node.data.formattedValue ?? ''}\n        skipDrawing={skipDrawing}\n        withLabel={showLabel}\n        withValueOnly={withValueOnly}\n        key={node.data.id}\n      />\n    );\n  });\n\n  // eslint-disable-next-line react/jsx-no-useless-fragment\n  return <>{squares}</>;\n};\n"],
+  "mappings": "AA4DM,SAkBG,UAlBH;AA3DN,SAAS,eAAyB;AAElC,SAAS,sBAAsB;AAC/B,SAAS,6BAA6B;AAEtC,SAAS,wBAAwB;AACjC,SAAS,4BAA4B;AAKrC,SAAS,oBAAoB;AAC7B,SAAS,wBAAwB;AACjC,SAAS,sBAAsB;AAC/B,SAAS,uBAAuB;AAChC,SAAS,0BAA0B;AACnC,SAAS,yBAAyB;AAClC,SAAS,uBAAuB;AAQzB,MAAM,gBAAgB,CAAC;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AACF,MAAuC;AACrC,QAAM,gBAAgB,iBAAiB;AAEvC,QAAM,QAAQ;AAAA,IACZ,MAAM,YAAY,YAAY,EAAE,QAAQ;AAAA,IACxC,CAAC,WAAW;AAAA,EACd;AACA,QAAM,EAAE,UAAU,MAAM,IAAI,QAAQ,MAAM,kBAAkB,KAAK,GAAG,CAAC,KAAK,CAAC;AAE3E,uBAAqB,UAAU,KAAK;AAEpC,QAAM,kBAA4B;AAAA,IAChC,eAAe;AAAA,IACf,eAAe;AAAA,IACf,eAAe;AAAA,EACjB;AACA,QAAM,YAAY,gBAAgB,SAAS,aAAa;AACxD,QAAM,gBAAgB,kBAAkB,eAAe;AAEvD,QAAM,UAAU,MAAM,IAAI,CAAC,SAAS;AAClC,UAAM,EAAE,GAAG,EAAE,IAAI,gBAAgB,IAAI;AACrC,UAAM,EAAE,OAAO,OAAO,IAAI,iBAAiB,IAAI;AAC/C,UAAM,QAAQ,aAAa,IAAI;AAC/B,UAAM,UAAU,eAAe,MAAM,iBAAiB,eAAe;AAErE,UAAM,aAAa,mBAAmB,IAAI;AAC1C,UAAM,kBAAkB,gBAAgB,aAAa;AACrD,UAAM,cAAc,CAAC,cAAc;AAEnC,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,MAAM,KAAK,KAAK;AAAA,QAChB,OAAO,KAAK,KAAK,kBAAkB;AAAA,QACnC;AAAA,QACA,WAAW;AAAA,QACX;AAAA;AAAA,MACK,KAAK,KAAK;AAAA,IACjB;AAAA,EAEJ,CAAC;AAGD,SAAO,gCAAG,mBAAQ;AACpB;",
   "names": []
 }

package/esm/charts/tree-map/components/TreeMapChartLayout.js

@@ -5,13 +5,14 @@ import { TreeMapLegendRenderer } from "./TreeMapLegend/TreeMapLegendRenderer.js"
 import { TreeMapOverlay } from "./TreeMapOverlay/TreeMapOverlay.js";
 import { useBehavioralTrackingProps } from "../../../core/hooks/useBehavioralTrackingProps.js";
 import { ChartLayout } from "../../core/components/chart-layout/ChartLayout.js";
+import { OverlayProvider } from "../../core/components/overlay-tooltip/contexts/OverlayContext.js";
+import { TooltipProvider } from "../../core/components/overlay-tooltip/contexts/TooltipContext.js";
 import { useChartLegend } from "../context/ChartLegendContext.js";
 import { TreeMapAggregationDataProvider } from "../providers/TreeMapAggregationDataProvider.js";
 import { TreeMapHighlightingMapProvider } from "../providers/TreeMapHighlightingMapProvider.js";
 import { TreeMapInternalDataProvider } from "../providers/TreeMapInternalDataProvider.js";
 const TreeMapChartLayout = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
   const {
-    data,
     chartLayoutRef,
     width,
     height,
@@ -54,10 +55,10 @@ const TreeMapChartLayout = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
       "data-testid": dataTestId,
       "data-dt-component": dataDtComponent,
       children: [
-        /* @__PURE__ */ jsx(ChartLayout.Graph, { children: /* @__PURE__ */ jsx(TreeMapInternalDataProvider, { data, children: /* @__PURE__ */ jsx(TreeMapAggregationDataProvider, { children: /* @__PURE__ */ jsx(TreeMapHighlightingMapProvider, { children: /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
+        /* @__PURE__ */ jsx(ChartLayout.Graph, { children: /* @__PURE__ */ jsx(TreeMapInternalDataProvider, { children: /* @__PURE__ */ jsx(TreeMapAggregationDataProvider, { children: /* @__PURE__ */ jsx(TreeMapHighlightingMapProvider, { children: /* @__PURE__ */ jsx(OverlayProvider, { children: /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
           /* @__PURE__ */ jsx(TreeMapInternal, { ref: forwardedRef }),
           loading ? null : /* @__PURE__ */ jsx(TreeMapOverlay, {})
-        ] }) }) }) }) }),
+        ] }) }) }) }) }) }) }),
         !legendHidden && /* @__PURE__ */ jsx(
           ChartLayout.Legend,
           {

package/esm/charts/tree-map/components/TreeMapChartLayout.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/tree-map/components/TreeMapChartLayout.tsx"],
-  "sourcesContent": ["import { forwardRef, type JSX, type ReactNode, type RefObject } from 'react';\n\nimport { TreeMapInternal } from './TreeMapInternal.js';\nimport { TreeMapLegendRenderer } from './TreeMapLegend/TreeMapLegendRenderer.js';\nimport { TreeMapOverlay } from './TreeMapOverlay/TreeMapOverlay.js';\nimport { useBehavioralTrackingProps } from '../../../core/hooks/useBehavioralTrackingProps.js';\nimport type { BehaviorTrackingProps } from '../../../core/types/behavior-tracking-props.js';\nimport { DataTestId } from '../../../core/types/data-props.js';\nimport { MaskingProps } from '../../../core/types/masking-props.js';\nimport { StylingProps } from '../../../core/types/styling-props.js';\nimport { ChartLayout } from '../../core/components/chart-layout/ChartLayout.js';\nimport type { ChartLayoutRef } from '../../core/components/chart-layout/types/chart-layout.js';\nimport { useChartLegend } from '../context/ChartLegendContext.js';\nimport { TreeMapAggregationDataProvider } from '../providers/TreeMapAggregationDataProvider.js';\nimport { TreeMapHighlightingMapProvider } from '../providers/TreeMapHighlightingMapProvider.js';\nimport { TreeMapInternalDataProvider } from '../providers/TreeMapInternalDataProvider.js';\nimport type { InternalTreeMapNode } from '../types/internal.js';\n\ninterface TreemapChartLayoutProps\n  extends StylingProps,\n    MaskingProps,\n    DataTestId,\n    BehaviorTrackingProps {\n  data: InternalTreeMapNode;\n  width: string | number;\n  height: string | number;\n  emptyState?: ReactNode;\n  errorState: ReactNode | ((errorMessage: string) => JSX.Element) | undefined;\n  isEmpty: boolean;\n  loading: boolean;\n  chartLayoutRef: RefObject<ChartLayoutRef | null>;\n  'data-dt-component': string;\n}\n\nexport const TreeMapChartLayout = /* @__PURE__ */ forwardRef<\n  HTMLDivElement,\n  TreemapChartLayoutProps\n>((props, forwardedRef) => {\n  const {\n    data,\n    chartLayoutRef,\n    width,\n    height,\n    emptyState,\n    errorState,\n    isEmpty,\n    loading,\n    className,\n    style,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'data-testid': dataTestId,\n    'data-dt-component': dataDtComponent,\n  } = props;\n\n  const [behavioralTrackingProps] = useBehavioralTrackingProps(props);\n\n  const {\n    hidden: legendHidden,\n    position: legendPosition,\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    ratio,\n    initialRatio,\n    onRatioChange,\n  } = useChartLegend();\n\n  const legendRatio = initialRatio ?? ratio;\n\n  return (\n    <ChartLayout\n      {...behavioralTrackingProps}\n      ref={chartLayoutRef}\n      chartWidth={width}\n      chartHeight={height}\n      emptyState={emptyState}\n      errorState={errorState}\n      showLoader={loading}\n      isEmpty={isEmpty}\n      className={className}\n      style={style}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      data-testid={dataTestId}\n      data-dt-component={dataDtComponent}\n    >\n      <ChartLayout.Graph>\n        <TreeMapInternalDataProvider data={data}>\n          <TreeMapAggregationDataProvider>\n            <TreeMapHighlightingMapProvider>\n              <div style={{ position: 'relative' }}>\n                <TreeMapInternal ref={forwardedRef} />\n                {loading ? null : <TreeMapOverlay />}\n              </div>\n            </TreeMapHighlightingMapProvider>\n          </TreeMapAggregationDataProvider>\n        </TreeMapInternalDataProvider>\n      </ChartLayout.Graph>\n      {!legendHidden && (\n        <ChartLayout.Legend\n          position={legendPosition}\n          initialRatio={legendRatio}\n          onResize={onRatioChange}\n        >\n          <TreeMapLegendRenderer />\n        </ChartLayout.Legend>\n      )}\n    </ChartLayout>\n  );\n});\n"],
-  "mappings": "AAyFc,SACE,KADF;AAzFd,SAAS,kBAA4D;AAErE,SAAS,uBAAuB;AAChC,SAAS,6BAA6B;AACtC,SAAS,sBAAsB;AAC/B,SAAS,kCAAkC;AAK3C,SAAS,mBAAmB;AAE5B,SAAS,sBAAsB;AAC/B,SAAS,sCAAsC;AAC/C,SAAS,sCAAsC;AAC/C,SAAS,mCAAmC;AAmBrC,MAAM,qBAAqC,2BAGhD,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,eAAe;AAAA,IACf,qBAAqB;AAAA,EACvB,IAAI;AAEJ,QAAM,CAAC,uBAAuB,IAAI,2BAA2B,KAAK;AAElE,QAAM;AAAA,IACJ,QAAQ;AAAA,IACR,UAAU;AAAA;AAAA,IAEV;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,eAAe;AAEnB,QAAM,cAAc,gBAAgB;AAEpC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,KAAK;AAAA,MACL,YAAY;AAAA,MACZ,aAAa;AAAA,MACb;AAAA,MACA;AAAA,MACA,YAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,MACA,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MAClB,eAAa;AAAA,MACb,qBAAmB;AAAA,MAEnB;AAAA,4BAAC,YAAY,OAAZ,EACC,8BAAC,+BAA4B,MAC3B,8BAAC,kCACC,8BAAC,kCACC,+BAAC,SAAI,OAAO,EAAE,UAAU,WAAW,GACjC;AAAA,8BAAC,mBAAgB,KAAK,cAAc;AAAA,UACnC,UAAU,OAAO,oBAAC,kBAAe;AAAA,WACpC,GACF,GACF,GACF,GACF;AAAA,QACC,CAAC,gBACA;AAAA,UAAC,YAAY;AAAA,UAAZ;AAAA,YACC,UAAU;AAAA,YACV,cAAc;AAAA,YACd,UAAU;AAAA,YAEV,8BAAC,yBAAsB;AAAA;AAAA,QACzB;AAAA;AAAA;AAAA,EAEJ;AAEJ,CAAC;",
+  "sourcesContent": ["import { forwardRef, type JSX, type ReactNode, type RefObject } from 'react';\n\nimport { TreeMapInternal } from './TreeMapInternal.js';\nimport { TreeMapLegendRenderer } from './TreeMapLegend/TreeMapLegendRenderer.js';\nimport { TreeMapOverlay } from './TreeMapOverlay/TreeMapOverlay.js';\nimport { useBehavioralTrackingProps } from '../../../core/hooks/useBehavioralTrackingProps.js';\nimport type { BehaviorTrackingProps } from '../../../core/types/behavior-tracking-props.js';\nimport { DataTestId } from '../../../core/types/data-props.js';\nimport { MaskingProps } from '../../../core/types/masking-props.js';\nimport { StylingProps } from '../../../core/types/styling-props.js';\nimport { ChartLayout } from '../../core/components/chart-layout/ChartLayout.js';\nimport type { ChartLayoutRef } from '../../core/components/chart-layout/types/chart-layout.js';\nimport { OverlayProvider } from '../../core/components/overlay-tooltip/contexts/OverlayContext.js';\nimport { TooltipProvider } from '../../core/components/overlay-tooltip/contexts/TooltipContext.js';\nimport { useChartLegend } from '../context/ChartLegendContext.js';\nimport { TreeMapAggregationDataProvider } from '../providers/TreeMapAggregationDataProvider.js';\nimport { TreeMapHighlightingMapProvider } from '../providers/TreeMapHighlightingMapProvider.js';\nimport { TreeMapInternalDataProvider } from '../providers/TreeMapInternalDataProvider.js';\n\ninterface TreemapChartLayoutProps\n  extends StylingProps,\n    MaskingProps,\n    DataTestId,\n    BehaviorTrackingProps {\n  width: string | number;\n  height: string | number;\n  emptyState?: ReactNode;\n  errorState: ReactNode | ((errorMessage: string) => JSX.Element) | undefined;\n  isEmpty: boolean;\n  loading: boolean;\n  chartLayoutRef: RefObject<ChartLayoutRef | null>;\n  'data-dt-component': string;\n}\n\nexport const TreeMapChartLayout = /* @__PURE__ */ forwardRef<\n  HTMLDivElement,\n  TreemapChartLayoutProps\n>((props, forwardedRef) => {\n  const {\n    chartLayoutRef,\n    width,\n    height,\n    emptyState,\n    errorState,\n    isEmpty,\n    loading,\n    className,\n    style,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'data-testid': dataTestId,\n    'data-dt-component': dataDtComponent,\n  } = props;\n\n  const [behavioralTrackingProps] = useBehavioralTrackingProps(props);\n\n  const {\n    hidden: legendHidden,\n    position: legendPosition,\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    ratio,\n    initialRatio,\n    onRatioChange,\n  } = useChartLegend();\n\n  const legendRatio = initialRatio ?? ratio;\n\n  return (\n    <ChartLayout\n      {...behavioralTrackingProps}\n      ref={chartLayoutRef}\n      chartWidth={width}\n      chartHeight={height}\n      emptyState={emptyState}\n      errorState={errorState}\n      showLoader={loading}\n      isEmpty={isEmpty}\n      className={className}\n      style={style}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      data-testid={dataTestId}\n      data-dt-component={dataDtComponent}\n    >\n      <ChartLayout.Graph>\n        <TreeMapInternalDataProvider>\n          <TreeMapAggregationDataProvider>\n            <TreeMapHighlightingMapProvider>\n              <OverlayProvider>\n                <TooltipProvider>\n                  <div style={{ position: 'relative' }}>\n                    <TreeMapInternal ref={forwardedRef} />\n                    {loading ? null : <TreeMapOverlay />}\n                  </div>\n                </TooltipProvider>\n              </OverlayProvider>\n            </TreeMapHighlightingMapProvider>\n          </TreeMapAggregationDataProvider>\n        </TreeMapInternalDataProvider>\n      </ChartLayout.Graph>\n      {!legendHidden && (\n        <ChartLayout.Legend\n          position={legendPosition}\n          initialRatio={legendRatio}\n          onResize={onRatioChange}\n        >\n          <TreeMapLegendRenderer />\n        </ChartLayout.Legend>\n      )}\n    </ChartLayout>\n  );\n});\n"],
+  "mappings": "AA0FkB,SACE,KADF;AA1FlB,SAAS,kBAA4D;AAErE,SAAS,uBAAuB;AAChC,SAAS,6BAA6B;AACtC,SAAS,sBAAsB;AAC/B,SAAS,kCAAkC;AAK3C,SAAS,mBAAmB;AAE5B,SAAS,uBAAuB;AAChC,SAAS,uBAAuB;AAChC,SAAS,sBAAsB;AAC/B,SAAS,sCAAsC;AAC/C,SAAS,sCAAsC;AAC/C,SAAS,mCAAmC;AAiBrC,MAAM,qBAAqC,2BAGhD,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,eAAe;AAAA,IACf,qBAAqB;AAAA,EACvB,IAAI;AAEJ,QAAM,CAAC,uBAAuB,IAAI,2BAA2B,KAAK;AAElE,QAAM;AAAA,IACJ,QAAQ;AAAA,IACR,UAAU;AAAA;AAAA,IAEV;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,eAAe;AAEnB,QAAM,cAAc,gBAAgB;AAEpC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,KAAK;AAAA,MACL,YAAY;AAAA,MACZ,aAAa;AAAA,MACb;AAAA,MACA;AAAA,MACA,YAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,MACA,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MAClB,eAAa;AAAA,MACb,qBAAmB;AAAA,MAEnB;AAAA,4BAAC,YAAY,OAAZ,EACC,8BAAC,+BACC,8BAAC,kCACC,8BAAC,kCACC,8BAAC,mBACC,8BAAC,mBACC,+BAAC,SAAI,OAAO,EAAE,UAAU,WAAW,GACjC;AAAA,8BAAC,mBAAgB,KAAK,cAAc;AAAA,UACnC,UAAU,OAAO,oBAAC,kBAAe;AAAA,WACpC,GACF,GACF,GACF,GACF,GACF,GACF;AAAA,QACC,CAAC,gBACA;AAAA,UAAC,YAAY;AAAA,UAAZ;AAAA,YACC,UAAU;AAAA,YACV,cAAc;AAAA,YACd,UAAU;AAAA,YAEV,8BAAC,yBAAsB;AAAA;AAAA,QACzB;AAAA;AAAA;AAAA,EAEJ;AAEJ,CAAC;",
   "names": []
 }

package/esm/charts/tree-map/components/TreeMapLegend/TreeMapCategoricalLegend.js

@@ -1,22 +1,26 @@
 import { jsx } from "react/jsx-runtime";
+import { useChartLayoutLoading } from "../../../core/components/chart-layout/hooks/useChartLayoutLoading.js";
 import { useChartLayoutOrientation } from "../../../core/components/chart-layout/hooks/useChartLayoutOrientation.js";
 import { getLegendOrientation } from "../../../core/components/chart-layout/utils/orientation.js";
 import { ChartLegend } from "../../../core/components/legend/categorical/ChartLegend.js";
 import { useLegendSeriesActions } from "../../../core/components/legend/categorical/hooks/useLegendSeriesActions.js";
+import { useTooltip as useTooltipStore } from "../../../core/components/overlay-tooltip/contexts/TooltipContext.js";
 import { useNameAccessor } from "../../context/NameAccessorContext.js";
 import { useTreeMapHandlers } from "../../hooks/useTreeMapChartHandlers.js";
 import { useTruncationMode } from "../../hooks/useTruncationMode.js";
-import { useColorMap, useTooltipPinnedState } from "../../store/selectors.js";
+import { useColorMap } from "../../store/selectors.js";
 import { getLegendInteractionProps } from "../../utils/get-legend-interaction-props.js";
 import { getLegendItems } from "../../utils/get-legend-items.js";
 const TreeMapCategoricalLegend = () => {
   const legendColorMap = useColorMap();
   const nameAccessor = useNameAccessor();
   const { onLegendItemHover, onLegendItemClick } = useTreeMapHandlers();
+  const tooltipStore = useTooltipStore();
   const { orientation: layoutOrientation } = useChartLayoutOrientation();
   const legendOrientation = getLegendOrientation(layoutOrientation);
   const truncationMode = useTruncationMode();
-  const isTooltipPinned = useTooltipPinnedState();
+  const isTooltipPinned = tooltipStore.getState?.().pinned ?? false;
+  const isLoading = useChartLayoutLoading();
   const legendItems = getLegendItems(
     legendColorMap
   );
@@ -26,6 +30,7 @@ const TreeMapCategoricalLegend = () => {
   );
   const chartLegendInteractionsProps = getLegendInteractionProps(
     isTooltipPinned,
+    isLoading,
     !!nameAccessor,
     legendActions,
     onLegendItemHover,

package/esm/charts/tree-map/components/TreeMapLegend/TreeMapCategoricalLegend.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/tree-map/components/TreeMapLegend/TreeMapCategoricalLegend.tsx"],
-  "sourcesContent": ["import { useChartLayoutOrientation } from '../../../core/components/chart-layout/hooks/useChartLayoutOrientation.js';\nimport { getLegendOrientation } from '../../../core/components/chart-layout/utils/orientation.js';\nimport { ChartLegend } from '../../../core/components/legend/categorical/ChartLegend.js';\nimport { useLegendSeriesActions } from '../../../core/components/legend/categorical/hooks/useLegendSeriesActions.js';\nimport { LegendItem } from '../../../core/components/legend/categorical/types/legend.js';\nimport { useNameAccessor } from '../../context/NameAccessorContext.js';\nimport { useTreeMapHandlers } from '../../hooks/useTreeMapChartHandlers.js';\nimport { useTruncationMode } from '../../hooks/useTruncationMode.js';\nimport { useColorMap, useTooltipPinnedState } from '../../store/selectors.js';\nimport type { TreeMapCategoricalLegendItem } from '../../types/internal.js';\nimport { getLegendInteractionProps } from '../../utils/get-legend-interaction-props.js';\nimport { getLegendItems } from '../../utils/get-legend-items.js';\n\nexport const TreeMapCategoricalLegend = () => {\n  const legendColorMap = useColorMap();\n  const nameAccessor = useNameAccessor();\n  const { onLegendItemHover, onLegendItemClick } = useTreeMapHandlers();\n\n  const { orientation: layoutOrientation } = useChartLayoutOrientation();\n  const legendOrientation = getLegendOrientation(layoutOrientation);\n  const truncationMode = useTruncationMode();\n  const isTooltipPinned = useTooltipPinnedState();\n\n  const legendItems = getLegendItems(\n    legendColorMap,\n  ) as TreeMapCategoricalLegendItem[];\n\n  const legendActions = useLegendSeriesActions<LegendItem>(\n    legendItems ?? [],\n    (item) => item.id,\n  );\n\n  const chartLegendInteractionsProps = getLegendInteractionProps(\n    isTooltipPinned,\n    !!nameAccessor,\n    legendActions,\n    onLegendItemHover,\n    onLegendItemClick,\n  );\n\n  return (\n    <ChartLegend\n      items={legendItems ?? []}\n      truncationMode={truncationMode}\n      orientation={legendOrientation}\n      {...chartLegendInteractionsProps}\n    />\n  );\n};\n"],
-  "mappings": "AAyCI;AAzCJ,SAAS,iCAAiC;AAC1C,SAAS,4BAA4B;AACrC,SAAS,mBAAmB;AAC5B,SAAS,8BAA8B;AAEvC,SAAS,uBAAuB;AAChC,SAAS,0BAA0B;AACnC,SAAS,yBAAyB;AAClC,SAAS,aAAa,6BAA6B;AAEnD,SAAS,iCAAiC;AAC1C,SAAS,sBAAsB;AAExB,MAAM,2BAA2B,MAAM;AAC5C,QAAM,iBAAiB,YAAY;AACnC,QAAM,eAAe,gBAAgB;AACrC,QAAM,EAAE,mBAAmB,kBAAkB,IAAI,mBAAmB;AAEpE,QAAM,EAAE,aAAa,kBAAkB,IAAI,0BAA0B;AACrE,QAAM,oBAAoB,qBAAqB,iBAAiB;AAChE,QAAM,iBAAiB,kBAAkB;AACzC,QAAM,kBAAkB,sBAAsB;AAE9C,QAAM,cAAc;AAAA,IAClB;AAAA,EACF;AAEA,QAAM,gBAAgB;AAAA,IACpB,eAAe,CAAC;AAAA,IAChB,CAAC,SAAS,KAAK;AAAA,EACjB;AAEA,QAAM,+BAA+B;AAAA,IACnC;AAAA,IACA,CAAC,CAAC;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,eAAe,CAAC;AAAA,MACvB;AAAA,MACA,aAAa;AAAA,MACZ,GAAG;AAAA;AAAA,EACN;AAEJ;",
+  "sourcesContent": ["import { useChartLayoutLoading } from '../../../core/components/chart-layout/hooks/useChartLayoutLoading.js';\nimport { useChartLayoutOrientation } from '../../../core/components/chart-layout/hooks/useChartLayoutOrientation.js';\nimport { getLegendOrientation } from '../../../core/components/chart-layout/utils/orientation.js';\nimport { ChartLegend } from '../../../core/components/legend/categorical/ChartLegend.js';\nimport { useLegendSeriesActions } from '../../../core/components/legend/categorical/hooks/useLegendSeriesActions.js';\nimport { LegendItem } from '../../../core/components/legend/categorical/types/legend.js';\nimport { useTooltip as useTooltipStore } from '../../../core/components/overlay-tooltip/contexts/TooltipContext.js';\nimport { useNameAccessor } from '../../context/NameAccessorContext.js';\nimport { useTreeMapHandlers } from '../../hooks/useTreeMapChartHandlers.js';\nimport { useTruncationMode } from '../../hooks/useTruncationMode.js';\nimport { useColorMap } from '../../store/selectors.js';\nimport type { TreeMapCategoricalLegendItem } from '../../types/internal.js';\nimport { getLegendInteractionProps } from '../../utils/get-legend-interaction-props.js';\nimport { getLegendItems } from '../../utils/get-legend-items.js';\n\nexport const TreeMapCategoricalLegend = () => {\n  const legendColorMap = useColorMap();\n  const nameAccessor = useNameAccessor();\n  const { onLegendItemHover, onLegendItemClick } = useTreeMapHandlers();\n  const tooltipStore = useTooltipStore();\n\n  const { orientation: layoutOrientation } = useChartLayoutOrientation();\n  const legendOrientation = getLegendOrientation(layoutOrientation);\n  const truncationMode = useTruncationMode();\n  const isTooltipPinned = tooltipStore.getState?.().pinned ?? false;\n  const isLoading = useChartLayoutLoading();\n\n  const legendItems = getLegendItems(\n    legendColorMap,\n  ) as TreeMapCategoricalLegendItem[];\n\n  const legendActions = useLegendSeriesActions<LegendItem>(\n    legendItems ?? [],\n    (item) => item.id,\n  );\n\n  const chartLegendInteractionsProps = getLegendInteractionProps(\n    isTooltipPinned,\n    isLoading,\n    !!nameAccessor,\n    legendActions,\n    onLegendItemHover,\n    onLegendItemClick,\n  );\n\n  return (\n    <ChartLegend\n      items={legendItems ?? []}\n      truncationMode={truncationMode}\n      orientation={legendOrientation}\n      {...chartLegendInteractionsProps}\n    />\n  );\n};\n"],
+  "mappings": "AA8CI;AA9CJ,SAAS,6BAA6B;AACtC,SAAS,iCAAiC;AAC1C,SAAS,4BAA4B;AACrC,SAAS,mBAAmB;AAC5B,SAAS,8BAA8B;AAEvC,SAAS,cAAc,uBAAuB;AAC9C,SAAS,uBAAuB;AAChC,SAAS,0BAA0B;AACnC,SAAS,yBAAyB;AAClC,SAAS,mBAAmB;AAE5B,SAAS,iCAAiC;AAC1C,SAAS,sBAAsB;AAExB,MAAM,2BAA2B,MAAM;AAC5C,QAAM,iBAAiB,YAAY;AACnC,QAAM,eAAe,gBAAgB;AACrC,QAAM,EAAE,mBAAmB,kBAAkB,IAAI,mBAAmB;AACpE,QAAM,eAAe,gBAAgB;AAErC,QAAM,EAAE,aAAa,kBAAkB,IAAI,0BAA0B;AACrE,QAAM,oBAAoB,qBAAqB,iBAAiB;AAChE,QAAM,iBAAiB,kBAAkB;AACzC,QAAM,kBAAkB,aAAa,WAAW,EAAE,UAAU;AAC5D,QAAM,YAAY,sBAAsB;AAExC,QAAM,cAAc;AAAA,IAClB;AAAA,EACF;AAEA,QAAM,gBAAgB;AAAA,IACpB,eAAe,CAAC;AAAA,IAChB,CAAC,SAAS,KAAK;AAAA,EACjB;AAEA,QAAM,+BAA+B;AAAA,IACnC;AAAA,IACA;AAAA,IACA,CAAC,CAAC;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,eAAe,CAAC;AAAA,MACvB;AAAA,MACA,aAAa;AAAA,MACZ,GAAG;AAAA;AAAA,EACN;AAEJ;",
   "names": []
 }

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

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