@dynatrace/strato-components 3.5.0 → 3.6.0

package/charts/timeseries/TimeseriesChartInternal.js

@@ -0,0 +1,151 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var TimeseriesChartInternal_exports = {};
+__export(TimeseriesChartInternal_exports, {
+  TimeseriesChartInternal: () => TimeseriesChartInternal
+});
+module.exports = __toCommonJS(TimeseriesChartInternal_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_constants = require("./components/annotations-timeseries/constants.js");
+var import_TimeseriesAnnotationsIndicators = require("./components/annotations-timeseries/TimeseriesAnnotationsIndicators.js");
+var import_TimeseriesChartAnnotationsArea = require("./components/annotations-timeseries/TimeseriesChartAnnotationsArea.js");
+var import_TimeseriesTimeBottomAxisArea = require("./components/axes/TimeseriesTimeBottomAxisArea/TimeseriesTimeBottomAxisArea.js");
+var import_TimeseriesValueLeftAxisArea = require("./components/axes/TimeseriesValueLeftAxisArea.js");
+var import_TimeseriesValueRightAxisArea = require("./components/axes/TimeseriesValueRightAxisArea.js");
+var import_TimeseriesChartOverlays = require("./components/overlays/TimeseriesChartOverlays.js");
+var import_ThresholdIndicators = require("./components/thresholds/ThresholdIndicators.js");
+var import_TimeseriesThresholdArea = require("./components/thresholds/TimeseriesThresholdArea.js");
+var import_constants2 = require("./constants.js");
+var import_useAnnotationsConfig = require("./hooks/useAnnotationsConfig.js");
+var import_useChartInteractions = require("./hooks/useChartInteractions.js");
+var import_useTimeseriesFilteredData = require("./hooks/useTimeseriesFilteredData.js");
+var import_useTimeseriesFilteredYAxis = require("./hooks/useTimeseriesFilteredYAxis.js");
+var import_useTimeseriesLegend = require("./hooks/useTimeseriesLegend.js");
+var import_TimeseriesChartPlot = require("./layout/TimeseriesChartPlot.js");
+var import_TimeseriesChartImperativeHandler = require("./providers/TimeseriesChartImperativeHandler.js");
+var import_TimeseriesChartProviders = require("./providers/TimeseriesChartProviders.js");
+var import_timeseries_grid_area_rules = require("./types/timeseries-grid-area-rules.js");
+var import_useMergeRefs = require("../../core/hooks/useMergeRefs.js");
+var import_defaultChartValues_css = require("../../core/styles/defaultChartValues.sty.js");
+var import_constants3 = require("../core/components/annotations/constants.js");
+var import_get_annotations_visible_area = require("../core/components/annotations/utils/get-annotations-visible-area.js");
+var import_ChartGridRoot = require("../core/components/chart-grid/ChartGridRoot.js");
+var import_useChartLayoutLoading = require("../core/components/chart-layout/hooks/useChartLayoutLoading.js");
+var import_useChartLayoutOrientation = require("../core/components/chart-layout/hooks/useChartLayoutOrientation.js");
+var import_useGraphSize = require("../core/components/chart-layout/hooks/useGraphSize.js");
+var import_ChartLoaderOverlay = require("../core/components/chart-loader-overlay/ChartLoaderOverlay.js");
+var import_constants4 = require("../core/components/data-point/constants.js");
+const timeseriesGridTemplateAreas = `
+  "${import_timeseries_grid_area_rules.AREAS.annotations} ${import_timeseries_grid_area_rules.AREAS.annotations} ${import_timeseries_grid_area_rules.AREAS.annotations} . ."
+  "${import_timeseries_grid_area_rules.AREAS.leftAxis} ${import_timeseries_grid_area_rules.AREAS.leftThreshold} plot ${import_timeseries_grid_area_rules.AREAS.rightThreshold} ${import_timeseries_grid_area_rules.AREAS.rightAxis}"
+  ". . ${import_timeseries_grid_area_rules.AREAS.bottomAxis} . ."
+`;
+const timeseriesGridTemplateColumns = "minmax(0, auto) auto minmax(60%, 1fr) auto minmax(0, auto)";
+const TimeseriesChartInternal = /* @__PURE__ */ (0, import_react.forwardRef)(({ config }, forwardedRef) => {
+  const loading = (0, import_useChartLayoutLoading.useChartLayoutLoading)();
+  const annotations = (0, import_useAnnotationsConfig.useAnnotationsConfig)();
+  const tracksQuantity = annotations.tracks.length;
+  const numHiddenTracks = annotations.tracks.filter(
+    (value) => value.hidden
+  ).length;
+  const chartRef = (0, import_react.useRef)(null);
+  const mergedRef = (0, import_useMergeRefs.useMergeRefs)([
+    forwardedRef,
+    chartRef
+  ]);
+  const { width, height } = (0, import_useGraphSize.useGraphSize)();
+  const { orientation } = (0, import_useChartLayoutOrientation.useChartLayoutOrientation)();
+  const { right: axisRightConfig, left: axisLeftConfig } = (0, import_useTimeseriesFilteredYAxis.useTimeseriesFilteredYAxis)();
+  const { units } = (0, import_useTimeseriesFilteredData.useTimeseriesFilteredData)();
+  const { hidden: legendHidden } = (0, import_useTimeseriesLegend.useTimeseriesLegend)();
+  const annotationsVisibleArea = (0, import_get_annotations_visible_area.getAnnotationsVisibleArea)(
+    tracksQuantity,
+    annotations.visibleTracksLimit,
+    numHiddenTracks
+  );
+  const timeseriesGridTemplateRows = `minmax(0, ${annotationsVisibleArea + (tracksQuantity && import_constants.ANNOTATIONS_PADDING_BOTTOM)}px)  minmax(60%, 1fr) minmax(0, auto)`;
+  const availableWidth = tracksQuantity && orientation === "vertical" ? width - import_constants3.SCROLLBAR_WIDTH : width;
+  const isLegendHiddenOrVertical = orientation === "vertical" || legendHidden;
+  const isLegendHiddenOrRight = orientation === "horizontal" || legendHidden;
+  const bothConfigsUndefinedAndOneUnit = !axisLeftConfig && !axisRightConfig && units.length === 1 && isLegendHiddenOrVertical;
+  const bothConfigsSetAndOneUnit = axisLeftConfig && axisRightConfig && units.length === 1 && isLegendHiddenOrVertical;
+  const leftConfigSetAndVertical = axisLeftConfig && isLegendHiddenOrVertical;
+  const rightConfigSet = axisRightConfig;
+  const paddingRight = bothConfigsUndefinedAndOneUnit || bothConfigsSetAndOneUnit || leftConfigSetAndVertical;
+  const onlyRightAxis = !axisLeftConfig && rightConfigSet;
+  const hasLeftPadding = onlyRightAxis;
+  const hasRightPadding = hasLeftPadding || paddingRight;
+  const chartGridHeight = height - (!tracksQuantity || isLegendHiddenOrRight ? import_constants4.OVERLAY_PADDING + import_constants4.BOTTOM_PADDING_ADJUSTMENT : 0);
+  (0, import_useChartInteractions.useChartInteractions)();
+  if (!height || !width) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      style: {
+        paddingTop: tracksQuantity ? 0 : import_constants4.OVERLAY_PADDING,
+        paddingLeft: hasLeftPadding ? import_constants4.OVERLAY_PADDING : 0
+      },
+      className: import_defaultChartValues_css.defaultChartSize,
+      "aria-label": import_constants2.TIMESERIES_ARIA_LABEL,
+      role: "img",
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_ChartGridRoot.ChartGrid,
+        {
+          width: availableWidth - (hasRightPadding ? import_constants4.OVERLAY_PADDING : 0),
+          height: chartGridHeight,
+          gridTemplateAreas: timeseriesGridTemplateAreas,
+          gridTemplateColumns: timeseriesGridTemplateColumns,
+          gridTemplateRows: timeseriesGridTemplateRows,
+          ref: mergedRef,
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TimeseriesChartProviders.TimeseriesChartProviders, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            import_TimeseriesChartImperativeHandler.TimeseriesChartImperativeHandler,
+            {
+              config,
+              forwardedRef,
+              chartRef,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TimeseriesValueLeftAxisArea.TimeseriesValueLeftAxisArea, {}),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TimeseriesTimeBottomAxisArea.TimeseriesTimeBottomAxisArea, {}),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ChartGridRoot.ChartGrid.PlotArea, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TimeseriesChartPlot.TimeseriesChartPlot, {}),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TimeseriesAnnotationsIndicators.TimeseriesAnnotationsIndicators, {}),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_ChartLoaderOverlay.ChartLoaderOverlay,
+                    {
+                      loading: !!loading,
+                      zoomEnabled: !!config.interactions?.zoom?.enabled,
+                      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TimeseriesChartOverlays.TimeseriesChartOverlays, {})
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ThresholdIndicators.ThresholdIndicators, { indicatorType: "line" })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TimeseriesValueRightAxisArea.TimeseriesValueRightAxisArea, {}),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TimeseriesThresholdArea.TimeseriesThresholdArea, {}),
+                !!tracksQuantity && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TimeseriesChartAnnotationsArea.TimeseriesChartAnnotationsArea, {})
+              ]
+            }
+          ) })
+        }
+      )
+    }
+  );
+});
+TimeseriesChartInternal.displayName = import_constants2.DISPLAY_NAME;

package/charts/timeseries/TimeseriesChartRoot.d.ts

@@ -1,96 +1,7 @@
-import { type PropsWithChildren, type ReactElement } from 'react';
+import { type ReactElement } from 'react';
 import { TimeseriesChartProps } from './types/timeseries-props.js';
 import { TimeseriesChartRef } from './types/timeseries-ref.js';
 /**
- * The `TimeseriesChart` visually represents data in sequential order of time.
- * It's used to observe trends, patterns, and fluctuations in the data over a
- * specific time period.
- * @public
+ * TimeseriesChart component
  */
-export declare const TimeseriesChart: ((props: TimeseriesChartProps & import("react").RefAttributes<TimeseriesChartRef>) => import("react").ReactElement | null) & {
-    Band: {
-        (props: import("./types/timeseries-band.js").TimeseriesChartBandProps): null;
-        displayName: string;
-    };
-    Legend: {
-        (props: import("./slots/Legend.js").TimeseriesChartLegendProps): null;
-        displayName: string;
-    };
-    YAxis: {
-        (props: import("./slots/YAxis.js").TimeseriesChartYAxisProps): null;
-        displayName: string;
-    };
-    XAxis: {
-        (props: import("./slots/XAxis.js").TimeseriesChartXAxisProps): null;
-        displayName: string;
-    };
-    Tooltip: {
-        (props: import("./slots/Tooltip.js").TimeseriesChartTooltipProps): null;
-        displayName: string;
-    };
-    Annotations: (props: PropsWithChildren<import("../index.js").TimeseriesChartAnnotationsProps>) => null;
-    Line: {
-        (props: import("../index.js").TimeseriesChartLineProps): null;
-        displayName: string;
-    };
-    Area: {
-        (props: import("../index.js").TimeseriesChartAreaProps): null;
-        displayName: string;
-    };
-    Bar: {
-        (props: import("../index.js").TimeseriesChartBarProps): null;
-        displayName: string;
-    };
-    ThresholdIndicator: {
-        (props: PropsWithChildren<import("./slots/ThresholdIndicator.js").TimeseriesChartThresholdIndicatorProps>): null;
-        displayName: string;
-    };
-    Select: {
-        (props: import("./slots/Select.js").TimeseriesSelectProps): null;
-        displayName: string;
-    };
-    Intent: {
-        (props: import("../../index.js").IntentProps): null;
-        displayName: string;
-    };
-    EmptyState: ({ children }: import("../index.js").EmptyStateProp) => import("react/jsx-runtime").JSX.Element;
-    ErrorState: ({ children }: import("../index.js").ErrorStateProps) => import("react/jsx-runtime").JSX.Element;
-    ColorRule: {
-        (_props: import("../index.js").ColorRuleProps): null;
-        displayName: string;
-    };
-    Toolbar: {
-        (props: import("./types/toolbar.js").TimeseriesChartToolbarSlotProps): null;
-        displayName: string;
-    };
-    DownloadCSV: {
-        (): null;
-        displayName: string;
-    };
-    Pan: {
-        (props: import("./slots/Pan.js").TimeseriesPanSlotProps): null;
-        displayName: string;
-    };
-    Zoom: {
-        (props: import("./slots/Zoom.js").TimeseriesZoomSlotProps): null;
-        displayName: string;
-    };
-};
-/**
- * Annotations Slots
- * @public
- */
-export declare const TimeseriesAnnotations: {
-    Marker: {
-        (props: import("../index.js").TimeseriesAnnotationsMarkerProps): null;
-        displayName: string;
-    };
-    Track: {
-        (props: PropsWithChildren<import("../index.js").TimeseriesAnnotationsTrackProps>): null;
-        displayName: string;
-    };
-    Tooltip: {
-        (props: import("../index.js").AnnotationsTooltipProps): null;
-        displayName: string;
-    };
-};
+export declare const TimeseriesChartRoot: (props: TimeseriesChartProps & import("react").RefAttributes<TimeseriesChartRef>) => import("react").ReactElement | null;

package/charts/timeseries/TimeseriesChartRoot.js

@@ -17,8 +17,7 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var TimeseriesChartRoot_exports = {};
 __export(TimeseriesChartRoot_exports, {
-  TimeseriesAnnotations: () => TimeseriesAnnotations,
-  TimeseriesChart: () => TimeseriesChart
+  TimeseriesChartRoot: () => TimeseriesChartRoot
 });
 module.exports = __toCommonJS(TimeseriesChartRoot_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -33,38 +32,16 @@ var import_TimeseriesConfigProviders = require("./providers/TimeseriesConfigProv
 var import_TimeseriesDataProvider = require("./providers/TimeseriesDataProvider.js");
 var import_TimeseriesFilteredDataProvider = require("./providers/TimeseriesFilteredDataProvider.js");
 var import_TimeseriesMinMaxXAxisProvider = require("./providers/TimeseriesMinMaxXAxisProvider.js");
-var import_Annotations = require("./slots/annotations/Annotations.js");
-var import_Marker = require("./slots/annotations/Marker.js");
-var import_Track = require("./slots/annotations/Track.js");
-var import_Legend = require("./slots/Legend.js");
-var import_Pan = require("./slots/Pan.js");
-var import_Select = require("./slots/Select.js");
-var import_Area = require("./slots/shapes/Area.js");
-var import_Band = require("./slots/shapes/Band.js");
-var import_Bar = require("./slots/shapes/Bar.js");
-var import_Line = require("./slots/shapes/Line.js");
-var import_ThresholdIndicator = require("./slots/ThresholdIndicator.js");
-var import_Toolbar = require("./slots/Toolbar.js");
-var import_Tooltip = require("./slots/Tooltip.js");
-var import_XAxis = require("./slots/XAxis.js");
-var import_YAxis = require("./slots/YAxis.js");
-var import_Zoom = require("./slots/Zoom.js");
-var import_TimeseriesChart = require("./TimeseriesChart.js");
+var import_TimeseriesChartInternal = require("./TimeseriesChartInternal.js");
 var import_timeseries = require("./utils/timeseries.js");
 var import_useBehavioralTrackingProps = require("../../core/hooks/useBehavioralTrackingProps.js");
-var import_Intent = require("../../core/slots/Intent/Intent.js");
 var import_ChartLayout = require("../core/components/chart-layout/ChartLayout.js");
 var import_useAutoLegendRefresh = require("../core/components/chart-layout/hooks/useAutoLegendRefresh.js");
 var import_get_chart_states_template = require("../core/components/chart-states/utils/get-chart-states-template.js");
 var import_OverlayContext = require("../core/components/overlay-tooltip/contexts/OverlayContext.js");
 var import_TooltipContext = require("../core/components/overlay-tooltip/contexts/TooltipContext.js");
 var import_ChartSeriesActionContext = require("../core/components/series-action/ChartSeriesActionContext.js");
-var import_EmptyStateSlot = require("../core/slots/chart-states/EmptyStateSlot.js");
-var import_ErrorStateSlot = require("../core/slots/chart-states/ErrorStateSlot.js");
-var import_ColorRule = require("../core/slots/ColorRule.js");
 var import_coerceSizeValue = require("../core/utils/coerceSizeValue.js");
-var import_Tooltip2 = require("./slots/annotations/Tooltip.js");
-var import_DownloadCSV = require("./slots/DownloadCSV.js");
 const TIMESERIES_CHART_DEFAULT_HEIGHT = 300;
 const COMPONENT_NAME_BEHAVIOURAL_TRACKING = "TimeseriesChart";
 const TimeseriesChartRoot = (0, import_react.forwardRef)((props, forwardedRef) => {
@@ -161,7 +138,7 @@ const TimeseriesChartRoot = (0, import_react.forwardRef)((props, forwardedRef) =
                   "data-dt-component": COMPONENT_NAME_BEHAVIOURAL_TRACKING,
                   children: [
                     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ChartLayout.ChartLayout.Graph, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                      import_TimeseriesChart.TimeseriesChart,
+                      import_TimeseriesChartInternal.TimeseriesChartInternal,
                       {
                         ref: forwardedRef,
                         config
@@ -187,32 +164,3 @@ const TimeseriesChartRoot = (0, import_react.forwardRef)((props, forwardedRef) =
   ) }) }) });
 });
 TimeseriesChartRoot.displayName = "TimeseriesChartRoot";
-const TimeseriesChart = Object.assign(TimeseriesChartRoot, {
-  Band: import_Band.Band,
-  Legend: import_Legend.Legend,
-  YAxis: import_YAxis.YAxis,
-  XAxis: import_XAxis.XAxis,
-  Tooltip: import_Tooltip.Tooltip,
-  Annotations: import_Annotations.Annotations,
-  Line: import_Line.Line,
-  Area: import_Area.Area,
-  Bar: import_Bar.Bar,
-  ThresholdIndicator: import_ThresholdIndicator.ThresholdIndicator,
-  Select: import_Select.Select,
-  Intent: import_Intent.Intent,
-  EmptyState: import_EmptyStateSlot.EmptyStateSlot,
-  ErrorState: import_ErrorStateSlot.ErrorStateSlot,
-  ColorRule: import_ColorRule.ColorRule,
-  Toolbar: import_Toolbar.Toolbar,
-  DownloadCSV: import_DownloadCSV.TimeseriesChartDownloadCSVSlot,
-  Pan: import_Pan.Pan,
-  Zoom: import_Zoom.Zoom
-});
-const TimeseriesAnnotations = Object.assign(
-  {},
-  {
-    Marker: import_Marker.Marker,
-    Track: import_Track.Track,
-    Tooltip: import_Tooltip2.AnnotationsTooltip
-  }
-);

package/charts/timeseries/components/axes/TimeseriesTimeBottomAxisArea/TimeseriesTimeBottomAxisArea.css

@@ -1,6 +1,6 @@
-._19z0vdp0-3-5-0 {
+._19z0vdp0-3-6-0 {
   position: relative;
 }
-._19z0vdp1-3-5-0 {
+._19z0vdp1-3-6-0 {
   touch-action: none;
 }

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

@@ -66,10 +66,12 @@ function TimeseriesTimeBottomAxisArea() {
     {
       target: axisRef,
       eventOptions: { passive: false },
+      enabled: isPanEnabled,
       drag: {
         filterTaps: !(0, import_is_touchable_device.isTouchableDevice)(),
-        pointer: { buttons: [1, 4] },
-        enabled: isPanEnabled
+        // Without capture:false, tick DOM replacement during panning fires lostpointercapture
+        // on the removed element (non-bubbling), leaving useGesture stuck in active drag state.
+        pointer: { buttons: [1, 4], capture: false }
       }
     }
   );

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

@@ -22,4 +22,4 @@ __export(TimeseriesTimeBottomAxisArea_css_exports, {
 module.exports = __toCommonJS(TimeseriesTimeBottomAxisArea_css_exports);
 var import_TimeseriesTimeBottomAxisArea_css_ts_vanilla = require("./TimeseriesTimeBottomAxisArea.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var timeBottomAxisContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_19z0vdp0-3-5-0", variantClassNames: { isTouchableDevice: { true: "_19z0vdp1-3-5-0" } }, defaultVariants: {}, compoundVariants: [] });
+var timeBottomAxisContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_19z0vdp0-3-6-0", variantClassNames: { isTouchableDevice: { true: "_19z0vdp1-3-6-0" } }, defaultVariants: {}, compoundVariants: [] });

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

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

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

@@ -25,7 +25,7 @@ __export(TimeseriesOverlays_css_exports, {
 module.exports = __toCommonJS(TimeseriesOverlays_css_exports);
 var import_ChartGrid_css_ts_vanilla = require("../../../core/components/chart-grid/ChartGrid.css");
 var import_TimeseriesOverlays_css_ts_vanilla = require("./TimeseriesOverlays.css");
-var canvasPlot = "_17fdb110-3-5-0 _13lzg4k0-3-5-0";
-var crosshairLayout = "_17fdb113-3-5-0 _13lzg4k0-3-5-0";
-var datapointCanvasPlot = "_17fdb111-3-5-0 _13lzg4k0-3-5-0";
-var datapointIndicatorLayout = "_17fdb112-3-5-0 _13lzg4k0-3-5-0";
+var canvasPlot = "_17fdb110-3-6-0 _13lzg4k0-3-6-0";
+var crosshairLayout = "_17fdb113-3-6-0 _13lzg4k0-3-6-0";
+var datapointCanvasPlot = "_17fdb111-3-6-0 _13lzg4k0-3-6-0";
+var datapointIndicatorLayout = "_17fdb112-3-6-0 _13lzg4k0-3-6-0";

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

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

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

@@ -23,5 +23,5 @@ __export(ThresholdIndicators_css_exports, {
 module.exports = __toCommonJS(ThresholdIndicators_css_exports);
 var import_ChartGrid_css_ts_vanilla = require("../../../core/components/chart-grid/ChartGrid.css");
 var import_ThresholdIndicators_css_ts_vanilla = require("./ThresholdIndicators.css");
-var thresholdPlotLine = "_9p8qi20-3-5-0 _13lzg4k0-3-5-0";
-var thresholdPlotRange = "_9p8qi21-3-5-0 _13lzg4k0-3-5-0";
+var thresholdPlotLine = "_9p8qi20-3-6-0 _13lzg4k0-3-6-0";
+var thresholdPlotRange = "_9p8qi21-3-6-0 _13lzg4k0-3-6-0";

package/charts/tree-map/TreeMap.d.ts

@@ -14,7 +14,7 @@ export declare const TreeMap: ((props: TreeMapProps & {
         displayName: string;
     };
     Tooltip: {
-        (): null;
+        (props: import("./types/treemap-chart.config.js").TreeMapCustomTooltipProps): null;
         displayName: string;
     };
     Intent: {

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

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

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

@@ -21,4 +21,4 @@ __export(TreeMapOverlay_css_exports, {
 });
 module.exports = __toCommonJS(TreeMapOverlay_css_exports);
 var import_TreeMapOverlay_css_ts_vanilla = require("./TreeMapOverlay.css");
-var container = "_1iqz50a0-3-5-0";
+var container = "_1iqz50a0-3-6-0";

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

@@ -24,14 +24,25 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_utils = require("../../../core/components/overlay-tooltip/_to-be-removed/utils.js");
 var import_OverlayTooltip = require("../../../core/components/overlay-tooltip/OverlayTooltip.js");
 var import_utils2 = require("../../../core/components/overlay-tooltip/utils.js");
+var import_useTreeMapCustomTooltip = require("../../hooks/useTreeMapCustomTooltip.js");
 var import_useTruncationMode = require("../../hooks/useTruncationMode.js");
 const TreeMapOverlayTooltip = (props) => {
   const data = (0, import_utils.useTooltipData)().data;
   const truncationMode = (0, import_useTruncationMode.useTruncationMode)();
-  if ((0, import_utils2.isTooltipDataEmpty)(data)) {
+  const customTooltip = (0, import_useTreeMapCustomTooltip.useTreeMapCustomTooltip)();
+  if (customTooltip?.hidden || (0, import_utils2.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__ */ (0, import_jsx_runtime.jsx)(import_OverlayTooltip.OverlayTooltip, { legacyTemplate: customTooltip.template(payload) });
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_OverlayTooltip.OverlayTooltip, { truncation: truncationMode, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_OverlayTooltip.OverlayTooltip.Header, { header1: data.header1 }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(

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

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

package/charts/tree-map/components/canvas/utils/canvas-label-utils.d.ts

@@ -2,6 +2,7 @@ import type { FontWidthMap } from '../../../../core/components/text-ellipsis/cha
 import type { LabelOptions } from '../../../types/canvas.js';
 type LabelWidthOptions = {
     nameWidth: number;
+    valueWidth: number;
     nameValueWidth: number;
     multiLineWidth: number;
 };
@@ -16,7 +17,7 @@ export declare const FONT_SIZE_DIFFERENCE = 1;
  * @param padding - padding around the label
  * @param labelWidth - object containing width for each labelFit scenario,
  */
-export declare const getLabelFit: (height: number, width: number, fontSize: number, padding: number, labelWidth: LabelWidthOptions) => "ellipsis" | "inline" | "fallback" | "name" | "multi";
+export declare const getLabelFit: (height: number, width: number, fontSize: number, padding: number, labelWidth: LabelWidthOptions) => "ellipsis" | "inline" | "fallback" | "name" | "multi" | "ellipsis-with-value";
 /**
  * Returns the center of the node.
  * @internal
@@ -37,6 +38,7 @@ export declare const getRectCenter: (width: number, height: number) => {
  */
 export declare const getLabelWidth: (nameWidth: number, value: string, charWidthMap: FontWidthMap) => {
     nameWidth: number;
+    valueWidth: number;
     nameValueWidth: number;
     multiLineWidth: number;
 };

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

@@ -31,7 +31,7 @@ var import_constants = require("../../../constants.js");
 const LINE_SPACING = 2;
 const FONT_SIZE_DIFFERENCE = 1;
 const getLabelFit = (height, width, fontSize, padding, labelWidth) => {
-  const { nameWidth, nameValueWidth, multiLineWidth } = labelWidth;
+  const { nameWidth, nameValueWidth, valueWidth, multiLineWidth } = labelWidth;
   const lineSpacing = 2;
   const paddingSum = 2 * padding;
   const availableWidth = width - paddingSum;
@@ -51,7 +51,8 @@ const getLabelFit = (height, width, fontSize, padding, labelWidth) => {
   }
   const fitEllipsis = height >= minInlineHeight && availableWidth < nameWidth;
   if (fitEllipsis) {
-    return import_constants.LABEL_OPTIONS.Ellipsis;
+    const fitAtLeastValue = height >= minMultiLineHeight && availableWidth >= valueWidth;
+    return fitAtLeastValue ? import_constants.LABEL_OPTIONS.EllipsisWithValue : import_constants.LABEL_OPTIONS.Ellipsis;
   }
   return import_constants.LABEL_OPTIONS.Fallback;
 };
@@ -60,12 +61,10 @@ const getRectCenter = (width, height) => ({
   centerY: height / 2
 });
 const getLabelWidth = (nameWidth, value, charWidthMap) => {
+  const valueWidth = (0, import_truncate_string.calculateWidth)(value, charWidthMap);
   const nameValueWidth = nameWidth + (0, import_truncate_string.calculateWidth)(` ${value}`, charWidthMap);
-  const multiLineWidth = Math.max(
-    nameWidth,
-    (0, import_truncate_string.calculateWidth)(value, charWidthMap)
-  );
-  return { nameWidth, nameValueWidth, multiLineWidth };
+  const multiLineWidth = Math.max(nameWidth, valueWidth);
+  return { nameWidth, valueWidth, nameValueWidth, multiLineWidth };
 };
 const getAppliedLabels = (labelFit, name, value) => {
   const labelMap = {
@@ -73,6 +72,7 @@ const getAppliedLabels = (labelFit, name, value) => {
     inline: [`${name} ${value}`],
     name: [name],
     ellipsis: [name],
+    "ellipsis-with-value": [name, value],
     fallback: []
   };
   return labelMap[labelFit];

package/charts/tree-map/constants.js

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

package/charts/tree-map/contexts/TreeMapCustomTooltipContext.d.ts

@@ -0,0 +1,3 @@
+import { TreeMapCustomTooltipConfig } from '../types/treemap-chart.config.js';
+export declare const DEFAULT_CUSTOM_TOOLTIP_CONFIG: TreeMapCustomTooltipConfig;
+export declare const TreeMapCustomTooltipContext: import("react").Context<TreeMapCustomTooltipConfig>;

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

@@ -0,0 +1,28 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var TreeMapCustomTooltipContext_exports = {};
+__export(TreeMapCustomTooltipContext_exports, {
+  DEFAULT_CUSTOM_TOOLTIP_CONFIG: () => DEFAULT_CUSTOM_TOOLTIP_CONFIG,
+  TreeMapCustomTooltipContext: () => TreeMapCustomTooltipContext
+});
+module.exports = __toCommonJS(TreeMapCustomTooltipContext_exports);
+var import_react = require("react");
+const DEFAULT_CUSTOM_TOOLTIP_CONFIG = {
+  hidden: false
+};
+const TreeMapCustomTooltipContext = (0, import_react.createContext)(DEFAULT_CUSTOM_TOOLTIP_CONFIG);

package/charts/tree-map/hooks/useTreeMapCustomTooltip.d.ts

@@ -0,0 +1 @@
+export declare const useTreeMapCustomTooltip: () => import("../types/treemap-chart.config.js").TreeMapCustomTooltipConfig;