@dynatrace/strato-components 3.0.1 → 3.1.0

package/charts/core/components/shape/BubbleShape/BubbleShape.css

@@ -1,18 +1,18 @@
-._hctkb30-3-0-1 {
+._hctkb30-3-1-0 {
   border-radius: 50%;
 }
-._hctkb31-3-0-1 {
+._hctkb31-3-1-0 {
   border: 1px solid var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._hctkb32-3-0-1 {
+._hctkb32-3-1-0 {
   border: none;
 }
-._hctkb33-3-0-1 {
+._hctkb33-3-1-0 {
   border-width: 1px;
   border-style: solid;
   border-radius: 50%;
 }
-._hctkb34-3-0-1 {
+._hctkb34-3-1-0 {
   height: 8px;
   width: 8px;
   border-radius: 50%;

package/charts/core/components/shape/BubbleShape/BubbleShape.sty.js

@@ -25,6 +25,6 @@ __export(BubbleShape_css_exports, {
 module.exports = __toCommonJS(BubbleShape_css_exports);
 var import_BubbleShape_css_ts_vanilla = require("./BubbleShape.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var bubble = "_hctkb34-3-0-1";
-var bubbleBorder = "_hctkb33-3-0-1";
-var bubbleOutline = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_hctkb30-3-0-1", variantClassNames: { active: { true: "_hctkb31-3-0-1", false: "_hctkb32-3-0-1" } }, defaultVariants: {}, compoundVariants: [] });
+var bubble = "_hctkb34-3-1-0";
+var bubbleBorder = "_hctkb33-3-1-0";
+var bubbleOutline = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_hctkb30-3-1-0", variantClassNames: { active: { true: "_hctkb31-3-1-0", false: "_hctkb32-3-1-0" } }, defaultVariants: {}, compoundVariants: [] });

package/charts/core/components/shape/EmojiShape/EmojiShape.css

@@ -1,4 +1,4 @@
-._s37yxn0-3-0-1 {
+._s37yxn0-3-1-0 {
   border-radius: 4px;
   display: flex;
   justify-content: center;
@@ -7,9 +7,9 @@
   height: 100%;
   box-sizing: border-box;
 }
-._s37yxn1-3-0-1 {
+._s37yxn1-3-1-0 {
   border: 1px solid var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._s37yxn2-3-0-1 {
+._s37yxn2-3-1-0 {
   border: none;
 }

package/charts/core/components/shape/EmojiShape/EmojiShape.sty.js

@@ -23,4 +23,4 @@ __export(EmojiShape_css_exports, {
 module.exports = __toCommonJS(EmojiShape_css_exports);
 var import_EmojiShape_css_ts_vanilla = require("./EmojiShape.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var emojiShape = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_s37yxn0-3-0-1", variantClassNames: { active: { true: "_s37yxn1-3-0-1", false: "_s37yxn2-3-0-1" } }, defaultVariants: {}, compoundVariants: [] });
+var emojiShape = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_s37yxn0-3-1-0", variantClassNames: { active: { true: "_s37yxn1-3-1-0", false: "_s37yxn2-3-1-0" } }, defaultVariants: {}, compoundVariants: [] });

package/charts/core/components/shape/IconShape/IconShape.css

@@ -1,4 +1,4 @@
-._1jwo1lm0-3-0-1 {
+._1jwo1lm0-3-1-0 {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -7,9 +7,9 @@
   height: 100%;
   box-sizing: border-box;
 }
-._1jwo1lm1-3-0-1 {
+._1jwo1lm1-3-1-0 {
   border: 1px solid var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._1jwo1lm2-3-0-1 {
+._1jwo1lm2-3-1-0 {
   border: none;
 }

package/charts/core/components/shape/IconShape/IconShape.sty.js

@@ -23,4 +23,4 @@ __export(IconShape_css_exports, {
 module.exports = __toCommonJS(IconShape_css_exports);
 var import_IconShape_css_ts_vanilla = require("./IconShape.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var iconShape = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1jwo1lm0-3-0-1", variantClassNames: { active: { true: "_1jwo1lm1-3-0-1", false: "_1jwo1lm2-3-0-1" } }, defaultVariants: {}, compoundVariants: [] });
+var iconShape = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1jwo1lm0-3-1-0", variantClassNames: { active: { true: "_1jwo1lm1-3-1-0", false: "_1jwo1lm2-3-1-0" } }, defaultVariants: {}, compoundVariants: [] });

package/charts/core/components/shape/shape-icon.css

@@ -1,4 +1,4 @@
-._d5ba2x0-3-0-1 {
+._d5ba2x0-3-1-0 {
   display: block;
   vertical-align: middle;
 }

package/charts/core/components/shape/shape-icon.sty.js

@@ -22,4 +22,4 @@ __export(shape_icon_css_exports, {
 });
 module.exports = __toCommonJS(shape_icon_css_exports);
 var import_shape_icon_css_ts_vanilla = require("./shape-icon.css");
-var singleDimensionIcon = "_d5ba2x0-3-0-1";
+var singleDimensionIcon = "_d5ba2x0-3-1-0";

package/charts/core/components/shape/styles/DataPointShape.css

@@ -1,4 +1,4 @@
-._ihihf60-3-0-1 {
+._ihihf60-3-1-0 {
   width: var(--dt-spacings-size-8, 8px);
   height: var(--dt-spacings-size-8, 8px);
   border-radius: var(--dt-spacings-size-64, 64px);
@@ -7,39 +7,39 @@
   margin-left: auto;
   margin-right: auto;
 }
-._ihihf61-3-0-1 {
+._ihihf61-3-1-0 {
   width: var(--dt-spacings-size-6, 6px);
   border-radius: var(--dt-spacings-size-64, 64px);
   height: 72%;
   margin-left: auto;
   margin-right: auto;
 }
-._ihihf62-3-0-1 {
+._ihihf62-3-1-0 {
   display: flex;
   border: 1px solid var(--dt-colors-text-neutral-default, #2f2f4f);
   border-radius: var(--dt-spacings-size-20, 20px);
   margin-left: auto;
   margin-right: auto;
 }
-._ihihf63-3-0-1 {
+._ihihf63-3-1-0 {
   margin-top: var(--dt-spacings-size-2, 2px);
   width: var(--dt-spacings-size-8, 8px);
   height: var(--dt-spacings-size-8, 8px);
 }
-._ihihf64-3-0-1 {
+._ihihf64-3-1-0 {
   margin-top: inherit;
   width: var(--dt-spacings-size-6, 6px);
   height: 72%;
 }
-._ihihf65-3-0-1 {
+._ihihf65-3-1-0 {
   margin: auto auto;
   border-radius: var(--dt-spacings-size-64, 64px);
 }
-._ihihf66-3-0-1 {
+._ihihf66-3-1-0 {
   width: var(--dt-spacings-size-6, 6px);
   height: var(--dt-spacings-size-6, 6px);
 }
-._ihihf67-3-0-1 {
+._ihihf67-3-1-0 {
   width: var(--dt-spacings-size-4, 4px);
   height: 94%;
 }

package/charts/core/components/shape/styles/DataPointShape.sty.js

@@ -26,7 +26,7 @@ __export(DataPointShape_css_exports, {
 module.exports = __toCommonJS(DataPointShape_css_exports);
 var import_DataPointShape_css_ts_vanilla = require("./DataPointShape.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var innerHighlightedIcon = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_ihihf65-3-0-1", variantClassNames: { singleLine: { true: "_ihihf66-3-0-1", false: "_ihihf67-3-0-1" } }, defaultVariants: {}, compoundVariants: [] });
-var multiDimensionIcon = "_ihihf61-3-0-1";
-var outerHighlightedIcon = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_ihihf62-3-0-1", variantClassNames: { singleLine: { true: "_ihihf63-3-0-1", false: "_ihihf64-3-0-1" } }, defaultVariants: {}, compoundVariants: [] });
-var singleDimensionIcon = "_ihihf60-3-0-1";
+var innerHighlightedIcon = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_ihihf65-3-1-0", variantClassNames: { singleLine: { true: "_ihihf66-3-1-0", false: "_ihihf67-3-1-0" } }, defaultVariants: {}, compoundVariants: [] });
+var multiDimensionIcon = "_ihihf61-3-1-0";
+var outerHighlightedIcon = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_ihihf62-3-1-0", variantClassNames: { singleLine: { true: "_ihihf63-3-1-0", false: "_ihihf64-3-1-0" } }, defaultVariants: {}, compoundVariants: [] });
+var singleDimensionIcon = "_ihihf60-3-1-0";

package/charts/core/components/shared-chart-interactions/SharedChartInteractions.css

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

package/charts/core/components/shared-chart-interactions/SharedChartInteractions.sty.js

@@ -22,4 +22,4 @@ __export(SharedChartInteractions_css_exports, {
 });
 module.exports = __toCommonJS(SharedChartInteractions_css_exports);
 var import_SharedChartInteractions_css_ts_vanilla = require("./SharedChartInteractions.css");
-var containerSVG = "_14qoaxs0-3-0-1";
+var containerSVG = "_14qoaxs0-3-1-0";

package/charts/core/components/single-value-renderer/SingleValueRenderer.css

@@ -1,24 +1,24 @@
-._utn1m50-3-0-1 {
+._utn1m50-3-1-0 {
   container-type: size;
   height: 100%;
   width: 100%;
   border-radius: 2px;
   position: relative;
 }
-._utn1m51-3-0-1 {
+._utn1m51-3-1-0 {
   container-type: size;
   grid-area: content;
   padding: 8px;
 }
-._utn1m52-3-0-1 {
+._utn1m52-3-1-0 {
   grid-template-columns: 1fr;
   display: grid;
 }
-._utn1m53-3-0-1 {
+._utn1m53-3-1-0 {
   grid-area: sparkline;
   overflow: visible;
 }
-._utn1m54-3-0-1 {
+._utn1m54-3-1-0 {
   grid-area: trend;
   overflow: hidden;
 }

package/charts/core/components/single-value-renderer/SingleValueRenderer.sty.js

@@ -26,8 +26,8 @@ __export(SingleValueRenderer_css_exports, {
 });
 module.exports = __toCommonJS(SingleValueRenderer_css_exports);
 var import_SingleValueRenderer_css_ts_vanilla = require("./SingleValueRenderer.css");
-var chartStateHandler = "_utn1m52-3-0-1";
-var singleValueContainer = "_utn1m50-3-0-1";
-var singleValueInnerContainer = "_utn1m51-3-0-1";
-var sparklineArea = "_utn1m53-3-0-1";
-var trendArea = "_utn1m54-3-0-1";
+var chartStateHandler = "_utn1m52-3-1-0";
+var singleValueContainer = "_utn1m50-3-1-0";
+var singleValueInnerContainer = "_utn1m51-3-1-0";
+var sparklineArea = "_utn1m53-3-1-0";
+var trendArea = "_utn1m54-3-1-0";

package/charts/core/components/single-value-renderer/components/ContentGrid.css

@@ -1,4 +1,4 @@
-._zdpx4o0-3-0-1 {
+._zdpx4o0-3-1-0 {
   display: grid;
   width: 100%;
   height: 100%;

package/charts/core/components/single-value-renderer/components/ContentGrid.sty.js

@@ -22,4 +22,4 @@ __export(ContentGrid_css_exports, {
 });
 module.exports = __toCommonJS(ContentGrid_css_exports);
 var import_ContentGrid_css_ts_vanilla = require("./ContentGrid.css");
-var contentGridStaticStyles = "_zdpx4o0-3-0-1";
+var contentGridStaticStyles = "_zdpx4o0-3-1-0";

package/charts/core/components/single-value-renderer/components/Icon.css

@@ -1,16 +1,16 @@
-._84hyuy0-3-0-1 > svg {
+._84hyuy0-3-1-0 > svg {
   position: absolute;
   width: 2ch;
   height: 2ch;
   top: 50%;
   transform: translateY(-50%);
 }
-._84hyuy1-3-0-1 {
+._84hyuy1-3-1-0 {
   font-size: calc(min(var(--dt-charts-single-value-font-size, var(--dt-charts-single-value-global-value-font-size, 240)), var(--dt-charts-single-value-global-value-font-size, 240)) * 1px);
   position: relative;
   margin-right: var(--dt-spacings-size-4, 4px);
 }
-._84hyuy2-3-0-1 {
+._84hyuy2-3-1-0 {
   display: flex;
   justify-content: center;
   align-items: center;

package/charts/core/components/single-value-renderer/components/Icon.sty.js

@@ -24,5 +24,5 @@ __export(Icon_css_exports, {
 module.exports = __toCommonJS(Icon_css_exports);
 var import_Icon_css_ts_vanilla = require("./Icon.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var iconStyle = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_84hyuy1-3-0-1", variantClassNames: { isString: { true: "_84hyuy2-3-0-1", false: "_84hyuy0-3-0-1" } }, defaultVariants: {}, compoundVariants: [] });
-var parentSvgStyle = "_84hyuy0-3-0-1";
+var iconStyle = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_84hyuy1-3-1-0", variantClassNames: { isString: { true: "_84hyuy2-3-1-0", false: "_84hyuy0-3-1-0" } }, defaultVariants: {}, compoundVariants: [] });
+var parentSvgStyle = "_84hyuy0-3-1-0";

package/charts/core/components/single-value-renderer/components/Label.css

@@ -1,4 +1,4 @@
-._nuwbzs0-3-0-1 {
+._nuwbzs0-3-1-0 {
   grid-area: label;
   white-space: nowrap;
   overflow: hidden;

package/charts/core/components/single-value-renderer/components/Label.sty.js

@@ -22,4 +22,4 @@ __export(Label_css_exports, {
 });
 module.exports = __toCommonJS(Label_css_exports);
 var import_Label_css_ts_vanilla = require("./Label.css");
-var labelAreaStaticStyles = "_nuwbzs0-3-0-1";
+var labelAreaStaticStyles = "_nuwbzs0-3-1-0";

package/charts/core/components/single-value-renderer/components/Value.css

@@ -1,4 +1,4 @@
-._eff5no0-3-0-1 {
+._eff5no0-3-1-0 {
   grid-area: value;
   width: 100%;
   height: 100%;
@@ -6,20 +6,20 @@
   align-items: center;
   gap: 0;
 }
-._eff5no1-3-0-1 {
+._eff5no1-3-1-0 {
   white-space: nowrap;
   position: relative;
   font-size: min(var(--dt-charts-single-value-font-size, var(--dt-charts-single-value-global-value-font-size, 240)), var(--dt-charts-single-value-global-value-font-size, 240))px;
   font-weight: 500;
   overflow: hidden;
 }
-._eff5no2-3-0-1 {
+._eff5no2-3-1-0 {
   padding-left: 2ch;
 }
-._eff5no3-3-0-1 {
+._eff5no3-3-1-0 {
   padding-left: 0;
 }
-._eff5no4-3-0-1 {
+._eff5no4-3-1-0 {
   white-space: nowrap;
   overflow: hidden;
   font-size: calc(min(var(--dt-charts-single-value-font-size, var(--dt-charts-single-value-global-value-font-size, 240)), var(--dt-charts-single-value-global-value-font-size, 240)) * 0.66px);

package/charts/core/components/single-value-renderer/components/Value.sty.js

@@ -25,6 +25,6 @@ __export(Value_css_exports, {
 module.exports = __toCommonJS(Value_css_exports);
 var import_Value_css_ts_vanilla = require("./Value.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var unitStyle = "_eff5no4-3-0-1";
-var valueArea = "_eff5no0-3-0-1";
-var valueStyle = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_eff5no1-3-0-1", variantClassNames: { isReactNode: { true: "_eff5no2-3-0-1", false: "_eff5no3-3-0-1" } }, defaultVariants: {}, compoundVariants: [] });
+var unitStyle = "_eff5no4-3-1-0";
+var valueArea = "_eff5no0-3-1-0";
+var valueStyle = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_eff5no1-3-1-0", variantClassNames: { isReactNode: { true: "_eff5no2-3-1-0", false: "_eff5no3-3-1-0" } }, defaultVariants: {}, compoundVariants: [] });

package/charts/core/components/single-value-renderer/components/trend/Trend.css

@@ -1,13 +1,13 @@
-._i0i2v10-3-0-1 {
+._i0i2v10-3-1-0 {
   width: 100%;
   height: 100%;
   overflow: hidden;
 }
-._i0i2v11-3-0-1 {
+._i0i2v11-3-1-0 {
   white-space: nowrap;
   font-size: calc(min(var(--dt-charts-single-value-label-font-size, min(var(--dt-charts-single-value-global-trend-font-size, min(var(--dt-charts-single-value-font-size, var(--dt-charts-single-value-global-value-font-size, 240)), var(--dt-charts-single-value-global-value-font-size, 240))), min(var(--dt-charts-single-value-font-size, var(--dt-charts-single-value-global-value-font-size, 240)), var(--dt-charts-single-value-global-value-font-size, 240)))), min(var(--dt-charts-single-value-global-trend-font-size, min(var(--dt-charts-single-value-font-size, var(--dt-charts-single-value-global-value-font-size, 240)), var(--dt-charts-single-value-global-value-font-size, 240))), min(var(--dt-charts-single-value-font-size, var(--dt-charts-single-value-global-value-font-size, 240)), var(--dt-charts-single-value-global-value-font-size, 240)))) * 1px);
   overflow: hidden;
 }
-._i0i2v12-3-0-1 {
+._i0i2v12-3-1-0 {
   margin-left: min(10px, 1ch);
 }

package/charts/core/components/single-value-renderer/components/trend/Trend.sty.js

@@ -24,6 +24,6 @@ __export(Trend_css_exports, {
 });
 module.exports = __toCommonJS(Trend_css_exports);
 var import_Trend_css_ts_vanilla = require("./Trend.css");
-var trendContainer = "_i0i2v10-3-0-1";
-var trendLabel = "_i0i2v12-3-0-1";
-var valueLabelContainer = "_i0i2v11-3-0-1";
+var trendContainer = "_i0i2v10-3-1-0";
+var trendLabel = "_i0i2v12-3-1-0";
+var valueLabelContainer = "_i0i2v11-3-1-0";

package/charts/core/components/single-value-renderer/components/trend/components/Icon.css

@@ -1,8 +1,8 @@
-._160ezq60-3-0-1 {
+._160ezq60-3-1-0 {
   font-size: calc(min(var(--dt-charts-single-value-label-font-size, min(var(--dt-charts-single-value-global-trend-font-size, min(var(--dt-charts-single-value-font-size, var(--dt-charts-single-value-global-value-font-size, 240)), var(--dt-charts-single-value-global-value-font-size, 240))), min(var(--dt-charts-single-value-font-size, var(--dt-charts-single-value-global-value-font-size, 240)), var(--dt-charts-single-value-global-value-font-size, 240)))), min(var(--dt-charts-single-value-global-trend-font-size, min(var(--dt-charts-single-value-font-size, var(--dt-charts-single-value-global-value-font-size, 240)), var(--dt-charts-single-value-global-value-font-size, 240))), min(var(--dt-charts-single-value-font-size, var(--dt-charts-single-value-global-value-font-size, 240)), var(--dt-charts-single-value-global-value-font-size, 240)))) * 1px);
   position: relative;
 }
-._160ezq60-3-0-1 svg {
+._160ezq60-3-1-0 svg {
   position: absolute;
   width: 2ch;
   height: 2ch;

package/charts/core/components/single-value-renderer/components/trend/components/Icon.sty.js

@@ -22,4 +22,4 @@ __export(Icon_css_exports, {
 });
 module.exports = __toCommonJS(Icon_css_exports);
 var import_Icon_css_ts_vanilla = require("./Icon.css");
-var iconStyles = "_160ezq60-3-0-1";
+var iconStyles = "_160ezq60-3-1-0";

package/charts/core/components/single-value-renderer/toolbar.css

@@ -1,4 +1,4 @@
-._3nk49l0-3-0-1 {
+._3nk49l0-3-1-0 {
   width: 100%;
   height: 100%;
 }

package/charts/core/components/single-value-renderer/toolbar.sty.js

@@ -22,4 +22,4 @@ __export(toolbar_css_exports, {
 });
 module.exports = __toCommonJS(toolbar_css_exports);
 var import_toolbar_css_ts_vanilla = require("./toolbar.css");
-var toolbarOverlayPadding = "_3nk49l0-3-0-1";
+var toolbarOverlayPadding = "_3nk49l0-3-1-0";

package/charts/core/components/single-value-renderer/types/single-value-base-props.d.ts

@@ -1,5 +1,6 @@
 import { type ReactElement, type ReactNode } from 'react';
 import type { ConvertibleUnit, FormatOptions, Unit } from '@dynatrace-sdk/units';
+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';
@@ -29,7 +30,7 @@ export type SingleValueAlignment = 'start' | 'center' | 'end';
  * Base props for SingleValue instances
  * @public
  */
-export interface SingleValueBaseProps extends MaskingProps, StylingProps, DataTestId {
+export interface SingleValueBaseProps extends MaskingProps, StylingProps, DataTestId, BehaviorTrackingProps {
     /** Optional label text to show above the value. */
     label?: string;
     /** Optional icon to show left of the value. */

package/charts/core/components/single-value-renderer/utils/apply-color-rule-to-single-value.js

@@ -24,6 +24,7 @@ module.exports = __toCommonJS(apply_color_rule_to_single_value_exports);
 var import_lodash_es = require("lodash");
 var import_get_color_palette = require("../../../utils/get-color-palette.js");
 var import_getAccessor = require("../../../utils/getAccessor.js");
+var import_getValidColor = require("../../../utils/getValidColor.js");
 var import_validators = require("../../../utils/validators.js");
 const getSubject = (rule, rawData) => {
   const valueAccessor = rule.valueAccessor;
@@ -45,7 +46,7 @@ const applyColorRuleToSingleValue = (colorRules, value, dataItem) => {
     const rule = colorRules[i];
     const subject = getSubject(rule, dataItem) ?? value;
     if (!(0, import_lodash_es.isNil)(subject) && isValid(subject, rule.comparator, rule.matchValue)) {
-      return rule.colorPalette ? (0, import_get_color_palette.getColorPalette)(`${subject}`, 0, rule.colorPalette).Default : rule.color;
+      return rule.colorPalette ? (0, import_get_color_palette.getColorPalette)(`${subject}`, 0, rule.colorPalette).Default : (0, import_getValidColor.getValidColor)(rule.color ?? "");
     }
   }
 };

package/charts/core/components/sparkline-display/Sparkline.css

@@ -1,21 +1,21 @@
-._8d5rf80-3-0-1 {
+._8d5rf80-3-1-0 {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._8d5rf81-3-0-1 {
+._8d5rf81-3-1-0 {
   font-size: 9px;
   line-height: 12px;
 }
-._8d5rf82-3-0-1 {
+._8d5rf82-3-1-0 {
   font-size: var(--dt-typography-text-small-default-size, 12px);
 }
-._8d5rf83-3-0-1 {
+._8d5rf83-3-1-0 {
   position: absolute;
 }
-._8d5rf84-3-0-1 {
+._8d5rf84-3-1-0 {
   width: 4px;
   margin-left: var(--dt-spacings-size-4, 4px);
 }
-._8d5rf85-3-0-1 {
+._8d5rf85-3-1-0 {
   width: 6px;
   margin-left: var(--dt-spacings-size-4, 4px);
 }

package/charts/core/components/sparkline-display/Sparkline.sty.js

@@ -24,5 +24,5 @@ __export(Sparkline_css_exports, {
 module.exports = __toCommonJS(Sparkline_css_exports);
 var import_Sparkline_css_ts_vanilla = require("./Sparkline.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var contextValueText = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_8d5rf80-3-0-1", variantClassNames: { fontSize: { smallerThan32: "_8d5rf81-3-0-1", greaterOrEqual32: "_8d5rf82-3-0-1" } }, defaultVariants: {}, compoundVariants: [] });
-var negativeSign = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_8d5rf83-3-0-1", variantClassNames: { containerHeight: { height24: "_8d5rf84-3-0-1", height32: "_8d5rf85-3-0-1" } }, defaultVariants: {}, compoundVariants: [] });
+var contextValueText = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_8d5rf80-3-1-0", variantClassNames: { fontSize: { smallerThan32: "_8d5rf81-3-1-0", greaterOrEqual32: "_8d5rf82-3-1-0" } }, defaultVariants: {}, compoundVariants: [] });
+var negativeSign = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_8d5rf83-3-1-0", variantClassNames: { containerHeight: { height24: "_8d5rf84-3-1-0", height32: "_8d5rf85-3-1-0" } }, defaultVariants: {}, compoundVariants: [] });

package/charts/core/components/sparkline-display/SparklineDisplay.js

@@ -24,9 +24,10 @@ module.exports = __toCommonJS(SparklineDisplay_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_lodash_es = require("lodash");
 var import_SparklineContainer = require("./SparklineContainer.js");
+var import_get_wrapper_style = require("./utils/get-wrapper-style.js");
+var import_useBehavioralTrackingProps = require("../../../../core/hooks/useBehavioralTrackingProps.js");
 var import_defaultChartValues_css = require("../../../../core/styles/defaultChartValues.sty.js");
 var import_ChartStateHandler = require("../chart-states/ChartStateHandler.js");
-var import_get_wrapper_style = require("./utils/get-wrapper-style.js");
 var import_get_chart_states_template = require("../chart-states/utils/get-chart-states-template.js");
 const COMPONENT_NAME = "Sparkline";
 const SparklineDisplay = (props) => {
@@ -42,6 +43,7 @@ const SparklineDisplay = (props) => {
     "data-dtrum-allow": dataDtrumAllow,
     "data-testid": dataTestId
   } = props;
+  const [behavioralTrackingProps] = (0, import_useBehavioralTrackingProps.useBehavioralTrackingProps)(props);
   const series = Array.isArray(data) ? data[0] : data;
   const { emptyState, errorState } = (0, import_get_chart_states_template.getChartStatesTemplates)(children);
   const isEmpty = (0, import_lodash_es.isNil)(series) || series.datapoints?.length === 0;
@@ -49,6 +51,7 @@ const SparklineDisplay = (props) => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_ChartStateHandler.ChartStateHandler,
     {
+      ...behavioralTrackingProps,
       "data-testid": dataTestId ?? "sparkline-state-handler",
       empty: isEmpty,
       height: "100%",

package/charts/core/components/sparkline-display/types/sparkline-props.d.ts

@@ -1,3 +1,4 @@
+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';
@@ -28,7 +29,7 @@ export interface SparklineDatapointMetadata extends TimeseriesDatapoint {
  * Sparkline props
  * @public
  */
-export interface SparklineProps extends StylingProps, MaskingProps, DataTestId {
+export interface SparklineProps extends StylingProps, MaskingProps, DataTestId, BehaviorTrackingProps {
     /** Data to show */
     data: Timeseries | Timeseries[];
     /** Sparkline color */

package/charts/core/components/sparkline-display/utils/get-context-value-layout.js

@@ -21,8 +21,9 @@ __export(get_context_value_layout_exports, {
   getContextValueLayout: () => getContextValueLayout
 });
 module.exports = __toCommonJS(get_context_value_layout_exports);
+var import_chars_font_width_map = require("../../text-ellipsis/chars-font-width-map.js");
+var import_truncate_string = require("../../text-ellipsis/truncate-string.js");
 var import_constants = require("../constants.js");
-var import_get_context_value_width = require("./get-context-value-width.js");
 function getContextValueLayout({
   containerHeight,
   containerWidth,
@@ -33,14 +34,15 @@ function getContextValueLayout({
   labelsFixedWidth
 }) {
   const fontSizePx = containerHeight >= import_constants.FONT_SIZE_BREAKING_POINT ? "12px" : "9px";
+  const fontMap = containerHeight >= import_constants.FONT_SIZE_BREAKING_POINT ? import_chars_font_width_map.charsFontWidth12pixelsSize500Map : import_chars_font_width_map.charsFontWidth9pixelsSize500Map;
   let contextValueWidth = labelsFixedWidth;
   if (contextValueWidth === void 0) {
     const maxContextValueWidth = showContextValues ? Math.min(
-      (0, import_get_context_value_width.getContextValueWidth)(formattedContextMaxValue, fontSizePx),
+      Math.ceil((0, import_truncate_string.calculateWidth)(formattedContextMaxValue, fontMap)),
       import_constants.CONTEXT_VALUE_MAX_WIDTH
     ) : 0;
     const minContextValueWidth = showContextValues ? Math.min(
-      (0, import_get_context_value_width.getContextValueWidth)(formattedContextMinValue, fontSizePx),
+      Math.ceil((0, import_truncate_string.calculateWidth)(formattedContextMinValue, fontMap)),
       import_constants.CONTEXT_VALUE_MAX_WIDTH
     ) : 0;
     contextValueWidth = Math.max(maxContextValueWidth, minContextValueWidth) + 3;

package/charts/core/components/text-ellipsis/ChartTextEllipsis.css

@@ -1,4 +1,4 @@
-._ix5ox20-3-0-1 {
+._ix5ox20-3-1-0 {
   display: inline-block;
   box-sizing: border-box;
   vertical-align: middle;
@@ -9,25 +9,25 @@
   text-decoration: inherit;
   width: 100%;
 }
-._ix5ox21-3-0-1 {
+._ix5ox21-3-1-0 {
   text-overflow: ellipsis;
   direction: rtl;
   text-align: left;
 }
-._ix5ox21-3-0-1::after, ._ix5ox21-3-0-1::before {
+._ix5ox21-3-1-0::after, ._ix5ox21-3-1-0::before {
   content: "‎";
 }
-._ix5ox22-3-0-1 {
+._ix5ox22-3-1-0 {
   text-overflow: ellipsis;
 }
-._ix5ox24-3-0-1 {
+._ix5ox24-3-1-0 {
   position: relative;
   width: 100%;
   display: inline-block;
   vertical-align: middle;
   box-sizing: border-box;
 }
-._ix5ox24-3-0-1::after {
+._ix5ox24-3-1-0::after {
   content: attr(data-sourcetext) / "";
   color: transparent;
   display: table;
@@ -36,7 +36,7 @@
   user-select: none;
   overflow: hidden;
 }
-._ix5ox25-3-0-1 {
+._ix5ox25-3-1-0 {
   white-space: nowrap;
   display: block;
   overflow: hidden;

package/charts/core/components/text-ellipsis/ChartTextEllipsis.sty.js

@@ -25,6 +25,6 @@ __export(ChartTextEllipsis_css_exports, {
 module.exports = __toCommonJS(ChartTextEllipsis_css_exports);
 var import_ChartTextEllipsis_css_ts_vanilla = require("./ChartTextEllipsis.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var ellipsis = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_ix5ox20-3-0-1", variantClassNames: { truncationMode: { start: "_ix5ox21-3-0-1", end: "_ix5ox22-3-0-1", middle: "_ix5ox23-3-0-1" } }, defaultVariants: {}, compoundVariants: [] });
-var truncationContainer = "_ix5ox24-3-0-1";
-var truncationText = "_ix5ox25-3-0-1";
+var ellipsis = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_ix5ox20-3-1-0", variantClassNames: { truncationMode: { start: "_ix5ox21-3-1-0", end: "_ix5ox22-3-1-0", middle: "_ix5ox23-3-1-0" } }, defaultVariants: {}, compoundVariants: [] });
+var truncationContainer = "_ix5ox24-3-1-0";
+var truncationText = "_ix5ox25-3-1-0";

package/charts/core/components/text-ellipsis/chars-font-width-map.d.ts

@@ -28,3 +28,17 @@ export declare const charsFontWidth12pixelsSize600Map: FontWidthMap;
  * Font family: 'DynatraceFlow, Roboto, Helvetica, sans-serif'
  */
 export declare const charsFontWidth12pixelsSize700Map: FontWidthMap;
+/**
+ * Font size: '9px'
+ * Font weight: 500
+ * Font family: 'DynatraceFlow, Roboto, Helvetica, sans-serif'
+ * NOTE: Values scaled from 12px/500 map. Regenerate with buildFontWidthMap({ fontSize: 9, fontWeight: 500 }) for exact measurements.
+ */
+export declare const charsFontWidth9pixelsSize500Map: FontWidthMap;
+/**
+ * Font size: '16px'
+ * Font weight: 500
+ * Font family: 'DynatraceFlow, Roboto, Helvetica, sans-serif'
+ * NOTE: Values scaled from 12px/500 map. Regenerate with buildFontWidthMap({ fontSize: 16, fontWeight: 500 }) for exact measurements.
+ */
+export declare const charsFontWidth16pixelsSize500Map: FontWidthMap;