npm - @dynatrace/strato-components - Versions diffs - 3.5.2 → 3.7.0 - Mend

@dynatrace/strato-components 3.5.2 → 3.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3762) hide show

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

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

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

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

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

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

package/esm/charts/timeseries/components/overlays/TimeseriesExplore/TimeseriesChartTooltip.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/timeseries/components/overlays/TimeseriesExplore/TimeseriesChartTooltip.tsx"],
-  "sourcesContent": ["import {\n  type MouseEvent as ReactMouseEvent,\n  type PropsWithChildren,\n} from 'react';\n\nimport { ChartActionsMenu } from '../../../../core/components/series-action/ChartActionsMenu.js';\nimport { useChartActionsMenu } from '../../../../core/components/series-action/hooks/useChartActionsMenu.js';\nimport { getDefaultAction } from '../../../../core/components/series-action/hooks/useDefaultAction.js';\nimport { InteractiveChartTooltip } from '../../../../core/components/tooltip/InteractiveChartTooltip/components/InteractiveChartTooltip.js';\nimport { SeriesBasedContent } from '../../../../core/components/tooltip/InteractiveChartTooltip/contents/SeriesBasedContent.js';\nimport { TimebasedTooltipHeader } from '../../../../core/components/tooltip/InteractiveChartTooltip/headers/TimebasedTooltipHeader.js';\nimport { useSeriesBasedItemEstimatedSize } from '../../../../core/components/tooltip/InteractiveChartTooltip/hooks/useSeriesBasedItemEstimatedSize.js';\nimport { useTooltipSeriesActions } from '../../../../core/components/tooltip/shared/hooks/useTooltipSeriesActions.js';\nimport { useScrollResponsiveChartBounds } from '../../../../core/hooks/useScrollResponsiveChartBounds.js';\nimport { TooltipItem } from '../../../../core/types/tooltip.js';\nimport { calculateAdjustedTooltipPosition } from '../../../../core/utils/calculate-adjusted-tooltip-position.js';\nimport { safeGet } from '../../../../core/utils/safe-get.js';\nimport { useExploreState } from '../../../hooks/store/selectors.js';\nimport { useTimeseriesFilteredData } from '../../../hooks/useTimeseriesFilteredData.js';\nimport { useTimeseriesOverlayRef } from '../../../hooks/useTimeseriesOverlayRef.js';\nimport { useTimeseriesUnits } from '../../../hooks/useTimeseriesUnits.js';\nimport { useTimeseriesYFormatter } from '../../../hooks/useTimeseriesYFormatter.js';\nimport { useTooltipConfig } from '../../../hooks/useTooltipConfig.js';\nimport { useTruncationMode } from '../../../hooks/useTruncationMode.js';\nimport { TimeseriesSlotProps } from '../../../types/timeseries.js';\nimport { TimeseriesChartTooltipProps } from '../../types/timeseries-chart-tooltip.js';\nimport { ADJUSTED_X_AXIS, SHARED_TOOLTIP_VARIANT } from '../constants.js';\nimport { useSeriesActionClickHandler } from '../hooks/useSeriesActionClickHandler.js';\nimport { sortTooltipItems } from '../utils/tooltip/sort-tooltip-items.js';\nimport {\n  filterGroupedPoints,\n  toTooltipItems,\n} from '../utils/tooltip/timeseries-tooltip.js';\n\n/**\n * This component is the outer wrapper of the Tooltip, and it's in charge of\n * changing the position of the tooltip without re-rendering the contents inside\n * if the contents don't change.\n */\nconst TooltipPositionWrapper = ({\n  tooltipItems,\n  onMouseLeave,\n  onScrollContent,\n  children,\n}: PropsWithChildren<{\n  tooltipItems: TooltipItem[];\n  onMouseLeave: (event?: ReactMouseEvent) => void;\n  onScrollContent: (event?: Event) => void;\n}>) => {\n  const { pinned, visible, position } = useExploreState();\n  const chartRef = useTimeseriesOverlayRef();\n  const bounds = useScrollResponsiveChartBounds(chartRef, pinned)();\n\n  const { seriesDisplayMode } = useTooltipConfig();\n  const estimatedItemSize = useSeriesBasedItemEstimatedSize(\n    tooltipItems,\n    seriesDisplayMode,\n  );\n\n  const adjustedTooltipPosition = calculateAdjustedTooltipPosition(\n    bounds,\n    position,\n    { x: ADJUSTED_X_AXIS, y: 0 },\n  );\n\n  const showTooltip = tooltipItems.length && visible && adjustedTooltipPosition;\n\n  return showTooltip ? (\n    <InteractiveChartTooltip\n      position={adjustedTooltipPosition}\n      pinned={pinned}\n      itemSize={estimatedItemSize}\n      updatePositionWhenPinned={true}\n      onMouseLeave={onMouseLeave}\n      onScrollContent={onScrollContent}\n    >\n      {children}\n    </InteractiveChartTooltip>\n  ) : null;\n};\n\n/**\n * Tooltip specific to the TimeseriesChart.\n */\nexport const TimeseriesChartTooltip = ({\n  series,\n  closestPoint,\n  xPoints,\n  groupedPoints,\n}: TimeseriesChartTooltipProps) => {\n  const { seriesDisplayMode, variant } = useTooltipConfig();\n  const truncationMode = useTruncationMode();\n  const { seriesMap, datapointsMap } = useTimeseriesFilteredData();\n\n  const {\n    onLeave: handleMenuLeave,\n    onScroll: handleMenuScroll,\n    selectedItem,\n    isScrolling,\n    updateSelectedItem,\n    actionsMenuRef,\n  } = useChartActionsMenu();\n\n  const formatters = useTimeseriesYFormatter();\n  const units = useTimeseriesUnits();\n\n  const getTooltipTimeframe = (): [Date, Date?] => [\n    closestPoint.datapoint.start,\n    closestPoint.datapoint.end,\n  ];\n\n  const pointsToDisplay =\n    variant === SHARED_TOOLTIP_VARIANT\n      ? sortTooltipItems(xPoints)\n      : sortTooltipItems(\n          filterGroupedPoints(closestPoint, xPoints, groupedPoints),\n        );\n\n  const tooltipItems = toTooltipItems(\n    pointsToDisplay,\n    formatters,\n    datapointsMap,\n    units,\n  );\n\n  const closestItem = tooltipItems.find((item) => item.id === closestPoint.id);\n\n  const actionClickHandler = useSeriesActionClickHandler(\n    tooltipItems.length > 1,\n  );\n\n  const actions = useTooltipSeriesActions<TimeseriesSlotProps>(\n    series,\n    (series) => safeGet(seriesMap, series).id,\n    tooltipItems.find((t) => t.id === selectedItem)?.datapoint,\n  );\n\n  const isShared = variant === SHARED_TOOLTIP_VARIANT;\n\n  return (\n    <TooltipPositionWrapper\n      tooltipItems={tooltipItems}\n      onMouseLeave={handleMenuLeave}\n      onScrollContent={handleMenuScroll}\n    >\n      <InteractiveChartTooltip.Header>\n        <TimebasedTooltipHeader\n          timeframe={getTooltipTimeframe()}\n          item={isShared && xPoints.length > 1 ? closestItem : undefined}\n          seriesDisplayMode={seriesDisplayMode}\n        />\n      </InteractiveChartTooltip.Header>\n      <InteractiveChartTooltip.Body>\n        {tooltipItems.map((item, index) => () => {\n          const isOpen = selectedItem === item.id;\n          return (\n            <ChartActionsMenu\n              key={`${item.id}`}\n              isOpen={isOpen}\n              actions={isOpen ? actions(item) : undefined}\n              defaultActions={getDefaultAction(item)}\n              ref={actionsMenuRef}\n              onActionClick={actionClickHandler}\n            >\n              <SeriesBasedContent\n                item={{ ...item, values: item.asyncValues() }}\n                onMouseHover={() => updateSelectedItem(item.id)}\n                seriesDisplayMode={seriesDisplayMode}\n                showDivider={index !== tooltipItems.length - 1}\n                truncationMode={truncationMode}\n                isScrolling={isScrolling}\n              />\n            </ChartActionsMenu>\n          );\n        })}\n      </InteractiveChartTooltip.Body>\n    </TooltipPositionWrapper>\n  );\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-deprecated -- DEPRECATION: [APPDEV-17834] BREAKING-CHANGE: migrate to ChartTooltip before next major. */\nimport {\n  type MouseEvent as ReactMouseEvent,\n  type PropsWithChildren,\n} from 'react';\n\nimport { ChartActionsMenu } from '../../../../core/components/series-action/ChartActionsMenu.js';\nimport { useChartActionsMenu } from '../../../../core/components/series-action/hooks/useChartActionsMenu.js';\nimport { getDefaultAction } from '../../../../core/components/series-action/hooks/useDefaultAction.js';\nimport { InteractiveChartTooltip } from '../../../../core/components/tooltip/InteractiveChartTooltip/components/InteractiveChartTooltip.js';\nimport { SeriesBasedContent } from '../../../../core/components/tooltip/InteractiveChartTooltip/contents/SeriesBasedContent.js';\nimport { TimebasedTooltipHeader } from '../../../../core/components/tooltip/InteractiveChartTooltip/headers/TimebasedTooltipHeader.js';\nimport { useSeriesBasedItemEstimatedSize } from '../../../../core/components/tooltip/InteractiveChartTooltip/hooks/useSeriesBasedItemEstimatedSize.js';\nimport { useTooltipSeriesActions } from '../../../../core/components/tooltip/shared/hooks/useTooltipSeriesActions.js';\nimport { useScrollResponsiveChartBounds } from '../../../../core/hooks/useScrollResponsiveChartBounds.js';\nimport { TooltipItem } from '../../../../core/types/tooltip.js';\nimport { calculateAdjustedTooltipPosition } from '../../../../core/utils/calculate-adjusted-tooltip-position.js';\nimport { safeGet } from '../../../../core/utils/safe-get.js';\nimport { useExploreState } from '../../../hooks/store/selectors.js';\nimport { useTimeseriesFilteredData } from '../../../hooks/useTimeseriesFilteredData.js';\nimport { useTimeseriesOverlayRef } from '../../../hooks/useTimeseriesOverlayRef.js';\nimport { useTimeseriesUnits } from '../../../hooks/useTimeseriesUnits.js';\nimport { useTimeseriesYFormatter } from '../../../hooks/useTimeseriesYFormatter.js';\nimport { useTooltipConfig } from '../../../hooks/useTooltipConfig.js';\nimport { useTruncationMode } from '../../../hooks/useTruncationMode.js';\nimport { TimeseriesSlotProps } from '../../../types/timeseries.js';\nimport { TimeseriesChartTooltipProps } from '../../types/timeseries-chart-tooltip.js';\nimport { ADJUSTED_X_AXIS, SHARED_TOOLTIP_VARIANT } from '../constants.js';\nimport { useSeriesActionClickHandler } from '../hooks/useSeriesActionClickHandler.js';\nimport { sortTooltipItems } from '../utils/tooltip/sort-tooltip-items.js';\nimport {\n  filterGroupedPoints,\n  toTooltipItems,\n} from '../utils/tooltip/timeseries-tooltip.js';\n\n/**\n * This component is the outer wrapper of the Tooltip, and it's in charge of\n * changing the position of the tooltip without re-rendering the contents inside\n * if the contents don't change.\n */\nconst TooltipPositionWrapper = ({\n  tooltipItems,\n  onMouseLeave,\n  onScrollContent,\n  children,\n}: PropsWithChildren<{\n  tooltipItems: TooltipItem[];\n  onMouseLeave: (event?: ReactMouseEvent) => void;\n  onScrollContent: (event?: Event) => void;\n}>) => {\n  const { pinned, visible, position } = useExploreState();\n  const chartRef = useTimeseriesOverlayRef();\n  const bounds = useScrollResponsiveChartBounds(chartRef, pinned)();\n\n  const { seriesDisplayMode } = useTooltipConfig();\n  const estimatedItemSize = useSeriesBasedItemEstimatedSize(\n    tooltipItems,\n    seriesDisplayMode,\n  );\n\n  const adjustedTooltipPosition = calculateAdjustedTooltipPosition(\n    bounds,\n    position,\n    { x: ADJUSTED_X_AXIS, y: 0 },\n  );\n\n  const showTooltip = tooltipItems.length && visible && adjustedTooltipPosition;\n\n  return showTooltip ? (\n    <InteractiveChartTooltip\n      position={adjustedTooltipPosition}\n      pinned={pinned}\n      itemSize={estimatedItemSize}\n      updatePositionWhenPinned={true}\n      onMouseLeave={onMouseLeave}\n      onScrollContent={onScrollContent}\n    >\n      {children}\n    </InteractiveChartTooltip>\n  ) : null;\n};\n\n/**\n * Tooltip specific to the TimeseriesChart.\n */\nexport const TimeseriesChartTooltip = ({\n  series,\n  closestPoint,\n  xPoints,\n  groupedPoints,\n}: TimeseriesChartTooltipProps) => {\n  const { seriesDisplayMode, variant } = useTooltipConfig();\n  const truncationMode = useTruncationMode();\n  const { seriesMap, datapointsMap } = useTimeseriesFilteredData();\n\n  const {\n    onLeave: handleMenuLeave,\n    onScroll: handleMenuScroll,\n    selectedItem,\n    isScrolling,\n    updateSelectedItem,\n    actionsMenuRef,\n  } = useChartActionsMenu();\n\n  const formatters = useTimeseriesYFormatter();\n  const units = useTimeseriesUnits();\n\n  const getTooltipTimeframe = (): [Date, Date?] => [\n    closestPoint.datapoint.start,\n    closestPoint.datapoint.end,\n  ];\n\n  const pointsToDisplay =\n    variant === SHARED_TOOLTIP_VARIANT\n      ? sortTooltipItems(xPoints)\n      : sortTooltipItems(\n          filterGroupedPoints(closestPoint, xPoints, groupedPoints),\n        );\n\n  const tooltipItems = toTooltipItems(\n    pointsToDisplay,\n    formatters,\n    datapointsMap,\n    units,\n  );\n\n  const closestItem = tooltipItems.find((item) => item.id === closestPoint.id);\n\n  const actionClickHandler = useSeriesActionClickHandler(\n    tooltipItems.length > 1,\n  );\n\n  const actions = useTooltipSeriesActions<TimeseriesSlotProps>(\n    series,\n    (series) => safeGet(seriesMap, series).id,\n    tooltipItems.find((t) => t.id === selectedItem)?.datapoint,\n  );\n\n  const isShared = variant === SHARED_TOOLTIP_VARIANT;\n\n  return (\n    <TooltipPositionWrapper\n      tooltipItems={tooltipItems}\n      onMouseLeave={handleMenuLeave}\n      onScrollContent={handleMenuScroll}\n    >\n      <InteractiveChartTooltip.Header>\n        <TimebasedTooltipHeader\n          timeframe={getTooltipTimeframe()}\n          item={isShared && xPoints.length > 1 ? closestItem : undefined}\n          seriesDisplayMode={seriesDisplayMode}\n        />\n      </InteractiveChartTooltip.Header>\n      <InteractiveChartTooltip.Body>\n        {tooltipItems.map((item, index) => () => {\n          const isOpen = selectedItem === item.id;\n          return (\n            <ChartActionsMenu\n              key={`${item.id}`}\n              isOpen={isOpen}\n              actions={isOpen ? actions(item) : undefined}\n              defaultActions={getDefaultAction(item)}\n              ref={actionsMenuRef}\n              onActionClick={actionClickHandler}\n            >\n              <SeriesBasedContent\n                item={{ ...item, values: item.asyncValues() }}\n                onMouseHover={() => updateSelectedItem(item.id)}\n                seriesDisplayMode={seriesDisplayMode}\n                showDivider={index !== tooltipItems.length - 1}\n                truncationMode={truncationMode}\n                isScrolling={isScrolling}\n              />\n            </ChartActionsMenu>\n          );\n        })}\n      </InteractiveChartTooltip.Body>\n    </TooltipPositionWrapper>\n  );\n};\n"],
+  "mappings": "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",
   "names": ["series"]
 }

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

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

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

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

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

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

package/esm/charts/timeseries/components/overlays/TimeseriesSelection/TimeseriesSelectionDatapoints.js CHANGED Viewed

@@ -1,17 +1,17 @@
 import { jsx } from "react/jsx-runtime";
 import { isUndefined } from "lodash-es";
+import { getDatapointInfo } from "./utils/get-datapoint-info.js";
 import { useGridPlotSize } from "../../../../core/components/chart-grid/hooks/useGridPlotSize.js";
 import { populateSelectedDatapointsMap } from "../../../../core/components/selection-area/utils/populate-selected-datapoints-map.js";
 import { selectedToGroupedDataPoints } from "../../../../core/components/selection-area/utils/selected-bins-to-grouped-data-poins.js";
+import { getClusterBoundariesInRange } from "../../../../core/utils/binary-search.js";
 import { safeGet } from "../../../../core/utils/safe-get.js";
 import { useSelectState } from "../../../hooks/store/selectors.js";
 import { useTimeseriesFilteredData } from "../../../hooks/useTimeseriesFilteredData.js";
 import { useXScales } from "../../../hooks/useXScale.js";
 import { useYScales } from "../../../hooks/useYScales.js";
-import { getClusterBoundariesInRange } from "../../../utils/binary-search.js";
 import { getDatapointTime } from "../../../utils/timeseries.js";
 import { TimeseriesChartDatapoints } from "../TimeseriesExplore/TimeseriesChartDatapoints.js";
-import { getDatapointInfo } from "./utils/get-datapoint-info.js";
 const TimeseriesSelectionDatapoints = () => {
   const selectState = useSelectState();
   const { currentScale: xScale } = useXScales();

package/esm/charts/timeseries/components/overlays/TimeseriesSelection/TimeseriesSelectionDatapoints.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/timeseries/components/overlays/TimeseriesSelection/TimeseriesSelectionDatapoints.tsx"],
-  "sourcesContent": ["import { isUndefined } from 'lodash-es';\n\nimport { useGridPlotSize } from '../../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { populateSelectedDatapointsMap } from '../../../../core/components/selection-area/utils/populate-selected-datapoints-map.js';\nimport { selectedToGroupedDataPoints } from '../../../../core/components/selection-area/utils/selected-bins-to-grouped-data-poins.js';\nimport type { DataPoint } from '../../../../core/types/data-point.js';\nimport { safeGet } from '../../../../core/utils/safe-get.js';\nimport { useSelectState } from '../../../hooks/store/selectors.js';\nimport { useTimeseriesFilteredData } from '../../../hooks/useTimeseriesFilteredData.js';\nimport { useXScales } from '../../../hooks/useXScale.js';\nimport { useYScales } from '../../../hooks/useYScales.js';\nimport { getClusterBoundariesInRange } from '../../../utils/binary-search.js';\nimport { getDatapointTime } from '../../../utils/timeseries.js';\nimport { TimeseriesChartDatapoints } from '../TimeseriesExplore/TimeseriesChartDatapoints.js';\nimport { getDatapointInfo } from './utils/get-datapoint-info.js';\nimport type { TimeseriesDataPointAllTypes } from '../../displays/shared/types.js';\n\nexport const TimeseriesSelectionDatapoints = () => {\n  const selectState = useSelectState();\n  const { currentScale: xScale } = useXScales();\n  const { allDatapoints, datapointsMap } = useTimeseriesFilteredData();\n  const yScales = useYScales();\n  const { width } = useGridPlotSize();\n\n  if (isUndefined(selectState)) {\n    return;\n  }\n\n  const selectedDatapoints = new Map<string, DataPoint[]>();\n\n  const selectionStart = selectState.selectionPercentage\n    ? (width * selectState.selectionPercentage[0]) / 100\n    : selectState.start.relative.x;\n  const selectionEnd = selectState.selectionPercentage\n    ? (width * selectState.selectionPercentage[1]) / 100\n    : selectState.end.relative.x;\n\n  const [from, to] = [\n    xScale.invert(selectionStart),\n    xScale.invert(selectionEnd),\n  ];\n\n  const range: [number, number] = [from.getTime(), to.getTime()];\n\n  const [leftIndex, rightIndex] = getClusterBoundariesInRange(\n    range,\n    allDatapoints,\n    (datapoint: TimeseriesDataPointAllTypes) => {\n      return getDatapointTime(datapoint.start, datapoint.end);\n    },\n  );\n\n  if (leftIndex !== -1) {\n    // Only iterate over the selected range\n    for (let i = leftIndex; i <= rightIndex; i++) {\n      const datapoint = allDatapoints[i];\n      const currentMetadata = safeGet(datapointsMap, datapoint);\n      const datapointKey = `${currentMetadata.start}-${currentMetadata.end}`;\n\n      populateSelectedDatapointsMap(\n        selectedDatapoints,\n        datapointKey,\n        getDatapointInfo(currentMetadata, xScale, yScales),\n      );\n    }\n  }\n\n  const highlightedDatapoints = selectedToGroupedDataPoints(selectedDatapoints);\n\n  return <TimeseriesChartDatapoints groupedPoints={highlightedDatapoints} />;\n};\n\nTimeseriesSelectionDatapoints['displayName'] = 'TimeseriesSelectionDatapoints';\n"],
-  "mappings": "AAqES;AArET,SAAS,mBAAmB;AAE5B,SAAS,uBAAuB;AAChC,SAAS,qCAAqC;AAC9C,SAAS,mCAAmC;AAE5C,SAAS,eAAe;AACxB,SAAS,sBAAsB;AAC/B,SAAS,iCAAiC;AAC1C,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,mCAAmC;AAC5C,SAAS,wBAAwB;AACjC,SAAS,iCAAiC;AAC1C,SAAS,wBAAwB;AAG1B,MAAM,gCAAgC,MAAM;AACjD,QAAM,cAAc,eAAe;AACnC,QAAM,EAAE,cAAc,OAAO,IAAI,WAAW;AAC5C,QAAM,EAAE,eAAe,cAAc,IAAI,0BAA0B;AACnE,QAAM,UAAU,WAAW;AAC3B,QAAM,EAAE,MAAM,IAAI,gBAAgB;AAElC,MAAI,YAAY,WAAW,GAAG;AAC5B;AAAA,EACF;AAEA,QAAM,qBAAqB,oBAAI,IAAyB;AAExD,QAAM,iBAAiB,YAAY,sBAC9B,QAAQ,YAAY,oBAAoB,CAAC,IAAK,MAC/C,YAAY,MAAM,SAAS;AAC/B,QAAM,eAAe,YAAY,sBAC5B,QAAQ,YAAY,oBAAoB,CAAC,IAAK,MAC/C,YAAY,IAAI,SAAS;AAE7B,QAAM,CAAC,MAAM,EAAE,IAAI;AAAA,IACjB,OAAO,OAAO,cAAc;AAAA,IAC5B,OAAO,OAAO,YAAY;AAAA,EAC5B;AAEA,QAAM,QAA0B,CAAC,KAAK,QAAQ,GAAG,GAAG,QAAQ,CAAC;AAE7D,QAAM,CAAC,WAAW,UAAU,IAAI;AAAA,IAC9B;AAAA,IACA;AAAA,IACA,CAAC,cAA2C;AAC1C,aAAO,iBAAiB,UAAU,OAAO,UAAU,GAAG;AAAA,IACxD;AAAA,EACF;AAEA,MAAI,cAAc,IAAI;AAEpB,aAAS,IAAI,WAAW,KAAK,YAAY,KAAK;AAC5C,YAAM,YAAY,cAAc,CAAC;AACjC,YAAM,kBAAkB,QAAQ,eAAe,SAAS;AACxD,YAAM,eAAe,GAAG,gBAAgB,KAAK,IAAI,gBAAgB,GAAG;AAEpE;AAAA,QACE;AAAA,QACA;AAAA,QACA,iBAAiB,iBAAiB,QAAQ,OAAO;AAAA,MACnD;AAAA,IACF;AAAA,EACF;AAEA,QAAM,wBAAwB,4BAA4B,kBAAkB;AAE5E,SAAO,oBAAC,6BAA0B,eAAe,uBAAuB;AAC1E;AAEA,8BAA8B,aAAa,IAAI;",
+  "sourcesContent": ["import { isUndefined } from 'lodash-es';\n\nimport { getDatapointInfo } from './utils/get-datapoint-info.js';\nimport { useGridPlotSize } from '../../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { populateSelectedDatapointsMap } from '../../../../core/components/selection-area/utils/populate-selected-datapoints-map.js';\nimport { selectedToGroupedDataPoints } from '../../../../core/components/selection-area/utils/selected-bins-to-grouped-data-poins.js';\nimport type { DataPoint } from '../../../../core/types/data-point.js';\nimport { getClusterBoundariesInRange } from '../../../../core/utils/binary-search.js';\nimport { safeGet } from '../../../../core/utils/safe-get.js';\nimport { useSelectState } from '../../../hooks/store/selectors.js';\nimport { useTimeseriesFilteredData } from '../../../hooks/useTimeseriesFilteredData.js';\nimport { useXScales } from '../../../hooks/useXScale.js';\nimport { useYScales } from '../../../hooks/useYScales.js';\nimport { getDatapointTime } from '../../../utils/timeseries.js';\nimport type { TimeseriesDataPointAllTypes } from '../../displays/shared/types.js';\nimport { TimeseriesChartDatapoints } from '../TimeseriesExplore/TimeseriesChartDatapoints.js';\n\nexport const TimeseriesSelectionDatapoints = () => {\n  const selectState = useSelectState();\n  const { currentScale: xScale } = useXScales();\n  const { allDatapoints, datapointsMap } = useTimeseriesFilteredData();\n  const yScales = useYScales();\n  const { width } = useGridPlotSize();\n\n  if (isUndefined(selectState)) {\n    return;\n  }\n\n  const selectedDatapoints = new Map<string, DataPoint[]>();\n\n  const selectionStart = selectState.selectionPercentage\n    ? (width * selectState.selectionPercentage[0]) / 100\n    : selectState.start.relative.x;\n  const selectionEnd = selectState.selectionPercentage\n    ? (width * selectState.selectionPercentage[1]) / 100\n    : selectState.end.relative.x;\n\n  const [from, to] = [\n    xScale.invert(selectionStart),\n    xScale.invert(selectionEnd),\n  ];\n\n  const range: [number, number] = [from.getTime(), to.getTime()];\n\n  const [leftIndex, rightIndex] = getClusterBoundariesInRange(\n    range,\n    allDatapoints,\n    (datapoint: TimeseriesDataPointAllTypes) => {\n      return getDatapointTime(datapoint.start, datapoint.end);\n    },\n  );\n\n  if (leftIndex !== -1) {\n    // Only iterate over the selected range\n    for (let i = leftIndex; i <= rightIndex; i++) {\n      const datapoint = allDatapoints[i];\n      const currentMetadata = safeGet(datapointsMap, datapoint);\n      const datapointKey = `${currentMetadata.start}-${currentMetadata.end}`;\n\n      populateSelectedDatapointsMap(\n        selectedDatapoints,\n        datapointKey,\n        getDatapointInfo(currentMetadata, xScale, yScales),\n      );\n    }\n  }\n\n  const highlightedDatapoints = selectedToGroupedDataPoints(selectedDatapoints);\n\n  return <TimeseriesChartDatapoints groupedPoints={highlightedDatapoints} />;\n};\n\nTimeseriesSelectionDatapoints['displayName'] = 'TimeseriesSelectionDatapoints';\n"],
+  "mappings": "AAqES;AArET,SAAS,mBAAmB;AAE5B,SAAS,wBAAwB;AACjC,SAAS,uBAAuB;AAChC,SAAS,qCAAqC;AAC9C,SAAS,mCAAmC;AAE5C,SAAS,mCAAmC;AAC5C,SAAS,eAAe;AACxB,SAAS,sBAAsB;AAC/B,SAAS,iCAAiC;AAC1C,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,wBAAwB;AAEjC,SAAS,iCAAiC;AAEnC,MAAM,gCAAgC,MAAM;AACjD,QAAM,cAAc,eAAe;AACnC,QAAM,EAAE,cAAc,OAAO,IAAI,WAAW;AAC5C,QAAM,EAAE,eAAe,cAAc,IAAI,0BAA0B;AACnE,QAAM,UAAU,WAAW;AAC3B,QAAM,EAAE,MAAM,IAAI,gBAAgB;AAElC,MAAI,YAAY,WAAW,GAAG;AAC5B;AAAA,EACF;AAEA,QAAM,qBAAqB,oBAAI,IAAyB;AAExD,QAAM,iBAAiB,YAAY,sBAC9B,QAAQ,YAAY,oBAAoB,CAAC,IAAK,MAC/C,YAAY,MAAM,SAAS;AAC/B,QAAM,eAAe,YAAY,sBAC5B,QAAQ,YAAY,oBAAoB,CAAC,IAAK,MAC/C,YAAY,IAAI,SAAS;AAE7B,QAAM,CAAC,MAAM,EAAE,IAAI;AAAA,IACjB,OAAO,OAAO,cAAc;AAAA,IAC5B,OAAO,OAAO,YAAY;AAAA,EAC5B;AAEA,QAAM,QAA0B,CAAC,KAAK,QAAQ,GAAG,GAAG,QAAQ,CAAC;AAE7D,QAAM,CAAC,WAAW,UAAU,IAAI;AAAA,IAC9B;AAAA,IACA;AAAA,IACA,CAAC,cAA2C;AAC1C,aAAO,iBAAiB,UAAU,OAAO,UAAU,GAAG;AAAA,IACxD;AAAA,EACF;AAEA,MAAI,cAAc,IAAI;AAEpB,aAAS,IAAI,WAAW,KAAK,YAAY,KAAK;AAC5C,YAAM,YAAY,cAAc,CAAC;AACjC,YAAM,kBAAkB,QAAQ,eAAe,SAAS;AACxD,YAAM,eAAe,GAAG,gBAAgB,KAAK,IAAI,gBAAgB,GAAG;AAEpE;AAAA,QACE;AAAA,QACA;AAAA,QACA,iBAAiB,iBAAiB,QAAQ,OAAO;AAAA,MACnD;AAAA,IACF;AAAA,EACF;AAEA,QAAM,wBAAwB,4BAA4B,kBAAkB;AAE5E,SAAO,oBAAC,6BAA0B,eAAe,uBAAuB;AAC1E;AAEA,8BAA8B,aAAa,IAAI;",
   "names": []
 }

package/esm/charts/timeseries/components/overlays/utils/tooltip/find-closest-points.js CHANGED Viewed

@@ -1,8 +1,8 @@
 import { isNaN } from "lodash-es";
 import { OVERLAY_PADDING } from "../../../../../core/components/data-point/constants.js";
+import { getClusterBoundariesAtPosition } from "../../../../../core/utils/binary-search.js";
 import { safeGet } from "../../../../../core/utils/safe-get.js";
 import { sanitizeZeroValues } from "../../../../../core/utils/sanitize-zero-values.js";
-import { getClusterBoundariesAtPosition } from "../../../../utils/binary-search.js";
 import { getDatapointTime } from "../../../../utils/timeseries.js";
 import { getYScaleByUnit } from "../../../../utils/yAxis.js";
 const getClosestPoint = (xPoints, mouseY = 0) => {

package/esm/charts/timeseries/components/overlays/utils/tooltip/find-closest-points.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/charts/timeseries/components/overlays/utils/tooltip/find-closest-points.ts"],
-  "sourcesContent": ["import type { ScaleTime } from 'd3-scale';\nimport { isNaN } from 'lodash-es';\n\nimport { OVERLAY_PADDING } from '../../../../../core/components/data-point/constants.js';\nimport { ColorToken } from '../../../../../core/types/color-palette.js';\nimport { safeGet } from '../../../../../core/utils/safe-get.js';\nimport { sanitizeZeroValues } from '../../../../../core/utils/sanitize-zero-values.js';\nimport { YAxisScales } from '../../../../types/state.js';\nimport { WeakMapDatapoints } from '../../../../types/timeseries.js';\nimport { getClusterBoundariesAtPosition } from '../../../../utils/binary-search.js';\nimport { getDatapointTime } from '../../../../utils/timeseries.js';\nimport { getYScaleByUnit } from '../../../../utils/yAxis.js';\nimport { TimeseriesDataPointAllTypes } from '../../../displays/shared/types.js';\n\nexport type TimeseriesClosestPoint = {\n  id: string;\n  x: number;\n  y: number;\n  datapoint: TimeseriesDataPointAllTypes;\n  color: ColorToken;\n};\n\nexport const getClosestPoint = (\n  xPoints: TimeseriesClosestPoint[],\n  mouseY: number = 0,\n) => {\n  let aux = Infinity;\n  let auxPoint = xPoints[0];\n  // new object needed to preserve the points sorting\n  xPoints.forEach((elem) => {\n    if (Math.abs(elem.y - mouseY) < aux) {\n      aux = Math.abs(elem.y - mouseY);\n      auxPoint = elem;\n    }\n  });\n  return auxPoint;\n};\n\nfunction xAccessor(xAxisScale: ScaleTime<number, number>) {\n  return (datapoint: TimeseriesDataPointAllTypes) =>\n    xAxisScale(getDatapointTime(datapoint.start, datapoint.end));\n}\n\nfunction roundTo2Decimals(num: number): number {\n  const factor = 100;\n  return Math.round(num * factor) / factor;\n}\n\nfunction clusterAccessor(\n  xAxisScale: ScaleTime<number, number>,\n  mouseX: number,\n) {\n  return (datapoint: TimeseriesDataPointAllTypes) =>\n    roundTo2Decimals(\n      Math.abs(\n        xAxisScale(getDatapointTime(datapoint.start, datapoint.end)) - mouseX,\n      ),\n    );\n}\n\nfunction mapToClosestPoints(\n  datapointsMap: WeakMapDatapoints,\n  xAxisScale: ScaleTime<number, number>,\n  yAxis: YAxisScales,\n) {\n  return (datapoint: TimeseriesDataPointAllTypes): TimeseriesClosestPoint[] => {\n    const datapointMap = safeGet(datapointsMap, datapoint);\n    const {\n      isGap,\n      color,\n      value,\n      unit,\n      y0,\n      y1,\n      cumulativeValue,\n      seriesId,\n      start,\n      end,\n      center,\n      variant,\n    } = datapointMap;\n\n    if (isGap) {\n      return [];\n    }\n\n    const yScale = getYScaleByUnit(unit, yAxis);\n    const x = xAxisScale(getDatapointTime(start, end, center)) as number;\n\n    if (variant === 'band') {\n      const pointY0 = sanitizeZeroValues(yScale, y0 ?? 0);\n      const pointY1 = sanitizeZeroValues(yScale, y1 ?? 0);\n\n      return [\n        { id: seriesId, x, y: pointY0, color, datapoint },\n        { id: seriesId, x, y: pointY1, color, datapoint },\n      ];\n    }\n\n    const y = sanitizeZeroValues(\n      yScale,\n      cumulativeValue ? cumulativeValue : value ?? 0,\n    );\n\n    if (!isNaN(y)) {\n      return [{ id: seriesId, x, y, color, datapoint }];\n    }\n\n    return [];\n  };\n}\n\n/**\n * Returns the closest points sorted by proximity given a series and mouse\n * coordinates within the same X coordinate as the closest point.\n */\nexport const findClosestPoints = (\n  mouseX: number,\n  datapoints: TimeseriesDataPointAllTypes[],\n  xAxisScale: ScaleTime<number, number>,\n  yAxis: YAxisScales,\n  datapointsMap: WeakMapDatapoints,\n): TimeseriesClosestPoint[] => {\n  const [leftIndex, rightIndex] = getClusterBoundariesAtPosition(\n    mouseX,\n    datapoints,\n    xAccessor(xAxisScale),\n    clusterAccessor(xAxisScale, mouseX),\n  );\n\n  const toClosestPoint = mapToClosestPoints(datapointsMap, xAxisScale, yAxis);\n\n  const closestPoints: TimeseriesClosestPoint[] = [];\n  for (let i = leftIndex; i <= rightIndex; i++) {\n    closestPoints.push(...toClosestPoint(datapoints[i]));\n  }\n\n  return closestPoints;\n};\n/**\n * Filters the data points that would fall outside the charts, but inside the overlays area.\n */\nexport const filterOutOfBounds =\n  (overlaysWidth: number, overlaysHeight: number) =>\n  (datapoint: TimeseriesClosestPoint) => {\n    return (\n      datapoint.y >= OVERLAY_PADDING &&\n      datapoint.y <= overlaysHeight + OVERLAY_PADDING &&\n      datapoint.x >= OVERLAY_PADDING &&\n      datapoint.x <= overlaysWidth + OVERLAY_PADDING\n    );\n  };\n"],
-  "mappings": "AACA,SAAS,aAAa;AAEtB,SAAS,uBAAuB;AAEhC,SAAS,eAAe;AACxB,SAAS,0BAA0B;AAGnC,SAAS,sCAAsC;AAC/C,SAAS,wBAAwB;AACjC,SAAS,uBAAuB;AAWzB,MAAM,kBAAkB,CAC7B,SACA,SAAiB,MACd;AACH,MAAI,MAAM;AACV,MAAI,WAAW,QAAQ,CAAC;AAExB,UAAQ,QAAQ,CAAC,SAAS;AACxB,QAAI,KAAK,IAAI,KAAK,IAAI,MAAM,IAAI,KAAK;AACnC,YAAM,KAAK,IAAI,KAAK,IAAI,MAAM;AAC9B,iBAAW;AAAA,IACb;AAAA,EACF,CAAC;AACD,SAAO;AACT;AAEA,SAAS,UAAU,YAAuC;AACxD,SAAO,CAAC,cACN,WAAW,iBAAiB,UAAU,OAAO,UAAU,GAAG,CAAC;AAC/D;AAEA,SAAS,iBAAiB,KAAqB;AAC7C,QAAM,SAAS;AACf,SAAO,KAAK,MAAM,MAAM,MAAM,IAAI;AACpC;AAEA,SAAS,gBACP,YACA,QACA;AACA,SAAO,CAAC,cACN;AAAA,IACE,KAAK;AAAA,MACH,WAAW,iBAAiB,UAAU,OAAO,UAAU,GAAG,CAAC,IAAI;AAAA,IACjE;AAAA,EACF;AACJ;AAEA,SAAS,mBACP,eACA,YACA,OACA;AACA,SAAO,CAAC,cAAqE;AAC3E,UAAM,eAAe,QAAQ,eAAe,SAAS;AACrD,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,IAAI;AAEJ,QAAI,OAAO;AACT,aAAO,CAAC;AAAA,IACV;AAEA,UAAM,SAAS,gBAAgB,MAAM,KAAK;AAC1C,UAAM,IAAI,WAAW,iBAAiB,OAAO,KAAK,MAAM,CAAC;AAEzD,QAAI,YAAY,QAAQ;AACtB,YAAM,UAAU,mBAAmB,QAAQ,MAAM,CAAC;AAClD,YAAM,UAAU,mBAAmB,QAAQ,MAAM,CAAC;AAElD,aAAO;AAAA,QACL,EAAE,IAAI,UAAU,GAAG,GAAG,SAAS,OAAO,UAAU;AAAA,QAChD,EAAE,IAAI,UAAU,GAAG,GAAG,SAAS,OAAO,UAAU;AAAA,MAClD;AAAA,IACF;AAEA,UAAM,IAAI;AAAA,MACR;AAAA,MACA,kBAAkB,kBAAkB,SAAS;AAAA,IAC/C;AAEA,QAAI,CAAC,MAAM,CAAC,GAAG;AACb,aAAO,CAAC,EAAE,IAAI,UAAU,GAAG,GAAG,OAAO,UAAU,CAAC;AAAA,IAClD;AAEA,WAAO,CAAC;AAAA,EACV;AACF;AAMO,MAAM,oBAAoB,CAC/B,QACA,YACA,YACA,OACA,kBAC6B;AAC7B,QAAM,CAAC,WAAW,UAAU,IAAI;AAAA,IAC9B;AAAA,IACA;AAAA,IACA,UAAU,UAAU;AAAA,IACpB,gBAAgB,YAAY,MAAM;AAAA,EACpC;AAEA,QAAM,iBAAiB,mBAAmB,eAAe,YAAY,KAAK;AAE1E,QAAM,gBAA0C,CAAC;AACjD,WAAS,IAAI,WAAW,KAAK,YAAY,KAAK;AAC5C,kBAAc,KAAK,GAAG,eAAe,WAAW,CAAC,CAAC,CAAC;AAAA,EACrD;AAEA,SAAO;AACT;AAIO,MAAM,oBACX,CAAC,eAAuB,mBACxB,CAAC,cAAsC;AACrC,SACE,UAAU,KAAK,mBACf,UAAU,KAAK,iBAAiB,mBAChC,UAAU,KAAK,mBACf,UAAU,KAAK,gBAAgB;AAEnC;",
+  "sourcesContent": ["import type { ScaleTime } from 'd3-scale';\nimport { isNaN } from 'lodash-es';\n\nimport { OVERLAY_PADDING } from '../../../../../core/components/data-point/constants.js';\nimport { ColorToken } from '../../../../../core/types/color-palette.js';\nimport { getClusterBoundariesAtPosition } from '../../../../../core/utils/binary-search.js';\nimport { safeGet } from '../../../../../core/utils/safe-get.js';\nimport { sanitizeZeroValues } from '../../../../../core/utils/sanitize-zero-values.js';\nimport { YAxisScales } from '../../../../types/state.js';\nimport { WeakMapDatapoints } from '../../../../types/timeseries.js';\nimport { getDatapointTime } from '../../../../utils/timeseries.js';\nimport { getYScaleByUnit } from '../../../../utils/yAxis.js';\nimport { TimeseriesDataPointAllTypes } from '../../../displays/shared/types.js';\n\nexport type TimeseriesClosestPoint = {\n  id: string;\n  x: number;\n  y: number;\n  datapoint: TimeseriesDataPointAllTypes;\n  color: ColorToken;\n};\n\nexport const getClosestPoint = (\n  xPoints: TimeseriesClosestPoint[],\n  mouseY: number = 0,\n) => {\n  let aux = Infinity;\n  let auxPoint = xPoints[0];\n  // new object needed to preserve the points sorting\n  xPoints.forEach((elem) => {\n    if (Math.abs(elem.y - mouseY) < aux) {\n      aux = Math.abs(elem.y - mouseY);\n      auxPoint = elem;\n    }\n  });\n  return auxPoint;\n};\n\nfunction xAccessor(xAxisScale: ScaleTime<number, number>) {\n  return (datapoint: TimeseriesDataPointAllTypes) =>\n    xAxisScale(getDatapointTime(datapoint.start, datapoint.end));\n}\n\nfunction roundTo2Decimals(num: number): number {\n  const factor = 100;\n  return Math.round(num * factor) / factor;\n}\n\nfunction clusterAccessor(\n  xAxisScale: ScaleTime<number, number>,\n  mouseX: number,\n) {\n  return (datapoint: TimeseriesDataPointAllTypes) =>\n    roundTo2Decimals(\n      Math.abs(\n        xAxisScale(getDatapointTime(datapoint.start, datapoint.end)) - mouseX,\n      ),\n    );\n}\n\nfunction mapToClosestPoints(\n  datapointsMap: WeakMapDatapoints,\n  xAxisScale: ScaleTime<number, number>,\n  yAxis: YAxisScales,\n) {\n  return (datapoint: TimeseriesDataPointAllTypes): TimeseriesClosestPoint[] => {\n    const datapointMap = safeGet(datapointsMap, datapoint);\n    const {\n      isGap,\n      color,\n      value,\n      unit,\n      y0,\n      y1,\n      cumulativeValue,\n      seriesId,\n      start,\n      end,\n      center,\n      variant,\n    } = datapointMap;\n\n    if (isGap) {\n      return [];\n    }\n\n    const yScale = getYScaleByUnit(unit, yAxis);\n    const x = xAxisScale(getDatapointTime(start, end, center)) as number;\n\n    if (variant === 'band') {\n      const pointY0 = sanitizeZeroValues(yScale, y0 ?? 0);\n      const pointY1 = sanitizeZeroValues(yScale, y1 ?? 0);\n\n      return [\n        { id: seriesId, x, y: pointY0, color, datapoint },\n        { id: seriesId, x, y: pointY1, color, datapoint },\n      ];\n    }\n\n    const y = sanitizeZeroValues(\n      yScale,\n      cumulativeValue ? cumulativeValue : value ?? 0,\n    );\n\n    if (!isNaN(y)) {\n      return [{ id: seriesId, x, y, color, datapoint }];\n    }\n\n    return [];\n  };\n}\n\n/**\n * Returns the closest points sorted by proximity given a series and mouse\n * coordinates within the same X coordinate as the closest point.\n */\nexport const findClosestPoints = (\n  mouseX: number,\n  datapoints: TimeseriesDataPointAllTypes[],\n  xAxisScale: ScaleTime<number, number>,\n  yAxis: YAxisScales,\n  datapointsMap: WeakMapDatapoints,\n): TimeseriesClosestPoint[] => {\n  const [leftIndex, rightIndex] = getClusterBoundariesAtPosition(\n    mouseX,\n    datapoints,\n    xAccessor(xAxisScale),\n    clusterAccessor(xAxisScale, mouseX),\n  );\n\n  const toClosestPoint = mapToClosestPoints(datapointsMap, xAxisScale, yAxis);\n\n  const closestPoints: TimeseriesClosestPoint[] = [];\n  for (let i = leftIndex; i <= rightIndex; i++) {\n    closestPoints.push(...toClosestPoint(datapoints[i]));\n  }\n\n  return closestPoints;\n};\n/**\n * Filters the data points that would fall outside the charts, but inside the overlays area.\n */\nexport const filterOutOfBounds =\n  (overlaysWidth: number, overlaysHeight: number) =>\n  (datapoint: TimeseriesClosestPoint) => {\n    return (\n      datapoint.y >= OVERLAY_PADDING &&\n      datapoint.y <= overlaysHeight + OVERLAY_PADDING &&\n      datapoint.x >= OVERLAY_PADDING &&\n      datapoint.x <= overlaysWidth + OVERLAY_PADDING\n    );\n  };\n"],
+  "mappings": "AACA,SAAS,aAAa;AAEtB,SAAS,uBAAuB;AAEhC,SAAS,sCAAsC;AAC/C,SAAS,eAAe;AACxB,SAAS,0BAA0B;AAGnC,SAAS,wBAAwB;AACjC,SAAS,uBAAuB;AAWzB,MAAM,kBAAkB,CAC7B,SACA,SAAiB,MACd;AACH,MAAI,MAAM;AACV,MAAI,WAAW,QAAQ,CAAC;AAExB,UAAQ,QAAQ,CAAC,SAAS;AACxB,QAAI,KAAK,IAAI,KAAK,IAAI,MAAM,IAAI,KAAK;AACnC,YAAM,KAAK,IAAI,KAAK,IAAI,MAAM;AAC9B,iBAAW;AAAA,IACb;AAAA,EACF,CAAC;AACD,SAAO;AACT;AAEA,SAAS,UAAU,YAAuC;AACxD,SAAO,CAAC,cACN,WAAW,iBAAiB,UAAU,OAAO,UAAU,GAAG,CAAC;AAC/D;AAEA,SAAS,iBAAiB,KAAqB;AAC7C,QAAM,SAAS;AACf,SAAO,KAAK,MAAM,MAAM,MAAM,IAAI;AACpC;AAEA,SAAS,gBACP,YACA,QACA;AACA,SAAO,CAAC,cACN;AAAA,IACE,KAAK;AAAA,MACH,WAAW,iBAAiB,UAAU,OAAO,UAAU,GAAG,CAAC,IAAI;AAAA,IACjE;AAAA,EACF;AACJ;AAEA,SAAS,mBACP,eACA,YACA,OACA;AACA,SAAO,CAAC,cAAqE;AAC3E,UAAM,eAAe,QAAQ,eAAe,SAAS;AACrD,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,IAAI;AAEJ,QAAI,OAAO;AACT,aAAO,CAAC;AAAA,IACV;AAEA,UAAM,SAAS,gBAAgB,MAAM,KAAK;AAC1C,UAAM,IAAI,WAAW,iBAAiB,OAAO,KAAK,MAAM,CAAC;AAEzD,QAAI,YAAY,QAAQ;AACtB,YAAM,UAAU,mBAAmB,QAAQ,MAAM,CAAC;AAClD,YAAM,UAAU,mBAAmB,QAAQ,MAAM,CAAC;AAElD,aAAO;AAAA,QACL,EAAE,IAAI,UAAU,GAAG,GAAG,SAAS,OAAO,UAAU;AAAA,QAChD,EAAE,IAAI,UAAU,GAAG,GAAG,SAAS,OAAO,UAAU;AAAA,MAClD;AAAA,IACF;AAEA,UAAM,IAAI;AAAA,MACR;AAAA,MACA,kBAAkB,kBAAkB,SAAS;AAAA,IAC/C;AAEA,QAAI,CAAC,MAAM,CAAC,GAAG;AACb,aAAO,CAAC,EAAE,IAAI,UAAU,GAAG,GAAG,OAAO,UAAU,CAAC;AAAA,IAClD;AAEA,WAAO,CAAC;AAAA,EACV;AACF;AAMO,MAAM,oBAAoB,CAC/B,QACA,YACA,YACA,OACA,kBAC6B;AAC7B,QAAM,CAAC,WAAW,UAAU,IAAI;AAAA,IAC9B;AAAA,IACA;AAAA,IACA,UAAU,UAAU;AAAA,IACpB,gBAAgB,YAAY,MAAM;AAAA,EACpC;AAEA,QAAM,iBAAiB,mBAAmB,eAAe,YAAY,KAAK;AAE1E,QAAM,gBAA0C,CAAC;AACjD,WAAS,IAAI,WAAW,KAAK,YAAY,KAAK;AAC5C,kBAAc,KAAK,GAAG,eAAe,WAAW,CAAC,CAAC,CAAC;AAAA,EACrD;AAEA,SAAO;AACT;AAIO,MAAM,oBACX,CAAC,eAAuB,mBACxB,CAAC,cAAsC;AACrC,SACE,UAAU,KAAK,mBACf,UAAU,KAAK,iBAAiB,mBAChC,UAAU,KAAK,mBACf,UAAU,KAAK,gBAAgB;AAEnC;",
   "names": []
 }

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

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

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

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

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

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

package/esm/charts/top-list/TopList.css ADDED Viewed

@@ -0,0 +1,4 @@
+._jwlby60-3-7-0 {
+  width: 100%;
+  overflow-y: auto;
+}

package/esm/charts/top-list/TopList.js ADDED Viewed

@@ -0,0 +1,109 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef,
+  useRef,
+  useMemo,
+  useCallback
+} from "react";
+import {
+  ROW_HEIGHT,
+  SERIES_ID_KEY,
+  SERIES_NAME_KEY,
+  X_AXIS_ID,
+  Y_AXIS_ID
+} from "./constants.js";
+import { scrollContainer } from "./TopList.sty.js";
+import { useMergeRefs } from "../../core/hooks/useMergeRefs.js";
+import {
+  coerceSizeValue,
+  coerceSizeValueToPixels
+} from "../core/utils/coerceSizeValue.js";
+import { DEFAULT_CHART_HEIGHT } from "../xy-chart/constants/defaults.js";
+import { XYChart } from "../xy-chart/XYChartRoot.js";
+const TopList = forwardRef(function TopList2({
+  data,
+  labelAccessor,
+  valueAccessor,
+  categoryAccessor,
+  categoryFormatter,
+  valueFormatter,
+  seriesIdAccessor,
+  seriesNameAccessor,
+  height = DEFAULT_CHART_HEIGHT,
+  ...xyChartProps
+}, forwardedRef) {
+  const internalRef = useRef(null);
+  const mergedRef = useMergeRefs([internalRef, forwardedRef]);
+  const onScroll = useCallback(() => internalRef.current?.reset(), []);
+  const dataWithSyntheticSeries = useMemo(() => {
+    if (seriesIdAccessor !== void 0) {
+      return data;
+    }
+    return data.map((d) => ({
+      ...d,
+      [SERIES_ID_KEY]: "series",
+      [SERIES_NAME_KEY]: "Series"
+    }));
+  }, [data, seriesIdAccessor]);
+  const viewportPx = coerceSizeValueToPixels(height) ?? DEFAULT_CHART_HEIGHT;
+  const contentHeight = Math.max(viewportPx, data.length * ROW_HEIGHT);
+  const legend = seriesIdAccessor === void 0 && /* @__PURE__ */ jsx(XYChart.Legend, { hidden: true });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: scrollContainer,
+      style: { height: coerceSizeValue(height) },
+      onScroll,
+      children: /* @__PURE__ */ jsxs(
+        XYChart,
+        {
+          data: dataWithSyntheticSeries,
+          height: contentHeight,
+          ref: mergedRef,
+          ...xyChartProps,
+          children: [
+            /* @__PURE__ */ jsx(
+              XYChart.BarSeries,
+              {
+                variant: "single",
+                y0Accessor: categoryAccessor,
+                x1Accessor: valueAccessor,
+                labelAccessor,
+                seriesIdAccessor: seriesIdAccessor ?? SERIES_ID_KEY,
+                nameAccessor: seriesNameAccessor ?? SERIES_NAME_KEY,
+                yAxisId: Y_AXIS_ID,
+                xAxisId: X_AXIS_ID
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              XYChart.XAxis,
+              {
+                id: X_AXIS_ID,
+                type: "numerical",
+                position: "bottom",
+                hidden: true,
+                disableZoom: true,
+                disablePan: true,
+                formatter: valueFormatter
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              XYChart.YAxis,
+              {
+                id: Y_AXIS_ID,
+                type: "categorical",
+                position: "left",
+                formatter: categoryFormatter
+              }
+            ),
+            legend
+          ]
+        }
+      )
+    }
+  );
+});
+export {
+  TopList
+};
+//# sourceMappingURL=TopList.js.map

package/esm/charts/top-list/TopList.js.map ADDED Viewed

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/charts/top-list/TopList.tsx"],
+  "sourcesContent": ["import {\n  forwardRef,\n  useRef,\n  useMemo,\n  useCallback,\n  type ForwardedRef,\n} from 'react';\n\nimport {\n  ROW_HEIGHT,\n  SERIES_ID_KEY,\n  SERIES_NAME_KEY,\n  X_AXIS_ID,\n  Y_AXIS_ID,\n} from './constants.js';\nimport { scrollContainer } from './TopList.sty.js';\nimport type { TopListProps } from './types/top-list.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport {\n  coerceSizeValue,\n  coerceSizeValueToPixels,\n} from '../core/utils/coerceSizeValue.js';\nimport { DEFAULT_CHART_HEIGHT } from '../xy-chart/constants/defaults.js';\nimport type { XYChartRef } from '../xy-chart/types/xy-chart.js';\nimport { XYChart } from '../xy-chart/XYChartRoot.js';\n\nexport type { TopListProps };\n\n/**\n * A horizontal ranked-bar chart with labels inside bars and a hidden numerical\n * axis, implemented as a wrapper around XYChart. When the list has more items\n * than fit in `height`, the viewport becomes scrollable.\n * @public\n */\nexport const TopList = forwardRef<XYChartRef, TopListProps>(function TopList(\n  {\n    data,\n    labelAccessor,\n    valueAccessor,\n    categoryAccessor,\n    categoryFormatter,\n    valueFormatter,\n    seriesIdAccessor,\n    seriesNameAccessor,\n    height = DEFAULT_CHART_HEIGHT,\n    ...xyChartProps\n  }: TopListProps,\n  forwardedRef: ForwardedRef<XYChartRef>,\n) {\n  const internalRef = useRef<XYChartRef>(null);\n  const mergedRef = useMergeRefs([internalRef, forwardedRef]);\n  const onScroll = useCallback(() => internalRef.current?.reset(), []);\n\n  const dataWithSyntheticSeries = useMemo(() => {\n    if (seriesIdAccessor !== undefined) {\n      return data;\n    }\n    return data.map((d) => ({\n      ...d,\n      [SERIES_ID_KEY]: 'series',\n      [SERIES_NAME_KEY]: 'Series',\n    }));\n  }, [data, seriesIdAccessor]);\n\n  const viewportPx = coerceSizeValueToPixels(height) ?? DEFAULT_CHART_HEIGHT;\n  const contentHeight = Math.max(viewportPx, data.length * ROW_HEIGHT);\n\n  const legend = seriesIdAccessor === undefined && <XYChart.Legend hidden />;\n\n  return (\n    <div\n      className={scrollContainer}\n      style={{ height: coerceSizeValue(height) }}\n      onScroll={onScroll}\n    >\n      <XYChart\n        data={dataWithSyntheticSeries}\n        height={contentHeight}\n        ref={mergedRef}\n        {...xyChartProps}\n      >\n        <XYChart.BarSeries\n          variant=\"single\"\n          y0Accessor={categoryAccessor}\n          x1Accessor={valueAccessor}\n          labelAccessor={labelAccessor}\n          seriesIdAccessor={seriesIdAccessor ?? SERIES_ID_KEY}\n          nameAccessor={seriesNameAccessor ?? SERIES_NAME_KEY}\n          yAxisId={Y_AXIS_ID}\n          xAxisId={X_AXIS_ID}\n        />\n        <XYChart.XAxis\n          id={X_AXIS_ID}\n          type=\"numerical\"\n          position=\"bottom\"\n          hidden\n          disableZoom\n          disablePan\n          formatter={valueFormatter}\n        />\n        <XYChart.YAxis\n          id={Y_AXIS_ID}\n          type=\"categorical\"\n          position=\"left\"\n          formatter={categoryFormatter}\n        />\n        {legend}\n      </XYChart>\n    </div>\n  );\n});\n"],
+  "mappings": "AAmEmD,cAQ7C,YAR6C;AAnEnD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AAEP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,uBAAuB;AAEhC,SAAS,oBAAoB;AAC7B;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,4BAA4B;AAErC,SAAS,eAAe;AAUjB,MAAM,UAAU,WAAqC,SAASA,SACnE;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,GAAG;AACL,GACA,cACA;AACA,QAAM,cAAc,OAAmB,IAAI;AAC3C,QAAM,YAAY,aAAa,CAAC,aAAa,YAAY,CAAC;AAC1D,QAAM,WAAW,YAAY,MAAM,YAAY,SAAS,MAAM,GAAG,CAAC,CAAC;AAEnE,QAAM,0BAA0B,QAAQ,MAAM;AAC5C,QAAI,qBAAqB,QAAW;AAClC,aAAO;AAAA,IACT;AACA,WAAO,KAAK,IAAI,CAAC,OAAO;AAAA,MACtB,GAAG;AAAA,MACH,CAAC,aAAa,GAAG;AAAA,MACjB,CAAC,eAAe,GAAG;AAAA,IACrB,EAAE;AAAA,EACJ,GAAG,CAAC,MAAM,gBAAgB,CAAC;AAE3B,QAAM,aAAa,wBAAwB,MAAM,KAAK;AACtD,QAAM,gBAAgB,KAAK,IAAI,YAAY,KAAK,SAAS,UAAU;AAEnE,QAAM,SAAS,qBAAqB,UAAa,oBAAC,QAAQ,QAAR,EAAe,QAAM,MAAC;AAExE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,OAAO,EAAE,QAAQ,gBAAgB,MAAM,EAAE;AAAA,MACzC;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,MAAM;AAAA,UACN,QAAQ;AAAA,UACR,KAAK;AAAA,UACJ,GAAG;AAAA,UAEJ;AAAA;AAAA,cAAC,QAAQ;AAAA,cAAR;AAAA,gBACC,SAAQ;AAAA,gBACR,YAAY;AAAA,gBACZ,YAAY;AAAA,gBACZ;AAAA,gBACA,kBAAkB,oBAAoB;AAAA,gBACtC,cAAc,sBAAsB;AAAA,gBACpC,SAAS;AAAA,gBACT,SAAS;AAAA;AAAA,YACX;AAAA,YACA;AAAA,cAAC,QAAQ;AAAA,cAAR;AAAA,gBACC,IAAI;AAAA,gBACJ,MAAK;AAAA,gBACL,UAAS;AAAA,gBACT,QAAM;AAAA,gBACN,aAAW;AAAA,gBACX,YAAU;AAAA,gBACV,WAAW;AAAA;AAAA,YACb;AAAA,YACA;AAAA,cAAC,QAAQ;AAAA,cAAR;AAAA,gBACC,IAAI;AAAA,gBACJ,MAAK;AAAA,gBACL,UAAS;AAAA,gBACT,WAAW;AAAA;AAAA,YACb;AAAA,YACC;AAAA;AAAA;AAAA,MACH;AAAA;AAAA,EACF;AAEJ,CAAC;",
+  "names": ["TopList"]
+}

package/esm/charts/top-list/TopList.sty.js ADDED Viewed

@@ -0,0 +1,6 @@
+import "./TopList.css";
+var scrollContainer = "_jwlby60-3-7-0";
+export {
+  scrollContainer
+};
+//# sourceMappingURL=TopList.sty.js.map

package/esm/charts/top-list/TopList.sty.js.map ADDED Viewed

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/charts/top-list/TopList.css.ts"],
+  "sourcesContent": ["import './TopList.css';\nexport var scrollContainer = '_jwlby60-3-7-0';"],
+  "mappings": "AAAA,OAAO;AACA,IAAI,kBAAkB;",
+  "names": []
+}

package/esm/charts/top-list/constants.js ADDED Viewed

@@ -0,0 +1,13 @@
+const ROW_HEIGHT = 25;
+const SERIES_ID_KEY = "__toplist_series_id__";
+const SERIES_NAME_KEY = "__toplist_series_name__";
+const X_AXIS_ID = "toplist-x";
+const Y_AXIS_ID = "toplist-y";
+export {
+  ROW_HEIGHT,
+  SERIES_ID_KEY,
+  SERIES_NAME_KEY,
+  X_AXIS_ID,
+  Y_AXIS_ID
+};
+//# sourceMappingURL=constants.js.map

package/esm/charts/top-list/constants.js.map ADDED Viewed

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/charts/top-list/constants.ts"],
+  "sourcesContent": ["/**\n * Height reserved per bar (row), in pixels.\n * @internal\n */\nexport const ROW_HEIGHT = 25;\n\n/** @internal */\nexport const SERIES_ID_KEY = '__toplist_series_id__';\n\n/** @internal */\nexport const SERIES_NAME_KEY = '__toplist_series_name__';\n\n/** @internal */\nexport const X_AXIS_ID = 'toplist-x';\n\n/** @internal */\nexport const Y_AXIS_ID = 'toplist-y';\n"],
+  "mappings": "AAIO,MAAM,aAAa;AAGnB,MAAM,gBAAgB;AAGtB,MAAM,kBAAkB;AAGxB,MAAM,YAAY;AAGlB,MAAM,YAAY;",
+  "names": []
+}

package/esm/charts/top-list/types/top-list.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ //# sourceMappingURL=top-list.js.map

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

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

package/esm/charts/tree-map/components/TreeMapOverlay/TreeMapOverlay.js CHANGED Viewed

@@ -2,12 +2,11 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { container } from "./TreeMapOverlay.sty.js";
 import { Flex } from "../../../../layouts/flex/Flex.js";
 import { useGraphSize } from "../../../core/components/chart-layout/hooks/useGraphSize.js";
-import { useTooltipData } from "../../../core/components/overlay-tooltip/_to-be-removed/utils.js";
 import { useOverlay } from "../../../core/components/overlay-tooltip/contexts/OverlayContext.js";
+import { useTooltipData } from "../../../core/components/overlay-tooltip/hooks/useTooltipData.js";
 import { useSeriesActions } from "../../../core/components/series-action/ChartSeriesActionContext.js";
 import { isToolbarEnabled } from "../../../core/utils/is-toolbar-enabled.js";
 import { useToolbarConfig } from "../../context/ToolbarContext.js";
-import { TreeMapOverlayRefContext } from "../../contexts/TreeMapOverlayRefContext.js";
 import { useOverlayHandlers } from "../../hooks/useOverlayHandlers.js";
 import { TreeMapToolbar } from "../TreeMapToolbar/TreeMapToolbar.js";
 import { TreeMapOverlayTooltip } from "../TreeMapTooltip/TreeMapOverlayTooltip.js";
@@ -28,7 +27,7 @@ const TreeMapOverlay = () => {
   const data = useTooltipData().data;
   const series = data?.series?.[0];
   const metadata = data?.metadata;
-  return /* @__PURE__ */ jsx(TreeMapOverlayRefContext.Provider, { value: overlay.overlayRef, children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs(
     Flex,
     {
       ref: overlay.overlayRef,
@@ -52,7 +51,7 @@ const TreeMapOverlay = () => {
         toolbarEnabled && /* @__PURE__ */ jsx(TreeMapToolbar, {})
       ]
     }
-  ) });
+  );
 };
 TreeMapOverlay["displayName"] = "TreeMapOverlay";
 export {

package/esm/charts/tree-map/components/TreeMapOverlay/TreeMapOverlay.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/tree-map/components/TreeMapOverlay/TreeMapOverlay.tsx"],
-  "sourcesContent": ["import { container } from './TreeMapOverlay.sty.js';\nimport { Flex } from '../../../../layouts/flex/Flex.js';\nimport { useGraphSize } from '../../../core/components/chart-layout/hooks/useGraphSize.js';\nimport { useTooltipData } from '../../../core/components/overlay-tooltip/_to-be-removed/utils.js';\nimport { useOverlay } from '../../../core/components/overlay-tooltip/contexts/OverlayContext.js';\nimport { useSeriesActions } from '../../../core/components/series-action/ChartSeriesActionContext.js';\nimport { isToolbarEnabled } from '../../../core/utils/is-toolbar-enabled.js';\nimport { useToolbarConfig } from '../../context/ToolbarContext.js';\nimport { TreeMapOverlayRefContext } from '../../contexts/TreeMapOverlayRefContext.js';\nimport { useOverlayHandlers } from '../../hooks/useOverlayHandlers.js';\nimport { TreeMapToolbar } from '../TreeMapToolbar/TreeMapToolbar.js';\nimport { TreeMapOverlayTooltip } from '../TreeMapTooltip/TreeMapOverlayTooltip.js';\n\nexport const TreeMapOverlay = () => {\n  const overlay = useOverlay();\n  const { width, height } = useGraphSize();\n  const roundedWidth = Math.floor(width);\n  const roundedHeight = Math.floor(height);\n\n  const {\n    handlePointerEnter,\n    handlePointerMove,\n    handlePointerLeave,\n    handleMouseClick,\n  } = useOverlayHandlers(overlay);\n\n  const toolbarConfig = useToolbarConfig();\n  const toolbarEnabled = isToolbarEnabled(toolbarConfig);\n  const { chartSeriesActions } = useSeriesActions();\n  const data = useTooltipData().data;\n\n  const series = data?.series?.[0];\n  const metadata = data?.metadata as { id: string; value: number } | undefined;\n\n  return (\n    <TreeMapOverlayRefContext.Provider value={overlay.overlayRef}>\n      <Flex\n        ref={overlay.overlayRef}\n        style={{ width: roundedWidth, height: roundedHeight }}\n        className={container}\n        onClick={handleMouseClick}\n        onPointerEnter={handlePointerEnter}\n        onPointerMove={handlePointerMove}\n        onPointerLeave={handlePointerLeave}\n      >\n        <TreeMapOverlayTooltip\n          actionsForItem={\n            chartSeriesActions && series && metadata\n              ? () => () =>\n                  chartSeriesActions({\n                    id: metadata.id,\n                    name: series.name,\n                    value: metadata.value,\n                  })\n              : undefined\n          }\n        />\n        {toolbarEnabled && <TreeMapToolbar />}\n      </Flex>\n    </TreeMapOverlayRefContext.Provider>\n  );\n};\n\nTreeMapOverlay['displayName'] = 'TreeMapOverlay';\n"],
-  "mappings": "AAoCM,SASE,KATF;AApCN,SAAS,iBAAiB;AAC1B,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAC7B,SAAS,sBAAsB;AAC/B,SAAS,kBAAkB;AAC3B,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AACjC,SAAS,gCAAgC;AACzC,SAAS,0BAA0B;AACnC,SAAS,sBAAsB;AAC/B,SAAS,6BAA6B;AAE/B,MAAM,iBAAiB,MAAM;AAClC,QAAM,UAAU,WAAW;AAC3B,QAAM,EAAE,OAAO,OAAO,IAAI,aAAa;AACvC,QAAM,eAAe,KAAK,MAAM,KAAK;AACrC,QAAM,gBAAgB,KAAK,MAAM,MAAM;AAEvC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,mBAAmB,OAAO;AAE9B,QAAM,gBAAgB,iBAAiB;AACvC,QAAM,iBAAiB,iBAAiB,aAAa;AACrD,QAAM,EAAE,mBAAmB,IAAI,iBAAiB;AAChD,QAAM,OAAO,eAAe,EAAE;AAE9B,QAAM,SAAS,MAAM,SAAS,CAAC;AAC/B,QAAM,WAAW,MAAM;AAEvB,SACE,oBAAC,yBAAyB,UAAzB,EAAkC,OAAO,QAAQ,YAChD;AAAA,IAAC;AAAA;AAAA,MACC,KAAK,QAAQ;AAAA,MACb,OAAO,EAAE,OAAO,cAAc,QAAQ,cAAc;AAAA,MACpD,WAAW;AAAA,MACX,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,eAAe;AAAA,MACf,gBAAgB;AAAA,MAEhB;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,gBACE,sBAAsB,UAAU,WAC5B,MAAM,MACJ,mBAAmB;AAAA,cACjB,IAAI,SAAS;AAAA,cACb,MAAM,OAAO;AAAA,cACb,OAAO,SAAS;AAAA,YAClB,CAAC,IACH;AAAA;AAAA,QAER;AAAA,QACC,kBAAkB,oBAAC,kBAAe;AAAA;AAAA;AAAA,EACrC,GACF;AAEJ;AAEA,eAAe,aAAa,IAAI;",
+  "sourcesContent": ["import { container } from './TreeMapOverlay.sty.js';\nimport { Flex } from '../../../../layouts/flex/Flex.js';\nimport { useGraphSize } from '../../../core/components/chart-layout/hooks/useGraphSize.js';\nimport { useOverlay } from '../../../core/components/overlay-tooltip/contexts/OverlayContext.js';\nimport { useTooltipData } from '../../../core/components/overlay-tooltip/hooks/useTooltipData.js';\nimport { useSeriesActions } from '../../../core/components/series-action/ChartSeriesActionContext.js';\nimport { isToolbarEnabled } from '../../../core/utils/is-toolbar-enabled.js';\nimport { useToolbarConfig } from '../../context/ToolbarContext.js';\nimport { useOverlayHandlers } from '../../hooks/useOverlayHandlers.js';\nimport { TreeMapToolbar } from '../TreeMapToolbar/TreeMapToolbar.js';\nimport { TreeMapOverlayTooltip } from '../TreeMapTooltip/TreeMapOverlayTooltip.js';\n\nexport const TreeMapOverlay = () => {\n  const overlay = useOverlay();\n  const { width, height } = useGraphSize();\n  const roundedWidth = Math.floor(width);\n  const roundedHeight = Math.floor(height);\n\n  const {\n    handlePointerEnter,\n    handlePointerMove,\n    handlePointerLeave,\n    handleMouseClick,\n  } = useOverlayHandlers(overlay);\n\n  const toolbarConfig = useToolbarConfig();\n  const toolbarEnabled = isToolbarEnabled(toolbarConfig);\n  const { chartSeriesActions } = useSeriesActions();\n  const data = useTooltipData().data;\n\n  const series = data?.series?.[0];\n  const metadata = data?.metadata as { id: string; value: number } | undefined;\n\n  return (\n    <Flex\n      ref={overlay.overlayRef}\n      style={{ width: roundedWidth, height: roundedHeight }}\n      className={container}\n      onClick={handleMouseClick}\n      onPointerEnter={handlePointerEnter}\n      onPointerMove={handlePointerMove}\n      onPointerLeave={handlePointerLeave}\n    >\n      <TreeMapOverlayTooltip\n        actionsForItem={\n          chartSeriesActions && series && metadata\n            ? () => () =>\n                chartSeriesActions({\n                  id: metadata.id,\n                  name: series.name,\n                  value: metadata.value,\n                })\n            : undefined\n        }\n      />\n      {toolbarEnabled && <TreeMapToolbar />}\n    </Flex>\n  );\n};\n\nTreeMapOverlay['displayName'] = 'TreeMapOverlay';\n"],
+  "mappings": "AAkCI,SASE,KATF;AAlCJ,SAAS,iBAAiB;AAC1B,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAC3B,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AACjC,SAAS,0BAA0B;AACnC,SAAS,sBAAsB;AAC/B,SAAS,6BAA6B;AAE/B,MAAM,iBAAiB,MAAM;AAClC,QAAM,UAAU,WAAW;AAC3B,QAAM,EAAE,OAAO,OAAO,IAAI,aAAa;AACvC,QAAM,eAAe,KAAK,MAAM,KAAK;AACrC,QAAM,gBAAgB,KAAK,MAAM,MAAM;AAEvC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,mBAAmB,OAAO;AAE9B,QAAM,gBAAgB,iBAAiB;AACvC,QAAM,iBAAiB,iBAAiB,aAAa;AACrD,QAAM,EAAE,mBAAmB,IAAI,iBAAiB;AAChD,QAAM,OAAO,eAAe,EAAE;AAE9B,QAAM,SAAS,MAAM,SAAS,CAAC;AAC/B,QAAM,WAAW,MAAM;AAEvB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK,QAAQ;AAAA,MACb,OAAO,EAAE,OAAO,cAAc,QAAQ,cAAc;AAAA,MACpD,WAAW;AAAA,MACX,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,eAAe;AAAA,MACf,gBAAgB;AAAA,MAEhB;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,gBACE,sBAAsB,UAAU,WAC5B,MAAM,MACJ,mBAAmB;AAAA,cACjB,IAAI,SAAS;AAAA,cACb,MAAM,OAAO;AAAA,cACb,OAAO,SAAS;AAAA,YAClB,CAAC,IACH;AAAA;AAAA,QAER;AAAA,QACC,kBAAkB,oBAAC,kBAAe;AAAA;AAAA;AAAA,EACrC;AAEJ;AAEA,eAAe,aAAa,IAAI;",
   "names": []
 }

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

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

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

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

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

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