@dynatrace/strato-components 3.0.1 → 3.1.0

package/charts/pie/utils/build-label.js

@@ -23,10 +23,9 @@ __export(build_label_exports, {
 module.exports = __toCommonJS(build_label_exports);
 var import_label_position = require("./label-position.js");
 var import_utils = require("../../../typography/utils.js");
-var import_constants = require("../../core/components/legend/range/constants.js");
-var import_is_in_horizontal_bounds = require("../../core/utils/is-in-horizontal-bounds.js");
-var import_text_truncation = require("../../core/utils/text-truncation.js");
-var import_constants2 = require("../constants.js");
+var import_chars_font_width_map = require("../../core/components/text-ellipsis/chars-font-width-map.js");
+var import_truncate_string = require("../../core/components/text-ellipsis/truncate-string.js");
+var import_constants = require("../constants.js");
 const buildLabel = (arc, path, valueType, formatter, truncationMode, leftCenter) => {
   const outerRadius = path.outerRadius()(arc);
   const innerRadius = path.innerRadius()(arc);
@@ -38,23 +37,17 @@ const buildLabel = (arc, path, valueType, formatter, truncationMode, leftCenter)
     centroidY
   });
   const formattedLabelText = formatLabelText(valueType, formatter, arc.data);
-  const labelText = (0, import_text_truncation.truncateText)(
+  const availableWidth = leftCenter - Math.abs(labelX);
+  const truncated = availableWidth > 0 ? (0, import_truncate_string.truncateString)(
     formattedLabelText,
+    availableWidth,
+    import_chars_font_width_map.charsFontWidth12pixelsSize400Map,
     truncationMode,
-    (truncatedText) => {
-      const { boxX, boxWidth } = getHorizontalMeasurements(
-        truncatedText,
-        labelX
-      );
-      return (0, import_is_in_horizontal_bounds.isInHorizontalBounds)(boxX, boxWidth, leftCenter);
-    }
-  );
+    "start"
+  ) : "";
+  const labelText = truncated === import_utils.ELLIPSIS_CHARACTER ? "" : truncated;
   const horizontalMeasurements = getHorizontalMeasurements(labelText, labelX);
-  const verticalMeasurements = getVerticalMeasurements(
-    labelX,
-    labelText,
-    labelY
-  );
+  const verticalMeasurements = getVerticalMeasurements(labelText, labelY);
   return {
     ...horizontalMeasurements,
     ...verticalMeasurements,
@@ -62,22 +55,22 @@ const buildLabel = (arc, path, valueType, formatter, truncationMode, leftCenter)
   };
 };
 const formatLabelText = (valueType, formatter, data) => {
-  const labelText = valueType === import_constants2.LABEL_TYPE_OPTION.Absolute ? formatter(data.value) : `${data.relativeValue.toFixed(0)}%`;
+  const labelText = valueType === import_constants.LABEL_TYPE_OPTION.Absolute ? formatter(data.value) : `${data.relativeValue.toFixed(0)}%`;
   return labelText.trim();
 };
 const getHorizontalMeasurements = (labelText, labelX) => {
-  const boxWidth = (0, import_utils.getTextWidth)(labelText, import_constants.ITEM_FONT_STYLES);
+  const boxWidth = Math.ceil(
+    (0, import_truncate_string.calculateWidth)(labelText, import_chars_font_width_map.charsFontWidth12pixelsSize400Map)
+  );
   const textX = labelX + (labelX > 0 ? boxWidth / 2 : -boxWidth / 2);
   const boxX = textX - boxWidth / 2;
   return { boxX, boxWidth, textX };
 };
-const getVerticalMeasurements = (labelX, labelText, labelY) => {
-  const labelTextHeight = (0, import_utils.getTextHeight)(
-    labelX >= 0 ? labelText[0] : labelText[labelText.length - 1],
-    import_constants.ITEM_FONT_STYLES
-  );
-  const textY = labelY + (labelY > 0 ? labelTextHeight : 0);
-  const boxHeight = (0, import_utils.getTextHeight)(labelText, import_constants.ITEM_FONT_STYLES);
+const GLYPH_HEIGHT_RATIO = 5 / 6;
+const TEXT_BOUNDING_BOX_HEIGHT = Math.round(import_truncate_string.TEXT_HEIGHT * GLYPH_HEIGHT_RATIO);
+const getVerticalMeasurements = (text, labelY) => {
+  const boxHeight = text ? TEXT_BOUNDING_BOX_HEIGHT : 0;
+  const textY = labelY + (labelY > 0 ? boxHeight : 0);
   const boxY = textY - boxHeight;
   return { boxY, boxHeight, textY };
 };

package/charts/pie/utils/build-slices.d.ts

@@ -1,10 +1,11 @@
+import { type Unit } from '@dynatrace-sdk/units';
 import { CustomColorPalette, ColorPalette } from '../../core/types/color-palette.js';
 import { InternalSliceData } from '../types/internal/pie-chart.js';
-import { SliceUnit, SliceData } from '../types/pie-chart.config.js';
+import { SliceData } from '../types/pie-chart.config.js';
 /**
  * Builds the slices and their configurations for the pie and donut chart.
  * @param data - Data received from the dataSet.
  * @param colorPalette - Color to apply to the slices.
  * @returns An array of internal slices.
  */
-export declare const buildSlices: (data: SliceData[], colorPalette?: ColorPalette | CustomColorPalette, unit?: SliceUnit) => InternalSliceData[];
+export declare const buildSlices: (data: SliceData[], colorPalette?: ColorPalette | CustomColorPalette, unit?: string | Unit) => InternalSliceData[];

package/charts/single-value/SingleValue.css

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

package/charts/single-value/SingleValue.js

@@ -42,6 +42,7 @@ var import_Toolbar = require("./slots/Toolbar.js");
 var import_Trend = require("./slots/Trend.js");
 var import_iterate_slots = require("./utils/iterate-slots.js");
 var import_single_value_config = require("./utils/single-value-config.js");
+var import_useBehavioralTrackingProps = require("../../core/hooks/useBehavioralTrackingProps.js");
 var import_useMergeRefs = require("../../core/hooks/useMergeRefs.js");
 var import_Intent = require("../../core/slots/Intent/Intent.js");
 var import_get_chart_states_template = require("../core/components/chart-states/utils/get-chart-states-template.js");
@@ -68,6 +69,7 @@ const SingleValueRoot = /* @__PURE__ */ (0, import_react.forwardRef)((props, for
     applyThresholdBackground,
     ...restProps
   } = props;
+  const [behavioralTrackingProps] = (0, import_useBehavioralTrackingProps.useBehavioralTrackingProps)(props);
   const { slots, sparklineChildren } = (0, import_iterate_slots.iterateSlots)(children);
   const { emptyState, errorState } = (0, import_get_chart_states_template.getChartStatesTemplates)(children);
   const config = (0, import_use_single_value_config.useSingleValueConfig)(restProps, slots);
@@ -98,6 +100,7 @@ const SingleValueRoot = /* @__PURE__ */ (0, import_react.forwardRef)((props, for
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
+      ...behavioralTrackingProps,
       role: "img",
       className: (0, import_clsx.default)(import_SingleValue_css.container, customerClassNames),
       style: mergedStyle,

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

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

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

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

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

@@ -45,6 +45,7 @@ var import_Trend = require("./slots/Trend.js");
 var import_Value = require("./slots/Value.js");
 var import_calculate_grid_layout = require("./utils/calculate-grid-layout.js");
 var import_iterate_slots = require("./utils/iterate-slots.js");
+var import_useBehavioralTrackingProps = require("../../core/hooks/useBehavioralTrackingProps.js");
 var import_Intent = require("../../core/slots/Intent/Intent.js");
 var import_Flex = require("../../layouts/flex/Flex.js");
 var import_Grid = require("../../layouts/grid/Grid.js");
@@ -70,6 +71,7 @@ const SingleValueGridRoot = (props) => {
     seriesActions: individualSeriesActions,
     ...gridConfig
   } = props;
+  const [behavioralTrackingProps] = (0, import_useBehavioralTrackingProps.useBehavioralTrackingProps)(props);
   const labelCount = (0, import_use_label_count.useLabelCount)(data, labelAccessor);
   const { accessors: slotAccessors, ...slotsConfig } = (0, import_iterate_slots.iterateSlots)(
     children,
@@ -96,6 +98,7 @@ const SingleValueGridRoot = (props) => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
+      ...behavioralTrackingProps,
       ref: refCallback,
       style: {
         ...consumerStyle

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

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

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

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

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

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

package/charts/single-value-grid/components/SingleValueDisplay.js

@@ -97,7 +97,7 @@ const SingleValueDisplay = ({
       sparklineProps,
       trendProps,
       applyThresholdBackground: config.applyThresholdBackground,
-      propsFromGrid: propsFromGrid({ value, ...label ? { label } : {} })
+      propsFromGrid: propsFromGrid(record)
     }
   );
 };

package/charts/single-value-grid/defaults.js

@@ -36,7 +36,16 @@ const sparklineDefaultProps = {
   style: {},
   "data-testid": "",
   "data-dtrum-mask": false,
-  "data-dtrum-allow": false
+  "data-dtrum-allow": false,
+  "data-dt-name": "",
+  "data-dt-content": "",
+  "data-dt-children-name": "",
+  "data-dt-features": "",
+  "data-dt-properties": "",
+  "data-dt-mouse-over": "",
+  "data-dt-value-content": "",
+  "data-dt-children-value-content": "",
+  "data-dt-ancestor": ""
 };
 const trendDefaultProps = {
   showIcon: true,
@@ -50,6 +59,15 @@ const gridDefaultProps = {
   "data-dtrum-mask": false,
   "data-dtrum-allow": false,
   "data-testid": "",
-  loading: false
+  loading: false,
+  "data-dt-name": "",
+  "data-dt-content": "",
+  "data-dt-children-name": "",
+  "data-dt-features": "",
+  "data-dt-properties": "",
+  "data-dt-mouse-over": "",
+  "data-dt-value-content": "",
+  "data-dt-children-value-content": "",
+  "data-dt-ancestor": ""
 };
 const SINGLE_VALUE_GRID_ARIA_LABEL = "Single value data visualization grid";

package/charts/single-value-grid/types/single-value-grid.d.ts

@@ -1,4 +1,5 @@
 import type { IntentProps } from '../../../core/slots/Intent/Intent.js';
+import type { BehaviorTrackingProps } from '../../../core/types/behavior-tracking-props.js';
 import type { DataTestId } from '../../../core/types/data-props.js';
 import type { MaskingProps } from '../../../core/types/masking-props.js';
 import type { StylingProps } from '../../../core/types/styling-props.js';
@@ -19,7 +20,7 @@ type OmitAccessors<T> = {
  * Props for the SingleValueGrid component.
  * @public
  */
-export interface SingleValueGridProps extends StylingProps, MaskingProps, DataTestId {
+export interface SingleValueGridProps extends StylingProps, MaskingProps, DataTestId, BehaviorTrackingProps {
     /** Show the loading indicator when truly.
      * @defaultValue false
      */

package/charts/single-value-grid/utils/build-props-from-grid.d.ts

@@ -1,9 +1,7 @@
 import { type ReactElement } from 'react';
 import type { PropsFromGrid } from '../../core/components/single-value-renderer/types/single-value-base-props.js';
 import type { PartialSingleValueGridConfig, SingleValueGridIntentsConfig } from '../types/single-value-grid.js';
-type SingleIntentsData = {
-    value: number | string | undefined;
-};
+type SingleIntentsData = Record<string, unknown>;
 export declare const buildPropsFromGrid: (toolbar: PartialSingleValueGridConfig["toolbar"], singleIntents: SingleValueGridIntentsConfig["single"], gridIntents: SingleValueGridIntentsConfig["grid"], labelText: string) => (data: SingleIntentsData) => {
     intentsAsyncTemplate: () => Promise<ReactElement>;
     toolbar: PropsFromGrid["toolbar"];

package/charts/sparkline/Sparkline.d.ts

@@ -1,4 +1,4 @@
-import { type PropsWithChildren } from 'react';
+import type { PropsWithChildren } from 'react';
 import type { SparklineProps } from '../core/components/sparkline-display/types/sparkline-props.js';
 /**
  * The `Sparkline` is a compact and simple data visualization that displays

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

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

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

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

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

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

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

@@ -26,7 +26,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-0-1 _13lzg4k0-3-0-1";
-var crosshairLayout = "_17fdb113-3-0-1 _13lzg4k0-3-0-1";
-var datapointCanvasPlot = "_17fdb111-3-0-1 _13lzg4k0-3-0-1";
-var datapointIndicatorLayout = "_17fdb112-3-0-1 _13lzg4k0-3-0-1";
+var canvasPlot = "_17fdb110-3-1-0 _13lzg4k0-3-1-0";
+var crosshairLayout = "_17fdb113-3-1-0 _13lzg4k0-3-1-0";
+var datapointCanvasPlot = "_17fdb111-3-1-0 _13lzg4k0-3-1-0";
+var datapointIndicatorLayout = "_17fdb112-3-1-0 _13lzg4k0-3-1-0";

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

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

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

@@ -24,5 +24,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-0-1 _13lzg4k0-3-0-1";
-var thresholdPlotRange = "_9p8qi21-3-0-1 _13lzg4k0-3-0-1";
+var thresholdPlotLine = "_9p8qi20-3-1-0 _13lzg4k0-3-1-0";
+var thresholdPlotRange = "_9p8qi21-3-1-0 _13lzg4k0-3-1-0";

package/charts/tree-map/TreeMap.js

@@ -54,6 +54,7 @@ var import_EmptyStateSlot = require("../core/slots/chart-states/EmptyStateSlot.j
 var import_ErrorStateSlot = require("../core/slots/chart-states/ErrorStateSlot.js");
 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 {
     data,
@@ -65,7 +66,8 @@ const TreeMapRoot = (0, import_react.forwardRef)((props, forwardedRef) => {
     style,
     "data-dtrum-mask": dataDtrumMask,
     "data-dtrum-allow": dataDtrumAllow,
-    "data-testid": dataTestId = "treemap-chart-root"
+    "data-testid": dataTestId = "treemap-chart-root",
+    unit
   } = props;
   const config = (0, import_useTreeMapChartConfig.useTreeMapChartConfig)(props);
   const { loading } = config;
@@ -87,7 +89,7 @@ const TreeMapRoot = (0, import_react.forwardRef)((props, forwardedRef) => {
   const internalTree = (0, import_map_to_internal_tree.mapToInternalTree)(
     data.tree,
     config.formatter,
-    data.unit
+    unit ?? data.unit
   );
   const sortedTree = (0, import_get_sorted_tree.getSortedTree)(internalTree);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -95,6 +97,7 @@ const TreeMapRoot = (0, import_react.forwardRef)((props, forwardedRef) => {
     {
       data,
       seriesActions,
+      unit,
       ...config,
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_TreeMapChartLayout.TreeMapChartLayout,
@@ -112,7 +115,8 @@ const TreeMapRoot = (0, import_react.forwardRef)((props, forwardedRef) => {
           style,
           "data-dtrum-mask": dataDtrumMask,
           "data-dtrum-allow": dataDtrumAllow,
-          "data-testid": dataTestId
+          "data-testid": dataTestId,
+          "data-dt-component": COMPONENT_NAME
         }
       )
     }

package/charts/tree-map/components/TreeMapChartLayout.d.ts

@@ -13,6 +13,7 @@ interface TreemapChartLayoutProps extends StylingProps, MaskingProps, DataTestId
     isEmpty: boolean;
     loading: boolean;
     chartLayoutRef: RefObject<ChartLayoutRef | null>;
+    'data-dt-component': string;
 }
 export declare const TreeMapChartLayout: (props: TreemapChartLayoutProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;
 export {};

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

@@ -45,7 +45,8 @@ const TreeMapChartLayout = /* @__PURE__ */ (0, import_react.forwardRef)((props,
     style,
     "data-dtrum-mask": dataDtrumMask,
     "data-dtrum-allow": dataDtrumAllow,
-    "data-testid": dataTestId
+    "data-testid": dataTestId,
+    "data-dt-component": dataDtComponent
   } = props;
   const {
     hidden: legendHidden,
@@ -71,6 +72,7 @@ const TreeMapChartLayout = /* @__PURE__ */ (0, import_react.forwardRef)((props,
       "data-dtrum-mask": dataDtrumMask,
       "data-dtrum-allow": dataDtrumAllow,
       "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, { data, 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 }),

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

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

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

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

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

@@ -1,7 +1,7 @@
-._1j83htq0-3-0-1 {
+._1j83htq0-3-1-0 {
   padding: 0 var(--dt-spacings-size-4, 4px) ;
   text-align: center;
 }
-._1j83htq1-3-0-1 {
+._1j83htq1-3-1-0 {
   padding: var(--dt-spacings-size-4, 4px);
 }

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

@@ -23,5 +23,5 @@ __export(TreeMapTooltip_css_exports, {
 });
 module.exports = __toCommonJS(TreeMapTooltip_css_exports);
 var import_TreeMapTooltip_css_ts_vanilla = require("./TreeMapTooltip.css");
-var headerText = "_1j83htq0-3-0-1";
-var valueChip = "_1j83htq1-3-0-1";
+var headerText = "_1j83htq0-3-1-0";
+var valueChip = "_1j83htq1-3-1-0";

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

@@ -34,9 +34,10 @@ __export(TreeMapNodeLabel_exports, {
 module.exports = __toCommonJS(TreeMapNodeLabel_exports);
 var import_react = require("react");
 var import_typography = __toESM(require("@dynatrace/strato-design-tokens/typography"));
-var import_canvas_label_utils = require("./utils/canvas-label-utils.js");
 var import_utils = require("../../../../typography/utils.js");
 var import_useCanvas = require("../../../core/components/canvas/hooks/useCanvas.js");
+var import_chars_font_width_map = require("../../../core/components/text-ellipsis/chars-font-width-map.js");
+var import_truncate_string = require("../../../core/components/text-ellipsis/truncate-string.js");
 var import_get_font_details = require("../../../core/utils/get-font-details.js");
 var import_constants = require("../../constants.js");
 var import_useTruncationMode = require("../../hooks/useTruncationMode.js");
@@ -56,9 +57,19 @@ const TreeMapNodeLabel = (props) => {
         import_constants.DEFAULT_CLUSTER_LABEL_LINE_HEIGHT
       );
       ctx.fillStyle = color;
-      const estimatedLabelWidth = (0, import_utils.getTextWidth)(label, ItemFontStyles);
-      const sanitizedLabel = estimatedLabelWidth > maxWidth ? (0, import_canvas_label_utils.applyEllipsis)(ctx, label, maxWidth, truncationMode) : label;
+      const estimatedLabelWidth = Math.ceil(
+        (0, import_truncate_string.calculateWidth)(label, import_chars_font_width_map.charsFontWidth12pixelsSize400Map)
+      );
+      const truncated = estimatedLabelWidth > maxWidth ? (0, import_truncate_string.truncateString)(
+        label,
+        maxWidth,
+        import_chars_font_width_map.charsFontWidth12pixelsSize400Map,
+        truncationMode,
+        "start"
+      ) : label;
+      const sanitizedLabel = truncated === import_utils.ELLIPSIS_CHARACTER ? "" : truncated;
       ctx.textAlign = import_constants.TEXT_ALIGN.Center;
+      ctx.textBaseline = import_constants.TEXT_BASELINE.Alphabetic;
       ctx.globalAlpha = opacity;
       ctx.fillText(sanitizedLabel, x, y, maxWidth);
       return false;

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

@@ -23,8 +23,11 @@ __export(TreeMapSquareRenderer_exports, {
 module.exports = __toCommonJS(TreeMapSquareRenderer_exports);
 var import_react = require("react");
 var import_canvas_label_utils = require("./utils/canvas-label-utils.js");
+var import_utils = require("../../../../typography/utils.js");
 var import_useCanvas = require("../../../core/components/canvas/hooks/useCanvas.js");
 var import_canvas_color = require("../../../core/components/canvas/utils/canvas-color.js");
+var import_chars_font_width_map = require("../../../core/components/text-ellipsis/chars-font-width-map.js");
+var import_truncate_string = require("../../../core/components/text-ellipsis/truncate-string.js");
 var import_color_contrast = require("../../../core/utils/color-contrast.js");
 var import_get_font_details = require("../../../core/utils/get-font-details.js");
 var import_constants = require("../../constants.js");
@@ -71,13 +74,20 @@ function TreeMapSquareRenderer(props) {
       if (withLabel) {
         ctx.fillStyle = (0, import_color_contrast.getColorByContrast)(ctx.fillStyle);
         ctx.font = (0, import_get_font_details.getFontDetails)(fontWeight, fontSize, lineHeight);
-        const nameWidth = (0, import_canvas_label_utils.getNameWidth)(name, ctx);
+        const nameWidth = (0, import_truncate_string.calculateWidth)(
+          name,
+          import_chars_font_width_map.charsFontWidth12pixelsSize400Map
+        );
         ctx.font = (0, import_get_font_details.getFontDetails)(
           boldFontWeight,
           clusterFontSize,
           clusterLineHeight
         );
-        const labelWidth = (0, import_canvas_label_utils.getLabelWidth)(nameWidth, value, ctx);
+        const labelWidth = (0, import_canvas_label_utils.getLabelWidth)(
+          nameWidth,
+          value,
+          import_chars_font_width_map.charsFontWidth12pixelsSize500Map
+        );
         const labelFit = (0, import_canvas_label_utils.getLabelFit)(
           height,
           width,
@@ -86,8 +96,15 @@ function TreeMapSquareRenderer(props) {
           labelWidth
         );
         const withEllipsis = labelFit === import_constants.LABEL_OPTIONS.Ellipsis;
-        const maxWidth = width - 2 * padding;
-        const displayedName = withEllipsis ? (0, import_canvas_label_utils.applyEllipsis)(ctx, name, maxWidth, truncationMode) : name;
+        const maxWidth = width - padding;
+        const truncatedName = withEllipsis ? (0, import_truncate_string.truncateString)(
+          name,
+          maxWidth,
+          import_chars_font_width_map.charsFontWidth12pixelsSize400Map,
+          truncationMode,
+          "start"
+        ) : name;
+        const displayedName = truncatedName === import_utils.ELLIPSIS_CHARACTER ? "" : truncatedName;
         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) => {

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

@@ -1,4 +1,4 @@
-import type { TruncationMode } from '../../../../../typography/text-ellipsis/TextEllipsis.js';
+import type { FontWidthMap } from '../../../../core/components/text-ellipsis/chars-font-width-map.js';
 import type { LabelOptions } from '../../../types/canvas.js';
 type LabelWidthOptions = {
     nameWidth: number;
@@ -28,20 +28,14 @@ export declare const getRectCenter: (width: number, height: number) => {
     centerY: number;
 };
 /**
- * Returns the name width for the given context
+ * Returns the object containing width for each labelFit scenario,
+ * using the character width map for estimated measurements.
  * @internal
- * @param name - current node name.
- * @param ctx - canvas context.
- */
-export declare const getNameWidth: (name: string, ctx: CanvasRenderingContext2D) => number;
-/**
- * Returns the object containing width for each labelFit scenario
- * @internal
- * @param name - current node name.
+ * @param nameWidth - pre-calculated name width.
  * @param value - current node value.
- * @param ctx - canvas context.
+ * @param charWidthMap - character width map for width estimation.
  */
-export declare const getLabelWidth: (nameWidth: number, value: string, ctx: CanvasRenderingContext2D) => {
+export declare const getLabelWidth: (nameWidth: number, value: string, charWidthMap: FontWidthMap) => {
     nameWidth: number;
     nameValueWidth: number;
     multiLineWidth: number;
@@ -63,5 +57,4 @@ export declare const getAppliedLabels: (labelFit: LabelOptions, name: string, va
  * @param fontSize - font size value.
  */
 export declare const getOffsetY: (labels: string[], labelIndex: number, fontSize: number) => number;
-export declare const applyEllipsis: (ctx: CanvasRenderingContext2D, str: string, maxWidth: number, truncationMode: TruncationMode) => string;
 export {};

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

@@ -20,16 +20,14 @@ var canvas_label_utils_exports = {};
 __export(canvas_label_utils_exports, {
   FONT_SIZE_DIFFERENCE: () => FONT_SIZE_DIFFERENCE,
   LINE_SPACING: () => LINE_SPACING,
-  applyEllipsis: () => applyEllipsis,
   getAppliedLabels: () => getAppliedLabels,
   getLabelFit: () => getLabelFit,
   getLabelWidth: () => getLabelWidth,
-  getNameWidth: () => getNameWidth,
   getOffsetY: () => getOffsetY,
   getRectCenter: () => getRectCenter
 });
 module.exports = __toCommonJS(canvas_label_utils_exports);
-var import_text_truncation = require("../../../../core/utils/text-truncation.js");
+var import_truncate_string = require("../../../../core/components/text-ellipsis/truncate-string.js");
 var import_constants = require("../../../constants.js");
 const LINE_SPACING = 2;
 const FONT_SIZE_DIFFERENCE = 1;
@@ -62,15 +60,13 @@ const getRectCenter = (width, height) => ({
   centerX: width / 2,
   centerY: height / 2
 });
-const getNameWidth = (name, ctx) => ctx.measureText(name).width;
-const getLabelWidth = (nameWidth, value, ctx) => {
-  const nameValueWidth = nameWidth + ctx.measureText(` ${value}`).width;
-  const multiLineWidth = Math.max(nameWidth, ctx.measureText(value).width);
-  return {
+const getLabelWidth = (nameWidth, value, charWidthMap) => {
+  const nameValueWidth = nameWidth + (0, import_truncate_string.calculateWidth)(` ${value}`, charWidthMap);
+  const multiLineWidth = Math.max(
     nameWidth,
-    nameValueWidth,
-    multiLineWidth
-  };
+    (0, import_truncate_string.calculateWidth)(value, charWidthMap)
+  );
+  return { nameWidth, nameValueWidth, multiLineWidth };
 };
 const getAppliedLabels = (labelFit, name, value) => {
   const labelMap = {
@@ -88,9 +84,3 @@ const getOffsetY = (labels, labelIndex, fontSize) => {
   const isMultiLine = labels.length > 1;
   return isMultiLine ? labelIndex === 0 ? upOffsetY : downOffsetY : 0;
 };
-const applyEllipsis = (ctx, str, maxWidth, truncationMode) => {
-  return (0, import_text_truncation.truncateText)(str, truncationMode, (truncatedText) => {
-    const width = ctx.measureText(truncatedText).width;
-    return width <= maxWidth;
-  });
-};