@dynatrace/strato-components 3.7.0 → 3.8.0

package/charts/pie/utils/normalize-pie-data.js

@@ -0,0 +1,38 @@
+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 normalize_pie_data_exports = {};
+__export(normalize_pie_data_exports, {
+  normalizePieData: () => normalizePieData
+});
+module.exports = __toCommonJS(normalize_pie_data_exports);
+var import_access_value = require("../../../core/utils/accessors/access-value.js");
+function normalizePieData(input) {
+  const { data, labelAccessor, valueAccessor, unit } = input;
+  if (labelAccessor && valueAccessor) {
+    const slices = data.map((datapoint) => {
+      const color = (0, import_access_value.accessValue)(datapoint, "color");
+      return {
+        category: String((0, import_access_value.accessValue)(datapoint, labelAccessor) ?? ""),
+        value: Number((0, import_access_value.accessValue)(datapoint, valueAccessor) ?? 0),
+        ...typeof color === "string" ? { color } : {}
+      };
+    });
+    return { slices, unit };
+  }
+  return data;
+}

package/charts/pie/utils/pie-config.js

@@ -83,7 +83,8 @@ function buildPieChartConfig(props, contextConfig, slots) {
     slots.grouping
   );
   const legend = getLegendConfiguration(contextConfig.legend, slots.legend);
-  const formatter = props.formatter ?? contextConfig.formatter ?? (0, import_defaultUnitFormatter.defaultUnitFormatter)(props.data.unit, 0);
+  const resolvedUnit = Array.isArray(props.data) ? props.unit : props.data.unit;
+  const formatter = props.formatter ?? contextConfig.formatter ?? (0, import_defaultUnitFormatter.defaultUnitFormatter)(resolvedUnit, 0);
   const truncationMode = props.truncationMode ?? contextConfig.truncationMode ?? import_constants.DEFAULT_TRUNCATION_MODE;
   const toolbar = getToolbarConfiguration(contextConfig.toolbar, slots.toolbar);
   const seriesActions = props.seriesActions ?? contextConfig.seriesActions ?? void 0;

package/charts/pie/utils/sanitize-toolbar-intents.d.ts

@@ -0,0 +1,2 @@
+import type { PieDonutConfig } from '../types/pie-chart.config.js';
+export declare const sanitizeToolbarIntents: (config: PieDonutConfig) => PieDonutConfig;

package/charts/{tree-map/hooks/useSetOverlayState.js → pie/utils/sanitize-toolbar-intents.js}

@@ -15,25 +15,16 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var useSetOverlayState_exports = {};
-__export(useSetOverlayState_exports, {
-  useSetOverlayState: () => useSetOverlayState
+var sanitize_toolbar_intents_exports = {};
+__export(sanitize_toolbar_intents_exports, {
+  sanitizeToolbarIntents: () => sanitizeToolbarIntents
 });
-module.exports = __toCommonJS(useSetOverlayState_exports);
-var import_selectors = require("../store/selectors.js");
-const useSetOverlayState = () => {
-  const setState = (0, import_selectors.useSetState)();
-  const setToolbarVisible = (toolbarVisible) => {
-    setState((prev) => {
-      return {
-        ...prev,
-        overlay: {
-          toolbarVisible
-        }
-      };
-    });
-  };
+module.exports = __toCommonJS(sanitize_toolbar_intents_exports);
+var import_get_toolbar_config_without_intents = require("../../core/components/toolbar/utils/get-toolbar-config-without-intents.js");
+const sanitizeToolbarIntents = (config) => {
+  const toolbar = config.toolbar ? (0, import_get_toolbar_config_without_intents.getToolbarConfigWithoutIntents)(config.toolbar) : void 0;
   return {
-    setToolbarVisible
+    ...config,
+    toolbar
   };
 };

package/charts/single-value/SingleValue.css

@@ -1,4 +1,4 @@
-._1sfgzlg0-3-7-0 {
+._1sfgzlg0-3-8-0 {
   height: inherit;
   width: inherit;
 }

package/charts/single-value/SingleValue.sty.js

@@ -21,4 +21,4 @@ __export(SingleValue_css_exports, {
 });
 module.exports = __toCommonJS(SingleValue_css_exports);
 var import_SingleValue_css_ts_vanilla = require("./SingleValue.css");
-var container = "_1sfgzlg0-3-7-0";
+var container = "_1sfgzlg0-3-8-0";

package/charts/single-value-grid/SingleValueGrid.css

@@ -1,7 +1,7 @@
-._1mx9zjb0-3-7-0 {
+._1mx9zjb0-3-8-0 {
   height: 100%;
   width: 100%;
 }
-._1mx9zjb0-3-7-0 > div {
+._1mx9zjb0-3-8-0 > div {
   overflow: hidden;
 }

package/charts/single-value-grid/SingleValueGrid.sty.js

@@ -21,4 +21,4 @@ __export(SingleValueGrid_css_exports, {
 });
 module.exports = __toCommonJS(SingleValueGrid_css_exports);
 var import_SingleValueGrid_css_ts_vanilla = require("./SingleValueGrid.css");
-var gridRows = "_1mx9zjb0-3-7-0";
+var gridRows = "_1mx9zjb0-3-8-0";

package/charts/single-value-grid/components/GlobalFontSizeVariables.css

@@ -1,4 +1,4 @@
-._eom86z0-3-7-0 {
+._eom86z0-3-8-0 {
   position: relative;
   width: 100%;
   height: 100%;

package/charts/single-value-grid/components/GlobalFontSizeVariables.sty.js

@@ -21,4 +21,4 @@ __export(GlobalFontSizeVariables_css_exports, {
 });
 module.exports = __toCommonJS(GlobalFontSizeVariables_css_exports);
 var import_GlobalFontSizeVariables_css_ts_vanilla = require("./GlobalFontSizeVariables.css");
-var fontSizeWrapper = "_eom86z0-3-7-0";
+var fontSizeWrapper = "_eom86z0-3-8-0";

package/charts/timeseries/TimeseriesChart.d.ts

@@ -1,7 +1,7 @@
 import { type PropsWithChildren } from 'react';
 import type { TimeseriesChartProps } from './types/timeseries-props.js';
 import type { TimeseriesChartRef } from './types/timeseries-ref.js';
-import type { _XYChartAdoptionProps } from '../xy-chart-adoption/types/props.js';
+import type { _XYChartAdoptionProps } from '../xy-chart-adoption/shared/types/props.js';
 export declare const TimeseriesChartSwitcher: (props: TimeseriesChartProps & _XYChartAdoptionProps & {
     children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<TimeseriesChartRef>) => import("react").ReactElement | null;

package/charts/timeseries/TimeseriesChartInternal.d.ts

@@ -1,5 +1,9 @@
 import type { TimeseriesChartConfiguration } from './types/timeseries-config.js';
 import type { TimeseriesChartRef } from './types/timeseries-ref.js';
+export declare function computeChartPadding(axisLeftConfig: unknown, axisRightConfig: unknown, unitsCount: number, isLegendHiddenOrVertical: boolean): {
+    hasLeftPadding: boolean;
+    hasRightPadding: boolean;
+};
 export interface _TimeseriesChartProps {
     config: TimeseriesChartConfiguration;
 }

package/charts/timeseries/TimeseriesChartInternal.js

@@ -17,7 +17,8 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var TimeseriesChartInternal_exports = {};
 __export(TimeseriesChartInternal_exports, {
-  TimeseriesChartInternal: () => TimeseriesChartInternal
+  TimeseriesChartInternal: () => TimeseriesChartInternal,
+  computeChartPadding: () => computeChartPadding
 });
 module.exports = __toCommonJS(TimeseriesChartInternal_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -46,11 +47,23 @@ var import_defaultChartValues_css = require("../../core/styles/defaultChartValue
 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_constants4 = require("../core/components/chart-grid/constants.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");
+var import_constants5 = require("../core/components/data-point/constants.js");
+function computeChartPadding(axisLeftConfig, axisRightConfig, unitsCount, isLegendHiddenOrVertical) {
+  const singleUnit = unitsCount === 1 && isLegendHiddenOrVertical;
+  const paddingRight = Boolean(
+    !axisLeftConfig && !axisRightConfig && singleUnit || axisLeftConfig && axisRightConfig && singleUnit || axisLeftConfig && isLegendHiddenOrVertical
+  );
+  const onlyRightAxis = !axisLeftConfig && Boolean(axisRightConfig);
+  return {
+    hasLeftPadding: onlyRightAxis,
+    hasRightPadding: onlyRightAxis || paddingRight
+  };
+}
 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}"
@@ -79,19 +92,25 @@ const TimeseriesChartInternal = /* @__PURE__ */ (0, import_react.forwardRef)(({
     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);
+  const { hasLeftPadding, hasRightPadding } = computeChartPadding(
+    axisLeftConfig,
+    axisRightConfig,
+    units.length,
+    isLegendHiddenOrVertical
+  );
+  const chartGridHeight = height - (!tracksQuantity || isLegendHiddenOrRight ? import_constants5.OVERLAY_PADDING + import_constants5.BOTTOM_PADDING_ADJUSTMENT : 0);
+  const showAnnotations = (0, import_constants4.shouldShowAnnotations)(
+    chartGridHeight,
+    tracksQuantity
+  );
+  const showAxes = (0, import_constants4.shouldShowAxes)(chartGridHeight);
+  const chartGridRenderHeight = tracksQuantity && !isLegendHiddenOrRight && !showAnnotations ? chartGridHeight - import_constants5.OVERLAY_PADDING : chartGridHeight;
+  const annotationsPadding = tracksQuantity - numHiddenTracks > 0 ? import_constants.ANNOTATIONS_PADDING_BOTTOM : 0;
+  const annotationsRowHeight = showAnnotations ? annotationsVisibleArea + annotationsPadding : 0;
+  const timeseriesGridTemplateRows = showAxes ? `minmax(0, ${annotationsRowHeight}px) minmax(60%, 1fr) minmax(0, auto)` : "0px 1fr 1px";
   (0, import_useChartInteractions.useChartInteractions)();
   if (!height || !width) {
     return null;
@@ -100,8 +119,8 @@ const TimeseriesChartInternal = /* @__PURE__ */ (0, import_react.forwardRef)(({
     "div",
     {
       style: {
-        paddingTop: tracksQuantity ? 0 : import_constants4.OVERLAY_PADDING,
-        paddingLeft: hasLeftPadding ? import_constants4.OVERLAY_PADDING : 0
+        paddingTop: showAnnotations ? 0 : import_constants5.OVERLAY_PADDING,
+        paddingLeft: hasLeftPadding ? import_constants5.OVERLAY_PADDING : 0
       },
       className: import_defaultChartValues_css.defaultChartSize,
       "aria-label": import_constants2.TIMESERIES_ARIA_LABEL,
@@ -109,8 +128,8 @@ const TimeseriesChartInternal = /* @__PURE__ */ (0, import_react.forwardRef)(({
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_ChartGridRoot.ChartGrid,
         {
-          width: availableWidth - (hasRightPadding ? import_constants4.OVERLAY_PADDING : 0),
-          height: chartGridHeight,
+          width: availableWidth - (hasRightPadding ? import_constants5.OVERLAY_PADDING : 0),
+          height: chartGridRenderHeight,
           gridTemplateAreas: timeseriesGridTemplateAreas,
           gridTemplateColumns: timeseriesGridTemplateColumns,
           gridTemplateRows: timeseriesGridTemplateRows,
@@ -122,11 +141,11 @@ const TimeseriesChartInternal = /* @__PURE__ */ (0, import_react.forwardRef)(({
               forwardedRef,
               chartRef,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TimeseriesValueLeftAxisArea.TimeseriesValueLeftAxisArea, {}),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TimeseriesTimeBottomAxisArea.TimeseriesTimeBottomAxisArea, {}),
+                showAxes && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TimeseriesValueLeftAxisArea.TimeseriesValueLeftAxisArea, {}),
+                showAxes && /* @__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, {}),
+                  showAnnotations && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TimeseriesAnnotationsIndicators.TimeseriesAnnotationsIndicators, {}),
                   /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                     import_ChartLoaderOverlay.ChartLoaderOverlay,
                     {
@@ -137,9 +156,9 @@ const TimeseriesChartInternal = /* @__PURE__ */ (0, import_react.forwardRef)(({
                   ),
                   /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ThresholdIndicators.ThresholdIndicators, { indicatorType: "line" })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TimeseriesValueRightAxisArea.TimeseriesValueRightAxisArea, {}),
+                showAxes && /* @__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, {})
+                showAnnotations && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TimeseriesChartAnnotationsArea.TimeseriesChartAnnotationsArea, {})
               ]
             }
           ) })

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

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

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-7-0", variantClassNames: { isTouchableDevice: { true: "_19z0vdp1-3-7-0" } }, defaultVariants: {}, compoundVariants: [] });
+var timeBottomAxisContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_19z0vdp0-3-8-0", variantClassNames: { isTouchableDevice: { true: "_19z0vdp1-3-8-0" } }, defaultVariants: {}, compoundVariants: [] });

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

@@ -1,8 +1,8 @@
-._17fdb110-3-7-0 {
+._17fdb110-3-8-0 {
   z-index: 1;
   pointer-events: none;
 }
-._17fdb111-3-7-0 {
+._17fdb111-3-8-0 {
   top: -3.5px;
   left: -3.5px;
   width: calc(100% + 7px);
@@ -10,7 +10,7 @@
   z-index: 1;
   pointer-events: none;
 }
-._17fdb112-3-7-0 {
+._17fdb112-3-8-0 {
   top: -7px;
   left: -7px;
   width: calc(100% + 14px);
@@ -18,7 +18,7 @@
   z-index: 2;
   pointer-events: none;
 }
-._17fdb113-3-7-0 {
+._17fdb113-3-8-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-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";
+var canvasPlot = "_17fdb110-3-8-0 _13lzg4k0-3-8-0";
+var crosshairLayout = "_17fdb113-3-8-0 _13lzg4k0-3-8-0";
+var datapointCanvasPlot = "_17fdb111-3-8-0 _13lzg4k0-3-8-0";
+var datapointIndicatorLayout = "_17fdb112-3-8-0 _13lzg4k0-3-8-0";

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

@@ -1,6 +1,6 @@
-._9p8qi20-3-7-0 {
+._9p8qi20-3-8-0 {
   z-index: 2;
 }
-._9p8qi21-3-7-0 {
+._9p8qi21-3-8-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-7-0 _13lzg4k0-3-7-0";
-var thresholdPlotRange = "_9p8qi21-3-7-0 _13lzg4k0-3-7-0";
+var thresholdPlotLine = "_9p8qi20-3-8-0 _13lzg4k0-3-8-0";
+var thresholdPlotRange = "_9p8qi21-3-8-0 _13lzg4k0-3-8-0";

package/charts/top-list/TopList.css

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

package/charts/top-list/TopList.js

@@ -28,6 +28,7 @@ var import_useMergeRefs = require("../../core/hooks/useMergeRefs.js");
 var import_coerceSizeValue = require("../core/utils/coerceSizeValue.js");
 var import_defaults = require("../xy-chart/constants/defaults.js");
 var import_XYChartRoot = require("../xy-chart/XYChartRoot.js");
+const COMPONENT_NAME_BEHAVIOURAL_TRACKING = "TopList";
 const TopList = (0, import_react.forwardRef)(function TopList2({
   data,
   labelAccessor,
@@ -37,22 +38,24 @@ const TopList = (0, import_react.forwardRef)(function TopList2({
   valueFormatter,
   seriesIdAccessor,
   seriesNameAccessor,
+  comparator,
   height = import_defaults.DEFAULT_CHART_HEIGHT,
+  // @ts-expect-error - We want to allow overriding data-dt-component as we use the component internally in other Strato components, but it should not appear in the public API.
+  "data-dt-component": componentName = COMPONENT_NAME_BEHAVIOURAL_TRACKING,
   ...xyChartProps
 }, forwardedRef) {
   const internalRef = (0, import_react.useRef)(null);
   const mergedRef = (0, import_useMergeRefs.useMergeRefs)([internalRef, forwardedRef]);
   const onScroll = (0, import_react.useCallback)(() => internalRef.current?.reset(), []);
   const dataWithSyntheticSeries = (0, import_react.useMemo)(() => {
-    if (seriesIdAccessor !== void 0) {
-      return data;
-    }
-    return data.map((d) => ({
+    const mapped = seriesIdAccessor !== void 0 ? data : data.map((d) => ({
       ...d,
       [import_constants.SERIES_ID_KEY]: "series",
       [import_constants.SERIES_NAME_KEY]: "Series"
     }));
-  }, [data, seriesIdAccessor]);
+    const sortDescending = (a, b) => Number(b[valueAccessor]) - Number(a[valueAccessor]);
+    return [...mapped].sort(comparator ?? sortDescending);
+  }, [comparator, data, seriesIdAccessor, valueAccessor]);
   const viewportPx = (0, import_coerceSizeValue.coerceSizeValueToPixels)(height) ?? import_defaults.DEFAULT_CHART_HEIGHT;
   const contentHeight = Math.max(viewportPx, data.length * import_constants.ROW_HEIGHT);
   const legend = seriesIdAccessor === void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartRoot.XYChart.Legend, { hidden: true });
@@ -62,6 +65,7 @@ const TopList = (0, import_react.forwardRef)(function TopList2({
       className: import_TopList_css.scrollContainer,
       style: { height: (0, import_coerceSizeValue.coerceSizeValue)(height) },
       onScroll,
+      "data-dt-component": componentName,
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
         import_XYChartRoot.XYChart,
         {

package/charts/top-list/TopList.sty.js

@@ -21,4 +21,4 @@ __export(TopList_css_exports, {
 });
 module.exports = __toCommonJS(TopList_css_exports);
 var import_TopList_css_ts_vanilla = require("./TopList.css");
-var scrollContainer = "_jwlby60-3-7-0";
+var scrollContainer = "_jwlby60-3-8-0";

package/charts/top-list/constants.d.ts

@@ -1,7 +1,4 @@
-/**
- * Height reserved per bar (row), in pixels.
- * @internal
- */
+/** @internal */
 export declare const ROW_HEIGHT = 25;
 /** @internal */
 export declare const SERIES_ID_KEY = "__toplist_series_id__";

package/charts/top-list/constants.js

@@ -24,7 +24,8 @@ __export(constants_exports, {
   Y_AXIS_ID: () => Y_AXIS_ID
 });
 module.exports = __toCommonJS(constants_exports);
-const ROW_HEIGHT = 25;
+var import_defaults = require("../xy-chart/constants/defaults.js");
+const ROW_HEIGHT = import_defaults.MIN_LABELED_BAR_SIZE;
 const SERIES_ID_KEY = "__toplist_series_id__";
 const SERIES_NAME_KEY = "__toplist_series_name__";
 const X_AXIS_ID = "toplist-x";

package/charts/top-list/types/top-list.d.ts

@@ -1,6 +1,7 @@
 import type { ConvertibleUnit, FormatOptions, Unit } from '@dynatrace-sdk/units';
 import type { CategoricalFormatter, Formatter } from '../../core/types/formatter.js';
 import type { XYChartProps } from '../../xy-chart/types/xy-chart-props.js';
+import type { XYChartData } from '../../xy-chart/types/xy-chart.js';
 /**
  * Props for the TopList component.
  * @public
@@ -27,6 +28,11 @@ export interface TopListProps extends XYChartProps {
      * Formats numerical values shown in tooltips.
      */
     valueFormatter?: Formatter | FormatOptions<Unit, ConvertibleUnit>;
+    /**
+     * Custom comparator function for sorting data items.
+     * When omitted, data is sorted by value in descending order.
+     */
+    comparator?: (a: XYChartData, b: XYChartData) => number;
     /**
      * Accessor for the field that groups bars into series.
      * Provide this only when your data contains multiple series.

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

@@ -1,3 +1,4 @@
+import { type PropsWithChildren } from 'react';
 import type { TreeMapElementRef, TreeMapProps } from './types/treemap.js';
 /**
  * The `TreeMap` visualizes the distribution of hierarchical data.
@@ -6,9 +7,7 @@ import type { TreeMapElementRef, TreeMapProps } from './types/treemap.js';
  * data set.
  * @public
  */
-export declare const TreeMap: ((props: TreeMapProps & {
-    children?: import("react").ReactNode | undefined;
-} & import("react").RefAttributes<TreeMapElementRef>) => import("react").ReactElement | null) & {
+export declare const TreeMap: ((props: PropsWithChildren<TreeMapProps> & import("react").RefAttributes<TreeMapElementRef>) => import("react").ReactElement | null) & {
     Legend: {
         (props: import("./types/treemap-chart.config.js").TreemapChartLegendConfig): null;
         displayName: string;

package/charts/tree-map/TreeMap.js

@@ -43,6 +43,7 @@ var import_Toolbar = require("./slots/Toolbar.js");
 var import_Tooltip = require("./slots/Tooltip.js");
 var import_TreeMapChartLegend = require("./slots/TreeMapChartLegend.js");
 var import_build_and_download_csv = require("./utils/build-and-download-csv.js");
+var import_to_hierarchical_props = require("./utils/to-hierarchical-props.js");
 var import_useBehavioralTrackingProps = require("../../core/hooks/useBehavioralTrackingProps.js");
 var import_Intent = require("../../core/slots/Intent/Intent.js");
 var import_defaultChartValues_css = require("../../core/styles/defaultChartValues.sty.js");
@@ -53,7 +54,7 @@ var import_ErrorStateSlot = require("../core/slots/chart-states/ErrorStateSlot.j
 var import_ColorRule = require("../core/slots/ColorRule.js");
 var import_chart_types = require("../core/types/chart-types.js");
 const COMPONENT_NAME = "TreeMap";
-const TreeMapRoot = (0, import_react.forwardRef)((props, forwardedRef) => {
+const TreeMapInternal = (0, import_react.forwardRef)((props, forwardedRef) => {
   const {
     data,
     children,
@@ -115,6 +116,14 @@ const TreeMapRoot = (0, import_react.forwardRef)((props, forwardedRef) => {
     }
   );
 });
+const TreeMapRoot = (0, import_react.forwardRef)((props, forwardedRef) => {
+  const hierarchicalProps = isFlatProps(props) ? (0, import_to_hierarchical_props.toHierarchicalProps)(props) : props;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TreeMapInternal, { ...hierarchicalProps, ref: forwardedRef });
+});
+const isFlatProps = (props) => {
+  const flatProps = props;
+  return flatProps?.valueAccessor !== void 0 && flatProps?.groupBy !== void 0 && Array.isArray(props?.data);
+};
 const TreeMap = Object.assign(TreeMapRoot, {
   Legend: import_TreeMapChartLegend.Legend,
   Tooltip: import_Tooltip.Tooltip,

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

@@ -59,7 +59,7 @@ const TreeMapChartLayout = /* @__PURE__ */ (0, import_react.forwardRef)((props,
     onRatioChange
   } = (0, import_ChartLegendContext.useChartLegend)();
   const legendRatio = initialRatio ?? ratio;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_OverlayContext.OverlayProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TooltipContext.TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     import_ChartLayout.ChartLayout,
     {
       ...behavioralTrackingProps,
@@ -77,10 +77,10 @@ const TreeMapChartLayout = /* @__PURE__ */ (0, import_react.forwardRef)((props,
       "data-testid": dataTestId,
       "data-dt-component": dataDtComponent,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ChartLayout.ChartLayout.Graph, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TreeMapInternalDataProvider.TreeMapInternalDataProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TreeMapAggregationDataProvider.TreeMapAggregationDataProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TreeMapHighlightingMapProvider.TreeMapHighlightingMapProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_OverlayContext.OverlayProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TooltipContext.TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { position: "relative" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ChartLayout.ChartLayout.Graph, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TreeMapInternalDataProvider.TreeMapInternalDataProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TreeMapAggregationDataProvider.TreeMapAggregationDataProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TreeMapHighlightingMapProvider.TreeMapHighlightingMapProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { position: "relative" }, children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TreeMapInternal.TreeMapInternal, { ref: forwardedRef }),
           loading ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TreeMapOverlay.TreeMapOverlay, {})
-        ] }) }) }) }) }) }) }),
+        ] }) }) }) }) }),
         !legendHidden && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           import_ChartLayout.ChartLayout.Legend,
           {
@@ -92,5 +92,5 @@ const TreeMapChartLayout = /* @__PURE__ */ (0, import_react.forwardRef)((props,
         )
       ]
     }
-  );
+  ) }) });
 });

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

@@ -27,6 +27,7 @@ var import_orientation = require("../../../core/components/chart-layout/utils/or
 var import_ChartLegend = require("../../../core/components/legend/categorical/ChartLegend.js");
 var import_useLegendSeriesActions = require("../../../core/components/legend/categorical/hooks/useLegendSeriesActions.js");
 var import_TooltipContext = require("../../../core/components/overlay-tooltip/contexts/TooltipContext.js");
+var import_constants = require("../../constants.js");
 var import_NameAccessorContext = require("../../context/NameAccessorContext.js");
 var import_useTreeMapChartHandlers = require("../../hooks/useTreeMapChartHandlers.js");
 var import_useTruncationMode = require("../../hooks/useTruncationMode.js");
@@ -50,10 +51,11 @@ const TreeMapCategoricalLegend = () => {
     legendItems ?? [],
     (item) => item.id
   );
+  const hasValueNameAccessor = nameAccessor === import_constants.NAME_ACCESSOR.Value;
   const chartLegendInteractionsProps = (0, import_get_legend_interaction_props.getLegendInteractionProps)(
     isTooltipPinned,
     isLoading,
-    !!nameAccessor,
+    hasValueNameAccessor,
     legendActions,
     onLegendItemHover,
     onLegendItemClick

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

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

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

@@ -37,12 +37,7 @@ const TreeMapOverlay = () => {
   const { width, height } = (0, import_useGraphSize.useGraphSize)();
   const roundedWidth = Math.floor(width);
   const roundedHeight = Math.floor(height);
-  const {
-    handlePointerEnter,
-    handlePointerMove,
-    handlePointerLeave,
-    handleMouseClick
-  } = (0, import_useOverlayHandlers.useOverlayHandlers)(overlay);
+  const eventHandlers = (0, import_useOverlayHandlers.useOverlayHandlers)(overlay);
   const toolbarConfig = (0, import_ToolbarContext.useToolbarConfig)();
   const toolbarEnabled = (0, import_is_toolbar_enabled.isToolbarEnabled)(toolbarConfig);
   const { chartSeriesActions } = (0, import_ChartSeriesActionContext.useSeriesActions)();
@@ -55,10 +50,7 @@ const TreeMapOverlay = () => {
       ref: overlay.overlayRef,
       style: { width: roundedWidth, height: roundedHeight },
       className: import_TreeMapOverlay_css.container,
-      onClick: handleMouseClick,
-      onPointerEnter: handlePointerEnter,
-      onPointerMove: handlePointerMove,
-      onPointerLeave: handlePointerLeave,
+      ...eventHandlers,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           import_TreeMapOverlayTooltip.TreeMapOverlayTooltip,

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-7-0";
+var container = "_1iqz50a0-3-8-0";